Introduce concept of platform objects and serialization (#51256)

rubennorte · facebook-github-bot · commit 6454d2f0db95 · 2025-05-13T14:29:01.000-07:00
Summary: Pull Request resolved: #51256 Changelog: [internal] This is just in preparation for `structuredClone` handling the cloning (or not) of platform objects correctly. It marks all existing Web platform objects in RN as such, and defines the clone method for `DOMRectReadOnly`, `DOMRect` and `DOMException`. Reviewed By: hoxyq Differential Revision: D74574856 fbshipit-source-id: 9e9647fcaafcc1d32fb36e5ee40167871572c544
diff --git a/packages/react-native/src/private/webapis/dom/events/Event.js b/packages/react-native/src/private/webapis/dom/events/Event.js
@@ -17,6 +17,7 @@
 
 import type EventTarget from './EventTarget';
 
+import {setPlatformObject} from '../../webidl/PlatformObjects';
 import {
   COMPOSED_PATH_KEY,
   CURRENT_TARGET_KEY,
@@ -234,3 +235,5 @@ export type EventPhase =
   | (typeof Event)['CAPTURING_PHASE']
   | (typeof Event)['AT_TARGET']
   | (typeof Event)['BUBBLING_PHASE'];
+
+setPlatformObject(Event);
diff --git a/packages/react-native/src/private/webapis/dom/events/EventTarget.js b/packages/react-native/src/private/webapis/dom/events/EventTarget.js
@@ -15,6 +15,7 @@
 
 import type {EventPhase} from './Event';
 
+import {setPlatformObject} from '../../webidl/PlatformObjects';
 import Event from './Event';
 import {
   getStopImmediatePropagationFlag,
@@ -229,6 +230,8 @@ export default class EventTarget {
   }
 }
 
+setPlatformObject(EventTarget);
+
 function validateCallback(callback: EventListener, methodName: string): void {
   if (typeof callback !== 'function' && typeof callback !== 'object') {
     throw new TypeError(
diff --git a/packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js b/packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js
@@ -15,7 +15,7 @@ import type {InstanceHandle} from './internals/NodeInternals';
 import type ReactNativeDocument from './ReactNativeDocument';
 import type ReadOnlyElement from './ReadOnlyElement';
 
-import * as ReactNativeFeatureFlags from '../../../featureflags/ReactNativeFeatureFlags';
+import {setPlatformObject} from '../../webidl/PlatformObjects';
 import {createNodeList} from '../oldstylecollections/NodeList';
 import {
   getNativeNodeReference,
@@ -288,6 +288,8 @@ export default class ReadOnlyNode {
   static DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: number = 32;
 }
 
+setPlatformObject(ReadOnlyNode);
+
 export function getChildNodes(
   node: ReadOnlyNode,
 ): $ReadOnlyArray<ReadOnlyNode> {
diff --git a/packages/react-native/src/private/webapis/dom/oldstylecollections/HTMLCollection.js b/packages/react-native/src/private/webapis/dom/oldstylecollections/HTMLCollection.js
@@ -13,6 +13,7 @@
 import type {ArrayLike} from '../../utils/ArrayLikeUtils';
 
 import {createValueIterator} from '../../utils/ArrayLikeUtils';
+import {setPlatformObject} from '../../webidl/PlatformObjects';
 
 // IMPORTANT: The type definition for this module is defined in `HTMLCollection.js.flow`
 // because Flow only supports indexers in classes in declaration files.
@@ -69,6 +70,8 @@ export default class HTMLCollection<T> implements Iterable<T>, ArrayLike<T> {
   }
 }
 
+setPlatformObject(HTMLCollection);
+
 /**
  * This is an internal method to create instances of `HTMLCollection`,
  * which avoids leaking its constructor to end users.
diff --git a/packages/react-native/src/private/webapis/dom/oldstylecollections/NodeList.js b/packages/react-native/src/private/webapis/dom/oldstylecollections/NodeList.js
@@ -17,6 +17,7 @@ import {
   createKeyIterator,
   createValueIterator,
 } from '../../utils/ArrayLikeUtils';
+import {setPlatformObject} from '../../webidl/PlatformObjects';
 
 // IMPORTANT: The Flow type definition for this module is defined in `NodeList.js.flow`
 // because Flow only supports indexers in classes in declaration files.
@@ -93,6 +94,8 @@ export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {
   }
 }
 
+setPlatformObject(NodeList);
+
 /**
  * This is an internal method to create instances of `NodeList`,
  * which avoids leaking its constructor to end users.
diff --git a/packages/react-native/src/private/webapis/errors/DOMException.js b/packages/react-native/src/private/webapis/errors/DOMException.js
@@ -16,6 +16,8 @@
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 const ERROR_NAME_TO_ERROR_CODE_MAP: {[string]: number} = {
   IndexSizeError: 1,
   HierarchyRequestError: 3,
@@ -159,3 +161,7 @@ for (const code in ERROR_CODES) {
     value: ERROR_CODES[code],
   });
 }
+
+setPlatformObject(DOMException, {
+  clone: exception => new DOMException(exception.message, exception.name),
+});
diff --git a/packages/react-native/src/private/webapis/geometry/DOMRect.js b/packages/react-native/src/private/webapis/geometry/DOMRect.js
@@ -14,6 +14,7 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import DOMRectReadOnly, {type DOMRectInit} from './DOMRectReadOnly';
 
 // flowlint unsafe-getters-setters:off
@@ -80,3 +81,7 @@ export default class DOMRect extends DOMRectReadOnly {
     return new DOMRect(rect.x, rect.y, rect.width, rect.height);
   }
 }
+
+setPlatformObject(DOMRect, {
+  clone: rect => new DOMRect(rect.x, rect.y, rect.width, rect.height),
+});
diff --git a/packages/react-native/src/private/webapis/geometry/DOMRectList.js b/packages/react-native/src/private/webapis/geometry/DOMRectList.js
@@ -14,6 +14,7 @@ import type {ArrayLike} from '../utils/ArrayLikeUtils';
 import type DOMRectReadOnly from './DOMRectReadOnly';
 
 import {createValueIterator} from '../utils/ArrayLikeUtils';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 // IMPORTANT: The Flow type definition for this module is defined in `DOMRectList.js.flow`
 // because Flow only supports indexers in classes in declaration files.
@@ -63,6 +64,8 @@ export default class DOMRectList implements Iterable<DOMRectReadOnly> {
   }
 }
 
+setPlatformObject(DOMRectList);
+
 /**
  * This is an internal method to create instances of `DOMRectList`,
  * which avoids leaking its constructor to end users.
diff --git a/packages/react-native/src/private/webapis/geometry/DOMRectReadOnly.js b/packages/react-native/src/private/webapis/geometry/DOMRectReadOnly.js
@@ -14,6 +14,8 @@
  * licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).
  */
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 // flowlint sketchy-null:off, unsafe-getters-setters:off
 
 export interface DOMRectInit {
@@ -186,3 +188,7 @@ export default class DOMRectReadOnly {
     this.#height = castToNumber(height);
   }
 }
+
+setPlatformObject(DOMRectReadOnly, {
+  clone: rect => new DOMRectReadOnly(rect.x, rect.y, rect.width, rect.height),
+});
diff --git a/packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserver.js b/packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserver.js
@@ -14,6 +14,7 @@ import type {IntersectionObserverId} from './internals/IntersectionObserverManag
 import type IntersectionObserverEntry from './IntersectionObserverEntry';
 
 import ReactNativeElement from '../dom/nodes/ReactNativeElement';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import * as IntersectionObserverManager from './internals/IntersectionObserverManager';
 
 export type IntersectionObserverCallback = (
@@ -250,6 +251,8 @@ export default class IntersectionObserver {
   }
 }
 
+setPlatformObject(IntersectionObserver);
+
 /**
  * Converts the user defined `threshold` value into an array of sorted valid
  * threshold options for `IntersectionObserver` (double ∈ [0, 1]).
diff --git a/packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js b/packages/react-native/src/private/webapis/intersectionobserver/IntersectionObserverEntry.js
@@ -14,6 +14,7 @@ import type ReactNativeElement from '../dom/nodes/ReactNativeElement';
 import type {NativeIntersectionObserverEntry} from './specs/NativeIntersectionObserver';
 
 import DOMRectReadOnly from '../geometry/DOMRectReadOnly';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 /**
  * The [`IntersectionObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserverEntry)
@@ -159,6 +160,8 @@ export default class IntersectionObserverEntry {
   }
 }
 
+setPlatformObject(IntersectionObserverEntry);
+
 export function createIntersectionObserverEntry(
   entry: NativeIntersectionObserverEntry,
   target: ReactNativeElement,
diff --git a/packages/react-native/src/private/webapis/mutationobserver/MutationObserver.js b/packages/react-native/src/private/webapis/mutationobserver/MutationObserver.js
@@ -14,6 +14,7 @@ import type {MutationObserverId} from './internals/MutationObserverManager';
 import type MutationRecord from './MutationRecord';
 
 import ReactNativeElement from '../dom/nodes/ReactNativeElement';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import * as MutationObserverManager from './internals/MutationObserverManager';
 import nullthrows from 'nullthrows';
 
@@ -171,3 +172,5 @@ export default class MutationObserver {
     return this._mutationObserverId;
   }
 }
+
+setPlatformObject(MutationObserver);
diff --git a/packages/react-native/src/private/webapis/mutationobserver/MutationRecord.js b/packages/react-native/src/private/webapis/mutationobserver/MutationRecord.js
@@ -15,6 +15,7 @@ import type ReadOnlyNode from '../dom/nodes/ReadOnlyNode';
 import type {NativeMutationRecord} from './specs/NativeMutationObserver';
 
 import NodeList, {createNodeList} from '../dom/oldstylecollections/NodeList';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 
 export type MutationType = 'attributes' | 'characterData' | 'childList';
 
@@ -75,6 +76,8 @@ export default class MutationRecord {
   }
 }
 
+setPlatformObject(MutationRecord);
+
 export function createMutationRecord(
   entry: NativeMutationRecord,
 ): MutationRecord {
diff --git a/packages/react-native/src/private/webapis/performance/MemoryInfo.js b/packages/react-native/src/private/webapis/performance/MemoryInfo.js
@@ -11,6 +11,8 @@
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 type MemoryInfoLike = {
   jsHeapSizeLimit: ?number,
   totalJSHeapSize: ?number,
@@ -52,3 +54,5 @@ export default class MemoryInfo {
     return this.#usedJSHeapSize;
   }
 }
+
+setPlatformObject(MemoryInfo);
diff --git a/packages/react-native/src/private/webapis/performance/Performance.js b/packages/react-native/src/private/webapis/performance/Performance.js
@@ -17,6 +17,7 @@ import type {
 } from './PerformanceEntry';
 import type {DetailType, PerformanceMarkOptions} from './UserTiming';
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import {EventCounts} from './EventTiming';
 import {
   performanceEntryTypeToRaw,
@@ -283,3 +284,5 @@ export default class Performance {
     ).map(rawToPerformanceEntry);
   }
 }
+
+setPlatformObject(Performance);
diff --git a/packages/react-native/src/private/webapis/performance/PerformanceEntry.js b/packages/react-native/src/private/webapis/performance/PerformanceEntry.js
@@ -10,6 +10,8 @@
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 export type DOMHighResTimeStamp = number;
 export type PerformanceEntryType =
   | 'mark'
@@ -70,4 +72,6 @@ export class PerformanceEntry {
   }
 }
 
+setPlatformObject(PerformanceEntry);
+
 export type PerformanceEntryList = $ReadOnlyArray<PerformanceEntry>;
diff --git a/packages/react-native/src/private/webapis/performance/ReactNativeStartupTiming.js b/packages/react-native/src/private/webapis/performance/ReactNativeStartupTiming.js
@@ -11,6 +11,8 @@
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 type ReactNativeStartupTimingLike = {
   startTime: ?number,
   endTime: ?number,
@@ -89,3 +91,5 @@ export default class ReactNativeStartupTiming {
     return this.#executeJavaScriptBundleEntryPointEnd;
   }
 }
+
+setPlatformObject(ReactNativeStartupTiming);
diff --git a/packages/react-native/src/private/webapis/webidl/PlatformObjects.js b/packages/react-native/src/private/webapis/webidl/PlatformObjects.js
@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict
+ * @format
+ */
+
+const IS_PLATFORM_OBJECT_KEY = Symbol('isPlatformObject');
+const CLONE_PLATFORM_OBJECT_KEY = Symbol('clonePlatformObject');
+
+/**
+ * Marks the given object or instances of the given class as platform objects.
+ *
+ * Optionally, it sets the clone function for that platform object, which is a
+ * simplification of the serializable attribute of the Web interface.
+ */
+export const setPlatformObject: (<T: interface {}>(
+  obj: Class<T>,
+  options?: {clone: T => T},
+) => void) &
+  (<T: interface {}>(obj: T, options?: {clone: T => T}) => void) =
+  function setPlatformObject(obj, options) {
+    if (typeof obj === 'function') {
+      // $FlowExpectedError[prop-missing]
+      obj.prototype[IS_PLATFORM_OBJECT_KEY] = true;
+      if (options) {
+        // $FlowExpectedError[prop-missing]
+        obj.prototype[CLONE_PLATFORM_OBJECT_KEY] = options.clone;
+      }
+    } else {
+      // $FlowExpectedError[prop-missing]
+      obj[IS_PLATFORM_OBJECT_KEY] = true;
+      if (options) {
+        // $FlowExpectedError[prop-missing]
+        obj[CLONE_PLATFORM_OBJECT_KEY] = options.clone;
+      }
+    }
+  };
+
+/**
+ * Indicates if the given object is a platform object.
+ */
+export function isPlatformObject<T: interface {}>(obj: T): boolean {
+  // $FlowExpectedError[invalid-in-lhs]
+  return IS_PLATFORM_OBJECT_KEY in obj;
+}
+
+/**
+ * Returns the clone function for the given platform object, if it was set.
+ */
+export function getPlatformObjectClone<T: interface {}>(
+  obj: T,
+): (T => T) | void {
+  // $FlowExpectedError[prop-missing]
+  return obj[CLONE_PLATFORM_OBJECT_KEY];
+}

Original file line number	Diff line number	Diff line change
`@@ -15,6 +15,7 @@`
`15`	`15`
`16`	`16`	`import type {EventPhase} from './Event';`
`17`	`17`
	`18`	`+import {setPlatformObject} from '../../webidl/PlatformObjects';`
`18`	`19`	`import Event from './Event';`
`19`	`20`	`import {`
`20`	`21`	`getStopImmediatePropagationFlag,`
`@@ -229,6 +230,8 @@ export default class EventTarget {`
`229`	`230`	`}`
`230`	`231`	`}`
`231`	`232`
	`233`	`+setPlatformObject(EventTarget);`
	`234`	`+`
`232`	`235`	`function validateCallback(callback: EventListener, methodName: string): void {`
`233`	`236`	`if (typeof callback !== 'function' && typeof callback !== 'object') {`
`234`	`237`	`throw new TypeError(`
Original file line number	Diff line number	Diff line change
`@@ -13,6 +13,7 @@`
`13`	`13`	`import type {ArrayLike} from '../../utils/ArrayLikeUtils';`
`14`	`14`
`15`	`15`	`import {createValueIterator} from '../../utils/ArrayLikeUtils';`
	`16`	`+import {setPlatformObject} from '../../webidl/PlatformObjects';`
`16`	`17`
`17`	`18`	// IMPORTANT: The type definition for this module is defined in `HTMLCollection.js.flow`
`18`	`19`	`// because Flow only supports indexers in classes in declaration files.`
`@@ -69,6 +70,8 @@ export default class HTMLCollection<T> implements Iterable<T>, ArrayLike<T> {`
`69`	`70`	`}`
`70`	`71`	`}`
`71`	`72`
	`73`	`+setPlatformObject(HTMLCollection);`
	`74`	`+`
`72`	`75`	`/**`
`73`	`76`	* This is an internal method to create instances of `HTMLCollection`,
`74`	`77`	`* which avoids leaking its constructor to end users.`
Original file line number	Diff line number	Diff line change
`@@ -17,6 +17,7 @@ import {`
`17`	`17`	`createKeyIterator,`
`18`	`18`	`createValueIterator,`
`19`	`19`	`} from '../../utils/ArrayLikeUtils';`
	`20`	`+import {setPlatformObject} from '../../webidl/PlatformObjects';`
`20`	`21`
`21`	`22`	// IMPORTANT: The Flow type definition for this module is defined in `NodeList.js.flow`
`22`	`23`	`// because Flow only supports indexers in classes in declaration files.`
`@@ -93,6 +94,8 @@ export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {`
`93`	`94`	`}`
`94`	`95`	`}`
`95`	`96`
	`97`	`+setPlatformObject(NodeList);`
	`98`	`+`
`96`	`99`	`/**`
`97`	`100`	* This is an internal method to create instances of `NodeList`,
`98`	`101`	`* which avoids leaking its constructor to end users.`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@`
`14`	`14`	`* licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).`
`15`	`15`	`*/`
`16`	`16`
	`17`	`+import {setPlatformObject} from '../webidl/PlatformObjects';`
`17`	`18`	`import DOMRectReadOnly, {type DOMRectInit} from './DOMRectReadOnly';`
`18`	`19`
`19`	`20`	`// flowlint unsafe-getters-setters:off`
`@@ -80,3 +81,7 @@ export default class DOMRect extends DOMRectReadOnly {`
`80`	`81`	`return new DOMRect(rect.x, rect.y, rect.width, rect.height);`
`81`	`82`	`}`
`82`	`83`	`}`
	`84`	`+`
	`85`	`+setPlatformObject(DOMRect, {`
	`86`	`+ clone: rect => new DOMRect(rect.x, rect.y, rect.width, rect.height),`
	`87`	`+});`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ import type {ArrayLike} from '../utils/ArrayLikeUtils';`
`14`	`14`	`import type DOMRectReadOnly from './DOMRectReadOnly';`
`15`	`15`
`16`	`16`	`import {createValueIterator} from '../utils/ArrayLikeUtils';`
	`17`	`+import {setPlatformObject} from '../webidl/PlatformObjects';`
`17`	`18`
`18`	`19`	// IMPORTANT: The Flow type definition for this module is defined in `DOMRectList.js.flow`
`19`	`20`	`// because Flow only supports indexers in classes in declaration files.`
`@@ -63,6 +64,8 @@ export default class DOMRectList implements Iterable<DOMRectReadOnly> {`
`63`	`64`	`}`
`64`	`65`	`}`
`65`	`66`
	`67`	`+setPlatformObject(DOMRectList);`
	`68`	`+`
`66`	`69`	`/**`
`67`	`70`	* This is an internal method to create instances of `DOMRectList`,
`68`	`71`	`* which avoids leaking its constructor to end users.`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,8 @@`
`14`	`14`	`* licensed under [CC-BY-SA 2.5](https://creativecommons.org/licenses/by-sa/2.5/).`
`15`	`15`	`*/`
`16`	`16`
	`17`	`+import {setPlatformObject} from '../webidl/PlatformObjects';`
	`18`	`+`
`17`	`19`	`// flowlint sketchy-null:off, unsafe-getters-setters:off`
`18`	`20`
`19`	`21`	`export interface DOMRectInit {`
`@@ -186,3 +188,7 @@ export default class DOMRectReadOnly {`
`186`	`188`	`this.#height = castToNumber(height);`
`187`	`189`	`}`
`188`	`190`	`}`
	`191`	`+`
	`192`	`+setPlatformObject(DOMRectReadOnly, {`
	`193`	`+ clone: rect => new DOMRectReadOnly(rect.x, rect.y, rect.width, rect.height),`
	`194`	`+});`
Original file line number	Diff line number	Diff line change
`@@ -14,6 +14,7 @@ import type {IntersectionObserverId} from './internals/IntersectionObserverManag`
`14`	`14`	`import type IntersectionObserverEntry from './IntersectionObserverEntry';`
`15`	`15`
`16`	`16`	`import ReactNativeElement from '../dom/nodes/ReactNativeElement';`
	`17`	`+import {setPlatformObject} from '../webidl/PlatformObjects';`
`17`	`18`	`import * as IntersectionObserverManager from './internals/IntersectionObserverManager';`
`18`	`19`
`19`	`20`	`export type IntersectionObserverCallback = (`
`@@ -250,6 +251,8 @@ export default class IntersectionObserver {`
`250`	`251`	`}`
`251`	`252`	`}`
`252`	`253`
	`254`	`+setPlatformObject(IntersectionObserver);`
	`255`	`+`
`253`	`256`	`/**`
`254`	`257`	* Converts the user defined `threshold` value into an array of sorted valid
`255`	`258`	* threshold options for `IntersectionObserver` (double ∈ [0, 1]).