@vitejs/plugin-react 2.0.0 → 2.1.0

package/README.md

@@ -83,7 +83,7 @@ Here's the [complete list of Babel parser plugins](https://babeljs.io/docs/en/ba
 
 ## Middleware mode
 
-In [middleware mode](https://vitejs.dev/config/#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
+In [middleware mode](https://vitejs.dev/config/server-options.html#server-middlewaremode), you should make sure your entry `index.html` file is transformed by Vite. Here's an example for an Express server:
 
 ```js
 app.get('/', async (req, res, next) => {

package/dist/chunks/babel-restore-jsx.cjs

@@ -4,7 +4,7 @@
  * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
  * @license GNU General Public License v3.0
  */
-function babelRestoreJsx({ types: t }) {
+function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
   function getJSXNode(node) {
     if (!isReactCreateElement(node)) {
       return null;
@@ -22,8 +22,12 @@ function babelRestoreJsx({ types: t }) {
     if (children == null) {
       return null;
     }
-    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === "React" && name.property.name === "Fragment") {
-      return t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), children);
+    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === reactAlias && name.property.name === "Fragment") {
+      return t.jsxFragment(
+        t.jsxOpeningFragment(),
+        t.jsxClosingFragment(),
+        children
+      );
     }
     const selfClosing = children.length === 0;
     const startTag = t.jsxOpeningElement(name, props, selfClosing);
@@ -64,7 +68,14 @@ function babelRestoreJsx({ types: t }) {
     if (!isPlainObjectExpression(node)) {
       return null;
     }
-    return node.properties.map((prop) => t.isObjectProperty(prop) ? t.jsxAttribute(getJSXIdentifier(prop.key), getJSXAttributeValue(prop.value)) : t.jsxSpreadAttribute(prop.argument));
+    return node.properties.map(
+      (prop) => t.isObjectProperty(prop) ? t.jsxAttribute(
+        getJSXIdentifier(prop.key),
+        getJSXAttributeValue(prop.value)
+      ) : t.jsxSpreadAttribute(prop.argument)
+    ).filter(
+      (prop) => t.isJSXIdentifier(prop.name) ? prop.name.name !== "__self" && prop.name.name !== "__source" : true
+    );
   }
   function getJSXChild(node) {
     if (t.isStringLiteral(node)) {
@@ -106,9 +117,11 @@ function babelRestoreJsx({ types: t }) {
     }
     return null;
   }
-  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: "React" }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
+  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: reactAlias }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
   const isNullLikeNode = (node) => t.isNullLiteral(node) || t.isIdentifier(node, { name: "undefined" });
-  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every((property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null);
+  const isPlainObjectExpression = (node) => 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) {

package/dist/chunks/babel-restore-jsx.mjs

@@ -2,7 +2,7 @@
  * https://github.com/flying-sheep/babel-plugin-transform-react-createelement-to-jsx
  * @license GNU General Public License v3.0
  */
-function babelRestoreJsx({ types: t }) {
+function babelRestoreJsx({ types: t }, { reactAlias = "React" }) {
   function getJSXNode(node) {
     if (!isReactCreateElement(node)) {
       return null;
@@ -20,8 +20,12 @@ function babelRestoreJsx({ types: t }) {
     if (children == null) {
       return null;
     }
-    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === "React" && name.property.name === "Fragment") {
-      return t.jsxFragment(t.jsxOpeningFragment(), t.jsxClosingFragment(), children);
+    if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object) && name.object.name === reactAlias && name.property.name === "Fragment") {
+      return t.jsxFragment(
+        t.jsxOpeningFragment(),
+        t.jsxClosingFragment(),
+        children
+      );
     }
     const selfClosing = children.length === 0;
     const startTag = t.jsxOpeningElement(name, props, selfClosing);
@@ -62,7 +66,14 @@ function babelRestoreJsx({ types: t }) {
     if (!isPlainObjectExpression(node)) {
       return null;
     }
-    return node.properties.map((prop) => t.isObjectProperty(prop) ? t.jsxAttribute(getJSXIdentifier(prop.key), getJSXAttributeValue(prop.value)) : t.jsxSpreadAttribute(prop.argument));
+    return node.properties.map(
+      (prop) => t.isObjectProperty(prop) ? t.jsxAttribute(
+        getJSXIdentifier(prop.key),
+        getJSXAttributeValue(prop.value)
+      ) : t.jsxSpreadAttribute(prop.argument)
+    ).filter(
+      (prop) => t.isJSXIdentifier(prop.name) ? prop.name.name !== "__self" && prop.name.name !== "__source" : true
+    );
   }
   function getJSXChild(node) {
     if (t.isStringLiteral(node)) {
@@ -104,9 +115,11 @@ function babelRestoreJsx({ types: t }) {
     }
     return null;
   }
-  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: "React" }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
+  const isReactCreateElement = (node) => t.isCallExpression(node) && t.isMemberExpression(node.callee) && t.isIdentifier(node.callee.object, { name: reactAlias }) && t.isIdentifier(node.callee.property, { name: "createElement" }) && !node.callee.computed;
   const isNullLikeNode = (node) => t.isNullLiteral(node) || t.isIdentifier(node, { name: "undefined" });
-  const isPlainObjectExpression = (node) => t.isObjectExpression(node) && node.properties.every((property) => t.isSpreadElement(property) || t.isObjectProperty(property, { computed: false }) && getJSXIdentifier(property.key) != null && getJSXAttributeValue(property.value) != null);
+  const isPlainObjectExpression = (node) => 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) {

package/dist/index.cjs

@@ -28,8 +28,13 @@ const fs__default = /*#__PURE__*/_interopDefaultLegacy(fs);
 
 const runtimePublicPath = "/@react-refresh";
 const _require = node_module.createRequire((typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('index.cjs', document.baseURI).href)));
-const reactRefreshDir = path__default.dirname(_require.resolve("react-refresh/package.json"));
-const runtimeFilePath = path__default.join(reactRefreshDir, "cjs/react-refresh-runtime.development.js");
+const reactRefreshDir = path__default.dirname(
+  _require.resolve("react-refresh/package.json")
+);
+const runtimeFilePath = path__default.join(
+  reactRefreshDir,
+  "cjs/react-refresh-runtime.development.js"
+);
 const runtimeCode = `
 const exports = {}
 ${fs__default.readFileSync(runtimeFilePath, "utf-8")}
@@ -94,8 +99,12 @@ function isRefreshBoundary(ast) {
     }
     const { declaration, specifiers } = node;
     if (declaration) {
+      if (declaration.type === "ClassDeclaration")
+        return false;
       if (declaration.type === "VariableDeclaration") {
-        return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id));
+        return declaration.declarations.every(
+          (variable) => isComponentLikeIdentifier(variable.id)
+        );
       }
       if (declaration.type === "FunctionDeclaration") {
         return !!declaration.id && isComponentLikeIdentifier(declaration.id);
@@ -119,9 +128,17 @@ function babelImportToRequire({ types: t }) {
       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))
-        ]));
+        path.replaceWith(
+          t.variableDeclaration("var", [
+            t.variableDeclarator(
+              spec.local,
+              t.memberExpression(
+                t.callExpression(t.identifier("require"), [decl.source]),
+                spec.imported
+              )
+            )
+          ])
+        );
       }
     }
   };
