@vitejs/plugin-react-swc 3.5.0 → 3.7.0

package/README.md

@@ -56,7 +56,7 @@ Enable TypeScript decorators. Requires `experimentalDecorators` in tsconfig.
 react({ tsDecorators: true });
 ```
 
-## plugins
+### plugins
 
 Use SWC plugins. Enable SWC at build time.
 
@@ -64,7 +64,7 @@ Use SWC plugins. Enable SWC at build time.
 react({ plugins: [["@swc/plugin-styled-components", {}]] });
 ```
 
-## devTarget
+### devTarget
 
 Set the target for SWC in dev. This can avoid to down-transpile private class method for example.
 
@@ -76,6 +76,23 @@ For production target, see https://vitejs.dev/config/build-options.html#build-ta
 react({ devTarget: "es2022" });
 ```
 
+### parserConfig
+
+Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
+
+This requires to redefine the config for any file you want to be included (ts, mdx, ...).
+
+If you want to trigger fast refresh on compiled JS, use `jsx: true`. Exclusion of node_modules should be handled by the function if needed. Using this option to use JSX inside `.js` files is highly discouraged and can be removed in any future version.
+
+```ts
+react({
+  parserConfig(id) {
+    if (id.endsWith(".res")) return { syntax: "ecmascript", jsx: true };
+    if (id.endsWith(".ts")) return { syntax: "typescript", tsx: false };
+  },
+});
+```
+
 ## 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

@@ -14,6 +14,7 @@ var _dirname = typeof __dirname !== "undefined" ? __dirname : (0, import_path.di
 var resolve = (0, import_module.createRequire)(
   typeof __filename !== "undefined" ? __filename : import_meta.url
 ).resolve;
+var reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 var _a, _b;
 var isWebContainer = (_b = (_a = globalThis.process) == null ? void 0 : _a.versions) == null ? void 0 : _b.webcontainer;
@@ -23,7 +24,8 @@ var react = (_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,
-    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020"
+    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020",
+    parserConfig: _options == null ? void 0 : _options.parserConfig
   };
   return [
     {
@@ -45,8 +47,7 @@ var react = (_options) => {
         }
       }),
       configResolved(config) {
-        if (config.server.hmr === false)
-          hmrDisabled = true;
+        if (config.server.hmr === false) hmrDisabled = true;
         const mdxIndex = config.plugins.findIndex(
           (p) => p.name === "@mdx-js/rollup"
         );
@@ -86,14 +87,18 @@ var react = (_options) => {
             importSource: options.jsxImportSource
           }
         );
-        if (!result)
-          return;
-        if (!refresh || !refreshContentRE.test(result.code)) {
-          return result;
-        }
+        if (!result) return;
+        if (!refresh) return result;
+        const hasRefresh = refreshContentRE.test(result.code);
+        if (!hasRefresh && !reactCompRE.test(result.code)) return result;
+        const sourceMap = JSON.parse(result.map);
+        sourceMap.mappings = ";;" + sourceMap.mappings;
         result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
 
-if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
+${result.code}`;
+        if (hasRefresh) {
+          sourceMap.mappings = ";;;;;;" + sourceMap.mappings;
+          result.code = `if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
 const prevRefreshReg = window.$RefreshReg$;
 const prevRefreshSig = window.$RefreshSig$;
 window.$RefreshReg$ = RefreshRuntime.getRefreshReg("${id}");
@@ -103,17 +108,18 @@ ${result.code}
 
 window.$RefreshReg$ = prevRefreshReg;
 window.$RefreshSig$ = prevRefreshSig;
+`;
+        }
+        result.code += `
 RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
   RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
   import.meta.hot.accept((nextExports) => {
     if (!nextExports) return;
-    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate("${id}", currentExports, nextExports);
     if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
   });
 });
 `;
-        const sourceMap = JSON.parse(result.map);
-        sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
         return { code: result.code, map: sourceMap };
       }
     },
@@ -147,12 +153,11 @@ RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
 };
 var transformWithOptions = async (id, code, target, options, reactConfig) => {
   const decorators = (options == null ? void 0 : options.tsDecorators) ?? false;
-  const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") || id.endsWith(".mts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : id.endsWith(".mdx") ? (
+  const parser = options.parserConfig ? options.parserConfig(id) : id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") || id.endsWith(".mts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : id.endsWith(".mdx") ? (
     // JSX is required to trigger fast refresh transformations, even if MDX already transforms it
     { syntax: "ecmascript", jsx: true }
   ) : void 0;
-  if (!parser)
-    return;
+  if (!parser) return;
   let result;
   try {
     result = await (0, import_core.transform)(code, {

package/index.d.ts

@@ -1,4 +1,4 @@
-import { JscTarget } from "@swc/core";
+import { ParserConfig, JscTarget } from "@swc/core";
 import { PluginOption } from "vite";
 type Options = {
     /**
@@ -22,6 +22,13 @@ type Options = {
      * @default "es2020"
      */
     devTarget?: JscTarget;
+    /**
+     * Override the default include list (.ts, .tsx, .mts, .jsx, .mdx).
+     * This requires to redefine the config for any file you want to be included.
+     * If you want to trigger fast refresh on compiled JS, use `jsx: true`.
+     * Exclusion of node_modules should be handled by the function if needed.
+     */
+    parserConfig?: (id: string) => ParserConfig | undefined;
 };
 declare const react: (_options?: Options) => PluginOption[];
 export default react;

package/index.mjs

@@ -15,6 +15,7 @@ var _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToP
 var resolve = createRequire(
   typeof __filename !== "undefined" ? __filename : import.meta.url
 ).resolve;
+var reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
 var refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 var _a, _b;
 var isWebContainer = (_b = (_a = globalThis.process) == null ? void 0 : _a.versions) == null ? void 0 : _b.webcontainer;
@@ -24,7 +25,8 @@ var react = (_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,
-    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020"
+    devTarget: (_options == null ? void 0 : _options.devTarget) ?? "es2020",
+    parserConfig: _options == null ? void 0 : _options.parserConfig
   };
   return [
     {
@@ -46,8 +48,7 @@ var react = (_options) => {
         }
       }),
       configResolved(config) {
-        if (config.server.hmr === false)
-          hmrDisabled = true;
+        if (config.server.hmr === false) hmrDisabled = true;
         const mdxIndex = config.plugins.findIndex(
           (p) => p.name === "@mdx-js/rollup"
         );
@@ -87,14 +88,18 @@ var react = (_options) => {
             importSource: options.jsxImportSource
           }
         );
-        if (!result)
-          return;
-        if (!refresh || !refreshContentRE.test(result.code)) {
-          return result;
-        }
+        if (!result) return;
+        if (!refresh) return result;
+        const hasRefresh = refreshContentRE.test(result.code);
+        if (!hasRefresh && !reactCompRE.test(result.code)) return result;
+        const sourceMap = JSON.parse(result.map);
+        sourceMap.mappings = ";;" + sourceMap.mappings;
         result.code = `import * as RefreshRuntime from "${runtimePublicPath}";
 
-if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
+${result.code}`;
+        if (hasRefresh) {
+          sourceMap.mappings = ";;;;;;" + sourceMap.mappings;
+          result.code = `if (!window.$RefreshReg$) throw new Error("React refresh preamble was not loaded. Something is wrong.");
 const prevRefreshReg = window.$RefreshReg$;
 const prevRefreshSig = window.$RefreshSig$;
 window.$RefreshReg$ = RefreshRuntime.getRefreshReg("${id}");
@@ -104,17 +109,18 @@ ${result.code}
 
 window.$RefreshReg$ = prevRefreshReg;
 window.$RefreshSig$ = prevRefreshSig;
+`;
+        }
+        result.code += `
 RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
   RefreshRuntime.registerExportsForReactRefresh("${id}", currentExports);
   import.meta.hot.accept((nextExports) => {
     if (!nextExports) return;
-    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+    const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate("${id}", currentExports, nextExports);
     if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
   });
 });
 `;
-        const sourceMap = JSON.parse(result.map);
-        sourceMap.mappings = ";;;;;;;;" + sourceMap.mappings;
         return { code: result.code, map: sourceMap };
       }
     },
@@ -148,12 +154,11 @@ RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
 };
 var transformWithOptions = async (id, code, target, options, reactConfig) => {
   const decorators = (options == null ? void 0 : options.tsDecorators) ?? false;
-  const parser = id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") || id.endsWith(".mts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : id.endsWith(".mdx") ? (
+  const parser = options.parserConfig ? options.parserConfig(id) : id.endsWith(".tsx") ? { syntax: "typescript", tsx: true, decorators } : id.endsWith(".ts") || id.endsWith(".mts") ? { syntax: "typescript", tsx: false, decorators } : id.endsWith(".jsx") ? { syntax: "ecmascript", jsx: true } : id.endsWith(".mdx") ? (
     // JSX is required to trigger fast refresh transformations, even if MDX already transforms it
     { syntax: "ecmascript", jsx: true }
   ) : void 0;
-  if (!parser)
-    return;
+  if (!parser) return;
   let result;
   try {
     result = await transform(code, {

package/package.json

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

package/refresh-runtime.js

@@ -17,16 +17,16 @@ function computeFullKey(signature) {
     return signature.fullKey;
   }
   let fullKey = signature.ownKey;
-  let hooks;
+  let hooks2;
   try {
-    hooks = signature.getCustomHooks();
+    hooks2 = signature.getCustomHooks();
   } catch (err) {
     signature.forceReset = true;
     signature.fullKey = fullKey;
     return fullKey;
   }
-  for (let i = 0; i < hooks.length; i++) {
-    const hook = hooks[i];
+  for (let i = 0; i < hooks2.length; i++) {
+    const hook = hooks2[i];
     if (typeof hook !== "function") {
       signature.forceReset = true;
       signature.fullKey = fullKey;
@@ -374,8 +374,7 @@ function getRefreshReg(filename) {
 }
 function registerExportsForReactRefresh(filename, moduleExports) {
   for (const key in moduleExports) {
-    if (key === "__esModule")
-      continue;
+    if (key === "__esModule") continue;
     const exportValue = moduleExports[key];
     if (isLikelyComponentType(exportValue)) {
       register(exportValue, filename + " export " + key);
@@ -389,39 +388,54 @@ function debounce(fn, delay) {
     handle = setTimeout(fn, delay);
   };
 }
-const enqueueUpdate = debounce(performReactRefresh, 16);
-function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
-  if (!predicateOnExport(prevExports, (key) => key in nextExports)) {
+const hooks = [];
+window.__registerBeforePerformReactRefresh = (cb) => {
+  hooks.push(cb);
+};
+const enqueueUpdate = debounce(async () => {
+  if (hooks.length) await Promise.all(hooks.map((cb) => cb()));
+  performReactRefresh();
+}, 16);
+function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
+  var _a, _b;
+  const ignoredExports = (_b = (_a = window.__getReactRefreshIgnoredExports) == null ? void 0 : _a.call(window, { id })) != null ? _b : [];
+  if (predicateOnExport(
+    ignoredExports,
+    prevExports,
+    (key) => key in nextExports
+  ) !== true) {
     return "Could not Fast Refresh (export removed)";
   }
-  if (!predicateOnExport(nextExports, (key) => key in prevExports)) {
+  if (predicateOnExport(
+    ignoredExports,
+    nextExports,
+    (key) => key in prevExports
+  ) !== true) {
     return "Could not Fast Refresh (new export)";
   }
   let hasExports = false;
   const allExportsAreComponentsOrUnchanged = predicateOnExport(
+    ignoredExports,
     nextExports,
     (key, value) => {
       hasExports = true;
-      if (isLikelyComponentType(value))
-        return true;
+      if (isLikelyComponentType(value)) return true;
       return prevExports[key] === nextExports[key];
     }
   );
-  if (hasExports && allExportsAreComponentsOrUnchanged) {
+  if (hasExports && allExportsAreComponentsOrUnchanged === true) {
     enqueueUpdate();
   } else {
-    return "Could not Fast Refresh. Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports";
+    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react-swc#consistent-components-exports`;
   }
 }
-function predicateOnExport(moduleExports, predicate) {
+function predicateOnExport(ignoredExports, moduleExports, predicate) {
   for (const key in moduleExports) {
-    if (key === "__esModule")
-      continue;
+    if (key === "__esModule") continue;
+    if (ignoredExports.includes(key)) continue;
     const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
-    if (desc && desc.get)
-      return false;
-    if (!predicate(key, moduleExports[key]))
-      return false;
+    if (desc && desc.get) return key;
+    if (!predicate(key, moduleExports[key])) return key;
   }
   return true;
 }