Add experimental version of the `babel-plugin-transform-react-… (#11154)

* add next option for babel-plugin-transform-react-jsx

* address review comments

* chore: update test fixtures

* Update fixture

* Add "columnNumber" to the new React transform

* Update windows fixtures

* Delete unused output.js

* Update windows tests

* Fix windows again

* fix comments

Co-authored-by: Huáng Jùnliàng <jlhwung@gmail.com>
Co-authored-by: Nicolò Ribaudo <nicolo.ribaudo@gmail.com>
Co-authored-by: Moti Zilberman <motiz88@gmail.com>

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/input.js

@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "module"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-module/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 = _jsx(_Fragment, {
+  children: _jsxs("div", {
+    children: [_jsx("div", {}, "1"), _jsx("div", {
+      meow: "wolf"
+    }, "2"), _jsx("div", {}, "3"), _createElement("div", { ...props,
+      key: "4"
+    })]
+  })
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/input.js

@@ -0,0 +1,10 @@
+var x = (
+    <>
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+    </>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "script"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/auto-import-react-source-type-script/output.js

@@ -0,0 +1,13 @@
+var _react = require("react");
+
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+var x = _reactJsxRuntime.jsx(_reactJsxRuntime.Fragment, {
+  children: _reactJsxRuntime.jsxs("div", {
+    children: [_reactJsxRuntime.jsx("div", {}, "1"), _reactJsxRuntime.jsx("div", {
+      meow: "wolf"
+    }, "2"), _reactJsxRuntime.jsx("div", {}, "3"), _react.createElement("div", { ...props,
+      key: "4"
+    })]
+  })
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/input.js

@@ -0,0 +1,15 @@
+const Bar = () => {
+    const Foo = () => {
+    const Component = ({thing, ..._react}) => {
+        if (!thing) {
+        var _react2 = "something useless";
+        var b = _react3();
+        var c = _react5();
+        var jsx = 1;
+        var _jsx = 2;
+        return <div />;
+        };
+        return <span />;
+    };
+    }
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "module"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-module/output.mjs

@@ -0,0 +1,25 @@
+import { jsx as _jsx2 } from "react/jsx-runtime";
+
+const Bar = () => {
+  const Foo = () => {
+    const Component = ({
+      thing,
+      ..._react
+    }) => {
+      if (!thing) {
+        var _react2 = "something useless";
+
+        var b = _react3();
+
+        var c = _react5();
+
+        var jsx = 1;
+        var _jsx = 2;
+        return _jsx2("div", {});
+      }
+
+      ;
+      return _jsx2("span", {});
+    };
+  };
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/input.js

@@ -0,0 +1,15 @@
+const Bar = () => {
+    const Foo = () => {
+    const Component = ({thing, ..._react}) => {
+        if (!thing) {
+        var _react2 = "something useless";
+        var b = _react3();
+        var c = _react5();
+        var jsx = 1;
+        var _jsx = 2;
+        return <div />;
+        };
+        return <span />;
+    };
+    }
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "script"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/complicated-scope-script/output.js

@@ -0,0 +1,25 @@
+var _reactJsxRuntime = require("react/jsx-runtime");
+
+const Bar = () => {
+  const Foo = () => {
+    const Component = ({
+      thing,
+      ..._react
+    }) => {
+      if (!thing) {
+        var _react2 = "something useless";
+
+        var b = _react3();
+
+        var c = _react5();
+
+        var jsx = 1;
+        var _jsx = 2;
+        return _reactJsxRuntime.jsx("div", {});
+      }
+
+      ;
+      return _reactJsxRuntime.jsx("span", {});
+    };
+  };
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/input.js

@@ -0,0 +1,2 @@
+/** @jsxImportSource baz */
+var x = (<div><span /></div>);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source-pragma/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "baz/jsx-runtime";
+
+/** @jsxImportSource baz */
+var x = _jsx("div", {
+  children: _jsx("span", {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/input.js

@@ -0,0 +1 @@
+var x = (<div><span /></div>);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/options.json

@@ -0,0 +1,5 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "importSource": "foo", "runtime": "automatic" }]
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/import-source/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "foo/jsx-runtime";
+
+var x = _jsx("div", {
+  children: _jsx("span", {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js

@@ -0,0 +1 @@
+var foo = "<div></div>";

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs

@@ -0,0 +1 @@
+var foo = "<div></div>";

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json

@@ -0,0 +1,4 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
+  "sourceType": "module"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js

@@ -0,0 +1,10 @@
+import * as react from "react";
+var y = react.createElement("div", {foo: 1});
+var x = (
+    <div>
+        <div key="1" />
+        <div key="2" meow="wolf" />
+        <div key="3" />
+        <div {...props} key="4" />
+    </div>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": [["transform-react-jsx", { "runtime": "automatic" }]]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs

@@ -0,0 +1,15 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import * as react from "react";
+var y = react.createElement("div", {
+  foo: 1
+});
+
+var x = _jsxs("div", {
+  children: [_jsx("div", {}, "1"), _jsx("div", {
+    meow: "wolf"
+  }, "2"), _jsx("div", {}, "3"), _createElement("div", { ...props,
+    key: "4"
+  })]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/.should-properly-handle-comments-adjacent-to-children/input.js

@@ -0,0 +1,13 @@
+var x = (
+  <div>
+    {/* A comment at the beginning */}
+    {/* A second comment at the beginning */}
+    <span>
+      {/* A nested comment */}
+    </span>
+    {/* A sandwiched comment */}
+    <br />
+    {/* A comment at the end */}
+    {/* A second comment at the end */}
+  </div>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/input.js

@@ -0,0 +1,3 @@
+<Component
+  {...props}
+  sound="moo" />

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/adds-appropriate-newlines-when-using-spread-attribute/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx(Component, { ...props,
+  sound: "moo"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js

@@ -0,0 +1,7 @@
+var foo = function () {
+  return () => <this />;
+};
+
+var bar = function () {
+  return () => <this.foo />;
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var foo = function () {
+  var _this = this;
+
+  return function () {
+    return _jsx(_this, {});
+  };
+};
+
+var bar = function () {
+  var _this2 = this;
+
+  return function () {
+    return _jsx(_this2.foo, {});
+  };
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/input.js

@@ -0,0 +1 @@
+var div = <Component {...props} foo="bar" />

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var div = _jsx(Component, { ...props,
+  foo: "bar"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/input.js

@@ -0,0 +1,13 @@
+var x =
+  <div>
+    foo
+    {"bar"}
+    baz
+    <div>
+      buz
+      bang
+    </div>
+    qux
+    {null}
+    quack
+  </div>

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/concatenates-adjacent-string-literals/output.mjs

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var x = _jsxs("div", {
+  children: ["foo", "bar", "baz", _jsx("div", {
+    children: "buz bang"
+  }), "qux", null, "quack"]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/input.js

@@ -0,0 +1,6 @@
+var Component;
+Component = React.createClass({
+  render: function render() {
+  return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-assignment-expression/output.mjs

@@ -0,0 +1,7 @@
+var Component;
+Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/input.mjs

@@ -0,0 +1,5 @@
+export default React.createClass({
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-export-default/output.mjs

@@ -0,0 +1,6 @@
+export default React.createClass({
+  displayName: "input",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/input.js

@@ -0,0 +1,13 @@
+var Whateva = React.createClass({
+  displayName: "Whatever",
+  render: function render() {
+    return null;
+  }
+});
+
+var Bar = React.createClass({
+  "displayName": "Ba",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-if-missing/output.mjs

@@ -0,0 +1,12 @@
+var Whateva = React.createClass({
+  displayName: "Whatever",
+  render: function render() {
+    return null;
+  }
+});
+var Bar = React.createClass({
+  "displayName": "Ba",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/input.js

@@ -0,0 +1,7 @@
+exports = {
+  Component: React.createClass({
+    render: function render() {
+      return null;
+    }
+  })
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-object-declaration/output.mjs

@@ -0,0 +1,8 @@
+exports = {
+  Component: React.createClass({
+    displayName: "Component",
+    render: function render() {
+      return null;
+    }
+  })
+};

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/input.js

@@ -0,0 +1,5 @@
+exports.Component = React.createClass({
+  render: function render() {
+  return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-property-assignment/output.mjs

@@ -0,0 +1,6 @@
+exports.Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/input.js

@@ -0,0 +1,5 @@
+var Component = React.createClass({
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/display-name-variable-declaration/output.mjs

@@ -0,0 +1,6 @@
+var Component = React.createClass({
+  displayName: "Component",
+  render: function render() {
+    return null;
+  }
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/exec.js

@@ -0,0 +1,32 @@
+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);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic-windows/options.json

@@ -0,0 +1,16 @@
+{
+  "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."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/exec.js

@@ -0,0 +1,32 @@
+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);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/does-not-add-source-self-automatic/options.json

@@ -0,0 +1,16 @@
+{
+  "plugins": [
+    [
+      "transform-react-jsx",
+      {
+        "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."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/input.js

@@ -0,0 +1,4 @@
+<Text>
+  To get started, edit index.ios.js!!!{"\n"}
+  Press Cmd+R to reload
+</Text>

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/dont-coerce-expression-containers/output.mjs

@@ -0,0 +1,5 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+_jsxs(Text, {
+  children: ["To get started, edit index.ios.js!!!", "\n", "Press Cmd+R to reload"]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/input.js

@@ -0,0 +1,3 @@
+import * as React from "react";
+
+var x = <React.Fragment key="foo"></React.Fragment>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-key/output.mjs

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+
+var x = _jsx(React.Fragment, {}, "foo");

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/input.js

@@ -0,0 +1 @@
+var x = <></>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments-with-no-children/output.mjs

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var x = _jsx(_Fragment, {});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js

@@ -0,0 +1 @@
+var x = <><div /></>

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+
+var x = _jsx(_Fragment, {
+  children: _jsx("div", {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/input.js

@@ -0,0 +1,5 @@
+var x = (
+        <div>
+            {[<span key={'0'} />, <span key={'1'} />]}
+        </div>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-nonstatic-children/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var x = _jsx("div", {
+  children: [_jsx("span", {}, '0'), _jsx("span", {}, '1')]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/input.js

@@ -0,0 +1,6 @@
+var x = (
+    <div>
+        <span />
+        {[<span key={'0'} />, <span key={'1'} />]}
+    </div>
+);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-static-children/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var x = _jsxs("div", {
+  children: [_jsx("span", {}), [_jsx("span", {}, '0'), _jsx("span", {}, '1')]]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/input.js

@@ -0,0 +1,6 @@
+<Foo></Foo>;
+
+var profile = <div>
+  <img src="avatar.png" className="profile" />
+  <h3>{[user.firstName, user.lastName].join(" ")}</h3>
+</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/honor-custom-jsx-comment/output.mjs

@@ -0,0 +1,13 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx(Foo, {});
+
+var profile = _jsxs("div", {
+  children: [_jsx("img", {
+    src: "avatar.png",
+    className: "profile"
+  }), _jsx("h3", {
+    children: [user.firstName, user.lastName].join(" ")
+  })]
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/input.js

@@ -0,0 +1 @@
+var div = <div>test</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/options.json

@@ -0,0 +1,3 @@
+{
+  "retainLines": true
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-with-retainlines-option/output.mjs

@@ -0,0 +1 @@
+import { jsx as _jsx } from "react/jsx-runtime";var div = _jsx("div", { children: "test" });

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/input.js

@@ -0,0 +1 @@
+var div = <div>test</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/jsx-without-retainlines-option/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var div = _jsx("div", {
+  children: "test"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/input.js

@@ -0,0 +1,2 @@
+const props = {foo: true};
+var x = (<div {...props} key={undefined}></div>)

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/key-undefined-works/output.mjs

@@ -0,0 +1,8 @@
+import { createElement as _createElement } from "react";
+const props = {
+  foo: true
+};
+
+var x = _createElement("div", { ...props,
+  key: undefined
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/input.js

@@ -0,0 +1,17 @@
+class App extends React.Component {
+  render() {
+    const navbarHeader = <div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>;
+
+    return <div>
+      <nav className="navbar navbar-default">
+        <div className="container">
+          {navbarHeader}
+        </div>
+      </nav>
+    </div>;
+  }
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/options.json

@@ -0,0 +1,8 @@
+{
+  "plugins": [
+    ["external-helpers", { "helperVersion": "7.100.0" }],
+    "transform-react-constant-elements",
+    "transform-classes",
+    "syntax-jsx"
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/optimisation.react.constant-elements/output.mjs

@@ -0,0 +1,31 @@
+var _ref = /*#__PURE__*/<div className="navbar-header">
+      <a className="navbar-brand" href="/">
+        <img src="/img/logo/logo-96x36.png" />
+      </a>
+    </div>;
+
+let App = /*#__PURE__*/function (_React$Component) {
+  babelHelpers.inherits(App, _React$Component);
+
+  var _super = babelHelpers.createSuper(App);
+
+  function App() {
+    babelHelpers.classCallCheck(this, App);
+    return _super.apply(this, arguments);
+  }
+
+  babelHelpers.createClass(App, [{
+    key: "render",
+    value: function render() {
+      const navbarHeader = _ref;
+      return <div>
+      <nav className="navbar navbar-default">
+        <div className="container">
+          {navbarHeader}
+        </div>
+      </nav>
+    </div>;
+    }
+  }]);
+  return App;
+}(React.Component);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json

@@ -0,0 +1,9 @@
+{
+  "plugins": [
+    "external-helpers",
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-react-display-name",
+    "transform-arrow-functions"
+  ],
+  "sourceType": "module"
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/pragma-works-with-no-space-at-the-end/input.js

@@ -0,0 +1,2 @@
+/* @jsxImportSource foo*/
+<div>Hi</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/pragma-works-with-no-space-at-the-end/output.mjs

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "foo/jsx-runtime";
+
+/* @jsxImportSource foo*/
+_jsx("div", {
+  children: "Hi"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/input.js

@@ -0,0 +1 @@
+var es3 = <F aaa new const var default foo-bar/>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/options.json

@@ -0,0 +1,6 @@
+{
+  "plugins": [
+    ["transform-react-jsx", { "runtime": "automatic" }],
+    "transform-property-literals"
+  ]
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-add-quotes-es3/output.mjs

@@ -0,0 +1,10 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var es3 = _jsx(F, {
+  aaa: true,
+  "new": true,
+  "const": true,
+  "var": true,
+  "default": true,
+  "foo-bar": true
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/input.js

@@ -0,0 +1 @@
+<Component constructor="foo" />;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-constructor-as-prop/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx(Component, {
+  constructor: "foo"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/input.js

@@ -0,0 +1 @@
+<Namespace.DeepNamespace.Component />;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-deeper-js-namespacing/output.mjs

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx(Namespace.DeepNamespace.Component, {});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/input.js

@@ -0,0 +1 @@
+<div attr=<div /> />

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-elements-as-attributes/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx("div", {
+  attr: _jsx("div", {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/blacklist.js

@@ -0,0 +1 @@
+React.createElement(Namespace.Component, null);

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/input.js

@@ -0,0 +1 @@
+<Namespace.Component />;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-js-namespacing/output.mjs

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx(Namespace.Component, {});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/input.js

@@ -0,0 +1,12 @@
+<div>
+  <  >
+    <>
+      <span>Hello</span>
+      <span>world</span>
+    </>
+    <>
+      <span>Goodbye</span>
+      <span>world</span>
+    </>
+  </>
+</div>

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-allow-nested-fragments/output.mjs

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+
+_jsx("div", {
+  children: _jsxs(_Fragment, {
+    children: [_jsxs(_Fragment, {
+      children: [_jsx("span", {
+        children: "Hello"
+      }), _jsx("span", {
+        children: "world"
+      })]
+    }), _jsxs(_Fragment, {
+      children: [_jsx("span", {
+        children: "Goodbye"
+      }), _jsx("span", {
+        children: "world"
+      })]
+    })]
+  })
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/input.js

@@ -0,0 +1,15 @@
+var x = <div>
+  <Component />
+</div>;
+
+var x = <div>
+  {props.children}
+</div>;
+
+var x = <Composite>
+  {props.children}
+</Composite>;
+
+var x = <Composite>
+  <Composite2 />
+</Composite>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-avoid-wrapping-in-extra-parens-if-not-needed/output.mjs

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var x = _jsx("div", {
+  children: _jsx(Component, {})
+});
+
+var x = _jsx("div", {
+  children: props.children
+});
+
+var x = _jsx(Composite, {
+  children: props.children
+});
+
+var x = _jsx(Composite, {
+  children: _jsx(Composite2, {})
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/input.js

@@ -0,0 +1 @@
+var x = <div></div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-tags/output.mjs

@@ -0,0 +1,3 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var x = _jsx("div", {});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/input.js

@@ -0,0 +1 @@
+var x = <div>text</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-convert-simple-text/output.mjs

@@ -0,0 +1,5 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+
+var x = _jsx("div", {
+  children: "text"
+});

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/input.js

@@ -0,0 +1 @@
+<div>{...children}</div>;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-spread-children/options.json

@@ -0,0 +1,3 @@
+{
+  "throws": "Spread children are not supported in React."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/input.js

@@ -0,0 +1 @@
+<Namespace:Component />;

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-disallow-xml-namespacing/options.json

@@ -0,0 +1,3 @@
+{
+  "throws": "Namespace tags are not supported by default. React's JSX doesn't support namespace tags. You can set `throwIfNamespace: false` to bypass this warning."
+}

packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/should-escape-xhtml-jsxattribute/input.js

@@ -0,0 +1,3 @@
+<div id="wôw" />;
+<div id="\w" />;
+<div id="w &lt; w" />;