@vitejs/plugin-react 4.0.0-beta.0 → 4.0.0-beta.1

package/README.md

@@ -40,7 +40,7 @@ export default defineConfig({
 
 ### jsxImportSource
 
-Control where the JSX factory is imported from. For TS projects this is inferred from the tsconfig. If you have some React code outside JSX/TSX files, this will be used to detect the presence of React code and apply Fast Refresh.
+Control where the JSX factory is imported from. Default to `'react'`
 
 ```js
 react({ jsxImportSource: '@emotion/react' })

package/dist/index.cjs

@@ -94,6 +94,7 @@ const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
   let devBase = "/";
   const filter = vite.createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
+  const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
   let needHiresSourcemap = false;
   let isProduction = true;
   let projectRoot = process.cwd();
@@ -163,9 +164,7 @@ function viteReact(opts = {}) {
       })();
       const plugins = [...babelOptions.plugins];
       const isJSX = filepath.endsWith("x");
-      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? code.includes(
-        `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`
-      ) : importReactRE.test(code)));
+      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? code.includes(devRuntime) : importReactRE.test(code)));
       if (useFastRefresh) {
         plugins.push([
           await loadPlugin("react-refresh/babel"),
@@ -243,7 +242,7 @@ function viteReact(opts = {}) {
         // We can't add `react-dom` because the dependency is `react-dom/client`
         // for React 18 while it's `react-dom` for React 17. We'd need to detect
         // what React version the user has installed.
-        include: ["react"]
+        include: ["react", devRuntime]
       },
       resolve: {
         dedupe: ["react", "react-dom"]

package/dist/index.d.ts

@@ -13,7 +13,7 @@ interface Options {
     /**
      * Control where the JSX factory is imported from.
      * https://esbuild.github.io/api/#jsx-import-source
-     * For TS projects this is read from tsconfig
+     * @default 'react'
      */
     jsxImportSource?: string;
     /**

package/dist/index.mjs

@@ -73,6 +73,7 @@ const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
   let devBase = "/";
   const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
+  const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
   let needHiresSourcemap = false;
   let isProduction = true;
   let projectRoot = process.cwd();
@@ -142,9 +143,7 @@ function viteReact(opts = {}) {
       })();
       const plugins = [...babelOptions.plugins];
       const isJSX = filepath.endsWith("x");
-      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? code.includes(
-        `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`
-      ) : importReactRE.test(code)));
+      const useFastRefresh = !skipFastRefresh && !ssr && (isJSX || (opts.jsxRuntime === "classic" ? code.includes(devRuntime) : importReactRE.test(code)));
       if (useFastRefresh) {
         plugins.push([
           await loadPlugin("react-refresh/babel"),
@@ -222,7 +221,7 @@ function viteReact(opts = {}) {
         // We can't add `react-dom` because the dependency is `react-dom/client`
         // for React 18 while it's `react-dom` for React 17. We'd need to detect
         // what React version the user has installed.
-        include: ["react"]
+        include: ["react", devRuntime]
       },
       resolve: {
         dedupe: ["react", "react-dom"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.0.0-beta.0",
+  "version": "4.0.0-beta.1",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [