From 11292a3c74428d0a40631f44a286b9a7af16df3c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nicol=C3=B2=20Ribaudo?= <nicolo.ribaudo@gmail.com>
Date: Thu, 19 Mar 2020 20:01:17 +0100
Subject: [PATCH] Use the correct `this` in `__self` for JSX elements in arrows
 (#11288)

* Inject `__source` and `__self` in JSX elements earlier

This fixes an issue where `this` was not correct inside arrow functions, similar to
https://astexplorer.net/#/gist/86638d64cd21c496e7fecaea46313d95/906f8be24d7d99f3f5cd5a956a48355e1864f4b1

* Add test

* Remove try-catch

* Update error

* Update fixtures

* Update windows fixtures
---
 .../src/index.js                              | 144 +++++++++---------
 .../options.json                              |   2 +-
 .../linux/self-inside-arrow/input.mjs         |   7 +
 .../linux/self-inside-arrow/output.mjs        |  38 +++++
 .../source-and-self-defined/options.json      |   2 +-
 .../options.json                              |   3 +-
 .../output.js                                 |   2 +-
 .../self-inside-arrow-windows/input.mjs       |   7 +
 .../self-inside-arrow-windows/output.mjs      |  38 +++++
 .../options.json                              |   2 +-
 .../exec.js                                   |  32 ----
 .../options.json                              |  16 --
 .../exec.js                                   |  32 ----
 .../input.mjs                                 |  10 ++
 .../options.json                              |   9 +-
 .../output.mjs                                |  14 ++
 .../does-not-add-source-self-windows/exec.js  |  31 ----
 .../options.json                              |  15 --
 .../does-not-add-source-self/exec.js          |  31 ----
 .../does-not-add-source-self/input.mjs        |  11 ++
 .../does-not-add-source-self/options.json     |  14 +-
 .../does-not-add-source-self/output.mjs       |  11 ++
 22 files changed, 221 insertions(+), 250 deletions(-)
 create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/output.mjs
 create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/output.mjs
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/exec.js
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/options.json
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/exec.js
 create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/output.mjs
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/exec.js
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/options.json
 delete mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/exec.js
 create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/input.mjs
 create mode 100644 packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/output.mjs

diff --git a/packages/babel-helper-builder-react-jsx-experimental/src/index.js b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
index 2117da3199..225e9f0743 100644
--- a/packages/babel-helper-builder-react-jsx-experimental/src/index.js
+++ b/packages/babel-helper-builder-react-jsx-experimental/src/index.js
@@ -31,6 +31,32 @@ export function helper(babel, options) {
     pragmaFrag: PRAGMA_FRAG_DEFAULT = DEFAULT.pragmaFrag,
   } = options;
 
+  const injectMetaPropertiesVisitor = {
+    JSXOpeningElement(path, state) {
+      for (const attr of path.get("attributes")) {
+        if (!attr.isJSXElement()) continue;
+
+        const { name } = attr.node.name;
+        if (name === "__source" || name === "__self") {
+          throw path.buildCodeFrameError(
+            `__source and __self should not be defined in props and are reserved for internal usage.`,
+          );
+        }
+      }
+
+      const source = t.jsxAttribute(
+        t.jsxIdentifier("__source"),
+        t.jsxExpressionContainer(makeSource(path, state)),
+      );
+      const self = t.jsxAttribute(
+        t.jsxIdentifier("__self"),
+        t.jsxExpressionContainer(t.thisExpression()),
+      );
+
+      path.pushContainer("attributes", [source, self]);
+    },
+  };
+
   return {
     JSXNamespacedName(path, state) {
       const throwIfNamespace =
@@ -214,6 +240,10 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
               `Runtime must be either "classic" or "automatic".`,
             );
           }
+
+          if (options.development) {
+            path.traverse(injectMetaPropertiesVisitor, state);
+          }
         }
       },
 
