@vitejs/plugin-react 2.0.0-beta.0 → 2.0.1

package/README.md

@@ -83,7 +83,7 @@ Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/ba
 
 ## Middleware mode
 
-In [middleware mode](https://vitejs.dev/config/#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
+In [middleware mode](https://vitejs.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
 
 ```js
 app.get('/', async (req, res, next) => {

package/dist/chunks/babel-restore-jsx.cjs

@@ -4,7 +4,7 @@
  * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
  * @license GNU General Public License v3.0
  */
-function babelRestoreJsx({ types: t }) {
+function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
   function getJSXNode(node) {
     if (!isReactCreateElement(node)) {
       return null;
@@ -22,8 +22,12 @@ function babelRestoreJsx({ types: t }) {
     if (children == null) {
       return null;
     }
-    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === "React" && name.property.name === "Fragment") {
-      return t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), children);
+    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === reactAlias && name.property.name === "Fragment") {
+      return t.jsxFragment(
+        t.jsxOpeningFragment(),
+        t.jsxClosingFragment(),
+        children
+      );
     }
     const selfClosing = children.length === 0;
     const startTag = t.jsxOpeningElement(name, props, selfClosing);
@@ -64,7 +68,12 @@ function babelRestoreJsx({ types: t }) {
     if (!isPlainObjectExpression(node)) {
       return null;
     }
-    return node.properties.map((prop) => t.isObjectProperty(prop) ? t.jsxAttribute(getJSXIdentifier(prop.key), getJSXAttributeValue(prop.value)) : t.jsxSpreadAttribute(prop.argument));
+    return node.properties.map(
+      (prop) => t.isObjectProperty(prop) ? t.jsxAttribute(
+        getJSXIdentifier(prop.key),
+        getJSXAttributeValue(prop.value)
+      ) : t.jsxSpreadAttribute(prop.argument)
+    );
   }
   function getJSXChild(node) {
     if (t.isStringLiteral(node)) {
@@ -106,9 +115,11 @@ function babelRestoreJsx({ types: t }) {
     }
     return null;
   }
-  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: "React" }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
+  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: reactAlias }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
   const isNullLikeNode = (node) => t.isNullLiteral(node) || t.isIdentifier(node, { name: "undefined" });
-  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every((property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null);
+  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every(
+    (property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null
+  );
   return {
     visitor: {
       CallExpression(path) {

package/dist/chunks/babel-restore-jsx.mjs

@@ -2,7 +2,7 @@
  * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
  * @license GNU General Public License v3.0
  */
-function babelRestoreJsx({ types: t }) {
+function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
   function getJSXNode(node) {
     if (!isReactCreateElement(node)) {
       return null;
@@ -20,8 +20,12 @@ function babelRestoreJsx({ types: t }) {
     if (children == null) {
       return null;
     }
-    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === "React" && name.property.name === "Fragment") {
-      return t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), children);
+    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === reactAlias && name.property.name === "Fragment") {
+      return t.jsxFragment(
+        t.jsxOpeningFragment(),
+        t.jsxClosingFragment(),
+        children
+      );
     }
     const selfClosing = children.length === 0;
     const startTag = t.jsxOpeningElement(name, props, selfClosing);
@@ -62,7 +66,12 @@ function babelRestoreJsx({ types: t }) {
     if (!isPlainObjectExpression(node)) {
       return null;
     }
-    return node.properties.map((prop) => t.isObjectProperty(prop) ? t.jsxAttribute(getJSXIdentifier(prop.key), getJSXAttributeValue(prop.value)) : t.jsxSpreadAttribute(prop.argument));
+    return node.properties.map(
+      (prop) => t.isObjectProperty(prop) ? t.jsxAttribute(
+        getJSXIdentifier(prop.key),
+        getJSXAttributeValue(prop.value)
+      ) : t.jsxSpreadAttribute(prop.argument)
+    );
   }
   function getJSXChild(node) {
     if (t.isStringLiteral(node)) {
@@ -104,9 +113,11 @@ function babelRestoreJsx({ types: t }) {
     }
     return null;
   }
-  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: "React" }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
+  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: reactAlias }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
   const isNullLikeNode = (node) => t.isNullLiteral(node) || t.isIdentifier(node, { name: "undefined" });
-  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every((property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null);
+  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every(
+    (property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null
+  );
   return {
     visitor: {
       CallExpression(path) {

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,12 +23,18 @@ 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 = 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 reactRefreshDir = path__default.dirname(
+  _require.resolve("react-refresh/package.json")
+);
+const runtimeFilePath = path__default.join(
+  reactRefreshDir,
+  "cjs/react-refresh-runtime.development.js"
+);
 const runtimeCode = `
 const exports = {}
 ${fs__default.readFileSync(runtimeFilePath, "utf-8")}
@@ -92,8 +99,12 @@ function isRefreshBoundary(ast) {
     }
     const { declaration, specifiers } = node;
     if (declaration) {
+      if (declaration.type === "ClassDeclaration")
+        return false;
       if (declaration.type === "VariableDeclaration") {
-        return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id));
+        return declaration.declarations.every(
+          (variable) => isComponentLikeIdentifier(variable.id)
+        );
       }
       if (declaration.type === "FunctionDeclaration") {
         return !!declaration.id && isComponentLikeIdentifier(declaration.id);
@@ -117,9 +128,17 @@ function babelImportToRequire({ types: t }) {
       ImportDeclaration(path) {
         const decl = path.node;
         const spec = decl.specifiers[0];
-        path.replaceWith(t.variableDeclaration("var", [
-          t.variableDeclarator(spec.local, t.memberExpression(t.callExpression(t.identifier("require"), [decl.source]), spec.imported))
-        ]));
+        path.replaceWith(
+          t.variableDeclaration("var", [
+            t.variableDeclarator(
+              spec.local,
+              t.memberExpression(
+                t.callExpression(t.identifier("require"), [decl.source]),
+                spec.imported
+              )
+            )
+          ])
+        );
       }
     }
   };
@@ -142,20 +161,11 @@ async function restoreJSX(babel, code, filename) {
   if (!reactAlias) {
     return jsxNotFound;
   }
-  let hasCompiledJsx = false;
-  const fragmentPattern = `\\b${reactAlias}\\.Fragment\\b`;
-  const createElementPattern = `\\b${reactAlias}\\.createElement\\(\\s*([A-Z"'][\\w$.]*["']?)`;
-  code = code.replace(new RegExp(fragmentPattern, "g"), () => {
-    hasCompiledJsx = true;
-    return "React.Fragment";
-  }).replace(new RegExp(createElementPattern, "g"), (original, component) => {
-    if (/^[a-z][\w$]*$/.test(component)) {
-      return original;
-    }
-    hasCompiledJsx = true;
-    return "React.createElement(" + (component === "Fragment" ? "React.Fragment" : component);
-  });
-  if (!hasCompiledJsx) {
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    "g"
+  );
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound;
   }
   const result = await babel.transformAsync(code, {
@@ -167,12 +177,14 @@ async function restoreJSX(babel, code, filename) {
     parserOpts: {
       plugins: ["jsx"]
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   });
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
+  let match = code.match(
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
+  );
   if (match) {
     return [match[2], true];
   }
@@ -183,10 +195,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,25 +231,30 @@ 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;
       if (jsxInject && importReactRE.test(jsxInject)) {
         skipReactImport = true;
-        config.logger.warn("[@vitejs/plugin-react] This plugin imports React for you automatically, so you can stop using `esbuild.jsxInject` for that purpose.");
+        config.logger.warn(
+          "[@vitejs/plugin-react] This plugin imports React for you automatically, so you can stop using `esbuild.jsxInject` for that purpose."
+        );
       }
       config.plugins.forEach((plugin) => {
         const hasConflict = plugin.name === "react-refresh" || plugin !== viteReactJsx && plugin.name === "vite:react-jsx";
         if (hasConflict)
-          return config.logger.warn(`[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`);
+          return config.logger.warn(
+            `[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`
+          );
       });
       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;
@@ -273,13 +292,16 @@ function viteReact(opts = {}) {
           }
         }
         let ast;
+        let prependReactImport = false;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
             const [restoredAst, isCommonJS] = !isProjectFile && !isJSX && !isOptimizedReactDom ? await restoreJSX(babel__namespace, code, id) : [null, false];
             if (isJSX || (ast = restoredAst)) {
               plugins.push([
-                await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
+                await loadPlugin(
+                  "@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")
+                ),
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
@@ -292,16 +314,33 @@ function viteReact(opts = {}) {
             }
           } else if (isProjectFile) {
             if (!isProduction) {
-              plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
+              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,
@@ -337,7 +376,7 @@ function viteReact(opts = {}) {
           },
           plugins,
           sourceMaps: true,
-          inputSourceMap: false
+          inputSourceMap: inputMap ?? false
         });
         if (result) {
           let code2 = result.code;

package/dist/index.mjs

@@ -1,13 +1,19 @@
 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';
 
 const runtimePublicPath = "/@react-refresh";
 const _require = createRequire(import.meta.url);
-const reactRefreshDir = path.dirname(_require.resolve("react-refresh/package.json"));
-const runtimeFilePath = path.join(reactRefreshDir, "cjs/react-refresh-runtime.development.js");
+const reactRefreshDir = path.dirname(
+  _require.resolve("react-refresh/package.json")
+);
+const runtimeFilePath = path.join(
+  reactRefreshDir,
+  "cjs/react-refresh-runtime.development.js"
+);
 const runtimeCode = `
 const exports = {}
 ${fs.readFileSync(runtimeFilePath, "utf-8")}
@@ -72,8 +78,12 @@ function isRefreshBoundary(ast) {
     }
     const { declaration, specifiers } = node;
     if (declaration) {
+      if (declaration.type === "ClassDeclaration")
+        return false;
       if (declaration.type === "VariableDeclaration") {
-        return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id));
+        return declaration.declarations.every(
+          (variable) => isComponentLikeIdentifier(variable.id)
+        );
       }
       if (declaration.type === "FunctionDeclaration") {
         return !!declaration.id && isComponentLikeIdentifier(declaration.id);
@@ -97,9 +107,17 @@ function babelImportToRequire({ types: t }) {
       ImportDeclaration(path) {
         const decl = path.node;
         const spec = decl.specifiers[0];
-        path.replaceWith(t.variableDeclaration("var", [
-          t.variableDeclarator(spec.local, t.memberExpression(t.callExpression(t.identifier("require"), [decl.source]), spec.imported))
-        ]));
+        path.replaceWith(
+          t.variableDeclaration("var", [
+            t.variableDeclarator(
+              spec.local,
+              t.memberExpression(
+                t.callExpression(t.identifier("require"), [decl.source]),
+                spec.imported
+              )
+            )
+          ])
+        );
       }
     }
   };
@@ -122,20 +140,11 @@ async function restoreJSX(babel, code, filename) {
   if (!reactAlias) {
     return jsxNotFound;
   }
-  let hasCompiledJsx = false;
-  const fragmentPattern = `\\b${reactAlias}\\.Fragment\\b`;
-  const createElementPattern = `\\b${reactAlias}\\.createElement\\(\\s*([A-Z"'][\\w$.]*["']?)`;
-  code = code.replace(new RegExp(fragmentPattern, "g"), () => {
-    hasCompiledJsx = true;
-    return "React.Fragment";
-  }).replace(new RegExp(createElementPattern, "g"), (original, component) => {
-    if (/^[a-z][\w$]*$/.test(component)) {
-      return original;
-    }
-    hasCompiledJsx = true;
-    return "React.createElement(" + (component === "Fragment" ? "React.Fragment" : component);
-  });
-  if (!hasCompiledJsx) {
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    "g"
+  );
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound;
   }
   const result = await babel.transformAsync(code, {
@@ -147,12 +156,14 @@ async function restoreJSX(babel, code, filename) {
     parserOpts: {
       plugins: ["jsx"]
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   });
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
+  let match = code.match(
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
+  );
   if (match) {
     return [match[2], true];
   }
@@ -163,10 +174,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,25 +210,30 @@ 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;
       if (jsxInject && importReactRE.test(jsxInject)) {
         skipReactImport = true;
-        config.logger.warn("[@vitejs/plugin-react] This plugin imports React for you automatically, so you can stop using `esbuild.jsxInject` for that purpose.");
+        config.logger.warn(
+          "[@vitejs/plugin-react] This plugin imports React for you automatically, so you can stop using `esbuild.jsxInject` for that purpose."
+        );
       }
       config.plugins.forEach((plugin) => {
         const hasConflict = plugin.name === "react-refresh" || plugin !== viteReactJsx && plugin.name === "vite:react-jsx";
         if (hasConflict)
-          return config.logger.warn(`[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`);
+          return config.logger.warn(
+            `[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`
+          );
       });
       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;
@@ -253,13 +271,16 @@ function viteReact(opts = {}) {
           }
         }
         let ast;
+        let prependReactImport = false;
         if (!isProjectFile || isJSX) {
           if (useAutomaticRuntime) {
             const isOptimizedReactDom = id.startsWith(resolvedCacheDir) && id.includes("/react-dom.js");
             const [restoredAst, isCommonJS] = !isProjectFile && !isJSX && !isOptimizedReactDom ? await restoreJSX(babel, code, id) : [null, false];
             if (isJSX || (ast = restoredAst)) {
               plugins.push([
-                await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
+                await loadPlugin(
+                  "@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")
+                ),
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
@@ -272,16 +293,33 @@ function viteReact(opts = {}) {
             }
           } else if (isProjectFile) {
             if (!isProduction) {
-              plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
+              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,
@@ -317,7 +355,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.0",
+  "version": "2.0.1",
   "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.18.0"
+    "node": "^14.18.0 || >=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -39,15 +39,16 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.5",
-    "@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",
+    "@babel/core": "^7.18.10",
+    "@babel/plugin-transform-react-jsx": "^7.18.10",
+    "@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/fast-refresh.ts

@@ -92,6 +92,7 @@ export function isRefreshBoundary(ast: t.File): boolean {
     }
     const { declaration, specifiers } = node
     if (declaration) {
+      if (declaration.type === 'ClassDeclaration') return false
       if (declaration.type === 'VariableDeclaration') {
         return declaration.declarations.every((variable) =>
           isComponentLikeIdentifier(variable.id)

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'
 
@@ -165,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
@@ -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,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 = [
@@ -323,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) {

package/src/jsx-runtime/babel-restore-jsx.ts

@@ -4,6 +4,10 @@
  */
 import type * as babel from '@babel/core'
 
+interface PluginOptions {
+  reactAlias: string
+}
+
 /**
  * Visitor factory for babel, converting React.createElement(...) to <jsx ...>...</jsx>
  *
@@ -17,7 +21,10 @@ import type * as babel from '@babel/core'
  *
  * Any of those arguments might also be missing (undefined) and/or invalid.
  */
-export default function ({ types: t }: typeof babel): babel.PluginObj {
+export default function (
+  { types: t }: typeof babel,
+  { reactAlias = 'React' }: PluginOptions
+): babel.PluginObj {
   /**
    * Get a `JSXElement` from a `CallExpression`.
    * Returns `null` if this impossible.
@@ -48,7 +55,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
     if (
       t.isJSXMemberExpression(name) &&
       t.isJSXIdentifier(name.object) &&
-      name.object.name === 'React' &&
+      name.object.name === reactAlias &&
       name.property.name === 'Fragment'
     ) {
       return t.jsxFragment(
@@ -182,7 +189,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
   const isReactCreateElement = (node: any) =>
     t.isCallExpression(node) &&
     t.isMemberExpression(node.callee) &&
-    t.isIdentifier(node.callee.object, { name: 'React' }) &&
+    t.isIdentifier(node.callee.object, { name: reactAlias }) &&
     t.isIdentifier(node.callee.property, { name: 'createElement' }) &&
     !node.callee.computed
 

package/src/jsx-runtime/restore-jsx.spec.ts

@@ -81,7 +81,10 @@ describe('restore-jsx', () => {
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
       React__default.createElement(foo)`)
-    ).toBeNull()
+    ).toMatchInlineSnapshot(`
+      "import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(foo);"
+    `)
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
       React__default.createElement("h1")`)
@@ -104,7 +107,12 @@ describe('restore-jsx', () => {
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
       React__default.createElement(foo, {hi: there})`)
-    ).toBeNull()
+    ).toMatchInlineSnapshot(`
+      "import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(foo, {
+        hi: there
+      });"
+    `)
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
     React__default.createElement("h1", {hi: there})`)
@@ -114,4 +122,26 @@ describe('restore-jsx', () => {
       React__default.createElement(Foo, {hi: there})`)
     ).toMatch(`<Foo hi={there} />;`)
   })
+
+  it('should handle Fragment', async () => {
+    expect(
+      await jsx(`import R, { Fragment } from 'react';
+        R.createElement(Fragment)
+      `)
+    ).toMatchInlineSnapshot(`
+      "import R, { Fragment } from 'react';
+      <Fragment />;"
+    `)
+  })
+
+  it('should handle Fragment alias', async () => {
+    expect(
+      await jsx(`import RA, { Fragment as F } from 'react';
+        RA.createElement(F, null, RA.createElement(RA.Fragment))
+      `)
+    ).toMatchInlineSnapshot(`
+      "import RA, { Fragment as F } from 'react';
+      <F><></></F>;"
+    `)
+  })
 })

package/src/jsx-runtime/restore-jsx.ts

@@ -33,34 +33,12 @@ export async function restoreJSX(
     return jsxNotFound
   }
 
-  let hasCompiledJsx = false
-
-  const fragmentPattern = `\\b${reactAlias}\\.Fragment\\b`
-  const createElementPattern = `\\b${reactAlias}\\.createElement\\(\\s*([A-Z"'][\\w$.]*["']?)`
-
-  // Replace the alias with "React" so JSX can be reverse compiled.
-  code = code
-    .replace(new RegExp(fragmentPattern, 'g'), () => {
-      hasCompiledJsx = true
-      return 'React.Fragment'
-    })
-    .replace(new RegExp(createElementPattern, 'g'), (original, component) => {
-      if (/^[a-z][\w$]*$/.test(component)) {
-        // Take care not to replace the alias for `createElement` calls whose
-        // component is a lowercased variable, since the `restoreJSX` Babel
-        // plugin leaves them untouched.
-        return original
-      }
-      hasCompiledJsx = true
-      return (
-        'React.createElement(' +
-        // Assume `Fragment` is equivalent to `React.Fragment` so modules
-        // that use `import {Fragment} from 'react'` are reverse compiled.
-        (component === 'Fragment' ? 'React.Fragment' : component)
-      )
-    })
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    'g'
+  )
 
-  if (!hasCompiledJsx) {
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound
   }
 
@@ -73,7 +51,7 @@ export async function restoreJSX(
     parserOpts: {
       plugins: ['jsx']
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   })
 
   return [result?.ast, isCommonJS]