@vitejs/plugin-react 1.3.2 → 2.0.0-alpha.2

package/dist/index.mjs

@@ -0,0 +1,387 @@
+import path from 'path';
+import * as babel from '@babel/core';
+import { createFilter } from '@rollup/pluginutils';
+import { normalizePath } from 'vite';
+import fs from 'fs';
+import { createRequire } from '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 runtimeCode = `
+const exports = {}
+${fs.readFileSync(runtimeFilePath, "utf-8")}
+function debounce(fn, delay) {
+  let handle
+  return () => {
+    clearTimeout(handle)
+    handle = setTimeout(fn, delay)
+  }
+}
+exports.performReactRefresh = debounce(exports.performReactRefresh, 16)
+export default exports
+`;
+const preambleCode = `
+import RefreshRuntime from "__BASE__${runtimePublicPath.slice(1)}"
+RefreshRuntime.injectIntoGlobalHook(window)
+window.$RefreshReg$ = () => {}
+window.$RefreshSig$ = () => (type) => type
+window.__vite_plugin_react_preamble_installed__ = true
+`;
+const header = `
+import RefreshRuntime from "${runtimePublicPath}";
+
+let prevRefreshReg;
+let prevRefreshSig;
+
+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) => {
+    RefreshRuntime.register(type, __SOURCE__ + " " + id)
+  };
+  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
+}`.replace(/[\n]+/gm, "");
+const footer = `
+if (import.meta.hot) {
+  window.$RefreshReg$ = prevRefreshReg;
+  window.$RefreshSig$ = prevRefreshSig;
+
+  __ACCEPT__
+  if (!window.__vite_plugin_react_timeout) {
+    window.__vite_plugin_react_timeout = setTimeout(() => {
+      window.__vite_plugin_react_timeout = 0;
+      RefreshRuntime.performReactRefresh();
+    }, 30);
+  }
+}`;
+function addRefreshWrapper(code, id, accept) {
+  return header.replace("__SOURCE__", JSON.stringify(id)) + code + footer.replace("__ACCEPT__", accept ? "import.meta.hot.accept();" : "");
+}
+function isRefreshBoundary(ast) {
+  return ast.program.body.every((node) => {
+    if (node.type !== "ExportNamedDeclaration") {
+      return true;
+    }
+    const { declaration, specifiers } = node;
+    if (declaration) {
+      if (declaration.type === "VariableDeclaration") {
+        return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id));
+      }
+      if (declaration.type === "FunctionDeclaration") {
+        return !!declaration.id && isComponentLikeIdentifier(declaration.id);
+      }
+    }
+    return specifiers.every((spec) => {
+      return isComponentLikeIdentifier(spec.exported);
+    });
+  });
+}
+function isComponentLikeIdentifier(node) {
+  return node.type === "Identifier" && isComponentLikeName(node.name);
+}
+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;
+  }
+  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) {
+    return jsxNotFound;
+  }
+  const result = await babel.transformAsync(code, {
+    babelrc: false,
+    configFile: false,
+    ast: true,
+    code: false,
+    filename,
+    parserOpts: {
+      plugins: ["jsx"]
+    },
+    plugins: [await getBabelRestoreJSX()]
+  });
+  return [result?.ast, isCommonJS];
+}
+function parseReactAlias(code) {
+  let match = code.match(/\b(var|let|const) +(\w+) *= *require\(["']react["']\)/);
+  if (match) {
+    return [match[2], true];
+  }
+  match = code.match(/^import (\w+).+? from ["']react["']/m);
+  if (match) {
+    return [match[1], false];
+  }
+  return [void 0, false];
+}
+
+function viteReact(opts = {}) {
+  let base = "/";
+  let resolvedCacheDir;
+  let filter = createFilter(opts.include, opts.exclude);
+  let isProduction = true;
+  let projectRoot = process.cwd();
+  let skipFastRefresh = opts.fastRefresh === false;
+  let skipReactImport = false;
+  let runPluginOverrides = (options, context) => false;
+  let staticBabelOptions;
+  const useAutomaticRuntime = opts.jsxRuntime !== "classic";
+  const importReactRE = /(^|\n)import\s+(\*\s+as\s+)?React(,|\s+)/;
+  const fileExtensionRE = /\.[^\/\s\?]+$/;
+  const viteBabel = {
+    name: "vite:react-babel",
+    enforce: "pre",
+    configResolved(config) {
+      base = config.base;
+      projectRoot = config.root;
+      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir));
+      filter = createFilter(opts.include, opts.exclude, {
+        resolve: projectRoot
+      });
+      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.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.`);
+      });
+      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 true;
+          })(babelOptions);
+        }
+        runPluginOverrides = () => false;
+        return false;
+      };
+    },
+    async transform(code, id, options) {
+      const ssr = typeof options === "boolean" ? options : options?.ssr === true;
+      const [filepath, querystring = ""] = id.split("?");
+      const [extension = ""] = querystring.match(fileExtensionRE) || filepath.match(fileExtensionRE) || [];
+      if (/\.(mjs|[tj]sx?)$/.test(extension)) {
+        const isJSX = extension.endsWith("x");
+        const isNodeModules = id.includes("/node_modules/");
+        const isProjectFile = !isNodeModules && (id[0] === "\0" || id.startsWith(projectRoot + "/"));
+        let babelOptions = staticBabelOptions;
+        if (typeof opts.babel === "function") {
+          const rawOptions = opts.babel(id, { ssr });
+          babelOptions = createBabelOptions(rawOptions);
+          runPluginOverrides(babelOptions, { ssr, id });
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel);
+          if (!runPluginOverrides(babelOptions, { ssr, id })) {
+            staticBabelOptions = babelOptions;
+          }
+        }
+        const plugins = isProjectFile ? [...babelOptions.plugins] : [];
+        let useFastRefresh = false;
+        if (!skipFastRefresh && !ssr && !isNodeModules) {
+          const isReactModule = isJSX || importReactRE.test(code);
+          if (isReactModule && filter(id)) {
+            useFastRefresh = true;
+            plugins.push([
+              await loadPlugin("react-refresh/babel"),
+              { skipEnvCheck: true }
+            ]);
+          }
+        }
+        let ast;
+        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
+                }
+              ]);
+              if (isCommonJS) {
+                plugins.push(babelImportToRequire);
+              }
+            }
+          } else if (isProjectFile) {
+            if (!isProduction) {
+              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;
+            }
+          }
+        }
+        const shouldSkip = !plugins.length && !babelOptions.configFile && !(isProjectFile && babelOptions.babelrc);
+        if (shouldSkip) {
+          return;
+        }
+        const parserPlugins = [
+          ...babelOptions.parserOpts.plugins,
+          "importMeta",
+          "topLevelAwait",
+          "classProperties",
+          "classPrivateProperties",
+          "classPrivateMethods"
+        ];
+        if (!extension.endsWith(".ts")) {
+          parserPlugins.push("jsx");
+        }
+        if (/\.tsx?$/.test(extension)) {
+          parserPlugins.push("typescript");
+        }
+        const transformAsync = ast ? babel.transformFromAstAsync.bind(babel, ast, code) : babel.transformAsync.bind(babel, code);
+        const isReasonReact = extension.endsWith(".bs.js");
+        const result = await transformAsync({
+          ...babelOptions,
+          ast: !isReasonReact,
+          root: projectRoot,
+          filename: id,
+          sourceFileName: filepath,
+          parserOpts: {
+            ...babelOptions.parserOpts,
+            sourceType: "module",
+            allowAwaitOutsideFunction: true,
+            plugins: parserPlugins
+          },
+          generatorOpts: {
+            ...babelOptions.generatorOpts,
+            decoratorsBeforeExport: true
+          },
+          plugins,
+          sourceMaps: true,
+          inputSourceMap: false
+        });
+        if (result) {
+          let code2 = result.code;
+          if (useFastRefresh && /\$RefreshReg\$\(/.test(code2)) {
+            const accept = isReasonReact || isRefreshBoundary(result.ast);
+            code2 = addRefreshWrapper(code2, id, accept);
+          }
+          return {
+            code: code2,
+            map: result.map
+          };
+        }
+      }
+    }
+  };
+  const viteReactRefresh = {
+    name: "vite:react-refresh",
+    enforce: "pre",
+    config: () => ({
+      resolve: {
+        dedupe: ["react", "react-dom"]
+      }
+    }),
+    resolveId(id) {
+      if (id === runtimePublicPath) {
+        return id;
+      }
+    },
+    load(id) {
+      if (id === runtimePublicPath) {
+        return runtimeCode;
+      }
+    },
+    transformIndexHtml() {
+      if (!skipFastRefresh)
+        return [
+          {
+            tag: "script",
+            attrs: { type: "module" },
+            children: preambleCode.replace(`__BASE__`, base)
+          }
+        ];
+    }
+  };
+  const viteReactJsx = {
+    name: "vite:react-jsx",
+    enforce: "pre",
+    config() {
+      return {
+        optimizeDeps: {
+          include: ["react/jsx-dev-runtime"]
+        }
+      };
+    }
+  };
+  return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx];
+}
+viteReact.preambleCode = preambleCode;
+function loadPlugin(path2) {
+  return import(path2).then((module) => module.default || module);
+}
+function createBabelOptions(rawOptions) {
+  var _a;
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  };
+  babelOptions.plugins || (babelOptions.plugins = []);
+  babelOptions.presets || (babelOptions.presets = []);
+  babelOptions.overrides || (babelOptions.overrides = []);
+  babelOptions.parserOpts || (babelOptions.parserOpts = {});
+  (_a = babelOptions.parserOpts).plugins || (_a.plugins = []);
+  return babelOptions;
+}
+
+export { viteReact as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.3.2",
+  "version": "2.0.0-alpha.2",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -10,18 +10,24 @@
     "dist",
     "src"
   ],
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.cjs"
+    }
+  },
   "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 && 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",
