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

package/README.md

@@ -46,6 +46,14 @@ Control where the JSX factory is imported from. Default to `'react'`
 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);
 
@@ -51,10 +49,11 @@ window.__vite_plugin_react_preamble_installed__ = true
 const header = `
 import RefreshRuntime from "${runtimePublicPath}";
 
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 let prevRefreshReg;
 let prevRefreshSig;
 
-if (import.meta.hot) {
+if (import.meta.hot && !inWebWorker) {
   if (!window.__vite_plugin_react_preamble_installed__) {
     throw new Error(
       "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
@@ -70,7 +69,7 @@ if (import.meta.hot) {
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
 const footer = `
-if (import.meta.hot) {
+if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 
@@ -87,7 +86,6 @@ 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?$/;
@@ -95,13 +93,12 @@ 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();
   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",
@@ -124,14 +121,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."
-        );
-      }
+      skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
       if ("jsxPure" in opts) {
         config.logger.warnOnce(
           "[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly."
@@ -171,7 +162,6 @@ function viteReact(opts = {}) {
           { skipEnvCheck: true }
         ]);
       }
-      let prependReactImport = false;
       if (opts.jsxRuntime === "classic" && isJSX) {
         if (!isProduction) {
           plugins.push(
@@ -179,23 +169,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")) {
@@ -220,9 +196,7 @@ function viteReact(opts = {}) {
           decoratorsBeforeExport: true
         },
         plugins,
-        sourceMaps: true,
-        // Vite handles sourcemap flattening
-        inputSourceMap: inputMap ?? false
+        sourceMaps: true
       });
       if (result) {
         let code2 = result.code;

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
      * @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';
@@ -30,10 +29,11 @@ window.__vite_plugin_react_preamble_installed__ = true
 const header = `
 import RefreshRuntime from "${runtimePublicPath}";
 
+const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
 let prevRefreshReg;
 let prevRefreshSig;
 
-if (import.meta.hot) {
+if (import.meta.hot && !inWebWorker) {
   if (!window.__vite_plugin_react_preamble_installed__) {
     throw new Error(
       "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
@@ -49,7 +49,7 @@ if (import.meta.hot) {
   window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
 }`.replace(/\n+/g, "");
 const footer = `
-if (import.meta.hot) {
+if (import.meta.hot && !inWebWorker) {
   window.$RefreshReg$ = prevRefreshReg;
   window.$RefreshSig$ = prevRefreshSig;
 
@@ -66,7 +66,6 @@ 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?$/;
@@ -74,13 +73,12 @@ 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();
   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",
@@ -103,14 +101,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."
-        );
-      }
+      skipFastRefresh = isProduction || config.command === "build" || config.server.hmr === false;
       if ("jsxPure" in opts) {
         config.logger.warnOnce(
           "[@vitejs/plugin-react] jsxPure was removed. You can configure esbuild.jsxSideEffects directly."
@@ -150,7 +142,6 @@ function viteReact(opts = {}) {
           { skipEnvCheck: true }
         ]);
       }
-      let prependReactImport = false;
       if (opts.jsxRuntime === "classic" && isJSX) {
         if (!isProduction) {
           plugins.push(
@@ -158,23 +149,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")) {
@@ -199,9 +176,7 @@ function viteReact(opts = {}) {
           decoratorsBeforeExport: true
         },
         plugins,
-        sourceMaps: true,
-        // Vite handles sourcemap flattening
-        inputSourceMap: inputMap ?? false
+        sourceMaps: true
       });
       if (result) {
         let code2 = result.code;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.1",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -39,10 +39,9 @@
   },
   "homepage": "https://github.com/vitejs/vite-plugin-react/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@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",
+    "@babel/core": "^7.22.5",
+    "@babel/plugin-transform-react-jsx-self": "^7.22.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.22.5",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {