@vitejs/plugin-react 6.1.0 → 6.1.2

package/README.md

@@ -106,6 +106,12 @@ The `compiler` option also accepts [React Compiler options](https://react.dev/re
 react({ compiler: { compilationMode: 'annotation' } })
 ```
 
+Set `logDiagnostics` to `true` to log recoverable React Compiler diagnostics through Vite. This option defaults to `false`. Fatal diagnostics are always logged and fail the transform.
+
+```js
+react({ compiler: { logDiagnostics: true } })
+```
+
 ### Babel React Compiler
 
 React Compiler can also be used through Babel with the exported `reactCompilerPreset` helper. This requires [`@rolldown/plugin-babel`](https://npmx.dev/package/@rolldown/plugin-babel), [`babel-plugin-react-compiler`](https://npmx.dev/package/babel-plugin-react-compiler), and [`@babel/core`](https://npmx.dev/package/@babel/core) as peer dependencies:

package/dist/index.d.ts

@@ -1,10 +1,19 @@
 import { Plugin } from "vite";
 import { ReactCompilerBabelPluginOptions, ReactCompilerOptions, RolldownBabelPreset } from "#optionalTypes";
 //#region src/reactCompilerPreset.d.ts
-declare const reactCompilerPreset: (options?: ReactCompilerBabelPluginOptions) => RolldownBabelPreset;
+export declare const reactCompilerPreset: (options?: ReactCompilerBabelPluginOptions) => RolldownBabelPreset;
 //#endregion
 //#region src/index.d.ts
-interface Options {
+interface ReactCompilerPluginOptions extends ReactCompilerOptions {
+  /**
+   * Log recoverable React Compiler diagnostics through Vite.
+   * Fatal diagnostics are always logged and fail the transform.
+   * @default false
+   * @deprecated Use `reportDiagnostics` instead
+   */
+  logDiagnostics?: boolean;
+}
+export interface Options {
   /**
    * Can be used to process extra files like `.mdx`
    * @example include: /\.(mdx|js|jsx|ts|tsx)$/
@@ -43,7 +52,7 @@ interface Options {
    * @default false
    * @experimental
    */
-  compiler?: boolean | ReactCompilerOptions;
+  compiler?: boolean | ReactCompilerPluginOptions;
 }
 declare function viteReact(opts?: Options): Plugin[];
 declare namespace viteReact {
@@ -51,4 +60,4 @@ declare namespace viteReact {
 }
 declare function viteReactForCjs(this: unknown, options: Options): Plugin[];
 //#endregion
-export { Options, type ReactCompilerOptions, viteReact as default, viteReactForCjs as "module.exports", reactCompilerPreset };
+export { type ReactCompilerPluginOptions as ReactCompilerOptions, viteReact as default, viteReactForCjs as "module.exports" };

package/dist/index.js

@@ -194,11 +194,13 @@ function viteReact(opts = {}) {
 	if (opts.compiler) plugins.unshift(createReactCompilerPlugin(opts.compiler === true ? {} : opts.compiler, include, exclude, opts, () => !skipFastRefresh));
 	return plugins;
 }
-function createReactCompilerPlugin(options, include, exclude, reactOptions, isFastRefreshEnabled) {
-	let sourcemap = true;
+function createReactCompilerPlugin({ logDiagnostics, ...reactCompilerOptions }, include, exclude, reactOptions, isFastRefreshEnabled) {
 	let jsxDevelopment = false;
 	let compiler;
-	const runtime = options.target === "17" || options.target === "18" ? "react-compiler-runtime" : "react/compiler-runtime";
+	const runtime = reactCompilerOptions.target === "17" || reactCompilerOptions.target === "18" ? "react-compiler-runtime" : "react/compiler-runtime";
+	const jsxImportSource = reactOptions.jsxImportSource ?? "react";
+	const jsxImportRuntime = `${jsxImportSource}/jsx-runtime`;
+	const jsxImportDevRuntime = `${jsxImportSource}/jsx-dev-runtime`;
 	const loadCompiler = async (onError) => {
 		if (compiler) return compiler;
 		try {
@@ -215,7 +217,6 @@ function createReactCompilerPlugin(options, include, exclude, reactOptions, isFa
 			return { optimizeDeps: { include: [runtime] } };
 		},
 		configResolved(config) {
-			sourcemap = config.command !== "build" || !!config.build.sourcemap;
 			jsxDevelopment = !config.isProduction;
 		},
 		transform: {
@@ -224,18 +225,24 @@ function createReactCompilerPlugin(options, include, exclude, reactOptions, isFa
 				exclude: makeIdFiltersToMatchWithQuery(exclude)
 			} },
 			async handler(code, id) {
+				const [filepath] = id.split("?");
+				const isJSX = filepath.endsWith("x");
 				const isClient = this.environment?.config.consumer !== "server";
-				const shouldCompile = isClient && (options.compilationMode === "annotation" ? /['"]use memo['"]/.test(code) : defaultCodeFilter.test(code));
+				const refreshEnabled = isClient && isFastRefreshEnabled() && (isJSX || code.includes(jsxImportRuntime) || code.includes(jsxImportDevRuntime));
+				const shouldCompile = isClient && (reactCompilerOptions.compilationMode === "annotation" ? /['"]use memo['"]/.test(code) : defaultCodeFilter.test(code));
 				const { transform } = compiler ?? await loadCompiler((message) => this.error(message));
 				const result = await transform(id.split("?")[0], code, {
 					jsx: {
 						runtime: reactOptions.jsxRuntime,
 						development: jsxDevelopment,
 						importSource: reactOptions.jsxImportSource,
-						refresh: isClient && isFastRefreshEnabled()
+						refresh: refreshEnabled
 					},
-					reactCompiler: shouldCompile ? options : false,
-					sourcemap
+					reactCompiler: !shouldCompile ? false : logDiagnostics ? {
+						...reactCompilerOptions,
+						reportDiagnostics: true
+					} : reactCompilerOptions,
+					sourcemap: this.environment ? this.environment.config.command !== "build" || !!this.environment.config.build.sourcemap : true
 				});
 				const diagnostics = result.errors.map((error) => `${error.message}${error.codeframe ? `\n${error.codeframe}` : ""}`);
 				if (result.fatal) this.error(diagnostics.join("\n\n") || "React Compiler transform failed.");

package/dist/refresh-runtime.js

@@ -112,6 +112,29 @@ function canPreserveStateBetween(prevType, nextType) {
   if (isReactClass(prevType) || isReactClass(nextType)) {
     return false
   }
+  // A fiber's tag is derived from the kind of its type (a plain function
+  // vs memo vs forwardRef), and the reconciler can only swap implementations
+  // in place within the same tag. If the kind changed, the tree must remount.
+  if (typeof prevType !== typeof nextType) {
+    return false
+  }
+  if (typeof prevType === 'object' && prevType !== null && nextType !== null) {
+    if (
+      getProperty(prevType, '$$typeof') !== getProperty(nextType, '$$typeof')
+    ) {
+      return false
+    }
+    // Switching from SimpleMemoComponent to MemoComponent requires a remount;
+    // for symmetry, remount for the reverse too.
+    if (getProperty(prevType, '$$typeof') === REACT_MEMO_TYPE) {
+      if (
+        (getProperty(prevType, 'compare') === null) !==
+        (getProperty(nextType, 'compare') === null)
+      ) {
+        return false
+      }
+    }
+  }
   if (haveEqualSignatures(prevType, nextType)) {
     return true
   }
@@ -609,50 +632,49 @@ export function validateRefreshBoundaryAndEnqueueUpdate(
   prevExports,
   nextExports,
 ) {
+  let hasExports = false
   const ignoredExports = window.__getReactRefreshIgnoredExports?.({ id }) ?? []
-  if (
-    predicateOnExport(
-      ignoredExports,
-      prevExports,
-      (key) => key in nextExports,
-    ) !== true
-  ) {
-    return 'Could not Fast Refresh (export removed)'
-  }
-  if (
-    predicateOnExport(
-      ignoredExports,
-      nextExports,
-      (key) => key in prevExports,
-    ) !== true
-  ) {
-    return 'Could not Fast Refresh (new export)'
-  }
 
-  let hasExports = false
-  const allExportsAreComponentsOrUnchanged = predicateOnExport(
-    ignoredExports,
-    nextExports,
-    (key, value) => {
-      hasExports = true
-      if (isLikelyComponentType(value)) return true
-      if (isCompoundComponent(value)) return true
-      return prevExports[key] === nextExports[key]
-    },
-  )
-  if (hasExports && allExportsAreComponentsOrUnchanged === true) {
-    enqueueUpdate()
-  } else {
-    return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible). Learn more at __README_URL__#consistent-components-exports`
+  for (const key in prevExports) {
+    if (ignoredExports.includes(key)) continue
+    if (!(key in nextExports)) {
+      return `Could not Fast Refresh (export "${key}" removed)`
+    }
   }
-}
 
