@vitejs/plugin-react 1.3.1 → 2.0.0-alpha.1

package/src/index.ts

@@ -2,7 +2,7 @@ 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 type { Plugin, PluginOption, ResolvedConfig } from 'vite'
 import {
   addRefreshWrapper,
   isRefreshBoundary,
@@ -38,15 +38,10 @@ 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']
 }
 
 export type BabelOptions = Omit<
@@ -104,7 +99,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
   babelOptions.presets ||= []
   babelOptions.overrides ||= []
   babelOptions.parserOpts ||= {} as any
-  babelOptions.parserOpts.plugins ||= opts.parserPlugins || []
+  babelOptions.parserOpts.plugins ||= []
 
   // Support patterns like:
   // - import * as React from 'react';
@@ -154,7 +149,7 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     },
     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) ||
@@ -373,10 +368,3 @@ viteReact.preambleCode = preambleCode
 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

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

@@ -1,5 +1,4 @@
 import type * as babelCore from '@babel/core'
-import type { types as t, Visitor } from '@babel/core'
 
 /**
  * Replace this:
@@ -11,13 +10,13 @@ import type { types as t, Visitor } from '@babel/core'
  *     var _jsx = require("react/jsx-runtime").jsx
  */
 export function babelImportToRequire({ types: t }: typeof babelCore): {
-  visitor: Visitor
+  visitor: babelCore.Visitor
 } {
   return {
     visitor: {
       ImportDeclaration(path) {
         const decl = path.node
-        const spec = decl.specifiers[0] as t.ImportSpecifier
+        const spec = decl.specifiers[0] as babelCore.types.ImportSpecifier
 
         path.replaceWith(
           t.variableDeclaration('var', [

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

@@ -1,5 +1,6 @@
-import babelRestoreJSX from './babel-restore-jsx'
 import * as babel from '@babel/core'
+import { describe, expect, it } from 'vitest'
+import babelRestoreJSX from './babel-restore-jsx'
 
 function jsx(code: string) {
   return babel.transform(code, {

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

@@ -0,0 +1,56 @@
+import * as babel from '@babel/core'
+import { describe, expect, it } from 'vitest'
+import { restoreJSX } from './restore-jsx'
+
+async function jsx(sourceCode: string) {
+  const [ast] = await restoreJSX(babel, sourceCode, 'test.js')
+  if (ast == null) {
+    return ast
+  }
+  const { code } = await babel.transformFromAstAsync(ast, null, {
+    configFile: false
+  })
+  return code
+}
+// jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+// React__default.createElement(Foo)`)
+// Tests adapted from: https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx/blob/63137b6/test/index.js
+describe('restore-jsx', () => {
+  it('should trans to ', async () => {
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(foo)`)
+    ).toBeNull()
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement("h1")`)
+    ).toMatch(`<h1 />;`)
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(Foo)`)
+    ).toMatch(`<Foo />;`)
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(Foo.Bar)`)
+    ).toMatch(`<Foo.Bar />;`)
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+    React__default.createElement(Foo.Bar.Baz)`)
+    ).toMatch(`<Foo.Bar.Baz />;`)
+  })
+
+  it('should handle props', async () => {
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(foo, {hi: there})`)
+    ).toBeNull()
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+    React__default.createElement("h1", {hi: there})`)
+    ).toMatch(`<h1 hi={there} />;`)
+    expect(
+      await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
+      React__default.createElement(Foo, {hi: there})`)
+    ).toMatch(`<Foo hi={there} />;`)
+  })
+})

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

@@ -1,12 +1,26 @@
 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]
+type RestoredJSX = [
+  result: babelCore.types.File | null | undefined,
+  isCommonJS: boolean
+]
 
-let babelRestoreJSX: Promise<PluginItem> | undefined
+let babelRestoreJSX: Promise<babelCore.PluginItem> | undefined
 
 const jsxNotFound: RestoredJSX = [null, false]
 
+async function getBabelRestoreJSX() {
+  if (!babelRestoreJSX)
+    babelRestoreJSX = import('./babel-restore-jsx').then((r) => {
+      const fn = r.default
+      if ('default' in fn)
+        // @ts-expect-error
+        return fn.default
+      return fn
+    })
+  return babelRestoreJSX
+}
+
 /** Restore JSX from `React.createElement` calls */
 export async function restoreJSX(
   babel: typeof babelCore,
@@ -20,34 +34,42 @@ export async function restoreJSX(
   }
 
   const [reactAlias, isCommonJS] = parseReactAlias(code)
+
   if (!reactAlias) {
     return jsxNotFound
   }
 
-  const reactJsxRE = new RegExp(
-    '\\b' + reactAlias + '\\.(createElement|Fragment)\\b',
-    'g'
-  )
-
   let hasCompiledJsx = false
-  code = code.replace(reactJsxRE, (_, prop) => {
-    hasCompiledJsx = true
-    // Replace with "React" so JSX can be reverse compiled.
-    return 'React.' + prop
-  })
+
+  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)
+      )
+    })
 
   if (!hasCompiledJsx) {
     return jsxNotFound
   }
 
-  // Support modules that use `import {Fragment} from 'react'`
-  code = code.replace(
-    /createElement\(Fragment,/g,
-    'createElement(React.Fragment,'
-  )
-
-  babelRestoreJSX ||= import('./babel-restore-jsx')
-
   const result = await babel.transformAsync(code, {
     babelrc: false,
     configFile: false,
@@ -57,8 +79,7 @@ export async function restoreJSX(
     parserOpts: {
       plugins: ['jsx']
     },
-    // @ts-ignore
-    plugins: [(await babelRestoreJSX).default]
+    plugins: [await getBabelRestoreJSX()]
   })
 
   return [result?.ast, isCommonJS]