zheeeng / vite-plugin-plain-text

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

vite-plugin-plain-text

A Vite plugin that transforms matched files into plain text.

Installation

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.

// 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$/]),
  ],
});

// 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

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.

// 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 },
    ),
  ],
});

// 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

// 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.

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