@vitejs/plugin-react 2.1.0 → 2.2.0

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

@@ -1,232 +0,0 @@
-/**
- * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
- * @license GNU General Public License v3.0
- */
-import type * as babel from '@babel/core'
-
-interface PluginOptions {
-  reactAlias: string
-}
-
-/**
- * Visitor factory for babel, converting React.createElement(...) to <jsx ...>...</jsx>
- *
- * What we want to handle here is this CallExpression:
- *
- *     React.createElement(
- *       type: StringLiteral|Identifier|MemberExpression,
- *       [props: ObjectExpression|Expression],
- *       [...children: StringLiteral|Expression]
- *     )
- *
- * Any of those arguments might also be missing (undefined) and/or invalid.
- */
-export default function (
-  { types: t }: typeof babel,
-  { reactAlias = 'React' }: PluginOptions
-): babel.PluginObj {
-  /**
-   * Get a `JSXElement` from a `CallExpression`.
-   * Returns `null` if this impossible.
-   */
-  function getJSXNode(node: any): any {
-    if (!isReactCreateElement(node)) {
-      return null
-    }
-
-    //nameNode and propsNode may be undefined, getJSX* need to handle that
-    const [nameNode, propsNode, ...childNodes] = node.arguments
-
-    const name = getJSXName(nameNode)
-    if (name == null) {
-      return null //name is required
-    }
-
-    const props = getJSXProps(propsNode)
-    if (props == null) {
-      return null //no props → [], invalid → null
-    }
-
-    const children = getJSXChildren(childNodes)
-    if (children == null) {
-      return null //no children → [], invalid → 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
-      )
-    }
-
-    // self-closing tag if no 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)
-  }
-
-  /**
-   * Get a JSXIdentifier or JSXMemberExpression from a Node of known type.
-   * Returns null if an unknown node type, null or undefined is passed.
-   */
-  function getJSXName(node: any): any {
-    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)
-  }
-
-  /**
-   * Get an array of JSX(Spread)Attribute from a props ObjectExpression.
-   * Handles the _extends Expression babel creates from SpreadElement nodes.
-   * Returns null if a validation error occurs.
-   */
-  function getJSXProps(node: any): any[] | null {
-    if (node == null || isNullLikeNode(node)) {
-      return []
-    }
-
-    if (
-      t.isCallExpression(node) &&
-      t.isIdentifier(node.callee, { name: '_extends' })
-    ) {
-      const props: any[] = node.arguments.map(getJSXProps)
-      //if calling this recursively works, flatten.
-      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: any) =>
-        t.isObjectProperty(prop)
-          ? t.jsxAttribute(
-              getJSXIdentifier(prop.key)!,
-              getJSXAttributeValue(prop.value)
-            )
-          : t.jsxSpreadAttribute(prop.argument)
-      )
-      .filter((prop: any) =>
-        t.isJSXIdentifier(prop.name)
-          ? prop.name.name !== '__self' && prop.name.name !== '__source'
-          : true
-      )
-  }
-
-  function getJSXChild(node: any) {
-    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: any[]) {
-    const children = nodes
-      .filter((node) => !isNullLikeNode(node))
-      .map(getJSXChild)
-    if (children.some((child) => child == null)) {
-      return null
-    }
-    return children
-  }
-
-  function getJSXIdentifier(node: any, tag = false) {
-    //TODO: JSXNamespacedName
-    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: any) {
-    if (t.isStringLiteral(node)) {
-      return node
-    }
-    if (t.isJSXElement(node)) {
-      return node
-    }
-    if (t.isExpression(node)) {
-      return t.jsxExpressionContainer(node)
-    }
-    return null
-  }
-
-  /**
-   * Tests if a node is a CallExpression with callee `React.createElement`
-   */
-  const isReactCreateElement = (node: any) =>
-    t.isCallExpression(node) &&
-    t.isMemberExpression(node.callee) &&
-    t.isIdentifier(node.callee.object, { name: reactAlias }) &&
-    t.isIdentifier(node.callee.property, { name: 'createElement' }) &&
-    !node.callee.computed
-
-  /**
-   * Tests if a node is `null` or `undefined`
-   */
-  const isNullLikeNode = (node: any) =>
-    t.isNullLiteral(node) || t.isIdentifier(node, { name: 'undefined' })
-
-  /**
-   * Tests if a node is an object expression with noncomputed, nonmethod attrs
-   */
-  const isPlainObjectExpression = (node: any) =>
-    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)
-      }
-    }
-  }
-}

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

@@ -1,147 +0,0 @@
-import * as babel from '@babel/core'
-import { describe, expect, it } from 'vitest'
-import { parseReactAlias, restoreJSX } from './restore-jsx'
-
-describe('parseReactAlias', () => {
-  it('handles cjs require', () => {
-    expect(parseReactAlias(`const React = require("react")`))
-      .toMatchInlineSnapshot(`
-        [
-          "React",
-          true,
-        ]
-      `)
-  })
-
-  it('handles cjs require (minified)', () => {
-    expect(parseReactAlias(`var F=require('foo');var R=require('react')`))
-      .toMatchInlineSnapshot(`
-        [
-          "R",
-          true,
-        ]
-      `)
-  })
-
-  it('does not handle destructured cjs require', () => {
-    expect(parseReactAlias(`var {createElement} = require("react")`))
-      .toMatchInlineSnapshot(`
-        [
-          undefined,
-          false,
-        ]
-      `)
-  })
-
-  it('handles esm import', () => {
-    expect(parseReactAlias(`import React from 'react'`)).toMatchInlineSnapshot(`
-      [
-        "React",
-        false,
-      ]
-    `)
-  })
-
-  it('handles esm import namespace', () => {
-    expect(parseReactAlias(`import * as React from "react"`))
-      .toMatchInlineSnapshot(`
-        [
-          "React",
-          false,
-        ]
-      `)
-  })
-
-  it('does not handle destructured esm import', () => {
-    expect(parseReactAlias(`import {createElement} from "react"`))
-      .toMatchInlineSnapshot(`
-        [
-          undefined,
-          false,
-        ]
-      `)
-  })
-})
-
-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)`)
-    ).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")`)
-    ).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})`)
-    ).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})`)
-    ).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} />;`)
-  })
-
-  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

@@ -1,74 +0,0 @@
-import type * as babelCore from '@babel/core'
-
-type RestoredJSX = [
-  result: babelCore.types.File | null | undefined,
-  isCommonJS: boolean
-]
-
-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,
-  code: string,
-  filename: string
-): Promise<RestoredJSX> {
-  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]
-}
-
-export function parseReactAlias(
-  code: string
-): [alias: string | undefined, isCommonJS: boolean] {
-  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 [undefined, false]
-}