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

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]),
   };
 }

package/Libraries/LogBox/UI/AnsiHighlight.js

@@ -73,7 +73,7 @@ export default function Ansi({
       return content.replace(/\| $/, ' ');
     } else if (key === 2 && commonWhitespaceLength < Infinity) {
       // Remove common whitespace at the beginning of the line
-      return content.substr(commonWhitespaceLength);
+      return content.slice(commonWhitespaceLength);
     } else {
       return content;
     }

package/Libraries/LogBox/UI/LogBoxInspectorFooter.js

@@ -10,10 +10,10 @@
 
 import type {LogLevel} from '../Data/LogBoxLog';
 
+import SafeAreaView from '../../Components/SafeAreaView/SafeAreaView';
 import View from '../../Components/View/View';
 import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
-import DeviceInfo from '../../Utilities/DeviceInfo';
 import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
@@ -52,39 +52,21 @@ type ButtonProps = $ReadOnly<{|
 
 function FooterButton(props: ButtonProps): React.Node {
   return (
-    <LogBoxButton
-      backgroundColor={{
-        default: 'transparent',
-        pressed: LogBoxStyle.getBackgroundDarkColor(),
-      }}
-      onPress={props.onPress}
-      style={buttonStyles.safeArea}>
-      <View style={buttonStyles.content}>
-        <Text style={buttonStyles.label}>{props.text}</Text>
-      </View>
-    </LogBoxButton>
+    <SafeAreaView style={styles.button}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(),
+        }}
+        onPress={props.onPress}>
+        <View style={styles.buttonContent}>
+          <Text style={styles.buttonLabel}>{props.text}</Text>
+        </View>
+      </LogBoxButton>
+    </SafeAreaView>
   );
 }
 
