@vitejs/plugin-react 4.4.1 → 4.5.0

package/dist/index.cjs

@@ -4,11 +4,26 @@ const node_path = require('node:path');
 const node_url = require('node:url');
 const node_fs = require('node:fs');
 const vite = require('vite');
+const pluginutils = require('@rolldown/pluginutils');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+function _interopNamespaceCompat(e) {
+  if (e && typeof e === 'object' && 'default' in e) return e;
+  const n = Object.create(null);
+  if (e) {
+    for (const k in e) {
+      n[k] = e[k];
+    }
+  }
+  n.default = e;
+  return n;
+}
+
+const vite__namespace = /*#__PURE__*/_interopNamespaceCompat(vite);
+
 const runtimePublicPath = "/@react-refresh";
 const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
-const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+const refreshContentRE = /\$RefreshReg\$\(/;
 const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(
   1
 )}"
@@ -93,7 +108,7 @@ function removeLineBreaksIfNeeded(code, enabled) {
 const silenceUseClientWarning = (userConfig) => ({
   rollupOptions: {
     onwarn(warning, defaultHandler) {
-      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) {
         return;
       }
       if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
@@ -120,7 +135,9 @@ async function loadBabel() {
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
-  const filter = vite.createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
+  const include = opts.include ?? defaultIncludeRE;
+  const exclude = opts.exclude;
+  const filter = vite.createFilter(include, exclude);
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
@@ -135,11 +152,25 @@ function viteReact(opts = {}) {
     enforce: "pre",
     config() {
       if (opts.jsxRuntime === "classic") {
-        return {
-          esbuild: {
-            jsx: "transform"
-          }
-        };
+        if ("rolldownVersion" in vite__namespace) {
+          return {
+            oxc: {
+              jsx: {
+                runtime: "classic",
+                // disable __self and __source injection even in dev
+                // as this plugin injects them by babel and oxc will throw
+                // if development is enabled and those properties are already present
+                development: false
+              }
+            }
+          };
+        } else {
+          return {
+            esbuild: {
+              jsx: "transform"
+            }
+          };
+        }
       } else {
         return {
           esbuild: {
@@ -166,87 +197,98 @@ function viteReact(opts = {}) {
         };
       } else if (typeof opts.babel !== "function") {
         staticBabelOptions = createBabelOptions(opts.babel);
+        if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) {
+          delete viteBabel.transform;
+        }
       }
     },
-    async transform(code, id, options) {
-      if (id.includes("/node_modules/")) return;
-      const [filepath] = id.split("?");
-      if (!filter(filepath)) return;
-      const ssr = options?.ssr === true;
-      const babelOptions = (() => {
-        if (staticBabelOptions) return staticBabelOptions;
-        const newBabelOptions = createBabelOptions(
-          typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel
-        );
-        runPluginOverrides?.(newBabelOptions, { id, ssr });
-        return newBabelOptions;
-      })();
-      const plugins = [...babelOptions.plugins];
-      const isJSX = filepath.endsWith("x");
-      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
-      if (useFastRefresh) {
-        plugins.push([
-          await loadPlugin("react-refresh/babel"),
-          { skipEnvCheck: true }
-        ]);
-      }
-      if (opts.jsxRuntime === "classic" && isJSX && // OXC injects self and source so these plugins are not needed for rolldown-vite
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore -- this.meta.rolldownVersion only exists in rolldown-vite
-      !this.meta.rolldownVersion) {
-        if (!isProduction) {
-          plugins.push(
-            await loadPlugin("@babel/plugin-transform-react-jsx-self"),
-            await loadPlugin("@babel/plugin-transform-react-jsx-source")
+    transform: {
+      filter: {
+        id: {
+          include: pluginutils.makeIdFiltersToMatchWithQuery(include),
+          exclude: [
+            ...exclude ? pluginutils.makeIdFiltersToMatchWithQuery(ensureArray(exclude)) : [],
+            /\/node_modules\//
+          ]
+        }
+      },
+      async handler(code, id, options) {
+        if (id.includes("/node_modules/")) return;
+        const [filepath] = id.split("?");
+        if (!filter(filepath)) return;
+        const ssr = options?.ssr === true;
+        const babelOptions = (() => {
+          if (staticBabelOptions) return staticBabelOptions;
+          const newBabelOptions = createBabelOptions(
+            typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel
           );
+          runPluginOverrides?.(newBabelOptions, { id, ssr });
+          return newBabelOptions;
+        })();
+        const plugins = [...babelOptions.plugins];
+        const isJSX = filepath.endsWith("x");
+        const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
+        if (useFastRefresh) {
+          plugins.push([
+            await loadPlugin("react-refresh/babel"),
+            { skipEnvCheck: true }
+          ]);
         }
-      }
-      if (!plugins.length && !babelOptions.presets.length && !babelOptions.configFile && !babelOptions.babelrc) {
-        return;
-      }
-      const parserPlugins = [...babelOptions.parserOpts.plugins];
-      if (!filepath.endsWith(".ts")) {
-        parserPlugins.push("jsx");
-      }
-      if (tsRE.test(filepath)) {
-        parserPlugins.push("typescript");
-      }
-      const babel2 = await loadBabel();
-      const result = await babel2.transformAsync(code, {
-        ...babelOptions,
-        root: projectRoot,
-        filename: id,
-        sourceFileName: filepath,
-        // Required for esbuild.jsxDev to provide correct line numbers
-        // This creates 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: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
-        parserOpts: {
-          ...babelOptions.parserOpts,
-          sourceType: "module",
-          allowAwaitOutsideFunction: true,
-          plugins: parserPlugins
-        },
-        generatorOpts: {
-          ...babelOptions.generatorOpts,
-          // import attributes parsing available without plugin since 7.26
-          importAttributesKeyword: "with",
-          decoratorsBeforeExport: true
-        },
-        plugins,
-        sourceMaps: true
-      });
-      if (result) {
-        if (!useFastRefresh) {
-          return { code: result.code, map: result.map };
+        if (opts.jsxRuntime === "classic" && isJSX) {
+          if (!isProduction) {
+            plugins.push(
+              await loadPlugin("@babel/plugin-transform-react-jsx-self"),
+              await loadPlugin("@babel/plugin-transform-react-jsx-source")
+            );
+          }
+        }
+        if (canSkipBabel(plugins, babelOptions)) {
+          return;
+        }
+        const parserPlugins = [...babelOptions.parserOpts.plugins];
+        if (!filepath.endsWith(".ts")) {
+          parserPlugins.push("jsx");
+        }
+        if (tsRE.test(filepath)) {
+          parserPlugins.push("typescript");
+        }
+        const babel2 = await loadBabel();
+        const result = await babel2.transformAsync(code, {
+          ...babelOptions,
+          root: projectRoot,
+          filename: id,
+          sourceFileName: filepath,
+          // Required for esbuild.jsxDev to provide correct line numbers
+          // This creates 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: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
+          parserOpts: {
+            ...babelOptions.parserOpts,
+            sourceType: "module",
+            allowAwaitOutsideFunction: true,
+            plugins: parserPlugins
+          },
+          generatorOpts: {
+            ...babelOptions.generatorOpts,
+            // import attributes parsing available without plugin since 7.26
+            importAttributesKeyword: "with",
+            decoratorsBeforeExport: true
+          },
+          plugins,
+          sourceMaps: true
+        });
+        if (result) {
+          if (!useFastRefresh) {
+            return { code: result.code, map: result.map };
+          }
+          return addRefreshWrapper(
+            result.code,
+            result.map,
+            "@vitejs/plugin-react",
+            id,
+            opts.reactRefreshHost
+          );
         }
-        return addRefreshWrapper(
-          result.code,
-          result.map,
-          "@vitejs/plugin-react",
-          id,
-          opts.reactRefreshHost
-        );
       }
     }
   };
@@ -274,17 +316,23 @@ function viteReact(opts = {}) {
         dedupe: ["react", "react-dom"]
       }
     }),
-    resolveId(id) {
-      if (id === runtimePublicPath) {
-        return id;
+    resolveId: {
+      filter: { id: pluginutils.exactRegex(runtimePublicPath) },
+      handler(id) {
+        if (id === runtimePublicPath) {
+          return id;
+        }
       }
     },
-    load(id) {
-      if (id === runtimePublicPath) {
-        return node_fs.readFileSync(refreshRuntimePath, "utf-8").replace(
-          /__README_URL__/g,
-          "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react"
-        );
+    load: {
+      filter: { id: pluginutils.exactRegex(runtimePublicPath) },
+      handler(id) {
+        if (id === runtimePublicPath) {
+          return node_fs.readFileSync(refreshRuntimePath, "utf-8").replace(
+            /__README_URL__/g,
+            "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react"
+          );
+        }
       }
     },
     transformIndexHtml(_, config) {
@@ -301,6 +349,9 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh];
 }
 viteReact.preambleCode = preambleCode;
+function canSkipBabel(plugins, babelOptions) {
+  return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
+}
 const loadedPlugin = /* @__PURE__ */ new Map();
 function loadPlugin(path) {
   const cached = loadedPlugin.get(path);
@@ -345,6 +396,9 @@ function getReactCompilerRuntimeModule(plugin) {
   }
   return moduleName;
 }
+function ensureArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
 
 module.exports = viteReact;
 module.exports.default = viteReact;

package/dist/index.mjs

@@ -1,11 +1,13 @@
 import { dirname, join } from 'node:path';
 import { fileURLToPath } from 'node:url';
 import { readFileSync } from 'node:fs';
+import * as vite from 'vite';
 import { createFilter } from 'vite';
+import { makeIdFiltersToMatchWithQuery, exactRegex } from '@rolldown/pluginutils';
 
 const runtimePublicPath = "/@react-refresh";
 const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
-const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
+const refreshContentRE = /\$RefreshReg\$\(/;
 const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(
   1
 )}"
@@ -90,7 +92,7 @@ function removeLineBreaksIfNeeded(code, enabled) {
 const silenceUseClientWarning = (userConfig) => ({
   rollupOptions: {
     onwarn(warning, defaultHandler) {
-      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && warning.message.includes("use client")) {
+      if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) {
         return;
       }
       if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) {
@@ -117,7 +119,9 @@ async function loadBabel() {
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
-  const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
+  const include = opts.include ?? defaultIncludeRE;
+  const exclude = opts.exclude;
+  const filter = createFilter(include, exclude);
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
@@ -132,11 +136,25 @@ function viteReact(opts = {}) {
     enforce: "pre",
     config() {
       if (opts.jsxRuntime === "classic") {
-        return {
-          esbuild: {
-            jsx: "transform"
-          }
-        };
+        if ("rolldownVersion" in vite) {
+          return {
+            oxc: {
+              jsx: {
+                runtime: "classic",
+                // disable __self and __source injection even in dev
+                // as this plugin injects them by babel and oxc will throw
+                // if development is enabled and those properties are already present
+                development: false
+              }
+            }
+          };
+        } else {
+          return {
+            esbuild: {
+              jsx: "transform"
+            }
+          };
+        }
       } else {
         return {
           esbuild: {
@@ -163,87 +181,98 @@ function viteReact(opts = {}) {
         };
       } else if (typeof opts.babel !== "function") {
         staticBabelOptions = createBabelOptions(opts.babel);
+        if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) {
+          delete viteBabel.transform;
+        }
       }
     },
-    async transform(code, id, options) {
-      if (id.includes("/node_modules/")) return;
-      const [filepath] = id.split("?");
-      if (!filter(filepath)) return;
-      const ssr = options?.ssr === true;
-      const babelOptions = (() => {
-        if (staticBabelOptions) return staticBabelOptions;
-        const newBabelOptions = createBabelOptions(
-          typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel
-        );
-        runPluginOverrides?.(newBabelOptions, { id, ssr });
-        return newBabelOptions;
-      })();
-      const plugins = [...babelOptions.plugins];
-      const isJSX = filepath.endsWith("x");
-      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
-      if (useFastRefresh) {
-        plugins.push([
-          await loadPlugin("react-refresh/babel"),
-          { skipEnvCheck: true }
-        ]);
-      }
-      if (opts.jsxRuntime === "classic" && isJSX && // OXC injects self and source so these plugins are not needed for rolldown-vite
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-ignore -- this.meta.rolldownVersion only exists in rolldown-vite
-      !this.meta.rolldownVersion) {
-        if (!isProduction) {
-          plugins.push(
-            await loadPlugin("@babel/plugin-transform-react-jsx-self"),
-            await loadPlugin("@babel/plugin-transform-react-jsx-source")
+    transform: {
+      filter: {
+        id: {
+          include: makeIdFiltersToMatchWithQuery(include),
+          exclude: [
+            ...exclude ? makeIdFiltersToMatchWithQuery(ensureArray(exclude)) : [],
+            /\/node_modules\//
+          ]
+        }
+      },
+      async handler(code, id, options) {
+        if (id.includes("/node_modules/")) return;
+        const [filepath] = id.split("?");
+        if (!filter(filepath)) return;
+        const ssr = options?.ssr === true;
+        const babelOptions = (() => {
+          if (staticBabelOptions) return staticBabelOptions;
+          const newBabelOptions = createBabelOptions(
+            typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel
           );
+          runPluginOverrides?.(newBabelOptions, { id, ssr });
+          return newBabelOptions;
+        })();
+        const plugins = [...babelOptions.plugins];
+        const isJSX = filepath.endsWith("x");
+        const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
+        if (useFastRefresh) {
+          plugins.push([
+            await loadPlugin("react-refresh/babel"),
+            { skipEnvCheck: true }
+          ]);
         }
-      }
-      if (!plugins.length && !babelOptions.presets.length && !babelOptions.configFile && !babelOptions.babelrc) {
-        return;
-      }
-      const parserPlugins = [...babelOptions.parserOpts.plugins];
-      if (!filepath.endsWith(".ts")) {
-        parserPlugins.push("jsx");
-      }
-      if (tsRE.test(filepath)) {
-        parserPlugins.push("typescript");
-      }
-      const babel2 = await loadBabel();
-      const result = await babel2.transformAsync(code, {
-        ...babelOptions,
-        root: projectRoot,
-        filename: id,
-        sourceFileName: filepath,
-        // Required for esbuild.jsxDev to provide correct line numbers
-        // This creates 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: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
-        parserOpts: {
-          ...babelOptions.parserOpts,
-          sourceType: "module",
-          allowAwaitOutsideFunction: true,
-          plugins: parserPlugins
-        },
-        generatorOpts: {
-          ...babelOptions.generatorOpts,
-          // import attributes parsing available without plugin since 7.26
-          importAttributesKeyword: "with",
-          decoratorsBeforeExport: true
-        },
-        plugins,
-        sourceMaps: true
-      });
-      if (result) {
-        if (!useFastRefresh) {
-          return { code: result.code, map: result.map };
+        if (opts.jsxRuntime === "classic" && isJSX) {
+          if (!isProduction) {
+            plugins.push(
+              await loadPlugin("@babel/plugin-transform-react-jsx-self"),
+              await loadPlugin("@babel/plugin-transform-react-jsx-source")
+            );
+          }
+        }
+        if (canSkipBabel(plugins, babelOptions)) {
+          return;
+        }
+        const parserPlugins = [...babelOptions.parserOpts.plugins];
+        if (!filepath.endsWith(".ts")) {
+          parserPlugins.push("jsx");
+        }
+        if (tsRE.test(filepath)) {
+          parserPlugins.push("typescript");
+        }
+        const babel2 = await loadBabel();
+        const result = await babel2.transformAsync(code, {
+          ...babelOptions,
+          root: projectRoot,
+          filename: id,
+          sourceFileName: filepath,
+          // Required for esbuild.jsxDev to provide correct line numbers
+          // This creates 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: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
+          parserOpts: {
+            ...babelOptions.parserOpts,
+            sourceType: "module",
+            allowAwaitOutsideFunction: true,
+            plugins: parserPlugins
+          },
+          generatorOpts: {
+            ...babelOptions.generatorOpts,
+            // import attributes parsing available without plugin since 7.26
+            importAttributesKeyword: "with",
+            decoratorsBeforeExport: true
+          },
+          plugins,
+          sourceMaps: true
+        });
+        if (result) {
+          if (!useFastRefresh) {
+            return { code: result.code, map: result.map };
+          }
+          return addRefreshWrapper(
+            result.code,
+            result.map,
+            "@vitejs/plugin-react",
+            id,
+            opts.reactRefreshHost
+          );
         }
-        return addRefreshWrapper(
-          result.code,
-          result.map,
-          "@vitejs/plugin-react",
-          id,
-          opts.reactRefreshHost
-        );
       }
     }
   };
@@ -271,17 +300,23 @@ function viteReact(opts = {}) {
         dedupe: ["react", "react-dom"]
       }
     }),
-    resolveId(id) {
-      if (id === runtimePublicPath) {
-        return id;
+    resolveId: {
+      filter: { id: exactRegex(runtimePublicPath) },
+      handler(id) {
+        if (id === runtimePublicPath) {
+          return id;
+        }
       }
     },
-    load(id) {
-      if (id === runtimePublicPath) {
-        return readFileSync(refreshRuntimePath, "utf-8").replace(
-          /__README_URL__/g,
-          "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react"
-        );
+    load: {
+      filter: { id: exactRegex(runtimePublicPath) },
+      handler(id) {
+        if (id === runtimePublicPath) {
+          return readFileSync(refreshRuntimePath, "utf-8").replace(
+            /__README_URL__/g,
+            "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react"
+          );
+        }
       }
     },
     transformIndexHtml(_, config) {
@@ -298,6 +333,9 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh];
 }
 viteReact.preambleCode = preambleCode;
+function canSkipBabel(plugins, babelOptions) {
+  return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
+}
 const loadedPlugin = /* @__PURE__ */ new Map();
 function loadPlugin(path) {
   const cached = loadedPlugin.get(path);
@@ -342,5 +380,8 @@ function getReactCompilerRuntimeModule(plugin) {
   }
   return moduleName;
 }
+function ensureArray(value) {
+  return Array.isArray(value) ? value : [value];
+}
 
 export { viteReact as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.4.1",
+  "version": "4.5.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",
@@ -51,6 +51,7 @@
     "@babel/core": "^7.26.10",
     "@babel/plugin-transform-react-jsx-self": "^7.25.9",
     "@babel/plugin-transform-react-jsx-source": "^7.25.9",
+    "@rolldown/pluginutils": "1.0.0-beta.9",
     "@types/babel__core": "^7.20.5",
     "react-refresh": "^0.17.0"
   },