fix(plugin-react): support import namespace in parseReactAlias (#5313)

Author: aleclarson

packages/plugin-react/src/jsx-runtime/restore-jsx.spec.ts

@@ -1,6 +1,67 @@
 import * as babel from '@babel/core'
 import { describe, expect, it } from 'vitest'
-import { restoreJSX } from './restore-jsx'
+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')

packages/plugin-react/src/jsx-runtime/restore-jsx.ts

@@ -79,16 +79,16 @@ export async function restoreJSX(
   return [result?.ast, isCommonJS]
 }
 
-function parseReactAlias(
+export function parseReactAlias(
   code: string
 ): [alias: string | undefined, isCommonJS: boolean] {
   let match = code.match(
-    /\b(var|let|const) +(\w+) *= *require\(["']react["']\)/
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
   )
   if (match) {
     return [match[2], true]
   }
-  match = code.match(/^import (\w+).+? from ["']react["']/m)
+  match = code.match(/^import\s+(?:\*\s+as\s+)?(\w+).+?\bfrom\s*["']react["']/m)
   if (match) {
     return [match[1], false]
   }