react-native-windows 0.81.1 → 0.82.0-preview.1

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);
   }

package/src/private/webapis/intersectionobserver/internals/IntersectionObserverManager.js

@@ -27,13 +27,13 @@ import type {NativeIntersectionObserverToken} from '../specs/NativeIntersectionO
 
 import * as Systrace from '../../../../../Libraries/Performance/Systrace';
 import warnOnce from '../../../../../Libraries/Utilities/warnOnce';
-import * as ReactNativeFeatureFlags from '../../../featureflags/ReactNativeFeatureFlags';
 import {
   getInstanceHandle,
   getNativeNodeReference,
 } from '../../dom/nodes/internals/NodeInternals';
 import {createIntersectionObserverEntry} from '../IntersectionObserverEntry';
 import NativeIntersectionObserver from '../specs/NativeIntersectionObserver';
+import nullthrows from 'nullthrows';
 
 export type IntersectionObserverId = number;
 
@@ -69,36 +69,11 @@ function setTargetForInstanceHandle(
   instanceHandleToTargetMap.set(key, target);
 }
 
-// The mapping between ReactNativeElement and their corresponding shadow node
-// also needs to be kept here because React removes the link when unmounting.
-const targetToShadowNodeMap: WeakMap<
-  ReactNativeElement,
-  ReturnType<typeof getNativeNodeReference>,
-> = new WeakMap();
-
 const targetToTokenMap: WeakMap<
   ReactNativeElement,
   NativeIntersectionObserverToken,
 > = new WeakMap();
 
-let modernNativeIntersectionObserver =
-  NativeIntersectionObserver == null
-    ? null
-    : NativeIntersectionObserver.observeV2 == null ||
-        NativeIntersectionObserver.unobserveV2 == null
-      ? null
-      : {
-          observe: NativeIntersectionObserver.observeV2,
-          unobserve: NativeIntersectionObserver.unobserveV2,
-        };
-
-if (
-  modernNativeIntersectionObserver &&
-  !ReactNativeFeatureFlags.utilizeTokensInIntersectionObserver()
-) {
-  modernNativeIntersectionObserver = null;
-}
-
 /**
  * Registers the given intersection observer and returns a unique ID for it,
  * which is required to start observing targets.
@@ -189,34 +164,19 @@ export function observe({
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  if (modernNativeIntersectionObserver == null) {
-    // Same for the mapping between the target and its shadow node.
-    targetToShadowNodeMap.set(target, targetNativeNodeReference);
-  }
-
   if (!isConnected) {
     NativeIntersectionObserver.connect(notifyIntersectionObservers);
     isConnected = true;
   }
 
-  if (modernNativeIntersectionObserver == null) {
-    NativeIntersectionObserver.observe({
-      intersectionObserverId,
-      rootShadowNode: rootNativeNodeReference,
-      targetShadowNode: targetNativeNodeReference,
-      thresholds: registeredObserver.observer.thresholds,
-      rootThresholds: registeredObserver.observer.rnRootThresholds,
-    });
-  } else {
-    const token = modernNativeIntersectionObserver.observe({
-      intersectionObserverId,
-      rootShadowNode: rootNativeNodeReference,
-      targetShadowNode: targetNativeNodeReference,
-      thresholds: registeredObserver.observer.thresholds,
-      rootThresholds: registeredObserver.observer.rnRootThresholds,
-    });
-    targetToTokenMap.set(target, token);
-  }
+  const token = nullthrows(NativeIntersectionObserver.observeV2)({
+    intersectionObserverId,
+    rootShadowNode: rootNativeNodeReference,
+    targetShadowNode: targetNativeNodeReference,
+    thresholds: registeredObserver.observer.thresholds,
+    rootThresholds: registeredObserver.observer.rnRootThresholds,
+  });
+  targetToTokenMap.set(target, token);
 
   return true;
 }
@@ -240,33 +200,18 @@ export function unobserve(
     return;
   }
 
-  if (modernNativeIntersectionObserver == null) {
-    const targetNativeNodeReference = targetToShadowNodeMap.get(target);
-    if (targetNativeNodeReference == null) {
-      console.error(
-        'IntersectionObserverManager: could not find registration data for target',
-      );
-      return;
-    }
-
-    NativeIntersectionObserver.unobserve(
-      intersectionObserverId,
-      targetNativeNodeReference,
-    );
-  } else {
-    const targetToken = targetToTokenMap.get(target);
-    if (targetToken == null) {
-      console.error(
-        'IntersectionObserverManager: could not find registration data for target',
-      );
-      return;
-    }
-
-    modernNativeIntersectionObserver.unobserve(
-      intersectionObserverId,
-      targetToken,
+  const targetToken = targetToTokenMap.get(target);
+  if (targetToken == null) {
+    console.error(
+      'IntersectionObserverManager: could not find registration data for target',
     );
+    return;
   }
+
+  nullthrows(NativeIntersectionObserver.unobserveV2)(
+    intersectionObserverId,
+    targetToken,
+  );
 }
 
 /**

package/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js

@@ -34,10 +34,6 @@ export type NativeIntersectionObserverObserveOptions = {
 export opaque type NativeIntersectionObserverToken = mixed;
 
 export interface Spec extends TurboModule {
-  // TODO(T223605846): Remove legacy observe method
-  +observe: (options: NativeIntersectionObserverObserveOptions) => void;
-  // TODO(T223605846): Remove legacy unobserve method
-  +unobserve: (intersectionObserverId: number, targetShadowNode: mixed) => void;
   +observeV2?: (
     options: NativeIntersectionObserverObserveOptions,
   ) => NativeIntersectionObserverToken;

package/src/private/webapis/mutationobserver/internals/MutationObserverManager.js

@@ -111,7 +111,7 @@ export function observe({
       // the public instance immediately when mutations occur. Otherwise React
       // could dereference it in the instance handle and we wouldn't be able to
       // access it.
-      // $FlowExpectedError[incompatible-call] This is typed as (mixed) => mixed in the native module because the codegen doesn't support the actual types.
+      // $FlowExpectedError[incompatible-type] This is typed as (mixed) => mixed in the native module because the codegen doesn't support the actual types.
       getPublicInstanceFromInternalInstanceHandle,
     );
     isConnected = true;

package/src/private/webapis/performance/EventTiming.js

@@ -15,9 +15,11 @@ import type {
   PerformanceEntryJSON,
 } from './PerformanceEntry';
 
-import {warnNoNativePerformance} from './internals/Utilities';
 import {PerformanceEntry} from './PerformanceEntry';
-import NativePerformance from './specs/NativePerformance';
+import MaybeNativePerformance from './specs/NativePerformance';
+import nullthrows from 'nullthrows';
+
+const NativePerformance = nullthrows(MaybeNativePerformance);
 
 export type PerformanceEventTimingJSON = {
   ...PerformanceEntryJSON,
@@ -86,18 +88,12 @@ function getCachedEventCounts(): Map<string, number> {
     return cachedEventCounts;
   }
 
-  if (!NativePerformance || !NativePerformance?.getEventCounts) {
-    warnNoNativePerformance();
-    cachedEventCounts = new Map();
-    return cachedEventCounts;
-  }
-
   const eventCounts = new Map<string, number>(
-    NativePerformance.getEventCounts?.() ?? [],
+    NativePerformance.getEventCounts() ?? [],
   );
   cachedEventCounts = eventCounts;
 
-  // $FlowFixMe[incompatible-call]
+  // $FlowFixMe[incompatible-type]
   global.queueMicrotask(() => {
     // To be consistent with the calls to the API from the same task,
     // but also not to refetch the data from native too often,