@vitejs/plugin-react 4.6.0 → 5.0.0-beta.0

package/README.md

@@ -21,7 +21,7 @@ export default defineConfig({
 
 ### include/exclude
 
-Includes `.js`, `.jsx`, `.ts` & `.tsx` by default. This option can be used to add fast refresh to `.mdx` files:
+Includes `.js`, `.jsx`, `.ts` & `.tsx` and excludes `/node_modules/` by default. This option can be used to add fast refresh to `.mdx` files:
 
 ```js
 import { defineConfig } from 'vite'
@@ -36,8 +36,6 @@ export default defineConfig({
 })
 ```
 
-> `node_modules` are never processed by this plugin (but esbuild will)
-
 ### jsxImportSource
 
 Control where the JSX factory is imported from. Default to `'react'`

package/dist/index.d.ts

@@ -1,38 +1,35 @@
-import { TransformOptions, ParserOptions } from '@babel/core';
-import { PluginOption, ResolvedConfig } from 'vite';
+import { Plugin, ResolvedConfig } from "vite";
+import { ParserOptions, TransformOptions } from "@babel/core";
 
+//#region src/index.d.ts
 interface Options {
-    include?: string | RegExp | Array<string | RegExp>;
-    exclude?: string | RegExp | Array<string | RegExp>;
-    /**
-     * Control where the JSX factory is imported from.
-     * https://esbuild.github.io/api/#jsx-import-source
-     * @default 'react'
-     */
-    jsxImportSource?: string;
-    /**
-     * Note: Skipping React import with classic runtime is not supported from v4
-     * @default "automatic"
-     */
-    jsxRuntime?: 'classic' | 'automatic';
-    /**
-     * Babel configuration applied in both dev and prod.
-     */
-    babel?: BabelOptions | ((id: string, options: {
-        ssr?: boolean;
-    }) => BabelOptions);
-    /**
-     * React Fast Refresh runtime URL prefix.
-     * Useful in a module federation context to enable HMR by specifying
-     * the host application URL in the Vite config of a remote application.
-     * @example
-     * reactRefreshHost: 'http://localhost:3000'
-     */
-    reactRefreshHost?: string;
-    /**
-     * If set, disables the recommendation to use `@vitejs/plugin-react-oxc`
-     */
-    disableOxcRecommendation?: boolean;
+  include?: string | RegExp | Array<string | RegExp>;
+  exclude?: string | RegExp | Array<string | RegExp>;
+  /**
+   * Control where the JSX factory is imported from.
+   * https://esbuild.github.io/api/#jsx-import-source
+   * @default 'react'
+   */
+  jsxImportSource?: string;
+  /**
+   * Note: Skipping React import with classic runtime is not supported from v4
+   * @default "automatic"
+   */
+  jsxRuntime?: 'classic' | 'automatic';
+  /**
+   * Babel configuration applied in both dev and prod.
+   */
+  babel?: BabelOptions | ((id: string, options: {
+    ssr?: boolean;
+  }) => BabelOptions);
+  /**
+   * React Fast Refresh runtime URL prefix.
+   * Useful in a module federation context to enable HMR by specifying
+   * the host application URL in the Vite config of a remote application.
+   * @example
+   * reactRefreshHost: 'http://localhost:3000'
+   */
+  reactRefreshHost?: string;
 }
 type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
 /**
@@ -40,28 +37,28 @@ type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'source
  * an `api.reactBabel` method.
  */
 interface ReactBabelOptions extends BabelOptions {
-    plugins: Extract<BabelOptions['plugins'], any[]>;
-    presets: Extract<BabelOptions['presets'], any[]>;
-    overrides: Extract<BabelOptions['overrides'], any[]>;
-    parserOpts: ParserOptions & {
-        plugins: Extract<ParserOptions['plugins'], any[]>;
-    };
+  plugins: Extract<BabelOptions['plugins'], any[]>;
+  presets: Extract<BabelOptions['presets'], any[]>;
+  overrides: Extract<BabelOptions['overrides'], any[]>;
+  parserOpts: ParserOptions & {
+    plugins: Extract<ParserOptions['plugins'], any[]>;
+  };
 }
 type ReactBabelHook = (babelConfig: ReactBabelOptions, context: ReactBabelHookContext, config: ResolvedConfig) => void;
 type ReactBabelHookContext = {
-    ssr: boolean;
-    id: string;
+  ssr: boolean;
+  id: string;
 };
 type ViteReactPluginApi = {
-    /**
-     * Manipulate the Babel options of `@vitejs/plugin-react`
-     */
-    reactBabel?: ReactBabelHook;
+  /**
+   * Manipulate the Babel options of `@vitejs/plugin-react`
+   */
+  reactBabel?: ReactBabelHook;
 };
-declare function viteReact(opts?: Options): PluginOption[];
+declare function viteReact(opts?: Options): Plugin[];
 declare namespace viteReact {
-    var preambleCode: string;
+  var preambleCode: string;
 }
-
-export = viteReact;
-export type { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi };
+declare function viteReactForCjs(this: unknown, options: Options): Plugin[];
+//#endregion
+export { BabelOptions, Options, ReactBabelOptions, ViteReactPluginApi, viteReact as default, viteReactForCjs as "module.exports" };

package/dist/index.js

@@ -0,0 +1,359 @@
+import { dirname, join } from "node:path";
+import { fileURLToPath } from "node:url";
+import { readFileSync } from "node:fs";
+import * as vite from "vite";
+import { createFilter } from "vite";
+import { exactRegex, makeIdFiltersToMatchWithQuery } from "@rolldown/pluginutils";
+
+//#region ../common/refresh-utils.ts
+const runtimePublicPath = "/@react-refresh";
+const reactCompRE = /extends\s+(?:React\.)?(?:Pure)?Component/;
+const refreshContentRE = /\$RefreshReg\$\(/;
+const preambleCode = `import { injectIntoGlobalHook } from "__BASE__${runtimePublicPath.slice(1)}";
+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 = "") {
+	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;
+	let newCode = code;
+	if (hasRefresh) {
+		const refreshHead = removeLineBreaksIfNeeded(`let prevRefreshReg;
+let prevRefreshSig;
+
+if (import.meta.hot && !inWebWorker) {
+  if (!window.$RefreshReg$) {
+    throw new Error(
+      "${pluginName} can't detect preamble. Something is wrong."
+    );
+  }
+
+  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) => {
+      if (!nextExports) return;
+      const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(${JSON.stringify(id)}, currentExports, nextExports);
+      if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
+    });
+  });
+}
+`;
+	if (newMap) newMap.mappings = ";;;" + newMap.mappings;
+	return {
+		code: newCode,
+		map: newMap
+	};
+}
+function removeLineBreaksIfNeeded(code, enabled) {
+	return enabled ? code.replace(/\n/g, "") : code;
+}
+
+//#endregion
+//#region ../common/warning.ts
+const silenceUseClientWarning = (userConfig) => ({ rollupOptions: { onwarn(warning, defaultHandler) {
+	if (warning.code === "MODULE_LEVEL_DIRECTIVE" && (warning.message.includes("use client") || warning.message.includes("use server"))) return;
+	if (warning.code === "SOURCEMAP_ERROR" && warning.message.includes("resolve original location") && warning.pos === 0) return;
+	if (userConfig.build?.rollupOptions?.onwarn) userConfig.build.rollupOptions.onwarn(warning, defaultHandler);
+	else defaultHandler(warning);
+} } });
+
+//#endregion
+//#region src/index.ts
+const _dirname = dirname(fileURLToPath(import.meta.url));
+const refreshRuntimePath = join(_dirname, "refresh-runtime.js");
+let babel;
+async function loadBabel() {
+	if (!babel) babel = await import("@babel/core");
+	return babel;
+}
+const defaultIncludeRE = /\.[tj]sx?$/;
+const defaultExcludeRE = /\/node_modules\//;
+const tsRE = /\.tsx?$/;
+function viteReact(opts = {}) {
+	const include = opts.include ?? defaultIncludeRE;
+	const exclude = opts.exclude ?? defaultExcludeRE;
+	const filter = createFilter(include, exclude);
+	const jsxImportSource = opts.jsxImportSource ?? "react";
+	const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
+	const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
+	const isRolldownVite = "rolldownVersion" in vite;
+	let runningInVite = false;
+	let isProduction = true;
+	let projectRoot = process.cwd();
+	let skipFastRefresh = true;
+	let runPluginOverrides;
+	let staticBabelOptions;
+	const importReactRE = /\bimport\s+(?:\*\s+as\s+)?React\b/;
+	const viteBabel = {
+		name: "vite:react-babel",
+		enforce: "pre",
+		config(_userConfig, { command }) {
+			if ("rolldownVersion" in vite) if (opts.jsxRuntime === "classic") return { oxc: {
+				jsx: {
+					runtime: "classic",
+					refresh: command === "serve",
+					development: false
+				},
+				jsxRefreshInclude: include,
+				jsxRefreshExclude: exclude
+			} };
+			else return {
+				oxc: {
+					jsx: {
+						runtime: "automatic",
+						importSource: jsxImportSource,
+						refresh: command === "serve"
+					},
+					jsxRefreshInclude: include,
+					jsxRefreshExclude: exclude
+				},
+				optimizeDeps: { rollupOptions: { jsx: { mode: "automatic" } } }
+			};
+			if (opts.jsxRuntime === "classic") return { esbuild: { jsx: "transform" } };
+			else return {
+				esbuild: {
+					jsx: "automatic",
+					jsxImportSource
+				},
+				optimizeDeps: { esbuildOptions: { jsx: "automatic" } }
+			};
+		},
+		configResolved(config) {
+			runningInVite = true;
+			projectRoot = config.root;
+			isProduction = config.isProduction;
+			skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
+			const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(defined);
+			if (hooks.length > 0) runPluginOverrides = (babelOptions, context) => {
+				hooks.forEach((hook) => hook(babelOptions, context, config));
+			};
+			else if (typeof opts.babel !== "function") {
+				staticBabelOptions = createBabelOptions(opts.babel);
+				if (canSkipBabel(staticBabelOptions.plugins, staticBabelOptions) && skipFastRefresh && (opts.jsxRuntime === "classic" ? isProduction : true)) delete viteBabel.transform;
+			}
+		},
+		options(options) {
+			if (!runningInVite) {
+				options.jsx = {
+					mode: opts.jsxRuntime,
+					importSource: opts.jsxImportSource
+				};
+				return options;
+			}
+		},
+		transform: {
+			filter: { id: {
+				include: makeIdFiltersToMatchWithQuery(include),
+				exclude: makeIdFiltersToMatchWithQuery(exclude)
+			} },
+			async handler(code, id, options) {
+				const [filepath] = id.split("?");
+				if (!filter(filepath)) return;
+				const ssr = options?.ssr === true;
+				const babelOptions = (() => {
+					if (staticBabelOptions) return staticBabelOptions;
+					const newBabelOptions = createBabelOptions(typeof opts.babel === "function" ? opts.babel(id, { ssr }) : opts.babel);
+					runPluginOverrides?.(newBabelOptions, {
+						id,
+						ssr
+					});
+					return newBabelOptions;
+				})();
+				const plugins = [...babelOptions.plugins];
+				const isJSX = filepath.endsWith("x");
+				const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? importReactRE.test(code) : code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime)));
+				if (useFastRefresh && !isRolldownVite) plugins.push([await loadPlugin("react-refresh/babel"), { skipEnvCheck: true }]);
+				if (opts.jsxRuntime === "classic" && isJSX) {
+					if (!isProduction) plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
+				}
+				if (canSkipBabel(plugins, babelOptions)) return;
+				const parserPlugins = [...babelOptions.parserOpts.plugins];
+				if (!filepath.endsWith(".ts")) parserPlugins.push("jsx");
+				if (tsRE.test(filepath)) parserPlugins.push("typescript");
+				const babel$1 = await loadBabel();
+				const result = await babel$1.transformAsync(code, {
+					...babelOptions,
+					root: projectRoot,
+					filename: id,
+					sourceFileName: filepath,
+					retainLines: getReactCompilerPlugin(plugins) != null ? false : !isProduction && isJSX && opts.jsxRuntime !== "classic",
+					parserOpts: {
+						...babelOptions.parserOpts,
+						sourceType: "module",
+						allowAwaitOutsideFunction: true,
+						plugins: parserPlugins
+					},
+					generatorOpts: {
+						...babelOptions.generatorOpts,
+						importAttributesKeyword: "with",
+						decoratorsBeforeExport: true
+					},
+					plugins,
+					sourceMaps: true
+				});
+				if (result) {
+					if (!useFastRefresh) return {
+						code: result.code,
+						map: result.map
+					};
+					return addRefreshWrapper(result.code, result.map, "@vitejs/plugin-react", id, opts.reactRefreshHost);
+				}
+			}
+		}
+	};
+	const viteRefreshWrapper = {
+		name: "vite:react:refresh-wrapper",
+		apply: "serve",
+		transform: isRolldownVite ? {
+			filter: { id: {
+				include: makeIdFiltersToMatchWithQuery(include),
+				exclude: makeIdFiltersToMatchWithQuery(exclude)
+			} },
+			handler(code, id, options) {
+				const ssr = options?.ssr === true;
+				const [filepath] = id.split("?");
+				const isJSX = filepath.endsWith("x");
+				const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || code.includes(jsxImportDevRuntime) || code.includes(jsxImportRuntime));
+				if (!useFastRefresh) return;
+				const { code: newCode } = addRefreshWrapper(code, avoidSourceMapOption, "@vitejs/plugin-react", id);
+				return {
+					code: newCode,
+					map: null
+				};
+			}
+		} : void 0
+	};
+	const viteConfigPost = {
+		name: "vite:react:config-post",
+		enforce: "post",
+		config(userConfig) {
+			if (userConfig.server?.hmr === false) return { oxc: { jsx: { refresh: false } } };
+		}
+	};
+	const dependencies = [
+		"react",
+		"react-dom",
+		jsxImportDevRuntime,
+		jsxImportRuntime
+	];
+	const staticBabelPlugins = typeof opts.babel === "object" ? opts.babel?.plugins ?? [] : [];
+	const reactCompilerPlugin = getReactCompilerPlugin(staticBabelPlugins);
+	if (reactCompilerPlugin != null) {
+		const reactCompilerRuntimeModule = getReactCompilerRuntimeModule(reactCompilerPlugin);
+		dependencies.push(reactCompilerRuntimeModule);
+	}
+	const viteReactRefresh = {
+		name: "vite:react-refresh",
+		enforce: "pre",
+		config: (userConfig) => ({
+			build: silenceUseClientWarning(userConfig),
+			optimizeDeps: { include: dependencies }
+		}),
+		resolveId: {
+			filter: { id: exactRegex(runtimePublicPath) },
+			handler(id) {
+				if (id === runtimePublicPath) return id;
+			}
+		},
+		load: {
+			filter: { id: exactRegex(runtimePublicPath) },
+			handler(id) {
+				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 [{
+				tag: "script",
+				attrs: { type: "module" },
+				children: getPreambleCode(config.server.config.base)
+			}];
+		}
+	};
+	return [
+		viteBabel,
+		viteRefreshWrapper,
+		viteConfigPost,
+		viteReactRefresh
+	];
+}
+viteReact.preambleCode = preambleCode;
+function viteReactForCjs(options) {
+	return viteReact.call(this, options);
+}
+Object.assign(viteReactForCjs, { default: viteReactForCjs });
+function canSkipBabel(plugins, babelOptions) {
+	return !(plugins.length || babelOptions.presets.length || babelOptions.configFile || babelOptions.babelrc);
+}
+const loadedPlugin = /* @__PURE__ */ new Map();
+function loadPlugin(path) {
+	const cached = loadedPlugin.get(path);
+	if (cached) return cached;
+	const promise = import(path).then((module) => {
+		const value = module.default || module;
+		loadedPlugin.set(path, value);
+		return value;
+	});
+	loadedPlugin.set(path, promise);
+	return promise;
+}
+function createBabelOptions(rawOptions) {
+	const babelOptions = {
+		babelrc: false,
+		configFile: false,
+		...rawOptions
+	};
+	babelOptions.plugins ||= [];
+	babelOptions.presets ||= [];
+	babelOptions.overrides ||= [];
+	babelOptions.parserOpts ||= {};
+	babelOptions.parserOpts.plugins ||= [];
+	return babelOptions;
+}
+function defined(value) {
+	return value !== void 0;
+}
+function getReactCompilerPlugin(plugins) {
+	return plugins.find((p) => p === "babel-plugin-react-compiler" || Array.isArray(p) && p[0] === "babel-plugin-react-compiler");
+}
+function getReactCompilerRuntimeModule(plugin) {
+	let moduleName = "react/compiler-runtime";
+	if (Array.isArray(plugin)) {
+		if (plugin[1]?.target === "17" || plugin[1]?.target === "18") moduleName = "react-compiler-runtime";
+	}
+	return moduleName;
+}
+
+//#endregion
+export { viteReact as default, viteReactForCjs as "module.exports" };

package/dist/refresh-runtime.js

@@ -545,6 +545,21 @@ function isLikelyComponentType(type) {
   }
 }
 
+function isCompoundComponent(type) {
+  if (!isPlainObject(type)) return false
+  for (const key in type) {
+    if (!isLikelyComponentType(type[key])) return false
+  }
+  return true
+}
+
+function isPlainObject(obj) {
+  return (
+    Object.prototype.toString.call(obj) === '[object Object]' &&
+    (obj.constructor === Object || obj.constructor === undefined)
+  )
+}
+
 /**
  * Plugin utils
  */
@@ -565,6 +580,13 @@ export function registerExportsForReactRefresh(filename, moduleExports) {
       // The register function has an identity check to not register twice the same component,
       // so this is safe to not used the same key here.
       register(exportValue, filename + ' export ' + key)
+    } else if (isCompoundComponent(exportValue)) {
+      for (const subKey in exportValue) {
+        register(
+          exportValue[subKey],
+          filename + ' export ' + key + '-' + subKey,
+        )
+      }
     }
   }
 }
@@ -618,6 +640,7 @@ export function validateRefreshBoundaryAndEnqueueUpdate(
     (key, value) => {
       hasExports = true
       if (isLikelyComponentType(value)) return true
+      if (isCompoundComponent(value)) return true
       return prevExports[key] === nextExports[key]
     },
   )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.6.0",
+  "version": "5.0.0-beta.0",
   "license": "MIT",
   "author": "Evan You",
   "description": "The default Vite plugin for React projects",
@@ -20,24 +20,15 @@
     "dist"
   ],
   "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.mjs",
-  "types": "./dist/index.d.mts",
-  "exports": {
-    ".": {
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.cjs"
-    }
-  },
+  "exports": "./dist/index.js",
   "scripts": {
-    "dev": "unbuild --stub",
-    "build": "unbuild && pnpm run patch-cjs && tsx scripts/copyRefreshRuntime.ts",
-    "patch-cjs": "tsx ../../scripts/patchCJS.ts",
+    "dev": "tsdown --watch",
+    "build": "tsdown",
     "prepublishOnly": "npm run build",
     "test-unit": "vitest run"
   },
   "engines": {
-    "node": "^14.18.0 || >=16.0.0"
+    "node": "^20.19.0 || >=22.12.0"
   },
   "repository": {
     "type": "git",
@@ -49,23 +40,23 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.27.4",
+    "@babel/core": "^7.28.0",
     "@babel/plugin-transform-react-jsx-self": "^7.27.1",
     "@babel/plugin-transform-react-jsx-source": "^7.27.1",
-    "@rolldown/pluginutils": "1.0.0-beta.19",
+    "@rolldown/pluginutils": "1.0.0-beta.29",
     "@types/babel__core": "^7.20.5",
     "react-refresh": "^0.17.0"
   },
   "peerDependencies": {
-    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0-beta.0"
+    "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
   },
   "devDependencies": {
     "@vitejs/react-common": "workspace:*",
     "babel-plugin-react-compiler": "19.1.0-rc.2",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
-    "rolldown": "1.0.0-beta.19",
-    "unbuild": "^3.5.0",
+    "rolldown": "1.0.0-beta.29",
+    "tsdown": "^0.13.0",
     "vitest": "^3.2.4"
   }
 }