-const buttonStyles = StyleSheet.create({
-  safeArea: {
-    flex: 1,
-    // $FlowFixMe[sketchy-null-bool]
-    paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
-  },
-  content: {
-    alignItems: 'center',
-    height: 48,
-    justifyContent: 'center',
-  },
-  label: {
-    color: LogBoxStyle.getTextColor(1),
-    fontSize: 14,
-    includeFontPadding: false,
-    lineHeight: 20,
-  },
-});
-
 const styles = StyleSheet.create({
   root: {
     backgroundColor: LogBoxStyle.getBackgroundColor(1),
@@ -97,6 +79,17 @@ const styles = StyleSheet.create({
   button: {
     flex: 1,
   },
+  buttonContent: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  buttonLabel: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
   syntaxErrorText: {
     textAlign: 'center',
     width: '100%',

package/Libraries/LogBox/UI/LogBoxInspectorHeader.js

@@ -88,7 +88,7 @@ const backgroundForLevel = (level: LogLevel) =>
       default: 'transparent',
       pressed: LogBoxStyle.getFatalDarkColor(),
     },
-  }[level]);
+  })[level];
 
 function LogBoxInspectorHeaderButton(
   props: $ReadOnly<{|

package/Libraries/LogBox/UI/LogBoxMessage.js

@@ -138,17 +138,14 @@ function LogBoxMessage(props: Props): React.Node {
     const key = String(index);
 
     if (substitution.offset > prevOffset) {
-      const prevPart = content.substr(
-        prevOffset,
-        substitution.offset - prevOffset,
-      );
+      const prevPart = content.slice(prevOffset, substitution.offset);
 
       createUnderLength(key, prevPart);
     }
 
-    const substitutionPart = content.substr(
+    const substitutionPart = content.slice(
       substitution.offset,
-      substitution.length,
+      substitution.offset + substitution.length,
     );
 
     createUnderLength(key + '.5', substitutionPart, substitutionStyle);
@@ -156,7 +153,7 @@ function LogBoxMessage(props: Props): React.Node {
   }, 0);
 
   if (lastOffset < content.length) {
-    const lastPart = content.substr(lastOffset);
+    const lastPart = content.slice(lastOffset);
     createUnderLength('-1', lastPart);
   }
 

package/Libraries/MutationObserver/MutationObserver.js

@@ -0,0 +1,184 @@
+/**
+ * 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
+ */
+
+// flowlint unsafe-getters-setters:off
+
+import type {MutationObserverId} from './MutationObserverManager';
+import type MutationRecord from './MutationRecord';
+
+import ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import * as MutationObserverManager from './MutationObserverManager';
+
+export type MutationObserverCallback = (
+  mutationRecords: $ReadOnlyArray<MutationRecord>,
+  observer: MutationObserver,
+) => mixed;
+
+type MutationObserverInit = $ReadOnly<{
+  subtree?: boolean,
+  // This is the only supported option so it's required to be `true`.
+  childList: true,
+
+  // Unsupported:
+  attributes?: boolean,
+  attributeFilter?: $ReadOnlyArray<string>,
+  attributeOldValue?: boolean,
+  characterData?: boolean,
+  characterDataOldValue?: boolean,
+}>;
+
+/**
+ * This is a React Native implementation for the `MutationObserver` API
+ * (https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver).
+ *
+ * It only supports the `subtree` and `childList` options at the moment.
+ */
+export default class MutationObserver {
+  _callback: MutationObserverCallback;
+  _observationTargets: Set<ReactNativeElement> = new Set();
+  _mutationObserverId: ?MutationObserverId;
+
+  constructor(callback: MutationObserverCallback): void {
+    if (callback == null) {
+      throw new TypeError(
+        "Failed to construct 'MutationObserver': 1 argument required, but only 0 present.",
+      );
+    }
+
+    if (typeof callback !== 'function') {
+      throw new TypeError(
+        "Failed to construct 'MutationObserver': parameter 1 is not of type 'Function'.",
+      );
+    }
+
+    this._callback = callback;
+  }
+
+  /**
+   * Configures the `MutationObserver` callback to begin receiving notifications
+   * of changes to the UI tree that match the given options.
+   * Depending on the configuration, the observer may watch a single node in the
+   * UI tree, or that node and some or all of its descendant nodes.
+   * To stop the `MutationObserver` (so that none of its callbacks will be
+   * triggered any longer), call `MutationObserver.disconnect()`.
+   */
+  observe(target: ReactNativeElement, options?: MutationObserverInit): void {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'ReactNativeElement'.",
+      );
+    }
+
+    // Browsers force a cast of this value to boolean
+    if (Boolean(options?.childList) !== true) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'MutationObserver': The options object must set 'childList' to true.",
+      );
+    }
+
+    if (options?.attributes != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributes is not supported",
+      );
+    }
+
+    if (options?.attributeFilter != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributeFilter is not supported",
+      );
+    }
+
+    if (options?.attributeOldValue != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': attributeOldValue is not supported",
+      );
+    }
+
+    if (options?.characterData != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': characterData is not supported",
+      );
+    }
+
+    if (options?.characterDataOldValue != null) {
+      throw new Error(
+        "Failed to execute 'observe' on 'MutationObserver': characterDataOldValue is not supported",
+      );
+    }
+
+    const mutationObserverId = this._getOrCreateMutationObserverId();
+
+    // As per the spec, if the target is already being observed, we "reset"
+    // the observation and only use the last options used.
+    if (this._observationTargets.has(target)) {
+      MutationObserverManager.unobserve(mutationObserverId, target);
+    }
+
+    MutationObserverManager.observe({
+      mutationObserverId,
+      target,
+      subtree: Boolean(options?.subtree),
+    });
+
+    this._observationTargets.add(target);
+  }
+
+  _unobserve(target: ReactNativeElement): void {
+    if (!(target instanceof ReactNativeElement)) {
+      throw new TypeError(
+        "Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'ReactNativeElement'.",
+      );
+    }
+
+    if (!this._observationTargets.has(target)) {
+      return;
+    }
+
+    const mutationObserverId = this._mutationObserverId;
+    if (mutationObserverId == null) {
+      return;
+    }
+
+    MutationObserverManager.unobserve(mutationObserverId, target);
+    this._observationTargets.delete(target);
+
+    if (this._observationTargets.size === 0) {
+      MutationObserverManager.unregisterObserver(mutationObserverId);
+      this._mutationObserverId = null;
+    }
+  }
+
+  /**
+   * Tells the observer to stop watching for mutations.
+   * The observer can be reused by calling its `observe()` method again.
+   */
+  disconnect(): void {
+    for (const target of this._observationTargets.keys()) {
+      this._unobserve(target);
+    }
+  }
+
+  _getOrCreateMutationObserverId(): MutationObserverId {
+    let mutationObserverId = this._mutationObserverId;
+    if (mutationObserverId == null) {
+      mutationObserverId = MutationObserverManager.registerObserver(
+        this,
+        this._callback,
+      );
+      this._mutationObserverId = mutationObserverId;
+    }
+    return mutationObserverId;
+  }
+
+  // Only for tests
+  __getObserverID(): ?MutationObserverId {
+    return this._mutationObserverId;
+  }
+}

package/Libraries/MutationObserver/MutationObserverManager.js

