@office-iss/react-native-win32 0.84.0 → 0.85.0-preview.1

package/Libraries/Image/ImageViewNativeComponent.js

@@ -21,12 +21,13 @@ import type {ResolvedAssetSource} from './AssetSourceResolver';
 import type {ImageProps} from './ImageProps';
 import type {ImageSource} from './ImageSource';
 
+import {colorAttribute} from '../Components/View/ReactNativeStyleAttributes';
 import * as NativeComponentRegistry from '../NativeComponent/NativeComponentRegistry';
 import {ConditionallyIgnoredEventHandlers} from '../NativeComponent/ViewConfigIgnore';
 import codegenNativeCommands from '../Utilities/codegenNativeCommands';
 import Platform from '../Utilities/Platform';
 
-type ImageHostComponentProps = $ReadOnly<{
+type ImageHostComponentProps = Readonly<{
   ...ImageProps,
   ...ViewProps,
 
@@ -37,9 +38,7 @@ type ImageHostComponentProps = $ReadOnly<{
 
   // Android native props
   shouldNotifyLoadEvents?: boolean,
-  src?:
-    | ?ResolvedAssetSource
-    | ?$ReadOnlyArray<?$ReadOnly<{uri?: ?string, ...}>>,
+  src?: ?ResolvedAssetSource | ?ReadonlyArray<?Readonly<{uri?: ?string, ...}>>,
   headers?: ?{[string]: string},
   defaultSource?: ?ImageSource | ?string,
   loadingIndicatorSrc?: ?string,
@@ -86,9 +85,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           resizeMethod: true,
           resizeMode: true,
           resizeMultiplier: true,
-          tintColor: {
-            process: require('../StyleSheet/processColor').default,
-          },
+          tintColor: colorAttribute,
           borderBottomLeftRadius: true,
           borderTopLeftRadius: true,
           src: true,
@@ -100,12 +97,8 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           borderRadius: true,
           headers: true,
           shouldNotifyLoadEvents: true,
-          overlayColor: {
-            process: require('../StyleSheet/processColor').default,
-          },
-          borderColor: {
-            process: require('../StyleSheet/processColor').default,
-          },
+          overlayColor: colorAttribute,
+          borderColor: colorAttribute,
           accessible: true,
           progressiveRenderingEnabled: true,
           fadeDuration: true,
@@ -148,9 +141,7 @@ export const __INTERNAL_VIEW_CONFIG: PartialViewConfig =
           internal_analyticTag: true,
           resizeMode: true,
           source: true,
-          tintColor: {
-            process: require('../StyleSheet/processColor').default,
-          },
+          tintColor: colorAttribute,
           ...ConditionallyIgnoredEventHandlers({
             onLoadStart: true,
             onLoad: true,

package/Libraries/Image/nativeImageSource.js

@@ -12,7 +12,7 @@ import type {ImageURISource} from './ImageSource';
 
 import Platform from '../Utilities/Platform';
 
-type NativeImageSourceSpec = $ReadOnly<{
+type NativeImageSourceSpec = Readonly<{
   android?: string,
   ios?: string,
   default?: string,

package/Libraries/Interaction/InteractionManager.js

@@ -10,6 +10,7 @@
 
 import type {EventSubscription} from '../vendor/emitter/EventEmitter';
 
+const toError = require('../../src/private/utilities/toError').default;
 const invariant = require('invariant');
 
 export type SimpleTask = {
@@ -113,8 +114,8 @@ const InteractionManagerStub = {
             try {
               task.run();
               resolve();
-            } catch (error) {
-              reject(error);
+            } catch (error: unknown) {
+              reject(toError(error));
             }
           } else {
             reject(new TypeError(`Task "${task.name}" missing gen or run.`));
@@ -123,8 +124,8 @@ const InteractionManagerStub = {
           try {
             task();
             resolve();
-          } catch (error) {
-            reject(error);
+          } catch (error: unknown) {
+            reject(toError(error));
           }
         } else {
           reject(new TypeError('Invalid task of type: ' + typeof task));

package/Libraries/Interaction/PanResponder.js

@@ -204,7 +204,7 @@ export type GestureResponderHandlerMethods = {
   onStartShouldSetResponderCapture: (event: GestureResponderEvent) => boolean,
 };
 
-export type PanResponderCallbacks = $ReadOnly<{
+export type PanResponderCallbacks = Readonly<{
   onMoveShouldSetPanResponder?: ?ActiveCallback,
   onMoveShouldSetPanResponderCapture?: ?ActiveCallback,
   onStartShouldSetPanResponder?: ?ActiveCallback,

package/Libraries/LayoutAnimation/LayoutAnimation.js

@@ -31,11 +31,11 @@ export type {
 // Reexport type
 export type {LayoutAnimationConfig} from '../Renderer/shims/ReactNativeTypes';
 
-export type LayoutAnimationTypes = $ReadOnly<{
+export type LayoutAnimationTypes = Readonly<{
   [type in LayoutAnimationType]: type,
 }>;
 
-export type LayoutAnimationProperties = $ReadOnly<{
+export type LayoutAnimationProperties = Readonly<{
   [prop in LayoutAnimationProperty]: prop,
 }>;
 

package/Libraries/Linking/Linking.js

@@ -32,7 +32,7 @@ class LinkingImpl extends NativeEventEmitter<LinkingEventDefinitions> {
    *
    * See https://reactnative.dev/docs/linking#addeventlistener
    */
-  addEventListener<K: $Keys<LinkingEventDefinitions>>(
+  addEventListener<K: keyof LinkingEventDefinitions>(
     eventType: K,
     listener: (...LinkingEventDefinitions[K]) => unknown,
   ): EventSubscription {

package/Libraries/Lists/FlatList.js

@@ -38,7 +38,7 @@ type RequiredFlatListProps<ItemT> = {
    * An array (or array-like list) of items to render. Other data types can be
    * used by targeting VirtualizedList directly.
    */
-  data: ?$ReadOnly<$ArrayLike<ItemT>>,
+  data: ?Readonly<$ArrayLike<ItemT>>,
 };
 type OptionalFlatListProps<ItemT> = {
   /**
@@ -93,7 +93,7 @@ type OptionalFlatListProps<ItemT> = {
    * specify `ItemSeparatorComponent`.
    */
   getItemLayout?: (
-    data: ?$ReadOnly<$ArrayLike<ItemT>>,
+    data: ?Readonly<$ArrayLike<ItemT>>,
     index: number,
   ) => {
     length: number,
@@ -519,7 +519,7 @@ class FlatList<ItemT = any> extends React.PureComponent<FlatListProps<ItemT>> {
   _getItem = (
     data: $ArrayLike<ItemT>,
     index: number,
-  ): ?(ItemT | $ReadOnlyArray<ItemT>) => {
+  ): ?(ItemT | ReadonlyArray<ItemT>) => {
     const numColumns = numColumnsOrDefault(this.props.numColumns);
     if (numColumns > 1) {
       const ret = [];

package/Libraries/Lists/SectionList.js

@@ -51,7 +51,7 @@ type RequiredSectionListProps<ItemT, SectionT = DefaultSectionT> = {
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
-  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
+  sections: ReadonlyArray<SectionData<ItemT, SectionT>>,
 };
 
 export type SectionListRenderItemInfo<ItemT, SectionT = DefaultSectionT> = {

package/Libraries/Lists/SectionListModern.js

@@ -46,7 +46,7 @@ type RequiredProps<ItemT, SectionT = DefaultSectionT> = {
    *       ItemSeparatorComponent?: ?ReactClass<{highlighted: boolean, ...}>,
    *     }>
    */
-  sections: $ReadOnlyArray<SectionData<ItemT, SectionT>>,
+  sections: ReadonlyArray<SectionData<ItemT, SectionT>>,
 };
 
 type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
@@ -101,7 +101,7 @@ type OptionalProps<ItemT, SectionT = DefaultSectionT> = {
   removeClippedSubviews?: boolean,
 };
 
-export type Props<ItemT, SectionT = DefaultSectionT> = $ReadOnly<{
+export type Props<ItemT, SectionT = DefaultSectionT> = Readonly<{
   ...Omit<
     VirtualizedSectionListProps<ItemT, SectionT>,
     'getItem' | 'getItemCount' | 'renderItem' | 'keyExtractor',

package/Libraries/LogBox/Data/LogBoxData.js

@@ -10,15 +10,12 @@
 
 import type {ExtendedError} from '../../Core/ExtendedError';
 import type {LogLevel} from './LogBoxLog';
-import type {
-  Category,
-  ComponentStack,
-  ComponentStackType,
-  ExtendedExceptionData,
-  Message,
-} from './parseLogBoxLog';
+import type {Stack} from './LogBoxSymbolication';
+import type {Category, ExtendedExceptionData, Message} from './parseLogBoxLog';
 
 import DebuggerSessionObserver from '../../../src/private/devsupport/rndevtools/FuseboxSessionObserver';
+import TracingStateObserver from '../../../src/private/devsupport/rndevtools/TracingStateObserver';
+import toExtendedError from '../../../src/private/utilities/toExtendedError';
 import parseErrorStack from '../../Core/Devtools/parseErrorStack';
 import NativeLogBox from '../../NativeModules/specs/NativeLogBox';
 import LogBoxLog from './LogBoxLog';
@@ -26,17 +23,16 @@ import {parseLogBoxException} from './parseLogBoxLog';
 import * as React from 'react';
 
 export type LogBoxLogs = Set<LogBoxLog>;
-export type LogData = $ReadOnly<{
+export type LogData = Readonly<{
   level: LogLevel,
   message: Message,
   category: Category,
-  componentStack: ComponentStack,
-  componentStackType: ComponentStackType | null,
+  componentStack: Stack,
   stack?: string,
 }>;
 
 export type Observer = (
-  $ReadOnly<{
+  Readonly<{
     logs: LogBoxLogs,
     isDisabled: boolean,
     selectedLogIndex: number,
@@ -45,7 +41,7 @@ export type Observer = (
 
 export type IgnorePattern = string | RegExp;
 
-export type Subscription = $ReadOnly<{
+export type Subscription = Readonly<{
   unsubscribe: () => void,
 }>;
 
@@ -61,7 +57,7 @@ export type WarningInfo = {
 
 export type WarningFilter = (format: string) => WarningInfo;
 
-type AppInfo = $ReadOnly<{
+type AppInfo = Readonly<{
   appVersion: string,
   engine: string,
   onPress?: ?() => void,
@@ -76,6 +72,7 @@ let _isDisabled = false;
 let _selectedIndex = -1;
 let hasShownFuseboxWarningsMigrationMessage = false;
 let hostTargetSessionObserverSubscription = null;
+let tracingStateObserverSubscription = null;
 
 let warningFilter: WarningFilter = function (format) {
   return {
@@ -210,6 +207,20 @@ export function addLog(log: LogData): void {
     );
   }
 
+  if (tracingStateObserverSubscription == null) {
+    tracingStateObserverSubscription = TracingStateObserver.subscribe(
+      isTracing => {
+        if (isTracing) {
+          clear();
+        }
+      },
+    );
+  }
+
+  if (TracingStateObserver.isTracing()) {
+    return;
+  }
+
   // If Host has Fusebox support
   if (log.level === 'warn' && global.__FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__) {
     // And there is no active debugging session
@@ -237,23 +248,26 @@ export function addLog(log: LogData): void {
           stack,
           category: log.category,
           componentStack: log.componentStack,
-          componentStackType: log.componentStackType || 'legacy',
         }),
       );
-    } catch (error) {
-      reportLogBoxError(error);
+    } catch (error: unknown) {
+      reportLogBoxError(toExtendedError(error));
     }
   });
 }
 
 export function addException(error: ExtendedExceptionData): void {
+  if (TracingStateObserver.isTracing()) {
+    return;
+  }
+
   // Parsing logs are expensive so we schedule this
   // otherwise spammy logs would pause rendering.
   setImmediate(() => {
     try {
       appendNewLog(new LogBoxLog(parseLogBoxException(error)));
-    } catch (loggingError) {
-      reportLogBoxError(loggingError);
+    } catch (loggingError: unknown) {
+      reportLogBoxError(toExtendedError(loggingError));
     }
   });
 }
@@ -350,12 +364,12 @@ export function checkWarningFilter(format: string): WarningInfo {
   return warningFilter(format);
 }
 
-export function getIgnorePatterns(): $ReadOnlyArray<IgnorePattern> {
+export function getIgnorePatterns(): ReadonlyArray<IgnorePattern> {
   return Array.from(ignorePatterns);
 }
 
 export function addIgnorePatterns(
-  patterns: $ReadOnlyArray<IgnorePattern>,
+  patterns: ReadonlyArray<IgnorePattern>,
 ): void {
   const existingSize = ignorePatterns.size;
   // The same pattern may be added multiple times, but adding a new pattern
@@ -427,8 +441,8 @@ function observeNext(observer: Observer): Subscription {
   };
 }
 
-type LogBoxStateSubscriptionProps = $ReadOnly<{}>;
-type LogBoxStateSubscriptionState = $ReadOnly<{
+type LogBoxStateSubscriptionProps = Readonly<{}>;
+type LogBoxStateSubscriptionState = Readonly<{
   logs: LogBoxLogs,
   isDisabled: boolean,
   hasError: boolean,
@@ -436,8 +450,8 @@ type LogBoxStateSubscriptionState = $ReadOnly<{
 }>;
 
 type SubscribedComponent = React.ComponentType<
-  $ReadOnly<{
-    logs: $ReadOnlyArray<LogBoxLog>,
+  Readonly<{
+    logs: ReadonlyArray<LogBoxLog>,
     isDisabled: boolean,
     selectedLogIndex: number,
   }>,

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -9,60 +9,27 @@
  */
 
 import type {Stack} from './LogBoxSymbolication';
-import type {
-  Category,
-  CodeFrame,
-  ComponentStack,
-  ComponentStackType,
-  Message,
-} from './parseLogBoxLog';
+import type {Category, CodeFrame, Message} from './parseLogBoxLog';
 
 import * as LogBoxSymbolication from './LogBoxSymbolication';
 
 type SymbolicationStatus = 'NONE' | 'PENDING' | 'COMPLETE' | 'FAILED';
 
-export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
-
-// TODO: once component stacks are fully supported, we can refactor
-// ComponentStack to just be Stack and remove these conversions fns.
-function convertComponentStateToStack(componentStack: ComponentStack): Stack {
-  return componentStack.map(frame => ({
-    column: frame?.location?.column,
-    file: frame.fileName,
-    lineNumber: frame?.location?.row,
-    methodName: frame.content,
-    collapse: false,
-  }));
-}
+type SymbolicationState =
+  | Readonly<{error: null, stack: null, status: 'NONE'}>
+  | Readonly<{error: null, stack: null, status: 'PENDING'}>
+  | Readonly<{error: null, stack: Stack, status: 'COMPLETE'}>
+  | Readonly<{error: Error, stack: null, status: 'FAILED'}>;
 
-function convertStackToComponentStack(stack: Stack): ComponentStack {
-  const componentStack = [];
-  for (let i = 0; i < stack.length; i++) {
-    const frame = stack[i];
-    // NOTE: Skip stack frames missing location.
-    if (frame.lineNumber != null && frame.column != null) {
-      componentStack.push({
-        fileName: frame?.file || '',
-        location: {
-          row: frame.lineNumber,
-          column: frame.column,
-        },
-        content: frame.methodName,
-        collapse: false,
-      });
-    }
-  }
-  return componentStack;
-}
+export type LogLevel = 'warn' | 'error' | 'fatal' | 'syntax';
 
-export type LogBoxLogData = $ReadOnly<{
+export type LogBoxLogData = Readonly<{
   level: LogLevel,
   type?: ?string,
   message: Message,
   stack: Stack,
   category: string,
-  componentStackType?: ComponentStackType,
-  componentStack: ComponentStack,
+  componentStack: Stack,
   codeFrame?: ?CodeFrame,
   isComponentError: boolean,
   extraData?: unknown,
@@ -73,8 +40,7 @@ class LogBoxLog {
   message: Message;
   type: ?string;
   category: Category;
-  componentStack: ComponentStack;
-  componentStackType: ComponentStackType;
+  componentStack: Stack;
   stack: Stack;
   count: number;
   level: LogLevel;
@@ -82,26 +48,14 @@ class LogBoxLog {
   componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
   extraData: unknown | void;
-  symbolicated:
-    | $ReadOnly<{error: null, stack: null, status: 'NONE'}>
-    | $ReadOnly<{error: null, stack: null, status: 'PENDING'}>
-    | $ReadOnly<{error: null, stack: Stack, status: 'COMPLETE'}>
-    | $ReadOnly<{error: Error, stack: null, status: 'FAILED'}> = {
+  symbolicated: SymbolicationState = {
     error: null,
     stack: null,
     status: 'NONE',
   };
-  symbolicatedComponentStack:
-    | $ReadOnly<{error: null, componentStack: null, status: 'NONE'}>
-    | $ReadOnly<{error: null, componentStack: null, status: 'PENDING'}>
-    | $ReadOnly<{
-        error: null,
-        componentStack: ComponentStack,
-        status: 'COMPLETE',
-      }>
-    | $ReadOnly<{error: Error, componentStack: null, status: 'FAILED'}> = {
+  symbolicatedComponentStack: SymbolicationState = {
     error: null,
-    componentStack: null,
+    stack: null,
     status: 'NONE',
   };
   onNotificationPress: ?() => void;
@@ -113,7 +67,6 @@ class LogBoxLog {
     this.stack = data.stack;
     this.category = data.category;
     this.componentStack = data.componentStack;
-    this.componentStackType = data.componentStackType || 'legacy';
     this.codeFrame = data.codeFrame;
     this.isComponentError = data.isComponentError;
     this.extraData = data.extraData;
@@ -131,12 +84,9 @@ class LogBoxLog {
       : this.stack;
   }
 
-  getAvailableComponentStack(): ComponentStack {
-    if (this.componentStackType === 'legacy') {
-      return this.componentStack;
-    }
+  getAvailableComponentStack(): Stack {
     return this.symbolicatedComponentStack.status === 'COMPLETE'
-      ? this.symbolicatedComponentStack.componentStack
+      ? this.symbolicatedComponentStack.stack
       : this.componentStack;
   }
 
@@ -147,9 +97,7 @@ class LogBoxLog {
       retry = true;
     }
     if (this.symbolicatedComponentStack.status !== 'COMPLETE') {
-      LogBoxSymbolication.deleteStack(
-        convertComponentStateToStack(this.componentStack),
-      );
+      LogBoxSymbolication.deleteStack(this.componentStack);
       retry = true;
     }
     if (retry) {
@@ -180,19 +128,16 @@ class LogBoxLog {
     }
     if (
       this.componentStack != null &&
-      this.componentStackType === 'stack' &&
+      this.componentStack.length > 0 &&
       this.symbolicatedComponentStack.status !== 'PENDING' &&
       this.symbolicatedComponentStack.status !== 'COMPLETE'
     ) {
       this.updateComponentStackStatus(null, null, null, callback);
-      const componentStackFrames = convertComponentStateToStack(
-        this.componentStack,
-      );
-      LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+      LogBoxSymbolication.symbolicate(this.componentStack, []).then(
         data => {
           this.updateComponentStackStatus(
             null,
-            convertStackToComponentStack(data.stack),
+            data.stack,
             data?.codeFrame,
             callback,
           );
@@ -211,30 +156,10 @@ class LogBoxLog {
     callback?: (status: SymbolicationStatus) => void,
   ): void {
     const lastStatus = this.symbolicated.status;
-    if (error != null) {
-      this.symbolicated = {
-        error,
-        stack: null,
-        status: 'FAILED',
-      };
-    } else if (stack != null) {
-      if (codeFrame) {
-        this.codeFrame = codeFrame;
-      }
-
-      this.symbolicated = {
-        error: null,
-        stack,
-        status: 'COMPLETE',
-      };
-    } else {
-      this.symbolicated = {
-        error: null,
-        stack: null,
-        status: 'PENDING',
-      };
+    this.symbolicated = this._computeSymbolicationState(error, stack);
+    if (stack != null && codeFrame) {
+      this.codeFrame = codeFrame;
     }
-
     if (callback && lastStatus !== this.symbolicated.status) {
       callback(this.symbolicated.status);
     }
@@ -242,37 +167,43 @@ class LogBoxLog {
 
   updateComponentStackStatus(
     error: ?Error,
-    componentStack: ?ComponentStack,
+    stack: ?Stack,
     codeFrame: ?CodeFrame,
     callback?: (status: SymbolicationStatus) => void,
   ): void {
     const lastStatus = this.symbolicatedComponentStack.status;
+    this.symbolicatedComponentStack = this._computeSymbolicationState(
+      error,
+      stack,
+    );
+    if (stack != null && codeFrame) {
+      this.componentCodeFrame = codeFrame;
+    }
+    if (callback && lastStatus !== this.symbolicatedComponentStack.status) {
+      callback(this.symbolicatedComponentStack.status);
+    }
+  }
+
+  _computeSymbolicationState(error: ?Error, stack: ?Stack): SymbolicationState {
     if (error != null) {
-      this.symbolicatedComponentStack = {
+      return {
         error,
-        componentStack: null,
+        stack: null,
         status: 'FAILED',
       };
-    } else if (componentStack != null) {
-      if (codeFrame) {
-        this.componentCodeFrame = codeFrame;
-      }
-      this.symbolicatedComponentStack = {
+    } else if (stack != null) {
+      return {
         error: null,
-        componentStack,
+        stack,
         status: 'COMPLETE',
       };
     } else {
-      this.symbolicatedComponentStack = {
+      return {
         error: null,
-        componentStack: null,
+        stack: null,
         status: 'PENDING',
       };
     }
-
-    if (callback && lastStatus !== this.symbolicatedComponentStack.status) {
-      callback(this.symbolicatedComponentStack.status);
-    }
   }
 }