diff --git a/packages/babel/src/transformation/file/index.js b/packages/babel/src/transformation/file/index.js index e16aacb978..aefe11e40b 100644 --- a/packages/babel/src/transformation/file/index.js +++ b/packages/babel/src/transformation/file/index.js @@ -92,6 +92,7 @@ export default class File { "temporal-undefined", "temporal-assert-defined", "self-global", + "typeof-react-element", "default-props", "instanceof", diff --git a/packages/babel/src/transformation/templates/helper-typeof-react-element.js b/packages/babel/src/transformation/templates/helper-typeof-react-element.js new file mode 100644 index 0000000000..144051982f --- /dev/null +++ b/packages/babel/src/transformation/templates/helper-typeof-react-element.js @@ -0,0 +1 @@ +(typeof Symbol === "function" && Symbol.for && Symbol.for("react.element")) || 0xeac7 diff --git a/packages/babel/src/transformation/transformers/optimisation/react.inline-elements.js b/packages/babel/src/transformation/transformers/optimisation/react.inline-elements.js index 8c7c182ed4..5d43d59cf1 100644 --- a/packages/babel/src/transformation/transformers/optimisation/react.inline-elements.js +++ b/packages/babel/src/transformation/transformers/optimisation/react.inline-elements.js @@ -60,10 +60,6 @@ export var visitor = { objProps.push(t.property("init", key, value)); } - // metadata - pushElemProp("type", type); - pushElemProp("ref", t.literal(null)); - if (node.children.length) { var children = react.buildChildren(node); children = children.length === 1 ? children[0] : t.arrayExpression(children); @@ -84,10 +80,14 @@ export var visitor = { props = t.callExpression(file.addHelper("default-props"), [t.memberExpression(type, t.identifier("defaultProps")), props]); } - pushElemProp("props", props); - - // key + // metadata + pushElemProp("$$typeof", file.addHelper("typeof-react-element")); + pushElemProp("type", type); pushElemProp("key", key); + pushElemProp("ref", t.literal(null)); + + pushElemProp("props", props); + pushElemProp("_owner", t.literal(null)); return obj; } diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.constant-elements/inline-elements/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.constant-elements/inline-elements/expected.js index 338bdb7ee9..486db2f496 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.constant-elements/inline-elements/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.constant-elements/inline-elements/expected.js @@ -1,10 +1,14 @@ "use strict"; +var _typeofReactElement = typeof Symbol === "function" && Symbol["for"] && Symbol["for"]("react.element") || 60103; + var _ref = { + $$typeof: _typeofReactElement, type: "foo", + key: null, ref: null, props: {}, - key: null + _owner: null }; function render() { return _ref; @@ -13,14 +17,16 @@ function render() { function render() { var text = getText(); var _ref2 = { + $$typeof: _typeofReactElement, type: "foo", + key: null, ref: null, props: { children: text }, - key: null + _owner: null }; return function () { return _ref2; }; -} +} \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component-with-props/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component-with-props/expected.js index f12d308ad4..53d45c8c49 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component-with-props/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component-with-props/expected.js @@ -1,10 +1,12 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: null, ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, { foo: "bar" }), - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component/expected.js index ce0544da35..0f7be9b542 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/component/expected.js @@ -1,8 +1,10 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: null, ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, {}), - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element-with-props/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element-with-props/expected.js index dfddc6e5be..adac374b6f 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element-with-props/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element-with-props/expected.js @@ -1,10 +1,12 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "foo", + key: null, ref: null, props: { bar: "foo" }, - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element/expected.js index bd6cead480..88fb7293c7 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/html-element/expected.js @@ -1,8 +1,10 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "foo", + key: null, ref: null, props: {}, - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/key/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/key/expected.js index f3ceb79ca1..d103b14c73 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/key/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/key/expected.js @@ -1,8 +1,10 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Foo, + key: "foo", ref: null, props: babelHelpers.defaultProps(Foo.defaultProps, {}), - key: "foo" + _owner: null }); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-components/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-components/expected.js index cdb8f0053a..ca5c4af20b 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-components/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-components/expected.js @@ -1,16 +1,20 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Foo, + key: null, ref: null, props: babelHelpers.defaultProps(Foo.defaultProps, { children: [bar, { + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: "baz", ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, {}), - key: "baz" + _owner: null }], className: "foo" }), - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-html-elements/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-html-elements/expected.js index 90b1ad9b93..7c59ecd0ba 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-html-elements/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested-html-elements/expected.js @@ -1,11 +1,13 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "div", + key: null, ref: null, props: { children: bar, className: "foo" }, - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested/expected.js index 6d9b9a1f1c..d4cf94ca81 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/nested/expected.js @@ -1,16 +1,20 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "div", + key: null, ref: null, props: { children: [bar, { + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: "baz", ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, {}), - key: "baz" + _owner: null }], className: "foo" }, - key: null -}); + _owner: null +}); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component-with-props/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component-with-props/expected.js index 05d9b4afde..53d45c8c49 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component-with-props/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component-with-props/expected.js @@ -1,10 +1,12 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: null, ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, { foo: "bar" }), - key: null + _owner: null }); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component/expected.js index eebbcef988..0f7be9b542 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-component/expected.js @@ -1,8 +1,10 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Baz, + key: null, ref: null, props: babelHelpers.defaultProps(Baz.defaultProps, {}), - key: null + _owner: null }); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element-with-props/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element-with-props/expected.js index 6e5aec9eec..adac374b6f 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element-with-props/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element-with-props/expected.js @@ -1,10 +1,12 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "foo", + key: null, ref: null, props: { bar: "foo" }, - key: null + _owner: null }); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element/expected.js index 87d6fdbd33..88fb7293c7 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/self-closing-html-element/expected.js @@ -1,8 +1,10 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: "foo", + key: null, ref: null, props: {}, - key: null + _owner: null }); \ No newline at end of file diff --git a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/shorthand-attributes/expected.js b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/shorthand-attributes/expected.js index 452322c2de..0aed56de13 100644 --- a/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/shorthand-attributes/expected.js +++ b/packages/babel/test/fixtures/transformation/optimisation.react.inline-elements/shorthand-attributes/expected.js @@ -1,10 +1,12 @@ "use strict"; ({ + $$typeof: babelHelpers.typeofReactElement, type: Foo, + key: null, ref: null, props: babelHelpers.defaultProps(Foo.defaultProps, { bar: true }), - key: null -}); + _owner: null +}); \ No newline at end of file