@vitejs/plugin-react 1.3.1 → 1.3.2

package/dist/index.js

@@ -292,16 +292,22 @@ async function restoreJSX(babel2, code, filename) {
   if (!reactAlias) {
     return jsxNotFound;
   }
-  const reactJsxRE = new RegExp("\\b" + reactAlias + "\\.(createElement|Fragment)\\b", "g");
   let hasCompiledJsx = false;
-  code = code.replace(reactJsxRE, (_, prop) => {
+  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." + prop;
+    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;
   }
-  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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -33,13 +33,13 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.17.9",
+    "@babel/core": "^7.17.10",
     "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@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.2.0",
-    "react-refresh": "^0.12.0",
+    "@rollup/pluginutils": "^4.2.1",
+    "react-refresh": "^0.13.0",
     "resolve": "^1.22.0"
   }
 }

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

@@ -0,0 +1,55 @@
+import { restoreJSX } from './restore-jsx'
+import * as babel from '@babel/core'
+
+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

@@ -20,32 +20,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, {