@office-iss/react-native-win32 0.0.0-canary.266 → 0.0.0-canary.268

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

@@ -13,7 +13,6 @@ import type {
   PerformanceEntryType,
 } from './PerformanceEntry';
 
-import warnOnce from '../../../../Libraries/Utilities/warnOnce';
 import {PerformanceEventTiming} from './EventTiming';
 import {PerformanceEntry} from './PerformanceEntry';
 import {
@@ -22,6 +21,8 @@ import {
   rawToPerformanceEntryType,
 } from './RawPerformanceEntry';
 import NativePerformanceObserver from './specs/NativePerformanceObserver';
+import type {OpaqueNativeObserverHandle} from './specs/NativePerformanceObserver';
+import {warnNoNativePerformanceObserver} from './Utilities';
 
 export type PerformanceEntryList = $ReadOnlyArray<PerformanceEntry>;
 
@@ -56,89 +57,24 @@ export class PerformanceObserverEntryList {
   }
 }
 
+export type PerformanceObserverCallbackOptions = {
+  droppedEntriesCount: number,
+};
+
 export type PerformanceObserverCallback = (
   list: PerformanceObserverEntryList,
   observer: PerformanceObserver,
   // The number of buffered entries which got dropped from the buffer due to the buffer being full:
-  droppedEntryCount?: number,
+  options?: PerformanceObserverCallbackOptions,
 ) => void;
 
