Make constructors of internal DOM, MutationObserver, and IntersectionObserver classes throw (facebook#57046)

Summary:
Pull Request resolved: facebook#57046

Several Web API classes exposed globally by React Native are not meant to be constructed from userland — either because they correspond to web spec interfaces whose constructors are illegal (e.g. `Node`, `Element`, `HTMLCollection`, `NodeList`, `DOMRectList`, `IntersectionObserverEntry`, `MutationRecord`), or because their React Native implementations take internal arguments that callers cannot meaningfully supply (e.g. `Document`, `Text`, `CharacterData`, `HTMLElement`).

Apply the same `_public` pattern already in use under `setUpPerformanceModern` to these classes: export a constructor stub that throws `TypeError: Failed to construct '<Name>': Illegal constructor`, with its `prototype` aliased to the real class so that `instanceof` checks against the global still work. Internal code continues to use the real class via the default export.

The following classes get a `_public` export and are now polyfilled through it in their corresponding setup file:

- `setUpDOM`: `DOMRectList`, `HTMLCollection`, `NodeList`, `Node` (`ReadOnlyNode`), `Document` (`ReactNativeDocument`), `CharacterData` (`ReadOnlyCharacterData`), `Text` (`ReadOnlyText`), `Element` (`ReadOnlyElement`), `HTMLElement` (`ReactNativeElement`).
- `setUpMutationObserver`: `MutationRecord`.
- `setUpIntersectionObserver`: `IntersectionObserverEntry` (also newly added to the setup file — it was not being exposed globally before).

For `Node`, the public stub also copies the static node-type and document-position constants (`ELEMENT_NODE`, `TEXT_NODE`, `DOCUMENT_POSITION_*`, etc.) so that consumers can keep reading them from the global (`Node.ELEMENT_NODE`, …).

Classes whose web-spec constructors are legitimately public (`DOMRect`, `DOMRectReadOnly`, `Event`, `EventTarget`, `CustomEvent`, `MutationObserver`, `IntersectionObserver`) are unchanged.

For the three collection classes whose public Flow types live in a `.js.flow` declaration file (`DOMRectList`, `HTMLCollection`, `NodeList`), the new `_public` export is also declared in the `.js.flow` companion so Flow can see it.

Changelog:
[General][Fixed] - Throw "Illegal constructor" when constructing `Node`, `Document`, `Element`, `HTMLElement`, `CharacterData`, `Text`, `HTMLCollection`, `NodeList`, `DOMRectList`, `MutationRecord`, and `IntersectionObserverEntry` from JavaScript.

Reviewed By: huntie

Differential Revision: D107227212

Author: rubennorte

packages/react-native/src/private/setup/__tests__/setUpDefaultReactNativeEnvironment-Globals-IntersectionObserver-itest.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ * @fantom_flags enableIntersectionObserverByDefault:*
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+
+declare var IntersectionObserverEntry: unknown;
+
+// TODO: Merge into `setUpDefaultReactNativeEnvironment-Globals-itest.js` once
+// the `enableIntersectionObserverByDefault` feature flag is cleaned up and the
+// IntersectionObserver globals are exposed unconditionally.
+describe('setUpDefaultReactNativeEnvironment (IntersectionObserver globals)', () => {
+  if (ReactNativeFeatureFlags.enableIntersectionObserverByDefault()) {
+    describe('when enableIntersectionObserverByDefault is enabled', () => {
+      it('should provide IntersectionObserver', () => {
+        expect(typeof IntersectionObserver).toBe('function');
+      });
+
+      it('should provide IntersectionObserverEntry', () => {
+        expect(typeof IntersectionObserverEntry).toBe('function');
+      });
+    });
+  } else {
+    describe('when enableIntersectionObserverByDefault is disabled', () => {
+      it('should not provide IntersectionObserver', () => {
+        expect(typeof IntersectionObserver).toBe('undefined');
+      });
+
+      it('should not provide IntersectionObserverEntry', () => {
+        expect(typeof IntersectionObserverEntry).toBe('undefined');
+      });
+    });
+  }
+});

packages/react-native/src/private/setup/__tests__/setUpDefaultReactNativeEnvironment-Globals-MutationObserver-itest.js

@@ -0,0 +1,44 @@
+/**
+ * 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.
+ *
+ * @fantom_flags enableMutationObserverByDefault:*
+ * @flow strict-local
+ * @format
+ * @oncall react_native
+ */
+
+import '@react-native/fantom/src/setUpDefaultReactNativeEnvironment';
+
+import * as ReactNativeFeatureFlags from 'react-native/src/private/featureflags/ReactNativeFeatureFlags';
+
+declare var MutationRecord: unknown;
+
+// TODO: Merge into `setUpDefaultReactNativeEnvironment-Globals-itest.js` once
+// the `enableMutationObserverByDefault` feature flag is cleaned up and the
+// MutationObserver globals are exposed unconditionally.
+describe('setUpDefaultReactNativeEnvironment (MutationObserver globals)', () => {
+  if (ReactNativeFeatureFlags.enableMutationObserverByDefault()) {
+    describe('when enableMutationObserverByDefault is enabled', () => {
+      it('should provide MutationObserver', () => {
+        expect(typeof MutationObserver).toBe('function');
+      });
+
+      it('should provide MutationRecord', () => {
+        expect(typeof MutationRecord).toBe('function');
+      });
+    });
+  } else {
+    describe('when enableMutationObserverByDefault is disabled', () => {
+      it('should not provide MutationObserver', () => {
+        expect(typeof MutationObserver).toBe('undefined');
+      });
+
+      it('should not provide MutationRecord', () => {
+        expect(typeof MutationRecord).toBe('undefined');
+      });
+    });
+  }
+});

packages/react-native/src/private/setup/setUpDOM.js

@@ -31,47 +31,57 @@ export default function setUpDOM() {
 
   polyfillGlobal(
     'DOMRectList',
-    () => require('../webapis/geometry/DOMRectList').default,
+    () => require('../webapis/geometry/DOMRectList').DOMRectList_public,
   );
 
   polyfillGlobal(
     'HTMLCollection',
-    () => require('../webapis/dom/oldstylecollections/HTMLCollection').default,
+    () =>
+      require('../webapis/dom/oldstylecollections/HTMLCollection')
+        .HTMLCollection_public,
   );
 
   polyfillGlobal(
     'NodeList',
-    () => require('../webapis/dom/oldstylecollections/NodeList').default,
+    () =>
+      require('../webapis/dom/oldstylecollections/NodeList').NodeList_public,
   );
 
   polyfillGlobal(
     'Node',
-    () => require('../webapis/dom/nodes/ReadOnlyNode').default,
+    () => require('../webapis/dom/nodes/ReadOnlyNode').ReadOnlyNode_public,
   );
 
   polyfillGlobal(
     'Document',
-    () => require('../webapis/dom/nodes/ReactNativeDocument').default,
+    () =>
+      require('../webapis/dom/nodes/ReactNativeDocument')
+        .ReactNativeDocument_public,
   );
 
   polyfillGlobal(
     'CharacterData',
-    () => require('../webapis/dom/nodes/ReadOnlyCharacterData').default,
+    () =>
+      require('../webapis/dom/nodes/ReadOnlyCharacterData')
+        .ReadOnlyCharacterData_public,
   );
 
   polyfillGlobal(
     'Text',
-    () => require('../webapis/dom/nodes/ReadOnlyText').default,
+    () => require('../webapis/dom/nodes/ReadOnlyText').ReadOnlyText_public,
   );
 
   polyfillGlobal(
     'Element',
-    () => require('../webapis/dom/nodes/ReadOnlyElement').default,
+    () =>
+      require('../webapis/dom/nodes/ReadOnlyElement').ReadOnlyElement_public,
   );
 
   polyfillGlobal(
     'HTMLElement',
-    () => require('../webapis/dom/nodes/ReactNativeElement').default,
+    () =>
+      require('../webapis/dom/nodes/ReactNativeElement')
+        .ReactNativeElement_public,
   );
 
   polyfillGlobal('Event', () => require('../webapis/dom/events/Event').default);

packages/react-native/src/private/setup/setUpIntersectionObserver.js

@@ -24,4 +24,11 @@ export default function setUpIntersectionObserver() {
     () =>
       require('../webapis/intersectionobserver/IntersectionObserver').default,
   );
+
+  polyfillGlobal(
+    'IntersectionObserverEntry',
+    () =>
+      require('../webapis/intersectionobserver/IntersectionObserverEntry')
+        .IntersectionObserverEntry_public,
+  );
 }

packages/react-native/src/private/setup/setUpMutationObserver.js

@@ -26,6 +26,8 @@ export default function setUpMutationObserver() {
 
   polyfillGlobal(
     'MutationRecord',
-    () => require('../webapis/mutationobserver/MutationRecord').default,
+    () =>
+      require('../webapis/mutationobserver/MutationRecord')
+        .MutationRecord_public,
   );
 }

packages/react-native/src/private/webapis/dom/nodes/ReactNativeDocument.js

@@ -139,3 +139,14 @@ export function createReactNativeDocument(
   const document = new ReactNativeDocument(rootTag, instanceHandle);
   return document;
 }
+
+export const ReactNativeDocument_public: typeof ReactNativeDocument =
+  // $FlowExpectedError[incompatible-type]
+  function Document() {
+    throw new TypeError(
+      "Failed to construct 'Document': Nodes cannot be imperatively created in React Native",
+    );
+  };
+
+// $FlowExpectedError[prop-missing]
+ReactNativeDocument_public.prototype = ReactNativeDocument.prototype;

packages/react-native/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -292,3 +292,14 @@ function replaceConstructorWithoutSuper(
 export default replaceConstructorWithoutSuper(
   ReactNativeElement,
 ) as typeof ReactNativeElement;
+
+export const ReactNativeElement_public: typeof ReactNativeElement =
+  // $FlowExpectedError[incompatible-type]
+  function HTMLElement() {
+    throw new TypeError(
+      "Failed to construct 'HTMLElement': Nodes cannot be imperatively created in React Native",
+    );
+  };
+
+// $FlowExpectedError[prop-missing]
+ReactNativeElement_public.prototype = ReactNativeElement.prototype;

packages/react-native/src/private/webapis/dom/nodes/ReadOnlyCharacterData.js

@@ -70,3 +70,14 @@ export default class ReadOnlyCharacterData extends ReadOnlyNode {
     return data.slice(offset, offset + adjustedCount);
   }
 }
+
+export const ReadOnlyCharacterData_public: typeof ReadOnlyCharacterData =
+  // $FlowExpectedError[incompatible-type]
+  function CharacterData() {
+    throw new TypeError(
+      "Failed to construct 'CharacterData': Illegal constructor",
+    );
+  };
+
+// $FlowExpectedError[prop-missing]
+ReadOnlyCharacterData_public.prototype = ReadOnlyCharacterData.prototype;

packages/react-native/src/private/webapis/dom/nodes/ReadOnlyElement.js

@@ -245,3 +245,12 @@ export function getBoundingClientRect(
   // Empty rect if any of the above failed
   return new DOMRect(0, 0, 0, 0);
 }
+
+export const ReadOnlyElement_public: typeof ReadOnlyElement =
+  // $FlowExpectedError[incompatible-type]
+  function Element() {
+    throw new TypeError("Failed to construct 'Element': Illegal constructor");
+  };
+
+// $FlowExpectedError[prop-missing]
+ReadOnlyElement_public.prototype = ReadOnlyElement.prototype;

packages/react-native/src/private/webapis/dom/nodes/ReadOnlyNode.js

@@ -371,6 +371,21 @@ export default replaceConstructorWithoutSuper(
   ReadOnlyNode,
 ) as typeof ReadOnlyNode;
 
+export const ReadOnlyNode_public: typeof ReadOnlyNode =
+  // $FlowExpectedError[incompatible-type]
+  function Node() {
+    throw new TypeError("Failed to construct 'Node': Illegal constructor");
+  };
+
+// $FlowExpectedError[prop-missing]
+ReadOnlyNode_public.prototype = ReadOnlyNode.prototype;
+// Copy static properties (ELEMENT_NODE, DOCUMENT_NODE, TEXT_NODE,
+// DOCUMENT_POSITION_*, etc.) so that callers accessing them via the public
+// constructor (e.g. `Node.ELEMENT_NODE`) still work.
+// $FlowFixMe[unsafe-object-assign]
+// $FlowFixMe[not-an-object]
+Object.assign(ReadOnlyNode_public, ReadOnlyNode);
+
 // Temporary type until we ship ReadOnlyNode extending EventTarget ungated.
 export type ReadOnlyNodeWithEventTarget = ReadOnlyNode & EventTarget;