@vitejs/plugin-react 4.3.1 → 4.3.3

package/dist/index.cjs

@@ -62,22 +62,26 @@ if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 }`;
-const sharedFooter = `
+const sharedFooter = (id) => `
 if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
-    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(
+  id
+)}, currentExports);
     import.meta.hot.accept((nextExports) => {
       if (!nextExports) return;
-      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(
+  id
+)}, currentExports, nextExports);
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });
   });
 }`;
 function addRefreshWrapper(code, id) {
-  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter(id);
 }
 function addClassComponentRefreshWrapper(code, id) {
-  return sharedHeader + code + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + code + sharedFooter(id);
 }
 
 let babel;
@@ -194,7 +198,7 @@ function viteReact(opts = {}) {
         // Required for esbuild.jsxDev to provide correct line numbers
         // This crates issues the react compiler because the re-order is too important
         // People should use @babel/plugin-transform-react-jsx-development to get back good line numbers
-        retainLines: hasCompiler(plugins) ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
+        retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
         parserOpts: {
           ...babelOptions.parserOpts,
           sourceType: "module",
@@ -221,10 +225,17 @@ function viteReact(opts = {}) {
       }
     }
   };
-  const dependencies = ["react", jsxImportDevRuntime, jsxImportRuntime];
+  const dependencies = [
+    "react",
+    "react-dom",
+    jsxImportDevRuntime,
+    jsxImportRuntime
+  ];
   const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
-  if (hasCompilerWithDefaultRuntime(staticBabelPlugins)) {
-    dependencies.push("react/compiler-runtime");
+  const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
+  if (reactCompilerPlugin != null) {
+    const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
+    dependencies.push(reactCompilerRuntimeModule);
   }
   const viteReactRefresh = {
     name: "vite:react-refresh",
@@ -268,6 +279,9 @@ const silenceUseClientWarning = (userConfig) => ({
       if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
         return;
       }
+      if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
+        return;
+      }
       if (userConfig.build?.rollupOptions?.onwarn) {
         userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
       } else {
@@ -306,15 +320,21 @@ function createBabelOptions(rawOptions) {
 function defined(value) {
   return value !== void 0;
 }
-function hasCompiler(plugins) {
-  return plugins.some(
+function getReactCompilerPlugin(plugins) {
+  return plugins.find(
     (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler"
   );
 }
-function hasCompilerWithDefaultRuntime(plugins) {
-  return plugins.some(
-    (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler" && p[1]?.runtimeModule === void 0
-  );
+function getReactCompilerRuntimeModule(plugin) {
+  let moduleName = "react/compiler-runtime";
+  if (Array.isArray(plugin)) {
+    if (plugin[1]?.target === "17" || plugin[1]?.target === "18") {
+      moduleName = "react-compiler-runtime";
+    } else if (typeof plugin[1]?.runtimeModule === "string") {
+      moduleName = plugin[1]?.runtimeModule;
+    }
+  }
+  return moduleName;
 }
 
 module.exports = viteReact;

package/dist/index.mjs

@@ -54,22 +54,26 @@ if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 }`;
-const sharedFooter = `
+const sharedFooter = (id) => `
 if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
-    RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
+    RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(
+  id
+)}, currentExports);
     import.meta.hot.accept((nextExports) => {
       if (!nextExports) return;
-      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports);
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(
+  id
+)}, currentExports, nextExports);
       if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
     });
   });
 }`;
 function addRefreshWrapper(code, id) {
-  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter(id);
 }
 function addClassComponentRefreshWrapper(code, id) {
-  return sharedHeader + code + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + code + sharedFooter(id);
 }
 
 let babel;
@@ -186,7 +190,7 @@ function viteReact(opts = {}) {
         // Required for esbuild.jsxDev to provide correct line numbers
         // This crates issues the react compiler because the re-order is too important
         // People should use @babel/plugin-transform-react-jsx-development to get back good line numbers
-        retainLines: hasCompiler(plugins) ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
+        retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
         parserOpts: {
           ...babelOptions.parserOpts,
           sourceType: "module",
@@ -213,10 +217,17 @@ function viteReact(opts = {}) {
       }
     }
   };
-  const dependencies = ["react", jsxImportDevRuntime, jsxImportRuntime];
+  const dependencies = [
+    "react",
+    "react-dom",
+    jsxImportDevRuntime,
+    jsxImportRuntime
+  ];
   const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
-  if (hasCompilerWithDefaultRuntime(staticBabelPlugins)) {
-    dependencies.push("react/compiler-runtime");
+  const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
+  if (reactCompilerPlugin != null) {
+    const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
+    dependencies.push(reactCompilerRuntimeModule);
   }
   const viteReactRefresh = {
     name: "vite:react-refresh",
@@ -260,6 +271,9 @@ const silenceUseClientWarning = (userConfig) => ({
       if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
         return;
       }
+      if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
+        return;
+      }
       if (userConfig.build?.rollupOptions?.onwarn) {
         userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
       } else {
@@ -298,15 +312,21 @@ function createBabelOptions(rawOptions) {
 function defined(value) {
   return value !== void 0;
 }
-function hasCompiler(plugins) {
-  return plugins.some(
+function getReactCompilerPlugin(plugins) {
+  return plugins.find(
     (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler"
   );
 }
-function hasCompilerWithDefaultRuntime(plugins) {
-  return plugins.some(
-    (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler" && p[1]?.runtimeModule === void 0
-  );
+function getReactCompilerRuntimeModule(plugin) {
+  let moduleName = "react/compiler-runtime";
+  if (Array.isArray(plugin)) {
+    if (plugin[1]?.target === "17" || plugin[1]?.target === "18") {
+      moduleName = "react-compiler-runtime";
+    } else if (typeof plugin[1]?.runtimeModule === "string") {
+      moduleName = plugin[1]?.runtimeModule;
+    }
+  }
+  return moduleName;
 }
 
 export { viteReact as default };

package/dist/refreshUtils.js

@@ -7,7 +7,14 @@ function debounce(fn, delay) {
 }
 
 /* eslint-disable no-undef */
-const enqueueUpdate = debounce(exports.performReactRefresh, 16)
+const hooks = []
+window.__registerBeforePerformReactRefresh = (cb) => {
+  hooks.push(cb)
+}
+const enqueueUpdate = debounce(async () => {
+  if (hooks.length) await Promise.all(hooks.map((cb) => cb()))
+  exports.performReactRefresh()
+}, 16)
 
 // Taken from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/lib/runtime/RefreshUtils.js#L141
 // This allows to resister components not detected by SWC like styled component
@@ -25,16 +32,30 @@ function registerExportsForReactRefresh(filename, moduleExports) {
   }
 }
 
-function validateRefreshBoundaryAndEnqueueUpdate(prevExports, nextExports) {
-  if (!predicateOnExport(prevExports, (key) => key in nextExports)) {
+function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
+  const ignoredExports = window.__getReactRefreshIgnoredExports?.({ id }) ?? []
+  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
@@ -42,19 +63,20 @@ 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/tree/main/packages/plugin-react#consistent-components-exports'
+    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#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
-    if (!predicate(key, moduleExports[key])) return false
+    if (desc && desc.get) return key
+    if (!predicate(key, moduleExports[key])) return key
   }
   return true
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.3.1",
+  "version": "4.3.3",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -38,9 +38,9 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.24.5",
-    "@babel/plugin-transform-react-jsx-self": "^7.24.5",
-    "@babel/plugin-transform-react-jsx-source": "^7.24.1",
+    "@babel/core": "^7.25.2",
+    "@babel/plugin-transform-react-jsx-self": "^7.24.7",
+    "@babel/plugin-transform-react-jsx-source": "^7.24.7",
     "@types/babel__core": "^7.20.5",
     "react-refresh": "^0.14.2"
   },