@office-iss/react-native-win32 0.0.0-canary.296 → 0.0.0-canary.298

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

@@ -23,9 +23,11 @@ import type IntersectionObserver, {
   IntersectionObserverCallback,
 } from '../IntersectionObserver';
 import type IntersectionObserverEntry from '../IntersectionObserverEntry';
+import type {NativeIntersectionObserverToken} from '../specs/NativeIntersectionObserver';
 
 import * as Systrace from '../../../../../Libraries/Performance/Systrace';
 import warnOnce from '../../../../../Libraries/Utilities/warnOnce';
+import * as ReactNativeFeatureFlags from '../../../featureflags/ReactNativeFeatureFlags';
 import {
   getInstanceHandle,
   getNativeNodeReference,
@@ -74,6 +76,29 @@ const targetToShadowNodeMap: WeakMap<
   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.
@@ -153,20 +178,32 @@ export function observe({
   // access it even after the instance handle has been unmounted.
   setTargetForInstanceHandle(instanceHandle, target);
 
-  // Same for the mapping between the target and its shadow node.
-  targetToShadowNodeMap.set(target, targetNativeNodeReference);
+  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;
   }
 
-  NativeIntersectionObserver.observe({
-    intersectionObserverId,
-    targetShadowNode: targetNativeNodeReference,
-    thresholds: registeredObserver.observer.thresholds,
-    rootThresholds: registeredObserver.observer.rnRootThresholds,
-  });
+  if (modernNativeIntersectionObserver == null) {
+    NativeIntersectionObserver.observe({
+      intersectionObserverId,
+      targetShadowNode: targetNativeNodeReference,
+      thresholds: registeredObserver.observer.thresholds,
+      rootThresholds: registeredObserver.observer.rnRootThresholds,
+    });
+  } else {
+    const token = modernNativeIntersectionObserver.observe({
+      intersectionObserverId,
+      targetShadowNode: targetNativeNodeReference,
+      thresholds: registeredObserver.observer.thresholds,
+      rootThresholds: registeredObserver.observer.rnRootThresholds,
+    });
+    targetToTokenMap.set(target, token);
+  }
 
   return true;
 }
@@ -190,18 +227,33 @@ export function unobserve(
     return;
   }
 
-  const targetNativeNodeReference = targetToShadowNodeMap.get(target);
-  if (targetNativeNodeReference == null) {
-    console.error(
-      'IntersectionObserverManager: could not find registration data for target',
+  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,
     );
-    return;
-  }
+  } else {
+    const targetToken = targetToTokenMap.get(target);
+    if (targetToken == null) {
+      console.error(
+        'IntersectionObserverManager: could not find registration data for target',
+      );
+      return;
+    }
 
-  NativeIntersectionObserver.unobserve(
-    intersectionObserverId,
-    targetNativeNodeReference,
-  );
+    modernNativeIntersectionObserver.unobserve(
+      intersectionObserverId,
+      targetToken,
+    );
+  }
 }
 
 /**

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

@@ -30,9 +30,20 @@ export type NativeIntersectionObserverObserveOptions = {
   rootThresholds?: ?$ReadOnlyArray<number>,
 };
 
+export 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;
+  +unobserveV2?: (
+    intersectionObserverId: number,
+    token: NativeIntersectionObserverToken,
+  ) => void;
   +connect: (notifyIntersectionObserversCallback: () => void) => void;
   +disconnect: () => void;
   +takeRecords: () => $ReadOnlyArray<NativeIntersectionObserverEntry>;

package/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';
 
 export type MutationObserverCallback = (
@@ -42,6 +43,7 @@ export interface MutationObserverInit {
  */
 export default class MutationObserver {
   _callback: MutationObserverCallback;
+  // TODO: delete in the next version.
   _observationTargets: Set<ReactNativeElement> = new Set();
   _mutationObserverId: ?MutationObserverId;
 
@@ -115,46 +117,11 @@ export default class MutationObserver {
 
     const mutationObserverId = this._getOrCreateMutationObserverId();
 
-    // As per the spec, if the target is already being observed, we "reset"
-    // the observation and only use the last options used.
-    if (this._observationTargets.has(target)) {
-      MutationObserverManager.unobserve(mutationObserverId, target);
-    }
-
-    const didStartObserving = MutationObserverManager.observe({
+    MutationObserverManager.observe({
       mutationObserverId,
       target,
       subtree: Boolean(options?.subtree),
     });
-
-    if (didStartObserving) {
-      this._observationTargets.add(target);
-    }
-  }
-
-  _unobserve(target: ReactNativeElement): void {
-    if (!(target instanceof ReactNativeElement)) {
-      throw new TypeError(
-        "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'ReactNativeElement'.",
-      );
-    }
-
-    if (!this._observationTargets.has(target)) {
-      return;
-    }
-
-    const mutationObserverId = this._mutationObserverId;
-    if (mutationObserverId == null) {
-      return;
-    }
-
-    MutationObserverManager.unobserve(mutationObserverId, target);
-    this._observationTargets.delete(target);
-
-    if (this._observationTargets.size === 0) {
-      MutationObserverManager.unregisterObserver(mutationObserverId);
-      this._mutationObserverId = null;
-    }
   }
 
   /**
@@ -162,9 +129,15 @@ export default class MutationObserver {
    * The observer can be reused by calling its `observe()` method again.
    */
   disconnect(): void {
-    for (const target of this._observationTargets.keys()) {
-      this._unobserve(target);
+    const mutationObserverId = this._mutationObserverId;
+    if (mutationObserverId == null) {
+      return;
     }
+
+    MutationObserverManager.unobserveAll(mutationObserverId);
+
+    MutationObserverManager.unregisterObserver(mutationObserverId);
+    this._mutationObserverId = null;
   }
 
   _getOrCreateMutationObserverId(): MutationObserverId {
@@ -184,3 +157,5 @@ export default class MutationObserver {
     return this._mutationObserverId;
   }
 }
+
+setPlatformObject(MutationObserver);

package/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 {

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

@@ -41,13 +41,6 @@ const registeredMutationObservers: Map<
   $ReadOnly<{observer: MutationObserver, callback: MutationObserverCallback}>,
 > = new Map();
 
-// The mapping between ReactNativeElement and their corresponding shadow node
-// needs to be kept here because React removes the link when unmounting.
-const targetToShadowNodeMap: WeakMap<
-  ReactNativeElement,
-  ReturnType<typeof getNativeNodeReference>,
-> = new WeakMap();
-
 /**
  * Registers the given mutation observer and returns a unique ID for it,
  * which is required to start observing targets.
@@ -90,10 +83,10 @@ export function observe({
   mutationObserverId: MutationObserverId,
   target: ReactNativeElement,
   subtree: boolean,
-}): boolean {
+}): void {
   if (NativeMutationObserver == null) {
     warnNoNativeMutationObserver();
-    return false;
+    return;
   }
 
   const registeredObserver =
@@ -102,17 +95,15 @@ export function observe({
     console.error(
       `MutationObserverManager: could not start observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
     );
-    return false;
+    return;
   }
 
   const targetShadowNode = getNativeNodeReference(target);
   if (targetShadowNode == null) {
     // The target is disconnected. We can't observe it anymore.
-    return false;
+    return;
   }
 
-  targetToShadowNodeMap.set(target, targetShadowNode);
-
   if (!isConnected) {
     NativeMutationObserver.connect(
       notifyMutationObservers,
@@ -131,14 +122,9 @@ export function observe({
     targetShadowNode,
     subtree,
   });
-
-  return true;
 }
 
-export function unobserve(
-  mutationObserverId: number,
-  target: ReactNativeElement,
-): void {
+export function unobserveAll(mutationObserverId: number): void {
   if (NativeMutationObserver == null) {
     warnNoNativeMutationObserver();
     return;
@@ -148,20 +134,12 @@ export function unobserve(
     registeredMutationObservers.get(mutationObserverId);
   if (registeredObserver == null) {
     console.error(
-      `MutationObserverManager: could not stop observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
-    );
-    return;
-  }
-
-  const targetShadowNode = targetToShadowNodeMap.get(target);
-  if (targetShadowNode == null) {
-    console.error(
-      'MutationObserverManager: could not find registration data for target',
+      `MutationObserverManager: could not disconnect MutationObserver with ID ${mutationObserverId} because it was not registered.`,
     );
     return;
   }
 
-  NativeMutationObserver.unobserve(mutationObserverId, targetShadowNode);
+  NativeMutationObserver.unobserveAll(mutationObserverId);
 }
 
 /**

package/src/private/webapis/mutationobserver/specs/NativeMutationObserver.js

@@ -36,10 +36,7 @@ export type NativeMutationObserverObserveOptions = {
 
 export interface Spec extends TurboModule {
   +observe: (options: NativeMutationObserverObserveOptions) => void;
-  +unobserve: (
-    mutationObserverId: number,
-    targetShadowNode: ShadowNode,
-  ) => void;
+  +unobserveAll: (mutationObserverId: number) => void;
   +connect: (
     notifyMutationObservers: () => void,
     // We need this to retain the public instance before React removes the

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

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // flowlint unsafe-getters-setters:off

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

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // flowlint unsafe-getters-setters:off

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

@@ -6,11 +6,12 @@
  *
  * @flow strict
  * @format
- * @oncall react_native
  */
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 type MemoryInfoLike = {
   jsHeapSizeLimit: ?number,
   totalJSHeapSize: ?number,
@@ -52,3 +53,5 @@ export default class MemoryInfo {
     return this.#usedJSHeapSize;
   }
 }
+
+setPlatformObject(MemoryInfo);

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

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // flowlint unsafe-getters-setters:off
@@ -17,6 +17,8 @@ import type {
 } from './PerformanceEntry';
 import type {DetailType, PerformanceMarkOptions} from './UserTiming';
 
+import DOMException from '../errors/DOMException';
+import {setPlatformObject} from '../webidl/PlatformObjects';
 import {EventCounts} from './EventTiming';
 import {
   performanceEntryTypeToRaw,
@@ -191,15 +193,22 @@ export default class Performance {
     let computedDuration = duration;
 
     if (NativePerformance?.measureWithResult) {
-      [computedStartTime, computedDuration] =
-        NativePerformance.measureWithResult(
-          measureName,
-          startTime,
-          endTime,
-          duration,
-          startMarkName,
-          endMarkName,
+      try {
+        [computedStartTime, computedDuration] =
+          NativePerformance.measureWithResult(
+            measureName,
+            startTime,
+            endTime,
+            duration,
+            startMarkName,
+            endMarkName,
+          );
+      } catch (error) {
+        throw new DOMException(
+          "Failed to execute 'measure' on 'Performance': " + error.message,
+          'SyntaxError',
         );
+      }
     } else {
       warnNoNativePerformance();
     }
@@ -283,3 +292,5 @@ export default class Performance {
     ).map(rawToPerformanceEntry);
   }
 }
+
+setPlatformObject(Performance);

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

@@ -4,12 +4,14 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // 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>;

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

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 import type {

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

@@ -6,11 +6,12 @@
  *
  * @flow strict
  * @format
- * @oncall react_native
  */
 
 // flowlint unsafe-getters-setters:off
 
+import {setPlatformObject} from '../webidl/PlatformObjects';
+
 type ReactNativeStartupTimingLike = {
   startTime: ?number,
   endTime: ?number,
@@ -89,3 +90,5 @@ export default class ReactNativeStartupTiming {
     return this.#executeJavaScriptBundleEntryPointEnd;
   }
 }
+
+setPlatformObject(ReactNativeStartupTiming);

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

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 // flowlint unsafe-getters-setters:off

package/src/private/webapis/performance/internals/RawPerformanceEntry.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 import type {PerformanceEntryType} from '../PerformanceEntry';
@@ -77,6 +77,8 @@ export function rawToPerformanceEntryType(
       return 'event';
     case RawPerformanceEntryTypeValues.LONGTASK:
       return 'longtask';
+    case RawPerformanceEntryTypeValues.RESOURCE:
+      return 'resource';
     default:
       throw new TypeError(
         `rawToPerformanceEntryType: unexpected performance entry type received: ${type}`,

package/src/private/webapis/performance/internals/Utilities.js

@@ -4,8 +4,8 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
  * @flow strict
+ * @format
  */
 
 import warnOnce from '../../../../../Libraries/Utilities/warnOnce';