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>
This commit is contained in:
Luna Ruan
2020-03-17 01:16:53 -07:00
committed by GitHub
parent 10aa97bc10
commit 748897be07
337 changed files with 3311 additions and 105 deletions

View File

@@ -13,6 +13,7 @@
],
"dependencies": {
"@babel/helper-builder-react-jsx": "^7.8.3",
"@babel/helper-builder-react-jsx-experimental": "^7.8.3",
"@babel/helper-plugin-utils": "^7.8.3",
"@babel/plugin-syntax-jsx": "^7.8.3"
},

View File

@@ -1,100 +1,18 @@
/* eslint-disable-next-line @babel/development/plugin-name */
import transformClassic from "./transform-classic";
/* eslint-disable-next-line @babel/development/plugin-name */
import transformAutomatic from "./transform-automatic";
import { declare } from "@babel/helper-plugin-utils";
import jsx from "@babel/plugin-syntax-jsx";
import helper from "@babel/helper-builder-react-jsx";
import { types as t } from "@babel/core";
export default declare((api, options) => {
api.assertVersion(7);
const { runtime = "classic" } = options;
const THROW_IF_NAMESPACE =
options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
const PRAGMA_DEFAULT = options.pragma || "React.createElement";
const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
// returns a closure that returns an identifier or memberExpression node
// based on the given id
const createIdentifierParser = (id: string) => () => {
return id
.split(".")
.map(name => t.identifier(name))
.reduce((object, property) => t.memberExpression(object, property));
};
const visitor = helper({
pre(state) {
const tagName = state.tagName;
const args = state.args;
if (t.react.isCompatTag(tagName)) {
args.push(t.stringLiteral(tagName));
} else {
args.push(state.tagExpr);
}
},
post(state, pass) {
state.callee = pass.get("jsxIdentifier")();
},
throwIfNamespace: THROW_IF_NAMESPACE,
});
visitor.Program = {
enter(path, state) {
const { file } = state;
let pragma = PRAGMA_DEFAULT;
let pragmaFrag = PRAGMA_FRAG_DEFAULT;
let pragmaSet = !!options.pragma;
let pragmaFragSet = !!options.pragmaFrag;
if (file.ast.comments) {
for (const comment of (file.ast.comments: Array<Object>)) {
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
if (jsxMatches) {
pragma = jsxMatches[1];
pragmaSet = true;
}
const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
if (jsxFragMatches) {
pragmaFrag = jsxFragMatches[1];
pragmaFragSet = true;
}
}
}
state.set("jsxIdentifier", createIdentifierParser(pragma));
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
state.set("usedFragment", false);
state.set("pragmaSet", pragmaSet);
state.set("pragmaFragSet", pragmaFragSet);
},
exit(path, state) {
if (
state.get("pragmaSet") &&
state.get("usedFragment") &&
!state.get("pragmaFragSet")
) {
throw new Error(
"transform-react-jsx: pragma has been set but " +
"pragmaFrag has not been set",
);
}
},
};
visitor.JSXAttribute = function(path) {
if (t.isJSXElement(path.node.value)) {
path.node.value = t.jsxExpressionContainer(path.node.value);
}
};
return {
name: "transform-react-jsx",
inherits: jsx,
visitor,
};
// we throw a warning in helper-builder-react-jsx-experimental if runtime
// is neither automatic or classic because we will remove this file
// in v8.0.0
if (runtime === "classic") {
return transformClassic(api, options);
} else {
return transformAutomatic(api, options);
}
});

View File

@@ -0,0 +1,43 @@
import jsx from "@babel/plugin-syntax-jsx";
import { helper } from "@babel/helper-builder-react-jsx-experimental";
import { declare } from "@babel/helper-plugin-utils";
import { types as t } from "@babel/core";
export default declare((api, options) => {
const visitor = helper(api, {
pre(state) {
const tagName = state.tagName;
const args = state.args;
if (t.react.isCompatTag(tagName)) {
args.push(t.stringLiteral(tagName));
} else {
args.push(state.tagExpr);
}
},
post(state, pass) {
if (pass.get("@babel/plugin-react-jsx/runtime") === "classic") {
state.createElementCallee = pass.get(
"@babel/plugin-react-jsx/createElementIdentifier",
)();
} else {
state.jsxCallee = pass.get("@babel/plugin-react-jsx/jsxIdentifier")();
state.jsxStaticCallee = pass.get(
"@babel/plugin-react-jsx/jsxStaticIdentifier",
)();
state.createElementCallee = pass.get(
"@babel/plugin-react-jsx/createElementIdentifier",
)();
}
},
...options,
development: false,
});
return {
name: "transform-react-jsx",
inherits: jsx,
visitor,
};
});

