@vitejs/plugin-react 4.5.1 → 4.6.0

package/README.md

@@ -129,6 +129,10 @@ Otherwise, you'll probably get this error:
 Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.
 ```
 
+### disableOxcRecommendation
+
+If set, disables the recommendation to use `@vitejs/plugin-react-oxc` (which is shown when `rolldown-vite` is detected and `babel` is not configured).
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. You can find a good explanation in the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

package/dist/index.cjs

@@ -141,9 +141,10 @@ function viteReact(opts = {}) {
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
+  let runningInVite = false;
   let isProduction = true;
   let projectRoot = process.cwd();
-  let skipFastRefresh = false;
+  let skipFastRefresh = true;
   let runPluginOverrides;
   let staticBabelOptions;
   const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
@@ -177,11 +178,12 @@ function viteReact(opts = {}) {
             jsx: "automatic",
             jsxImportSource: opts.jsxImportSource
           },
-          optimizeDeps: { esbuildOptions: { jsx: "automatic" } }
+          optimizeDeps: "rolldownVersion" in vite__namespace ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
         };
       }
     },
     configResolved(config) {
+      runningInVite = true;
       projectRoot = config.root;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
@@ -191,6 +193,11 @@ function viteReact(opts = {}) {
         );
       }
       const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(defined);
+      if ("rolldownVersion" in vite__namespace && !opts.babel && !hooks.length && !opts.disableOxcRecommendation) {
+        config.logger.warn(
+          "[vite:react-babel] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown"
+        );
+      }
       if (hooks.length > 0) {
         runPluginOverrides = (babelOptions, context) => {
           hooks.forEach((hook) => hook(babelOptions, context, config));
@@ -202,6 +209,15 @@ function viteReact(opts = {}) {
         }
       }
     },
+    options(options) {
+      if (!runningInVite) {
+        options.jsx = {
+          mode: opts.jsxRuntime,
+          importSource: opts.jsxImportSource
+        };
+        return options;
+      }
+    },
     transform: {
       filter: {
         id: {

package/dist/index.d.cts

@@ -29,6 +29,10 @@ interface Options {
      * reactRefreshHost: 'http://localhost:3000'
      */
     reactRefreshHost?: string;
+    /**
+     * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
+     */
+    disableOxcRecommendation?: boolean;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.d.mts

@@ -29,6 +29,10 @@ interface Options {
      * reactRefreshHost: 'http://localhost:3000'
      */
     reactRefreshHost?: string;
+    /**
+     * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
+     */
+    disableOxcRecommendation?: boolean;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.d.ts

@@ -29,6 +29,10 @@ interface Options {
      * reactRefreshHost: 'http://localhost:3000'
      */
     reactRefreshHost?: string;
+    /**
+     * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
+     */
+    disableOxcRecommendation?: boolean;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**

package/dist/index.mjs

@@ -125,9 +125,10 @@ function viteReact(opts = {}) {
   const jsxImportSource = opts.jsxImportSource ?? "react";
   const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
   const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
+  let runningInVite = false;
   let isProduction = true;
   let projectRoot = process.cwd();
-  let skipFastRefresh = false;
+  let skipFastRefresh = true;
   let runPluginOverrides;
   let staticBabelOptions;
   const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
@@ -161,11 +162,12 @@ function viteReact(opts = {}) {
             jsx: "automatic",
             jsxImportSource: opts.jsxImportSource
           },
-          optimizeDeps: { esbuildOptions: { jsx: "automatic" } }
+          optimizeDeps: "rolldownVersion" in vite ? { rollupOptions: { jsx: { mode: "automatic" } } } : { esbuildOptions: { jsx: "automatic" } }
         };
       }
     },
     configResolved(config) {
+      runningInVite = true;
       projectRoot = config.root;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
@@ -175,6 +177,11 @@ function viteReact(opts = {}) {
         );
       }
       const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(defined);
+      if ("rolldownVersion" in vite && !opts.babel && !hooks.length && !opts.disableOxcRecommendation) {
+        config.logger.warn(
+          "[vite:react-babel] We recommend switching to `@vitejs/plugin-react-oxc` for improved performance. More information at https://vite.dev/rolldown"
+        );
+      }
       if (hooks.length > 0) {
         runPluginOverrides = (babelOptions, context) => {
           hooks.forEach((hook) => hook(babelOptions, context, config));
@@ -186,6 +193,15 @@ function viteReact(opts = {}) {
         }
       }
     },
+    options(options) {
+      if (!runningInVite) {
+        options.jsx = {
+          mode: opts.jsxRuntime,
+          importSource: opts.jsxImportSource
+        };
+        return options;
+      }
+    },
     transform: {
       filter: {
         id: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.5.1",
+  "version": "4.6.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",
@@ -33,7 +33,8 @@
     "dev": "unbuild --stub",
     "build": "unbuild && pnpm run patch-cjs && tsx scripts/copyRefreshRuntime.ts",
     "patch-cjs": "tsx ../../scripts/patchCJS.ts",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "test-unit": "vitest run"
   },
   "engines": {
     "node": "^14.18.0 || >=16.0.0"
@@ -48,18 +49,23 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@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",
+    "@babel/core": "^7.27.4",
+    "@babel/plugin-transform-react-jsx-self": "^7.27.1",
+    "@babel/plugin-transform-react-jsx-source": "^7.27.1",
+    "@rolldown/pluginutils": "1.0.0-beta.19",
     "@types/babel__core": "^7.20.5",
     "react-refresh": "^0.17.0"
   },
   "peerDependencies": {
-    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0"
+    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
   },
   "devDependencies": {
     "@vitejs/react-common": "workspace:*",
-    "unbuild": "^3.5.0"
+    "babel-plugin-react-compiler": "19.1.0-rc.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rolldown": "1.0.0-beta.19",
+    "unbuild": "^3.5.0",
+    "vitest": "^3.2.4"
   }
 }