@office-iss/react-native-win32 0.72.8 → 0.73.0-preview.2

package/Libraries/WebPerformance/PerformanceEventTiming.js

@@ -8,10 +8,18 @@
  * @flow strict
  */
 
-import type {HighResTimeStamp} from './PerformanceEntry';
+import type {HighResTimeStamp, PerformanceEntryJSON} from './PerformanceEntry';
 
 import {PerformanceEntry} from './PerformanceEntry';
 
+export type PerformanceEventTimingJSON = {
+  ...PerformanceEntryJSON,
+  processingStart: HighResTimeStamp,
+  processingEnd: HighResTimeStamp,
+  interactionId: number,
+  ...
+};
+
 export class PerformanceEventTiming extends PerformanceEntry {
   processingStart: HighResTimeStamp;
   processingEnd: HighResTimeStamp;
@@ -35,4 +43,13 @@ export class PerformanceEventTiming extends PerformanceEntry {
     this.processingEnd = init.processingEnd ?? 0;
     this.interactionId = init.interactionId ?? 0;
   }
+
+  toJSON(): PerformanceEventTimingJSON {
+    return {
+      ...super.toJSON(),
+      processingStart: this.processingStart,
+      processingEnd: this.processingEnd,
+      interactionId: this.interactionId,
+    };
+  }
 }

package/Libraries/WebPerformance/ReactNativeStartupTiming.js

@@ -11,23 +11,35 @@
 
 // flowlint unsafe-getters-setters:off
 
-import type {ReactNativeStartupTiming as ReactNativeStartupTimingType} from './NativePerformance';
+type ReactNativeStartupTimingLike = {
+  startTime: ?number,
+  endTime: ?number,
+  initializeRuntimeStart: ?number,
+  initializeRuntimeEnd: ?number,
+  executeJavaScriptBundleEntryPointStart: ?number,
+  executeJavaScriptBundleEntryPointEnd: ?number,
+};
 
 // 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;
+  // All time information here are in ms. The values may be null if not provided.
+  // We do NOT match web spect here for two reasons:
+  // 1. The `ReactNativeStartupTiming` is non-standard API
+  // 2. The timing information is relative to the time origin, which means `0` has valid meaning
+  _startTime: ?number;
+  _endTime: ?number;
+  _initializeRuntimeStart: ?number;
+  _initializeRuntimeEnd: ?number;
+  _executeJavaScriptBundleEntryPointStart: ?number;
+  _executeJavaScriptBundleEntryPointEnd: ?number;
 
