react-native 0.71.4 → 0.72.0-rc.0

package/Libraries/WebPerformance/PerformanceObserver.js

@@ -8,62 +8,15 @@
  * @flow strict
  */
 
-import type {
-  RawPerformanceEntry,
-  RawPerformanceEntryType,
-} from './NativePerformanceObserver';
+import type {HighResTimeStamp, PerformanceEntryType} from './PerformanceEntry';
 
 import warnOnce from '../Utilities/warnOnce';
 import NativePerformanceObserver from './NativePerformanceObserver';
-
-export type HighResTimeStamp = number;
-// TODO: Extend once new types (such as event) are supported.
-// TODO: Get rid of the "undefined" once there is at least one type supported.
-export type PerformanceEntryType = 'undefined';
-
-export class PerformanceEntry {
-  name: string;
-  entryType: PerformanceEntryType;
-  startTime: HighResTimeStamp;
-  duration: number;
-
-  constructor(init: {
-    name: string,
-    entryType: PerformanceEntryType,
-    startTime: HighResTimeStamp,
-    duration: number,
-  }) {
-    this.name = init.name;
-    this.entryType = init.entryType;
-    this.startTime = init.startTime;
-    this.duration = init.duration;
-  }
-
-  // $FlowIgnore: Flow(unclear-type)
-  toJSON(): Object {
-    return {
-      name: this.name,
-      entryType: this.entryType,
-      startTime: this.startTime,
-      duration: this.duration,
-    };
-  }
-}
-
-function rawToPerformanceEntryType(
-  type: RawPerformanceEntryType,
-): PerformanceEntryType {
-  return 'undefined';
-}
-
-function rawToPerformanceEntry(entry: RawPerformanceEntry): PerformanceEntry {
-  return new PerformanceEntry({
-    name: entry.name,
-    entryType: rawToPerformanceEntryType(entry.entryType),
-    startTime: entry.startTime,
-    duration: entry.duration,
-  });
-}
+import {PerformanceEntry} from './PerformanceEntry';
+import {
+  performanceEntryTypeToRaw,
+  rawToPerformanceEntry,
+} from './RawPerformanceEntry';
 
 export type PerformanceEntryList = $ReadOnlyArray<PerformanceEntry>;
 
@@ -99,6 +52,8 @@ export class PerformanceObserverEntryList {
 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,
 ) => void;
 
 export type PerformanceObserverInit =
@@ -107,21 +62,73 @@ export type PerformanceObserverInit =
     }
   | {
       type: PerformanceEntryType,
+      durationThreshold?: HighResTimeStamp,
     };
 
-let _observedEntryTypeRefCount: Map<PerformanceEntryType, number> = new Map();
+type PerformanceObserverConfig = {|
+  callback: PerformanceObserverCallback,
+  // Map of {entryType: durationThreshold}
+  entryTypes: $ReadOnlyMap<PerformanceEntryType, ?number>,
+|};
 
-let _observers: Set<PerformanceObserver> = new Set();
+const observerCountPerEntryType: Map<PerformanceEntryType, number> = new Map();
+const registeredObservers: Map<PerformanceObserver, PerformanceObserverConfig> =
+  new Map();
+let isOnPerformanceEntryCallbackSet: boolean = false;
 
-let _onPerformanceEntryCallbackIsSet: 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;
+      }
+      const durationThreshold = observerConfig.entryTypes.get(entry.entryType);
+      return entry.duration >= (durationThreshold ?? 0);
+    });
+    observerConfig.callback(
+      new PerformanceObserverEntryList(entriesForObserver),
+      observer,
+      droppedEntriesCount,
+    );
+  }
+};
 
