@vitejs/plugin-react 4.2.0 → 4.3.0

package/README.md

@@ -2,7 +2,7 @@
 
 The default Vite plugin for React projects.
 
-- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development
+- enable [Fast Refresh](https://www.npmjs.com/package/react-refresh) in development (requires react >= 16.9)
 - use the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)
 - use custom Babel plugins/presets
 - small installation size
@@ -46,7 +46,7 @@ Control where the JSX factory is imported from. Default to `'react'`
 react({ jsxImportSource: '@emotion/react' })
 ```
 
-## jsxRuntime
+### jsxRuntime
 
 By default, the plugin uses the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). However, if you encounter any issues, you may opt out using the `jsxRuntime` option.
 

package/dist/index.cjs

@@ -33,10 +33,12 @@ window.$RefreshReg$ = () => {}
 window.$RefreshSig$ = () => (type) => type
 window.__vite_plugin_react_preamble_installed__ = true
 `;
-const header = `
+const sharedHeader = `
 import RefreshRuntime from "${runtimePublicPath}";
 
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+`.replace(/\n+/g, "");
+const functionHeader = `
 let prevRefreshReg;
 let prevRefreshSig;
 
@@ -55,11 +57,13 @@ if (import.meta.hot && !inWebWorker) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
-const footer = `
+const functionFooter = `
 if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-
+}`;
+const sharedFooter = `
+if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
     import.meta.hot.accept((nextExports) => {
@@ -70,7 +74,10 @@ if (import.meta.hot && !inWebWorker) {
   });
 }`;
 function addRefreshWrapper(code, id) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+}
+function addClassComponentRefreshWrapper(code, id) {
+  return sharedHeader + code + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
 }
 
 let babel;
@@ -80,6 +87,7 @@ async function loadBabel() {
   }
   return babel;
 }
+const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
@@ -184,7 +192,9 @@ function viteReact(opts = {}) {
         filename: id,
         sourceFileName: filepath,
         // Required for esbuild.jsxDev to provide correct line numbers
-        retainLines: !isProduction && isJSX && opts.jsxRuntime !== "classic",
+        // 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",
         parserOpts: {
           ...babelOptions.parserOpts,
           sourceType: "module",
@@ -200,23 +210,29 @@ function viteReact(opts = {}) {
       });
       if (result) {
         let code2 = result.code;
-        if (useFastRefresh && refreshContentRE.test(code2)) {
-          code2 = addRefreshWrapper(code2, id);
+        if (useFastRefresh) {
+          if (refreshContentRE.test(code2)) {
+            code2 = addRefreshWrapper(code2, id);
+          } else if (reactCompRE.test(code2)) {
+            code2 = addClassComponentRefreshWrapper(code2, id);
+          }
         }
         return { code: code2, map: result.map };
       }
     }
   };
+  const dependencies = ["react", jsxImportDevRuntime, jsxImportRuntime];
+  const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
+  if (hasCompiler(staticBabelPlugins)) {
+    dependencies.push("react/compiler-runtime");
+  }
   const viteReactRefresh = {
     name: "vite:react-refresh",
     enforce: "pre",
     config: (userConfig) => ({
       build: silenceUseClientWarning(userConfig),
       optimizeDeps: {
-        // We can't add `react-dom` because the dependency is `react-dom/client`
-        // for React 18 while it's `react-dom` for React 17. We'd need to detect
-        // what React version the user has installed.
-        include: ["react", jsxImportDevRuntime, jsxImportRuntime]
+        include: dependencies
       },
       resolve: {
         dedupe: ["react", "react-dom"]
@@ -290,6 +306,11 @@ function createBabelOptions(rawOptions) {
 function defined(value) {
   return value !== void 0;
 }
+function hasCompiler(plugins) {
+  return plugins.some(
+    (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler"
+  );
+}
 
 module.exports = viteReact;
 module.exports.default = viteReact;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import { TransformOptions, ParserOptions } from '@babel/core';
-import { ResolvedConfig, PluginOption } from 'vite';
+import { PluginOption, ResolvedConfig } from 'vite';
 
 interface Options {
     include?: string | RegExp | Array<string | RegExp>;
@@ -40,19 +40,15 @@ type ReactBabelHookContext = {
     ssr: boolean;
     id: string;
 };
-declare module 'vite' {
-    interface Plugin {
-        api?: {
-            /**
-             * Manipulate the Babel options of `@vitejs/plugin-react`
-             */
-            reactBabel?: ReactBabelHook;
-        };
-    }
-}
+type ViteReactPluginApi = {
+    /**
+     * Manipulate the Babel options of `@vitejs/plugin-react`
+     */
+    reactBabel?: ReactBabelHook;
+};
 declare function viteReact(opts?: Options): PluginOption[];
 declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
+export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 import { TransformOptions, ParserOptions } from '@babel/core';
-import { ResolvedConfig, PluginOption } from 'vite';
+import { PluginOption, ResolvedConfig } from 'vite';
 
 interface Options {
     include?: string | RegExp | Array<string | RegExp>;
@@ -40,19 +40,15 @@ type ReactBabelHookContext = {
     ssr: boolean;
     id: string;
 };
-declare module 'vite' {
-    interface Plugin {
-        api?: {
-            /**
-             * Manipulate the Babel options of `@vitejs/plugin-react`
-             */
-            reactBabel?: ReactBabelHook;
-        };
-    }
-}
+type ViteReactPluginApi = {
+    /**
+     * Manipulate the Babel options of `@vitejs/plugin-react`
+     */
+    reactBabel?: ReactBabelHook;
+};
 declare function viteReact(opts?: Options): PluginOption[];
 declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
+export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { TransformOptions, ParserOptions } from '@babel/core';
-import { ResolvedConfig, PluginOption } from 'vite';
+import { PluginOption, ResolvedConfig } from 'vite';
 
 interface Options {
     include?: string | RegExp | Array<string | RegExp>;
@@ -40,19 +40,15 @@ type ReactBabelHookContext = {
     ssr: boolean;
     id: string;
 };
-declare module 'vite' {
-    interface Plugin {
-        api?: {
-            /**
-             * Manipulate the Babel options of `@vitejs/plugin-react`
-             */
-            reactBabel?: ReactBabelHook;
-        };
-    }
-}
+type ViteReactPluginApi = {
+    /**
+     * Manipulate the Babel options of `@vitejs/plugin-react`
+     */
+    reactBabel?: ReactBabelHook;
+};
 declare function viteReact(opts?: Options): PluginOption[];
 declare namespace viteReact {
     var preambleCode: string;
 }
 
-export { type BabelOptions, type Options, type ReactBabelOptions, viteReact as default };
+export { type BabelOptions, type Options, type ReactBabelOptions, type ViteReactPluginApi, viteReact as default };

package/dist/index.mjs

@@ -25,10 +25,12 @@ window.$RefreshReg$ = () => {}
 window.$RefreshSig$ = () => (type) => type
 window.__vite_plugin_react_preamble_installed__ = true
 `;