-export type PerformanceObserverInit =
-  | {
-      entryTypes: Array<PerformanceEntryType>,
-    }
-  | {
-      type: PerformanceEntryType,
-      durationThreshold?: DOMHighResTimeStamp,
-    };
-
-type PerformanceObserverConfig = {|
-  callback: PerformanceObserverCallback,
-  entryTypes: $ReadOnlySet<PerformanceEntryType>,
-  durationThreshold: ?number,
-|};
-
-const observerCountPerEntryType: Map<PerformanceEntryType, number> = new Map();
-const registeredObservers: Map<PerformanceObserver, PerformanceObserverConfig> =
-  new Map();
-let isOnPerformanceEntryCallbackSet: boolean = false;
-
-// This is a callback that gets scheduled and periodically called from the native side
-const onPerformanceEntry = () => {
-  if (!NativePerformanceObserver) {
-    return;
-  }
-  const entryResult = NativePerformanceObserver.popPendingEntries();
-  const rawEntries = entryResult?.entries ?? [];
-  const droppedEntriesCount = entryResult?.droppedEntriesCount;
-  if (rawEntries.length === 0) {
-    return;
-  }
-  const entries = rawEntries.map(rawToPerformanceEntry);
-  for (const [observer, observerConfig] of registeredObservers.entries()) {
-    const entriesForObserver: PerformanceEntryList = entries.filter(entry => {
-      if (!observerConfig.entryTypes.has(entry.entryType)) {
-        return false;
-      }
-
-      if (
-        entry.entryType === 'event' &&
-        observerConfig.durationThreshold != null
-      ) {
-        return entry.duration >= observerConfig.durationThreshold;
-      }
-
-      return true;
-    });
-    if (entriesForObserver.length !== 0) {
-      try {
-        observerConfig.callback(
-          new PerformanceObserverEntryList(entriesForObserver),
-          observer,
-          droppedEntriesCount,
-        );
-      } catch (error) {
-        console.error(error);
-      }
-    }
-  }
+export type PerformanceObserverInit = {
+  entryTypes?: Array<PerformanceEntryType>,
+  type?: PerformanceEntryType,
+  buffered?: boolean,
+  durationThreshold?: DOMHighResTimeStamp,
 };
 
-export function warnNoNativePerformanceObserver() {
-  warnOnce(
-    'missing-native-performance-observer',
-    'Missing native implementation of PerformanceObserver',
-  );
-}
-
-function applyDurationThresholds() {
-  const durationThresholds = Array.from(registeredObservers.values())
-    .map(observerConfig => observerConfig.durationThreshold)
-    .filter(Boolean);
-
-  return Math.min(...durationThresholds);
-}
-
 function getSupportedPerformanceEntryTypes(): $ReadOnlyArray<PerformanceEntryType> {
   if (!NativePerformanceObserver) {
     return Object.freeze([]);
@@ -175,111 +111,96 @@ function getSupportedPerformanceEntryTypes(): $ReadOnlyArray<PerformanceEntryTyp
  * observer.observe({ type: "event" });
  */
 export class PerformanceObserver {
+  #nativeObserverHandle: OpaqueNativeObserverHandle | null = null;
   #callback: PerformanceObserverCallback;
   #type: 'single' | 'multiple' | void;
+  #calledAtLeastOnce = false;
 
   constructor(callback: PerformanceObserverCallback) {
     this.#callback = callback;
   }
 
   observe(options: PerformanceObserverInit): void {
-    if (!NativePerformanceObserver) {
+    if (
+      !NativePerformanceObserver ||
+      NativePerformanceObserver.observe == null
+    ) {
       warnNoNativePerformanceObserver();
       return;
     }
 
     this.#validateObserveOptions(options);
 
-    let requestedEntryTypes;
+    if (this.#nativeObserverHandle == null) {
+      this.#nativeObserverHandle = this.#createNativeObserver();
+    }
 
     if (options.entryTypes) {
       this.#type = 'multiple';
-      requestedEntryTypes = new Set(options.entryTypes);
-    } else {
+      NativePerformanceObserver.observe?.(this.#nativeObserverHandle, {
+        entryTypes: options.entryTypes.map(performanceEntryTypeToRaw),
+      });
+    } else if (options.type) {
       this.#type = 'single';
-      requestedEntryTypes = new Set([options.type]);
+      NativePerformanceObserver.observe?.(this.#nativeObserverHandle, {
+        type: performanceEntryTypeToRaw(options.type),
+        buffered: options.buffered,
+        durationThreshold: options.durationThreshold,
+      });
     }
+  }
 
-    // The same observer may receive multiple calls to "observe", so we need
-    // to check what is new on this call vs. previous ones.
-    const currentEntryTypes = registeredObservers.get(this)?.entryTypes;
-    const nextEntryTypes = currentEntryTypes
-      ? union(requestedEntryTypes, currentEntryTypes)
-      : requestedEntryTypes;
-
-    // This `observe` call is a no-op because there are no new things to observe.
-    if (currentEntryTypes && currentEntryTypes.size === nextEntryTypes.size) {
+  disconnect(): void {
+    if (!NativePerformanceObserver) {
+      warnNoNativePerformanceObserver();
       return;
     }
 
-    registeredObservers.set(this, {
-      callback: this.#callback,
-      durationThreshold:
-        options.type === 'event' ? options.durationThreshold : undefined,
-      entryTypes: nextEntryTypes,
-    });
-
-    if (!isOnPerformanceEntryCallbackSet) {
-      NativePerformanceObserver.setOnPerformanceEntryCallback(
-        onPerformanceEntry,
-      );
-      isOnPerformanceEntryCallbackSet = true;
+    if (
+      this.#nativeObserverHandle == null ||
+      !NativePerformanceObserver.disconnect
+    ) {
+      return;
     }
 
-    // We only need to start listenening to new entry types being observed in
-    // this observer.
-    const newEntryTypes = currentEntryTypes
-      ? difference(
-          new Set(requestedEntryTypes.keys()),
-          new Set(currentEntryTypes.keys()),
-        )
-      : new Set(requestedEntryTypes.keys());
-    for (const type of newEntryTypes) {
-      if (!observerCountPerEntryType.has(type)) {
-        const rawType = performanceEntryTypeToRaw(type);
-        NativePerformanceObserver.startReporting(rawType);
-      }
-      observerCountPerEntryType.set(
-        type,
-        (observerCountPerEntryType.get(type) ?? 0) + 1,
-      );
-    }
-    applyDurationThresholds();
+    NativePerformanceObserver.disconnect(this.#nativeObserverHandle);
   }
 
-  disconnect(): void {
-    if (!NativePerformanceObserver) {
+  #createNativeObserver(): OpaqueNativeObserverHandle {
+    if (
+      !NativePerformanceObserver ||
+      !NativePerformanceObserver.createObserver
+    ) {
       warnNoNativePerformanceObserver();
       return;
     }
 
-    const observerConfig = registeredObservers.get(this);
-    if (!observerConfig) {
-      return;
-    }
+    this.#calledAtLeastOnce = false;
 
-    // Disconnect this observer
-    for (const type of observerConfig.entryTypes.keys()) {
-      const numberOfObserversForThisType =
-        observerCountPerEntryType.get(type) ?? 0;
-      if (numberOfObserversForThisType === 1) {
-        observerCountPerEntryType.delete(type);
-        NativePerformanceObserver.stopReporting(
-          performanceEntryTypeToRaw(type),
-        );
-      } else if (numberOfObserversForThisType !== 0) {
-        observerCountPerEntryType.set(type, numberOfObserversForThisType - 1);
+    return NativePerformanceObserver.createObserver(() => {
+      // $FlowNotNull
+      const rawEntries = NativePerformanceObserver.takeRecords?.(
+        this.#nativeObserverHandle,
+        true, // sort records
+      );
+      if (!rawEntries) {
+        return;
       }
-    }
 
-    // Disconnect all observers if this was the last one
-    registeredObservers.delete(this);
-    if (registeredObservers.size === 0) {
-      NativePerformanceObserver.setOnPerformanceEntryCallback(undefined);
-      isOnPerformanceEntryCallbackSet = false;
-    }
+      const entries = rawEntries.map(rawToPerformanceEntry);
+      const entryList = new PerformanceObserverEntryList(entries);
+
+      let droppedEntriesCount = 0;
+      if (!this.#calledAtLeastOnce) {
+        droppedEntriesCount =
+          NativePerformanceObserver.getDroppedEntriesCount?.(
+            this.#nativeObserverHandle,
+          ) ?? 0;
+        this.#calledAtLeastOnce = true;
+      }
 
-    applyDurationThresholds();
+      this.#callback(entryList, this, {droppedEntriesCount});
+    });
   }
 
   #validateObserveOptions(options: PerformanceObserverInit): void {
@@ -309,7 +230,7 @@ export class PerformanceObserver {
       );
     }
 
-    if (entryTypes && durationThreshold !== undefined) {
+    if (entryTypes && durationThreshold != null) {
       throw new TypeError(
         "Failed to execute 'observe' on 'PerformanceObserver': An observe() call must not include both entryTypes and durationThreshold arguments.",
       );
@@ -320,12 +241,4 @@ export class PerformanceObserver {
     getSupportedPerformanceEntryTypes();
 }
 
-function union<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {
-  return new Set([...a, ...b]);
-}
-
-function difference<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {
-  return new Set([...a].filter(x => !b.has(x)));
-}
-
 export {PerformanceEventTiming};

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

@@ -0,0 +1,25 @@
+/**
+ * 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.
+ *
+ * @format
+ * @flow strict
+ */
+
+import warnOnce from '../../../../Libraries/Utilities/warnOnce';
+
+export function warnNoNativePerformance() {
+  warnOnce(
+    'missing-native-performance',
+    'Missing native implementation of Performance',
+  );
+}
+
+export function warnNoNativePerformanceObserver() {
+  warnOnce(
+    'missing-native-performance-observer',
+    'Missing native implementation of PerformanceObserver',
+  );
+}

package/src/private/webapis/performance/specs/NativePerformanceObserver.js

@@ -14,6 +14,10 @@ import * as TurboModuleRegistry from '../../../../../Libraries/TurboModule/Turbo
 
 export type RawPerformanceEntryType = number;
 
+export type OpaqueNativeObserverHandle = mixed;
+
+export type NativeBatchedObserverCallback = () => void;
+
 export type RawPerformanceEntry = {|
   name: string,
   entryType: RawPerformanceEntryType,
@@ -25,26 +29,30 @@ export type RawPerformanceEntry = {|
   interactionId?: number,
 |};
 
-export type GetPendingEntriesResult = {|
-  entries: $ReadOnlyArray<RawPerformanceEntry>,
-  droppedEntriesCount: number,
-|};
+export type PerformanceObserverInit = {
+  entryTypes?: $ReadOnlyArray<number>,
+  type?: number,
+  buffered?: boolean,
+  durationThreshold?: number,
+};
 
 export interface Spec extends TurboModule {
-  +startReporting: (entryType: RawPerformanceEntryType) => void;
-  +stopReporting: (entryType: RawPerformanceEntryType) => void;
-  +setIsBuffered: (
-    entryTypes: $ReadOnlyArray<RawPerformanceEntryType>,
-    isBuffered: boolean,
-  ) => void;
-  +popPendingEntries: () => GetPendingEntriesResult;
-  +setOnPerformanceEntryCallback: (callback?: () => void) => void;
-  +logRawEntry: (entry: RawPerformanceEntry) => void;
   +getEventCounts: () => $ReadOnlyArray<[string, number]>;
-  +setDurationThreshold: (
-    entryType: RawPerformanceEntryType,
-    durationThreshold: number,
+  +createObserver?: (
+    callback: NativeBatchedObserverCallback,
+  ) => OpaqueNativeObserverHandle;
+  +getDroppedEntriesCount?: (observer: OpaqueNativeObserverHandle) => number;
+
+  +observe?: (
+    observer: OpaqueNativeObserverHandle,
+    options: PerformanceObserverInit,
   ) => void;
+  +disconnect?: (observer: OpaqueNativeObserverHandle) => void;
+  +takeRecords?: (
+    observer: OpaqueNativeObserverHandle,
+    sort: boolean,
+  ) => $ReadOnlyArray<RawPerformanceEntry>;
+
   +clearEntries: (
     entryType?: RawPerformanceEntryType,
     entryName?: string,

package/src/private/webapis/performance/specs/__mocks__/NativePerformance.js

@@ -11,23 +11,24 @@
 import type {
   NativeMemoryInfo,
   ReactNativeStartupTiming,
-  Spec as NativePerformance,
 } from '../NativePerformance';
 
 import {RawPerformanceEntryTypeValues} from '../../RawPerformanceEntry';
-import NativePerformanceObserver from '../NativePerformanceObserver';
+import NativePerformance from '../NativePerformance';
+import {logMockEntry} from './NativePerformanceObserver';
 
 const marks: Map<string, number> = new Map();
 
-const NativePerformanceMock: NativePerformance = {
+const NativePerformanceMock: typeof NativePerformance = {
   mark: (name: string, startTime: number): void => {
-    NativePerformanceObserver?.logRawEntry({
-      name,
+    NativePerformance?.mark(name, startTime);
+    marks.set(name, startTime);
+    logMockEntry({
       entryType: RawPerformanceEntryTypeValues.MARK,
+      name,
       startTime,
       duration: 0,
     });
-    marks.set(name, startTime);
   },
 
   measure: (
@@ -40,11 +41,12 @@ const NativePerformanceMock: NativePerformance = {
   ): void => {
     const start = startMark != null ? marks.get(startMark) ?? 0 : startTime;
     const end = endMark != null ? marks.get(endMark) ?? 0 : endTime;
-    NativePerformanceObserver?.logRawEntry({
-      name,
+    NativePerformance?.measure(name, start, end);
+    logMockEntry({
       entryType: RawPerformanceEntryTypeValues.MEASURE,
+      name,
       startTime: start,
-      duration: duration ?? (end ? end - start : 0),
+      duration: duration ?? end - start,
     });
   },
 

package/src/private/webapis/performance/specs/__mocks__/NativePerformanceObserver.js

@@ -9,90 +9,117 @@
  */
 
 import type {
-  GetPendingEntriesResult,
+  NativeBatchedObserverCallback,
   RawPerformanceEntry,
   RawPerformanceEntryType,
+  OpaqueNativeObserverHandle,
+  PerformanceObserverInit,
   Spec as NativePerformanceObserver,
 } from '../NativePerformanceObserver';
 
 import {RawPerformanceEntryTypeValues} from '../../RawPerformanceEntry';
 
-const reportingType: Set<RawPerformanceEntryType> = new Set();
-const isAlwaysLogged: Set<RawPerformanceEntryType> = new Set();
+jest.mock(
+  '../NativePerformance',
+  () => require('../__mocks__/NativePerformance').default,
+);
+
+jest.mock(
+  '../NativePerformanceObserver',
+  () => require('../__mocks__/NativePerformanceObserver').default,
+);
+
 const eventCounts: Map<string, number> = new Map();
-const durationThresholds: Map<RawPerformanceEntryType, number> = new Map();
+let observers: MockObserver[] = [];
 let entries: Array<RawPerformanceEntry> = [];
-let onPerformanceEntryCallback: ?() => void;
 
-const NativePerformanceObserverMock: NativePerformanceObserver = {
-  startReporting: (entryType: RawPerformanceEntryType) => {
-    reportingType.add(entryType);
-  },
+export function logMockEntry(entry: RawPerformanceEntry) {
+  entries.push(entry);
 
-  stopReporting: (entryType: RawPerformanceEntryType) => {
-    reportingType.delete(entryType);
-    durationThresholds.delete(entryType);
-  },
+  if (entry.entryType === RawPerformanceEntryTypeValues.EVENT) {
+    eventCounts.set(entry.name, (eventCounts.get(entry.name) ?? 0) + 1);
+  }
+
+  for (const observer of observers) {
+    if (
+      observer.options.type !== entry.entryType &&
+      !observer.options.entryTypes?.includes(entry.entryType)
+    ) {
+      continue;
+    }
 
-  setIsBuffered: (
-    entryTypes: $ReadOnlyArray<RawPerformanceEntryType>,
-    isBuffered: boolean,
-  ) => {
-    for (const entryType of entryTypes) {
-      if (isBuffered) {
-        isAlwaysLogged.add(entryType);
-      } else {
-        isAlwaysLogged.delete(entryType);
+    if (entry.entryType === RawPerformanceEntryTypeValues.EVENT) {
+      const {durationThreshold = 0} = observer.options;
+      if (durationThreshold > 0 && entry.duration < durationThreshold) {
+        continue;
       }
     }
+
+    observer.entries.push(entry);
+
+    // $FlowFixMe[incompatible-call]
+    global.queueMicrotask(() => {
+      // We want to emulate the way it's done in native (i.e. async/batched)
+      observer.callback();
+    });
+  }
+}
+
+type MockObserver = {
+  callback: NativeBatchedObserverCallback,
+  entries: Array<RawPerformanceEntry>,
+  options: PerformanceObserverInit,
+  droppedEntriesCount: number,
+};
+
+const NativePerformanceObserverMock: NativePerformanceObserver = {
+  getEventCounts: (): $ReadOnlyArray<[string, number]> => {
+    return Array.from(eventCounts.entries());
   },
 
-  popPendingEntries: (): GetPendingEntriesResult => {
-    const res = entries;
-    entries = [];
-    return {
+  createObserver: (
+    callback: NativeBatchedObserverCallback,
+  ): OpaqueNativeObserverHandle => {
+    const observer: MockObserver = {
+      callback,
+      entries: [],
+      options: {},
       droppedEntriesCount: 0,
-      entries: res,
     };
+
+    return observer;
   },
 
-  setOnPerformanceEntryCallback: (callback?: () => void) => {
-    onPerformanceEntryCallback = callback;
+  getDroppedEntriesCount: (observer: OpaqueNativeObserverHandle): number => {
+    // $FlowFixMe
+    const mockObserver = (observer: any) as MockObserver;
+    return mockObserver.droppedEntriesCount;
   },
 
-  logRawEntry: (entry: RawPerformanceEntry) => {
-    if (
-      reportingType.has(entry.entryType) ||
-      isAlwaysLogged.has(entry.entryType)
-    ) {
-      const durationThreshold = durationThresholds.get(entry.entryType);
-      if (
-        durationThreshold !== undefined &&
-        entry.duration < durationThreshold
-      ) {
-        return;
-      }
-      entries.push(entry);
-      // $FlowFixMe[incompatible-call]
-      global.queueMicrotask(() => {
-        // We want to emulate the way it's done in native (i.e. async/batched)
-        onPerformanceEntryCallback?.();
-      });
-    }
-    if (entry.entryType === RawPerformanceEntryTypeValues.EVENT) {
-      eventCounts.set(entry.name, (eventCounts.get(entry.name) ?? 0) + 1);
-    }
+  observe: (
+    observer: OpaqueNativeObserverHandle,
+    options: PerformanceObserverInit,
+  ): void => {
+    // $FlowFixMe
+    const mockObserver = (observer: any) as MockObserver;
+    mockObserver.options = options;
+    observers.push(mockObserver);
   },
 
-  getEventCounts: (): $ReadOnlyArray<[string, number]> => {
-    return Array.from(eventCounts.entries());
+  disconnect: (observer: OpaqueNativeObserverHandle): void => {
+    // $FlowFixMe
+    const mockObserver = (observer: any) as MockObserver;
+    observers = observers.filter(e => e !== mockObserver);
   },
 
-  setDurationThreshold: (
-    entryType: RawPerformanceEntryType,
-    durationThreshold: number,
-  ) => {
-    durationThresholds.set(entryType, durationThreshold);
+  takeRecords: (
+    observer: OpaqueNativeObserverHandle,
+  ): $ReadOnlyArray<RawPerformanceEntry> => {
+    // $FlowFixMe
+    const mockObserver = (observer: any) as MockObserver;
+    const observerEntries = mockObserver.entries;
+    mockObserver.entries = [];
+    return observerEntries;
   },
 
   clearEntries: (entryType?: RawPerformanceEntryType, entryName?: string) => {

package/types/experimental.d.ts

@@ -50,7 +50,7 @@ declare module '.' {
   }
 
   export interface ViewStyle {
-    experimental_mixBlendMode?: BlendMode | undefined;
+    mixBlendMode?: BlendMode | undefined;
     experimental_backgroundImage?:
       | ReadonlyArray<GradientValue>
       | string

package/types/index.d.ts

@@ -104,7 +104,6 @@ export * from '../Libraries/Components/View/ViewAccessibility';
 export * from '../Libraries/Components/View/ViewPropTypes';
 export * from '../Libraries/Components/Button';
 export * from '../Libraries/Core/registerCallableModule';
-export * from '../Libraries/DevToolsSettings/DevToolsSettingsManager';
 export * from '../Libraries/EventEmitter/NativeEventEmitter';
 export * from '../Libraries/EventEmitter/RCTDeviceEventEmitter';
 export * from '../Libraries/EventEmitter/RCTNativeAppEventEmitter';
@@ -142,6 +141,7 @@ export * as TurboModuleRegistry from '../Libraries/TurboModule/TurboModuleRegist
 export * from '../Libraries/Types/CoreEventTypes';
 export * from '../Libraries/Utilities/Appearance';
 export * from '../Libraries/Utilities/BackHandler';
+export * from '../src/private/devmenu/DevMenu';
 export * from '../Libraries/Utilities/DevSettings';
 export * from '../Libraries/Utilities/Dimensions';
 export * from '../Libraries/Utilities/PixelRatio';

package/types/public/ReactNativeTypes.d.ts

@@ -111,10 +111,6 @@ export interface NativeMethods {
    * Removes focus from an input or view. This is the opposite of `focus()`.
    */
   blur(): void;
-
-  refs: {
-    [key: string]: React.Component<any, any>;
-  };
 }
 
 /**