@vitejs/plugin-react 2.0.0-alpha.3 → 2.0.0

package/dist/index.cjs

@@ -1,11 +1,11 @@
 'use strict';
 
-const path = require('path');
+const path = require('node:path');
 const babel = require('@babel/core');
-const pluginutils = require('@rollup/pluginutils');
 const vite = require('vite');
-const fs = require('fs');
-const module$1 = require('module');
+const MagicString = require('magic-string');
+const fs = require('node:fs');
+const node_module = require('node:module');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
 
@@ -23,10 +23,11 @@ function _interopNamespace(e) {
 
 const path__default = /*#__PURE__*/_interopDefaultLegacy(path);
 const babel__namespace = /*#__PURE__*/_interopNamespace(babel);
+const MagicString__default = /*#__PURE__*/_interopDefaultLegacy(MagicString);
 const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
 const runtimePublicPath = "/@react-refresh";
-const _require = module$1.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
+const _require = node_module.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
 const reactRefreshDir = path__default.dirname(_require.resolve("react-refresh/package.json"));
 const runtimeFilePath = path__default.join(reactRefreshDir, "cjs/react-refresh-runtime.development.js");
 const runtimeCode = `
@@ -184,10 +185,12 @@ function parseReactAlias(code) {
   return [void 0, false];
 }
 
+const prependReactImportCode = "import React from 'react'; ";
 function viteReact(opts = {}) {
-  let base = "/";
+  let devBase = "/";
   let resolvedCacheDir;
-  let filter = pluginutils.createFilter(opts.include, opts.exclude);
+  let filter = vite.createFilter(opts.include, opts.exclude);
+  let needHiresSourcemap = false;
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
@@ -200,13 +203,25 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
+    config() {
+      if (opts.jsxRuntime === "classic") {
+        return {
+          esbuild: {
+            logOverride: {
+              "this-is-undefined-in-esm": "silent"
+            }
+          }
+        };
+      }
+    },
     configResolved(config) {
-      base = config.base;
+      devBase = config.base;
       projectRoot = config.root;
       resolvedCacheDir = vite.normalizePath(path__default.resolve(config.cacheDir));
-      filter = pluginutils.createFilter(opts.include, opts.exclude, {
+      filter = vite.createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
+      needHiresSourcemap = config.command === "build" && !!config.build.sourcemap;
       isProduction = config.isProduction;
       skipFastRefresh || (skipFastRefresh = isProduction || config.command === "build");
       const jsxInject = config.esbuild && config.esbuild.jsxInject;
@@ -222,10 +237,10 @@ function viteReact(opts = {}) {
       runPluginOverrides = (babelOptions, context) => {
         const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions2) => {
-            hooks.forEach((hook) => hook(babelOptions2, context, config));
+          return (runPluginOverrides = (babelOptions2, context2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context2, config));
             return true;
-          })(babelOptions);
+          })(babelOptions, context);
         }
         runPluginOverrides = () => false;
         return false;
@@ -263,6 +278,7 @@ function viteReact(opts = {}) {
           }
         }
         let ast;
+        let prependReactImport = false;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
@@ -285,13 +301,27 @@ function viteReact(opts = {}) {
               plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
             }
             if (!skipReactImport && !importReactRE.test(code)) {
-              code = `import React from 'react'; ` + 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;
+          }
+        }
         const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
         if (shouldSkip) {
-          return;
+          return {
+            code,
+            map: inputMap ?? null
+          };
         }
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
@@ -327,7 +357,7 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
-          inputSourceMap: false
+          inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;
@@ -367,7 +397,7 @@ function viteReact(opts = {}) {
           {
             tag: "script",
             attrs: { type: "module" },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ];
     }

package/dist/index.mjs

@@ -1,9 +1,9 @@
-import path from 'path';
+import path from 'node:path';
 import * as babel from '@babel/core';
-import { createFilter } from '@rollup/pluginutils';
-import { normalizePath } from 'vite';
-import fs from 'fs';
-import { createRequire } from 'module';
+import { createFilter, normalizePath } from 'vite';
+import MagicString from 'magic-string';
+import fs from 'node:fs';
+import { createRequire } from 'node:module';
 
 const runtimePublicPath = "/@react-refresh";
 const _require = createRequire(import.meta.url);
@@ -164,10 +164,12 @@ function parseReactAlias(code) {
   return [void 0, false];
 }
 
+const prependReactImportCode = "import React from 'react'; ";
 function viteReact(opts = {}) {
-  let base = "/";
+  let devBase = "/";
   let resolvedCacheDir;
   let filter = createFilter(opts.include, opts.exclude);
+  let needHiresSourcemap = false;
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
@@ -180,13 +182,25 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
+    config() {
+      if (opts.jsxRuntime === "classic") {
+        return {
+          esbuild: {
+            logOverride: {
+              "this-is-undefined-in-esm": "silent"
+            }
+          }
+        };
+      }
+    },
     configResolved(config) {
-      base = config.base;
+      devBase = config.base;
       projectRoot = config.root;
       resolvedCacheDir = normalizePath(path.resolve(config.cacheDir));
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
+      needHiresSourcemap = config.command === "build" && !!config.build.sourcemap;
       isProduction = config.isProduction;
       skipFastRefresh || (skipFastRefresh = isProduction || config.command === "build");
       const jsxInject = config.esbuild && config.esbuild.jsxInject;
@@ -202,10 +216,10 @@ function viteReact(opts = {}) {
       runPluginOverrides = (babelOptions, context) => {
         const hooks = config.plugins.map((plugin) => plugin.api?.reactBabel).filter(Boolean);
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions2) => {
-            hooks.forEach((hook) => hook(babelOptions2, context, config));
+          return (runPluginOverrides = (babelOptions2, context2) => {
+            hooks.forEach((hook) => hook(babelOptions2, context2, config));
             return true;
-          })(babelOptions);
+          })(babelOptions, context);
         }
         runPluginOverrides = () => false;
         return false;
@@ -243,6 +257,7 @@ function viteReact(opts = {}) {
           }
         }
         let ast;
+        let prependReactImport = false;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
@@ -265,13 +280,27 @@ function viteReact(opts = {}) {
               plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
             }
             if (!skipReactImport && !importReactRE.test(code)) {
-              code = `import React from 'react'; ` + 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;
+          }
+        }
         const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
         if (shouldSkip) {
-          return;
+          return {
+            code,
+            map: inputMap ?? null
+          };
         }
         const parserPlugins = [
           ...babelOptions.parserOpts.plugins,
@@ -307,7 +336,7 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
-          inputSourceMap: false
+          inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;
@@ -347,7 +376,7 @@ function viteReact(opts = {}) {
           {
             tag: "script",
             attrs: { type: "module" },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ];
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0-alpha.3",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -23,11 +23,11 @@
   "scripts": {
     "dev": "unbuild --stub",
     "build": "unbuild && pnpm run patch-cjs",
-    "patch-cjs": "esno ../../scripts/patchCJS.ts",
+    "patch-cjs": "tsx ../../scripts/patchCJS.ts",
     "prepublishOnly": "npm run build"
   },
   "engines": {
-    "node": ">=14.6.0"
+    "node": ">=14.18.0"
   },
   "repository": {
     "type": "git",
@@ -39,16 +39,16 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/plugin-transform-react-jsx": "^7.17.12",
-    "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-    "@babel/plugin-transform-react-jsx-self": "^7.17.12",
-    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
-    "@rollup/pluginutils": "^4.2.1",
-    "react-refresh": "^0.13.0"
+    "@babel/core": "^7.18.6",
+    "@babel/plugin-transform-react-jsx": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-development": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-self": "^7.18.6",
+    "@babel/plugin-transform-react-jsx-source": "^7.18.6",
+    "magic-string": "^0.26.2",
+    "react-refresh": "^0.14.0"
   },
   "peerDependencies": {
-    "vite": "^3.0.0-alpha"
+    "vite": "^3.0.0"
   },
   "devDependencies": {
     "vite": "workspace:*"

package/src/fast-refresh.ts

@@ -1,6 +1,6 @@
-import fs from 'fs'
-import path from 'path'
-import { createRequire } from 'module'
+import fs from 'node:fs'
+import path from 'node:path'
+import { createRequire } from 'node:module'
 import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'

package/src/index.ts

@@ -1,9 +1,10 @@
-import path from 'path'
+import path from 'node:path'
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
-import { createFilter } from '@rollup/pluginutils'
-import { normalizePath } from 'vite'
+import { createFilter, normalizePath } from 'vite'
 import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
+import MagicString from 'magic-string'
+import type { SourceMap } from 'magic-string'
 import {
   addRefreshWrapper,
   isRefreshBoundary,
@@ -89,11 +90,14 @@ declare module 'vite' {
   }
 }
 
+const prependReactImportCode = "import React from 'react'; "
+
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
-  let base = '/'
+  let devBase = '/'
   let resolvedCacheDir: string
   let filter = createFilter(opts.include, opts.exclude)
+  let needHiresSourcemap = false
   let isProduction = true
   let projectRoot = process.cwd()
   let skipFastRefresh = opts.fastRefresh === false
@@ -118,13 +122,26 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   const viteBabel: Plugin = {
     name: 'vite:react-babel',
     enforce: 'pre',
+    config() {
+      if (opts.jsxRuntime === 'classic') {
+        return {
+          esbuild: {
+            logOverride: {
+              'this-is-undefined-in-esm': 'silent'
+            }
+          }
+        }
+      }
+    },
     configResolved(config) {
-      base = config.base
+      devBase = config.base
       projectRoot = config.root
       resolvedCacheDir = normalizePath(path.resolve(config.cacheDir))
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       })
+      needHiresSourcemap =
+        config.command === 'build' && !!config.build.sourcemap
       isProduction = config.isProduction
       skipFastRefresh ||= isProduction || config.command === 'build'
 
@@ -155,10 +172,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           .filter(Boolean) as ReactBabelHook[]
 
         if (hooks.length > 0) {
-          return (runPluginOverrides = (babelOptions) => {
+          return (runPluginOverrides = (babelOptions, context) => {
             hooks.forEach((hook) => hook(babelOptions, context, config))
             return true
-          })(babelOptions)
+          })(babelOptions, context)
         }
         runPluginOverrides = () => false
         return false
@@ -207,6 +224,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         }
 
         let ast: t.File | null | undefined
+        let prependReactImport = false
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             // By reverse-compiling "React.createElement" calls into JSX,
@@ -251,11 +269,23 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             // Even if the automatic JSX runtime is not used, we can still
             // inject the React import for .jsx and .tsx modules.
             if (!skipReactImport && !importReactRE.test(code)) {
-              code = `import React from 'react'; ` + code
+              prependReactImport = true
             }
           }
         }
 
+        let inputMap: SourceMap | undefined
+        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
+          }
+        }
+
         // Plugins defined through this Vite plugin are only applied
         // to modules within the project root, but "babel.config.js"
         // files can define plugins that need to be applied to every
@@ -265,8 +295,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           !babelOptions.configFile &&
           !(isProjectFile && babelOptions.babelrc)
 
+        // Avoid parsing if no plugins exist.
         if (shouldSkip) {
-          return // Avoid parsing if no plugins exist.
+          return {
+            code,
+            map: inputMap ?? null
+          }
         }
 
         const parserPlugins: typeof babelOptions.parserOpts.plugins = [
@@ -313,7 +347,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           plugins,
           sourceMaps: true,
           // Vite handles sourcemap flattening
-          inputSourceMap: false as any
+          inputSourceMap: inputMap ?? (false as any)
         })
 
         if (result) {
@@ -355,7 +389,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           {
             tag: 'script',
             attrs: { type: 'module' },
-            children: preambleCode.replace(`__BASE__`, base)
+            children: preambleCode.replace(`__BASE__`, devBase)
           }
         ]
     }