-const header = `
+const sharedHeader = `
 import RefreshRuntime from "${runtimePublicPath}";
 
 const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
+`.replace(/\n+/g, "");
+const functionHeader = `
 let prevRefreshReg;
 let prevRefreshSig;
 
@@ -47,11 +49,13 @@ if (import.meta.hot && !inWebWorker) {
   };
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
-const footer = `
+const functionFooter = `
 if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
-
+}`;
+const sharedFooter = `
+if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
     import.meta.hot.accept((nextExports) => {
@@ -62,7 +66,10 @@ if (import.meta.hot && !inWebWorker) {
   });
 }`;
 function addRefreshWrapper(code, id) {
-  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
+  return sharedHeader + functionHeader.replace("__SOURCE__", JSON.stringify(id)) + code + functionFooter + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
+}
+function addClassComponentRefreshWrapper(code, id) {
+  return sharedHeader + code + sharedFooter.replace("__SOURCE__", JSON.stringify(id));
 }
 
 let babel;
@@ -72,6 +79,7 @@ async function loadBabel() {
   }
   return babel;
 }
+const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
@@ -176,7 +184,9 @@ function viteReact(opts = {}) {
         filename: id,
         sourceFileName: filepath,
         // Required for esbuild.jsxDev to provide correct line numbers
-        retainLines: !isProduction && isJSX && opts.jsxRuntime !== "classic",
+        // 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",
         parserOpts: {
           ...babelOptions.parserOpts,
           sourceType: "module",
@@ -192,23 +202,29 @@ function viteReact(opts = {}) {
       });
       if (result) {
         let code2 = result.code;
-        if (useFastRefresh && refreshContentRE.test(code2)) {
-          code2 = addRefreshWrapper(code2, id);
+        if (useFastRefresh) {
+          if (refreshContentRE.test(code2)) {
+            code2 = addRefreshWrapper(code2, id);
+          } else if (reactCompRE.test(code2)) {
+            code2 = addClassComponentRefreshWrapper(code2, id);
+          }
         }
         return { code: code2, map: result.map };
       }
     }
   };
+  const dependencies = ["react", jsxImportDevRuntime, jsxImportRuntime];
+  const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
+  if (hasCompiler(staticBabelPlugins)) {
+    dependencies.push("react/compiler-runtime");
+  }
   const viteReactRefresh = {
     name: "vite:react-refresh",
     enforce: "pre",
     config: (userConfig) => ({
       build: silenceUseClientWarning(userConfig),
       optimizeDeps: {
-        // We can't add `react-dom` because the dependency is `react-dom/client`
-        // for React 18 while it's `react-dom` for React 17. We'd need to detect
-        // what React version the user has installed.
-        include: ["react", jsxImportDevRuntime, jsxImportRuntime]
+        include: dependencies
       },
       resolve: {
         dedupe: ["react", "react-dom"]
@@ -282,5 +298,10 @@ function createBabelOptions(rawOptions) {
 function defined(value) {
   return value !== void 0;
 }
+function hasCompiler(plugins) {
+  return plugins.some(
+    (p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler"
+  );
+}
 
 export { viteReact as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.2.0",
+  "version": "4.3.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -38,13 +38,16 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.23.3",
-    "@babel/plugin-transform-react-jsx-self": "^7.23.3",
-    "@babel/plugin-transform-react-jsx-source": "^7.23.3",
-    "@types/babel__core": "^7.20.4",
-    "react-refresh": "^0.14.0"
+    "@babel/core": "^7.24.5",
+    "@babel/plugin-transform-react-jsx-self": "^7.24.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.24.1",
+    "@types/babel__core": "^7.20.5",
+    "react-refresh": "^0.14.2"
   },
   "peerDependencies": {
     "vite": "^4.2.0 || ^5.0.0"
+  },
+  "devDependencies": {
+    "unbuild": "^2.0.0"
   }
 }