@vitejs/plugin-react-swc 3.4.1 → 3.6.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

@@ -23,7 +23,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 [
     {
@@ -40,7 +41,8 @@ var react = (_options) => {
       config: () => ({
         esbuild: false,
         optimizeDeps: {
-          include: [`${options.jsxImportSource}/jsx-dev-runtime`]
+          include: [`${options.jsxImportSource}/jsx-dev-runtime`],
+          esbuildOptions: { jsx: "automatic" }
         }
       }),
       configResolved(config) {
@@ -106,7 +108,7 @@ 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);
   });
 });
@@ -146,7 +148,7 @@ 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;

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

@@ -24,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 [
     {
@@ -41,7 +42,8 @@ var react = (_options) => {
       config: () => ({
         esbuild: false,
         optimizeDeps: {
-          include: [`${options.jsxImportSource}/jsx-dev-runtime`]
+          include: [`${options.jsxImportSource}/jsx-dev-runtime`],
+          esbuildOptions: { jsx: "automatic" }
         }
       }),
       configResolved(config) {
@@ -107,7 +109,7 @@ 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);
   });
 });
@@ -147,7 +149,7 @@ 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;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vitejs/plugin-react-swc",
   "description": "Speed up your Vite dev server with SWC",
-  "version": "3.4.1",
+  "version": "3.6.0",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "license": "MIT",
   "repository": "github:vitejs/vite-plugin-react-swc",
@@ -25,9 +25,9 @@
     "fast refresh"
   ],
   "peerDependencies": {
-    "vite": "^4"
+    "vite": "^4 || ^5"
   },
   "dependencies": {
-    "@swc/core": "^1.3.95"
+    "@swc/core": "^1.3.107"
   }
 }

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;
@@ -389,16 +389,35 @@ 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;
@@ -407,21 +426,23 @@ function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
       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 (ignoredExports.includes(key))
+      continue;
     const desc = Object.getOwnPropertyDescriptor(moduleExports, key);
     if (desc && desc.get)
-      return false;
+      return key;
     if (!predicate(key, moduleExports[key]))
-      return false;
+      return key;
   }
   return true;
 }