View File

@@ -0,0 +1,98 @@
import { declare } from "@babel/helper-plugin-utils";
import jsx from "@babel/plugin-syntax-jsx";
import helper from "@babel/helper-builder-react-jsx";
import { types as t } from "@babel/core";
export default declare((api, options) => {
const THROW_IF_NAMESPACE =
options.throwIfNamespace === undefined ? true : !!options.throwIfNamespace;
const PRAGMA_DEFAULT = options.pragma || "React.createElement";
const PRAGMA_FRAG_DEFAULT = options.pragmaFrag || "React.Fragment";
const JSX_ANNOTATION_REGEX = /\*?\s*@jsx\s+([^\s]+)/;
const JSX_FRAG_ANNOTATION_REGEX = /\*?\s*@jsxFrag\s+([^\s]+)/;
// returns a closure that returns an identifier or memberExpression node
// based on the given id
const createIdentifierParser = (id: string) => () => {
return id
.split(".")
.map(name => t.identifier(name))
.reduce((object, property) => t.memberExpression(object, property));
};
const visitor = helper({
pre(state) {
const tagName = state.tagName;
const args = state.args;
if (t.react.isCompatTag(tagName)) {
args.push(t.stringLiteral(tagName));
} else {
args.push(state.tagExpr);
}
},
post(state, pass) {
state.callee = pass.get("jsxIdentifier")();
},
throwIfNamespace: THROW_IF_NAMESPACE,
});
visitor.Program = {
enter(path, state) {
const { file } = state;
let pragma = PRAGMA_DEFAULT;
let pragmaFrag = PRAGMA_FRAG_DEFAULT;
let pragmaSet = !!options.pragma;
let pragmaFragSet = !!options.pragmaFrag;
if (file.ast.comments) {
for (const comment of (file.ast.comments: Array<Object>)) {
const jsxMatches = JSX_ANNOTATION_REGEX.exec(comment.value);
if (jsxMatches) {
pragma = jsxMatches[1];
pragmaSet = true;
}
const jsxFragMatches = JSX_FRAG_ANNOTATION_REGEX.exec(comment.value);
if (jsxFragMatches) {
pragmaFrag = jsxFragMatches[1];
pragmaFragSet = true;
}
}
}
state.set("jsxIdentifier", createIdentifierParser(pragma));
state.set("jsxFragIdentifier", createIdentifierParser(pragmaFrag));
state.set("usedFragment", false);
state.set("pragmaSet", pragmaSet);
state.set("pragmaFragSet", pragmaFragSet);
},
exit(path, state) {
if (
state.get("pragmaSet") &&
state.get("usedFragment") &&
!state.get("pragmaFragSet")
) {
throw new Error(
"transform-react-jsx: pragma has been set but " +
"pragmaFrag has not been set",
);
}
},
};
visitor.JSXAttribute = function(path) {
if (t.isJSXElement(path.node.value)) {
path.node.value = t.jsxExpressionContainer(path.node.value);
}
};
return {
name: "transform-react-jsx",
inherits: jsx,
visitor,
};
});

View File

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

View File

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

View File

@@ -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"
})]
})
});

View File

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

View File

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

View File

@@ -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"
})]
})
});

View File

@@ -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 />;
};
}
}

View File

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

View File

@@ -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", {});
};
};
};

View File

@@ -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 />;
};
}
}

View File

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

View File

@@ -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", {});
};
};
};

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>
);

View File

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

View File

@@ -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"
})]
});

View File

@@ -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>
);

View File

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

View File

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

View File

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

View File

@@ -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, {});
};
};

View File

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

View File

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

View File

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

View File

@@ -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"]
});

View File

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

View File

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

View File

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

View File

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

View File

@@ -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;
}
});

View File

@@ -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;
}
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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);

View File

@@ -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."
}

View File

@@ -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);

View File

@@ -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."
}

View File

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

View File

@@ -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"]
});

View File

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

View File

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

View File

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

View File

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

View File

@@ -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", {})
});

View File

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

View File

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

View File

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

View File

@@ -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')]]
});

View File

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

View File

@@ -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(" ")
})]
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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>;
}
}

View File

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

View File

@@ -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);

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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
});

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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"
})]
})]
})
});

View File

@@ -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>;

View File

@@ -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, {})
});

View File

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

View File

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

View File

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

View File

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

View File

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

Some files were not shown because too many files have changed in this diff Show More