@vitejs/plugin-react-swc 4.1.0 → 4.2.1

package/README.md

@@ -125,6 +125,38 @@ If set, disables the recommendation to use `@vitejs/plugin-react-oxc` (which is
 react({ disableOxcRecommendation: true })
 ```
 
+## `@vitejs/plugin-react-swc/preamble`
+
+The package provides `@vitejs/plugin-react-swc/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-swc/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) => {
+  try {
+    let html = fs.readFileSync(path.resolve(root, 'index.html'), 'utf-8')
+
+    // Transform HTML using Vite plugins.
+    html = await viteServer.transformIndexHtml(req.url, html)
+
+    res.send(html)
+  } catch (e) {
+    return next(e)
+  }
+})
+```
+
+Otherwise, you'll get the following error:
+
+```
+Uncaught Error: @vitejs/plugin-react-swc can't detect preamble. Something is wrong.
+```
+
 ## Consistent components exports
 
 For React refresh to work correctly, your file should only export React components. The best explanation I've read is the one from the [Gatsby docs](https://www.gatsbyjs.com/docs/reference/local-development/fast-refresh/#how-it-works).

package/index.js

@@ -1,10 +1,9 @@
 import { createRequire } from "node:module";
 import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
+import { join } from "node:path";
 import { transform } from "@swc/core";
-import * as vite from "vite";
 import { exactRegex } from "@rolldown/pluginutils";
+import * as vite from "vite";
 
 //#region ../common/refresh-utils.ts
 const runtimePublicPath = "/@react-refresh";
@@ -46,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
@@ -58,10 +78,9 @@ const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warni
 
 //#endregion
 //#region src/index.ts
-const _dirname = typeof __dirname !== "undefined" ? __dirname : dirname(fileURLToPath(import.meta.url));
-const resolve = createRequire(typeof __filename !== "undefined" ? __filename : import.meta.url).resolve;
+const resolve = createRequire(import.meta.url).resolve;
 const react = (_options) => {
-	let hmrDisabled = false;
+	let hmrDisabled = true;
 	let viteCacheRoot;
 	const options = {
 		jsxImportSource: _options?.jsxImportSource ?? "react",
@@ -84,7 +103,7 @@ const react = (_options) => {
 			},
 			load: {
 				filter: { id: exactRegex(runtimePublicPath) },
-				handler: (id) => id === runtimePublicPath ? readFileSync(join(_dirname, "refresh-runtime.js"), "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc") : void 0
+				handler: (id) => id === runtimePublicPath ? readFileSync(join(import.meta.dirname, "refresh-runtime.js"), "utf-8").replace(/__README_URL__/g, "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc") : void 0
 			}
 		},
 		{
@@ -100,7 +119,7 @@ const react = (_options) => {
 			}),
 			configResolved(config) {
 				viteCacheRoot = config.cacheDir;
-				if (config.server.hmr === false) hmrDisabled = true;
+				hmrDisabled = config.server.hmr === false;
 				const mdxIndex = config.plugins.findIndex((p) => p.name === "@mdx-js/rollup");
 				if (mdxIndex !== -1 && mdxIndex > config.plugins.findIndex((p) => p.name === "vite:react-swc")) throw new Error("[vite:react-swc] The MDX plugin should be placed before this plugin");
 				if ("rolldownVersion" in vite && !options.plugins && !options.useAtYourOwnRisk_mutateSwcOptions && !options.disableOxcRecommendation) config.logger.warn("[vite:react-swc] We recommend switching to `@vitejs/plugin-react` for improved performance as no swc plugins are used. More information at https://vite.dev/rolldown");
@@ -129,7 +148,7 @@ const react = (_options) => {
 				};
 			}
 		},
-		options.plugins ? {
+		options.plugins || options.useAtYourOwnRisk_mutateSwcOptions ? {
 			name: "vite:react-swc",
 			apply: "build",
 			enforce: "pre",
@@ -155,7 +174,11 @@ const react = (_options) => {
 			configResolved(config) {
 				viteCacheRoot = config.cacheDir;
 			}
-		}
+		},
+		virtualPreamblePlugin({
+			name: "@vitejs/plugin-react-swc/preamble",
+			isEnabled: () => !hmrDisabled
+		})
 	];
 };
 const transformWithOptions = async (id, code, target, options, viteCacheRoot, reactConfig) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react-swc",
-  "version": "4.1.0",
+  "version": "4.2.1",
   "license": "MIT",
   "author": "Arnaud Barré (https://github.com/ArnaudBarre)",
   "description": "Speed up your Vite dev server with SWC",
@@ -26,11 +26,14 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react-swc#readme",
   "dependencies": {
-    "@rolldown/pluginutils": "1.0.0-beta.35",
+    "@rolldown/pluginutils": "1.0.0-beta.46",
     "@swc/core": "^1.13.5"
   },
   "peerDependencies": {
     "vite": "^4 || ^5 || ^6 || ^7"
   },
-  "exports": "./index.js"
+  "exports": {
+    ".": "./index.js",
+    "./preamble": "./types/preamble.d.ts"
+  }
 }

package/types/preamble.d.ts

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