@vitejs/plugin-react 5.0.4 → 5.1.1

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,7 +128,7 @@ 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.

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");
@@ -108,7 +128,7 @@ function viteReact(opts = {}) {
 					jsxRefreshInclude: makeIdFiltersToMatchWithQuery(include),
 					jsxRefreshExclude: makeIdFiltersToMatchWithQuery(exclude)
 				},
-				optimizeDeps: { rollupOptions: { transform: { jsx: { runtime: "automatic" } } } }
+				optimizeDeps: { rolldownOptions: { transform: { jsx: { runtime: "automatic" } } } }
 			};
 			if (opts.jsxRuntime === "classic") return { esbuild: { jsx: "transform" } };
 			else return {
@@ -137,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;
@@ -283,8 +304,7 @@ function viteReact(opts = {}) {
 		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);
@@ -323,7 +343,11 @@ function viteReact(opts = {}) {
 			viteConfigPost,
 			viteReactRefreshFullBundleMode
 		] : [],
-		viteReactRefresh
+		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.4",
+  "version": "5.1.1",
   "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",
@@ -40,12 +44,12 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.28.4",
+    "@babel/core": "^7.28.5",
     "@babel/plugin-transform-react-jsx-self": "^7.27.1",
     "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-    "@rolldown/pluginutils": "1.0.0-beta.38",
+    "@rolldown/pluginutils": "1.0.0-beta.47",
     "@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.38",
-    "tsdown": "^0.15.4",
-    "vitest": "^3.2.4"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "rolldown": "1.0.0-beta.47",
+    "tsdown": "^0.16.1"
   }
 }

package/types/preamble.d.ts

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