react-native-windows 0.71.8 → 0.72.0-preview.1

package/Libraries/Text/TextProps.js

@@ -92,9 +92,8 @@ export type TextProps = $ReadOnly<{|
   'aria-selected'?: ?boolean,
 
   /**
-   * Reperesents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
-   *
-   * @platform android
+   * Represents the nativeID of the associated label text. When the assistive technology focuses on the component with this props, the text is read aloud.
+   * This prop is listed for cross-platform reasons and has no real effect on Android or iOS.
    */
   'aria-labelledby'?: ?string,
 
@@ -230,7 +229,7 @@ export type TextProps = $ReadOnly<{|
   adjustsFontSizeToFit?: ?boolean,
 
   /**
-   * The Dynamic Text scale ramp to apply to this element on iOS.
+   * The Dynamic Type scale ramp to apply to this element on iOS.
    */
   dynamicTypeRamp?: ?(
     | 'caption2'

package/Libraries/TurboModule/samples/NativeSampleTurboModule.js

@@ -13,6 +13,11 @@ import type {RootTag, TurboModule} from '../RCTExport';
 
 import * as TurboModuleRegistry from '../TurboModuleRegistry';
 
+export enum EnumInt {
+  A = 23,
+  B = 42,
+}
+
 export interface Spec extends TurboModule {
   // Exported methods.
   +getConstants: () => {|
@@ -22,6 +27,7 @@ export interface Spec extends TurboModule {
   |};
   +voidFunc: () => void;
   +getBool: (arg: boolean) => boolean;
+  +getEnum?: (arg: EnumInt) => EnumInt;
   +getNumber: (arg: number) => number;
   +getString: (arg: string) => string;
   +getArray: (arg: Array<any>) => Array<any>;

package/Libraries/Types/CodegenTypes.js

@@ -29,6 +29,7 @@ export type Double = number;
 export type Float = number;
 export type Int32 = number;
 export type UnsafeObject = $FlowFixMe; // Object is forbidden in strict mode
+export type UnsafeMixed = mixed;
 
 type DefaultTypes = number | boolean | string | $ReadOnlyArray<string>;
 // Default handling, ignore the unused value

package/Libraries/UTFSequence.js

@@ -31,6 +31,7 @@ const UTFSequence: {|
   NBSP: string,
   NDASH: string,
   NDASH_SP: string,
+  NEWLINE: string,
   PIZZA: string,
   TRIANGLE_LEFT: string,
   TRIANGLE_RIGHT: string,
@@ -45,10 +46,11 @@ const UTFSequence: {|
   MDASH_SP: '\u00A0\u2014\u00A0', //  — 
   NDASH: '\u2013', // en dash: –
   NDASH_SP: '\u00A0\u2013\u00A0', //  – 
+  NEWLINE: '\u000A',
   NBSP: '\u00A0', // non-breaking space:  
   PIZZA: '\uD83C\uDF55',
   TRIANGLE_LEFT: '\u25c0', // black left-pointing triangle
   TRIANGLE_RIGHT: '\u25b6', // black right-pointing triangle
 });
 
-module.exports = UTFSequence;
+export default UTFSequence;

package/Libraries/Utilities/Appearance.d.ts

@@ -28,6 +28,16 @@ export namespace Appearance {
    */
   export function getColorScheme(): ColorSchemeName;
 
+  /**
+   * Set the color scheme preference. This is useful for overriding the default
+   * color scheme preference for the app. Note that this will not change the
+   * appearance of the system UI, only the appearance of the app.
+   * Only available on iOS 13+ and Android 10+.
+   */
+  export function setColorScheme(
+    scheme: ColorSchemeName | null | undefined,
+  ): void;
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Appearance.js

@@ -85,6 +85,19 @@ module.exports = {
     return nativeColorScheme;
   },
 
+  setColorScheme(colorScheme: ?ColorSchemeName): void {
+    const nativeColorScheme = colorScheme == null ? 'unspecified' : colorScheme;
+
+    invariant(
+      colorScheme === 'dark' || colorScheme === 'light' || colorScheme == null,
+      "Unrecognized color scheme. Did you mean 'dark', 'light' or null?",
+    );
+
+    if (NativeAppearance != null && NativeAppearance.setColorScheme != null) {
+      NativeAppearance.setColorScheme(nativeColorScheme);
+    }
+  },
+
   /**
    * Add an event handler that is fired when appearance preferences change.
    */

package/Libraries/Utilities/Dimensions.js

@@ -127,4 +127,4 @@ if (!initialDims) {
 
 Dimensions.set(initialDims);
 
-module.exports = Dimensions;
+export default Dimensions;

package/Libraries/Utilities/GlobalPerformanceLogger.js

@@ -10,8 +10,17 @@
 
 import type {IPerformanceLogger} from './createPerformanceLogger';
 
+import ReactNativeFeatureFlags from '../ReactNative/ReactNativeFeatureFlags';
+import NativePerformance from '../WebPerformance/NativePerformance';
 import createPerformanceLogger from './createPerformanceLogger';
 
+function isLoggingForWebPerformance(): boolean {
+  return (
+    NativePerformance != null &&
+    ReactNativeFeatureFlags.isGlobalWebPerformanceLoggerEnabled()
+  );
+}
+
 /**
  * This is a global shared instance of IPerformanceLogger that is created with
  * createPerformanceLogger().
@@ -19,6 +28,8 @@ import createPerformanceLogger from './createPerformanceLogger';
  * that are logged during loading bundle. If you want to log something from your
  * React component you should use PerformanceLoggerContext instead.
  */
-const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger();
+const GlobalPerformanceLogger: IPerformanceLogger = createPerformanceLogger(
+  isLoggingForWebPerformance(),
+);
 
 module.exports = GlobalPerformanceLogger;

package/Libraries/Utilities/HMRClient.js

@@ -25,7 +25,7 @@ let hmrClient = null;
 let hmrUnavailableReason: string | null = null;
 let currentCompileErrorMessage: string | null = null;
 let didConnect: boolean = false;
-let pendingLogs: Array<[LogLevel, Array<mixed>]> = [];
+let pendingLogs: Array<[LogLevel, $ReadOnlyArray<mixed>]> = [];
 
 type LogLevel =
   | 'trace'
@@ -42,7 +42,7 @@ export type HMRClientNativeInterface = {|
   enable(): void,
   disable(): void,
   registerBundle(requestUrl: string): void,
-  log(level: LogLevel, data: Array<mixed>): void,
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>): void,
   setup(
     platform: string,
     bundleEntry: string,
@@ -105,7 +105,7 @@ const HMRClient: HMRClientNativeInterface = {
     registerBundleEntryPoints(hmrClient);
   },
 
-  log(level: LogLevel, data: Array<mixed>) {
+  log(level: LogLevel, data: $ReadOnlyArray<mixed>) {
     if (!hmrClient) {
       // Catch a reasonable number of early logs
       // in case hmrClient gets initialized later.
@@ -247,17 +247,23 @@ Error: ${e.message}`;
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.4.1
       // https://www.rfc-editor.org/rfc/rfc6455.html#section-7.1.5
       const isNormalOrUnsetCloseReason =
+        closeEvent == null ||
         closeEvent.code === 1000 ||
         closeEvent.code === 1005 ||
         closeEvent.code == null;
 
-      if (isNormalOrUnsetCloseReason) {
-        setHMRUnavailableReason('Disconnected from Metro.');
-      } else {
-        setHMRUnavailableReason(
-          `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`,
-        );
-      }
+      setHMRUnavailableReason(
+        `${
+          isNormalOrUnsetCloseReason
+            ? 'Disconnected from Metro.'
+            : `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`
+        }
+
+To reconnect:
+- Ensure that Metro is running and available on the same network
+- Reload this app (will trigger further help if Metro cannot be connected to)
+      `,
+      );
     });
 
     if (isEnabled) {

package/Libraries/Utilities/{createPerformanceLogger.d.ts → IPerformanceLogger.d.ts}

@@ -9,10 +9,10 @@
 
 export type Timespan = {
   startTime: number;
-  endTime?: number;
-  totalTime?: number;
-  startExtras?: Extras;
-  endExtras?: Extras;
+  endTime?: number | undefined;
+  totalTime?: number | undefined;
+  startExtras?: Extras | undefined;
+  endExtras?: Extras | undefined;
 };
 
 // Extra values should be serializable primitives

package/Libraries/Utilities/IPerformanceLogger.js

@@ -0,0 +1,49 @@
+/**
+ * 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
+ */
+
+export type Timespan = {
+  startTime: number,
+  endTime?: number,
+  totalTime?: number,
+  startExtras?: Extras,
+  endExtras?: Extras,
+};
+
+// Extra values should be serializable primitives
+export type ExtraValue = number | string | boolean;
+
+export type Extras = {[key: string]: ExtraValue};
+
+export interface IPerformanceLogger {
+  addTimespan(
+    key: string,
+    startTime: number,
+    endTime: number,
+    startExtras?: Extras,
+    endExtras?: Extras,
+  ): void;
+  append(logger: IPerformanceLogger): void;
+  clear(): void;
+  clearCompleted(): void;
+  close(): void;
+  currentTimestamp(): number;
+  getExtras(): $ReadOnly<{[key: string]: ?ExtraValue, ...}>;
+  getPoints(): $ReadOnly<{[key: string]: ?number, ...}>;
+  getPointExtras(): $ReadOnly<{[key: string]: ?Extras, ...}>;
+  getTimespans(): $ReadOnly<{[key: string]: ?Timespan, ...}>;
+  hasTimespan(key: string): boolean;
+  isClosed(): boolean;
+  logEverything(): void;
+  markPoint(key: string, timestamp?: number, extras?: Extras): void;
+  removeExtra(key: string): ?ExtraValue;
+  setExtra(key: string, value: ExtraValue): void;
+  startTimespan(key: string, timestamp?: number, extras?: Extras): void;
+  stopTimespan(key: string, timestamp?: number, extras?: Extras): void;
+}

package/Libraries/Utilities/LoadingView.android.js

@@ -8,20 +8,37 @@
  * @flow strict-local
  */
 
-import ToastAndroid from '../Components/ToastAndroid/ToastAndroid';
-
-const TOAST_SHORT_DELAY = 2000;
-let isVisible = false;
+import processColor from '../StyleSheet/processColor';
+import Appearance from './Appearance';
+import NativeDevLoadingView from './NativeDevLoadingView';
 
 module.exports = {
   showMessage(message: string, type: 'load' | 'refresh') {
-    if (!isVisible) {
-      ToastAndroid.show(message, ToastAndroid.SHORT);
-      isVisible = true;
-      setTimeout(() => {
-        isVisible = false;
-      }, TOAST_SHORT_DELAY);
+    if (NativeDevLoadingView) {
+      let backgroundColor;
+      let textColor;
+
+      if (type === 'refresh') {
+        backgroundColor = processColor('#2584e8');
+        textColor = processColor('#ffffff');
+      } else if (type === 'load') {
+        if (Appearance.getColorScheme() === 'dark') {
+          backgroundColor = processColor('#fafafa');
+          textColor = processColor('#242526');
+        } else {
+          backgroundColor = processColor('#404040');
+          textColor = processColor('#ffffff');
+        }
+      }
+
+      NativeDevLoadingView.showMessage(
+        message,
+        typeof textColor === 'number' ? textColor : null,
+        typeof backgroundColor === 'number' ? backgroundColor : null,
+      );
     }
   },
-  hide() {},
+  hide() {
+    NativeDevLoadingView && NativeDevLoadingView.hide();
+  },
 };

package/Libraries/Utilities/NativeAppearance.js

@@ -26,6 +26,7 @@ export interface Spec extends TurboModule {
   // types.
   /* 'light' | 'dark' */
   +getColorScheme: () => ?string;
+  +setColorScheme?: (colorScheme: string) => void;
 
   // RCTEventEmitter
   +addListener: (eventName: string) => void;

package/Libraries/Utilities/NativePlatformConstantsWin.js

@@ -17,7 +17,7 @@ export interface Spec extends TurboModule {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     osVersion: number,
   |};

package/Libraries/Utilities/PixelRatio.js

@@ -10,7 +10,7 @@
 
 'use strict';
 
-const Dimensions = require('./Dimensions');
+const Dimensions = require('./Dimensions').default;
 
 /**
  * PixelRatio class gives access to the device pixel density.
@@ -124,4 +124,4 @@ class PixelRatio {
   static startDetecting() {}
 }
 
-module.exports = PixelRatio;
+export default PixelRatio;

package/Libraries/Utilities/Platform.windows.js

@@ -30,7 +30,7 @@ const Platform = {
       major: number,
       minor: number,
       patch: number,
-      prerelease: ?number,
+      prerelease: ?string,
     |},
     osVersion: number,
   |} {

package/Libraries/Utilities/ReactNativeTestTools.js

@@ -15,8 +15,8 @@ import type {ReactTestRenderer as ReactTestRendererType} from 'react-test-render
 const Switch = require('../Components/Switch/Switch').default;
 const TextInput = require('../Components/TextInput/TextInput');
 const View = require('../Components/View/View');
-const VirtualizedList = require('../Lists/VirtualizedList').default;
 const Text = require('../Text/Text');
+const {VirtualizedList} = require('@react-native/virtualized-lists');
 const React = require('react');
 const ShallowRenderer = require('react-shallow-renderer');
 const ReactTestRenderer = require('react-test-renderer');

package/Libraries/Utilities/__mocks__/PixelRatio.js

@@ -22,4 +22,4 @@ const PixelRatio = {
   startDetecting: jest.fn(),
 };
 
-module.exports = PixelRatio;
+export default PixelRatio;

package/Libraries/Utilities/codegenNativeCommands.js

@@ -18,7 +18,9 @@ function codegenNativeCommands<T: interface {}>(options: Options<$Keys<T>>): T {
   const commandObj: {[$Keys<T>]: (...$ReadOnlyArray<mixed>) => void} = {};
 
   options.supportedCommands.forEach(command => {
+    // $FlowFixMe[missing-local-annot]
     commandObj[command] = (ref, ...args) => {
+      // $FlowFixMe[incompatible-call]
       dispatchCommand(ref, command, args);
     };
   });

package/Libraries/Utilities/createPerformanceLogger.js

@@ -8,53 +8,28 @@
  * @format
  */
 
-const Systrace = require('../Performance/Systrace');
-const infoLog = require('./infoLog');
+import type {
+  Extras,
+  ExtraValue,
+  IPerformanceLogger,
+  Timespan,
+} from './IPerformanceLogger';
 
-export type Timespan = {
-  startTime: number,
-  endTime?: number,
-  totalTime?: number,
-  startExtras?: Extras,
-  endExtras?: Extras,
-};
-
-// Extra values should be serializable primitives
-export type ExtraValue = number | string | boolean;
-
-export type Extras = {[key: string]: ExtraValue};
-
-export interface IPerformanceLogger {
-  addTimespan(
-    key: string,
-    startTime: number,
-    endTime: number,
-    startExtras?: Extras,
-    endExtras?: Extras,
-  ): void;
-  append(logger: IPerformanceLogger): void;
-  clear(): void;
-  clearCompleted(): void;
-  close(): void;
-  currentTimestamp(): number;
-  getExtras(): $ReadOnly<{[key: string]: ?ExtraValue, ...}>;
-  getPoints(): $ReadOnly<{[key: string]: ?number, ...}>;
-  getPointExtras(): $ReadOnly<{[key: string]: ?Extras, ...}>;
-  getTimespans(): $ReadOnly<{[key: string]: ?Timespan, ...}>;
-  hasTimespan(key: string): boolean;
-  isClosed(): boolean;
-  logEverything(): void;
-  markPoint(key: string, timestamp?: number, extras?: Extras): void;
-  removeExtra(key: string): ?ExtraValue;
-  setExtra(key: string, value: ExtraValue): void;
-  startTimespan(key: string, timestamp?: number, extras?: Extras): void;
-  stopTimespan(key: string, timestamp?: number, extras?: Extras): void;
-}
+import * as Systrace from '../Performance/Systrace';
+import Performance from '../WebPerformance/Performance';
+import infoLog from './infoLog';
 
 const _cookies: {[key: string]: number, ...} = {};
 
 const PRINT_TO_CONSOLE: false = false; // Type as false to prevent accidentally committing `true`;
 
+// This is the prefix for optional logging points/timespans as marks/measures via Performance API,
+// used to separate these internally from other marks/measures
+const WEB_PERFORMANCE_PREFIX = 'global_perf_';
+
+// TODO: Remove once T143070419 is done
+const performance = new Performance();
+
 export const getCurrentTimestamp: () => number =
   global.nativeQPLTimestamp ?? global.performance.now.bind(global.performance);
 
@@ -64,6 +39,11 @@ class PerformanceLogger implements IPerformanceLogger {
   _points: {[key: string]: ?number} = {};
   _pointExtras: {[key: string]: ?Extras, ...} = {};
   _closed: boolean = false;
+  _isLoggingForWebPerformance: boolean = false;
+
+  constructor(isLoggingForWebPerformance?: boolean) {
+    this._isLoggingForWebPerformance = isLoggingForWebPerformance === true;
+  }
 
   addTimespan(
     key: string,
@@ -95,6 +75,13 @@ class PerformanceLogger implements IPerformanceLogger {
       startExtras,
       endExtras,
     };
+
+    if (this._isLoggingForWebPerformance) {
+      performance.measure(`${WEB_PERFORMANCE_PREFIX}_${key}`, {
+        start: startTime,
+        end: endTime,
+      });
+    }
   }
 
   append(performanceLogger: IPerformanceLogger) {
@@ -209,6 +196,12 @@ class PerformanceLogger implements IPerformanceLogger {
     if (extras) {
       this._pointExtras[key] = extras;
     }
+
+    if (this._isLoggingForWebPerformance) {
+      performance.mark(`${WEB_PERFORMANCE_PREFIX}_${key}`, {
+        startTime: timestamp,
+      });
+    }
   }
 
   removeExtra(key: string): ?ExtraValue {
@@ -270,6 +263,12 @@ class PerformanceLogger implements IPerformanceLogger {
     if (PRINT_TO_CONSOLE) {
       infoLog('PerformanceLogger.js', 'start: ' + key);
     }
+
+    if (this._isLoggingForWebPerformance) {
+      performance.mark(`${WEB_PERFORMANCE_PREFIX}_timespan_start_${key}`, {
+        startTime: timestamp,
+      });
+    }
   }
 
   stopTimespan(
@@ -315,14 +314,27 @@ class PerformanceLogger implements IPerformanceLogger {
       Systrace.endAsyncEvent(key, _cookies[key]);
       delete _cookies[key];
     }
+
+    if (this._isLoggingForWebPerformance) {
+      performance.measure(`${WEB_PERFORMANCE_PREFIX}_${key}`, {
+        start: `${WEB_PERFORMANCE_PREFIX}_timespan_start_${key}`,
+        end: timestamp,
+      });
+    }
   }
 }
 
+// Re-exporting for backwards compatibility with all the clients that
+// may still import it from this module.
+export type {Extras, ExtraValue, IPerformanceLogger, Timespan};
+
 /**
  * This function creates performance loggers that can be used to collect and log
  * various performance data such as timespans, points and extras.
  * The loggers need to have minimal overhead since they're used in production.
  */
-export default function createPerformanceLogger(): IPerformanceLogger {
-  return new PerformanceLogger();
+export default function createPerformanceLogger(
+  isLoggingForWebPerformance?: boolean,
+): IPerformanceLogger {
+  return new PerformanceLogger(isLoggingForWebPerformance);
 }

package/Libraries/Utilities/stringifySafe.js

@@ -26,9 +26,7 @@ export function createStringifySafeWithLimits(limits: {|
     maxArrayLimit = Number.POSITIVE_INFINITY,
     maxObjectKeysLimit = Number.POSITIVE_INFINITY,
   } = limits;
-  const stack: Array<
-    string | {+[string]: mixed} | {'...(truncated keys)...': number},
-  > = [];
+  const stack: Array<mixed> = [];
   /* $FlowFixMe[missing-this-annot] The 'this' type annotation(s) required by
    * Flow's LTI update could not be added via codemod */
   function replacer(key: string, value: mixed): mixed {
@@ -47,10 +45,7 @@ export function createStringifySafeWithLimits(limits: {|
       return value;
     }
 
-    let retval:
-      | string
-      | {+[string]: mixed}
-      | $TEMPORARY$object<{'...(truncated keys)...': number}> = value;
+    let retval: mixed = value;
     if (Array.isArray(value)) {
       if (stack.length >= maxDepth) {
         retval = `[ ... array with ${value.length} values ... ]`;

package/Libraries/Utilities/useColorScheme.js

@@ -13,7 +13,7 @@
 import type {ColorSchemeName} from './NativeAppearance';
 
 import Appearance from './Appearance';
-import {useSyncExternalStore} from 'use-sync-external-store/shim';
+import {useSyncExternalStore} from 'react';
 
 export default function useColorScheme(): ?ColorSchemeName {
   return useSyncExternalStore(

package/Libraries/Utilities/useWindowDimensions.js

@@ -22,9 +22,9 @@ export default function useWindowDimensions():
   useEffect(() => {
     function handleChange({
       window,
-    }:
-      | $FlowFixMe
-      | $TEMPORARY$object<{window: DisplayMetrics | DisplayMetricsAndroid}>) {
+    }: {
+      window: DisplayMetrics | DisplayMetricsAndroid,
+    }) {
       if (
         dimensions.width !== window.width ||
         dimensions.height !== window.height ||

package/Libraries/WebPerformance/EventCounts.js

@@ -0,0 +1,78 @@
+/**
+ * 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 NativePerformanceObserver from './NativePerformanceObserver';
+import {warnNoNativePerformanceObserver} from './PerformanceObserver';
+
+type EventCountsForEachCallbackType =
+  | (() => void)
+  | ((value: number) => void)
+  | ((value: number, key: string) => void)
+  | ((value: number, key: string, map: Map<string, number>) => void);
+
+let cachedEventCounts: ?Map<string, number>;
+
+function getCachedEventCounts(): Map<string, number> {
+  if (cachedEventCounts) {
+    return cachedEventCounts;
+  }
+  if (!NativePerformanceObserver) {
+    warnNoNativePerformanceObserver();
+    return new Map();
+  }
+
+  cachedEventCounts = new Map<string, number>(
+    NativePerformanceObserver.getEventCounts(),
+  );
+  // $FlowFixMe[incompatible-call]
+  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,
+    // schedule to invalidate the cache later,
+    // after the current task is guaranteed to have finished.
+    cachedEventCounts = null;
+  });
+  return cachedEventCounts ?? new Map();
+}
+/**
+ * Implementation of the EventCounts Web Performance API
+ * corresponding to the standard in
+ * https://www.w3.org/TR/event-timing/#eventcounts
+ */
+export default class EventCounts {
+  // flowlint unsafe-getters-setters:off
+  get size(): number {
+    return getCachedEventCounts().size;
+  }
+
+  entries(): Iterator<[string, number]> {
+    return getCachedEventCounts().entries();
+  }
+
+  forEach(callback: EventCountsForEachCallbackType): void {
+    return getCachedEventCounts().forEach(callback);
+  }
+
+  get(key: string): ?number {
+    return getCachedEventCounts().get(key);
+  }
+
+  has(key: string): boolean {
+    return getCachedEventCounts().has(key);
+  }
+
+  keys(): Iterator<string> {
+    return getCachedEventCounts().keys();
+  }
+
+  values(): Iterator<number> {
+    return getCachedEventCounts().values();
+  }
+}