From 3cad2872335e2130f2ff6335027617ebbe9b5a46 Mon Sep 17 00:00:00 2001 From: Ben Alpert Date: Tue, 10 Nov 2015 21:10:06 -0800 Subject: [PATCH] Use a helper function for React "inlining" Either due to lower parsing costs or better type inference, this seems to perform better than direct object inlining. (All along, the main win was skipping a loop through props, not avoiding a function call.) --- packages/babel-helpers/src/helpers.js | 18 ++++++++++-- .../inline-elements/expected.js | 29 ++++++------------- .../src/index.js | 17 ++--------- .../children-exists/expected.js | 15 +++------- .../component-with-props/expected.js | 13 ++------- .../inline-elements/component/expected.js | 9 +----- .../expression-container/expected.js | 15 +++------- .../html-element-with-props/expected.js | 11 ++----- .../inline-elements/html-element/expected.js | 9 +----- .../fixtures/inline-elements/key/expected.js | 13 ++------- .../inline-elements/multiline/expected.js | 9 +----- .../nested-components/expected.js | 22 +++----------- .../nested-html-elements/expected.js | 15 +++------- .../inline-elements/nested/expected.js | 22 +++----------- .../expected.js | 13 ++------- .../self-closing-component/expected.js | 9 +----- .../expected.js | 11 ++----- .../self-closing-html-element/expected.js | 9 +----- .../shorthand-attributes/expected.js | 13 ++------- 19 files changed, 68 insertions(+), 204 deletions(-) diff --git a/packages/babel-helpers/src/helpers.js b/packages/babel-helpers/src/helpers.js index be06788e83..fc4b8ebbf2 100644 --- a/packages/babel-helpers/src/helpers.js +++ b/packages/babel-helpers/src/helpers.js @@ -6,8 +6,22 @@ export let _typeof = template(` }); `); -export let typeofReactElement = template(` - (typeof Symbol === "function" && Symbol.for && Symbol.for("react.element")) || 0xeac7; +export let createRawReactElement = template(` + (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, + }; + }; + + })() `); export let asyncToGenerator = template(` diff --git a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/expected.js b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/expected.js index 3b37338633..39a276333f 100644 --- a/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/expected.js +++ b/packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/inline-elements/expected.js @@ -1,30 +1,19 @@ -var _typeofReactElement = typeof Symbol === "function" && Symbol.for && Symbol.for("react.element") || 0xeac7; +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 _ref = _createRawReactElement("foo", null, {}); -var _ref = { - $$typeof: _typeofReactElement, - type: "foo", - key: null, - ref: null, - props: {}, - _owner: null -}; function render() { return _ref; } function render() { var text = getText(); - var _ref2 = { - $$typeof: _typeofReactElement, - type: "foo", - key: null, - ref: null, - props: { - children: text - }, - _owner: null - }; + + var _ref2 = _createRawReactElement("foo", null, { + children: text + }); + return function () { return _ref2; }; -} +} \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/src/index.js b/packages/babel-plugin-transform-react-inline-elements/src/index.js index e7be6d181f..93e7564e57 100644 --- a/packages/babel-plugin-transform-react-inline-elements/src/index.js +++ b/packages/babel-plugin-transform-react-inline-elements/src/index.js @@ -24,7 +24,6 @@ export default function ({ types: t }) { // init let isComponent = true; let props = t.objectExpression([]); - let obj = t.objectExpression([]); let key = t.nullLiteral(); let type = open.name; @@ -33,10 +32,6 @@ export default function ({ types: t }) { isComponent = false; } - function pushElemProp(key, value) { - pushProp(obj.properties, t.identifier(key), value); - } - function pushProp(objProps, key, value) { if (t.isJSXExpressionContainer(value)) value = value.expression; objProps.push(t.objectProperty(key, value)); @@ -70,16 +65,8 @@ export default function ({ types: t }) { } } - // metadata - pushElemProp("$$typeof", file.addHelper("typeofReactElement")); - pushElemProp("type", type); - pushElemProp("key", key); - pushElemProp("ref", t.nullLiteral()); - - pushElemProp("props", props); - pushElemProp("_owner", t.nullLiteral()); - - path.replaceWith(obj); + let el = t.callExpression(file.addHelper("createRawReactElement"), [type, key, props]); + path.replaceWith(el); } } }; diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/children-exists/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/children-exists/expected.js index e9eb914ecc..9d51047ee1 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/children-exists/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/children-exists/expected.js @@ -1,11 +1,4 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "div", - key: null, - ref: null, - props: { - children: "foo", - children: "bar" - }, - _owner: null -}); +babelHelpers.createRawReactElement("div", null, { + children: "foo", + children: "bar" +}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component-with-props/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component-with-props/expected.js index 83084ab60d..667a95a77a 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component-with-props/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component-with-props/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: null, - ref: null, - props: babelHelpers.defaultProps(Baz.defaultProps, { - foo: "bar" - }), - _owner: null -}); \ No newline at end of file +babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, { + foo: "bar" +})); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js index 629cd8964d..1c42c05967 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/component/expected.js @@ -1,8 +1 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: null, - ref: null, - props: Baz.defaultProps, - _owner: null -}); +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/expression-container/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/expression-container/expected.js index 7764f4d7d7..6adbdc7bf0 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/expression-container/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/expression-container/expected.js @@ -1,14 +1,7 @@ var TestComponent = React.createClass({ render: function () { - return { - $$typeof: babelHelpers.typeofReactElement, - type: "span", - key: null, - ref: null, - props: { - className: this.props.someProp - }, - _owner: null - }; + return babelHelpers.createRawReactElement("span", null, { + className: this.props.someProp + }); } -}); +}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element-with-props/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element-with-props/expected.js index ebca291106..9f767adf19 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element-with-props/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element-with-props/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "foo", - key: null, - ref: null, - props: { - bar: "foo" - }, - _owner: null +babelHelpers.createRawReactElement("foo", null, { + bar: "foo" }); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element/expected.js index ddeb8c32e4..dc4b3c9bea 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/html-element/expected.js @@ -1,8 +1 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "foo", - key: null, - ref: null, - props: {}, - _owner: null -}); \ No newline at end of file +babelHelpers.createRawReactElement("foo", null, {}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key/expected.js index 98d26d8cb7..d3c8589af3 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/key/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Foo, - key: "foo", - ref: null, - props: babelHelpers.defaultProps(Foo.defaultProps, { - "data-value": "bar" - }), - _owner: null -}); +babelHelpers.createRawReactElement(Foo, "foo", babelHelpers.defaultProps(Foo.defaultProps, { + "data-value": "bar" +})); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js index 629cd8964d..1c42c05967 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/multiline/expected.js @@ -1,8 +1 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: null, - ref: null, - props: Baz.defaultProps, - _owner: null -}); +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js index aa56b62cad..6f84850b3a 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-components/expected.js @@ -1,18 +1,4 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Foo, - key: null, - ref: null, - props: babelHelpers.defaultProps(Foo.defaultProps, { - className: "foo", - children: [bar, { - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: "baz", - ref: null, - props: Baz.defaultProps, - _owner: null - }] - }), - _owner: null -}); +babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, { + className: "foo", + children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps)] +})); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-html-elements/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-html-elements/expected.js index 182d87c4a3..cdbb32778b 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-html-elements/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested-html-elements/expected.js @@ -1,11 +1,4 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "div", - key: null, - ref: null, - props: { - className: "foo", - children: bar - }, - _owner: null -}); +babelHelpers.createRawReactElement("div", null, { + className: "foo", + children: bar +}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js index 77f52b9fae..105760a00a 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/nested/expected.js @@ -1,18 +1,4 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "div", - key: null, - ref: null, - props: { - className: "foo", - children: [bar, { - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: "baz", - ref: null, - props: Baz.defaultProps, - _owner: null - }] - }, - _owner: null -}); +babelHelpers.createRawReactElement("div", null, { + className: "foo", + children: [bar, babelHelpers.createRawReactElement(Baz, "baz", Baz.defaultProps)] +}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component-with-props/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component-with-props/expected.js index 83084ab60d..667a95a77a 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component-with-props/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component-with-props/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: null, - ref: null, - props: babelHelpers.defaultProps(Baz.defaultProps, { - foo: "bar" - }), - _owner: null -}); \ No newline at end of file +babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, { + foo: "bar" +})); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js index 629cd8964d..1c42c05967 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-component/expected.js @@ -1,8 +1 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Baz, - key: null, - ref: null, - props: Baz.defaultProps, - _owner: null -}); +babelHelpers.createRawReactElement(Baz, null, Baz.defaultProps); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element-with-props/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element-with-props/expected.js index ebca291106..9f767adf19 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element-with-props/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element-with-props/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "foo", - key: null, - ref: null, - props: { - bar: "foo" - }, - _owner: null +babelHelpers.createRawReactElement("foo", null, { + bar: "foo" }); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element/expected.js index ddeb8c32e4..dc4b3c9bea 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/self-closing-html-element/expected.js @@ -1,8 +1 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: "foo", - key: null, - ref: null, - props: {}, - _owner: null -}); \ No newline at end of file +babelHelpers.createRawReactElement("foo", null, {}); \ No newline at end of file diff --git a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/shorthand-attributes/expected.js b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/shorthand-attributes/expected.js index ce4365ed6d..d338020048 100644 --- a/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/shorthand-attributes/expected.js +++ b/packages/babel-plugin-transform-react-inline-elements/test/fixtures/inline-elements/shorthand-attributes/expected.js @@ -1,10 +1,3 @@ -({ - $$typeof: babelHelpers.typeofReactElement, - type: Foo, - key: null, - ref: null, - props: babelHelpers.defaultProps(Foo.defaultProps, { - bar: true - }), - _owner: null -}); \ No newline at end of file +babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, { + bar: true +})); \ No newline at end of file