@@ -144,20 +161,11 @@ async function restoreJSX(babel, code, filename) {
   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) {
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    "g"
+  );
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound;
   }
   const result = await babel.transformAsync(code, {
@@ -169,12 +177,14 @@ async function restoreJSX(babel, code, filename) {
     parserOpts: {
       plugins: ["jsx"]
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   });
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
+  let match = code.match(
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
+  );
   if (match) {
     return [match[2], true];
   }
@@ -227,12 +237,16 @@ function viteReact(opts = {}) {
       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.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.`);
+          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);
@@ -285,7 +299,9 @@ function viteReact(opts = {}) {
             const [restoredAst, isCommonJS] = !isProjectFile && !isJSX && !isOptimizedReactDom ? await restoreJSX(babel__namespace, code, id) : [null, false];
             if (isJSX || (ast = restoredAst)) {
               plugins.push([
-                await loadPlugin("@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")),
+                await loadPlugin(
+                  "@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")
+                ),
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
@@ -298,7 +314,10 @@ function viteReact(opts = {}) {
             }
           } else if (isProjectFile) {
             if (!isProduction) {
-              plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
+              plugins.push(
+                await loadPlugin("@babel/plugin-transform-react-jsx-self"),
+                await loadPlugin("@babel/plugin-transform-react-jsx-source")
+              );
             }
             if (!skipReactImport && !importReactRE.test(code)) {
               prependReactImport = true;
@@ -412,7 +431,7 @@ function viteReact(opts = {}) {
     config() {
       return {
         optimizeDeps: {
-          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId, "react"]
         }
       };
     },

package/dist/index.mjs

@@ -7,8 +7,13 @@ import { createRequire } from 'node: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 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")}
@@ -73,8 +78,12 @@ function isRefreshBoundary(ast) {
     }
     const { declaration, specifiers } = node;
     if (declaration) {
+      if (declaration.type === "ClassDeclaration")
+        return false;
       if (declaration.type === "VariableDeclaration") {
-        return declaration.declarations.every((variable) => isComponentLikeIdentifier(variable.id));
+        return declaration.declarations.every(
+          (variable) => isComponentLikeIdentifier(variable.id)
+        );
       }
       if (declaration.type === "FunctionDeclaration") {
         return !!declaration.id && isComponentLikeIdentifier(declaration.id);
@@ -98,9 +107,17 @@ function babelImportToRequire({ types: t }) {
       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))
-        ]));
+        path.replaceWith(
+          t.variableDeclaration("var", [
+            t.variableDeclarator(
+              spec.local,
+              t.memberExpression(
+                t.callExpression(t.identifier("require"), [decl.source]),
+                spec.imported
+              )
+            )
+          ])
+        );
       }
     }
   };
@@ -123,20 +140,11 @@ async function restoreJSX(babel, code, filename) {
   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) {
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    "g"
+  );
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound;
   }
   const result = await babel.transformAsync(code, {
@@ -148,12 +156,14 @@ async function restoreJSX(babel, code, filename) {
     parserOpts: {
       plugins: ["jsx"]
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   });
   return [result?.ast, isCommonJS];
 }
 function parseReactAlias(code) {
-  let match = code.match(/\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/);
+  let match = code.match(
+    /\b(var|let|const)\s+([^=\{\s]+)\s*=\s*require\(["']react["']\)/
+  );
   if (match) {
     return [match[2], true];
   }
@@ -206,12 +216,16 @@ function viteReact(opts = {}) {
       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.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.`);
+          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);
@@ -264,7 +278,9 @@ function viteReact(opts = {}) {
             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")),
+                await loadPlugin(
+                  "@babel/plugin-transform-react-jsx" + (isProduction ? "" : "-development")
+                ),
                 {
                   runtime: "automatic",
                   importSource: opts.jsxImportSource,
@@ -277,7 +293,10 @@ function viteReact(opts = {}) {
             }
           } else if (isProjectFile) {
             if (!isProduction) {
-              plugins.push(await loadPlugin("@babel/plugin-transform-react-jsx-self"), await loadPlugin("@babel/plugin-transform-react-jsx-source"));
+              plugins.push(
+                await loadPlugin("@babel/plugin-transform-react-jsx-self"),
+                await loadPlugin("@babel/plugin-transform-react-jsx-source")
+              );
             }
             if (!skipReactImport && !importReactRE.test(code)) {
               prependReactImport = true;
@@ -391,7 +410,7 @@ function viteReact(opts = {}) {
     config() {
       return {
         optimizeDeps: {
-          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId, "react"]
         }
       };
     },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vitejs/plugin-react",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "license": "MIT",
   "author": "Evan You",
   "contributors": [
@@ -27,7 +27,7 @@
     "prepublishOnly": "npm run build"
   },
   "engines": {
-    "node": ">=14.18.0"
+    "node": "^14.18.0 || >=16.0.0"
   },
   "repository": {
     "type": "git",
@@ -39,8 +39,8 @@
   },
   "homepage": "https://github.com/vitejs/vite/tree/main/packages/plugin-react#readme",
   "dependencies": {
-    "@babel/core": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.18.6",
+    "@babel/core": "^7.18.13",
+    "@babel/plugin-transform-react-jsx": "^7.18.10",
     "@babel/plugin-transform-react-jsx-development": "^7.18.6",
     "@babel/plugin-transform-react-jsx-self": "^7.18.6",
     "@babel/plugin-transform-react-jsx-source": "^7.18.6",

package/src/fast-refresh.ts

@@ -92,6 +92,7 @@ export function isRefreshBoundary(ast: t.File): boolean {
     }
     const { declaration, specifiers } = node
     if (declaration) {
+      if (declaration.type === 'ClassDeclaration') return false
       if (declaration.type === 'VariableDeclaration') {
         return declaration.declarations.every((variable) =>
           isComponentLikeIdentifier(variable.id)

package/src/index.ts

@@ -406,7 +406,10 @@ export default function viteReact(opts: Options = {}): PluginOption[] {
     config() {
       return {
         optimizeDeps: {
-          include: [reactJsxRuntimeId, reactJsxDevRuntimeId]
+          // We can't add `react-dom` because the dependency is `react-dom/client`
+          // for React 18 while it's `react-dom` for React 17. We'd need to detect
+          // what React version the user has installed.
+          include: [reactJsxRuntimeId, reactJsxDevRuntimeId, 'react']
         }
       }
     },

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

@@ -115,4 +115,18 @@ describe('babel-restore-jsx', () => {
       `"React.createElement(aaa);"`
     )
   })
+
+  it('should not handle contains __self prop', () => {
+    expect(
+      jsx('React.createElement(Provider, { __self: this })')
+    ).toMatchInlineSnapshot('"<Provider />;"')
+  })
+
+  it('should not handle contains __source prop', () => {
+    expect(
+      jsx(
+        'React.createElement(Provider, { __source: { fileName: _jsxFileName, lineNumber: 133 }})'
+      )
+    ).toMatchInlineSnapshot('"<Provider />;"')
+  })
 })

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

@@ -4,6 +4,10 @@
  */
 import type * as babel from '@babel/core'
 
+interface PluginOptions {
+  reactAlias: string
+}
+
 /**
  * Visitor factory for babel, converting React.createElement(...) to <jsx ...>...</jsx>
  *
@@ -17,7 +21,10 @@ import type * as babel from '@babel/core'
  *
  * Any of those arguments might also be missing (undefined) and/or invalid.
  */
-export default function ({ types: t }: typeof babel): babel.PluginObj {
+export default function (
+  { types: t }: typeof babel,
+  { reactAlias = 'React' }: PluginOptions
+): babel.PluginObj {
   /**
    * Get a `JSXElement` from a `CallExpression`.
    * Returns `null` if this impossible.
@@ -48,7 +55,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
     if (
       t.isJSXMemberExpression(name) &&
       t.isJSXIdentifier(name.object) &&
-      name.object.name === 'React' &&
+      name.object.name === reactAlias &&
       name.property.name === 'Fragment'
     ) {
       return t.jsxFragment(
@@ -69,7 +76,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
 
   /**
    * Get a JSXIdentifier or JSXMemberExpression from a Node of known type.
-   * Returns null if a unknown node type, null or undefined is passed.
+   * Returns null if an unknown node type, null or undefined is passed.
    */
   function getJSXName(node: any): any {
     if (node == null) {
@@ -93,7 +100,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
   }
 
   /**
-   * Get a array of JSX(Spread)Attribute from a props ObjectExpression.
+   * 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.
    */
@@ -119,14 +126,20 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
     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)
-    )
+    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) {
@@ -182,7 +195,7 @@ export default function ({ types: t }: typeof babel): babel.PluginObj {
   const isReactCreateElement = (node: any) =>
     t.isCallExpression(node) &&
     t.isMemberExpression(node.callee) &&
-    t.isIdentifier(node.callee.object, { name: 'React' }) &&
+    t.isIdentifier(node.callee.object, { name: reactAlias }) &&
     t.isIdentifier(node.callee.property, { name: 'createElement' }) &&
     !node.callee.computed
 

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

@@ -81,7 +81,10 @@ describe('restore-jsx', () => {
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
       React__default.createElement(foo)`)
-    ).toBeNull()
+    ).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")`)
@@ -104,7 +107,12 @@ describe('restore-jsx', () => {
     expect(
       await jsx(`import React__default, { PureComponent, Component, forwardRef, memo, createElement } from 'react';
       React__default.createElement(foo, {hi: there})`)
-    ).toBeNull()
+    ).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})`)
@@ -114,4 +122,26 @@ describe('restore-jsx', () => {
       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

@@ -33,34 +33,12 @@ export async function restoreJSX(
     return jsxNotFound
   }
 
-  let hasCompiledJsx = false
-
-  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)
-      )
-    })
+  const reactJsxRE = new RegExp(
+    `\\b${reactAlias}\\.(createElement|Fragment)\\b`,
+    'g'
+  )
 
-  if (!hasCompiledJsx) {
+  if (!reactJsxRE.test(code)) {
     return jsxNotFound
   }
 
@@ -73,7 +51,7 @@ export async function restoreJSX(
     parserOpts: {
       plugins: ['jsx']
     },
-    plugins: [await getBabelRestoreJSX()]
+    plugins: [[await getBabelRestoreJSX(), { reactAlias }]]
   })
 
   return [result?.ast, isCommonJS]