@office-iss/react-native-win32 0.81.2 → 0.82.0-preview.2

package/src/private/webapis/dom/nodes/ReactNativeDocument.js

@@ -14,9 +14,9 @@ import type {RootTag} from '../../../../../Libraries/ReactNative/RootTag';
 import type {ViewConfig} from '../../../../../Libraries/Renderer/shims/ReactNativeTypes';
 import type HTMLCollection from '../oldstylecollections/HTMLCollection';
 import type {ReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
-import type ReadOnlyElement from './ReadOnlyElement';
 
 import {createHTMLCollection} from '../oldstylecollections/HTMLCollection';
+import {getPublicInstanceFromInstanceHandle} from './internals/NodeInternals';
 import {
   createReactNativeDocumentElementInstanceHandle,
   setNativeElementReferenceForReactNativeDocumentElementInstanceHandle,
@@ -24,10 +24,12 @@ import {
 } from './internals/ReactNativeDocumentElementInstanceHandle';
 import {createReactNativeDocumentInstanceHandle} from './internals/ReactNativeDocumentInstanceHandle';
 import ReactNativeElement from './ReactNativeElement';
+import ReadOnlyElement from './ReadOnlyElement';
 import ReadOnlyNode from './ReadOnlyNode';
 import NativeDOM from './specs/NativeDOM';
 
 export default class ReactNativeDocument extends ReadOnlyNode {
+  _rootTag: RootTag;
   _documentElement: ReactNativeElement;
 
   constructor(
@@ -35,6 +37,7 @@ export default class ReactNativeDocument extends ReadOnlyNode {
     instanceHandle: ReactNativeDocumentInstanceHandle,
   ) {
     super(instanceHandle, null);
+    this._rootTag = rootTag;
     this._documentElement = createDocumentElement(rootTag, this);
   }
 
@@ -71,10 +74,27 @@ export default class ReactNativeDocument extends ReadOnlyNode {
     return null;
   }
 
-  // $FlowExpectedError[incompatible-extend] This is defined as returning string in Node, but it's actually null in Document.
+  // $FlowExpectedError[incompatible-type] This is defined as returning string in Node, but it's actually null in Document.
   get textContent(): null {
     return null;
   }
+
+  getElementById(id: string): ReadOnlyElement | null {
+    const elementByIdInstanceHandle = NativeDOM.getElementById(
+      this._rootTag,
+      id,
+    );
+
+    if (elementByIdInstanceHandle == null) {
+      return null;
+    }
+
+    const elementById = getPublicInstanceFromInstanceHandle(
+      elementByIdInstanceHandle,
+    );
+
+    return elementById instanceof ReadOnlyElement ? elementById : null;
+  }
 }
 
 function createDocumentElement(

package/src/private/webapis/dom/nodes/ReactNativeElement.js

@@ -233,7 +233,7 @@ function replaceConstructorWithoutSuper(
 
   ReactNativeElement.prototype = ReactNativeElementClass.prototype;
 
-  // $FlowExpectedError[incompatible-return]
+  // $FlowExpectedError[incompatible-type]
   return ReactNativeElement;
 }
 

package/src/private/webapis/dom/nodes/ReadOnlyElement.js

@@ -220,9 +220,11 @@ export default class ReadOnlyElement extends ReadOnlyNode {
 }
 
 function getChildElements(node: ReadOnlyNode): $ReadOnlyArray<ReadOnlyElement> {
-  // $FlowIssue[incompatible-call]
-  return getChildNodes(node).filter(
-    childNode => childNode instanceof ReadOnlyElement,
+  // $FlowFixMe[incompatible-type]
+  return getChildNodes(
+    node,
+    (childNode: ReadOnlyNode) =>
+      childNode.nodeType === ReadOnlyNode.ELEMENT_NODE,
   );
 }
 

package/src/private/webapis/dom/nodes/ReadOnlyNode.js

@@ -118,7 +118,11 @@ export default class ReadOnlyNode {
   get parentElement(): ReadOnlyElement | null {
     const parentNode = this.parentNode;
 
-    if (parentNode instanceof getReadOnlyElementClass()) {
+    if (
+      parentNode != null &&
+      parentNode.nodeType === ReadOnlyNode.ELEMENT_NODE
+    ) {
+      // $FlowExpectedError[incompatible-type] parentNode is an instance of ReadOnlyElement as per the `nodeType` check
       return parentNode;
     }
 
@@ -292,6 +296,7 @@ setPlatformObject(ReadOnlyNode);
 
 export function getChildNodes(
   node: ReadOnlyNode,
+  filter?: (node: ReadOnlyNode) => boolean,
 ): $ReadOnlyArray<ReadOnlyNode> {
   const shadowNode = getNativeNodeReference(node);
 
@@ -300,9 +305,16 @@ export function getChildNodes(
   }
 
   const childNodeInstanceHandles = NativeDOM.getChildNodes(shadowNode);
-  return childNodeInstanceHandles
-    .map(instanceHandle => getPublicInstanceFromInstanceHandle(instanceHandle))
-    .filter(Boolean);
+  const childNodes = [];
+  for (const childNodeInstanceHandle of childNodeInstanceHandles) {
+    const childNode = getPublicInstanceFromInstanceHandle(
+      childNodeInstanceHandle,
+    );
+    if (childNode != null && (filter == null || filter(childNode))) {
+      childNodes.push(childNode);
+    }
+  }
+  return childNodes;
 }
 
 function getNodeSiblingsAndPosition(
@@ -323,12 +335,3 @@ function getNodeSiblingsAndPosition(
 
   return [siblings, position];
 }
-
-let ReadOnlyElementClass;
-function getReadOnlyElementClass(): Class<ReadOnlyElement> {
-  if (ReadOnlyElementClass == null) {
-    // We initialize this lazily to avoid a require cycle.
-    ReadOnlyElementClass = require('./ReadOnlyElement').default;
-  }
-  return ReadOnlyElementClass;
-}

package/src/private/webapis/dom/nodes/internals/NodeInternals.js

@@ -37,14 +37,30 @@ export type InstanceHandle =
   | ReactNativeDocumentElementInstanceHandle // root element managed by React Native
   | ReactNativeDocumentInstanceHandle; // document node managed by React Native
 
-let RendererProxy;
-function getRendererProxy() {
-  if (RendererProxy == null) {
+let cachedGetNodeFromInternalInstanceHandle;
+function getNodeFromInternalInstanceHandle(
+  instanceHandle: InternalInstanceHandle,
+) {
+  if (cachedGetNodeFromInternalInstanceHandle == null) {
     // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
     // With a static import we can't use these classes for Paper-only variants.
-    RendererProxy = require('../../../../../../Libraries/ReactNative/RendererProxy');
+    cachedGetNodeFromInternalInstanceHandle =
+      require('../../../../../../Libraries/ReactNative/RendererProxy').getNodeFromInternalInstanceHandle;
   }
-  return RendererProxy;
+  return cachedGetNodeFromInternalInstanceHandle(instanceHandle);
+}
+
+let cachedGetPublicInstanceFromInternalInstanceHandle;
+function getPublicInstanceFromInternalInstanceHandle(
+  instanceHandle: InternalInstanceHandle,
+) {
+  if (cachedGetPublicInstanceFromInternalInstanceHandle == null) {
+    // Lazy import Fabric here to avoid DOM Node APIs classes from having side-effects.
+    // With a static import we can't use these classes for Paper-only variants.
+    cachedGetPublicInstanceFromInternalInstanceHandle =
+      require('../../../../../../Libraries/ReactNative/RendererProxy').getPublicInstanceFromInternalInstanceHandle;
+  }
+  return cachedGetPublicInstanceFromInternalInstanceHandle(instanceHandle);
 }
 
 const INSTANCE_HANDLE_KEY = Symbol('internalInstanceHandle');
@@ -81,6 +97,15 @@ export function setOwnerDocument(
 export function getPublicInstanceFromInstanceHandle(
   instanceHandle: InstanceHandle,
 ): ?ReadOnlyNode {
+  const mixedPublicInstance =
+    // $FlowExpectedError[incompatible-type]
+    getPublicInstanceFromInternalInstanceHandle(instanceHandle);
+
+  if (mixedPublicInstance != null) {
+    // $FlowExpectedError[incompatible-type] React defines public instances as "mixed" because it can't access the definition from React Native.
+    return mixedPublicInstance;
+  }
+
   if (isReactNativeDocumentInstanceHandle(instanceHandle)) {
     return getPublicInstanceFromReactNativeDocumentInstanceHandle(
       instanceHandle,
@@ -92,14 +117,6 @@ export function getPublicInstanceFromInstanceHandle(
       instanceHandle,
     );
   }
-
-  const mixedPublicInstance =
-    getRendererProxy().getPublicInstanceFromInternalInstanceHandle(
-      instanceHandle,
-    );
-
-  // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
-  return mixedPublicInstance;
 }
 
 export function getNativeNodeReference(
@@ -107,6 +124,15 @@ export function getNativeNodeReference(
 ): ?NativeNodeReference {
   const instanceHandle = getInstanceHandle(node);
 
+  // Try React nodes first
+  const nativeReference =
+    // $FlowExpectedError[incompatible-type]
+    getNodeFromInternalInstanceHandle(instanceHandle);
+  if (nativeReference != null) {
+    // $FlowExpectedError[incompatible-type]
+    return nativeReference;
+  }
+
   if (isReactNativeDocumentInstanceHandle(instanceHandle)) {
     return getNativeNodeReferenceFromReactNativeDocumentInstanceHandle(
       instanceHandle,
@@ -118,15 +144,12 @@ export function getNativeNodeReference(
       instanceHandle,
     );
   }
-
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
 }
 
 export function getNativeElementReference(
   node: ReadOnlyElement,
 ): ?NativeElementReference {
-  // $FlowExpectedError[incompatible-cast] We know ReadOnlyElement instances provide InternalInstanceHandle
+  // $FlowExpectedError[incompatible-type] We know ReadOnlyElement instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
   if (isReactNativeDocumentElementInstanceHandle(instanceHandle)) {
@@ -135,16 +158,16 @@ export function getNativeElementReference(
     );
   }
 
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
+  // $FlowExpectedError[incompatible-type]
+  return getNodeFromInternalInstanceHandle(instanceHandle);
 }
 
 export function getNativeTextReference(
   node: ReadOnlyCharacterData,
 ): ?NativeTextReference {
-  // $FlowExpectedError[incompatible-cast] We know ReadOnlyText instances provide InternalInstanceHandle
+  // $FlowExpectedError[incompatible-type] We know ReadOnlyText instances provide InternalInstanceHandle
   const instanceHandle = getInstanceHandle(node) as InternalInstanceHandle;
 
-  // $FlowExpectedError[incompatible-return]
-  return getRendererProxy().getNodeFromInternalInstanceHandle(instanceHandle);
+  // $FlowExpectedError[incompatible-type]
+  return getNodeFromInternalInstanceHandle(instanceHandle);
 }

package/src/private/webapis/dom/nodes/internals/ReactNativeDocumentInstanceHandle.js

@@ -31,7 +31,7 @@ export function getNativeNodeReferenceFromReactNativeDocumentInstanceHandle(
 export function getPublicInstanceFromReactNativeDocumentInstanceHandle(
   instanceHandle: ReactNativeDocumentInstanceHandle,
 ): ?ReactNativeDocument {
-  // $FlowExpectedError[incompatible-return] React defines public instances as "mixed" because it can't access the definition from React Native.
+  // $FlowExpectedError[incompatible-type] React defines public instances as "mixed" because it can't access the definition from React Native.
   return RendererProxy.getPublicInstanceFromRootTag(Number(instanceHandle));
 }
 

package/src/private/webapis/dom/nodes/specs/NativeDOM.js

@@ -13,9 +13,7 @@ import type {Node as ShadowNode} from '../../../../../../Libraries/Renderer/shim
 import type {TurboModule} from '../../../../../../Libraries/TurboModule/RCTExport';
 import type {InstanceHandle} from '../internals/NodeInternals';
 
-import {getFabricUIManager} from '../../../../../../Libraries/ReactNative/FabricUIManager';
 import * as TurboModuleRegistry from '../../../../../../Libraries/TurboModule/TurboModuleRegistry';
-import nullthrows from 'nullthrows';
 
 export opaque type NativeElementReference = ShadowNode;
 export opaque type NativeTextReference = ShadowNode;
@@ -62,6 +60,11 @@ export interface Spec extends TurboModule {
     nativeNodeReference: mixed /* NativeNodeReference */,
   ) => $ReadOnlyArray<mixed> /* $ReadOnlyArray<InstanceHandle> */;
 
+  +getElementById?: (
+    nativeNodeReference: mixed /* NativeNodeReference */,
+    id: string,
+  ) => mixed /* ?InstanceHandle */;
+
   +getParentNode: (
     nativeNodeReference: mixed /* NativeNodeReference */,
   ) => mixed /* ?InstanceHandle */;
@@ -160,18 +163,12 @@ export interface Spec extends TurboModule {
    * Legacy direct manipulation APIs (for `ReactNativeElement`).
    */
 
-  +setNativeProps?: (
+  +setNativeProps: (
     nativeElementReference: mixed,
     updatePayload: mixed,
   ) => void;
 }
 
-const RawNativeDOM = (TurboModuleRegistry.get<Spec>('NativeDOMCxx'): ?Spec);
-
-export function getRawNativeDOMForTests(): ?Spec {
-  return RawNativeDOM;
-}
-
 // This is the actual interface of this module, but the native module codegen
 // isn't expressive enough yet.
 export interface RefinedSpec {
@@ -204,6 +201,15 @@ export interface RefinedSpec {
     nativeNodeReference: NativeNodeReference,
   ) => $ReadOnlyArray<InstanceHandle>;
 
+  /**
+   * This is a React Native implementation of `Document.prototype.getElementById`
+   * (see https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById).
+   *
+   * If the document is active and contains an element with the given ID, it
+   * returns the instance handle of that element. Otherwise, it returns `null`.
+   */
+  +getElementById: (rootTag: RootTag, id: string) => ?InstanceHandle;
+
   /**
    * This is a React Native implementation of `Node.prototype.parentNode`
    * (see https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode).
@@ -432,186 +438,14 @@ export interface RefinedSpec {
   ) => void;
 }
 
-const NativeDOM: RefinedSpec = {
-  /*
-   * Methods from the `Node` interface (for `ReadOnlyNode`).
-   */
-
-  compareDocumentPosition(nativeNodeReference, otherNativeNodeReference) {
-    return nullthrows(RawNativeDOM).compareDocumentPosition(
-      nativeNodeReference,
-      otherNativeNodeReference,
-    );
-  },
-
-  getChildNodes(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getChildNodes(
-      nativeNodeReference,
-    ): $ReadOnlyArray<InstanceHandle>);
-  },
-
-  getParentNode(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getParentNode(
-      nativeNodeReference,
-    ): ?InstanceHandle);
-  },
-
-  isConnected(nativeNodeReference) {
-    return nullthrows(RawNativeDOM).isConnected(nativeNodeReference);
-  },
-
-  /*
-   * Methods from the `Element` interface (for `ReactNativeElement`).
-   */
-
-  getBorderWidth(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getBorderWidth(
-      nativeNodeReference,
-    ): $ReadOnly<
-      [
-        /* topWidth: */ number,
-        /* rightWidth: */ number,
-        /* bottomWidth: */ number,
-        /* leftWidth: */ number,
-      ],
-    >);
-  },
-
-  getBoundingClientRect(nativeNodeReference, includeTransform: boolean) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getBoundingClientRect(
-      nativeNodeReference,
-      includeTransform,
-    ): $ReadOnly<
-      [
-        /* x: */ number,
-        /* y: */ number,
-        /* width: */ number,
-        /* height: */ number,
-      ],
-    >);
-  },
-
-  getInnerSize(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getInnerSize(
-      nativeNodeReference,
-    ): $ReadOnly<[/* width: */ number, /* height: */ number]>);
-  },
-
-  getScrollPosition(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getScrollPosition(
-      nativeNodeReference,
-    ): $ReadOnly<[/* scrollLeft: */ number, /* scrollTop: */ number]>);
-  },
-
-  getScrollSize(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getScrollSize(
-      nativeNodeReference,
-    ): $ReadOnly<[/* scrollWidth: */ number, /* scrollHeight: */ number]>);
-  },
-
-  getTagName(nativeNodeReference) {
-    return nullthrows(RawNativeDOM).getTagName(nativeNodeReference);
-  },
-
-  getTextContent(nativeNodeReference) {
-    return nullthrows(RawNativeDOM).getTextContent(nativeNodeReference);
-  },
-
-  hasPointerCapture(nativeNodeReference, pointerId) {
-    return nullthrows(RawNativeDOM).hasPointerCapture(
-      nativeNodeReference,
-      pointerId,
-    );
-  },
-
-  releasePointerCapture(nativeNodeReference, pointerId) {
-    return nullthrows(RawNativeDOM).releasePointerCapture(
-      nativeNodeReference,
-      pointerId,
-    );
-  },
-
-  setPointerCapture(nativeNodeReference, pointerId) {
-    return nullthrows(RawNativeDOM).setPointerCapture(
-      nativeNodeReference,
-      pointerId,
-    );
-  },
-
-  /*
-   * Methods from the `HTMLElement` interface (for `ReactNativeElement`).
-   */
-
-  getOffset(nativeNodeReference) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM).getOffset(nativeNodeReference): $ReadOnly<
-      [
-        /* offsetParent: */ ?InstanceHandle,
-        /* top: */ number,
-        /* left: */ number,
-      ],
-    >);
-  },
-
-  /*
-   * Special methods to handle the root node.
-   */
-
-  linkRootNode(rootTag, instanceHandle) {
-    // $FlowExpectedError[incompatible-cast]
-    return (nullthrows(RawNativeDOM?.linkRootNode)(
-      // $FlowExpectedError[incompatible-call]
-      rootTag,
-      instanceHandle,
-    ): ?NativeElementReference);
-  },
-
-  /**
-   * Legacy layout APIs
-   */
-
-  measure(nativeNodeReference, callback) {
-    return nullthrows(RawNativeDOM).measure(nativeNodeReference, callback);
-  },
-
-  measureInWindow(nativeNodeReference, callback) {
-    return nullthrows(RawNativeDOM).measureInWindow(
-      nativeNodeReference,
-      callback,
-    );
-  },
-
-  measureLayout(nativeNodeReference, relativeNode, onFail, onSuccess) {
-    return nullthrows(RawNativeDOM).measureLayout(
-      nativeNodeReference,
-      relativeNode,
-      onFail,
-      onSuccess,
-    );
-  },
-
-  /**
-   * Legacy direct manipulation APIs
-   */
-  setNativeProps(nativeNodeReference, updatePayload) {
-    // TODO: remove when RawNativeDOM.setNativeProps is NOT nullable.
-    if (RawNativeDOM?.setNativeProps == null) {
-      nullthrows(getFabricUIManager()).setNativeProps(
-        nativeNodeReference,
-        updatePayload,
-      );
-      return;
-    }
-
-    return RawNativeDOM.setNativeProps(nativeNodeReference, updatePayload);
-  },
-};
-
-export default NativeDOM;
+// We used to implement all methods in RefineSpec, manually refining the types
+// for all methods. However, this is slower as every call to the native module
+// requires an additional call only to handle types. Instead, we do an unsafe
+// casting here. Keep in mind that:
+// 1. We use `get` and not `getEnforcing` because we don't want to fail when
+//    the module is evaluated, only when used. This is necessary because we
+//    don't use inline requires within the `react-native` package and some code
+//    might end up loading this but not using it.
+// 2. We lose automatic backwards compatibility checks because of this.
+// $FlowExpectedError[incompatible-type]
+export default (TurboModuleRegistry.get<Spec>('NativeDOMCxx'): RefinedSpec);

package/src/private/webapis/dom/oldstylecollections/HTMLCollection.js

@@ -18,9 +18,16 @@ 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.
 
-// $FlowIssue[prop-missing] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable<T> interface.
+const REUSABLE_PROPERTY_DESCRIPTOR: {...PropertyDescriptor<mixed>, ...} = {
+  value: {},
+  enumerable: true,
+  configurable: false,
+  writable: false,
+};
+
+// $FlowFixMe[incompatible-type] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable<T> interface.
 export default class HTMLCollection<T> implements Iterable<T>, ArrayLike<T> {
-  #length: number;
+  _length: number;
 
   /**
    * Use `createHTMLCollection` to create instances of this class.
@@ -30,23 +37,19 @@ export default class HTMLCollection<T> implements Iterable<T>, ArrayLike<T> {
    */
   constructor(elements: $ReadOnlyArray<T>) {
     for (let i = 0; i < elements.length; i++) {
-      Object.defineProperty(this, i, {
-        value: elements[i],
-        enumerable: true,
-        configurable: false,
-        writable: false,
-      });
+      REUSABLE_PROPERTY_DESCRIPTOR.value = elements[i];
+      Object.defineProperty(this, i, REUSABLE_PROPERTY_DESCRIPTOR);
     }
 
-    this.#length = elements.length;
+    this._length = elements.length;
   }
 
   get length(): number {
-    return this.#length;
+    return this._length;
   }
 
   item(index: number): T | null {
-    if (index < 0 || index >= this.#length) {
+    if (index < 0 || index >= this._length) {
       return null;
     }
 
@@ -64,7 +67,7 @@ export default class HTMLCollection<T> implements Iterable<T>, ArrayLike<T> {
     return null;
   }
 
-  // $FlowIssue[unsupported-syntax] Flow does not support computed properties in classes.
+  // $FlowFixMe[unsupported-syntax] Flow does not support computed properties in classes.
   [Symbol.iterator](): Iterator<T> {
     return createValueIterator(this);
   }

package/src/private/webapis/dom/oldstylecollections/NodeList.js

@@ -22,9 +22,14 @@ 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.
 
-// $FlowIssue[prop-missing] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable<T> interface.
+const REUSABLE_PROPERTY_DESCRIPTOR: {...PropertyDescriptor<mixed>, ...} = {
+  value: {},
+  writable: false,
+};
+
+// $FlowFixMe[incompatible-type] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable<T> interface.
 export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {
-  #length: number;
+  _length: number;
 
   /**
    * Use `createNodeList` to create instances of this class.
@@ -34,20 +39,18 @@ export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {
    */
   constructor(elements: $ReadOnlyArray<T>) {
     for (let i = 0; i < elements.length; i++) {
-      Object.defineProperty(this, i, {
-        value: elements[i],
-        writable: false,
-      });
+      REUSABLE_PROPERTY_DESCRIPTOR.value = elements[i];
+      Object.defineProperty(this, i, REUSABLE_PROPERTY_DESCRIPTOR);
     }
-    this.#length = elements.length;
+    this._length = elements.length;
   }
 
   get length(): number {
-    return this.#length;
+    return this._length;
   }
 
   item(index: number): T | null {
-    if (index < 0 || index >= this.#length) {
+    if (index < 0 || index >= this._length) {
       return null;
     }
 
@@ -71,7 +74,7 @@ export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {
     // eslint-disable-next-line consistent-this
     const arrayLike: ArrayLike<T> = this;
 
-    for (let index = 0; index < this.#length; index++) {
+    for (let index = 0; index < this._length; index++) {
       if (thisArg == null) {
         callbackFn(arrayLike[index], index, this);
       } else {
@@ -88,7 +91,7 @@ export default class NodeList<T> implements Iterable<T>, ArrayLike<T> {
     return createValueIterator(this);
   }
 
-  // $FlowIssue[unsupported-syntax] Flow does not support computed properties in classes.
+  // $FlowFixMe[unsupported-syntax] Flow does not support computed properties in classes.
   [Symbol.iterator](): Iterator<T> {
     return createValueIterator(this);
   }

package/src/private/webapis/geometry/DOMRectList.js

@@ -19,7 +19,7 @@ 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.
 
-// $FlowIssue[prop-missing] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable interface.
+// $FlowFixMe[incompatible-type] Flow doesn't understand [Symbol.iterator]() {} and thinks this class doesn't implement the Iterable interface.
 export default class DOMRectList implements Iterable<DOMRectReadOnly> {
   #length: number;
 
@@ -58,7 +58,7 @@ export default class DOMRectList implements Iterable<DOMRectReadOnly> {
     return arrayLike[index];
   }
 
-  // $FlowIssue[unsupported-syntax] Flow does not support computed properties in classes.
+  // $FlowFixMe[unsupported-syntax] Flow does not support computed properties in classes.
   [Symbol.iterator](): Iterator<DOMRectReadOnly> {
     return createValueIterator(this);
   }