https://github.com/zheeeng/vite-plugin-plain-text

A Vite plugin transforms the rule-matched file as plain text.
https://github.com/zheeeng/vite-plugin-plain-text

plaintext plugin vite vite-plugin vite-plugin-plain-text vitejs

Last synced: 2 months ago
JSON representation

A Vite plugin transforms the rule-matched file as plain text.

• Host: GitHub
• URL: https://github.com/zheeeng/vite-plugin-plain-text
• Owner: zheeeng
• License: mit
• Created: 2021-05-31T15:07:17.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2023-02-02T03:26:44.000Z (almost 2 years ago)
• Last Synced: 2024-10-13T11:33:24.005Z (3 months ago)
• Topics: plaintext, plugin, vite, vite-plugin, vite-plugin-plain-text, vitejs
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/vite-plugin-plain-text
• Size: 52.7 KB
• Stars: 23
• Watchers: 3
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-plain-text

[![NPM](https://nodei.co/npm/vite-plugin-plain-text.png?downloads=true&downloadRank=true&stars=true)](https://nodei.co/npm/vite-plugin-plain-text/)

![publish workflow](https://github.com/zheeeng/vite-plugin-plain-text/actions/workflows/publish.yml/badge.svg)

[![npm version](https://img.shields.io/npm/v/vite-plugin-plain-text.svg)](https://www.npmjs.com/package/vite-plugin-plain-text)

A Vite plugin that transforms matched files into plain text.

## Installation

```bash

pnpm i -D vite-plugin-plain-text (or npm/yarn)

```

## Usage Example

Assume we are going to transform these files:

1. The project's `LICENSE` file

2. Textbox

3. `.glsl` file

into plain text.

```ts

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-plain-text';

export default defineConfig({

  plugins: [

    // passing regular expression or glob matcher

    plainText([/\/LICENSE$/, '**/*.text', /\.glsl$/]),

  ],

});

```

```js component.js

// component.js

import { plainText as LICENSE } from '../LICENSE'

import { plainText as Lorem } from '../lorem-ipsum.text'

import { plainText as Siren } from '../siren.glsl'

console.log(LICENSE)

console.log(Lorem)

console.log(Siren)

```

## Advanced Usage

### Options Reference

```ts

type PlainTextOptions = {

  namedExport?: string | false,

  dtsAutoGen?: boolean,

  distAutoClean?: boolean,

}

```

### Enable Default Export

Use the `plainTextOptions.namedExport` option to configure the named exported variable. To enable the default export, pass `false`, `''`, or `undefined`.

```ts

// vite.config.(t|j)s

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-plain-text';

export default defineConfig({

  plugins: [

    plainText(

      [/\/LICENSE$/, '**/*.text', /\.glsl$/],

      { namedExport: false },

    ),

  ],

});

```

```js component.js

// component.js

import LICENSE from '../LICENSE'

import Lorem from '../lorem-ipsum.text'

import Siren from '../siren.glsl'

console.log(LICENSE)

console.log(Lorem)

console.log(Siren)

```

### Type Safety

#### Adding Module Declarations Manually

```ts

// vite-env.d.ts

declare module '*/LICENSE' {

    export const plainText: string

}

declare module '*.text' {

    export const plainText: string

}

declare module '*.glsl' {

    export const plainText: string

}

```

#### Generate the declaration automatically

1. `plainTextOptions.dtsAutoGen` generates `.dts` files for matched files.

2. `plainTextOptions.dtsAutoClean` cleans up these `.dts` files after the vite plugin starts up each time.

```ts

import { defineConfig } from 'vite';

import plainText from 'vite-plugin-plain-text';

export default defineConfig({

  plugins: [

    plainText(

      [/\/LICENSE$/, '**/*.text', /\.glsl$/],

      { namedExport: false, dtsAutoGen: true, distAutoClean: true },

    ),

  ],

});

```

## License

MIT

## Alternative

Virtual asset Loader: [vite-plugin-virtual-plain-text](https://www.npmjs.com/package/vite-plugin-virtual-plain-text)