vite-plugin-swc-transform v1.0.1
vite-plugin-swc-transform
Transform your TypeScript / JavaScript source files with SWC within your Vite build process.
- Sane defaults for TypeScript's legacy / experimental decorators & metadata.
- Full control over the rest of SWC's configuration.
Read the blog post relating the story which led to the creation of this plugin: TypeScript Legacy Experimental Decorators with Type Metadata in 2023.
Installation
npm i --save-dev vite-plugin-swc-transform
Usage
Note: This package is ESM-only.
Default SWC transform options
import { defineConfig } from "vite";
import swc from "vite-plugin-swc-transform";
export default defineConfig({
plugins: [swc()],
});
The plugin will default to the following options:
{
include: /\.tsx?$/,
exclude: /node_modules/,
swcOptions: {
{
swcrc: false,
configFile: false,
inputSourceMap: false,
sourceMaps: true
}
},
suppressLegacyDecoratorNoExplicitUDFCFWarning: false
}
Transform TypeScript Legacy / Experimental Decorators with Metadata
Example use case: build a package leveraging Nest style dependency injection with Reflect.metadata.
import { defineConfig } from "vite";
import swc from "vite-plugin-swc-transform";
export default defineConfig({
plugins: [
swc({
swcOptions: {
jsc: {
target: "es2022",
transform: {
legacyDecorator: true,
decoratorMetadata: true,
useDefineForClassFields: false,
},
// externalHelpers: true,
},
},
}),
],
});
Notes:
- should be used alongside
"compilerOptions.experimentalDecorators": true
&"compilerOptions.emitDecoratorMetadata": true
in yourtsconfig.json
. swcOptions.jsc.externalHelpers: true
is recommended when transforming TypeScript Legacy / Experimental Decorators with Metadata to avoid helpers duplication & limit bundle size impact.- adding the
@swc/helpers
dependency is then necessary.
- adding the
The above (without external helpers) will yield the following SWC transform options:
{
swcrc: false,
configFile: false,
inputSourceMap: false,
sourceMaps: true,
jsc: {
target: 'es2022',
transform: {
legacyDecorator: true,
decoratorMetadata: true,
useDefineForClassFields: false
},
keepClassNames: true,
parser: {
decorators: true,
decoratorsBeforeExport: true,
syntax: 'typescript'
}
}
}
Notes
- This plugin does not read, validate or infer from the project's
tsconfig.json
configuration. - This plugin is intended to be used with an inlined
swcOptions
SWC configuration object.
'useDefineForClassFields' warning
[vite-plugin-swc-transform] SWC option 'jsc.transform.legacyDecorator' enabled without an explicit 'jsc.transform.useDefineForClassFields' value.
To remove this warning, either:
- unset or disable SWC option 'jsc.transform.legacyDecorator' if not needed
- set an explicit value for SWC option 'jsc.transform.useDefineForClassFields: boolean'
- pass vite-plugin-swc-transform option 'suppressLegacyDecoratorNoExplicitUDFCFWarning: true'
Please open an issue if you think this is incorrect or should be improved.
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago