@vitejs/plugin-react 6.0.4 → 6.1.0

package/README.md

@@ -79,13 +79,42 @@ Under the hood, this simply updates the React Fash Refresh runtime URL from `/@r
 
 ## React Compiler
 
-[React Compiler](https://react.dev/learn/react-compiler) support is available via the exported `reactCompilerPreset` helper, which requires [`@rolldown/plugin-babel`](https://npmx.dev/package/@rolldown/plugin-babel) and [`babel-plugin-react-compiler`](https://npmx.dev/package/babel-plugin-react-compiler) and [`@babel/core`](https://npmx.dev/package/@babel/core) as peer dependencies:
+### Rust React Compiler
+
+> [!WARNING]
+> Native React Compiler support is experimental.
+
+The `compiler` option uses [`oxc-transform-react`](https://npmx.dev/package/oxc-transform-react), a Rust port of [React Compiler](https://react.dev/learn/react-compiler), which must be installed as an optional peer dependency:
+
+```sh
+npm install -D oxc-transform-react
+```
+
+```js
+// vite.config.js
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react({ compiler: true })],
+})
+```
+
+The `compiler` option also accepts [React Compiler options](https://react.dev/reference/react-compiler/configuration):
+
+```js
+react({ compiler: { compilationMode: 'annotation' } })
+```
+
+### Babel React Compiler
+
+React Compiler can also be used through Babel with the exported `reactCompilerPreset` helper. This requires [`@rolldown/plugin-babel`](https://npmx.dev/package/@rolldown/plugin-babel), [`babel-plugin-react-compiler`](https://npmx.dev/package/babel-plugin-react-compiler), and [`@babel/core`](https://npmx.dev/package/@babel/core) as peer dependencies:
 
 ```sh
 npm install -D @rolldown/plugin-babel @babel/core babel-plugin-react-compiler
 ```
 
-If you are using TypeScript, you will also need to install [`@types/babel__core`](https://npmx.dev/package/@types/babel__core):
+If you are using TypeScript with Babel 7, you will also need to install [`@types/babel__core`](https://npmx.dev/package/@types/babel__core):
 
 ```sh
 npm install -D @types/babel__core

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { Plugin } from "vite";
-import { ReactCompilerBabelPluginOptions, RolldownBabelPreset } from "#optionalTypes";
+import { ReactCompilerBabelPluginOptions, ReactCompilerOptions, RolldownBabelPreset } from "#optionalTypes";
 //#region src/reactCompilerPreset.d.ts
 declare const reactCompilerPreset: (options?: ReactCompilerBabelPluginOptions) => RolldownBabelPreset;
 //#endregion
@@ -37,6 +37,13 @@ interface Options {
    * reactRefreshHost: 'http://localhost:3000'
    */
   reactRefreshHost?: string;
+  /**
+   * Enable React Compiler with its default options or configure it.
+   * This requires `oxc-transform-react` to be installed.
+   * @default false
+   * @experimental
+   */
+  compiler?: boolean | ReactCompilerOptions;
 }
 declare function viteReact(opts?: Options): Plugin[];
 declare namespace viteReact {
@@ -44,4 +51,4 @@ declare namespace viteReact {
 }
 declare function viteReactForCjs(this: unknown, options: Options): Plugin[];
 //#endregion
-export { Options, viteReact as default, viteReactForCjs as "module.exports", reactCompilerPreset };
+export { Options, type ReactCompilerOptions, viteReact as default, viteReactForCjs as "module.exports", reactCompilerPreset };

package/dist/index.js

@@ -41,7 +41,7 @@ const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warni
 } } });
 //#endregion
 //#region src/reactCompilerPreset.ts