-  constructor(startUpTiming: ?ReactNativeStartupTimingType) {
+  constructor(startUpTiming: ?ReactNativeStartupTimingLike) {
     if (startUpTiming != null) {
       this._startTime = startUpTiming.startTime;
       this._endTime = startUpTiming.endTime;
+      this._initializeRuntimeStart = startUpTiming.initializeRuntimeStart;
+      this._initializeRuntimeEnd = startUpTiming.initializeRuntimeEnd;
       this._executeJavaScriptBundleEntryPointStart =
         startUpTiming.executeJavaScriptBundleEntryPointStart;
       this._executeJavaScriptBundleEntryPointEnd =
@@ -36,30 +48,44 @@ export default class ReactNativeStartupTiming {
   }
 
   /**
-   *  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.
+   * 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 {
+  get startTime(): ?number {
     return this._startTime;
   }
 
   /**
    * End time of the RN app startup process. This is equal to `executeJavaScriptBundleEntryPointEnd`.
    */
-  get endTime(): number {
+  get endTime(): ?number {
     return this._endTime;
   }
 
+  /**
+   * Start time when RN runtime get initialized. This is when RN infra first kicks in app startup process.
+   */
+  get initializeRuntimeStart(): ?number {
+    return this._initializeRuntimeStart;
+  }
+
+  /**
+   * End time when RN runtime get initialized. This is the last marker before ends of the app startup process.
+   */
+  get initializeRuntimeEnd(): ?number {
+    return this._initializeRuntimeEnd;
+  }
+
   /**
    * Start time of JS bundle being executed. This indicates the RN JS bundle is loaded and start to be evaluated.
    */
-  get executeJavaScriptBundleEntryPointStart(): number {
+  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 {
+  get executeJavaScriptBundleEntryPointEnd(): ?number {
     return this._executeJavaScriptBundleEntryPointEnd;
   }
 }

package/Libraries/WebPerformance/__mocks__/NativePerformance.js

@@ -20,12 +20,12 @@ import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
 const marks: Map<string, number> = new Map();
 
 const NativePerformanceMock: NativePerformance = {
-  mark: (name: string, startTime: number, duration: number): void => {
+  mark: (name: string, startTime: number): void => {
     NativePerformanceObserver?.logRawEntry({
       name,
       entryType: RawPerformanceEntryTypeValues.MARK,
       startTime,
-      duration,
+      duration: 0,
     });
     marks.set(name, startTime);
   },
@@ -58,6 +58,8 @@ const NativePerformanceMock: NativePerformance = {
       endTime: 0,
       executeJavaScriptBundleEntryPointStart: 0,
       executeJavaScriptBundleEntryPointEnd: 0,
+      initializeRuntimeStart: 0,
+      initializeRuntimeEnd: 0,
     };
   },
 };

package/Libraries/WebPerformance/__mocks__/NativePerformanceObserver.js

@@ -18,6 +18,7 @@ import type {
 import {RawPerformanceEntryTypeValues} from '../RawPerformanceEntry';
 
 const reportingType: Set<RawPerformanceEntryType> = new Set();
+const isAlwaysLogged: Set<RawPerformanceEntryType> = new Set();
 const eventCounts: Map<string, number> = new Map();
 const durationThresholds: Map<RawPerformanceEntryType, number> = new Map();
 let entries: Array<RawPerformanceEntry> = [];
@@ -33,6 +34,19 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
     durationThresholds.delete(entryType);
   },
 
+  setIsBuffered: (
+    entryTypes: $ReadOnlyArray<RawPerformanceEntryType>,
+    isBuffered: boolean,
+  ) => {
+    for (const entryType of entryTypes) {
+      if (isBuffered) {
+        isAlwaysLogged.add(entryType);
+      } else {
+        isAlwaysLogged.delete(entryType);
+      }
+    }
+  },
+
   popPendingEntries: (): GetPendingEntriesResult => {
     const res = entries;
     entries = [];
@@ -47,7 +61,10 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
   },
 
   logRawEntry: (entry: RawPerformanceEntry) => {
-    if (reportingType.has(entry.entryType)) {
+    if (
+      reportingType.has(entry.entryType) ||
+      isAlwaysLogged.has(entry.entryType)
+    ) {
       const durationThreshold = durationThresholds.get(entry.entryType);
       if (
         durationThreshold !== undefined &&
@@ -81,8 +98,9 @@ const NativePerformanceObserverMock: NativePerformanceObserver = {
   clearEntries: (entryType: RawPerformanceEntryType, entryName?: string) => {
     entries = entries.filter(
       e =>
-        e.entryType === entryType &&
-        (entryName == null || e.name === entryName),
+        (entryType !== RawPerformanceEntryTypeValues.UNDEFINED &&
+          e.entryType !== entryType) ||
+        (entryName != null && e.name !== entryName),
     );
   },
 

package/Libraries/promiseRejectionTrackingOptions.js

@@ -10,9 +10,9 @@
 
 import typeof {enable} from 'promise/setimmediate/rejection-tracking';
 
-type ExtractOptionsType = <P>(((options?: ?P) => void)) => P;
+import LogBox from './LogBox/LogBox';
 
-let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
+let rejectionTrackingOptions: $NonMaybeType<Parameters<enable>[0]> = {
   allRejections: true,
   onUnhandled: (id, rejection = {}) => {
     let message: string;
@@ -36,17 +36,29 @@ let rejectionTrackingOptions: $Call<ExtractOptionsType, enable> = {
       }
     }
 
-    const warning =
-      `Possible Unhandled Promise Rejection (id: ${id}):\n` +
-      `${message ?? ''}\n` +
-      (stack == null ? '' : stack);
-    console.warn(warning);
+    const warning = `Possible unhandled promise rejection (id: ${id}):\n${
+      message ?? ''
+    }`;
+    if (__DEV__) {
+      LogBox.addLog({
+        level: 'warn',
+        message: {
+          content: warning,
+          substitutions: [],
+        },
+        componentStack: [],
+        stack,
+        category: 'possible_unhandled_promise_rejection',
+      });
+    } else {
+      console.warn(warning);
+    }
   },
   onHandled: id => {
     const warning =
-      `Promise Rejection Handled (id: ${id})\n` +
+      `Promise rejection handled (id: ${id})\n` +
       'This means you can ignore any previous messages of the form ' +
-      `"Possible Unhandled Promise Rejection (id: ${id}):"`;
+      `"Possible unhandled promise rejection (id: ${id}):"`;
     console.warn(warning);
   },
 };

package/Libraries/vendor/emitter/EventEmitter.js

@@ -15,13 +15,13 @@ export interface EventSubscription {
 export interface IEventEmitter<TEventToArgsMap: {...}> {
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context?: mixed,
   ): EventSubscription;
 
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void;
 
   removeAllListeners<TEvent: $Keys<TEventToArgsMap>>(eventType?: ?TEvent): void;
@@ -63,7 +63,7 @@ type Registry<TEventToArgsMap: {...}> = $ObjMap<
 export default class EventEmitter<TEventToArgsMap: {...}>
   implements IEventEmitter<TEventToArgsMap>
 {
-  _registry: Registry<TEventToArgsMap> = {};
+  #registry: Registry<TEventToArgsMap> = {};
 
   /**
    * Registers a listener that is called when the supplied event is emitted.
@@ -71,7 +71,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    */
   addListener<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    listener: (...args: $ElementType<TEventToArgsMap, TEvent>) => mixed,
+    listener: (...args: TEventToArgsMap[TEvent]) => mixed,
     context: mixed,
   ): EventSubscription {
     if (typeof listener !== 'function') {
@@ -79,11 +79,12 @@ export default class EventEmitter<TEventToArgsMap: {...}>
         'EventEmitter.addListener(...): 2nd argument must be a function.',
       );
     }
-    const registrations = allocate<_, _, TEventToArgsMap[TEvent]>(
-      this._registry,
-      eventType,
-    );
-    const registration: Registration<$ElementType<TEventToArgsMap, TEvent>> = {
+    const registrations = allocate<
+      TEventToArgsMap,
+      TEvent,
+      TEventToArgsMap[TEvent],
+    >(this.#registry, eventType);
+    const registration: Registration<TEventToArgsMap[TEvent]> = {
       context,
       listener,
       remove(): void {
@@ -103,11 +104,10 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    */
   emit<TEvent: $Keys<TEventToArgsMap>>(
     eventType: TEvent,
-    ...args: $ElementType<TEventToArgsMap, TEvent>
+    ...args: TEventToArgsMap[TEvent]
   ): void {
-    const registrations: ?Set<
-      Registration<$ElementType<TEventToArgsMap, TEvent>>,
-    > = this._registry[eventType];
+    const registrations: ?Set<Registration<TEventToArgsMap[TEvent]>> =
+      this.#registry[eventType];
     if (registrations != null) {
       // Copy `registrations` to take a snapshot when we invoke `emit`, in case
       // registrations are added or removed when listeners are invoked.
@@ -124,9 +124,9 @@ export default class EventEmitter<TEventToArgsMap: {...}>
     eventType?: ?TEvent,
   ): void {
     if (eventType == null) {
-      this._registry = {};
+      this.#registry = {};
     } else {
-      delete this._registry[eventType];
+      delete this.#registry[eventType];
     }
   }
 
@@ -134,7 +134,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
    * Returns the number of registered listeners for the supplied event.
    */
   listenerCount<TEvent: $Keys<TEventToArgsMap>>(eventType: TEvent): number {
-    const registrations: ?Set<Registration<mixed>> = this._registry[eventType];
+    const registrations: ?Set<Registration<mixed>> = this.#registry[eventType];
     return registrations == null ? 0 : registrations.size;
   }
 }
@@ -142,7 +142,7 @@ export default class EventEmitter<TEventToArgsMap: {...}>
 function allocate<
   TEventToArgsMap: {...},
   TEvent: $Keys<TEventToArgsMap>,
-  TEventArgs: $ElementType<TEventToArgsMap, TEvent>,
+  TEventArgs: TEventToArgsMap[TEvent],
 >(
   registry: Registry<TEventToArgsMap>,
   eventType: TEvent,

package/flow/global.js

@@ -27,9 +27,7 @@ declare var global: {
   },
 
   // setUpPerformance
-  +performance: {
-    +now: () => number,
-  },
+  +performance: Performance,
 
   // setUpXHR
   +XMLHttpRequest: typeof XMLHttpRequest,

package/flow/jest.js

@@ -38,6 +38,10 @@ type JestMockFn<TArguments: $ReadOnlyArray<any>, TReturn> = {
      * instantiated from this mock function.
      */
     instances: Array<TReturn>,
+    /**
+     * An array that contains the contexts for all calls of the mock function.
+     */
+    contexts: Array<mixed>,
     /**
      * An array that contains all the object results that have been
      * returned by this mock function call
@@ -673,7 +677,7 @@ interface JestExpectType {
    * Use .toBeInstanceOf(Class) to check that an object is an instance of a
    * class.
    */
-  toBeInstanceOf(cls: Class<*>): void;
+  toBeInstanceOf(cls: Class<any>): void;
   /**
    * .toBeNull() is the same as .toBe(null) but the error messages are a bit
    * nicer.

package/{Libraries/Components/DrawerAndroid/DrawerLayoutAndroid.ios.js → jest/ReactNativeInternalFeatureFlagsMock.js}

@@ -5,8 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  *
  * @format
+ * @flow strict
  */
 
 'use strict';
 
-module.exports = require('../UnimplementedViews/UnimplementedView');
+module.exports = {};

package/jest/__tests__/setup-test.js

@@ -0,0 +1,18 @@
+/**
+ * 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
+ */
+
+import NativeExceptionsManager from '../../Libraries/Core/NativeExceptionsManager';
+
+test('NativeExceptionsManager is a mock', () => {
+  expect(jest.isMockFunction(NativeExceptionsManager.reportException)).toBe(
+    true,
+  );
+});

package/jest/mockModal.js

@@ -17,11 +17,13 @@ import typeof Modal from '../Libraries/Modal/Modal';
 
 function mockModal(BaseComponent: $FlowFixMe) {
   class ModalMock extends BaseComponent {
-    render(): React.Element<Modal> {
+    render(): React.Element<Modal> | null {
+      if (this.props.visible === false) {
+        return null;
+      }
+
       return (
-        <BaseComponent {...this.props}>
-          {this.props.visible !== true ? null : this.props.children}
-        </BaseComponent>
+        <BaseComponent {...this.props}>{this.props.children}</BaseComponent>
       );
     }
   }

package/jest/setup.js

@@ -15,36 +15,50 @@ const mockComponent = jest.requireActual('./mockComponent');
 jest.requireActual('@react-native/js-polyfills/Object.es8');
 jest.requireActual('@react-native/js-polyfills/error-guard');
 
-global.__DEV__ = true;
-
-global.performance = {
-  now: jest.fn(Date.now),
-};
-
-global.regeneratorRuntime = jest.requireActual('regenerator-runtime/runtime');
-global.window = global;
-
-global.requestAnimationFrame = function (callback) {
-  return setTimeout(() => callback(jest.now()), 0);
-};
-global.cancelAnimationFrame = function (id) {
-  clearTimeout(id);
-};
-
-// there's a __mock__ for it.
-jest.setMock(
-  '../Libraries/vendor/core/ErrorUtils',
-  require('../Libraries/vendor/core/ErrorUtils'),
-);
+Object.defineProperties(global, {
+  __DEV__: {
+    configurable: true,
+    enumerable: true,
+    value: true,
+    writable: true,
+  },
+  cancelAnimationFrame: {
+    configurable: true,
+    enumerable: true,
+    value: id => clearTimeout(id),
+    writable: true,
+  },
+  performance: {
+    configurable: true,
+    enumerable: true,
+    value: {
+      now: jest.fn(Date.now),
+    },
+    writable: true,
+  },
+  regeneratorRuntime: {
+    configurable: true,
+    enumerable: true,
+    value: jest.requireActual('regenerator-runtime/runtime'),
+    writable: true,
+  },
+  requestAnimationFrame: {
+    configurable: true,
+    enumerable: true,
+    value: callback => setTimeout(() => callback(jest.now()), 0),
+    writable: true,
+  },
+  window: {
+    configurable: true,
+    enumerable: true,
+    value: global,
+    writable: true,
+  },
+});
 
 jest
   .mock('../Libraries/Core/InitializeCore', () => {})
-  .mock('../Libraries/Core/NativeExceptionsManager', () => ({
-    __esModule: true,
-    default: {
-      reportException: jest.fn(),
-    },
-  }))
+  .mock('../Libraries/Core/NativeExceptionsManager')
   .mock('../Libraries/ReactNative/UIManager', () => ({
     AndroidViewPager: {
       Commands: {
@@ -95,9 +109,17 @@ jest
       Constants: {},
     },
   }))
-  .mock('../Libraries/Image/Image', () =>
-    mockComponent('../Libraries/Image/Image'),
-  )
+  .mock('../Libraries/Image/Image', () => {
+    const Image = mockComponent('../Libraries/Image/Image');
+    Image.getSize = jest.fn();
+    Image.getSizeWithHeaders = jest.fn();
+    Image.prefetch = jest.fn();
+    Image.prefetchWithMetadata = jest.fn();
+    Image.queryCache = jest.fn();
+    Image.resolveAssetSource = jest.fn();
+
+    return Image;
+  })
   .mock('../Libraries/Text/Text', () =>
     mockComponent('../Libraries/Text/Text', MockNativeMethods),
   )
@@ -176,6 +198,8 @@ jest
     addEventListener: jest.fn(() => ({
       remove: jest.fn(),
     })),
+    removeEventListener: jest.fn(),
+    currentState: jest.fn(),
   }))
   .mock('../Libraries/Linking/Linking', () => ({
     openURL: jest.fn(),
@@ -374,4 +398,11 @@ jest
       __esModule: true,
       default: Component,
     };
+  })
+  // In tests, we can use the default version instead of the one using
+  // dependency injection.
+  .mock('../Libraries/ReactNative/RendererProxy', () => {
+    return jest.requireActual(
+      '../Libraries/ReactNative/RendererImplementation',
+    );
   });

package/jest.config.js

@@ -8,7 +8,7 @@ module.exports = require('@rnx-kit/jest-preset')("win32", {
   transformIgnorePatterns: ['jest-runner'],
   fakeTimers: {
     enableGlobally: true,
-    legacyFakeTimers: true,
+    legacyFakeTimers: false,
   },
   snapshotFormat: {
     escapeString: true,

package/just-task.js

@@ -19,6 +19,7 @@ const {
 // Use the shared base configuration
 require('@rnw-scripts/just-task');
 require('@rnw-scripts/just-task/react-native-tasks');
+require('@rnw-scripts/just-task/flow-tasks');
 
 option('production');
 option('clean');