Handle platform objects in structuredClone (#51257)

Summary:
Pull Request resolved: #51257

Changelog: [internal]

Fixes the semantics for `structruredClone` when dealing with platform objects (cloning the supported ones and throwing exceptions for the rest).

Reviewed By: hoxyq

Differential Revision: D74574857

fbshipit-source-id: 71b99e9659cf3fb4bed8f431e9b54d2f9f514706

Author: rubennorte

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

@@ -11,9 +11,24 @@
 
 import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
 
+import type {HostInstance} from 'react-native';
+
+import ensureInstance from '../../../__tests__/utilities/ensureInstance';
+import * as Fantom from '@react-native/fantom';
+import * as React from 'react';
+import {View} from 'react-native';
+import setUpIntersectionObserver from 'react-native/src/private/setup/setUpIntersectionObserver';
+import setUpMutationObserver from 'react-native/src/private/setup/setUpMutationObserver';
+import EventTarget from 'react-native/src/private/webapis/dom/events/EventTarget';
+import ReactNativeElement from 'react-native/src/private/webapis/dom/nodes/ReactNativeElement';
 import DOMException from 'react-native/src/private/webapis/errors/DOMException';
+import IntersectionObserver from 'react-native/src/private/webapis/intersectionobserver/IntersectionObserver';
+import MutationObserver from 'react-native/src/private/webapis/mutationobserver/MutationObserver';
 import structuredClone from 'react-native/src/private/webapis/structuredClone/structuredClone';
 
+setUpIntersectionObserver();
+setUpMutationObserver();
+
 function expectDataCloneError(fn: () => mixed) {
   try {
     fn();
@@ -289,4 +304,141 @@ describe('structuredClone', () => {
     // $FlowExpectedError[prop-missing]
     expect([...clone.map.get('set')][0]).toBe(clone.map);
   });
+
+  describe('platform objects', () => {
+    describe('serializable platform objects', () => {
+      it('clones DOMRectReadOnly', () => {
+        let value = new DOMRectReadOnly(1, 2, 3, 4);
+        let clone = structuredClone(value);
+        expect(clone).not.toBe(value);
+        expect(clone).toBeInstanceOf(DOMRectReadOnly);
+        expect(clone).toEqual(value);
+      });
+
+      it('clones DOMRect', () => {
+        let value = new DOMRect(1, 2, 3, 4);
+        let clone = structuredClone(value);
+        expect(clone).not.toBe(value);
+        expect(clone).toBeInstanceOf(DOMRect);
+        expect(clone).toEqual(value);
+      });
+
+      it('clones DOMException', () => {
+        const value = new DOMException('error message', 'Error');
+        const clone = structuredClone(value);
+        expect(clone).not.toBe(value);
+        expect(clone).toBeInstanceOf(DOMException);
+        expect(clone.name).toEqual(value.name);
+        expect(clone.message).toEqual(value.message);
+      });
+    });
+
+    describe('non-serializable platform objects', () => {
+      it('does NOT clone ReadOnlyNode', () => {
+        const ref = React.createRef<HostInstance>();
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<View ref={ref} />);
+        });
+        expect(ref.current).not.toBe(null);
+        expectDataCloneError(() => structuredClone(ref.current));
+      });
+
+      it('does NOT clone EventTarget', () => {
+        expectDataCloneError(() => structuredClone(new EventTarget()));
+      });
+
+      it('does NOT clone XMLHttpRequest', () => {
+        const xhr = new XMLHttpRequest();
+        expectDataCloneError(() => structuredClone(xhr));
+      });
+
+      it('does NOT clone performance', () => {
+        expectDataCloneError(() => structuredClone(performance));
+      });
+
+      it('does NOT clone performance.memory', () => {
+        // $FlowExpectedError[prop-missing]
+        expectDataCloneError(() => structuredClone(performance.memory));
+      });
+
+      it('does NOT clone performance.rnStartupTiming', () => {
+        expectDataCloneError(() =>
+          // $FlowExpectedError[prop-missing]
+          structuredClone(performance.rnStartupTiming),
+        );
+      });
+
+      it('does NOT clone PerformanceEntry', () => {
+        // $FlowExpectedError[prop-missing]
+        expectDataCloneError(() => structuredClone(performance.mark('foo')));
+      });
+
+      it('does NOT clone IntersectionObserver', () => {
+        expectDataCloneError(() =>
+          structuredClone(new IntersectionObserver(() => {})),
+        );
+      });
+
+      it('does NOT clone IntersectionObserverEntry', () => {
+        const ref = React.createRef<HostInstance>();
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<View ref={ref} />);
+        });
+        expect(ref.current).not.toBe(null);
+
+        const entries: Array<mixed> = [];
+        Fantom.runTask(() => {
+          const observer = new IntersectionObserver(e => {
+            entries.push(...e);
+          });
+
+          observer.observe(ensureInstance(ref.current, ReactNativeElement));
+
+          Fantom.scheduleTask(() => {
+            observer.disconnect();
+          });
+        });
+
+        expectDataCloneError(() => structuredClone(entries[0]));
+      });
+
+      it('does NOT clone MutationObserver', () => {
+        expectDataCloneError(() =>
+          structuredClone(new MutationObserver(() => {})),
+        );
+      });
+
+      it('does NOT clone MutationRecord', () => {
+        const ref = React.createRef<HostInstance>();
+        const root = Fantom.createRoot();
+        Fantom.runTask(() => {
+          root.render(<View ref={ref} />);
+        });
+        expect(ref.current).not.toBe(null);
+
+        const records: Array<mixed> = [];
+        Fantom.runTask(() => {
+          const observer = new MutationObserver(e => {
+            records.push(...e);
+          });
+
+          observer.observe(ensureInstance(ref.current, ReactNativeElement), {
+            childList: true,
+          });
+        });
+
+        Fantom.runTask(() => {
+          root.render(
+            <View>
+              <View />
+            </View>,
+          );
+        });
+
+        expectDataCloneError(() => structuredClone(records[0]));
+      });
+    });
+  });
 });