@@ -409,7 +439,7 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
   }
 
   function makeSource(path, state) {
-    const location = path.node.openingElement.loc;
+    const location = path.node.loc;
     if (!location) {
       // the element was generated and doesn't have location information
       return;
@@ -532,33 +562,28 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
     }
 
     let attribs = [];
-    let key;
-    let source;
-    let self;
+    const extracted = Object.create(null);
 
     // for React.jsx, key, __source (dev), and __self (dev) is passed in as
     // a separate argument rather than in the args object. We go through the
     // props and filter out these three keywords so we can pass them in
     // as separate arguments later
-    for (let i = 0; i < openingPath.node.attributes.length; i++) {
-      const attr = openingPath.node.attributes[i];
-      if (t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name)) {
-        if (attr.name.name === "key") {
-          key = convertAttribute(attr).value;
-        } else if (
-          attr.name.name === "__source" ||
-          attr.name.name === "__self"
-        ) {
-          throw path.buildCodeFrameError(
-            `__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config.`,
-          );
-        } else {
-          // If someone is still using the __source and __self Babel plugins
-          // filter the results out
-          attribs.push(attr);
+    for (const attr of openingPath.get("attributes")) {
+      if (attr.isJSXAttribute() && t.isJSXIdentifier(attr.node.name)) {
+        const { name } = attr.node.name;
+        switch (name) {
+          case "__source":
+          case "__self":
+            if (extracted[name]) throw sourceSelfError(path, name);
+          /* falls through */
+          case "key":
+            extracted[name] = convertAttributeValue(attr.node.value);
+            break;
+          default:
+            attribs.push(attr.node);
         }
       } else {
-        attribs.push(attr);
+        attribs.push(attr.node);
       }
     }
 
@@ -576,20 +601,18 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
     args.push(attribs);
 
     if (!options.development) {
-      if (key !== undefined) {
-        args.push(key);
+      if (extracted.key !== undefined) {
+        args.push(extracted.key);
       }
     } else {
       // isStaticChildren, __source, and __self are only used in development
       // automatically include __source and __self in this plugin
       // so we can eliminate the need for separate Babel plugins in Babel 8
-      source = makeSource(path, file);
-      self = t.thisExpression();
       args.push(
-        key === undefined ? path.scope.buildUndefinedNode() : key,
+        extracted.key ?? path.scope.buildUndefinedNode(),
         t.booleanLiteral(path.node.children.length > 1),
-        source ?? path.scope.buildUndefinedNode(),
-        self,
+        extracted.__source ?? path.scope.buildUndefinedNode(),
+        extracted.__self ?? t.thisExpression(),
       );
     }
 
@@ -611,16 +634,7 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
   // Builds props for React.jsx. This function adds children into the props
   // and ensures that props is always an object
   function buildJSXOpeningElementAttributes(attribs, file, children) {
-    const _attribs = attribs.filter(
-      prop =>
-        !(
-          t.isJSXAttribute(prop) &&
-          prop.name &&
-          (prop.name.name === "__source" || prop.name.name === "__self")
-        ),
-    );
-
-    const props = _attribs.map(convertAttribute);
+    const props = attribs.map(convertAttribute);
 
     // In React.jsx, children is no longer a separate argument, but passed in
     // through the argument object
@@ -774,7 +788,6 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
     const attribs = buildCreateElementOpeningElementAttributes(
       path,
       openingPath.node.attributes,
-      file,
     );
 
     args.push(attribs, ...path.node.children);
@@ -796,40 +809,33 @@ You can set \`throwIfNamespace: false\` to bypass this warning.`,
    * breaking on spreads, we then push a new object containing
    * all prior attributes to an array for later processing.
    */
-  function buildCreateElementOpeningElementAttributes(path, attribs, file) {
-    // We want source and self to be automatically included in the future
-    // so we will error when we see it
+  function buildCreateElementOpeningElementAttributes(path, attribs) {
+    const props = [];
+    const found = Object.create(null);
 
-    const hasSourceSelf = attribs.some(
-      prop =>
-        t.isJSXAttribute(prop) &&
-        prop.name &&
-        (prop.name.name === "__source" || prop.name.name === "__self"),
-    );
+    for (const attr of attribs) {
+      const name =
+        t.isJSXAttribute(attr) &&
+        t.isJSXIdentifier(attr.name) &&
+        attr.name.name;
 
-    if (hasSourceSelf) {
-      throw path.buildCodeFrameError(
-        `__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config.`,
-      );
+      if (name === "__source" || name === "__self") {
+        if (found[name]) throw sourceSelfError(path, name);
+        found[name] = true;
+        if (!options.development) continue;
+      }
+
+      props.push(convertAttribute(attr));
     }
 
-    if (options.development) {
-      attribs.push(
-        t.jsxAttribute(
-          t.jsxIdentifier("__source"),
-          t.jsxExpressionContainer(makeSource(path, file)),
-        ),
-      );
-      attribs.push(
-        t.jsxAttribute(
-          t.jsxIdentifier("__self"),
-          t.jsxExpressionContainer(t.thisExpression()),
-        ),
-      );
-    }
-
-    const props = attribs.map(convertAttribute);
-
     return props.length > 0 ? t.objectExpression(props) : t.nullLiteral();
   }
+
+  function sourceSelfError(path, name) {
+    const pluginName = `transform-react-jsx-${name.slice(2)}`;
+
+    return path.buildCodeFrameError(
+      `Duplicate ${name} prop found. You are most likely using the deprecated ${pluginName} Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config.`,
+    );
+  }
 }
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-with-source-self-plugins/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-with-source-self-plugins/options.json
index b41228b7e3..3d7af506b7 100644
--- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-with-source-self-plugins/options.json
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime-with-source-self-plugins/options.json
@@ -5,5 +5,5 @@
     "transform-react-jsx-self"
   ],
   "os": ["linux", "darwin"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+  "throws": "Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config."
 }
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/input.mjs b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/input.mjs
new file mode 100644
index 0000000000..10fa67b30f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/input.mjs
@@ -0,0 +1,7 @@
+<div />;
+() => <div />;
+
+function fn() {
+  <div />;
+  () => <div />;
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/output.mjs b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/output.mjs
new file mode 100644
index 0000000000..a7d8f61fd5
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/output.mjs
@@ -0,0 +1,38 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/self-inside-arrow/input.mjs",
+    _this = this;
+
+/*#__PURE__*/
+_jsxDEV("div", {}, void 0, false, {
+  fileName: _jsxFileName,
+  lineNumber: 1,
+  columnNumber: 1
+}, this);
+
+(function () {
+  return /*#__PURE__*/_jsxDEV("div", {}, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 2,
+    columnNumber: 7
+  }, _this);
+});
+
+function fn() {
+  var _this2 = this;
+
+  /*#__PURE__*/
+  _jsxDEV("div", {}, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 5,
+    columnNumber: 3
+  }, this);
+
+  (function () {
+    return /*#__PURE__*/_jsxDEV("div", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 6,
+      columnNumber: 9
+    }, _this2);
+  });
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/source-and-self-defined/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/source-and-self-defined/options.json
index 563321ae53..a2be725ca1 100644
--- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/source-and-self-defined/options.json
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/source-and-self-defined/options.json
@@ -6,5 +6,5 @@
   ],
   "sourceType": "module",
   "os": ["linux", "darwin"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+  "throws": "Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config."
 }
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-with-source-self-plugins-windows/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-with-source-self-plugins-windows/options.json
index cee6ae74ec..9c71d64a53 100644
--- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-with-source-self-plugins-windows/options.json
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/classic-runtime-with-source-self-plugins-windows/options.json
@@ -4,5 +4,6 @@
     "transform-react-jsx-source",
     "transform-react-jsx-self"
   ],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+  "os": ["windows"],
+  "throws": "Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config."
 }
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/handle-fragments-with-key-windows/output.js b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/handle-fragments-with-key-windows/output.js
index 577650e5f4..24bb6c8330 100644
--- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/handle-fragments-with-key-windows/output.js
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/handle-fragments-with-key-windows/output.js
@@ -2,7 +2,7 @@ var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
 
 var _jsxFileName = "C:\\Users\\travis\\build\\babel\\babel\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\handle-fragments-with-key-windows\\input.js";
 
-var x = /*#__PURE__*/_reactJsxDevRuntime.jsxDEV(React.Fragment, {}, "foo", false, {
+var x = /*#__PURE__*/_reactJsxDevRuntime.jsxDEV(React.Fragment, {}, 'foo', false, {
   fileName: _jsxFileName,
   lineNumber: 1,
   columnNumber: 9
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/input.mjs b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/input.mjs
new file mode 100644
index 0000000000..10fa67b30f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/input.mjs
@@ -0,0 +1,7 @@
+<div />;
+() => <div />;
+
+function fn() {
+  <div />;
+  () => <div />;
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/output.mjs b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/output.mjs
new file mode 100644
index 0000000000..cbd8fff42f
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/self-inside-arrow-windows/output.mjs
@@ -0,0 +1,38 @@
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+
+var _jsxFileName = "C:\\Users\\travis\\build\\babel\\babel\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\self-inside-arrow-windows\\input.mjs",
+    _this = this;
+
+/*#__PURE__*/
+_jsxDEV("div", {}, void 0, false, {
+  fileName: _jsxFileName,
+  lineNumber: 1,
+  columnNumber: 1
+}, this);
+
+(function () {
+  return /*#__PURE__*/_jsxDEV("div", {}, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 2,
+    columnNumber: 7
+  }, _this);
+});
+
+function fn() {
+  var _this2 = this;
+
+  /*#__PURE__*/
+  _jsxDEV("div", {}, void 0, false, {
+    fileName: _jsxFileName,
+    lineNumber: 5,
+    columnNumber: 3
+  }, this);
+
+  (function () {
+    return /*#__PURE__*/_jsxDEV("div", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 6,
+      columnNumber: 9
+    }, _this2);
+  });
+}
diff --git a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/source-and-self-defined-windows/options.json b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/source-and-self-defined-windows/options.json
index 5dc6b8ebc5..db90159c6e 100644
--- a/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/source-and-self-defined-windows/options.json
+++ b/packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/source-and-self-defined-windows/options.json
@@ -6,5 +6,5 @@
   ],
   "sourceType": "module",
   "os": ["windows"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+  "throws": "Duplicate __self prop found. You are most likely using the deprecated transform-react-jsx-self Babel plugin. Both __source and __self are automatically set when using the automatic runtime. Please remove transform-react-jsx-source and transform-react-jsx-self from your Babel config."
 }
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/exec.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/exec.js
deleted file mode 100644
index f122206b35..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/exec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var actual = transform(
-  `var x = (
-    <>
-    <div>
-        <div key="1" />
-        <div key="2" meow="wolf" />
-        <div key="3" />
-        <div {...props} key="4" />
-    </div>
-    </>
-  );`,
-  Object.assign({}, opts, { filename: 'C:\\fake\\path\\mock.js' })
-).code;
-
-var expected = 
-`import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var _jsxFileName = "C:\\\\fake\\\\path\\\\mock.js";
-
-var x = _jsx(_Fragment, {
-  children: _jsxs("div", {
-    children: [_jsx("div", {}, "1"), _jsx("div", {
-      meow: "wolf"
-    }, "2"), _jsx("div", {}, "3"), _createElement("div", { ...props,
-      key: "4"
-    })]
-  })
-});`;
-
-expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/options.json
deleted file mode 100644
index c94bc204de..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/options.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "plugins": [
-    [
-      "transform-react-jsx",
-      {
-        "autoImport": "namedExports",
-        "runtime": "automatic"
-      }
-    ],
-    "transform-react-jsx-source",
-    "transform-react-jsx-self"
-  ],
-  "sourceType": "module",
-  "os": ["win32"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
-}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/exec.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/exec.js
deleted file mode 100644
index e6e063c636..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/exec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-var actual = transform(
-  `var x = (
-    <>
-    <div>
-        <div key="1" />
-        <div key="2" meow="wolf" />
-        <div key="3" />
-        <div {...props} key="4" />
-    </div>
-    </>
-  );`,
-  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
-).code;
-
-var expected = 
-`import { createElement as _createElement } from "react";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-var _jsxFileName = "/fake/path/mock.js";
-
-var x = _jsx(_Fragment, {
-  children: _jsxs("div", {
-    children: [_jsx("div", {}, "1"), _jsx("div", {
-      meow: "wolf"
-    }, "2"), _jsx("div", {}, "3"), _createElement("div", { ...props,
-      key: "4"
-    })]
-  })
-});`;
-
-expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/input.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/input.mjs
new file mode 100644
index 0000000000..ebd66ec03e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/input.mjs
@@ -0,0 +1,10 @@
+var x = (
+  <>
+  <div>
+      <div key="1" />
+      <div key="2" meow="wolf" />
+      <div key="3" />
+      <div {...props} key="4" />
+  </div>
+  </>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/options.json
index 0d217ed23c..8183c589d1 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/options.json
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/options.json
@@ -6,11 +6,6 @@
         "autoImport": "namedExports",
         "runtime": "automatic"
       }
-    ],
-    "transform-react-jsx-source",
-    "transform-react-jsx-self"
-  ],
-  "sourceType": "module",
-  "os": ["linux", "darwin"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+    ]
+  ]
 }
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/output.mjs
new file mode 100644
index 0000000000..00a9fb9333
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/output.mjs
@@ -0,0 +1,14 @@
+import { createElement as _createElement } from "react";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var x = /*#__PURE__*/_jsx(_Fragment, {
+  children: /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx("div", {}, "1"), /*#__PURE__*/_jsx("div", {
+      meow: "wolf"
+    }, "2"), /*#__PURE__*/_jsx("div", {}, "3"), /*#__PURE__*/_createElement("div", { ...props,
+      key: "4"
+    })]
+  })
+});
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/exec.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/exec.js
deleted file mode 100644
index 94ca9d4c3f..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/exec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-var actual = transform(
-  `/** @jsxRuntime classic */
-   var x = (
-    <>
-    <div>
-        <div key="1" />
-        <div key="2" meow="wolf" />
-        <div key="3" />
-        <div {...props} key="4" />
-    </div>
-    </>
-  );`,
-  Object.assign({}, opts, { filename: 'C:\\fake\\path\\mock.js' })
-).code;
-
-var expected = 
-`var _jsxFileName = "C:\\\\fake\\\\path\\\\mock.js";
-
-/** @jsxRuntime classic */
-var x = React.createElement(React.Fragment, null, React.createElement("div", null, React.createElement("div", {
-  key: "1"
-}), React.createElement("div", {
-  key: "2",
-  meow: "wolf"
-}), React.createElement("div", {
-  key: "3"
-}), React.createElement("div", { ...props,
-  key: "4"
-})));`;
-
-expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/options.json
deleted file mode 100644
index 756c676d8e..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self-windows/options.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "plugins": [
-    [
-      "transform-react-jsx",
-      {
-        "runtime": "automatic"
-      }
-    ],
-    "transform-react-jsx-source",
-    "transform-react-jsx-self"
-  ],
-  "sourceType": "module",
-  "os": ["win32"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
-}
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/exec.js b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/exec.js
deleted file mode 100644
index 9806f201de..0000000000
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/exec.js
+++ /dev/null
@@ -1,31 +0,0 @@
-var actual = transform(
-  `/** @jsxRuntime classic */
-   var x = (
-    <>
-    <div>
-        <div key="1" />
-        <div key="2" meow="wolf" />
-        <div key="3" />
-        <div {...props} key="4" />
-    </div>
-    </>
-  );`,
-  Object.assign({}, opts, { filename: '/fake/path/mock.js' })
-).code;
-
-var expected = 
-`var _jsxFileName = "/fake/path/mock.js";
-
-/** @jsxRuntime classic */
-var x = React.createElement(React.Fragment, null, React.createElement("div", null, React.createElement("div", {
-  key: "1"
-}), React.createElement("div", {
-  key: "2",
-  meow: "wolf"
-}), React.createElement("div", {
-  key: "3"
-}), React.createElement("div", { ...props,
-  key: "4"
-})));`;
-
-expect(actual).toBe(expected);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/input.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/input.mjs
new file mode 100644
index 0000000000..76b067760e
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/input.mjs
@@ -0,0 +1,11 @@
+/** @jsxRuntime classic */
+var x = (
+  <>
+  <div>
+      <div key="1" />
+      <div key="2" meow="wolf" />
+      <div key="3" />
+      <div {...props} key="4" />
+  </div>
+  </>
+);
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/options.json b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/options.json
index 6803cc2197..aa1ff2bb27 100644
--- a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/options.json
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/options.json
@@ -1,15 +1,5 @@
 {
   "plugins": [
-    [
-      "transform-react-jsx",
-      {
-        "runtime": "automatic"
-      }
-    ],
-    "transform-react-jsx-source",
-    "transform-react-jsx-self"
-  ],
-  "sourceType": "module",
-  "os": ["linux", "darwin"],
-  "throws": "__source and __self should not be defined in props. You are most likely using the deprecated transform-react-jsx-self or transform-react-jsx-source Babel plugins. __source and __self will be set automatically in automatic runtime. Please remove transform-react-jsx-self or transform-react-jsx-source from your Babel config."
+    ["transform-react-jsx", { "runtime": "automatic" }]
+  ]
 }
diff --git a/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/output.mjs b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/output.mjs
new file mode 100644
index 0000000000..d35cf1d205
--- /dev/null
+++ b/packages/babel-plugin-transform-react-jsx/test/fixtures/nextReactClassic/does-not-add-source-self/output.mjs
@@ -0,0 +1,11 @@
+/** @jsxRuntime classic */
+var x = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+  key: "1"
+}), /*#__PURE__*/React.createElement("div", {
+  key: "2",
+  meow: "wolf"
+}), /*#__PURE__*/React.createElement("div", {
+  key: "3"
+}), /*#__PURE__*/React.createElement("div", { ...props,
+  key: "4"
+})));