Package Exports

svelte-preprocess-esbuild
svelte-preprocess-esbuild/package.json

Readme

svelte-preprocess-esbuild

A Svelte Preprocessor to compile TypeScript via esbuild!

Gotchas

Currently, you cannot have variables using the same basename as an imported file. In other words, if you import a data.ts file into your component, any other data variables will be rewritten to a different local identifier. Here's an example:

<script lang="ts">
  import { count } from './data';
  export let data = count;
</script>

<div class="counter">
  <button on:click={() => data--}> - </button>
  <span>{ data }</span>
  <button on:click={() => data++}> + </button>
</div>

This is rewritten into:

<script>
  import { count } from './data';
  let data2 = count;
  export {
    data2 as data
  };
</script>

<div class="counter">
  <button on:click={() => data--}> - </button>
  <span>{ data }</span>
  <button on:click={() => data++}> + </button>
</div>

Notice the template still expects data – but only data2 is available locally within the script.

This is not limited to to exported properties. Any local variables – including references and reactive statements are vulernable to this. However, reactive assignments are not exposed to this:

import { count } from './data';
export let value = foo;

// SAFE - does not rewrite
$: data = value * 3;

// BROKEN - rewrites to `data2`
let data;
$: {
  data = value * 3;
}

Install

$ npm install svelte-preprocess-esbuild esbuild --save-dev

Note: esbuild is a peer dependency!

Usage

You can use svelte-preprocess-esbuild alongside svelte-preprocess!

Example: rollup.config.js

An example rollup.config.js, that uses this plugin alongside svelte-preprocess.

Important: When using svelte-preprocess (autoprecessor), you must pass false to its typescript option. Otherwise, your TypeScript <script>s will be compiled twice!

Please note that this is not a complete Rollup configuration!
Refer to rollup-plugin-svelte for more documentation.

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { typescript } from 'svelte-preprocess-esbuild';
import preprocess from 'svelte-preprocess';

export default {
  // ...
  plugins: [
    // ...
    svelte({
      preprocess: [
        typescript({
          target: 'es2020',
          define: {
            'process.browser': 'true'
          }
        }),
        // avoid double compile
        preprocess({ typescript: false }),
      ],
      compilerOptions: {
        // ...
      }
    })
  ]
}

Example: svelte.config.js

// svelte.config.js
const { typescript } = require('svelte-preprocess-esbuild');
const preprocess = require('svelte-preprocess');

module.exports = {
  preprocess: [
    typescript({
      // ...
    }),
    preprocess({
      // avoid double
      typescript: false
    })
  ],
  compilerOptions: {
    //
  }
}

API

typescript(options?)

Returns: PreprocessorGroup

Invoke esbuild on all <script> tags within your template that match any of the following:

a lang="ts" attribute
a lang="typescript" attribute
a type="application/typescript" attribute
a type="text/typescript" attribute
a type="application/ts" attribute
a type="text/ts" attribute
a non-external src="" attribute that ends with .ts extension

Additionally, whenever options.define is given a value, all <script> tags will be subject to replacements, including non-TypeScript contents!

options

Type: Object
Required: false

A limited subset of esbuild.TransformOptions is supported. These values are forced (for compatbility and/or reliability): minify, loader, format, and errorLimit.

Please see the exported Options interface for the full detail.

Below is the only option that this plugin adds:

options.tsconfig

Type: string
Default: tsconfig.json

Load a TypeScript configuration file. When found, is passed to esbuild as its tsconfigRaw option.

When a value is given, an error will be thrown if the file cannot be found and/or parsed correctly.

By default, attempts to autoload tsconfig.json, but will not throw if it's missing.

replace(dict)

Returns: PreprocessorGroup

Invoke esbuild on all non-TypeScript <script>s, applying any static string replacements.

Note: This preprocessor will ignore TypeScript contents!
If you are using any TypeScript at all, you should be using the typescript preprocessor with options.define instead.

dict

Type: Object

Your dictionary of key-value replacement pairs, where keys are replaced by their values.

Important: All values must be stringified!

// rollup.config.js
import svelte from 'rollup-plugin-svelte';
import { replace } from 'svelte-preprocess-esbuild';

export default {
  // ...
  plugins: [
    // ...
    svelte({
      preprocess: [
        replace({
          'process.browser': JSON.stringify(true),
          'process.env.BASEURL': JSON.stringify('https://foobar.com/'),
        })
      ]
    })
  ]
}

JSPM