-function warnNoNativePerformanceObserver() {
+export function warnNoNativePerformanceObserver() {
   warnOnce(
     'missing-native-performance-observer',
     'Missing native implementation of PerformanceObserver',
   );
 }
 
+function applyDurationThresholds() {
+  const durationThresholds: Map<PerformanceEntryType, ?number> = Array.from(
+    registeredObservers.values(),
+  )
+    .map(config => config.entryTypes)
+    .reduce(
+      (accumulator, currentValue) => union(accumulator, currentValue),
+      new Map(),
+    );
+
+  for (const [entryType, durationThreshold] of durationThresholds) {
+    NativePerformanceObserver?.setDurationThreshold(
+      performanceEntryTypeToRaw(entryType),
+      durationThreshold ?? 0,
+    );
+  }
+}
+
 /**
  * Implementation of the PerformanceObserver interface for RN,
  * corresponding to the standard in https://www.w3.org/TR/performance-timeline/
@@ -144,38 +151,77 @@ function warnNoNativePerformanceObserver() {
  */
 export default class PerformanceObserver {
   _callback: PerformanceObserverCallback;
-  _entryTypes: $ReadOnlySet<PerformanceEntryType>;
+  _type: 'single' | 'multiple' | void;
 
   constructor(callback: PerformanceObserverCallback) {
     this._callback = callback;
   }
 
-  observe(options: PerformanceObserverInit) {
+  observe(options: PerformanceObserverInit): void {
     if (!NativePerformanceObserver) {
       warnNoNativePerformanceObserver();
       return;
     }
-    if (!_onPerformanceEntryCallbackIsSet) {
+
+    this._validateObserveOptions(options);
+
+    let requestedEntryTypes;
+
+    if (options.entryTypes) {
+      this._type = 'multiple';
+      requestedEntryTypes = new Map(
+        options.entryTypes.map(t => [t, undefined]),
+      );
+    } else {
+      this._type = 'single';
+      requestedEntryTypes = new Map([
+        [options.type, 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) {
+      return;
+    }
+
+    registeredObservers.set(this, {
+      callback: this._callback,
+      entryTypes: nextEntryTypes,
+    });
+
+    if (!isOnPerformanceEntryCallbackSet) {
       NativePerformanceObserver.setOnPerformanceEntryCallback(
         onPerformanceEntry,
       );
-      _onPerformanceEntryCallbackIsSet = true;
-    }
-    if (options.entryTypes) {
-      this._entryTypes = new Set(options.entryTypes);
-    } else {
-      this._entryTypes = new Set([options.type]);
+      isOnPerformanceEntryCallbackSet = true;
     }
-    this._entryTypes.forEach(type => {
-      if (!_observedEntryTypeRefCount.has(type)) {
-        NativePerformanceObserver.startReporting(type);
+
+    // 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);
       }
-      _observedEntryTypeRefCount.set(
+      observerCountPerEntryType.set(
         type,
-        (_observedEntryTypeRefCount.get(type) ?? 0) + 1,
+        (observerCountPerEntryType.get(type) ?? 0) + 1,
       );
-    });
-    _observers.add(this);
+    }
+    applyDurationThresholds();
   }
 
   disconnect(): void {
@@ -183,41 +229,90 @@ export default class PerformanceObserver {
       warnNoNativePerformanceObserver();
       return;
     }
-    this._entryTypes.forEach(type => {
-      const entryTypeRefCount = _observedEntryTypeRefCount.get(type) ?? 0;
-      if (entryTypeRefCount === 1) {
-        _observedEntryTypeRefCount.delete(type);
-        NativePerformanceObserver.stopReporting(type);
-      } else if (entryTypeRefCount !== 0) {
-        _observedEntryTypeRefCount.set(type, entryTypeRefCount - 1);
+
+    const observerConfig = registeredObservers.get(this);
+    if (!observerConfig) {
+      return;
+    }
+
+    // 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);
       }
-    });
-    _observers.delete(this);
-    if (_observers.size === 0) {
+    }
+
+    // Disconnect all observers if this was the last one
+    registeredObservers.delete(this);
+    if (registeredObservers.size === 0) {
       NativePerformanceObserver.setOnPerformanceEntryCallback(undefined);
-      _onPerformanceEntryCallbackIsSet = false;
+      isOnPerformanceEntryCallbackSet = false;
+    }
+
+    applyDurationThresholds();
+  }
+
+  _validateObserveOptions(options: PerformanceObserverInit): void {
+    const {type, entryTypes, durationThreshold} = options;
+
+    if (!type && !entryTypes) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'PerformanceObserver': An observe() call must not include both entryTypes and type arguments.",
+      );
+    }
+
+    if (entryTypes && type) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'PerformanceObserver': An observe() call must include either entryTypes or type arguments.",
+      );
+    }
+
+    if (this._type === 'multiple' && type) {
+      throw new Error(
+        "Failed to execute 'observe' on 'PerformanceObserver': This observer has performed observe({entryTypes:...}, therefore it cannot perform observe({type:...})",
+      );
+    }
+
+    if (this._type === 'single' && entryTypes) {
+      throw new Error(
+        "Failed to execute 'observe' on 'PerformanceObserver': This PerformanceObserver has performed observe({type:...}, therefore it cannot perform observe({entryTypes:...})",
+      );
+    }
+
+    if (entryTypes && durationThreshold !== undefined) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'PerformanceObserver': An observe() call must not include both entryTypes and durationThreshold arguments.",
+      );
     }
   }
 
   static supportedEntryTypes: $ReadOnlyArray<PerformanceEntryType> =
-    // TODO: add types once they are fully supported
-    Object.freeze([]);
+    Object.freeze(['mark', 'measure', 'event']);
 }
 
