@vitejs/plugin-react-swc 3.3.1 → 3.4.0

package/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).

package/index.cjs

@@ -15,11 +15,15 @@ var resolve = (0, import_module.createRequire)(
   typeof __filename !== "undefined" ? __filename : import_meta.url
 ).resolve;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+var _a, _b;
+var isWebContainer = (_b = (_a = globalThis.process) == null ? void 0 : _a.versions) == null ? void 0 : _b.webcontainer;
 var react = (_options) => {
+  let hmrDisabled = false;
   const options = {
     jsxImportSource: (_options == null ? void 0 : _options.jsxImportSource) ?? "react",
     tsDecorators: _options == null ? void 0 : _options.tsDecorators,
-    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0
+    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0,
+    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020"
   };
   return [
     {
@@ -40,6 +44,8 @@ var react = (_options) => {
         }
       }),
       configResolved(config) {
+        if (config.server.hmr === false)
+          hmrDisabled = true;
         const mdxIndex = config.plugins.findIndex(
           (p) => p.name === "@mdx-js/rollup"
         );
@@ -48,6 +54,11 @@ var react = (_options) => {
             "[vite:react-swc] The MDX plugin should be placed before this plugin"
           );
         }
+        if (isWebContainer) {
+          config.logger.warn(
+            "[vite:react-swc] SWC is currently not supported in WebContainers. You can use the default React plugin instead."
+          );
+        }
       },
       transformIndexHtml: (_, config) => [
         {
@@ -61,15 +72,22 @@ var react = (_options) => {
       ],
       async transform(code, _id, transformOptions) {
         const id = _id.split("?")[0];
-        const result = await transformWithOptions(id, code, "es2020", options, {
-          refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
-          development: true,
-          runtime: "automatic",
-          importSource: options.jsxImportSource
-        });
+        const refresh = !(transformOptions == null ? void 0 : transformOptions.ssr) && !hmrDisabled;
+        const result = await transformWithOptions(
+          id,
+          code,
+          options.devTarget,
+          options,
+          {
+            refresh,
+            development: true,
+            runtime: "automatic",
+            importSource: options.jsxImportSource
+          }
+        );
         if (!result)
           return;
-        if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
+        if (!refresh || !refreshContentRE.test(result.code)) {
           return result;
         }
         result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
@@ -168,11 +186,11 @@ var transformWithOptions = async (id, code, target, options, reactConfig) => {
 var silenceUseClientWarning = (userConfig) => ({
   rollupOptions: {
     onwarn(warning, defaultHandler) {
-      var _a, _b;
+      var _a2, _b2;
       if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
         return;
       }
-      if ((_b = (_a = userConfig.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.onwarn) {
+      if ((_b2 = (_a2 = userConfig.build) == null ? void 0 : _a2.rollupOptions) == null ? void 0 : _b2.onwarn) {
         userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
       } else {
         defaultHandler(warning);

package/index.d.ts

@@ -1,3 +1,4 @@
+import { JscTarget } from "@swc/core";
 import { PluginOption } from "vite";
 type Options = {
     /**
@@ -15,6 +16,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;
 };
 declare const react: (_options?: Options) => PluginOption[];
 export default react;

package/index.mjs

@@ -16,11 +16,15 @@ var resolve = createRequire(
   typeof __filename !== "undefined" ? __filename : import.meta.url
 ).resolve;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+var _a, _b;
+var isWebContainer = (_b = (_a = globalThis.process) == null ? void 0 : _a.versions) == null ? void 0 : _b.webcontainer;
 var react = (_options) => {
+  let hmrDisabled = false;
   const options = {
     jsxImportSource: (_options == null ? void 0 : _options.jsxImportSource) ?? "react",
     tsDecorators: _options == null ? void 0 : _options.tsDecorators,
-    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0
+    plugins: (_options == null ? void 0 : _options.plugins) ? _options == null ? void 0 : _options.plugins.map((el) => [resolve(el[0]), el[1]]) : void 0,
+    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020"
   };
   return [
     {
@@ -41,6 +45,8 @@ var react = (_options) => {
         }
       }),
       configResolved(config) {
+        if (config.server.hmr === false)
+          hmrDisabled = true;
         const mdxIndex = config.plugins.findIndex(
           (p) => p.name === "@mdx-js/rollup"
         );
@@ -49,6 +55,11 @@ var react = (_options) => {
             "[vite:react-swc] The MDX plugin should be placed before this plugin"
           );
         }
+        if (isWebContainer) {
+          config.logger.warn(
+            "[vite:react-swc] SWC is currently not supported in WebContainers. You can use the default React plugin instead."
+          );
+        }
       },
       transformIndexHtml: (_, config) => [
         {
@@ -62,15 +73,22 @@ var react = (_options) => {
       ],
       async transform(code, _id, transformOptions) {
         const id = _id.split("?")[0];
-        const result = await transformWithOptions(id, code, "es2020", options, {
-          refresh: !(transformOptions == null ? void 0 : transformOptions.ssr),
-          development: true,
-          runtime: "automatic",
-          importSource: options.jsxImportSource
-        });
+        const refresh = !(transformOptions == null ? void 0 : transformOptions.ssr) && !hmrDisabled;
+        const result = await transformWithOptions(
+          id,
+          code,
+          options.devTarget,
+          options,
+          {
+            refresh,
+            development: true,
+            runtime: "automatic",
+            importSource: options.jsxImportSource
+          }
+        );
         if (!result)
           return;
-        if ((transformOptions == null ? void 0 : transformOptions.ssr) || !refreshContentRE.test(result.code)) {
+        if (!refresh || !refreshContentRE.test(result.code)) {
           return result;
         }
         result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
@@ -169,11 +187,11 @@ var transformWithOptions = async (id, code, target, options, reactConfig) => {
 var silenceUseClientWarning = (userConfig) => ({
   rollupOptions: {
     onwarn(warning, defaultHandler) {
-      var _a, _b;
+      var _a2, _b2;
       if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
         return;
       }
-      if ((_b = (_a = userConfig.build) == null ? void 0 : _a.rollupOptions) == null ? void 0 : _b.onwarn) {
+      if ((_b2 = (_a2 = userConfig.build) == null ? void 0 : _a2.rollupOptions) == null ? void 0 : _b2.onwarn) {
         userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
       } else {
         defaultHandler(warning);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/plugin-react-swc",
   "description": "Speed up your Vite dev server with SWC",
-  "version": "3.3.1",
+  "version": "3.4.0",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "repository": "github:vitejs/vite-plugin-react-swc",
@@ -28,6 +28,6 @@
     "vite": "^4"
   },
   "dependencies": {
-    "@swc/core": "^1.3.56"
+    "@swc/core": "^1.3.85"
   }
 }

package/refresh-runtime.js

@@ -391,9 +391,12 @@ function debounce(fn, delay) {
 }
 const enqueueUpdate = debounce(performReactRefresh, 16);
 function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
-  if (!predicateOnExport(prevExports, (key) => !!nextExports[key])) {
+  if (!predicateOnExport(prevExports, (key) => key in nextExports)) {
     return "Could not Fast Refresh (export removed)";
   }
+  if (!predicateOnExport(nextExports, (key) => key in prevExports)) {
+    return "Could not Fast Refresh (new export)";
+  }
   let hasExports = false;
   const allExportsAreComponentsOrUnchanged = predicateOnExport(
     nextExports,
@@ -401,8 +404,6 @@ function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
       hasExports = true;
       if (isLikelyComponentType(value))
         return true;
-      if (!prevExports[key])
-        return false;
       return prevExports[key] === nextExports[key];
     }
   );