A Svelte Preprocessor to compile TypeScript via
esbuild
!
$ npm install svelte-preprocess-esbuild esbuild --save-dev
Note:
esbuild
is a peer dependency!
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
(autopreprocessor), you must passfalse
to itstypescript
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: {
//
}
}
Returns: PreprocessorGroup
Invoke esbuild
on all <script>
tags within your template that match any of the following:
lang="ts"
attributelang="typescript"
attributetype="application/typescript"
attributetype="text/typescript"
attributetype="application/ts"
attributetype="text/ts"
attributesrc=""
attribute that ends with .ts
extensionAdditionally, whenever options.define
is given a value, all <script>
tags will be subject to replacements, including non-TypeScript contents!
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:
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.
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 thetypescript
preprocessor withoptions.define
instead.
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/'),
})
]
})
]
}
MIT © Luke Edwards