@vitejs/plugin-react 1.1.1 → 1.2.0

package/CHANGELOG.md

@@ -1,3 +1,45 @@
+# [1.2.0](https://github.com/vitejs/vite/compare/plugin-react@1.1.4...plugin-react@1.2.0) (2022-02-09)
+
+
+### Features
+
+* **plugin-react:** ensure `overrides` array exists before `api.reactBabel` hooks are called ([#6750](https://github.com/vitejs/vite/issues/6750)) ([104bdb5](https://github.com/vitejs/vite/commit/104bdb5b5e44e79bf3456cabe15f3753f7c1ef28))
+
+
+
+## [1.1.4](https://github.com/vitejs/vite/compare/plugin-react@1.1.3...plugin-react@1.1.4) (2022-01-04)
+
+
+### Bug Fixes
+
+* **plugin-react:** check for import React statement in .js files ([#6320](https://github.com/vitejs/vite/issues/6320)) ([bd9e97b](https://github.com/vitejs/vite/commit/bd9e97bd1b9156059b78b531871a12f6f47c04b1)), closes [#6148](https://github.com/vitejs/vite/issues/6148) [#6148](https://github.com/vitejs/vite/issues/6148)
+* **plugin-react:** restore-jsx bug when component name is lowercase ([#6110](https://github.com/vitejs/vite/issues/6110)) ([ce65c56](https://github.com/vitejs/vite/commit/ce65c567a64fad3be4209cbd1132e62e905fe349))
+
+
+### Features
+
+* **plugin-react:** check for `api.reactBabel` on other plugins ([#5454](https://github.com/vitejs/vite/issues/5454)) ([2ab41b3](https://github.com/vitejs/vite/commit/2ab41b3184d2452be4fa0b427f05c791311644aa))
+
+
+
+## [1.1.3](https://github.com/vitejs/vite/compare/plugin-react@1.1.2...plugin-react@1.1.3) (2021-12-13)
+
+
+### Bug Fixes
+
+* **plugin-react:** only detect preamble in hmr context ([#6096](https://github.com/vitejs/vite/issues/6096)) ([8735294](https://github.com/vitejs/vite/commit/8735294055ce16308a6b8302eba4538f4a2931d0))
+
+
+
+## [1.1.2](https://github.com/vitejs/vite/compare/plugin-react@1.1.1...plugin-react@1.1.2) (2021-12-13)
+
+
+### Bug Fixes
+
+* ignore babel config when running restore-jsx ([#6047](https://github.com/vitejs/vite/issues/6047)) ([9c2843c](https://github.com/vitejs/vite/commit/9c2843cf0506844ee32f042a04c22c440434df2a))
+
+
+
 ## [1.1.1](https://github.com/vitejs/vite/compare/plugin-react@1.1.0...plugin-react@1.1.1) (2021-12-07)
 
 

package/README.md

@@ -33,6 +33,16 @@ react({
 })
 ```
 
+## Opting out of the automatic JSX runtime
+
+By default, the plugin uses the [automatic JSX runtime](https://github.com/alloc/vite-react-jsx#faq). However, if you encounter any issues, you may opt out using the `jsxRuntime` option.
+
+```js
+react({
+  jsxRuntime: 'classic'
+})
+```
+
 ## Babel configuration
 
 The `babel` option lets you add plugins, presets, and [other configuration](https://babeljs.io/docs/en/options) to the Babel transformation performed on each JSX/TSX file.

package/dist/index.d.ts

@@ -2,6 +2,8 @@ import type { ParserOptions } from '@babel/core';
 import type { PluginOption } from 'vite';
 import type { TransformOptions } from '@babel/core';
 
+export declare type BabelOptions = Omit<TransformOptions, 'ast' | 'filename' | 'root' | 'sourceFileName' | 'sourceMaps' | 'inputSourceMap'>;
+
 export declare interface Options {
     include?: string | RegExp | Array<string | RegExp>;
     exclude?: string | RegExp | Array<string | RegExp>;
@@ -24,13 +26,26 @@ export declare interface Options {
     /**
      * Babel configuration applied in both dev and prod.
      */
-    babel?: TransformOptions;
+    babel?: BabelOptions;
     /**
      * @deprecated Use `babel.parserOpts.plugins` instead
      */
     parserPlugins?: ParserOptions['plugins'];
 }
 
+/**
+ * The object type used by the `options` passed to plugins with
+ * an `api.reactBabel` method.
+ */
+export declare interface ReactBabelOptions extends BabelOptions {
+    plugins: Extract<BabelOptions['plugins'], any[]>;
+    presets: Extract<BabelOptions['presets'], any[]>;
+    overrides: Extract<BabelOptions['overrides'], any[]>;
+    parserOpts: ParserOptions & {
+        plugins: Extract<ParserOptions['plugins'], any[]>;
+    };
+}
+
 declare function viteReact(opts?: Options): PluginOption[];
 
 declare namespace viteReact {

package/dist/index.js

@@ -23,24 +23,28 @@ var __spreadValues = (a, b) => {
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
 var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[Object.keys(fn)[0]])(fn = 0)), res;
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
 var __export = (target, all) => {
-  __markAsModule(target);
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
 };
-var __reExport = (target, module2, desc) => {
+var __reExport = (target, module2, copyDefault, desc) => {
   if (module2 && typeof module2 === "object" || typeof module2 === "function") {
     for (let key of __getOwnPropNames(module2))
-      if (!__hasOwnProp.call(target, key) && key !== "default")
+      if (!__hasOwnProp.call(target, key) && (copyDefault || key !== "default"))
         __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
   }
   return target;
 };
-var __toModule = (module2) => {
-  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
+var __toESM = (module2, isNodeMode) => {
+  return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", !isNodeMode && module2 && module2.__esModule ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
 };
+var __toCommonJS = /* @__PURE__ */ ((cache) => {
+  return (module2, temp) => {
+    return cache && cache.get(module2) || (temp = __reExport(__markAsModule({}), module2, 1), cache && cache.set(module2, temp), temp);
+  };
+})(typeof WeakMap !== "undefined" ? /* @__PURE__ */ new WeakMap() : 0);
 
 // src/jsx-runtime/babel-restore-jsx.ts
 var babel_restore_jsx_exports = {};
@@ -78,7 +82,7 @@ function babel_restore_jsx_default({ types: t }) {
     if (node == null) {
       return null;
     }
-    const name = getJSXIdentifier(node);
+    const name = getJSXIdentifier(node, true);
     if (name != null) {
       return name;
     }
@@ -128,8 +132,8 @@ function babel_restore_jsx_default({ types: t }) {
     }
     return children;
   }
-  function getJSXIdentifier(node) {
-    if (t.isIdentifier(node)) {
+  function getJSXIdentifier(node, tag = false) {
+    if (t.isIdentifier(node) && (!tag || node.name.match(/^[A-Z]/))) {
       return t.jsxIdentifier(node.name);
     }
     if (t.isStringLiteral(node)) {
@@ -170,15 +174,16 @@ var init_babel_restore_jsx = __esm({
 });
 
 // src/index.ts
-__export(exports, {
+var src_exports = {};
+__export(src_exports, {
   default: () => viteReact
 });
-var babel = __toModule(require("@babel/core"));
-var import_pluginutils = __toModule(require("@rollup/pluginutils"));
-var import_resolve = __toModule(require("resolve"));
+var babel = __toESM(require("@babel/core"));
+var import_pluginutils = require("@rollup/pluginutils");
+var import_resolve = __toESM(require("resolve"));
 
 // src/fast-refresh.ts
-var import_fs = __toModule(require("fs"));
+var import_fs = __toESM(require("fs"));
 var runtimePublicPath = "/@react-refresh";
 var runtimeFilePath = require.resolve("react-refresh/cjs/react-refresh-runtime.development.js");
 var runtimeCode = `
@@ -207,14 +212,14 @@ import RefreshRuntime from "${runtimePublicPath}";
 let prevRefreshReg;
 let prevRefreshSig;
 
-if (!window.__vite_plugin_react_preamble_installed__) {
-  throw new Error(
-    "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
-    "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
-  );
-}
-
 if (import.meta.hot) {
+  if (!window.__vite_plugin_react_preamble_installed__) {
+    throw new Error(
+      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
+      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
+    );
+  }
+
   prevRefreshReg = window.$RefreshReg$;
   prevRefreshSig = window.$RefreshSig$;
   window.$RefreshReg$ = (type, id) => {
@@ -265,9 +270,7 @@ function isComponentLikeName(name) {
 }
 
 // src/jsx-runtime/babel-import-to-require.ts
-function babelImportToRequire({
-  types: t
-}) {
+function babelImportToRequire({ types: t }) {
   return {
     visitor: {
       ImportDeclaration(path) {
@@ -304,13 +307,15 @@ async function restoreJSX(babel2, code, filename) {
   code = code.replace(/createElement\(Fragment,/g, "createElement(React.Fragment,");
   babelRestoreJSX || (babelRestoreJSX = Promise.resolve().then(() => (init_babel_restore_jsx(), babel_restore_jsx_exports)));
   const result = await babel2.transformAsync(code, {
+    babelrc: false,
+    configFile: false,
     ast: true,
     code: false,
     filename,
     parserOpts: {
       plugins: ["jsx"]
     },
-    plugins: [await babelRestoreJSX]
+    plugins: [(await babelRestoreJSX).default]
   });
   return [result == null ? void 0 : result.ast, isCommonJS];
 }
@@ -328,7 +333,7 @@ function parseReactAlias(code) {
 
 // src/index.ts
 function viteReact(opts = {}) {
-  var _a, _b, _c;
+  var _a;
   let base = "/";
   let filter = (0, import_pluginutils.createFilter)(opts.include, opts.exclude);
   let isProduction = true;
@@ -336,8 +341,15 @@ function viteReact(opts = {}) {
   let skipFastRefresh = opts.fastRefresh === false;
   let skipReactImport = false;
   const useAutomaticRuntime = opts.jsxRuntime !== "classic";
-  const userPlugins = ((_a = opts.babel) == null ? void 0 : _a.plugins) || [];
-  const userParserPlugins = opts.parserPlugins || ((_c = (_b = opts.babel) == null ? void 0 : _b.parserOpts) == null ? void 0 : _c.plugins) || [];
+  const babelOptions = __spreadValues({
+    babelrc: false,
+    configFile: false
+  }, opts.babel);
+  babelOptions.plugins || (babelOptions.plugins = []);
+  babelOptions.presets || (babelOptions.presets = []);
+  babelOptions.overrides || (babelOptions.overrides = []);
+  babelOptions.parserOpts || (babelOptions.parserOpts = {});
+  (_a = babelOptions.parserOpts).plugins || (_a.plugins = opts.parserPlugins || []);
   const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/;
   const fileExtensionRE = /\.[^\/\s\?]+$/;
   const viteBabel = {
@@ -356,10 +368,17 @@ function viteReact(opts = {}) {
         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.plugins.forEach((plugin) => (plugin.name === "react-refresh" || plugin !== viteReactJsx && plugin.name === "vite:react-jsx") && config.logger.warn(`[@vitejs/plugin-react] You should stop using "${plugin.name}" since this plugin conflicts with it.`));
+      config.plugins.forEach((plugin) => {
+        var _a2;
+        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.`);
+        if ((_a2 = plugin.api) == null ? void 0 : _a2.reactBabel) {
+          plugin.api.reactBabel(babelOptions, config);
+        }
+      });
     },
     async transform(code, id, options) {
-      var _a2, _b2, _c2, _d;
       const ssr = typeof options === "boolean" ? options : (options == null ? void 0 : options.ssr) === true;
       const [filepath, querystring = ""] = id.split("?");
       const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
@@ -367,10 +386,10 @@ function viteReact(opts = {}) {
         const isJSX = extension.endsWith("x");
         const isNodeModules = id.includes("/node_modules/");
         const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(projectRoot + "/"));
-        const plugins = isProjectFile ? [...userPlugins] : [];
+        const plugins = isProjectFile ? [...babelOptions.plugins] : [];
         let useFastRefresh = false;
         if (!skipFastRefresh && !ssr && !isNodeModules) {
-          const isReactModule = isJSX || code.includes("react");
+          const isReactModule = isJSX || importReactRE.test(code);
           if (isReactModule && filter(id)) {
             useFastRefresh = true;
             plugins.push([
@@ -404,12 +423,12 @@ function viteReact(opts = {}) {
             }
           }
         }
-        const shouldSkip = !plugins.length && !((_a2 = opts.babel) == null ? void 0 : _a2.configFile) && !(isProjectFile && ((_b2 = opts.babel) == null ? void 0 : _b2.babelrc));
+        const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
         if (shouldSkip) {
           return;
         }
         const parserPlugins = [
-          ...userParserPlugins,
+          ...babelOptions.parserOpts.plugins,
           "importMeta",
           "topLevelAwait",
           "classProperties",
@@ -422,28 +441,25 @@ function viteReact(opts = {}) {
         if (/\.tsx?$/.test(extension)) {
           parserPlugins.push("typescript");
         }
+        const transformAsync2 = ast ? babel.transformFromAstAsync.bind(babel, ast, code) : babel.transformAsync.bind(babel, code);
         const isReasonReact = extension.endsWith(".bs.js");
-        const babelOpts = __spreadProps(__spreadValues({
-          babelrc: false,
-          configFile: false
-        }, opts.babel), {
+        const result = await transformAsync2(__spreadProps(__spreadValues({}, babelOptions), {
           ast: !isReasonReact,
           root: projectRoot,
           filename: id,
           sourceFileName: filepath,
-          parserOpts: __spreadProps(__spreadValues({}, (_c2 = opts.babel) == null ? void 0 : _c2.parserOpts), {
+          parserOpts: __spreadProps(__spreadValues({}, babelOptions.parserOpts), {
             sourceType: "module",
             allowAwaitOutsideFunction: true,
             plugins: parserPlugins
           }),
-          generatorOpts: __spreadProps(__spreadValues({}, (_d = opts.babel) == null ? void 0 : _d.generatorOpts), {
+          generatorOpts: __spreadProps(__spreadValues({}, babelOptions.generatorOpts), {
             decoratorsBeforeExport: true
           }),
           plugins,
           sourceMaps: true,
           inputSourceMap: false
-        });
-        const result = ast ? await babel.transformFromAstAsync(ast, code, babelOpts) : await babel.transformAsync(code, babelOpts);
+        }));
         if (result) {
           let code2 = result.code;
           if (useFastRefresh && /\$RefreshReg\$\(/.test(code2)) {
@@ -518,10 +534,10 @@ function viteReact(opts = {}) {
 }
 viteReact.preambleCode = preambleCode;
 function loadPlugin(path) {
-  return Promise.resolve().then(() => __toModule(require(path))).then((module2) => module2.default || module2);
+  return Promise.resolve().then(() => __toESM(require(path))).then((module2) => module2.default || module2);
 }
 module.exports = viteReact;
-viteReact["default"] = viteReact;
+viteReact['default'] = viteReact;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {});
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -15,10 +15,11 @@
   "scripts": {
     "dev": "tsc -p . -w --incremental",
     "build": "rimraf dist && run-s build-bundle build-types",
-    "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:@babel/* --external:@rollup/* --external:resolve --external:react-refresh/* --outfile=dist/index.js",
+    "build-bundle": "esbuild src/index.ts --bundle --platform=node --target=node12 --external:@babel/* --external:@rollup/* --external:resolve --external:react-refresh/* --outfile=dist/index.js && npm run patch-dist",
+    "patch-dist": "ts-node ../../scripts/patchEsbuildDist.ts dist/index.js viteReact",
     "build-types": "tsc -p . --emitDeclarationOnly --outDir temp && api-extractor run && rimraf temp",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s --commit-path . --lerna-package plugin-react",
-    "release": "node ../../scripts/release.cjs"
+    "release": "ts-node ../../scripts/release.ts"
   },
   "engines": {
     "node": ">=12.0.0"
@@ -33,13 +34,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/plugin-transform-react-jsx": "^7.16.0",
-    "@babel/plugin-transform-react-jsx-development": "^7.16.0",
-    "@babel/plugin-transform-react-jsx-self": "^7.16.0",
-    "@babel/plugin-transform-react-jsx-source": "^7.16.0",
-    "@rollup/pluginutils": "^4.1.1",
+    "@babel/core": "^7.16.12",
+    "@babel/plugin-transform-react-jsx": "^7.16.7",
+    "@babel/plugin-transform-react-jsx-development": "^7.16.7",
+    "@babel/plugin-transform-react-jsx-self": "^7.16.7",
+    "@babel/plugin-transform-react-jsx-source": "^7.16.7",
+    "@rollup/pluginutils": "^4.1.2",
     "react-refresh": "^0.11.0",
-    "resolve": "^1.20.0"
+    "resolve": "^1.22.0"
   }
 }

package/src/fast-refresh.ts

@@ -35,14 +35,14 @@ import RefreshRuntime from "${runtimePublicPath}";
 let prevRefreshReg;
 let prevRefreshSig;
 
-if (!window.__vite_plugin_react_preamble_installed__) {
-  throw new Error(
-    "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
-    "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
-  );
-}
-
 if (import.meta.hot) {
+  if (!window.__vite_plugin_react_preamble_installed__) {
+    throw new Error(
+      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +
+      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"
+    );
+  }
+
   prevRefreshReg = window.$RefreshReg$;
   prevRefreshSig = window.$RefreshSig$;
   window.$RefreshReg$ = (type, id) => {

package/src/index.ts

@@ -36,13 +36,47 @@ export interface Options {
   /**
    * Babel configuration applied in both dev and prod.
    */
-  babel?: TransformOptions
+  babel?: BabelOptions
   /**
    * @deprecated Use `babel.parserOpts.plugins` instead
    */
   parserPlugins?: ParserOptions['plugins']
 }
 
+export type BabelOptions = Omit<
+  TransformOptions,
+  | 'ast'
+  | 'filename'
+  | 'root'
+  | 'sourceFileName'
+  | 'sourceMaps'
+  | 'inputSourceMap'
+>
+
+/**
+ * The object type used by the `options` passed to plugins with
+ * an `api.reactBabel` method.
+ */
+export interface ReactBabelOptions extends BabelOptions {
+  plugins: Extract<BabelOptions['plugins'], any[]>
+  presets: Extract<BabelOptions['presets'], any[]>
+  overrides: Extract<BabelOptions['overrides'], any[]>
+  parserOpts: ParserOptions & {
+    plugins: Extract<ParserOptions['plugins'], any[]>
+  }
+}
+
+declare module 'vite' {
+  export interface Plugin {
+    api?: {
+      /**
+       * Manipulate the Babel options of `@vitejs/plugin-react`
+       */
+      reactBabel?: (options: ReactBabelOptions, config: ResolvedConfig) => void
+    }
+  }
+}
+
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let base = '/'
@@ -54,11 +88,19 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
 
   const useAutomaticRuntime = opts.jsxRuntime !== 'classic'
 
-  const userPlugins = opts.babel?.plugins || []
-  const userParserPlugins =
-    opts.parserPlugins || opts.babel?.parserOpts?.plugins || []
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...opts.babel
+  } as ReactBabelOptions
 
-  // Support pattens like:
+  babelOptions.plugins ||= []
+  babelOptions.presets ||= []
+  babelOptions.overrides ||= []
+  babelOptions.parserOpts ||= {} as any
+  babelOptions.parserOpts.plugins ||= opts.parserPlugins || []
+
+  // Support patterns like:
   // - import * as React from 'react';
   // - import React from 'react';
   // - import React, {useEffect} from 'react';
@@ -88,15 +130,21 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         )
       }
 
-      config.plugins.forEach(
-        (plugin) =>
-          (plugin.name === 'react-refresh' ||
-            (plugin !== viteReactJsx && plugin.name === 'vite:react-jsx')) &&
-          config.logger.warn(
+      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.`
           )
-      )
+
+        if (plugin.api?.reactBabel) {
+          plugin.api.reactBabel(babelOptions, config)
+        }
+      })
     },
     async transform(code, id, options) {
       const ssr = typeof options === 'boolean' ? options : options?.ssr === true
@@ -113,12 +161,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         const isProjectFile =
           !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
-        const plugins = isProjectFile ? [...userPlugins] : []
+        const plugins = isProjectFile ? [...babelOptions.plugins] : []
 
         let useFastRefresh = false
         if (!skipFastRefresh && !ssr && !isNodeModules) {
           // Modules with .js or .ts extension must import React.
-          const isReactModule = isJSX || code.includes('react')
+          const isReactModule = isJSX || importReactRE.test(code)
           if (isReactModule && filter(id)) {
             useFastRefresh = true
             plugins.push([
@@ -179,15 +227,15 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         // module, including node_modules and linked packages.
         const shouldSkip =
           !plugins.length &&
-          !opts.babel?.configFile &&
-          !(isProjectFile && opts.babel?.babelrc)
+          !babelOptions.configFile &&
+          !(isProjectFile && babelOptions.babelrc)
 
         if (shouldSkip) {
           return // Avoid parsing if no plugins exist.
         }
 
-        const parserPlugins: typeof userParserPlugins = [
-          ...userParserPlugins,
+        const parserPlugins: typeof babelOptions.parserOpts.plugins = [
+          ...babelOptions.parserOpts.plugins,
           'importMeta',
           // This plugin is applied before esbuild transforms the code,
           // so we need to enable some stage 3 syntax that is supported in
@@ -206,35 +254,32 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           parserPlugins.push('typescript')
         }
 
-        const isReasonReact = extension.endsWith('.bs.js')
+        const transformAsync = ast
+          ? babel.transformFromAstAsync.bind(babel, ast, code)
+          : babel.transformAsync.bind(babel, code)
 
-        const babelOpts: TransformOptions = {
-          babelrc: false,
-          configFile: false,
-          ...opts.babel,
+        const isReasonReact = extension.endsWith('.bs.js')
+        const result = await transformAsync({
+          ...babelOptions,
           ast: !isReasonReact,
           root: projectRoot,
           filename: id,
           sourceFileName: filepath,
           parserOpts: {
-            ...opts.babel?.parserOpts,
+            ...babelOptions.parserOpts,
             sourceType: 'module',
             allowAwaitOutsideFunction: true,
             plugins: parserPlugins
           },
           generatorOpts: {
-            ...opts.babel?.generatorOpts,
+            ...babelOptions.generatorOpts,
             decoratorsBeforeExport: true
           },
           plugins,
           sourceMaps: true,
           // Vite handles sourcemap flattening
           inputSourceMap: false as any
-        }
-
-        const result = ast
-          ? await babel.transformFromAstAsync(ast, code, babelOpts)
-          : await babel.transformAsync(code, babelOpts)
+        })
 
         if (result) {
           let code = result.code!
@@ -323,5 +368,8 @@ function loadPlugin(path: string): Promise<any> {
 }
 
 // overwrite for cjs require('...')() usage
-module.exports = viteReact
-viteReact['default'] = viteReact
+// The following lines are inserted by scripts/patchEsbuildDist.ts,
+// this doesn't bundle correctly after esbuild 0.14.4
+//
+// module.exports = viteReact
+// viteReact['default'] = viteReact

package/src/jsx-runtime/babel-import-to-require.ts

@@ -1,3 +1,4 @@
+import type * as babelCore from '@babel/core'
 import type { types as t, Visitor } from '@babel/core'
 
 /**
@@ -9,9 +10,7 @@ import type { types as t, Visitor } from '@babel/core'
  *
  *     var _jsx = require("react/jsx-runtime").jsx
  */
-export function babelImportToRequire({
-  types: t
-}: typeof import('@babel/core')): {
+export function babelImportToRequire({ types: t }: typeof babelCore): {
   visitor: Visitor
 } {
   return {

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

@@ -108,4 +108,10 @@ describe('babel-restore-jsx', () => {
       )
     ).toMatchInlineSnapshot(`"<h1>{foo ? <p /> : null}</h1>;"`)
   })
+
+  it('should handle lowercase component names', () => {
+    expect(jsx('React.createElement(aaa)')).toMatchInlineSnapshot(
+      `"React.createElement(aaa);"`
+    )
+  })
 })

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

@@ -2,7 +2,7 @@
  * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
  * @license GNU General Public License v3.0
  */
-import * as babel from '@babel/core'
+import type * as babel from '@babel/core'
 
 /**
  * Visitor factory for babel, converting React.createElement(...) to <jsx ...>...</jsx>
@@ -76,7 +76,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
       return null
     }
 
-    const name = getJSXIdentifier(node)
+    const name = getJSXIdentifier(node, true)
     if (name != null) {
       return name
     }
@@ -152,9 +152,9 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
     return children
   }
 
-  function getJSXIdentifier(node: any) {
+  function getJSXIdentifier(node: any, tag = false) {
     //TODO: JSXNamespacedName
-    if (t.isIdentifier(node)) {
+    if (t.isIdentifier(node) && (!tag || node.name.match(/^[A-Z]/))) {
       return t.jsxIdentifier(node.name)
     }
     if (t.isStringLiteral(node)) {

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

@@ -1,3 +1,4 @@
+import type * as babelCore from '@babel/core'
 import type { PluginItem, types as t } from '@babel/core'
 
 type RestoredJSX = [result: t.File | null | undefined, isCommonJS: boolean]
@@ -8,7 +9,7 @@ const jsxNotFound: RestoredJSX = [null, false]
 
 /** Restore JSX from `React.createElement` calls */
 export async function restoreJSX(
-  babel: typeof import('@babel/core'),
+  babel: typeof babelCore,
   code: string,
   filename: string
 ): Promise<RestoredJSX> {
@@ -48,13 +49,16 @@ export async function restoreJSX(
   babelRestoreJSX ||= import('./babel-restore-jsx')
 
   const result = await babel.transformAsync(code, {
+    babelrc: false,
+    configFile: false,
     ast: true,
     code: false,
     filename,
     parserOpts: {
       plugins: ['jsx']
     },
-    plugins: [await babelRestoreJSX]
+    // @ts-ignore
+    plugins: [(await babelRestoreJSX).default]
   })
 
   return [result?.ast, isCommonJS]