@vitejs/plugin-react 5.0.3 → 5.1.0

package/README.md

@@ -102,9 +102,16 @@ react({ reactRefreshHost: 'http://localhost:3000' })
 
 Under the hood, this simply updates the React Fash Refresh runtime URL from `/@react-refresh` to `http://localhost:3000/@react-refresh` to ensure there is only one Refresh runtime across the whole application. Note that if you define `base` option in the host application, you need to include it in the option, like: `http://localhost:3000/{base}`.
 
-## Middleware mode
+## `@vitejs/plugin-react/preamble`
 
-In [middleware mode](https://vite.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
+The package provides `@vitejs/plugin-react/preamble` to initialize HMR runtime from client entrypoint for SSR applications which don't use [`transformIndexHtml` API](https://vite.dev/guide/api-javascript.html#vitedevserver). For example:
+
+```js
+// [entry.client.js]
+import '@vitejs/plugin-react/preamble'
+```
+
+Alternatively, you can manually call `transformIndexHtml` during SSR, which sets up equivalent initialization code. Here's an example for an Express server:
 
 ```js
 app.get('/', async (req, res, next) => {
@@ -121,16 +128,12 @@ app.get('/', async (req, res, next) => {
 })
 ```
 
-Otherwise, you'll probably get this error:
+Otherwise, you'll get the following 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.js

@@ -45,6 +45,27 @@ function $RefreshSig$() { return RefreshRuntime.createSignatureFunctionForTransf
 `;
 	return newCode;
 }
+function virtualPreamblePlugin({ name, isEnabled }) {
+	return {
+		name: "vite:react-virtual-preamble",
+		resolveId: {
+			order: "pre",
+			filter: { id: exactRegex(name) },
+			handler(source) {
+				if (source === name) return "\0" + source;
+			}
+		},
+		load: {
+			filter: { id: exactRegex("\0" + name) },
+			handler(id) {
+				if (id === "\0" + name) {
+					if (isEnabled()) return preambleCode.replace("__BASE__", "/");
+					return "";
+				}
+			}
+		}
+	};
+}
 
 //#endregion
 //#region ../common/warning.ts
@@ -57,8 +78,7 @@ const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warni
 
 //#endregion
 //#region src/index.ts
-const _dirname = dirname(fileURLToPath(import.meta.url));
-const refreshRuntimePath = join(_dirname, "refresh-runtime.js");
+const refreshRuntimePath = join(dirname(fileURLToPath(import.meta.url)), "refresh-runtime.js");
 let babel;
 async function loadBabel() {
 	if (!babel) babel = await import("@babel/core");
@@ -80,6 +100,8 @@ function viteReact(opts = {}) {
 	let isProduction = true;
 	let projectRoot = process.cwd();
 	let skipFastRefresh = true;
+	let base;
+	let isFullBundle = false;
 	let runPluginOverrides;
 	let staticBabelOptions;
 	const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
@@ -119,6 +141,8 @@ function viteReact(opts = {}) {
 		},
 		configResolved(config) {
 			runningInVite = true;
+			base = config.base;
+			if (config.experimental.fullBundleMode) isFullBundle = true;
 			projectRoot = config.root;
 			isProduction = config.isProduction;
 			skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
@@ -133,8 +157,9 @@ function viteReact(opts = {}) {
 		},
 		options(options) {
 			if (!runningInVite) {
-				options.jsx = {
-					mode: opts.jsxRuntime,
+				options.transform ??= {};
+				options.transform.jsx = {
+					runtime: opts.jsxRuntime,
 					importSource: opts.jsxImportSource
 				};
 				return options;
@@ -214,6 +239,26 @@ function viteReact(opts = {}) {
 	const viteRefreshWrapper = {
 		name: "vite:react:refresh-wrapper",
 		apply: "serve",
+		async applyToEnvironment(env) {
+			if (env.config.consumer !== "client" || skipFastRefresh) return false;
+			let nativePlugin;
+			try {
+				nativePlugin = (await import("vite/internal")).reactRefreshWrapperPlugin;
+			} catch {}
+			if (!nativePlugin || [
+				"7.1.10",
+				"7.1.11",
+				"7.1.12"
+			].includes(vite.version)) return true;
+			delete viteRefreshWrapper.transform;
+			return nativePlugin({
+				cwd: process.cwd(),
+				include: makeIdFiltersToMatchWithQuery(include),
+				exclude: makeIdFiltersToMatchWithQuery(exclude),
+				jsxImportSource,
+				reactRefreshHost: opts.reactRefreshHost ?? ""
+			});
+		},
 		transform: {
 			filter: { id: {
 				include: makeIdFiltersToMatchWithQuery(include),
@@ -239,14 +284,27 @@ function viteReact(opts = {}) {
 			if (userConfig.server?.hmr === false) return { oxc: { jsx: { refresh: false } } };
 		}
 	};
+	const viteReactRefreshFullBundleMode = {
+		name: "vite:react-refresh-fbm",
+		enforce: "pre",
+		transformIndexHtml: {
+			handler() {
+				if (!skipFastRefresh && isFullBundle) return [{
+					tag: "script",
+					attrs: { type: "module" },
+					children: getPreambleCode(base)
+				}];
+			},
+			order: "pre"
+		}
+	};
 	const dependencies = [
 		"react",
 		"react-dom",
 		jsxImportDevRuntime,
 		jsxImportRuntime
 	];
-	const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
-	const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
+	const reactCompilerPlugin = getReactCompilerPlugin(typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : []);
 	if (reactCompilerPlugin != null) {
 		const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
 		dependencies.push(reactCompilerRuntimeModule);
@@ -270,18 +328,26 @@ function viteReact(opts = {}) {
 				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) {
-			if (!skipFastRefresh) return [{
+		transformIndexHtml() {
+			if (!skipFastRefresh && !isFullBundle) return [{
 				tag: "script",
 				attrs: { type: "module" },
-				children: getPreambleCode(config.server.config.base)
+				children: getPreambleCode(base)
 			}];
 		}
 	};
 	return [
 		viteBabel,
-		...isRolldownVite ? [viteRefreshWrapper, viteConfigPost] : [],
-		viteReactRefresh
+		...isRolldownVite ? [
+			viteRefreshWrapper,
+			viteConfigPost,
+			viteReactRefreshFullBundleMode
+		] : [],
+		viteReactRefresh,
+		virtualPreamblePlugin({
+			name: "@vitejs/plugin-react/preamble",
+			isEnabled: () => !skipFastRefresh && !isFullBundle
+		})
 	];
 }
 viteReact.preambleCode = preambleCode;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",
@@ -17,10 +17,14 @@
     "Arnaud Barré"
   ],
   "files": [
+    "types",
     "dist"
   ],
   "type": "module",
-  "exports": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./preamble": "./types/preamble.d.ts"
+  },
   "scripts": {
     "dev": "tsdown --watch ./src --watch ../common",
     "build": "tsdown",
@@ -43,9 +47,9 @@
     "@babel/core": "^7.28.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.35",
+    "@rolldown/pluginutils": "1.0.0-beta.43",
     "@types/babel__core": "^7.20.5",
-    "react-refresh": "^0.17.0"
+    "react-refresh": "^0.18.0"
   },
   "peerDependencies": {
     "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
@@ -53,10 +57,9 @@
   "devDependencies": {
     "@vitejs/react-common": "workspace:*",
     "babel-plugin-react-compiler": "19.1.0-rc.3",
-    "react": "^19.1.1",
-    "react-dom": "^19.1.1",
-    "rolldown": "1.0.0-beta.35",
-    "tsdown": "^0.14.2",
-    "vitest": "^3.2.4"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rolldown": "1.0.0-beta.44",
+    "tsdown": "^0.15.8"
   }
 }

package/types/preamble.d.ts

@@ -0,0 +1 @@
+export {}