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:
@@ -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"
|
||||
},
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
});
|
||||
|
||||
@@ -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,
|
||||
};
|
||||
});
|
||||
@@ -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,
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
var x = (
|
||||
<>
|
||||
<div>
|
||||
<div key="1" />
|
||||
<div key="2" meow="wolf" />
|
||||
<div key="3" />
|
||||
<div {...props} key="4" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
|
||||
"sourceType": "module"
|
||||
}
|
||||
@@ -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"
|
||||
})]
|
||||
})
|
||||
});
|
||||
@@ -0,0 +1,10 @@
|
||||
var x = (
|
||||
<>
|
||||
<div>
|
||||
<div key="1" />
|
||||
<div key="2" meow="wolf" />
|
||||
<div key="3" />
|
||||
<div {...props} key="4" />
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
|
||||
"sourceType": "script"
|
||||
}
|
||||
@@ -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"
|
||||
})]
|
||||
})
|
||||
});
|
||||
@@ -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 />;
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
|
||||
"sourceType": "module"
|
||||
}
|
||||
@@ -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", {});
|
||||
};
|
||||
};
|
||||
};
|
||||
@@ -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 />;
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
|
||||
"sourceType": "script"
|
||||
}
|
||||
@@ -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", {});
|
||||
};
|
||||
};
|
||||
};
|
||||
@@ -0,0 +1,2 @@
|
||||
/** @jsxImportSource baz */
|
||||
var x = (<div><span /></div>);
|
||||
@@ -0,0 +1,6 @@
|
||||
import { jsx as _jsx } from "baz/jsx-runtime";
|
||||
|
||||
/** @jsxImportSource baz */
|
||||
var x = _jsx("div", {
|
||||
children: _jsx("span", {})
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
var x = (<div><span /></div>);
|
||||
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"plugins": [
|
||||
["transform-react-jsx", { "importSource": "foo", "runtime": "automatic" }]
|
||||
]
|
||||
}
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "foo/jsx-runtime";
|
||||
|
||||
var x = _jsx("div", {
|
||||
children: _jsx("span", {})
|
||||
});
|
||||
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js
vendored
Normal file
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/input.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var foo = "<div></div>";
|
||||
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs
vendored
Normal file
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/no-jsx/output.mjs
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var foo = "<div></div>";
|
||||
4
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json
vendored
Normal file
4
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/options.json
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]],
|
||||
"sourceType": "module"
|
||||
}
|
||||
10
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js
vendored
Normal file
10
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/input.js
vendored
Normal 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>
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx", { "runtime": "automatic" }]]
|
||||
}
|
||||
15
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs
vendored
Normal file
15
packages/babel-plugin-transform-react-jsx/test/fixtures/nextAutoImport/react-defined/output.mjs
vendored
Normal 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"
|
||||
})]
|
||||
});
|
||||
@@ -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>
|
||||
);
|
||||
@@ -0,0 +1,3 @@
|
||||
<Component
|
||||
{...props}
|
||||
sound="moo" />
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
_jsx(Component, { ...props,
|
||||
sound: "moo"
|
||||
});
|
||||
7
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js
vendored
Normal file
7
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/input.js
vendored
Normal file
@@ -0,0 +1,7 @@
|
||||
var foo = function () {
|
||||
return () => <this />;
|
||||
};
|
||||
|
||||
var bar = function () {
|
||||
return () => <this.foo />;
|
||||
};
|
||||
17
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs
vendored
Normal file
17
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/arrow-functions/output.mjs
vendored
Normal 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, {});
|
||||
};
|
||||
};
|
||||
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/input.js
vendored
Normal file
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/input.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var div = <Component {...props} foo="bar" />
|
||||
5
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/output.mjs
vendored
Normal file
5
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/assignment/output.mjs
vendored
Normal file
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
var div = _jsx(Component, { ...props,
|
||||
foo: "bar"
|
||||
});
|
||||
@@ -0,0 +1,13 @@
|
||||
var x =
|
||||
<div>
|
||||
foo
|
||||
{"bar"}
|
||||
baz
|
||||
<div>
|
||||
buz
|
||||
bang
|
||||
</div>
|
||||
qux
|
||||
{null}
|
||||
quack
|
||||
</div>
|
||||
@@ -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"]
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
var Component;
|
||||
Component = React.createClass({
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
var Component;
|
||||
Component = React.createClass({
|
||||
displayName: "Component",
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
export default React.createClass({
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
export default React.createClass({
|
||||
displayName: "input",
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,7 @@
|
||||
exports = {
|
||||
Component: React.createClass({
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
};
|
||||
@@ -0,0 +1,8 @@
|
||||
exports = {
|
||||
Component: React.createClass({
|
||||
displayName: "Component",
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
})
|
||||
};
|
||||
@@ -0,0 +1,5 @@
|
||||
exports.Component = React.createClass({
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
exports.Component = React.createClass({
|
||||
displayName: "Component",
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
var Component = React.createClass({
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
var Component = React.createClass({
|
||||
displayName: "Component",
|
||||
render: function render() {
|
||||
return null;
|
||||
}
|
||||
});
|
||||
@@ -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);
|
||||
@@ -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."
|
||||
}
|
||||
@@ -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);
|
||||
@@ -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."
|
||||
}
|
||||
@@ -0,0 +1,4 @@
|
||||
<Text>
|
||||
To get started, edit index.ios.js!!!{"\n"}
|
||||
Press Cmd+R to reload
|
||||
</Text>
|
||||
@@ -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"]
|
||||
});
|
||||
@@ -0,0 +1,3 @@
|
||||
import * as React from "react";
|
||||
|
||||
var x = <React.Fragment key="foo"></React.Fragment>;
|
||||
@@ -0,0 +1,4 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import * as React from "react";
|
||||
|
||||
var x = _jsx(React.Fragment, {}, "foo");
|
||||
@@ -0,0 +1 @@
|
||||
var x = <></>;
|
||||
@@ -0,0 +1,4 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import { Fragment as _Fragment } from "react/jsx-runtime";
|
||||
|
||||
var x = _jsx(_Fragment, {});
|
||||
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js
vendored
Normal file
1
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/handle-fragments/input.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var x = <><div /></>
|
||||
@@ -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", {})
|
||||
});
|
||||
@@ -0,0 +1,5 @@
|
||||
var x = (
|
||||
<div>
|
||||
{[<span key={'0'} />, <span key={'1'} />]}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
var x = _jsx("div", {
|
||||
children: [_jsx("span", {}, '0'), _jsx("span", {}, '1')]
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
var x = (
|
||||
<div>
|
||||
<span />
|
||||
{[<span key={'0'} />, <span key={'1'} />]}
|
||||
</div>
|
||||
);
|
||||
@@ -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')]]
|
||||
});
|
||||
@@ -0,0 +1,6 @@
|
||||
<Foo></Foo>;
|
||||
|
||||
var profile = <div>
|
||||
<img src="avatar.png" className="profile" />
|
||||
<h3>{[user.firstName, user.lastName].join(" ")}</h3>
|
||||
</div>;
|
||||
@@ -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(" ")
|
||||
})]
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
var div = <div>test</div>;
|
||||
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"retainLines": true
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";var div = _jsx("div", { children: "test" });
|
||||
@@ -0,0 +1 @@
|
||||
var div = <div>test</div>;
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
var div = _jsx("div", {
|
||||
children: "test"
|
||||
});
|
||||
@@ -0,0 +1,2 @@
|
||||
const props = {foo: true};
|
||||
var x = (<div {...props} key={undefined}></div>)
|
||||
@@ -0,0 +1,8 @@
|
||||
import { createElement as _createElement } from "react";
|
||||
const props = {
|
||||
foo: true
|
||||
};
|
||||
|
||||
var x = _createElement("div", { ...props,
|
||||
key: undefined
|
||||
});
|
||||
@@ -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>;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"plugins": [
|
||||
["external-helpers", { "helperVersion": "7.100.0" }],
|
||||
"transform-react-constant-elements",
|
||||
"transform-classes",
|
||||
"syntax-jsx"
|
||||
]
|
||||
}
|
||||
@@ -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);
|
||||
9
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json
vendored
Normal file
9
packages/babel-plugin-transform-react-jsx/test/fixtures/nextReact/options.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"plugins": [
|
||||
"external-helpers",
|
||||
["transform-react-jsx", { "runtime": "automatic" }],
|
||||
"transform-react-display-name",
|
||||
"transform-arrow-functions"
|
||||
],
|
||||
"sourceType": "module"
|
||||
}
|
||||
@@ -0,0 +1,2 @@
|
||||
/* @jsxImportSource foo*/
|
||||
<div>Hi</div>;
|
||||
@@ -0,0 +1,6 @@
|
||||
import { jsx as _jsx } from "foo/jsx-runtime";
|
||||
|
||||
/* @jsxImportSource foo*/
|
||||
_jsx("div", {
|
||||
children: "Hi"
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
var es3 = <F aaa new const var default foo-bar/>;
|
||||
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"plugins": [
|
||||
["transform-react-jsx", { "runtime": "automatic" }],
|
||||
"transform-property-literals"
|
||||
]
|
||||
}
|
||||
@@ -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
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<Component constructor="foo" />;
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
_jsx(Component, {
|
||||
constructor: "foo"
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<Namespace.DeepNamespace.Component />;
|
||||
@@ -0,0 +1,3 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
_jsx(Namespace.DeepNamespace.Component, {});
|
||||
@@ -0,0 +1 @@
|
||||
<div attr=<div /> />
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
_jsx("div", {
|
||||
attr: _jsx("div", {})
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
React.createElement(Namespace.Component, null);
|
||||
@@ -0,0 +1 @@
|
||||
<Namespace.Component />;
|
||||
@@ -0,0 +1,3 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
_jsx(Namespace.Component, {});
|
||||
@@ -0,0 +1,12 @@
|
||||
<div>
|
||||
< >
|
||||
<>
|
||||
<span>Hello</span>
|
||||
<span>world</span>
|
||||
</>
|
||||
<>
|
||||
<span>Goodbye</span>
|
||||
<span>world</span>
|
||||
</>
|
||||
</>
|
||||
</div>
|
||||
@@ -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"
|
||||
})]
|
||||
})]
|
||||
})
|
||||
});
|
||||
@@ -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>;
|
||||
@@ -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, {})
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
var x = <div></div>;
|
||||
@@ -0,0 +1,3 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
var x = _jsx("div", {});
|
||||
@@ -0,0 +1 @@
|
||||
var x = <div>text</div>;
|
||||
@@ -0,0 +1,5 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
|
||||
var x = _jsx("div", {
|
||||
children: "text"
|
||||
});
|
||||
@@ -0,0 +1 @@
|
||||
<div>{...children}</div>;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user