feat: add devTarget option (fixes #141) (#149)

Author: ArnaudBarre

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Unreleased
 
+- Add `devTarget` option (fixes [#141](https://github.com/vitejs/vite-plugin-react-swc/issues/141))
 - Disable Fast Refresh based on `config.server.hmr === false` instead of `process.env.TEST`
 - Warn when plugin is in WebContainers (see [#118](https://github.com/vitejs/vite-plugin-react-swc/issues/118))
 - Better invalidation message when an export is added & fix HMR for export of nullish values ([#143](https://github.com/vitejs/vite-plugin-react-swc/issues/143))

README.md

@@ -40,6 +40,8 @@ This plugin has limited options to enable good performances and be transpiler ag
 
 Control where the JSX factory is imported from.
 
+`@default` "react"
+
 ```ts
 react({ jsxImportSource: "@emotion/react" });
 ```
@@ -48,6 +50,8 @@ react({ jsxImportSource: "@emotion/react" });
 
 Enable TypeScript decorators. Requires `experimentalDecorators` in tsconfig.
 
+`@default` false
+
 ```ts
 react({ tsDecorators: true });
 ```
@@ -60,6 +64,18 @@ Use SWC plugins. Enable SWC at build time.
 react({ plugins: [["@swc/plugin-styled-components", {}]] });
 ```
 
+## devTarget
+
+Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
+
+For production target, see https://vitejs.dev/config/build-options.html#build-target.
+
+`@default` "es2020"
+
+```ts
+react({ devTarget: "es2022" });
+```
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

src/index.ts

@@ -44,6 +44,12 @@ type Options = {
    * @default undefined
    */
   plugins?: [string, Record<string, any>][];
+  /**
+   * Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
+   * For production target, see https://vitejs.dev/config/build-options.html#build-target
+   * @default "es2020"
+   */
+  devTarget?: JscTarget;
 };
 
 const isWebContainer = globalThis.process?.versions?.webcontainer;
@@ -56,6 +62,7 @@ const react = (_options?: Options): PluginOption[] => {
     plugins: _options?.plugins
       ? _options?.plugins.map((el): typeof el => [resolve(el[0]), el[1]])
       : undefined,
+    devTarget: _options?.devTarget ?? "es2020",
   };
 
   return [
@@ -112,12 +119,18 @@ const react = (_options?: Options): PluginOption[] => {
         const id = _id.split("?")[0];
         const refresh = !transformOptions?.ssr && !hmrDisabled;
 
-        const result = await transformWithOptions(id, code, "es2020", options, {
-          refresh,
-          development: true,
-          runtime: "automatic",
-          importSource: options.jsxImportSource,
-        });
+        const result = await transformWithOptions(
+          id,
+          code,
+          options.devTarget,
+          options,
+          {
+            refresh,
+            development: true,
+            runtime: "automatic",
+            importSource: options.jsxImportSource,
+          },
+        );
         if (!result) return;
 
         if (!refresh || !refreshContentRE.test(result.code)) {