-function predicateOnExport(ignoredExports, moduleExports, predicate) {
-  for (const key in moduleExports) {
+  for (const key in nextExports) {
     if (ignoredExports.includes(key)) continue
-    if (!predicate(key, moduleExports[key])) return key
+    hasExports = true
+    if (!(key in prevExports)) {
+      return `Could not Fast Refresh (export "${key}" added)`
+    }
+    if (isLikelyComponentType(nextExports[key])) continue
+    if (isCompoundComponent(nextExports[key])) {
+      if (!isCompoundComponent(prevExports[key])) {
+        return `Could not Fast Refresh (compound component "${key}" added)`
+      }
+      for (const subKey in prevExports[key]) {
+        if (!(subKey in nextExports[key])) {
+          return `Could not Fast Refresh (compound component "${key}.${subKey}" removed)`
+        }
+      }
+      for (const subKey in nextExports[key]) {
+        if (!(subKey in prevExports[key])) {
+          return `Could not Fast Refresh (compound component "${key}.${subKey}" added)`
+        }
+      }
+      continue
+    }
+    if (prevExports[key] !== nextExports[key]) {
+      return `Could not Fast Refresh ("${key}" export is incompatible). Learn more at __README_URL__#consistent-components-exports`
+    }
+  }
+
+  if (hasExports) {
+    enqueueUpdate()
+  } else {
+    return `No exports`
   }
-  return true
 }
 
 // Hides vite-ignored dynamic import so that Vite can skip analysis if no other

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "6.1.0",
+  "version": "6.1.2",
   "description": "The default Vite plugin for React projects",
   "keywords": [
     "fast refresh",
@@ -46,21 +46,20 @@
     "@rolldown/pluginutils": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "8.0.1",
-    "@rolldown/plugin-babel": "^0.2.3",
+    "@rolldown/plugin-babel": "^0.2.4",
     "@vitejs/react-common": "workspace:*",
     "babel-plugin-react-compiler": "^1.0.0",
-    "oxc-transform-react": "^0.145.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "rolldown": "^1.2.3",
-    "tsdown": "^0.22.14",
-    "vite": "^8.2.1"
+    "oxc-transform-react": "^0.152.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "rolldown": "^1.2.12",
+    "tsdown": "^0.23.0",
+    "vite": "^8.3.2"
   },
   "peerDependencies": {
     "@rolldown/plugin-babel": "^0.1.7 || ^0.2.0",
     "babel-plugin-react-compiler": "^1.0.0",
-    "oxc-transform-react": "^0.145.0",
+    "oxc-transform-react": "^0.152.0",
     "vite": "^8.0.0"
   },
   "peerDependenciesMeta": {