@@ -0,0 +1,218 @@
+/**
+ * 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 mutation 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 mutation observer when we receive all
+ * the notifications together.
+ */
+
+import type ReactNativeElement from '../DOM/Nodes/ReactNativeElement';
+import type MutationObserver, {
+  MutationObserverCallback,
+} from './MutationObserver';
+import type MutationRecord from './MutationRecord';
+
+import {
+  getPublicInstanceFromInternalInstanceHandle,
+  getShadowNode,
+} from '../DOM/Nodes/ReadOnlyNode';
+import * as Systrace from '../Performance/Systrace';
+import warnOnce from '../Utilities/warnOnce';
+import {createMutationRecord} from './MutationRecord';
+import NativeMutationObserver from './NativeMutationObserver';
+
+export type MutationObserverId = number;
+
+let nextMutationObserverId: MutationObserverId = 1;
+let isConnected: boolean = false;
+
+const registeredMutationObservers: Map<
+  MutationObserverId,
+  $ReadOnly<{observer: MutationObserver, callback: MutationObserverCallback}>,
+> = new Map();
+
+/**
+ * Registers the given mutation observer and returns a unique ID for it,
+ * which is required to start observing targets.
+ */
+export function registerObserver(
+  observer: MutationObserver,
+  callback: MutationObserverCallback,
+): MutationObserverId {
+  const mutationObserverId = nextMutationObserverId;
+  nextMutationObserverId++;
+  registeredMutationObservers.set(mutationObserverId, {
+    observer,
+    callback,
+  });
+  return mutationObserverId;
+}
+
+/**
+ * Unregisters the given mutation observer.
+ * This should only be called when an observer is no longer observing any
+ * targets.
+ */
+export function unregisterObserver(
+  mutationObserverId: MutationObserverId,
+): void {
+  const deleted = registeredMutationObservers.delete(mutationObserverId);
+  if (deleted && registeredMutationObservers.size === 0) {
+    // When there are no observers left, we can disconnect the native module
+    // so we don't need to check commits for mutations.
+    NativeMutationObserver?.disconnect();
+    isConnected = false;
+  }
+}
+
+export function observe({
+  mutationObserverId,
+  target,
+  subtree,
+}: {
+  mutationObserverId: MutationObserverId,
+  target: ReactNativeElement,
+  subtree: boolean,
+}): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const registeredObserver =
+    registeredMutationObservers.get(mutationObserverId);
+  if (registeredObserver == null) {
+    console.error(
+      `MutationObserverManager: could not start observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'MutationObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  if (!isConnected) {
+    NativeMutationObserver.connect(
+      notifyMutationObservers,
+      // We need to do this operation from native to make sure we're retaining
+      // the public instance immediately when mutations occur. Otherwise React
+      // could dereference it in the instance handle and we wouldn't be able to
+      // access it.
+      // $FlowExpectedError[incompatible-call] This is typed as (mixed) => mixed in the native module because the codegen doesn't support the actual types.
+      getPublicInstanceFromInternalInstanceHandle,
+    );
+    isConnected = true;
+  }
+
+  return NativeMutationObserver.observe({
+    mutationObserverId,
+    targetShadowNode,
+    subtree,
+  });
+}
+
+export function unobserve(
+  mutationObserverId: number,
+  target: ReactNativeElement,
+): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const registeredObserver =
+    registeredMutationObservers.get(mutationObserverId);
+  if (registeredObserver == null) {
+    console.error(
+      `MutationObserverManager: could not stop observing target because MutationObserver with ID ${mutationObserverId} was not registered.`,
+    );
+    return;
+  }
+
+  const targetShadowNode = getShadowNode(target);
+  if (targetShadowNode == null) {
+    console.error(
+      'MutationObserverManager: could not find reference to host node from target',
+    );
+    return;
+  }
+
+  NativeMutationObserver.unobserve(mutationObserverId, targetShadowNode);
+}
+
+/**
+ * This function is called from native when there are `MutationObserver`
+ * entries to dispatch.
+ */
+function notifyMutationObservers(): void {
+  Systrace.beginEvent('MutationObserverManager.notifyMutationObservers');
+  try {
+    doNotifyMutationObservers();
+  } finally {
+    Systrace.endEvent();
+  }
+}
+
+function doNotifyMutationObservers(): void {
+  if (NativeMutationObserver == null) {
+    warnNoNativeMutationObserver();
+    return;
+  }
+
+  const nativeRecords = NativeMutationObserver.takeRecords();
+
+  const entriesByObserver: Map<
+    MutationObserverId,
+    Array<MutationRecord>,
+  > = new Map();
+
+  for (const nativeRecord of nativeRecords) {
+    let list = entriesByObserver.get(nativeRecord.mutationObserverId);
+    if (list == null) {
+      list = [];
+      entriesByObserver.set(nativeRecord.mutationObserverId, list);
+    }
+    list.push(createMutationRecord(nativeRecord));
+  }
+
+  for (const [mutationObserverId, entriesForObserver] of entriesByObserver) {
+    const registeredObserver =
+      registeredMutationObservers.get(mutationObserverId);
+    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 warnNoNativeMutationObserver() {
+  warnOnce(
+    'missing-native-mutation-observer',
+    'Missing native implementation of MutationObserver',
+  );
+}