0.1.0 • Published 5 years ago

svelte-compose-preprocessors v0.1.0

Weekly downloads
26
License
MIT
Repository
github
Last release
5 years ago

svelte-compose-preprocessors

Composes an array of Svelte preprocessor functions into a single one, while composing source maps and merging dependencies.

Install

npm install --save-dev svelte-compose-preprocessors

Usage

If you're using the Svelte compiler API directly:

import * as svelte from 'svelte';
import compose from 'svelte-compose-preprocessors';
// assuming you've also imported the individual preprocessors below from somewhere

const processed = await svelte.preprocess(source, {
  markup: compose([
    pug(),
    minify()
  ]),

  style: compose([
    sass(),
    postcss()
  ]),

  script: compose([
    coffeescript(),
    terser()
  ])
});

If you're using Rollup with rollup-plugin-svelte:

import svelte from 'rollup-plugin-svelte';
import compose from 'svelte-compose-preprocessors';
// assuming you've also imported the individual preprocessors below from somewhere

export default {
  // ...
  plugins: [
    // ...
    svelte({
      preprocess: {
        markup: compose([
          pug(),
          minify()
        ]),

        style: compose([
          sass(),
          postcss()
        ]),

      	script: compose([
          coffeescript(),
          terser()
        ])
      }
    }),
    // ...
  ],
  // ...
};

API

svelte-compose-preprocessors exports a single function, compose, that takes an array of preprocessor functions that have the following function signature:

type Preprocessor = (options: PreprocessorOptions) => Promise<PreprocessorResult>;

where PreprocessorOptions and PreprocessorResult are defined as follows:

interface PreprocessorOptions {
	content: string;
	attributes: Record<string, string | boolean>;
	filename?: string;
}

interface PreprocessorResult {
	code: string;
	map?: SourceMap | string;
	dependencies?: Array<string>;
}

... and returns a single function with that signature:

import compose from 'svelte-compose-preprocessors';

const combined_preprocessor = compose([
  preprocessor_one,
  preprocessor_two,
  preprocessor_three
]);

The returned function composes intermediate source maps and merges all dependencies.

License

MIT