@vitejs/plugin-react 2.2.0-beta.0 → 3.0.0-alpha.0

package/dist/index.cjs

@@ -1,43 +1,37 @@
 'use strict';
 
-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 path = require('node:path');
 const node_module = require('node:module');
 
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e["default"] : e; }
-
-function _interopNamespace(e) {
-  if (e && e.__esModule) return e;
+function _interopNamespaceDefault(e) {
   const n = Object.create(null);
   if (e) {
     for (const k in e) {
       n[k] = e[k];
     }
   }
-  n["default"] = e;
+  n.default = e;
   return n;
 }
 
-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 babel__namespace = /*#__PURE__*/_interopNamespaceDefault(babel);
 
 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(
+const reactRefreshDir = path.dirname(
   _require.resolve("react-refresh/package.json")
 );
-const runtimeFilePath = path__default.join(
+const runtimeFilePath = path.join(
   reactRefreshDir,
   "cjs/react-refresh-runtime.development.js"
 );
 const runtimeCode = `
 const exports = {}
-${fs__default.readFileSync(runtimeFilePath, "utf-8")}
+${fs.readFileSync(runtimeFilePath, "utf-8")}
 function debounce(fn, delay) {
   let handle
   return () => {
@@ -157,83 +151,9 @@ function isComponentLikeName(name) {
   return typeof name === "string" && name[0] >= "A" && name[0] <= "Z";
 }
 
-function babelImportToRequire({ types: t }) {
-  return {
-    visitor: {
-      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
-              )
-            )
-          ])
-        );
-      }
-    }
-  };
-}
-
-let babelRestoreJSX;
-const jsxNotFound = [null, false];
-async function getBabelRestoreJSX() {
-  if (!babelRestoreJSX)
-    babelRestoreJSX = import('./chunks/babel-restore-jsx.cjs').then((r) => {
-      const fn = r.default;
-      if ("default" in fn)
-        return fn.default;
-      return fn;
-    });
-  return babelRestoreJSX;
-}
-async function restoreJSX(babel, code, filename) {
-  const [reactAlias, isCommonJS] = parseReactAlias(code);
-  if (!reactAlias) {
-    return jsxNotFound;
-  }
-  const reactJsxRE = new RegExp(
-    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
-    "g"
-  );
-  if (!reactJsxRE.test(code)) {
-    return jsxNotFound;
-  }
-  const result = await babel.transformAsync(code, {
-    babelrc: false,
-    configFile: false,
-    ast: true,
-    code: false,
-    filename,
-    parserOpts: {
-      plugins: ["jsx"]
-    },
-    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["']\)/
-  );
-  if (match) {
-    return [match[2], true];
-  }
-  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
-  if (match) {
-    return [match[1], false];
-  }
-  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;
@@ -248,13 +168,26 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
-    config() {
+    config(_, { mode }) {
+      const isProduction2 = (process.env.NODE_ENV || process.env.VITE_USER_NODE_ENV || mode) === "production";
       if (opts.jsxRuntime === "classic") {
         return {
           esbuild: {
             logOverride: {
               "this-is-undefined-in-esm": "silent"
-            }
+            },
+            jsx: "transform",
+            jsxImportSource: opts.jsxImportSource,
+            jsxSideEffects: opts.jsxPure === false
+          }
+        };
+      } else {
+        return {
+          esbuild: {
+            jsxDev: !isProduction2,
+            jsx: "automatic",
+            jsxImportSource: opts.jsxImportSource,
+            jsxSideEffects: opts.jsxPure === false
           }
         };
       }
@@ -262,7 +195,6 @@ function viteReact(opts = {}) {
     configResolved(config) {
       devBase = config.base;
       projectRoot = config.root;
-      resolvedCacheDir = vite.normalizePath(path__default.resolve(config.cacheDir));
       filter = vite.createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
@@ -326,29 +258,9 @@ 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")
-                ),
-                {
-                  runtime: "automatic",
-                  importSource: opts.jsxImportSource,
-                  pure: opts.jsxPure !== false,
-                  throwIfNamespace: opts.jsxThrowIfNamespace
-                }
-              ]);
-              if (isCommonJS) {
-                plugins.push(babelImportToRequire);
-              }
-            }
-          } else if (isProjectFile) {
+          if (!useAutomaticRuntime && isProjectFile) {
             if (!isProduction) {
               plugins.push(
                 await loadPlugin("@babel/plugin-transform-react-jsx-self"),
@@ -363,7 +275,7 @@ function viteReact(opts = {}) {
         let inputMap;
         if (prependReactImport) {
           if (needHiresSourcemap) {
-            const s = new MagicString__default(code);
+            const s = new MagicString(code);
             s.prepend(prependReactImportCode);
             code = s.toString();
             inputMap = s.generateMap({ hires: true, source: id });
@@ -392,7 +304,7 @@ function viteReact(opts = {}) {
         if (/\.tsx?$/.test(extension)) {
           parserPlugins.push("typescript");
         }
-        const transformAsync = ast ? babel__namespace.transformFromAstAsync.bind(babel__namespace, ast, code) : babel__namespace.transformAsync.bind(babel__namespace, code);
+        const transformAsync = babel__namespace.transformAsync.bind(babel__namespace, code);
         const isReasonReact = extension.endsWith(".bs.js");
         const result = await transformAsync({
           ...babelOptions,
@@ -500,8 +412,8 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];
 }
 viteReact.preambleCode = preambleCode;
-function loadPlugin(path2) {
-  return import(path2).then((module) => module.default || module);
+function loadPlugin(path) {
+  return import(path).then((module) => module.default || module);
 }
 function createBabelOptions(rawOptions) {
   var _a;
@@ -519,4 +431,4 @@ function createBabelOptions(rawOptions) {
 }
 
 module.exports = viteReact;
-module.exports["default"] = viteReact;
+module.exports.default = viteReact;

package/dist/index.d.ts

@@ -26,11 +26,6 @@ interface Options {
      * @default true
      */
     jsxPure?: boolean;
-    /**
-     * Toggles whether or not to throw an error if an XML namespaced tag name is used.
-     * @default true
-     */
-    jsxThrowIfNamespace?: boolean;
     /**
      * Babel configuration applied in both dev and prod.
      */

package/dist/index.mjs

@@ -1,8 +1,8 @@
-import path from 'node:path';
 import * as babel from '@babel/core';
-import { createFilter, normalizePath } from 'vite';
+import { createFilter } from 'vite';
 import MagicString from 'magic-string';
 import fs from 'node:fs';
+import path from 'node:path';
 import { createRequire } from 'node:module';
 
 const runtimePublicPath = "/@react-refresh";
@@ -136,83 +136,9 @@ function isComponentLikeName(name) {
   return typeof name === "string" && name[0] >= "A" && name[0] <= "Z";
 }
 
-function babelImportToRequire({ types: t }) {
-  return {
-    visitor: {
-      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
-              )
-            )
-          ])
-        );
-      }
-    }
-  };
-}
-
-let babelRestoreJSX;
-const jsxNotFound = [null, false];
-async function getBabelRestoreJSX() {
-  if (!babelRestoreJSX)
-    babelRestoreJSX = import('./chunks/babel-restore-jsx.mjs').then((r) => {
-      const fn = r.default;
-      if ("default" in fn)
-        return fn.default;
-      return fn;
-    });
-  return babelRestoreJSX;
-}
-async function restoreJSX(babel, code, filename) {
-  const [reactAlias, isCommonJS] = parseReactAlias(code);
-  if (!reactAlias) {
-    return jsxNotFound;
-  }
-  const reactJsxRE = new RegExp(
-    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
-    "g"
-  );
-  if (!reactJsxRE.test(code)) {
-    return jsxNotFound;
-  }
-  const result = await babel.transformAsync(code, {
-    babelrc: false,
-    configFile: false,
-    ast: true,
-    code: false,
-    filename,
-    parserOpts: {
-      plugins: ["jsx"]
-    },
-    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["']\)/
-  );
-  if (match) {
-    return [match[2], true];
-  }
-  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m);
-  if (match) {
-    return [match[1], false];
-  }
-  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;
@@ -227,13 +153,26 @@ function viteReact(opts = {}) {
   const viteBabel = {
     name: "vite:react-babel",
     enforce: "pre",
-    config() {
+    config(_, { mode }) {
+      const isProduction2 = (process.env.NODE_ENV || process.env.VITE_USER_NODE_ENV || mode) === "production";
       if (opts.jsxRuntime === "classic") {
         return {
           esbuild: {
             logOverride: {
               "this-is-undefined-in-esm": "silent"
-            }
+            },
+            jsx: "transform",
+            jsxImportSource: opts.jsxImportSource,
+            jsxSideEffects: opts.jsxPure === false
+          }
+        };
+      } else {
+        return {
+          esbuild: {
+            jsxDev: !isProduction2,
+            jsx: "automatic",
+            jsxImportSource: opts.jsxImportSource,
+            jsxSideEffects: opts.jsxPure === false
           }
         };
       }
@@ -241,7 +180,6 @@ function viteReact(opts = {}) {
     configResolved(config) {
       devBase = config.base;
       projectRoot = config.root;
-      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir));
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       });
@@ -305,29 +243,9 @@ 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")
-                ),
-                {
-                  runtime: "automatic",
-                  importSource: opts.jsxImportSource,
-                  pure: opts.jsxPure !== false,
-                  throwIfNamespace: opts.jsxThrowIfNamespace
-                }
-              ]);
-              if (isCommonJS) {
-                plugins.push(babelImportToRequire);
-              }
-            }
-          } else if (isProjectFile) {
+          if (!useAutomaticRuntime && isProjectFile) {
             if (!isProduction) {
               plugins.push(
                 await loadPlugin("@babel/plugin-transform-react-jsx-self"),
@@ -371,7 +289,7 @@ function viteReact(opts = {}) {
         if (/\.tsx?$/.test(extension)) {
           parserPlugins.push("typescript");
         }
-        const transformAsync = ast ? babel.transformFromAstAsync.bind(babel, ast, code) : babel.transformAsync.bind(babel, code);
+        const transformAsync = babel.transformAsync.bind(babel, code);
         const isReasonReact = extension.endsWith(".bs.js");
         const result = await transformAsync({
           ...babelOptions,
@@ -479,8 +397,8 @@ function viteReact(opts = {}) {
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];
 }
 viteReact.preambleCode = preambleCode;
-function loadPlugin(path2) {
-  return import(path2).then((module) => module.default || module);
+function loadPlugin(path) {
+  return import(path).then((module) => module.default || module);
 }
 function createBabelOptions(rawOptions) {
   var _a;

package/package.json

@@ -1,14 +1,13 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.2.0-beta.0",
+  "version": "3.0.0-alpha.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
     "Alec Larson"
   ],
   "files": [
-    "dist",
-    "src"
+    "dist"
   ],
   "main": "./dist/index.cjs",
   "module": "./dist/index.mjs",
@@ -39,12 +38,12 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.2",
     "@babel/plugin-transform-react-jsx": "^7.19.0",
     "@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.5",
+    "@babel/plugin-transform-react-jsx-source": "^7.19.6",
+    "magic-string": "^0.26.7",
     "react-refresh": "^0.14.0"
   },
   "peerDependencies": {

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

@@ -1,138 +0,0 @@
-'use strict';
-
-/**
- * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
- * @license GNU General Public License v3.0
- */
-function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
-  function getJSXNode(node) {
-    if (!isReactCreateElement(node)) {
-      return null;
-    }
-    const [nameNode, propsNode, ...childNodes] = node.arguments;
-    const name = getJSXName(nameNode);
-    if (name == null) {
-      return null;
-    }
-    const props = getJSXProps(propsNode);
-    if (props == null) {
-      return null;
-    }
-    const children = getJSXChildren(childNodes);
-    if (children == null) {
-      return null;
-    }
-    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);
-    startTag.loc = node.loc;
-    const endTag = selfClosing ? null : t.jsxClosingElement(name);
-    return t.jsxElement(startTag, endTag, children, selfClosing);
-  }
-  function getJSXName(node) {
-    if (node == null) {
-      return null;
-    }
-    const name = getJSXIdentifier(node, true);
-    if (name != null) {
-      return name;
-    }
-    if (!t.isMemberExpression(node)) {
-      return null;
-    }
-    const object = getJSXName(node.object);
-    const property = getJSXName(node.property);
-    if (object == null || property == null) {
-      return null;
-    }
-    return t.jsxMemberExpression(object, property);
-  }
-  function getJSXProps(node) {
-    if (node == null || isNullLikeNode(node)) {
-      return [];
-    }
-    if (t.isCallExpression(node) && t.isIdentifier(node.callee, { name: "_extends" })) {
-      const props = node.arguments.map(getJSXProps);
-      if (props.every((prop) => prop != null)) {
-        return [].concat(...props);
-      }
-    }
-    if (!t.isObjectExpression(node) && t.isExpression(node))
-      return [t.jsxSpreadAttribute(node)];
-    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)
-    ).filter(
-      (prop) => t.isJSXIdentifier(prop.name) ? prop.name.name !== "__self" && prop.name.name !== "__source" : true
-    );
-  }
-  function getJSXChild(node) {
-    if (t.isStringLiteral(node)) {
-      return t.jsxText(node.value);
-    }
-    if (isReactCreateElement(node)) {
-      return getJSXNode(node);
-    }
-    if (t.isExpression(node)) {
-      return t.jsxExpressionContainer(node);
-    }
-    return null;
-  }
-  function getJSXChildren(nodes) {
-    const children = nodes.filter((node) => !isNullLikeNode(node)).map(getJSXChild);
-    if (children.some((child) => child == null)) {
-      return null;
-    }
-    return children;
-  }
-  function getJSXIdentifier(node, tag = false) {
-    if (t.isIdentifier(node) && (!tag || node.name.match(/^[A-Z]/))) {
-      return t.jsxIdentifier(node.name);
-    }
-    if (t.isStringLiteral(node)) {
-      return t.jsxIdentifier(node.value);
-    }
-    return null;
-  }
-  function getJSXAttributeValue(node) {
-    if (t.isStringLiteral(node)) {
-      return node;
-    }
-    if (t.isJSXElement(node)) {
-      return node;
-    }
-    if (t.isExpression(node)) {
-      return t.jsxExpressionContainer(node);
-    }
-    return null;
-  }
-  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
-  );
-  return {
-    visitor: {
-      CallExpression(path) {
-        const node = getJSXNode(path.node);
-        if (node == null) {
-          return null;
-        }
-        path.replaceWith(node);
-      }
-    }
-  };
-}
-
-exports["default"] = babelRestoreJsx;