@vitejs/plugin-react 6.0.5 → 6.1.1

package/README.md

@@ -79,13 +79,48 @@ 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' } })
+```
+
+Set `logDiagnostics` to `true` to log recoverable React Compiler diagnostics through Vite. This option defaults to `false`. Fatal diagnostics are always logged and fail the transform.
+
+```js
+react({ compiler: { logDiagnostics: true } })
+```
+
+### 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,9 +1,17 @@
 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
 //#region src/index.d.ts
+interface ReactCompilerPluginOptions extends ReactCompilerOptions {
+  /**
+   * Log recoverable React Compiler diagnostics through Vite.
+   * Fatal diagnostics are always logged and fail the transform.
+   * @default false
+   */
+  logDiagnostics?: boolean;
+}
 interface Options {
   /**
    * Can be used to process extra files like `.mdx`
@@ -37,6 +45,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 | ReactCompilerPluginOptions;
 }
 declare function viteReact(opts?: Options): Plugin[];
 declare namespace viteReact {
@@ -44,4 +59,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 ReactCompilerPluginOptions as ReactCompilerOptions, viteReact as default, viteReactForCjs as "module.exports", reactCompilerPreset };

package/dist/index.js

@@ -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,60 @@ 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({ logDiagnostics, ...reactCompilerOptions }, include, exclude, reactOptions, isFastRefreshEnabled) {
+	let jsxDevelopment = false;
+	let compiler;
+	const runtime = reactCompilerOptions.target === "17" || reactCompilerOptions.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) {
+			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 && (reactCompilerOptions.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 ? reactCompilerOptions : false,
+					sourcemap: this.environment ? this.environment.config.command !== "build" || !!this.environment.config.build.sourcemap : true
+				});
+				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.");
+				if (logDiagnostics) 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.5",
+  "version": "6.1.1",
   "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.147.0",
     "react": "^19.2.8",
     "react-dom": "^19.2.8",
-    "rolldown": "^1.2.0",
+    "rolldown": "^1.2.6",
     "tsdown": "^0.22.14",
-    "vite": "^8.1.5"
+    "vite": "^8.2.2"
   },
   "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