@vitejs/plugin-react 2.0.0-beta.1 → 2.0.0

package/dist/index.cjs

@@ -3,6 +3,7 @@
 const path = require('node:path');
 const babel = require('@babel/core');
 const vite = require('vite');
+const MagicString = require('magic-string');
 const fs = require('node:fs');
 const node_module = require('node:module');
 
@@ -22,6 +23,7 @@ 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";
@@ -183,10 +185,12 @@ function parseReactAlias(code) {
   return [void 0, false];
 }
 
+const prependReactImportCode = "import React from 'react'; ";
 function viteReact(opts = {}) {
   let devBase = "/";
   let resolvedCacheDir;
   let filter = vite.createFilter(opts.include, opts.exclude);
+  let needHiresSourcemap = false;
   let isProduction = true;
   let projectRoot = process.cwd();
   let skipFastRefresh = opts.fastRefresh === false;
@@ -217,6 +221,7 @@ function viteReact(opts = {}) {
       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;
@@ -273,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");
@@ -295,14 +301,26 @@ 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 {
-            code
+            code,
+            map: inputMap ?? null
           };
         }
         const parserPlugins = [
@@ -339,7 +357,7 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
-          inputSourceMap: false
+          inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;

package/dist/index.mjs

@@ -1,6 +1,7 @@
 import path from 'node:path';
 import * as babel from '@babel/core';
 import { createFilter, normalizePath } from 'vite';
+import MagicString from 'magic-string';
 import fs from 'node:fs';
 import { createRequire } from 'node:module';
 
@@ -163,10 +164,12 @@ function parseReactAlias(code) {
   return [void 0, false];
 }
 
+const prependReactImportCode = "import React from 'react'; ";
 function viteReact(opts = {}) {
   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;
@@ -197,6 +200,7 @@ function viteReact(opts = {}) {
       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;
@@ -253,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");
@@ -275,14 +280,26 @@ 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 {
-            code
+            code,
+            map: inputMap ?? null
           };
         }
         const parserPlugins = [
@@ -319,7 +336,7 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
-          inputSourceMap: false
+          inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -44,10 +44,11 @@
     "@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.11"
+    "vite": "^3.0.0"
   },
   "devDependencies": {
     "vite": "workspace:*"

package/src/index.ts

@@ -3,6 +3,8 @@ import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
 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,
@@ -88,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 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
@@ -135,6 +140,8 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       })
+      needHiresSourcemap =
+        config.command === 'build' && !!config.build.sourcemap
       isProduction = config.isProduction
       skipFastRefresh ||= isProduction || config.command === 'build'
 
@@ -217,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,
@@ -261,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
@@ -275,10 +295,11 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           !babelOptions.configFile &&
           !(isProjectFile && babelOptions.babelrc)
 
+        // Avoid parsing if no plugins exist.
         if (shouldSkip) {
-          // Avoid parsing if no plugins exist.
           return {
-            code
+            code,
+            map: inputMap ?? null
           }
         }
 
@@ -326,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) {