-const defaultCodeFilter = /forwardRef|memo|(?:const|let|var|function)\s+(?:[A-Z]|use[A-Z0-9])|(?:[A-Z]|use[A-Z0-9])[^\s:=(){}[\],;]*\s*(?:\(|[:=]\s*(?:function|\())/;
+const defaultCodeFilter = /forwardRef|memo|\b(?:[A-Z]|use[A-Z0-9])/;
 const reactCompilerPreset = (options = {}) => ({
 	preset: () => ({ plugins: [[fileURLToPath(import.meta.resolve("babel-plugin-react-compiler")), options]] }),
 	rolldown: {
@@ -52,7 +52,8 @@ const reactCompilerPreset = (options = {}) => ({
 });
 //#endregion
 //#region src/index.ts
-const refreshRuntimePath = join(dirname(fileURLToPath(import.meta.url)), "refresh-runtime.js");
+const _dirname = dirname(fileURLToPath(import.meta.url));
+const refreshRuntimePath = join(_dirname, "refresh-runtime.js");
 const defaultIncludeRE = /\.[tj]sx?$/;
 const defaultExcludeRE = /\/node_modules\//;
 function viteReact(opts = {}) {
@@ -72,10 +73,11 @@ function viteReact(opts = {}) {
 		name: "vite:react-babel",
 		enforce: "pre",
 		config(_userConfig, { command }) {
+			const refresh = command === "serve" && !opts.compiler;
 			if (opts.jsxRuntime === "classic") return { oxc: {
 				jsx: {
 					runtime: "classic",
-					refresh: command === "serve"
+					refresh
 				},
 				jsxRefreshInclude: makeIdFiltersToMatchWithQuery(include),
 				jsxRefreshExclude: makeIdFiltersToMatchWithQuery(exclude)
@@ -85,7 +87,7 @@ function viteReact(opts = {}) {
 					jsx: {
 						runtime: "automatic",
 						importSource: opts.jsxImportSource,
-						refresh: command === "serve"
+						refresh
 					},
 					jsxRefreshInclude: makeIdFiltersToMatchWithQuery(include),
 					jsxRefreshExclude: makeIdFiltersToMatchWithQuery(exclude)
@@ -152,7 +154,7 @@ function viteReact(opts = {}) {
 		jsxImportDevRuntime,
 		jsxImportRuntime
 	];
-	return [
+	const plugins = [
 		viteBabel,
 		viteRefreshWrapper,
 		viteConfigPost,
@@ -189,6 +191,62 @@ function viteReact(opts = {}) {
 			isEnabled: () => !skipFastRefresh && !isBundledDev
 		})
 	];
+	if (opts.compiler) plugins.unshift(createReactCompilerPlugin(opts.compiler === true ? {} : opts.compiler, include, exclude, opts, () => !skipFastRefresh));
+	return plugins;
+}
+function createReactCompilerPlugin(options, include, exclude, reactOptions, isFastRefreshEnabled) {
+	let sourcemap = true;
+	let jsxDevelopment = false;
+	let compiler;
+	const runtime = options.target === "17" || options.target === "18" ? "react-compiler-runtime" : "react/compiler-runtime";
+	const loadCompiler = async (onError) => {
+		if (compiler) return compiler;
+		try {
+			return compiler = await import("oxc-transform-react");
+		} catch (error) {
+			return onError(`React Compiler requires the optional \`oxc-transform-react\` package. Install it in your project before enabling \`react({ compiler: true })\`.${error instanceof Error ? `\n${error.message}` : ""}`);
+		}
+	};
+	return {
+		name: "vite:react-compiler",
+		enforce: "pre",
+		async config() {
+			await loadCompiler((message) => this.error(message));
+			return { optimizeDeps: { include: [runtime] } };
+		},
+		configResolved(config) {
+			sourcemap = config.command !== "build" || !!config.build.sourcemap;
+			jsxDevelopment = !config.isProduction;
+		},
+		transform: {
+			filter: { id: {
+				include: makeIdFiltersToMatchWithQuery(include),
+				exclude: makeIdFiltersToMatchWithQuery(exclude)
+			} },
+			async handler(code, id) {
+				const isClient = this.environment?.config.consumer !== "server";
+				const shouldCompile = isClient && (options.compilationMode === "annotation" ? /['"]use memo['"]/.test(code) : defaultCodeFilter.test(code));
+				const { transform } = compiler ?? await loadCompiler((message) => this.error(message));
+				const result = await transform(id.split("?")[0], code, {
+					jsx: {
+						runtime: reactOptions.jsxRuntime,
+						development: jsxDevelopment,
+						importSource: reactOptions.jsxImportSource,
+						refresh: isClient && isFastRefreshEnabled()
+					},
+					reactCompiler: shouldCompile ? options : false,
+					sourcemap
+				});
+				const diagnostics = result.errors.map((error) => `${error.message}${error.codeframe ? `\n${error.codeframe}` : ""}`);
+				if (result.fatal) this.error(diagnostics.join("\n\n") || "React Compiler transform failed.");
+				for (const diagnostic of diagnostics) this.warn(diagnostic);
+				return {
+					code: result.code,
+					map: result.map
+				};
+			}
+		}
+	};
 }
 viteReact.preambleCode = preambleCode;
 function viteReactForCjs(options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "6.0.4",
+  "version": "6.1.0",
   "description": "The default Vite plugin for React projects",
   "keywords": [
     "fast refresh",
@@ -50,15 +50,17 @@
     "@rolldown/plugin-babel": "^0.2.3",
     "@vitejs/react-common": "workspace:*",
     "babel-plugin-react-compiler": "^1.0.0",
+    "oxc-transform-react": "^0.145.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "rolldown": "^1.1.5",
-    "tsdown": "^0.22.7",
-    "vite": "^8.1.4"
+    "rolldown": "^1.2.3",
+    "tsdown": "^0.22.14",
+    "vite": "^8.2.1"
   },
   "peerDependencies": {
     "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
     "babel-plugin-react-compiler": "^1.0.0",
+    "oxc-transform-react": "^0.145.0",
     "vite": "^8.0.0"
   },
   "peerDependenciesMeta": {
@@ -67,6 +69,9 @@
     },
     "babel-plugin-react-compiler": {
       "optional": true
+    },
+    "oxc-transform-react": {
+      "optional": true
     }
   },
   "engines": {

package/types/optionalTypes.d.ts

@@ -4,9 +4,13 @@
 import type * as pluginBabel from '@rolldown/plugin-babel'
 // @ts-ignore --- `babel-plugin-react-compiler` is an optional peer dependency, so this may cause an error
 import type * as babelPluginReactCompiler from 'babel-plugin-react-compiler'
+// @ts-ignore --- `oxc-transform-react` is an optional peer dependency, so this may cause an error
+import type * as oxcTransformReact from 'oxc-transform-react'
 
 // @ts-ignore --- `@rolldown/plugin-babel` is an optional peer dependency, so this may cause an error
 export type RolldownBabelPreset = pluginBabel.RolldownBabelPreset
 // @ts-ignore --- `babel-plugin-react-compiler` is an optional peer dependency, so this may cause an error
 export type ReactCompilerBabelPluginOptions =
   babelPluginReactCompiler.PluginOptions
+// @ts-ignore --- `oxc-transform-react` is an optional peer dependency, so this may cause an error
+export type ReactCompilerOptions = oxcTransformReact.ReactCompilerOptions