Merge pull request #3029 from spicyj/inline2

React inlining: Refactor to reduce parsing cost
This commit is contained in:
Sebastian McKenzie 2015-11-12 22:53:09 -08:00
commit 02e4dcdbe2
20 changed files with 72 additions and 74 deletions

View File

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

View File

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

View File

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

View File

@ -1,4 +1,3 @@
babelHelpers.createRawReactElement("div", null, {
children: "foo",
children: "bar"
});
babelHelpers.jsx("div", {
children: "foo"
}, void 0, "bar");

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
babelHelpers.jsx(Baz, {
foo: "bar"
}));
});

View File

@ -1 +1 @@
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
babelHelpers.jsx(Baz, {});

View File

@ -1,6 +1,6 @@
var TestComponent = React.createClass({
render: function () {
return babelHelpers.createRawReactElement("span", null, {
return babelHelpers.jsx("span", {
className: this.props.someProp
});
}

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement("foo", null, {
babelHelpers.jsx("foo", {
bar: "foo"
});

View File

@ -1 +1 @@
babelHelpers.createRawReactElement("foo", null, {});
babelHelpers.jsx("foo", {});

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement(Foo, "foo" + "baz", babelHelpers.defaultProps(Foo.defaultProps, {
babelHelpers.jsx(Foo, {
"data-value": "bar"
}));
}, "foo" + "baz");

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement(Foo, "foo", babelHelpers.defaultProps(Foo.defaultProps, {
babelHelpers.jsx(Foo, {
"data-value": "bar"
}));
}, "foo");

View File

@ -1 +1 @@
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
babelHelpers.jsx(Baz, {}, void 0);

View File

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

View File

@ -1,4 +1,3 @@
babelHelpers.createRawReactElement("div", null, {
className: "foo",
children: bar
});
babelHelpers.jsx("div", {
className: "foo"
}, void 0, bar);

View File

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

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
babelHelpers.jsx(Baz, {
foo: "bar"
}));
});

View File

@ -1 +1 @@
babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps || {});
babelHelpers.jsx(Baz, {});

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement("foo", null, {
babelHelpers.jsx("foo", {
bar: "foo"
});

View File

@ -1 +1 @@
babelHelpers.createRawReactElement("foo", null, {});
babelHelpers.jsx("foo", {});

View File

@ -1,3 +1,3 @@
babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, {
babelHelpers.jsx(Foo, {
bar: true
}));
});