Handle opaque origin in props

Author: eps1lon

packages/react-reconciler/src/__tests__/ReactPerformanceTrack-test.js

@@ -532,12 +532,8 @@ describe('ReactPerformanceTracks', () => {
     };
 
     class Window {}
-
-    class OpaqueOriginHTMLIFrameElement {
-      constructor(textContent) {
-        this.textContent = textContent;
-      }
-      contentWindow = new Proxy(new Window(), {
+    const createOpaqueOriginWindow = () => {
+      return new Proxy(new Window(), {
         get(target, prop) {
           if (prop === Symbol.toStringTag) {
             return target[Symbol.toStringTag];
@@ -550,14 +546,24 @@ describe('ReactPerformanceTracks', () => {
           );
         },
       });
+    };
+
+    class OpaqueOriginHTMLIFrameElement {
+      constructor(textContent) {
+        this.textContent = textContent;
+      }
+      contentWindow = createOpaqueOriginWindow();
       nodeType = 1;
       [Symbol.toStringTag] = 'HTMLIFrameElement';
     }
 
     Scheduler.unstable_advanceTime(1);
     await act(() => {
       ReactNoop.render(
-        <App container={new OpaqueOriginHTMLIFrameElement('foo')} />,
+        <App
+          container={new OpaqueOriginHTMLIFrameElement('foo')}
+          contentWindow={createOpaqueOriginWindow()}
+        />,
       );
     });
 
@@ -584,7 +590,10 @@ describe('ReactPerformanceTracks', () => {
 
     await act(() => {
       ReactNoop.render(
-        <App container={new OpaqueOriginHTMLIFrameElement('bar')} />,
+        <App
+          container={new OpaqueOriginHTMLIFrameElement('bar')}
+          contentWindow={createOpaqueOriginWindow()}
+        />,
       );
     });
 
@@ -605,6 +614,10 @@ describe('ReactPerformanceTracks', () => {
                 ['+   contentWindow', 'Window'],
                 ['+   nodeType', '1'],
                 ['+   textContent', '"bar"'],
+                [
+                  '  contentWindow',
+                  'Referentially unequal but deeply equal objects. Consider memoization.',
+                ],
               ],
               tooltipText: 'App',
               track: 'Components ⚛',

packages/shared/ReactPerformanceTrackProperties.js

@@ -82,6 +82,12 @@ export function addObjectToProperties(
   }
 }
 
+function readReactElementTypeof(value: Object): mixed {
+  return '$$typeof' in value && hasOwnProperty.call(value, '$$typeof')
+    ? value.$$typeof
+    : undefined;
+}
+
 export function addValueToProperties(
   propertyName: string,
   value: mixed,
@@ -96,6 +102,65 @@ export function addValueToProperties(
         desc = 'null';
         break;
       } else {
+        if (readReactElementTypeof(value) === REACT_ELEMENT_TYPE) {
+          // JSX
+          const typeName = getComponentNameFromType(value.type) || '\u2026';
+          const key = value.key;
+          const props: any = value.props;
+          const propsKeys = Object.keys(props);
+          const propsLength = propsKeys.length;
+          if (key == null && propsLength === 0) {
+            desc = '<' + typeName + ' />';
+            break;
+          }
+          if (
+            indent < 3 ||
+            (propsLength === 1 && propsKeys[0] === 'children' && key == null)
+          ) {
+            desc = '<' + typeName + ' \u2026 />';
+            break;
+          }
+          properties.push([
+            prefix + '\xa0\xa0'.repeat(indent) + propertyName,
+            '<' + typeName,
+          ]);
+          if (key !== null) {
+            addValueToProperties('key', key, properties, indent + 1, prefix);
+          }
+          let hasChildren = false;
+          let addedProperties = 0;
+          for (const propKey in props) {
+            addedProperties++;
+            if (propKey === 'children') {
+              if (
+                props.children != null &&
+                (!isArray(props.children) || props.children.length > 0)
+              ) {
+                hasChildren = true;
+              }
+            } else if (
+              hasOwnProperty.call(props, propKey) &&
+              propKey[0] !== '_'
+            ) {
+              addValueToProperties(
+                propKey,
+                props[propKey],
+                properties,
+                indent + 1,
+                prefix,
+              );
+            }
+
+            if (addedProperties >= OBJECT_WIDTH_LIMIT) {
+              break;
+            }
+          }
+          properties.push([
+            '',
+            hasChildren ? '>\u2026</' + typeName + '>' : '/>',
+          ]);
+          return;
+        }
         // $FlowFixMe[method-unbinding]
         const objectToString = Object.prototype.toString.call(value);
         let objectName = objectToString.slice(8, objectToString.length - 1);
@@ -179,70 +244,6 @@ export function addValueToProperties(
           return;
         }
         if (objectName === 'Object') {
-          if (
-            '$$typeof' in value &&
-            hasOwnProperty.call(value, '$$typeof') &&
-            value.$$typeof === REACT_ELEMENT_TYPE
-          ) {
-            // JSX
-            const typeName = getComponentNameFromType(value.type) || '\u2026';
-            const key = value.key;
-            const props: any = value.props;
-            const propsKeys = Object.keys(props);
-            const propsLength = propsKeys.length;
-            if (key == null && propsLength === 0) {
-              desc = '<' + typeName + ' />';
-              break;
-            }
-            if (
-              indent < 3 ||
-              (propsLength === 1 && propsKeys[0] === 'children' && key == null)
-            ) {
-              desc = '<' + typeName + ' \u2026 />';
-              break;
-            }
-            properties.push([
-              prefix + '\xa0\xa0'.repeat(indent) + propertyName,
-              '<' + typeName,
-            ]);
-            if (key !== null) {
-              addValueToProperties('key', key, properties, indent + 1, prefix);
-            }
-            let hasChildren = false;
-            let addedProperties = 0;
-            for (const propKey in props) {
-              addedProperties++;
-              if (propKey === 'children') {
-                if (
-                  props.children != null &&
-                  (!isArray(props.children) || props.children.length > 0)
-                ) {
-                  hasChildren = true;
-                }
-              } else if (
-                hasOwnProperty.call(props, propKey) &&
-                propKey[0] !== '_'
-              ) {
-                addValueToProperties(
-                  propKey,
-                  props[propKey],
-                  properties,
-                  indent + 1,
-                  prefix,
-                );
-              }
-
-              if (addedProperties >= OBJECT_WIDTH_LIMIT) {
-                break;
-              }
-            }
-            properties.push([
-              '',
-              hasChildren ? '>\u2026</' + typeName + '>' : '/>',
-            ]);
-            return;
-          }
-
           const proto: any = Object.getPrototypeOf(value);
           if (proto && typeof proto.constructor === 'function') {
             objectName = proto.constructor.name;
@@ -357,9 +358,10 @@ export function addObjectDiffToProperties(
           typeof nextValue === 'object' &&
           prevValue !== null &&
           nextValue !== null &&
-          prevValue.$$typeof === nextValue.$$typeof
+          readReactElementTypeof(prevValue) ===
+            readReactElementTypeof(nextValue)
         ) {
-          if (nextValue.$$typeof === REACT_ELEMENT_TYPE) {
+          if (readReactElementTypeof(nextValue) === REACT_ELEMENT_TYPE) {
             if (
               prevValue.type === nextValue.type &&
               prevValue.key === nextValue.key