Use structuredClone to copy detail field in performance.mark and performance.measure (#52483)

Summary:
Pull Request resolved: #52483

Changelog: [internal]

This is a small refinement for `performance.mark` and `performance.measure` to use `structuredClone` to copy the value of the `detail` field, instead of assigning it by reference.

This still doesn't completely fix the semantics of `performance.mark` and `performance.measure`, as the entries returned by those methods aren't referentially equal to the entries reported by `PerformanceObserver` (and the latter don't have the `detail` field yet).

Reviewed By: huntie

Differential Revision: D77863037

fbshipit-source-id: 54d959612ecd560250e49bb0887bb12112a0142f

Author: rubennorte

packages/react-native/src/private/webapis/performance/Performance.js

@@ -18,6 +18,7 @@ import type {
 import type {DetailType, PerformanceMarkOptions} from './UserTiming';
 
 import DOMException from '../errors/DOMException';
+import structuredClone from '../structuredClone/structuredClone';
 import {setPlatformObject} from '../webidl/PlatformObjects';
 import {EventCounts} from './EventTiming';
 import {
@@ -122,6 +123,11 @@ export default class Performance {
       );
     }
 
+    let resolvedDetail;
+    if (markOptions?.detail != null) {
+      resolvedDetail = structuredClone(markOptions.detail);
+    }
+
     let computedStartTime;
     if (NativePerformance?.markWithResult) {
       let resolvedStartTime;
@@ -152,7 +158,7 @@ export default class Performance {
 
     return new PerformanceMark(markName, {
       startTime: computedStartTime,
-      detail: markOptions?.detail,
+      detail: resolvedDetail,
     });
   }
 
@@ -249,7 +255,10 @@ export default class Performance {
             );
           }
 
-          resolvedDetail = startMarkOrOptions.detail;
+          const detail = startMarkOrOptions.detail;
+          if (detail != null) {
+            resolvedDetail = structuredClone(detail);
+          }
 
           break;
         }

packages/react-native/src/private/webapis/performance/__tests__/Performance-itest.js

@@ -75,8 +75,7 @@ describe('Performance', () => {
       });
 
       expect(mark.detail).toEqual(originalDetail);
-      // TODO structuredClone
-      // expect(mark.detail).not.toBe(originalDetail);
+      expect(mark.detail).not.toBe(originalDetail);
     });
 
     it('throws if no name is provided', () => {
@@ -423,8 +422,7 @@ describe('Performance', () => {
       });
 
       expect(measure.detail).toEqual(originalDetail);
-      // TODO structuredClone
-      // expect(measure.detail).not.toBe(originalDetail);
+      expect(measure.detail).not.toBe(originalDetail);
     });
   });
 

packages/react-native/src/private/webapis/performance/__tests__/UserTimingAPI-itest.js

@@ -32,16 +32,16 @@ describe('User Timing API', () => {
 
       expect(callback).not.toHaveBeenCalled();
 
-      const mark1Detail = Symbol('mark1Detail');
+      // const mark1Detail = {mark1: 'detail1'};
       performance.mark('mark1', {
         startTime: 100,
-        detail: mark1Detail,
+        // detail: mark1Detail,
       });
 
-      const mark2Detail = Symbol('mark2Detail');
+      // const mark2Detail = {mark2: 'detail2'};
       performance.mark('mark2', {
         startTime: 200,
-        detail: mark2Detail,
+        // detail: mark2Detail,
       });
 
       expect(callback).not.toHaveBeenCalled();
@@ -61,14 +61,16 @@ describe('User Timing API', () => {
       expect(mark1.startTime).toBe(100);
       expect(mark1.duration).toBe(0);
       // This doesn't work through PerformanceObserver yet
-      // expect(mark1.detail).toBe(mark1Detail);
+      // expect(mark1.detail).toEqual(mark1Detail);
+      // expect(mark1.detail).not.toBe(mark1Detail);
 
       expect(mark2.entryType).toBe('mark');
       expect(mark2.name).toBe('mark2');
       expect(mark2.startTime).toBe(200);
       expect(mark2.duration).toBe(0);
       // This doesn't work through PerformanceObserver yet
-      // expect(mark2.detail).toBe(mark2Detail);
+      // expect(mark2.detail).toEqual(mark2Detail);
+      // expect(mark2.detail).not.toBe(mark2Detail);
     });
   });
 });