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:
@@ -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,5 @@
|
||||
{
|
||||
"plugins": ["transform-react-jsx-development"],
|
||||
"sourceType": "module",
|
||||
"os": ["linux", "darwin"]
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { createElement as _createElement } from "react";
|
||||
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
||||
import { Fragment as _Fragment } from "react/jsx-dev-runtime";
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/auto-import-dev/input.js";
|
||||
|
||||
var x = _jsxDEV(_Fragment, {
|
||||
children: _jsxDEV("div", {
|
||||
children: [_jsxDEV("div", {}, "1", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 7
|
||||
}, this), _jsxDEV("div", {
|
||||
meow: "wolf"
|
||||
}, "2", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 5,
|
||||
columnNumber: 7
|
||||
}, this), _jsxDEV("div", {}, "3", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 6,
|
||||
columnNumber: 7
|
||||
}, this), _createElement("div", { ...props,
|
||||
key: "4",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 7,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
})]
|
||||
}, void 0, true, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 5
|
||||
}, this)
|
||||
}, void 0, false);
|
||||
@@ -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,9 @@
|
||||
{
|
||||
"plugins": [
|
||||
["transform-react-jsx-development", { "runtime": "classic" }],
|
||||
"transform-react-jsx-source",
|
||||
"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."
|
||||
}
|
||||
@@ -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-development", { "runtime": "classic" }]],
|
||||
"os": ["linux", "darwin"]
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/classic-runtime/input.js";
|
||||
var x = React.createElement(React.Fragment, null, React.createElement("div", {
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 5
|
||||
},
|
||||
__self: this
|
||||
}, React.createElement("div", {
|
||||
key: "1",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 9
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", {
|
||||
key: "2",
|
||||
meow: "wolf",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 5,
|
||||
columnNumber: 9
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", {
|
||||
key: "3",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 6,
|
||||
columnNumber: 9
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", { ...props,
|
||||
key: "4",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 7,
|
||||
columnNumber: 9
|
||||
},
|
||||
__self: this
|
||||
})));
|
||||
1
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/fragments/input.js
vendored
Normal file
1
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/fragments/input.js
vendored
Normal file
@@ -0,0 +1 @@
|
||||
var x = <><div /></>;
|
||||
11
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/fragments/output.js
vendored
Normal file
11
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/fragments/output.js
vendored
Normal file
@@ -0,0 +1,11 @@
|
||||
var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/fragments/input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV(_reactJsxDevRuntime.Fragment, {
|
||||
children: _reactJsxDevRuntime.jsxDEV("div", {}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
}, void 0, false);
|
||||
@@ -0,0 +1 @@
|
||||
var x = <React.Fragment key="foo"></React.Fragment>;
|
||||
@@ -0,0 +1,9 @@
|
||||
var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/handle-fragments-with-key/input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV(React.Fragment, {}, "foo", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 9
|
||||
}, this);
|
||||
@@ -0,0 +1 @@
|
||||
var x = <div>{[<span key={"0"} />, <span key={"1"} />]}</div>;
|
||||
@@ -0,0 +1,19 @@
|
||||
var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/handle-nonstatic-children/input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV("div", {
|
||||
children: [_reactJsxDevRuntime.jsxDEV("span", {}, "0", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 16
|
||||
}, this), _reactJsxDevRuntime.jsxDEV("span", {}, "1", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 36
|
||||
}, this)]
|
||||
}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 9
|
||||
}, this);
|
||||
@@ -0,0 +1,6 @@
|
||||
var x = (
|
||||
<div>
|
||||
<span />
|
||||
{[<span key={"0"} />, <span key={"1"} />]}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,23 @@
|
||||
var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
|
||||
|
||||
var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/handle-static-children/input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV("div", {
|
||||
children: [_reactJsxDevRuntime.jsxDEV("span", {}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 5
|
||||
}, this), [_reactJsxDevRuntime.jsxDEV("span", {}, "0", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 7
|
||||
}, this), _reactJsxDevRuntime.jsxDEV("span", {}, "1", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 27
|
||||
}, this)]]
|
||||
}, void 0, true, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 2,
|
||||
columnNumber: 3
|
||||
}, this);
|
||||
9
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/options.json
vendored
Normal file
9
packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/options.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"plugins": [
|
||||
"external-helpers",
|
||||
"transform-react-jsx-development",
|
||||
"transform-react-display-name",
|
||||
"transform-arrow-functions"
|
||||
],
|
||||
"os": ["linux", "darwin"]
|
||||
}
|
||||
@@ -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,10 @@
|
||||
{
|
||||
"plugins": [
|
||||
"transform-react-jsx-development",
|
||||
"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,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-development"],
|
||||
"sourceType": "module"
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { createElement as _createElement } from "react";
|
||||
import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
|
||||
import { Fragment as _Fragment } from "react/jsx-dev-runtime";
|
||||
var _jsxFileName = "C:\\Users\\travis\\build\\babel\\babel\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\auto-import-dev-windows\\input.js";
|
||||
|
||||
var x = _jsxDEV(_Fragment, {
|
||||
children: _jsxDEV("div", {
|
||||
children: [_jsxDEV("div", {}, "1", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 7
|
||||
}, this), _jsxDEV("div", {
|
||||
meow: "wolf"
|
||||
}, "2", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 5,
|
||||
columnNumber: 7
|
||||
}, this), _jsxDEV("div", {}, "3", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 6,
|
||||
columnNumber: 7
|
||||
}, this), _createElement("div", { ...props,
|
||||
key: "4",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 7,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
})]
|
||||
}, void 0, true, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 5
|
||||
}, this)
|
||||
}, void 0, false);
|
||||
@@ -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,3 @@
|
||||
{
|
||||
"plugins": [["transform-react-jsx-development", { "runtime": "classic" }]]
|
||||
}
|
||||
@@ -0,0 +1,42 @@
|
||||
var _jsxFileName = "C:\\Users\\travis\\build\\babel\\babel\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\classic-runtime-windows\\input.js";
|
||||
var x = React.createElement(React.Fragment, null, React.createElement("div", {
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 5
|
||||
},
|
||||
__self: this
|
||||
}, React.createElement("div", {
|
||||
key: "1",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", {
|
||||
key: "2",
|
||||
meow: "wolf",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 5,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", {
|
||||
key: "3",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 6,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
}), React.createElement("div", { ...props,
|
||||
key: "4",
|
||||
__source: {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 7,
|
||||
columnNumber: 7
|
||||
},
|
||||
__self: this
|
||||
})));
|
||||
@@ -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,8 @@
|
||||
{
|
||||
"plugins": [
|
||||
["transform-react-jsx-development", { "runtime": "classic" }],
|
||||
"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."
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
var x = <><div /></>;
|
||||
@@ -0,0 +1,11 @@
|
||||
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\\fragments-windows\\input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV(_reactJsxDevRuntime.Fragment, {
|
||||
children: _reactJsxDevRuntime.jsxDEV("div", {}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 11
|
||||
}, this)
|
||||
}, void 0, false);
|
||||
@@ -0,0 +1 @@
|
||||
var x = <React.Fragment key='foo'></React.Fragment>;
|
||||
@@ -0,0 +1,9 @@
|
||||
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 = _reactJsxDevRuntime.jsxDEV(React.Fragment, {}, "foo", false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 1,
|
||||
columnNumber: 9
|
||||
}, this);
|
||||
@@ -0,0 +1,5 @@
|
||||
var x = (
|
||||
<div>
|
||||
{[<span key={'0'} />, <span key={'1'} />]}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,19 @@
|
||||
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-nonstatic-children-windows\\input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV("div", {
|
||||
children: [_reactJsxDevRuntime.jsxDEV("span", {}, '0', false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 11
|
||||
}, this), _reactJsxDevRuntime.jsxDEV("span", {}, '1', false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 31
|
||||
}, this)]
|
||||
}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 2,
|
||||
columnNumber: 5
|
||||
}, this);
|
||||
@@ -0,0 +1,6 @@
|
||||
var x = (
|
||||
<div>
|
||||
<span />
|
||||
{[<span key={'0'} />, <span key={'1'} />]}
|
||||
</div>
|
||||
);
|
||||
@@ -0,0 +1,23 @@
|
||||
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-static-children-windows\\input.js";
|
||||
|
||||
var x = _reactJsxDevRuntime.jsxDEV("div", {
|
||||
children: [_reactJsxDevRuntime.jsxDEV("span", {}, void 0, false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 3,
|
||||
columnNumber: 9
|
||||
}, this), [_reactJsxDevRuntime.jsxDEV("span", {}, '0', false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 11
|
||||
}, this), _reactJsxDevRuntime.jsxDEV("span", {}, '1', false, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 4,
|
||||
columnNumber: 31
|
||||
}, this)]]
|
||||
}, void 0, true, {
|
||||
fileName: _jsxFileName,
|
||||
lineNumber: 2,
|
||||
columnNumber: 5
|
||||
}, this);
|
||||
9
packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/options.json
vendored
Normal file
9
packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/options.json
vendored
Normal file
@@ -0,0 +1,9 @@
|
||||
{
|
||||
"plugins": [
|
||||
"external-helpers",
|
||||
"transform-react-jsx-development",
|
||||
"transform-react-display-name",
|
||||
"transform-arrow-functions"
|
||||
],
|
||||
"os": ["win32"]
|
||||
}
|
||||
@@ -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,10 @@
|
||||
{
|
||||
"plugins": [
|
||||
"transform-react-jsx-development",
|
||||
"transform-react-jsx-source",
|
||||
"transform-react-jsx-self"
|
||||
],
|
||||
"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."
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
import runner from "@babel/helper-plugin-test-runner";
|
||||
|
||||
runner(__dirname);
|
||||
Reference in New Issue
Block a user