-// This is a callback that gets scheduled and periodically called from the native side
-function onPerformanceEntry() {
-  if (!NativePerformanceObserver) {
-    return;
+// As a Set union, except if value exists in both, we take minimum
+function union<T>(
+  a: $ReadOnlyMap<T, ?number>,
+  b: $ReadOnlyMap<T, ?number>,
+): Map<T, ?number> {
+  const res = new Map<T, ?number>();
+  for (const [k, v] of a) {
+    if (!b.has(k)) {
+      res.set(k, v);
+    } else {
+      res.set(k, Math.min(v ?? 0, b.get(k) ?? 0));
+    }
   }
-  const rawEntries = NativePerformanceObserver.getPendingEntries();
-  const entries = rawEntries.map(rawToPerformanceEntry);
-  _observers.forEach(observer => {
-    const entriesForObserver: PerformanceEntryList = entries.filter(entry =>
-      observer._entryTypes.has(entry.entryType),
-    );
-    observer._callback(
-      new PerformanceObserverEntryList(entriesForObserver),
-      observer,
-    );
-  });
+  return res;
+}
+
+function difference<T>(a: $ReadOnlySet<T>, b: $ReadOnlySet<T>): Set<T> {
+  return new Set([...a].filter(x => !b.has(x)));
 }

package/Libraries/WebPerformance/RawPerformanceEntry.js

@@ -0,0 +1,87 @@
+/**
+ * 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 type {
+  RawPerformanceEntry,
+  RawPerformanceEntryType,
+} from './NativePerformanceObserver';
+import type {PerformanceEntryType} from './PerformanceEntry';
+
+import {PerformanceEntry} from './PerformanceEntry';
+import {PerformanceEventTiming} from './PerformanceEventTiming';
+
+export const RawPerformanceEntryTypeValues = {
+  UNDEFINED: 0,
+  MARK: 1,
+  MEASURE: 2,
+  EVENT: 3,
+};
+
+export function rawToPerformanceEntry(
+  entry: RawPerformanceEntry,
+): PerformanceEntry {
+  if (entry.entryType === RawPerformanceEntryTypeValues.EVENT) {
+    return new PerformanceEventTiming({
+      name: entry.name,
+      startTime: entry.startTime,
+      duration: entry.duration,
+      processingStart: entry.processingStart,
+      processingEnd: entry.processingEnd,
+      interactionId: entry.interactionId,
+    });
+  } else {
+    return new PerformanceEntry({
+      name: entry.name,
+      entryType: rawToPerformanceEntryType(entry.entryType),
+      startTime: entry.startTime,
+      duration: entry.duration,
+    });
+  }
+}
+
+export function rawToPerformanceEntryType(
+  type: RawPerformanceEntryType,
+): PerformanceEntryType {
+  switch (type) {
+    case RawPerformanceEntryTypeValues.MARK:
+      return 'mark';
+    case RawPerformanceEntryTypeValues.MEASURE:
+      return 'measure';
+    case RawPerformanceEntryTypeValues.EVENT:
+      return 'event';
+    case RawPerformanceEntryTypeValues.UNDEFINED:
+      throw new TypeError(
+        "rawToPerformanceEntryType: UNDEFINED can't be cast to PerformanceEntryType",
+      );
+    default:
+      throw new TypeError(
+        `rawToPerformanceEntryType: unexpected performance entry type received: ${type}`,
+      );
+  }
+}
+
+export function performanceEntryTypeToRaw(
+  type: PerformanceEntryType,
+): RawPerformanceEntryType {
+  switch (type) {
+    case 'mark':
+      return RawPerformanceEntryTypeValues.MARK;
+    case 'measure':
+      return RawPerformanceEntryTypeValues.MEASURE;
+    case 'event':
+      return RawPerformanceEntryTypeValues.EVENT;
+    default:
+      // Verify exhaustive check with Flow
+      (type: empty);
+      throw new TypeError(
+        `performanceEntryTypeToRaw: unexpected performance entry type received: ${type}`,
+      );
+  }
+}

package/Libraries/WebPerformance/ReactNativeStartupTiming.js

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ * @oncall react_native
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import type {ReactNativeStartupTiming as ReactNativeStartupTimingType} from './NativePerformance';
+
+// Read-only object with RN startup timing information.
+// This is returned by the performance.reactNativeStartup API.
+export default class ReactNativeStartupTiming {
+  // All time information here are in ms. To match web spec,
+  // the default value for timings are zero if not present.
+  // See https://www.w3.org/TR/performance-timeline/#performancetiming-interface
+  _startTime = 0;
+  _endTime = 0;
+  _executeJavaScriptBundleEntryPointStart = 0;
+  _executeJavaScriptBundleEntryPointEnd = 0;
+
+  constructor(startUpTiming: ?ReactNativeStartupTimingType) {
+    if (startUpTiming != null) {
+      this._startTime = startUpTiming.startTime;
+      this._endTime = startUpTiming.endTime;
+      this._executeJavaScriptBundleEntryPointStart =
+        startUpTiming.executeJavaScriptBundleEntryPointStart;
+      this._executeJavaScriptBundleEntryPointEnd =
+        startUpTiming.executeJavaScriptBundleEntryPointEnd;
+    }
+  }
+
+  /**
+   *  Start time of the RN app startup process. This is provided by the platform by implementing the `ReactMarker.setAppStartTime` API in the native platform code.
+   */
+  get startTime(): number {
+    return this._startTime;
+  }
+
+  /**
+   * End time of the RN app startup process. This is equal to `executeJavaScriptBundleEntryPointEnd`.
+   */
+  get endTime(): number {
+    return this._endTime;
+  }
+
+  /**
+   * Start time of JS bundle being executed. This indicates the RN JS bundle is loaded and start to be evaluated.
+   */
+  get executeJavaScriptBundleEntryPointStart(): number {
+    return this._executeJavaScriptBundleEntryPointStart;
+  }
+
+  /**
+   * End time of JS bundle being executed. This indicates all the synchronous entry point jobs are finished.
+   */
+  get executeJavaScriptBundleEntryPointEnd(): number {
+    return this._executeJavaScriptBundleEntryPointEnd;
+  }
+}

package/Libraries/WebPerformance/__mocks__/NativePerformance.js

@@ -0,0 +1,65 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {
+  NativeMemoryInfo,
+  ReactNativeStartupTiming,
+  Spec as NativePerformance,
+} from '../NativePerformance';
+
+import NativePerformanceObserver from '../NativePerformanceObserver';
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+const marks: Map<string, number> = new Map();
+
+const NativePerformanceMock: NativePerformance = {
+  mark: (name: string, startTime: number, duration: number): void => {
+    NativePerformanceObserver?.logRawEntry({
+      name,
+      entryType: RawPerformanceEntryTypeValues.MARK,
+      startTime,
+      duration,
+    });
+    marks.set(name, startTime);
+  },
+
+  measure: (
+    name: string,
+    startTime: number,
+    endTime: number,
+    duration?: number,
+    startMark?: string,
+    endMark?: string,
+  ): void => {
+    const start = startMark != null ? marks.get(startMark) ?? 0 : startTime;
+    const end = endMark != null ? marks.get(endMark) ?? 0 : endTime;
+    NativePerformanceObserver?.logRawEntry({
+      name,
+      entryType: RawPerformanceEntryTypeValues.MEASURE,
+      startTime: start,
+      duration: duration ?? (end ? end - start : 0),
+    });
+  },
+
+  getSimpleMemoryInfo: (): NativeMemoryInfo => {
+    return {};
+  },
+
+  getReactNativeStartupTiming: (): ReactNativeStartupTiming => {
+    return {
+      startTime: 0,
+      endTime: 0,
+      executeJavaScriptBundleEntryPointStart: 0,
+      executeJavaScriptBundleEntryPointEnd: 0,
+    };
+  },
+};
+
+export default NativePerformanceMock;

package/Libraries/WebPerformance/__mocks__/NativePerformanceObserver.js

@@ -0,0 +1,101 @@
+/**
+ * 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.
+ *
+ * @flow strict
+ * @format
+ */
+
+import type {
+  GetPendingEntriesResult,
+  RawPerformanceEntry,
+  RawPerformanceEntryType,
+  Spec as NativePerformanceObserver,
+} from '../NativePerformanceObserver';
+
+import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
+
+const reportingType: Set<RawPerformanceEntryType> = new Set();
+const eventCounts: Map<string, number> = new Map();
+const durationThresholds: Map<RawPerformanceEntryType, number> = new Map();
+let entries: Array<RawPerformanceEntry> = [];
+let onPerformanceEntryCallback: ?() => void;
+
+const NativePerformanceObserverMock: NativePerformanceObserver = {
+  startReporting: (entryType: RawPerformanceEntryType) => {
+    reportingType.add(entryType);
+  },
+
+  stopReporting: (entryType: RawPerformanceEntryType) => {
+    reportingType.delete(entryType);
+    durationThresholds.delete(entryType);
+  },
+
+  popPendingEntries: (): GetPendingEntriesResult => {
+    const res = entries;
+    entries = [];
+    return {
+      droppedEntriesCount: 0,
+      entries: res,
+    };
+  },
+
+  setOnPerformanceEntryCallback: (callback?: () => void) => {
+    onPerformanceEntryCallback = callback;
+  },
+
+  logRawEntry: (entry: RawPerformanceEntry) => {
+    if (reportingType.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);
+    }
+  },
+
+  getEventCounts: (): $ReadOnlyArray<[string, number]> => {
+    return Array.from(eventCounts.entries());
+  },
+
+  setDurationThreshold: (
+    entryType: RawPerformanceEntryType,
+    durationThreshold: number,
+  ) => {
+    durationThresholds.set(entryType, durationThreshold);
+  },
+
+  clearEntries: (entryType: RawPerformanceEntryType, entryName?: string) => {
+    entries = entries.filter(
+      e =>
+        e.entryType === entryType &&
+        (entryName == null || e.name === entryName),
+    );
+  },
+
+  getEntries: (
+    entryType?: RawPerformanceEntryType,
+    entryName?: string,
+  ): $ReadOnlyArray<RawPerformanceEntry> => {
+    return entries.filter(
+      e =>
+        (entryType == null || e.entryType === entryType) &&
+        (entryName == null || e.name === entryName),
+    );
+  },
+};
+
+export default NativePerformanceObserverMock;