@vitejs/plugin-react-swc 4.0.1 → 4.2.0

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";
@@ -15,22 +14,15 @@ injectIntoGlobalHook(window);
 window.$RefreshReg$ = () => {};
 window.$RefreshSig$ = () => (type) => type;`;
 const getPreambleCode = (base) => preambleCode.replace("__BASE__", base);
-const avoidSourceMapOption = Symbol();
-function addRefreshWrapper(code, map, pluginName, id, reactRefreshHost = "") {
+function addRefreshWrapper(code, pluginName, id, reactRefreshHost = "") {
 	const hasRefresh = refreshContentRE.test(code);
 	const onlyReactComp = !hasRefresh && reactCompRE.test(code);
-	const normalizedMap = map === avoidSourceMapOption ? null : map;
-	if (!hasRefresh && !onlyReactComp) return {
-		code,
-		map: normalizedMap
-	};
-	const avoidSourceMap = map === avoidSourceMapOption;
-	const newMap = typeof normalizedMap === "string" ? JSON.parse(normalizedMap) : normalizedMap;
+	if (!hasRefresh && !onlyReactComp) return void 0;
 	let newCode = code;
-	if (hasRefresh) {
-		const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
-let prevRefreshSig;
+	newCode += `
 
+import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 if (import.meta.hot && !inWebWorker) {
   if (!window.$RefreshReg$) {
     throw new Error(
@@ -38,29 +30,6 @@ if (import.meta.hot && !inWebWorker) {
     );
   }
 
-  prevRefreshReg = window.$RefreshReg$;
-  prevRefreshSig = window.$RefreshSig$;
-  window.$RefreshReg$ = RefreshRuntime.getRefreshReg(${JSON.stringify(id)});
-  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
-}
-
-`, avoidSourceMap);
-		newCode = `${refreshHead}${newCode}
-
-if (import.meta.hot && !inWebWorker) {
-  window.$RefreshReg$ = prevRefreshReg;
-  window.$RefreshSig$ = prevRefreshSig;
-}
-`;
-		if (newMap) newMap.mappings = ";".repeat(16) + newMap.mappings;
-	}
-	const sharedHead = removeLineBreaksIfNeeded(`import * as RefreshRuntime from "${reactRefreshHost}${runtimePublicPath}";
-const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
-
-`, avoidSourceMap);
-	newCode = `${sharedHead}${newCode}
-
-if (import.meta.hot && !inWebWorker) {
   RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
     RefreshRuntime.registerExportsForReactRefresh(${JSON.stringify(id)}, currentExports);
     import.meta.hot.accept((nextExports) => {
@@ -71,15 +40,32 @@ if (import.meta.hot && !inWebWorker) {
   });
 }
 `;
-	if (newMap) newMap.mappings = ";;;" + newMap.mappings;
+	if (hasRefresh) newCode += `function $RefreshReg$(type, id) { return RefreshRuntime.register(type, ${JSON.stringify(id)} + ' ' + id) }
+function $RefreshSig$() { return RefreshRuntime.createSignatureFunctionForTransform(); }
+`;
+	return newCode;
+}
+function virtualPreamblePlugin({ name, isEnabled }) {
 	return {
-		code: newCode,
-		map: newMap
+		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 "";
+				}
+			}
+		}
 	};
 }
-function removeLineBreaksIfNeeded(code, enabled) {
-	return enabled ? code.replace(/\n/g, "") : code;
-}
 
 //#endregion
 //#region ../common/warning.ts
@@ -92,10 +78,10 @@ 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 viteCacheRoot;
 	const options = {
 		jsxImportSource: _options?.jsxImportSource ?? "react",
 		tsDecorators: _options?.tsDecorators,
@@ -117,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
 			}
 		},
 		{
@@ -132,6 +118,7 @@ const react = (_options) => {
 				}
 			}),
 			configResolved(config) {
+				viteCacheRoot = config.cacheDir;
 				if (config.server.hmr === false) hmrDisabled = true;
 				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");
@@ -147,7 +134,7 @@ const react = (_options) => {
 			async transform(code, _id, transformOptions) {
 				const id = _id.split("?")[0];
 				const refresh = !transformOptions?.ssr && !hmrDisabled;
-				const result = await transformWithOptions(id, code, options.devTarget, options, {
+				const result = await transformWithOptions(id, code, options.devTarget, options, viteCacheRoot, {
 					refresh,
 					development: true,
 					runtime: "automatic",
@@ -155,15 +142,21 @@ const react = (_options) => {
 				});
 				if (!result) return;
 				if (!refresh) return result;
-				return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react-swc", id, options.reactRefreshHost);
+				return {
+					code: addRefreshWrapper(result.code, "@vitejs/plugin-react-swc", id, options.reactRefreshHost) ?? result.code,
+					map: result.map
+				};
 			}
 		},
-		options.plugins ? {
+		options.plugins || options.useAtYourOwnRisk_mutateSwcOptions ? {
 			name: "vite:react-swc",
 			apply: "build",
 			enforce: "pre",
 			config: (userConfig) => ({ build: silenceUseClientWarning(userConfig) }),
-			transform: (code, _id) => transformWithOptions(_id.split("?")[0], code, "esnext", options, {
+			configResolved(config) {
+				viteCacheRoot = config.cacheDir;
+			},
+			transform: (code, _id) => transformWithOptions(_id.split("?")[0], code, "esnext", options, viteCacheRoot, {
 				runtime: "automatic",
 				importSource: options.jsxImportSource
 			})
@@ -177,11 +170,18 @@ const react = (_options) => {
 					jsxImportSource: options.jsxImportSource,
 					tsconfigRaw: { compilerOptions: { useDefineForClassFields: true } }
 				}
-			})
-		}
+			}),
+			configResolved(config) {
+				viteCacheRoot = config.cacheDir;
+			}
+		},
+		virtualPreamblePlugin({
+			name: "@vitejs/plugin-react-swc/preamble",
+			isEnabled: () => !hmrDisabled
+		})
 	];
 };
-const transformWithOptions = async (id, code, target, options, reactConfig) => {
+const transformWithOptions = async (id, code, target, options, viteCacheRoot, reactConfig) => {
 	const decorators = options?.tsDecorators ?? false;
 	const parser = options.parserConfig ? options.parserConfig(id) : id.endsWith(".tsx") ? {
 		syntax: "typescript",
@@ -209,7 +209,10 @@ const transformWithOptions = async (id, code, target, options, reactConfig) => {
 			jsc: {
 				target,
 				parser,
-				experimental: { plugins: options.plugins },
+				experimental: {
+					plugins: options.plugins,
+					cacheRoot: join(viteCacheRoot ?? "node_modules/.vite", ".swc")
+				},
 				transform: {
 					useDefineForClassFields: true,
 					react: reactConfig
@@ -232,10 +235,11 @@ const transformWithOptions = async (id, code, target, options, reactConfig) => {
 	}
 	return result;
 };
+var src_default = react;
 function pluginForCjs(options) {
 	return react.call(this, options);
 }
 Object.assign(pluginForCjs, { default: pluginForCjs });
 
 //#endregion
-export { react as default, pluginForCjs as "module.exports" };
+export { src_default as default, pluginForCjs as "module.exports" };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react-swc",
-  "version": "4.0.1",
+  "version": "4.2.0",
   "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.32",
-    "@swc/core": "^1.13.2"
+    "@rolldown/pluginutils": "1.0.0-beta.43",
+    "@swc/core": "^1.13.5"
   },
   "peerDependencies": {
     "vite": "^4 || ^5 || ^6 || ^7"
   },
-  "exports": "./index.js"
+  "exports": {
+    ".": "./index.js",
+    "./preamble": "./types/preamble.d.ts"
+  }
 }

package/refresh-runtime.js

@@ -243,7 +243,7 @@ function performReactRefresh() {
   }
 }
 
-function register(type, id) {
+export function register(type, id) {
   if (type === null) {
     return
   }
@@ -564,10 +564,6 @@ function isPlainObject(obj) {
  * Plugin utils
  */
 
-export function getRefreshReg(filename) {
-  return (type, id) => register(type, filename + ' ' + id)
-}
-
 // Taken from https://github.com/pmmmwh/react-refresh-webpack-plugin/blob/main/lib/runtime/RefreshUtils.js#L141
 // This allows to resister components not detected by SWC like styled component
 export function registerExportsForReactRefresh(filename, moduleExports) {
@@ -653,10 +649,7 @@ export function validateRefreshBoundaryAndEnqueueUpdate(
 
 function predicateOnExport(ignoredExports, moduleExports, predicate) {
   for (const key in moduleExports) {
-    if (key === '__esModule') continue
     if (ignoredExports.includes(key)) continue
-    const desc = Object.getOwnPropertyDescriptor(moduleExports, key)
-    if (desc && desc.get) return key
     if (!predicate(key, moduleExports[key])) return key
   }
   return true

package/types/preamble.d.ts

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