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

package/README.md

@@ -40,12 +40,20 @@ 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' })
 ```
 
+## jsxRuntime
+
+By default, the plugin uses the [automatic JSX runtime](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html). However, if you encounter any issues, you may opt out using the `jsxRuntime` option.
+
+```js
+react({ jsxRuntime: 'classic' })
+```
+
 ### babel
 
 The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each included file.

package/dist/index.cjs

@@ -2,7 +2,6 @@
 
 const babel = require('@babel/core');
 const vite = require('vite');
-const MagicString = require('magic-string');
 const fs = require('node:fs');
 const path = require('node:path');
 const node_module = require('node:module');
@@ -22,7 +21,6 @@ function _interopNamespaceCompat(e) {
 }
 
 const babel__namespace = /*#__PURE__*/_interopNamespaceCompat(babel);
-const MagicString__default = /*#__PURE__*/_interopDefaultCompat(MagicString);
 const fs__default = /*#__PURE__*/_interopDefaultCompat(fs);
 const path__default = /*#__PURE__*/_interopDefaultCompat(path);
 
@@ -87,20 +85,19 @@ function addRefreshWrapper(code, id) {
   return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
 }
 
-const prependReactImportCode = "import React from 'react'; ";
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
   let devBase = "/";
   const filter = vite.createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
-  let needHiresSourcemap = false;
+  const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = false;
   let runPluginOverrides;
   let staticBabelOptions;
-  const importReactRE = /(?:^|\n)import\s+(?:\*\s+as\s+)?React(?:,|\s+)/;
+  const importReactRE = /(?:^|\s)import\s+(?:\*\s+as\s+)?React(?:,|\s+)/;
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
@@ -123,14 +120,8 @@ function viteReact(opts = {}) {
     configResolved(config) {
       devBase = config.base;
       projectRoot = config.root;
-      needHiresSourcemap = config.command === "build" && !!config.build.sourcemap;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build";
-      if (opts.jsxRuntime === "classic") {
-        config.logger.warnOnce(
-          "[@vitejs/plugin-react] Support for classic runtime is deprecated."
-        );
-      }
       if ("jsxPure" in opts) {
         config.logger.warnOnce(
           "[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly."
@@ -163,16 +154,13 @@ 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"),
           { skipEnvCheck: true }
         ]);
       }
-      let prependReactImport = false;
       if (opts.jsxRuntime === "classic" && isJSX) {
         if (!isProduction) {
           plugins.push(
@@ -180,23 +168,9 @@ function viteReact(opts = {}) {
             await loadPlugin("@babel/plugin-transform-react-jsx-source")
           );
         }
-        if (!importReactRE.test(code)) {
-          prependReactImport = true;
-        }
-      }
-      let inputMap;
-      if (prependReactImport) {
-        if (needHiresSourcemap) {
-          const s = new MagicString__default(code);
-          s.prepend(prependReactImportCode);
-          code = s.toString();
-          inputMap = s.generateMap({ hires: true, source: id });
-        } else {
-          code = prependReactImportCode + code;
-        }
       }
       if (!plugins.length && !babelOptions.configFile && !babelOptions.babelrc) {
-        return { code, map: inputMap ?? null };
+        return;
       }
       const parserPlugins = [...babelOptions.parserOpts.plugins];
       if (!filepath.endsWith(".ts")) {
@@ -221,9 +195,7 @@ function viteReact(opts = {}) {
           decoratorsBeforeExport: true
         },
         plugins,
-        sourceMaps: true,
-        // Vite handles sourcemap flattening
-        inputSourceMap: inputMap ?? false
+        sourceMaps: true
       });
       if (result) {
         let code2 = result.code;
@@ -243,7 +215,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

@@ -4,18 +4,17 @@ import { ResolvedConfig, PluginOption } from 'vite';
 interface Options {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;
-    /**
-     * @deprecated All tools now support the automatic runtime, and it has been backported
-     * up to React 16. This allows to skip the React import and can produce smaller bundlers.
-     * @default "automatic"
-     */
-    jsxRuntime?: 'classic' | 'automatic';
     /**
      * 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;
+    /**
+     * 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.
      */

package/dist/index.mjs

@@ -1,6 +1,5 @@
 import * as babel from '@babel/core';
 import { createFilter } from 'vite';
-import MagicString from 'magic-string';
 import fs from 'node:fs';
 import path from 'node:path';
 import { createRequire } from 'node:module';
@@ -66,20 +65,19 @@ function addRefreshWrapper(code, id) {
   return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__SOURCE__", JSON.stringify(id));
 }
 
-const prependReactImportCode = "import React from 'react'; ";
 const refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
 const defaultIncludeRE = /\.[tj]sx?$/;
 const tsRE = /\.tsx?$/;
 function viteReact(opts = {}) {
   let devBase = "/";
   const filter = createFilter(opts.include ?? defaultIncludeRE, opts.exclude);
-  let needHiresSourcemap = false;
+  const devRuntime = `${opts.jsxImportSource ?? "react"}/jsx-dev-runtime`;
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = false;
   let runPluginOverrides;
   let staticBabelOptions;
-  const importReactRE = /(?:^|\n)import\s+(?:\*\s+as\s+)?React(?:,|\s+)/;
+  const importReactRE = /(?:^|\s)import\s+(?:\*\s+as\s+)?React(?:,|\s+)/;
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
@@ -102,14 +100,8 @@ function viteReact(opts = {}) {
     configResolved(config) {
       devBase = config.base;
       projectRoot = config.root;
-      needHiresSourcemap = config.command === "build" && !!config.build.sourcemap;
       isProduction = config.isProduction;
       skipFastRefresh = isProduction || config.command === "build";
-      if (opts.jsxRuntime === "classic") {
-        config.logger.warnOnce(
-          "[@vitejs/plugin-react] Support for classic runtime is deprecated."
-        );
-      }
       if ("jsxPure" in opts) {
         config.logger.warnOnce(
           "[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly."
@@ -142,16 +134,13 @@ 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"),
           { skipEnvCheck: true }
         ]);
       }
-      let prependReactImport = false;
       if (opts.jsxRuntime === "classic" && isJSX) {
         if (!isProduction) {
           plugins.push(
@@ -159,23 +148,9 @@ function viteReact(opts = {}) {
             await loadPlugin("@babel/plugin-transform-react-jsx-source")
           );
         }
-        if (!importReactRE.test(code)) {
-          prependReactImport = true;
-        }
-      }
-      let inputMap;
-      if (prependReactImport) {
-        if (needHiresSourcemap) {
-          const s = new MagicString(code);
-          s.prepend(prependReactImportCode);
-          code = s.toString();
-          inputMap = s.generateMap({ hires: true, source: id });
-        } else {
-          code = prependReactImportCode + code;
-        }
       }
       if (!plugins.length && !babelOptions.configFile && !babelOptions.babelrc) {
-        return { code, map: inputMap ?? null };
+        return;
       }
       const parserPlugins = [...babelOptions.parserOpts.plugins];
       if (!filepath.endsWith(".ts")) {
@@ -200,9 +175,7 @@ function viteReact(opts = {}) {
           decoratorsBeforeExport: true
         },
         plugins,
-        sourceMaps: true,
-        // Vite handles sourcemap flattening
-        inputSourceMap: inputMap ?? false
+        sourceMaps: true
       });
       if (result) {
         let code2 = result.code;
@@ -222,7 +195,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",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -42,7 +42,6 @@
     "@babel/core": "^7.21.4",
     "@babel/plugin-transform-react-jsx-self": "^7.21.0",
     "@babel/plugin-transform-react-jsx-source": "^7.19.6",
-    "magic-string": "^0.30.0",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {