Merge pull request #3029 from spicyj/inline2
React inlining: Refactor to reduce parsing cost
This commit is contained in:
commit
02e4dcdbe2
@ -9,15 +9,43 @@ helpers.typeof = template(`
|
||||
});
|
||||
`);
|
||||
|
||||
helpers.createRawReactElement = template(`
|
||||
helpers.jsx = template(`
|
||||
(function () {
|
||||
var REACT_ELEMENT_TYPE = (typeof Symbol === "function" && Symbol.for && Symbol.for("react.element")) || 0xeac7;
|
||||
|
||||
return function createRawReactElement (type, key, props) {
|
||||
return function createRawReactElement (type, props, key, children) {
|
||||
var defaultProps = type && type.defaultProps;
|
||||
var childrenLength = arguments.length - 3;
|
||||
|
||||
if (!props && childrenLength !== 0) {
|
||||
// If we're going to assign props.children, we create a new object now
|
||||
// to avoid mutating defaultProps.
|
||||
props = {};
|
||||
}
|
||||
if (props && defaultProps) {
|
||||
for (var propName in defaultProps) {
|
||||
if (props[propName] === void 0) {
|
||||
props[propName] = defaultProps[propName];
|
||||
}
|
||||
}
|
||||
} else if (!props) {
|
||||
props = defaultProps || {};
|
||||
}
|
||||
|
||||
if (childrenLength === 1) {
|
||||
props.children = children;
|
||||
} else if (childrenLength > 1) {
|
||||
var childArray = Array(childrenLength);
|
||||
for (var i = 0; i < childrenLength; i++) {
|
||||
childArray[i] = arguments[i + 3];
|
||||
}
|
||||
props.children = childArray;
|
||||
}
|
||||
|
||||
return {
|
||||
$$typeof: REACT_ELEMENT_TYPE,
|
||||
type: type,
|
||||
key: key,
|
||||
key: key === undefined ? null : '' + key,
|
||||
ref: null,
|
||||
props: props,
|
||||
_owner: null,
|
||||
@ -87,20 +115,6 @@ helpers.createClass = template(`
|
||||
})()
|
||||
`);
|
||||
|
||||
helpers.defaultProps = template(`
|
||||
(function (defaultProps, props) {
|
||||
if (defaultProps) {
|
||||
for (var propName in defaultProps) {
|
||||
if (typeof props[propName] === "undefined") {
|
||||
props[propName] = defaultProps[propName];
|
||||
}
|
||||
}
|
||||
}
|
||||
return props;
|
||||
})
|
||||
`);
|
||||
|
||||
|
||||
helpers.defineEnumerableProperties = template(`
|
||||
(function (obj, descs) {
|
||||
for (var key in descs) {
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
var _createRawReactElement = (function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, key, props) { return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key, ref: null, props: props, _owner: null }; }; })();
|
||||
var _jsx = (function () { var REACT_ELEMENT_TYPE = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; return function createRawReactElement(type, props, key, children) { var defaultProps = type && type.defaultProps; var childrenLength = arguments.length - 3; if (!props && childrenLength !== 0) { props = {}; } if (props && defaultProps) { for (var propName in defaultProps) { if (props[propName] === void 0) { props[propName] = defaultProps[propName]; } } } else if (!props) { props = defaultProps || {}; } if (childrenLength === 1) { props.children = children; } else if (childrenLength > 1) { var childArray = Array(childrenLength); for (var i = 0; i < childrenLength; i++) { childArray[i] = arguments[i + 3]; } props.children = childArray; } return { $$typeof: REACT_ELEMENT_TYPE, type: type, key: key === undefined ? null : '' + key, ref: null, props: props, _owner: null }; }; })();
|
||||
|
||||
var _ref = _createRawReactElement("foo", null, {});
|
||||
var _ref = _jsx("foo", {});
|
||||
|
||||
function render() {
|
||||
return _ref;
|
||||
@ -9,9 +9,7 @@ function render() {
|
||||
function render() {
|
||||
var text = getText();
|
||||
|
||||
var _ref2 = _createRawReactElement("foo", null, {
|
||||
children: text
|
||||
});
|
||||
var _ref2 = _jsx("foo", {}, void 0, text);
|
||||
|
||||
return function () {
|
||||
return _ref2;
|
||||
|
||||
@ -29,14 +29,12 @@ export default function ({ types: t }) {
|
||||
if (hasRefOrSpread(open.attributes)) return;
|
||||
|
||||
// init
|
||||
let isComponent = true;
|
||||
let props = t.objectExpression([]);
|
||||
let key = t.nullLiteral();
|
||||
let key = null;
|
||||
let type = open.name;
|
||||
|
||||
if (t.isJSXIdentifier(type) && t.react.isCompatTag(type.name)) {
|
||||
type = t.stringLiteral(type.name);
|
||||
isComponent = false;
|
||||
}
|
||||
|
||||
function pushProp(objProps, key, value) {
|
||||
@ -54,24 +52,16 @@ export default function ({ types: t }) {
|
||||
}
|
||||
}
|
||||
|
||||
if (node.children.length) {
|
||||
let args = [type, props];
|
||||
if (key || node.children.length) {
|
||||
let children = t.react.buildChildren(node);
|
||||
if (children.length) {
|
||||
children = children.length === 1 ? children[0] : t.arrayExpression(children);
|
||||
pushProp(props.properties, t.identifier("children"), children);
|
||||
}
|
||||
args.push(
|
||||
key || t.unaryExpression("void", t.numericLiteral(0), true),
|
||||
...children
|
||||
);
|
||||
}
|
||||
|
||||
if (isComponent) {
|
||||
let defProps = t.memberExpression(type, t.identifier("defaultProps"));
|
||||
if (props.properties.length) {
|
||||
props = t.callExpression(file.addHelper("defaultProps"), [defProps, props]);
|
||||
} else {
|
||||
props = t.logicalExpression("||", defProps, props);
|
||||
}
|
||||
}
|
||||
|
||||
let el = t.callExpression(file.addHelper("createRawReactElement"), [type, key, props]);
|
||||
let el = t.callExpression(file.addHelper("jsx"), args);
|
||||
path.replaceWith(el);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,4 +1,3 @@
|
||||
babelHelpers.createRawReactElement("div", null, {
|
||||
children: "foo",
|
||||
children: "bar"
|
||||
});
|
||||
babelHelpers.jsx("div", {
|
||||
children: "foo"
|
||||
}, void 0, "bar");
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
|
||||
babelHelpers.jsx(Baz, {
|
||||
foo: "bar"
|
||||
}));
|
||||
});
|
||||
@ -1 +1 @@
|
||||
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
|
||||
babelHelpers.jsx(Baz, {});
|
||||
@ -1,6 +1,6 @@
|
||||
var TestComponent = React.createClass({
|
||||
render: function () {
|
||||
return babelHelpers.createRawReactElement("span", null, {
|
||||
return babelHelpers.jsx("span", {
|
||||
className: this.props.someProp
|
||||
});
|
||||
}
|
||||
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement("foo", null, {
|
||||
babelHelpers.jsx("foo", {
|
||||
bar: "foo"
|
||||
});
|
||||
@ -1 +1 @@
|
||||
babelHelpers.createRawReactElement("foo", null, {});
|
||||
babelHelpers.jsx("foo", {});
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Foo, "foo" + "baz", babelHelpers.defaultProps(Foo.defaultProps, {
|
||||
babelHelpers.jsx(Foo, {
|
||||
"data-value": "bar"
|
||||
}));
|
||||
}, "foo" + "baz");
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Foo, "foo", babelHelpers.defaultProps(Foo.defaultProps, {
|
||||
babelHelpers.jsx(Foo, {
|
||||
"data-value": "bar"
|
||||
}));
|
||||
}, "foo");
|
||||
@ -1 +1 @@
|
||||
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
|
||||
babelHelpers.jsx(Baz, {}, void 0);
|
||||
@ -1,4 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, {
|
||||
className: "foo",
|
||||
children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps || {})]
|
||||
}));
|
||||
babelHelpers.jsx(Foo, {
|
||||
className: "foo"
|
||||
}, void 0, bar, babelHelpers.jsx(Baz, {}, "baz"));
|
||||
@ -1,4 +1,3 @@
|
||||
babelHelpers.createRawReactElement("div", null, {
|
||||
className: "foo",
|
||||
children: bar
|
||||
});
|
||||
babelHelpers.jsx("div", {
|
||||
className: "foo"
|
||||
}, void 0, bar);
|
||||
@ -1,4 +1,3 @@
|
||||
babelHelpers.createRawReactElement("div", null, {
|
||||
className: "foo",
|
||||
children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps || {})]
|
||||
});
|
||||
babelHelpers.jsx("div", {
|
||||
className: "foo"
|
||||
}, void 0, bar, babelHelpers.jsx(Baz, {}, "baz"));
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
|
||||
babelHelpers.jsx(Baz, {
|
||||
foo: "bar"
|
||||
}));
|
||||
});
|
||||
@ -1 +1 @@
|
||||
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
|
||||
babelHelpers.jsx(Baz, {});
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement("foo", null, {
|
||||
babelHelpers.jsx("foo", {
|
||||
bar: "foo"
|
||||
});
|
||||
@ -1 +1 @@
|
||||
babelHelpers.createRawReactElement("foo", null, {});
|
||||
babelHelpers.jsx("foo", {});
|
||||
@ -1,3 +1,3 @@
|
||||
babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, {
|
||||
babelHelpers.jsx(Foo, {
|
||||
bar: true
|
||||
}));
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user