@z-code/vite-plugin-swc

@z-code/vite-plugin-swc

A Vite plugin that transforms TypeScript and JavaScript source files using SWC during the build process. SWC is a super-fast Rust-based compiler that significantly accelerates your build times compared to traditional Babel or tsc compilation.

✨ Features

• ⚡ Blazing Fast: Leverages SWC's Rust-based compilation for faster builds

• 🔧 Flexible Configuration: Supports both inline options and .swcrc configuration files

• 🎯 TypeScript First: Excellent TypeScript support with decorators and metadata

• 🔌 Seamless Integration: Works out of the box with Vite's build pipeline

• 🛠 Modern JavaScript: Supports latest ECMAScript features including top-level await

📦 Installation

yarn

yarn add @z-code/vite-plugin-swc --dev

pnpm

pnpm add @z-code/vite-plugin-swc --save-dev

npm

npm install @z-code/vite-plugin-swc --save-dev

🚀 Basic Usage

Add the plugin to your Vite configuration:

// vite.config.ts
import { defineConfig } from "vite";
import swc from "@z-code/vite-plugin-swc";

export default defineConfig({
  plugins: [swc()],
});

⚙️ Configuration

Default Configuration

When no options are provided, the plugin uses the following defaults:

{
  include: /\.ts?$/,
  exclude: "node_modules",
  swcrc: false,
  configFile: false,
  minify: true,
  jsc: {
    parser: {
      syntax: "typescript",
      decorators: true,
    },
    transform: {
      decoratorMetadata: true,
      decoratorVersion: "2022-03",
    },
  },
}

This configuration provides:

• TypeScript support with modern decorators (Stage 3)

• Decorator metadata transformation

• Minification enabled by default

• Top-level await support

Custom Configuration

You can override any of the default options:

// vite.config.ts
import { defineConfig } from "vite";
import swc from "@z-code/vite-plugin-swc";

export default defineConfig({
  plugins: [
    swc({
      include: /\.(ts|tsx|js|jsx)?$/,
      exclude: /node_modules/,
      minify: process.env.NODE_ENV === "production",
      jsc: {
        parser: {
          syntax: "typescript",
          tsx: true,
          decorators: true,
        },
        transform: {
          react: {
            runtime: "automatic",
          },
          decoratorMetadata: true,
          decoratorVersion: "2022-03",
        },
      },
    }),
  ],
});

Using .swcrc Configuration File

If you prefer to use a configuration file, set swcrc and configFile to true:

// vite.config.ts
import { defineConfig } from "vite";
import swc from "@z-code/vite-plugin-swc";

export default defineConfig({
  plugins: [
    swc({
      include: /\.ts?$/,
      swcrc: true,
      configFile: true,
    }),
  ],
});

Then create a .swcrc file in your project root:

{
  "$schema": "https://json.schemastore.org/swcrc",
  "exclude": "node_modules",
  "jsc": {
    "parser": {
      "syntax": "typescript",
      "decorators": true,
      "dynamicImport": true
    },
    "transform": {
      "decoratorMetadata": true,
      "decoratorVersion": "2022-03"
    },
    "target": "es2022",
    "loose": false,
    "externalHelpers": false
  },
  "minify": true
}

🎯 Use Cases

1. Faster TypeScript Builds

Replace tsc with SWC for significantly faster TypeScript compilation during production builds.

2. Modern Decorator Support

Use the latest decorator syntax (Stage 3) with metadata reflection.

3. Library Development

Build libraries with optimized output and modern JavaScript features.

4. Large Projects

Speed up build times in large codebases where traditional TypeScript compilation becomes a bottleneck.

🔄 Migration from vite-plugin-swc-transform

This plugin is a fork of vite-plugin-swc-transform. The migration is straightforward:

• Install the new package:

npm uninstall vite-plugin-swc-transform

npm install @z-code/vite-plugin-swc --save-dev

• Update your Vite config import:

- import swc from "vite-plugin-swc-transform"
+ import swc from "@z-code/vite-plugin-swc"

• Enjoy improved performance and additional features!

🤝 Acknowledgements

This project is a fork of vite-plugin-swc-transform. Special thanks to Timothée “Tim” Pillard for the original implementation and great work.

📚 Additional Resources

SWC Documentation

Vite Plugin Development Guide

TypeScript Decorators Proposal

SWC Configuration Schema

🐛 Issues and Contributions

Found a bug or have a feature request? Please open an issue on GitHub.

Contributions are welcome! Please feel free to submit a Pull Request.