@office-iss/react-native-win32 0.72.6 → 0.73.0-preview.1

package/Libraries/IntersectionObserver/IntersectionObserverManager.js

@@ -0,0 +1,221 @@
+/**
+ * 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-local
+ * @format
+ */
+
+/**
+ * This module handles the communication between the React Native renderer
+ * and all the intersection observers that are currently observing any targets.
+ *
+ * In order to reduce the communication between native and JavaScript,
+ * we register a single notication callback in native, and then we handle how
+ * to notify each entry to the right intersection observer when we receive all
+ * the notifications together.
+ */
+
+import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import type IntersectionObserver, {
+  IntersectionObserverCallback,
+} from './IntersectionObserver';
+import type IntersectionObserverEntry from './IntersectionObserverEntry';
+
+import {getShadowNode} from '../DOM/Nodes/ReadOnlyNode';
+import * as Systrace from '../Performance/Systrace';
+import warnOnce from '../Utilities/warnOnce';
+import {createIntersectionObserverEntry} from './IntersectionObserverEntry';
+import NativeIntersectionObserver from './NativeIntersectionObserver';
+
+export type IntersectionObserverId = number;
+
+let nextIntersectionObserverId: IntersectionObserverId = 1;
+let isConnected: boolean = false;
+
+const registeredIntersectionObservers: Map<
+  IntersectionObserverId,
+  {observer: IntersectionObserver, callback: IntersectionObserverCallback},
+> = new Map();
+
+/**
+ * Registers the given intersection observer and returns a unique ID for it,
+ * which is required to start observing targets.
+ */
+export function registerObserver(
+  observer: IntersectionObserver,
+  callback: IntersectionObserverCallback,
+): IntersectionObserverId {
+  const intersectionObserverId = nextIntersectionObserverId;
+  nextIntersectionObserverId++;
+  registeredIntersectionObservers.set(intersectionObserverId, {
+    observer,
+    callback,
+  });
+  return intersectionObserverId;
+}
+
+/**
+ * Unregisters the given intersection observer.
+ * This should only be called when an observer is no longer observing any
+ * targets.
+ */
+export function unregisterObserver(
+  intersectionObserverId: IntersectionObserverId,
+): void {
+  const deleted = registeredIntersectionObservers.delete(
+    intersectionObserverId,
+  );
+  if (deleted && registeredIntersectionObservers.size === 0) {
+    NativeIntersectionObserver?.disconnect();
+    isConnected = false;
+  }
+}
+
+/**
+ * Starts observing a target on a specific intersection observer.
+ * If this is the first target being observed, this also sets up the centralized
+ * notification callback in native.
+ */
+export function observe({
+  intersectionObserverId,
+  target,
+}: {
+  intersectionObserverId: IntersectionObserverId,
+  target: ReactNativeElement,
+}): void {
+  if (NativeIntersectionObserver == null) {
+    warnNoNativeIntersectionObserver();
+    return;
+  }
+
+  const registeredObserver = registeredIntersectionObservers.get(
+    intersectionObserverId,
+  );
+  if (registeredObserver == null) {
+    console.error(
+      `IntersectionObserverManager: could not start observing target because IntersectionObserver with ID ${intersectionObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'IntersectionObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  if (!isConnected) {
+    NativeIntersectionObserver.connect(notifyIntersectionObservers);
+    isConnected = true;
+  }
+
+  return NativeIntersectionObserver.observe({
+    intersectionObserverId,
+    targetShadowNode,
+    thresholds: registeredObserver.observer.thresholds,
+  });
+}
+
+export function unobserve(
+  intersectionObserverId: number,
+  target: ReactNativeElement,
+): void {
+  if (NativeIntersectionObserver == null) {
+    warnNoNativeIntersectionObserver();
+    return;
+  }
+
+  const registeredObserver = registeredIntersectionObservers.get(
+    intersectionObserverId,
+  );
+  if (registeredObserver == null) {
+    console.error(
+      `IntersectionObserverManager: could not stop observing target because IntersectionObserver with ID ${intersectionObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'IntersectionObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  NativeIntersectionObserver.unobserve(
+    intersectionObserverId,
+    targetShadowNode,
+  );
+}
+
+/**
+ * This function is called from native when there are `IntersectionObserver`
+ * entries to dispatch.
+ */
+function notifyIntersectionObservers(): void {
+  Systrace.beginEvent(
+    'IntersectionObserverManager.notifyIntersectionObservers',
+  );
+  try {
+    doNotifyIntersectionObservers();
+  } finally {
+    Systrace.endEvent();
+  }
+}
+
+function doNotifyIntersectionObservers(): void {
+  if (NativeIntersectionObserver == null) {
+    warnNoNativeIntersectionObserver();
+    return;
+  }
+
+  const nativeEntries = NativeIntersectionObserver.takeRecords();
+
+  const entriesByObserver: Map<
+    IntersectionObserverId,
+    Array<IntersectionObserverEntry>,
+  > = new Map();
+
+  for (const nativeEntry of nativeEntries) {
+    let list = entriesByObserver.get(nativeEntry.intersectionObserverId);
+    if (list == null) {
+      list = [];
+      entriesByObserver.set(nativeEntry.intersectionObserverId, list);
+    }
+    list.push(createIntersectionObserverEntry(nativeEntry));
+  }
+
+  for (const [
+    intersectionObserverId,
+    entriesForObserver,
+  ] of entriesByObserver) {
+    const registeredObserver = registeredIntersectionObservers.get(
+      intersectionObserverId,
+    );
+    if (!registeredObserver) {
+      // This could happen if the observer is disconnected between commit
+      // and mount. In this case, we can just ignore the entries.
+      return;
+    }
+
+    const {observer, callback} = registeredObserver;
+    try {
+      callback.call(observer, entriesForObserver, observer);
+    } catch (error) {
+      console.error(error);
+    }
+  }
+}
+
+function warnNoNativeIntersectionObserver() {
+  warnOnce(
+    'missing-native-intersection-observer',
+    'Missing native implementation of IntersectionObserver',
+  );
+}

package/Libraries/IntersectionObserver/NativeIntersectionObserver.js

@@ -0,0 +1,41 @@
+/**
+ * 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 {TurboModule} from '../TurboModule/RCTExport';
+
+import * as TurboModuleRegistry from '../TurboModule/TurboModuleRegistry';
+
+export type NativeIntersectionObserverEntry = {
+  intersectionObserverId: number,
+  targetInstanceHandle: mixed,
+  targetRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
+  rootRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
+  intersectionRect: ?$ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
+  isIntersectingAboveThresholds: boolean,
+  time: number,
+};
+
+export type NativeIntersectionObserverObserveOptions = {
+  intersectionObserverId: number,
+  targetShadowNode: mixed,
+  thresholds: $ReadOnlyArray<number>,
+};
+
+export interface Spec extends TurboModule {
+  +observe: (options: NativeIntersectionObserverObserveOptions) => void;
+  +unobserve: (intersectionObserverId: number, targetShadowNode: mixed) => void;
+  +connect: (notifyIntersectionObserversCallback: () => void) => void;
+  +disconnect: () => void;
+  +takeRecords: () => $ReadOnlyArray<NativeIntersectionObserverEntry>;
+}
+
+export default (TurboModuleRegistry.get<Spec>(
+  'NativeIntersectionObserverCxx',
+): ?Spec);

package/Libraries/IntersectionObserver/__mocks__/NativeIntersectionObserver.js

@@ -0,0 +1,162 @@
+/**
+ * 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-local
+ * @format
+ */
+
+import type ReactNativeElement from '../../DOM/Nodes/ReactNativeElement';
+import type IntersectionObserver from '../IntersectionObserver';
+import type {
+  NativeIntersectionObserverEntry,
+  NativeIntersectionObserverObserveOptions,
+  Spec,
+} from '../NativeIntersectionObserver';
+
+import {getShadowNode} from '../../DOM/Nodes/ReadOnlyNode';
+import {getFabricUIManager} from '../../ReactNative/__mocks__/FabricUIManager';
+import invariant from 'invariant';
+import nullthrows from 'nullthrows';
+
+type ObserverState = {
+  thresholds: $ReadOnlyArray<number>,
+  intersecting: boolean,
+  currentThreshold: ?number,
+};
+
+type Observation = {
+  ...NativeIntersectionObserverObserveOptions,
+  state: ObserverState,
+};
+
+let pendingRecords: Array<NativeIntersectionObserverEntry> = [];
+let callback: ?() => void;
+let observations: Array<Observation> = [];
+
+const FabricUIManagerMock = nullthrows(getFabricUIManager());
+
+function createRecordFromObservation(
+  observation: Observation,
+): NativeIntersectionObserverEntry {
+  return {
+    intersectionObserverId: observation.intersectionObserverId,
+    targetInstanceHandle: FabricUIManagerMock.__getInstanceHandleFromNode(
+      // $FlowExpectedError[incompatible-call]
+      observation.targetShadowNode,
+    ),
+    targetRect: observation.state.intersecting ? [0, 0, 1, 1] : [20, 20, 1, 1],
+    rootRect: [0, 0, 10, 10],
+    intersectionRect: observation.state.intersecting ? [0, 0, 1, 1] : null,
+    isIntersectingAboveThresholds: observation.state.intersecting,
+    time: performance.now(),
+  };
+}
+
+function notifyIntersectionObservers(): void {
+  callback?.();
+}
+
+const NativeIntersectionObserverMock = {
+  observe: (options: NativeIntersectionObserverObserveOptions): void => {
+    invariant(
+      observations.find(
+        observation =>
+          observation.intersectionObserverId ===
+            options.intersectionObserverId &&
+          observation.targetShadowNode === options.targetShadowNode,
+      ) == null,
+      'unexpected duplicate call to observe',
+    );
+    const observation = {
+      ...options,
+      state: {
+        thresholds: options.thresholds,
+        intersecting: false,
+        currentThreshold: null,
+      },
+    };
+    observations.push(observation);
+    pendingRecords.push(createRecordFromObservation(observation));
+    setImmediate(notifyIntersectionObservers);
+  },
+  unobserve: (
+    intersectionObserverId: number,
+    targetShadowNode: mixed,
+  ): void => {
+    const observationIndex = observations.findIndex(
+      observation =>
+        observation.intersectionObserverId === intersectionObserverId &&
+        observation.targetShadowNode === targetShadowNode,
+    );
+    invariant(
+      observationIndex !== -1,
+      'unexpected duplicate call to unobserve',
+    );
+    observations.splice(observationIndex, 1);
+  },
+  connect: (notifyIntersectionObserversCallback: () => void): void => {
+    invariant(callback == null, 'unexpected call to connect');
+    invariant(
+      notifyIntersectionObserversCallback != null,
+      'unexpected null notify intersection observers callback',
+    );
+    callback = notifyIntersectionObserversCallback;
+  },
+  disconnect: (): void => {
+    invariant(callback != null, 'unexpected call to disconnect');
+    callback = null;
+  },
+  takeRecords: (): $ReadOnlyArray<NativeIntersectionObserverEntry> => {
+    const currentRecords = pendingRecords;
+    pendingRecords = [];
+    return currentRecords;
+  },
+  __forceTransitionForTests: (
+    observer: IntersectionObserver,
+    target: ReactNativeElement,
+  ) => {
+    const targetShadowNode = getShadowNode(target);
+    const observation = observations.find(
+      obs =>
+        obs.intersectionObserverId === observer.__getObserverID() &&
+        obs.targetShadowNode === targetShadowNode,
+    );
+    invariant(
+      observation != null,
+      'cannot force transition on an unobserved target',
+    );
+    if (observation.state.intersecting) {
+      observation.state.intersecting = false;
+      observation.state.currentThreshold = null;
+    } else {
+      observation.state.intersecting = true;
+      observation.state.currentThreshold = observation.thresholds[0];
+    }
+    pendingRecords.push(createRecordFromObservation(observation));
+    setImmediate(notifyIntersectionObservers);
+  },
+  __getObservationsForTests: (
+    observer: IntersectionObserver,
+  ): Array<{targetShadowNode: mixed, thresholds: $ReadOnlyArray<number>}> => {
+    const intersectionObserverId = observer.__getObserverID();
+    return observations
+      .filter(
+        observation =>
+          observation.intersectionObserverId === intersectionObserverId,
+      )
+      .map(observation => ({
+        targetShadowNode: observation.targetShadowNode,
+        thresholds: observation.thresholds,
+      }));
+  },
+  __isConnected: (): boolean => {
+    return callback != null;
+  },
+};
+
+(NativeIntersectionObserverMock: Spec);
+
+export default NativeIntersectionObserverMock;

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -49,7 +49,7 @@ function configureNext(
   onAnimationDidEnd?: OnAnimationDidEndCallback,
   onAnimationDidFail?: OnAnimationDidFailCallback,
 ) {
-  if (Platform.isTesting) {
+  if (Platform.isDisableAnimations) {
     return;
   }
 

package/Libraries/Lists/FlatList.d.ts

@@ -12,6 +12,7 @@ import type {
   ListRenderItem,
   ViewToken,
   VirtualizedListProps,
+  ViewabilityConfig,
 } from '@react-native/virtualized-lists';
 import type {ScrollViewComponent} from '../Components/ScrollView/ScrollView';
 import type {StyleProp} from '../StyleSheet/StyleSheet';
@@ -144,7 +145,7 @@ export interface FlatListProps<ItemT> extends VirtualizedListProps<ItemT> {
   /**
    * See `ViewabilityHelper` for flow type and further documentation.
    */
-  viewabilityConfig?: any | undefined;
+  viewabilityConfig?: ViewabilityConfig | undefined;
 
   /**
    * Note: may have bugs (missing content) in some circumstances - use at your own risk.

package/Libraries/Lists/FlatList.js

@@ -36,7 +36,7 @@ type RequiredProps<ItemT> = {|
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
-  data: ?$ArrayLike<ItemT>,
+  data: ?$ReadOnly<$ArrayLike<ItemT>>,
 |};
 type OptionalProps<ItemT> = {|
   /**
@@ -91,7 +91,7 @@ type OptionalProps<ItemT> = {|
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?$ArrayLike<ItemT>,
+    data: ?$ReadOnly<$ArrayLike<ItemT>>,
     index: number,
   ) => {
     length: number,
@@ -436,7 +436,16 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
          * see the error delete this comment and run Flow. */
         viewabilityConfig: this.props.viewabilityConfig,
         onViewableItemsChanged: this._createOnViewableItemsChanged(
-          this.props.onViewableItemsChanged,
+          // NOTE: we use a wrapper function to allow the actual callback to change
+          // while still keeping the function provided to native to be stable
+          (...args) => {
+            invariant(
+              this.props.onViewableItemsChanged,
+              'Changing the nullability of onViewableItemsChanged is not supported. ' +
+                'Once a function or null is supplied that cannot be changed.',
+            );
+            return this.props.onViewableItemsChanged(...args);
+          },
         ),
       });
     }
@@ -450,8 +459,9 @@ class FlatList<ItemT> extends React.PureComponent<Props<ItemT>, void> {
         'changing the number of columns to force a fresh render of the component.',
     );
     invariant(
-      prevProps.onViewableItemsChanged === this.props.onViewableItemsChanged,
-      'Changing onViewableItemsChanged on the fly is not supported',
+      (prevProps.onViewableItemsChanged == null) ===
+        (this.props.onViewableItemsChanged == null),
+      'Changing onViewableItemsChanged nullability on the fly is not supported',
     );
     invariant(
       !deepDiffer(prevProps.viewabilityConfig, this.props.viewabilityConfig),

package/Libraries/Lists/SectionList.js

@@ -244,6 +244,10 @@ export default class SectionList<
     const stickySectionHeadersEnabled =
       _stickySectionHeadersEnabled ?? Platform.OS === 'ios';
     return (
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
+      /* $FlowFixMe[incompatible-type] Error revealed after improved builtin
+       * React utility types */
       <VirtualizedSectionList
         {...restProps}
         stickySectionHeadersEnabled={stickySectionHeadersEnabled}

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -31,6 +31,7 @@ export type LogBoxLogData = $ReadOnly<{|
   componentStack: ComponentStack,
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
+  extraData?: mixed,
 |}>;
 
 class LogBoxLog {
@@ -43,6 +44,7 @@ class LogBoxLog {
   level: LogLevel;
   codeFrame: ?CodeFrame;
   isComponentError: boolean;
+  extraData: mixed | void;
   symbolicated:
     | $ReadOnly<{|error: null, stack: null, status: 'NONE'|}>
     | $ReadOnly<{|error: null, stack: null, status: 'PENDING'|}>
@@ -62,6 +64,7 @@ class LogBoxLog {
     this.componentStack = data.componentStack;
     this.codeFrame = data.codeFrame;
     this.isComponentError = data.isComponentError;
+    this.extraData = data.extraData;
     this.count = 1;
   }
 
@@ -91,7 +94,7 @@ class LogBoxLog {
   handleSymbolicate(callback?: (status: SymbolicationStatus) => void): void {
     if (this.symbolicated.status !== 'PENDING') {
       this.updateStatus(null, null, null, callback);
-      LogBoxSymbolication.symbolicate(this.stack).then(
+      LogBoxSymbolication.symbolicate(this.stack, this.extraData).then(
         data => {
           this.updateStatus(null, data?.stack, data?.codeFrame, callback);
         },

package/Libraries/LogBox/Data/LogBoxSymbolication.js

@@ -51,10 +51,13 @@ export function deleteStack(stack: Stack): void {
   cache.delete(stack);
 }
 
-export function symbolicate(stack: Stack): Promise<SymbolicatedStackTrace> {
+export function symbolicate(
+  stack: Stack,
+  extraData?: mixed,
+): Promise<SymbolicatedStackTrace> {
   let promise = cache.get(stack);
   if (promise == null) {
-    promise = symbolicateStackTrace(stack).then(sanitize);
+    promise = symbolicateStackTrace(stack, extraData).then(sanitize);
     cache.set(stack, promise);
   }
 

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -14,12 +14,38 @@ import type {LogBoxLogData} from './LogBoxLog';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import UTFSequence from '../../UTFSequence';
 import stringifySafe from '../../Utilities/stringifySafe';
+import ansiRegex from 'ansi-regex';
+
+const ANSI_REGEX = ansiRegex().source;
 
 const BABEL_TRANSFORM_ERROR_FORMAT =
   /^(?:TransformError )?(?:SyntaxError: |ReferenceError: )(.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/;
+
+// https://github.com/babel/babel/blob/33dbb85e9e9fe36915273080ecc42aee62ed0ade/packages/babel-code-frame/src/index.ts#L183-L184
+const BABEL_CODE_FRAME_MARKER_PATTERN = new RegExp(
+  [
+    // Beginning of a line (per 'm' flag)
+    '^',
+    // Optional ANSI escapes for colors
+    `(?:${ANSI_REGEX})*`,
+    // Marker
+    '>',
+    // Optional ANSI escapes for colors
+    `(?:${ANSI_REGEX})*`,
+    // Left padding for line number
+    ' +',
+    // Line number
+    '[0-9]+',
+    // Gutter
+    ' \\|',
+  ].join(''),
+  'm',
+);
+
 const BABEL_CODE_FRAME_ERROR_FORMAT =
   // eslint-disable-next-line no-control-regex
   /^(?:TransformError )?(?:.*):? (?:.*?)(\/.*): ([\s\S]+?)\n([ >]{2}[\d\s]+ \|[\s\S]+|\u{001b}[\s\S]+)/u;
+
 const METRO_ERROR_FORMAT =
   /^(?:InternalError Metro has encountered an error:) (.*): (.*) \((\d+):(\d+)\)\n\n([\s\S]+)/u;
 
@@ -211,6 +237,7 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: `${fileName}-${row}-${column}`,
+      extraData: error.extraData,
     };
   }
 
@@ -238,30 +265,36 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: `${fileName}-${row}-${column}`,
+      extraData: error.extraData,
     };
   }
 
-  const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
+  // Perform a cheap match first before trying to parse the full message, which
+  // can get expensive for arbitrary input.
+  if (BABEL_CODE_FRAME_MARKER_PATTERN.test(message)) {
+    const babelCodeFrameError = message.match(BABEL_CODE_FRAME_ERROR_FORMAT);
 
-  if (babelCodeFrameError) {
-    // Codeframe errors are thrown from any use of buildCodeFrameError.
-    const [fileName, content, codeFrame] = babelCodeFrameError.slice(1);
-    return {
-      level: 'syntax',
-      stack: [],
-      isComponentError: false,
-      componentStack: [],
-      codeFrame: {
-        fileName,
-        location: null, // We are not given the location.
-        content: codeFrame,
-      },
-      message: {
-        content,
-        substitutions: [],
-      },
-      category: `${fileName}-${1}-${1}`,
-    };
+    if (babelCodeFrameError) {
+      // Codeframe errors are thrown from any use of buildCodeFrameError.
+      const [fileName, content, codeFrame] = babelCodeFrameError.slice(1);
+      return {
+        level: 'syntax',
+        stack: [],
+        isComponentError: false,
+        componentStack: [],
+        codeFrame: {
+          fileName,
+          location: null, // We are not given the location.
+          content: codeFrame,
+        },
+        message: {
+          content,
+          substitutions: [],
+        },
+        category: `${fileName}-${1}-${1}`,
+        extraData: error.extraData,
+      };
+    }
   }
 
   if (message.match(/^TransformError /)) {
@@ -275,6 +308,7 @@ export function parseLogBoxException(
         substitutions: [],
       },
       category: message,
+      extraData: error.extraData,
     };
   }
 
@@ -286,6 +320,7 @@ export function parseLogBoxException(
       isComponentError: error.isComponentError,
       componentStack:
         componentStack != null ? parseComponentStack(componentStack) : [],
+      extraData: error.extraData,
       ...parseInterpolation([message]),
     };
   }
@@ -297,6 +332,7 @@ export function parseLogBoxException(
       stack: error.stack,
       isComponentError: error.isComponentError,
       componentStack: parseComponentStack(componentStack),
+      extraData: error.extraData,
       ...parseInterpolation([message]),
     };
   }
@@ -307,6 +343,7 @@ export function parseLogBoxException(
     level: 'error',
     stack: error.stack,
     isComponentError: error.isComponentError,
+    extraData: error.extraData,
     ...parseLogBoxLog([message]),
   };
 }