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 readTypeof(value: Object): mixed {
+  return '$$typeof' in value && hasOwnProperty.call(value, '$$typeof')
+    ? value.$$typeof
+    : undefined;
+}
+
 export function addValueToProperties(
   propertyName: string,
   value: mixed,
@@ -182,11 +188,7 @@ export function addValueToProperties(
           return;
         }
         if (objectName === 'Object') {
-          if (
-            '$$typeof' in value &&
-            hasOwnProperty.call(value, '$$typeof') &&
-            value.$$typeof === REACT_ELEMENT_TYPE
-          ) {
+          if (readTypeof(value) === REACT_ELEMENT_TYPE) {
             // JSX
             const typeName = getComponentNameFromType(value.type) || '\u2026';
             const key = value.key;
@@ -360,9 +362,9 @@ export function addObjectDiffToProperties(
           typeof nextValue === 'object' &&
           prevValue !== null &&
           nextValue !== null &&
-          prevValue.$$typeof === nextValue.$$typeof
+          readTypeof(prevValue) === readTypeof(nextValue)
         ) {
-          if (nextValue.$$typeof === REACT_ELEMENT_TYPE) {
+          if (readTypeof(nextValue) === REACT_ELEMENT_TYPE) {
             if (
               prevValue.type === nextValue.type &&
               prevValue.key === nextValue.key