packages/react-native/src/private/webapis/structuredClone/structuredClone.js

@@ -10,6 +10,10 @@
  */
 
 import DOMException from '../errors/DOMException';
+import {
+  getPlatformObjectClone,
+  isPlatformObject,
+} from '../webidl/PlatformObjects';
 
 const VALID_ERROR_NAMES = new Set([
   'Error',
@@ -128,6 +132,23 @@ function structuredCloneInternal<T>(value: T): T {
     return result;
   }
 
+  if (value instanceof RegExp) {
+    const result = new RegExp(value.source, value.flags);
+    memory.set(value, result);
+
+    // $FlowExpectedError[incompatible-return] we know result is T
+    return result;
+  }
+
+  // We need to check platform objects before `Error` because `DOMException`
+  // is a platform object AND an `Error` subclass.
+  const clone = getPlatformObjectClone(value);
+  if (clone != null) {
+    const result = clone(value);
+    memory.set(value, result);
+    return result;
+  }
+
   if (value instanceof Error) {
     const result = value.cause
       ? new Error(value.message, {cause: value.cause})
@@ -146,16 +167,8 @@ function structuredCloneInternal<T>(value: T): T {
     return result;
   }
 
-  if (value instanceof RegExp) {
-    const result = new RegExp(value.source, value.flags);
-    memory.set(value, result);
-
-    // $FlowExpectedError[incompatible-return] we know result is T
-    return result;
-  }
-
   // Known non-serializable objects.
-  if (isNonSerializableObject(value)) {
+  if (isNonSerializableObject(value) || isPlatformObject(value)) {
     throw new DOMException(
       `Failed to execute 'structuredClone' on 'Window': ${String(value)} could not be cloned.`,
       'DataCloneError',
@@ -194,7 +207,6 @@ function structuredCloneInternal<T>(value: T): T {
  *
  * Known limitations:
  * - It does not support transfering values.
- * - it does not support cloning platform objects like `DOMRect` and `DOMException`.
  */
 export default function structuredClone<T>(value: T): T {
   try {