vite-plugin-swc-transform

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 your tsconfig.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.

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'

Learn more;

Please open an issue if you think this is incorrect or should be improved.