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

@@ -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,5 @@
{
"plugins": ["transform-react-jsx-development"],
"sourceType": "module",
"os": ["linux", "darwin"]
}

View File

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

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

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-development", { "runtime": "classic" }]],
"os": ["linux", "darwin"]
}

View File

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

View File

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

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

View File

@@ -0,0 +1 @@
var x = <React.Fragment key="foo"></React.Fragment>;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,9 @@
{
"plugins": [
"external-helpers",
"transform-react-jsx-development",
"transform-react-display-name",
"transform-arrow-functions"
],
"os": ["linux", "darwin"]
}

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

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-development"],
"sourceType": "module"
}

View File

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

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,3 @@
{
"plugins": [["transform-react-jsx-development", { "runtime": "classic" }]]
}

View File

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

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

View File

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

View File

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

View File

@@ -0,0 +1 @@
var x = <React.Fragment key='foo'></React.Fragment>;

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -0,0 +1,9 @@
{
"plugins": [
"external-helpers",
"transform-react-jsx-development",
"transform-react-display-name",
"transform-arrow-functions"
],
"os": ["win32"]
}

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

View File

@@ -0,0 +1,3 @@
import runner from "@babel/helper-plugin-test-runner";
runner(__dirname);