-    "prepublishOnly": "(cd ../vite && npm run build) && npm run build"
+    "dev": "unbuild --stub",
+    "build": "unbuild && pnpm run patch-cjs",
+    "patch-cjs": "esno ../../scripts/patchCJS.ts",
+    "prepublishOnly": "npm run build"
   },
   "engines": {
-    "node": ">=12.0.0"
+    "node": ">=14.6.0"
   },
   "repository": {
     "type": "git",
@@ -33,13 +39,19 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/plugin-transform-react-jsx": "^7.17.3",
+    "@babel/core": "^7.18.0",
+    "@babel/plugin-transform-react-jsx": "^7.17.12",
     "@babel/plugin-transform-react-jsx-development": "^7.16.7",
-    "@babel/plugin-transform-react-jsx-self": "^7.16.7",
+    "@babel/plugin-transform-react-jsx-self": "^7.17.12",
     "@babel/plugin-transform-react-jsx-source": "^7.16.7",
     "@rollup/pluginutils": "^4.2.1",
     "react-refresh": "^0.13.0",
     "resolve": "^1.22.0"
+  },
+  "peerDependencies": {
+    "vite": "^3.0.0-alpha"
+  },
+  "devDependencies": {
+    "vite": "workspace:*"
   }
 }

package/src/fast-refresh.ts

