How to configure SWC options? To use Stage 3 decorators, for example.

[yay]

Hi,

Basically the question is this:

How can I test SWC Stage 3 decorator support when using React SWC plugin?

Some background:

SWC recently shipped with Stage 3 decorator support: https://swc.rs/docs/configuration/compilation#jsctransformdecoratorversion

I'd like to try it out with React SWC plugin, but I don't see where to pass those options. Simply creating .swcrc file (with the following contents) at the root of the project does nothing:

{
  "jsc": {
    "parser": {
      "syntax": "ecmascript",
      "decorators": true
    },
    "transform": {
      "decoratorVersion": "2022-03"
    }
  }
}

I also don't see a config to pass SWC options to the React SWC plugin:

import { PluginOption } from "vite";
type Options = {
    /**
     * Control where the JSX factory is imported from.
     * @default "react"
     */
    jsxImportSource?: string;
    /**
     * Enable TypeScript decorators. Requires experimentalDecorators in tsconfig.
     * @default false
     */
    tsDecorators?: boolean;
    /**
     * Use SWC plugins. Enable SWC at build time.
     * @default undefined
     */
    plugins?: [string, Record<string, any>][];
};
declare const react: (_options?: Options) => PluginOption[];
export default react;

I would expect being able to pass SWC options to the React SWC plugin like so, if the options in .swcrc file are not picked up when using SWC via the React SWC plugin:

plugins: [react({
  swcOptions: {
    "jsc": {
      "parser": {
        "syntax": "ecmascript",
        "decorators": true
      },
      "transform": {
        "decoratorVersion": "2022-03"
      }
    }
  }
})],

Any help is appreciated!

[ArnaudBarre]

Hi,

We decided to not support decorators for JS files: #60 (comment)

Seeing how much this spec has changed make me confortable with the idea that this should not be easy to use until shipped browser.

If you really want to use it with pure JS, the plugin is easy to patch

[yay]

@ArnaudBarre Thank you for your quick response. I'm actually trying to make use of Stage 3 decorators in a TypeScript (v5) project. From my understanding, Stage 3 decorators are transpiled to JS code that works in current browsers, as can be seen in the following example.

If you copy-paste the transpiled output into the console, you'll see the expected output mentioned in the official TS 5.0 announcement.

With that in mind, what do you think is still missing for Stage 3 decorators to be usable in a Vite/React/Typescript project?

[ArnaudBarre]

Oh I see. I need to look at how esbuild handles this, but as soon as esbuild also correctly handles the new decorator version for TS (maybe it already does) I will publish a major version that makes tsDecorators default to the standards

[yay]

I believe the work hasn't even started in esbuild: evanw/esbuild#104
But SWC shipped with initial support a few days ago. Some work is still outstanding though:
swc-project/swc#5053 (reply in thread)
swc-project/swc#7193
But from my understanding there's enough there already for decorators to be usable.

[ArnaudBarre]

Thanks for the links.
The proposal was merged 6 hours ago 😮

I will wait a week or two to see what API will be shipped in esbuild. Maybe this will be in a breaking version of esbuild, meaning that we will need to wait for Vite core to release a version with it so that the plugin can expect it.

If you want to try output the change in the meantime, you can patch the plugin to pass decoratorVersion to SWC and use plugins: [] to force the plugin to use SWC at build time so that decorators are transformed by SWC and not esbuild

[yay]

The proposal was merged 6 hours ago

I think it was initially thought to be ready a few months ago, followed by some normative updates:
microsoft/TypeScript#52582
tc39/proposal-decorators#499

If you want to try output the change in the meantime, you can patch the plugin to pass decoratorVersion to SWC and use plugins: [] to force the plugin to use SWC at build time so that decorators are transformed by SWC and not esbuild

Thank you. I'll give it a try!

[thenbe]

Were you able to use ecmascript decorators with vite?

[uinz]

If you want to use TS decorator and auto accessor, you can try unplugin-swc

import { defineConfig } from "vite";
import swc from "unplugin-swc";

export default defineConfig({
  plugins: [
    swc.vite({
      jsc: {
        parser: {
          syntax: "typescript",
          decorators: true,
        },
        transform: {
          decoratorMetadata: true,
          decoratorVersion: "2022-03",
          react: {
            runtime: "automatic",
          },
        },
      },
    }),
  ],
});

[AntonOfTheWoods]

@uinz can this be used with vite-plugin-react-swc, or is it intended to be used instead of it?

[uinz]

@uinz can this be used with vite-plugin-react-swc, or is it intended to be used instead of it?

esbuild 0.21.3 has implemented the ES decorator, so vite should support it by default.

Try locking the esbuild version at 0.21.3 (e.g. pnpm override)