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.)
2015-11-10 21:10:06 -08:00
parent 3f41023e02
commit 3cad287233
19 changed files with 68 additions and 204 deletions
--- 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);
      }
    }
  };
--- 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"
+});
--- 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
-});
+babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
+  foo: "bar"
+}));
--- 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);
--- 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
+    });
  }
-});
+});
--- 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"
 });
--- 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
-});
+babelHelpers.createRawReactElement("foo", null, {});
--- 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"
+}));
--- 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);
--- 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)]
+}));
--- 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
+});
--- 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)]
+});
--- 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
-});
+babelHelpers.createRawReactElement(Baz, null, babelHelpers.defaultProps(Baz.defaultProps, {
+  foo: "bar"
+}));
--- 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);
--- 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"
 });
--- 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
-});
+babelHelpers.createRawReactElement("foo", null, {});
--- 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
-});
+babelHelpers.createRawReactElement(Foo, null, babelHelpers.defaultProps(Foo.defaultProps, {
+  bar: true
+}));