@@ -1,11 +1,13 @@
-import type { types as t } from '@babel/core'
 import fs from 'fs'
 import path from 'path'
+import { createRequire } from 'module'
+import type { types as t } from '@babel/core'
 
 export const runtimePublicPath = '/@react-refresh'
 
+const _require = createRequire(import.meta.url)
 const reactRefreshDir = path.dirname(
-  require.resolve('react-refresh/package.json')
+  _require.resolve('react-refresh/package.json')
 )
 const runtimeFilePath = path.join(
   reactRefreshDir,

package/src/index.ts

@@ -1,8 +1,9 @@
+import path from 'path'
 import type { ParserOptions, TransformOptions, types as t } from '@babel/core'
 import * as babel from '@babel/core'
 import { createFilter } from '@rollup/pluginutils'
-import resolve from 'resolve'
-import type { Plugin, PluginOption } from 'vite'
+import { normalizePath } from 'vite'
+import type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
   isRefreshBoundary,
@@ -38,15 +39,12 @@ export interface Options {
    * @default true
    */
   jsxPure?: boolean
-
   /**
    * Babel configuration applied in both dev and prod.
    */
-  babel?: BabelOptions
-  /**
-   * @deprecated Use `babel.parserOpts.plugins` instead
-   */
-  parserPlugins?: ParserOptions['plugins']
+  babel?:
+    | BabelOptions
+    | ((id: string, options: { ssr?: boolean }) => BabelOptions)
 }
 
 export type BabelOptions = Omit<
@@ -72,13 +70,21 @@ export interface ReactBabelOptions extends BabelOptions {
   }
 }
 
+type ReactBabelHook = (
+  babelConfig: ReactBabelOptions,
+  context: ReactBabelHookContext,
+  config: ResolvedConfig
+) => void
+
+type ReactBabelHookContext = { ssr: boolean; id: string }
+
 declare module 'vite' {
   export interface Plugin {
     api?: {
       /**
        * Manipulate the Babel options of `@vitejs/plugin-react`
        */
-      reactBabel?: (options: ReactBabelOptions, config: ResolvedConfig) => void
+      reactBabel?: ReactBabelHook
     }
   }
 }
