Merge pull request #2352 from spicyj/jsx-xss

Include $$typeof on inlined React elements

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",
 

packages/babel/src/transformation/templates/helper-typeof-react-element.js

@@ -0,0 +1 @@
+(typeof Symbol === "function" && Symbol.for && Symbol.for("react.element")) || 0xeac7

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);
+    // metadata
-
+    pushElemProp("$$typeof", file.addHelper("typeof-react-element"));
-    // key
+    pushElemProp("type", type);
     pushElemProp("key", key);
+    pushElemProp("ref", t.literal(null));
+
+    pushElemProp("props", props);
+    pushElemProp("_owner", t.literal(null));
 
     return obj;
   }

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,12 +17,14 @@ 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;

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

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

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

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

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

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

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

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

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

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

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

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

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