@@ -86,26 +92,20 @@ declare module 'vite' {
 export default function viteReact(opts: Options = {}): PluginOption[] {
   // Provide default values for Rollup compat.
   let base = '/'
+  let resolvedCacheDir: string
   let filter = createFilter(opts.include, opts.exclude)
   let isProduction = true
   let projectRoot = process.cwd()
   let skipFastRefresh = opts.fastRefresh === false
   let skipReactImport = false
+  let runPluginOverrides = (
+    options: ReactBabelOptions,
+    context: ReactBabelHookContext
+  ) => false
+  let staticBabelOptions: ReactBabelOptions | undefined
 
   const useAutomaticRuntime = opts.jsxRuntime !== 'classic'
 
-  const babelOptions = {
-    babelrc: false,
-    configFile: false,
-    ...opts.babel
-  } as ReactBabelOptions
-
-  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';
@@ -121,6 +121,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     configResolved(config) {
       base = config.base
       projectRoot = config.root
+      resolvedCacheDir = normalizePath(path.resolve(config.cacheDir))
       filter = createFilter(opts.include, opts.exclude, {
         resolve: projectRoot
       })
@@ -146,15 +147,26 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             `[@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) as ReactBabelHook[]
 
-        if (plugin.api?.reactBabel) {
-          plugin.api.reactBabel(babelOptions, config)
+        if (hooks.length > 0) {
+          return (runPluginOverrides = (babelOptions) => {
+            hooks.forEach((hook) => hook(babelOptions, context, config))
+            return true
+          })(babelOptions)
         }
-      })
+        runPluginOverrides = () => false
+        return false
+      }
     },
     async transform(code, id, options) {
       const ssr = typeof options === 'boolean' ? options : options?.ssr === true
-      // File extension could be mocked/overriden in querystring.
+      // File extension could be mocked/overridden in querystring.
       const [filepath, querystring = ''] = id.split('?')
       const [extension = ''] =
         querystring.match(fileExtensionRE) ||
@@ -167,6 +179,18 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
         const isProjectFile =
           !isNodeModules && (id[0] === '\0' || id.startsWith(projectRoot + '/'))
 
+        let babelOptions = staticBabelOptions
+        if (typeof opts.babel === 'function') {
+          const rawOptions = opts.babel(id, { ssr })
+          babelOptions = createBabelOptions(rawOptions)
+          runPluginOverrides(babelOptions, { ssr, id: id })
+        } else if (!babelOptions) {
+          babelOptions = createBabelOptions(opts.babel)
+          if (!runPluginOverrides(babelOptions, { ssr, id: id })) {
+            staticBabelOptions = babelOptions
+          }
+        }
+
         const plugins = isProjectFile ? [...babelOptions.plugins] : []
 
         let useFastRefresh = false
@@ -188,8 +212,12 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
             // By reverse-compiling "React.createElement" calls into JSX,
             // React elements provided by dependencies will also use the
             // automatic runtime!
+            // Avoid parsing the optimized react-dom since it will never
+            // contain compiled JSX and it's a pretty big file (800kb).
+            const isOptimizedReactDom =
+              id.startsWith(resolvedCacheDir) && id.includes('/react-dom.js')
             const [restoredAst, isCommonJS] =
-              !isProjectFile && !isJSX
+              !isProjectFile && !isJSX && !isOptimizedReactDom
                 ? await restoreJSX(babel, code, id)
                 : [null, false]
 
@@ -333,7 +361,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     }
   }
 
-  const runtimeId = 'react/jsx-runtime'
+  // const runtimeId = 'react/jsx-runtime'
   // Adapted from https://github.com/alloc/vite-react-jsx
   const viteReactJsx: Plugin = {
     name: 'vite:react-jsx',
@@ -344,10 +372,14 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           include: ['react/jsx-dev-runtime']
         }
       }
-    },
+    }
+    // TODO: this optimization may not be necesary and it is breacking esbuild+rollup compat,
+    // see https://github.com/vitejs/vite/pull/7246#discussion_r861552185
+    // We could still do the same trick and resolve to the optimized dependency here
+    /*
     resolveId(id: string) {
       return id === runtimeId ? id : null
-    },
+    }, 
     load(id: string) {
       if (id === runtimeId) {
         const runtimePath = resolve.sync(runtimeId, {
@@ -362,7 +394,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
           ...exports.map((name) => `export const ${name} = jsxRuntime.${name}`)
         ].join('\n')
       }
-    }
+    } */
   }
 
   return [viteBabel, viteReactRefresh, useAutomaticRuntime && viteReactJsx]
@@ -374,9 +406,18 @@ function loadPlugin(path: string): Promise<any> {
   return import(path).then((module) => module.default || module)
 }
 
-// overwrite for cjs require('...')() usage
-// 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
+function createBabelOptions(rawOptions?: BabelOptions) {
+  const babelOptions = {
+    babelrc: false,
+    configFile: false,
+    ...rawOptions
+  } as ReactBabelOptions
+
+  babelOptions.plugins ||= []
+  babelOptions.presets ||= []
+  babelOptions.overrides ||= []
+  babelOptions.parserOpts ||= {} as any
+  babelOptions.parserOpts.plugins ||= []
+
+  return babelOptions
+}