@office-iss/react-native-win32 0.0.0-canary.282 → 0.0.0-canary.284

package/Libraries/LogBox/Data/LogBoxLog.js

@@ -79,26 +79,27 @@ class LogBoxLog {
   count: number;
   level: LogLevel;
   codeFrame: ?CodeFrame;
+  componentCodeFrame: ?CodeFrame;
   isComponentError: boolean;
   extraData: mixed | 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'|}> = {
+    | $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'}> = {
     error: null,
     stack: null,
     status: 'NONE',
   };
   symbolicatedComponentStack:
-    | $ReadOnly<{|error: null, componentStack: null, status: 'NONE'|}>
-    | $ReadOnly<{|error: null, componentStack: null, status: 'PENDING'|}>
-    | $ReadOnly<{|
+    | $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'|}> = {
+      }>
+    | $ReadOnly<{error: Error, componentStack: null, status: 'FAILED'}> = {
     error: null,
     componentStack: null,
     status: 'NONE',
@@ -140,8 +141,18 @@ class LogBoxLog {
   }
 
   retrySymbolicate(callback?: (status: SymbolicationStatus) => void): void {
+    let retry = false;
     if (this.symbolicated.status !== 'COMPLETE') {
       LogBoxSymbolication.deleteStack(this.stack);
+      retry = true;
+    }
+    if (this.symbolicatedComponentStack.status !== 'COMPLETE') {
+      LogBoxSymbolication.deleteStack(
+        convertComponentStateToStack(this.componentStack),
+      );
+      retry = true;
+    }
+    if (retry) {
       this.handleSymbolicate(callback);
     }
   }
@@ -153,7 +164,10 @@ class LogBoxLog {
   }
 
   handleSymbolicate(callback?: (status: SymbolicationStatus) => void): void {
-    if (this.symbolicated.status !== 'PENDING') {
+    if (
+      this.symbolicated.status !== 'PENDING' &&
+      this.symbolicated.status !== 'COMPLETE'
+    ) {
       this.updateStatus(null, null, null, callback);
       LogBoxSymbolication.symbolicate(this.stack, this.extraData).then(
         data => {
@@ -163,25 +177,30 @@ class LogBoxLog {
           this.updateStatus(error, null, null, callback);
         },
       );
-      if (this.componentStack != null && this.componentStackType === 'stack') {
-        this.updateComponentStackStatus(null, null, null, callback);
-        const componentStackFrames = convertComponentStateToStack(
-          this.componentStack,
-        );
-        LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
-          data => {
-            this.updateComponentStackStatus(
-              null,
-              convertStackToComponentStack(data.stack),
-              null,
-              callback,
-            );
-          },
-          error => {
-            this.updateComponentStackStatus(error, null, null, callback);
-          },
-        );
-      }
+    }
+    if (
+      this.componentStack != null &&
+      this.componentStackType === 'stack' &&
+      this.symbolicatedComponentStack.status !== 'PENDING' &&
+      this.symbolicatedComponentStack.status !== 'COMPLETE'
+    ) {
+      this.updateComponentStackStatus(null, null, null, callback);
+      const componentStackFrames = convertComponentStateToStack(
+        this.componentStack,
+      );
+      LogBoxSymbolication.symbolicate(componentStackFrames, []).then(
+        data => {
+          this.updateComponentStackStatus(
+            null,
+            convertStackToComponentStack(data.stack),
+            data?.codeFrame,
+            callback,
+          );
+        },
+        error => {
+          this.updateComponentStackStatus(error, null, null, callback);
+        },
+      );
     }
   }
 
@@ -235,6 +254,9 @@ class LogBoxLog {
         status: 'FAILED',
       };
     } else if (componentStack != null) {
+      if (codeFrame) {
+        this.componentCodeFrame = codeFrame;
+      }
       this.symbolicatedComponentStack = {
         error: null,
         componentStack,

package/Libraries/LogBox/Data/parseLogBoxLog.js

@@ -107,7 +107,7 @@ export type ExtendedExceptionData = ExceptionData & {
   ...
 };
 export type Category = string;
-export type CodeFrame = $ReadOnly<{|
+export type CodeFrame = $ReadOnly<{
   content: string,
   location: ?{
     row: number,
@@ -120,26 +120,26 @@ export type CodeFrame = $ReadOnly<{|
   // we gained the ability to use the collapse flag, but
   // it is not integrated into the LogBox UI.
   collapse?: boolean,
-|}>;
-export type Message = $ReadOnly<{|
+}>;
+export type Message = $ReadOnly<{
   content: string,
   substitutions: $ReadOnlyArray<
-    $ReadOnly<{|
+    $ReadOnly<{
       length: number,
       offset: number,
-    |}>,
+    }>,
   >,
-|}>;
+}>;
 
 export type ComponentStack = $ReadOnlyArray<CodeFrame>;
 export type ComponentStackType = 'legacy' | 'stack';
 
 const SUBSTITUTION = UTFSequence.BOM + '%s';
 
-export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{|
+export function parseInterpolation(args: $ReadOnlyArray<mixed>): $ReadOnly<{
   category: Category,
   message: Message,
-|}> {
+}> {
   const categoryParts = [];
   const contentParts = [];
   const substitutionOffsets = [];
@@ -456,12 +456,12 @@ export function withoutANSIColorStyles(message: mixed): mixed {
   );
 }
 
-export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {|
+export function parseLogBoxLog(args: $ReadOnlyArray<mixed>): {
   componentStack: ComponentStack,
   componentStackType: ComponentStackType,
   category: Category,
   message: Message,
-|} {
+} {
   const message = withoutANSIColorStyles(args[0]);
   let argsWithoutComponentStack: Array<mixed> = [];
   let componentStack: ComponentStack = [];

package/Libraries/LogBox/LogBox.js

@@ -14,6 +14,7 @@ import type {ExtendedExceptionData} from './Data/parseLogBoxLog';
 import Platform from '../Utilities/Platform';
 import RCTLog from '../Utilities/RCTLog';
 import {hasComponentStack} from './Data/parseLogBoxLog';
+import * as React from 'react';
 
 export type {LogData, ExtendedExceptionData, IgnorePattern};
 
@@ -192,9 +193,20 @@ if (__DEV__) {
     }
 
     try {
+      let stack;
+      // $FlowFixMe[prop-missing] Not added to flow types yet.
+      if (!hasComponentStack(args) && React.captureOwnerStack != null) {
+        stack = React.captureOwnerStack();
+        if (!hasComponentStack(args)) {
+          if (stack !== '') {
+            args[0] = args[0] += '%s';
+            args.push(stack);
+          }
+        }
+      }
       if (!isWarningModuleWarning(...args) && !hasComponentStack(args)) {
         // Only show LogBox for the 'warning' module, or React errors with
-        // component stacks, otherwise pass the error through.u
+        // component stacks, otherwise pass the error through.
         //
         // By passing through, this will get picked up by the React console override,
         // potentially adding the component stack. React then passes it back to the

package/Libraries/LogBox/LogBoxInspectorContainer.js

@@ -16,11 +16,11 @@ import * as LogBoxData from './Data/LogBoxData';
 import LogBoxInspector from './UI/LogBoxInspector';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export class _LogBoxInspectorContainer extends React.Component<Props> {
   render(): React.Node {
@@ -65,4 +65,4 @@ export class _LogBoxInspectorContainer extends React.Component<Props> {
 
 export default (LogBoxData.withSubscription(
   _LogBoxInspectorContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/LogBoxNotificationContainer.js

@@ -16,11 +16,11 @@ import LogBoxLog from './Data/LogBoxLog';
 import LogBoxLogNotification from './UI/LogBoxNotification';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   logs: $ReadOnlyArray<LogBoxLog>,
   selectedLogIndex: number,
   isDisabled?: ?boolean,
-|}>;
+}>;
 
 export function _LogBoxNotificationContainer(props: Props): React.Node {
   const {logs} = props;
@@ -102,4 +102,4 @@ const styles = StyleSheet.create({
 
 export default (LogBoxData.withSubscription(
   _LogBoxNotificationContainer,
-): React.ComponentType<{||}>);
+): React.ComponentType<{}>);

package/Libraries/LogBox/UI/LogBoxButton.js

@@ -18,16 +18,16 @@ import StyleSheet from '../../StyleSheet/StyleSheet';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
-  backgroundColor: $ReadOnly<{|
+type Props = $ReadOnly<{
+  backgroundColor: $ReadOnly<{
     default: string,
     pressed: string,
-  |}>,
+  }>,
   children?: React.Node,
   hitSlop?: ?EdgeInsetsProp,
   onPress?: ?(event: PressEvent) => void,
   style?: ViewStyleProp,
-|}>;
+}>;
 
 function LogBoxButton(props: Props): React.Node {
   const [pressed, setPressed] = React.useState(false);

package/Libraries/LogBox/UI/LogBoxInspectorBody.js

@@ -52,7 +52,10 @@ export default function LogBoxInspectorBody(props: {
           title={headerTitle}
         />
         <ScrollView style={styles.scrollBody}>
-          <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+          <LogBoxInspectorCodeFrame
+            codeFrame={props.log.codeFrame}
+            componentCodeFrame={props.log.componentCodeFrame}
+          />
           <LogBoxInspectorReactFrames log={props.log} />
           <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
         </ScrollView>
@@ -68,7 +71,10 @@ export default function LogBoxInspectorBody(props: {
         level={props.log.level}
         title={headerTitle}
       />
-      <LogBoxInspectorCodeFrame codeFrame={props.log.codeFrame} />
+      <LogBoxInspectorCodeFrame
+        codeFrame={props.log.codeFrame}
+        componentCodeFrame={props.log.componentCodeFrame}
+      />
       <LogBoxInspectorReactFrames log={props.log} />
       <LogBoxInspectorStackFrames log={props.log} onRetry={props.onRetry} />
     </ScrollView>

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.js

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView
-            horizontal
-            contentContainerStyle={styles.contentContainer}>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorCodeFrame.win32.js

@@ -22,16 +22,13 @@ import LogBoxButton from './LogBoxButton';
 import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
-type Props = $ReadOnly<{|
-  codeFrame: ?CodeFrame,
-|}>;
 
-function LogBoxInspectorCodeFrame(props: Props): React.Node {
-  const codeFrame = props.codeFrame;
-  if (codeFrame == null) {
-    return null;
-  }
+type Props = $ReadOnly<{
+  componentCodeFrame: ?CodeFrame,
+  codeFrame: ?CodeFrame,
+}>;
 
+function CodeFrameDisplay({codeFrame}: {codeFrame: CodeFrame}): React.Node {
   function getFileName() {
     // $FlowFixMe[incompatible-use]
     const matches = /[^/]*$/.exec(codeFrame.fileName);
@@ -56,30 +53,52 @@ function LogBoxInspectorCodeFrame(props: Props): React.Node {
   }
 
   return (
-    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
-      <View style={styles.box}>
-        <View style={styles.frame}>
-          <ScrollView
-            horizontal
-            contentContainerStyle={styles.contentContainer}>
-            <AnsiHighlight style={styles.content} text={codeFrame.content} />
-          </ScrollView>
-        </View>
-        <LogBoxButton
-          backgroundColor={{
-            default: 'transparent',
-            pressed: LogBoxStyle.getBackgroundDarkColor(1),
-          }}
-          style={styles.button}
-          onPress={() => {
-            openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
-          }}>
-          <Text style={styles.fileText}>
-            {getFileName()}
-            {getLocation()}
-          </Text>
-        </LogBoxButton>
+    <View style={styles.box}>
+      <View style={styles.frame}>
+        <ScrollView horizontal contentContainerStyle={styles.contentContainer}>
+          <AnsiHighlight style={styles.content} text={codeFrame.content} />
+        </ScrollView>
       </View>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundDarkColor(1),
+        }}
+        style={styles.button}
+        onPress={() => {
+          openFileInEditor(codeFrame.fileName, codeFrame.location?.row ?? 0);
+        }}>
+        <Text style={styles.fileText}>
+          {getFileName()}
+          {getLocation()}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function LogBoxInspectorCodeFrame(props: Props): React.Node {
+  const {codeFrame, componentCodeFrame} = props;
+  let sources = [];
+  if (codeFrame != null) {
+    sources.push(codeFrame);
+  }
+  if (
+    componentCodeFrame != null &&
+    componentCodeFrame?.content !== codeFrame?.content
+  ) {
+    sources.push(componentCodeFrame);
+  }
+  if (sources.length === 0) {
+    return null;
+  }
+  return (
+    <LogBoxInspectorSection
+      heading={sources.length > 1 ? 'Sources' : 'Source'}
+      action={<AppInfo />}>
+      {sources.map((frame, index) => (
+        <CodeFrameDisplay key={index} codeFrame={frame} />
+      ))}
     </LogBoxInspectorSection>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,13 +18,13 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-|}>;
+}>;
 
 const SHOW_MORE_MESSAGE_LENGTH = 300;
 

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -20,9 +20,9 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
-|}>;
+}>;
 
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.win32.js

@@ -20,9 +20,9 @@ import LogBoxInspectorSection from './LogBoxInspectorSection';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
-|}>;
+}>;
 
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 

package/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -14,11 +14,11 @@ import Text from '../../Text/Text';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   heading: string,
   children: React.Node,
   action?: ?React.Node,
-|}>;
+}>;
 
 function LogBoxInspectorSection(props: Props): React.Node {
   return (

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -18,10 +18,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   onPress?: ?(event: PressEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-|}>;
+}>;
 
 function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   const [state, setState] = React.useState({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -23,10 +23,10 @@ import LogBoxInspectorStackFrame from './LogBoxInspectorStackFrame';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   log: LogBoxLog,
   onRetry: () => void,
-|}>;
+}>;
 
 export function getCollapseMessage(
   stackFrames: Stack,

package/Libraries/Modal/Modal.js

@@ -18,15 +18,15 @@ import ModalInjection from './ModalInjection';
 import NativeModalManager from './NativeModalManager';
 import RCTModalHostView from './RCTModalHostViewNativeComponent';
 import {VirtualizedListContextResetter} from '@react-native/virtualized-lists';
+import React from 'react';
 
-const ScrollView = require('../Components/ScrollView/ScrollView');
+const ScrollView = require('../Components/ScrollView/ScrollView').default;
 const View = require('../Components/View/View');
 const AppContainer = require('../ReactNative/AppContainer');
 const I18nManager = require('../ReactNative/I18nManager');
 const {RootTagContext} = require('../ReactNative/RootTag');
 const StyleSheet = require('../StyleSheet/StyleSheet');
 const Platform = require('../Utilities/Platform');
-const React = require('react');
 
 type ModalEventDefinitions = {
   modalDismissed: [{modalID: number}],
@@ -53,11 +53,11 @@ const ModalEventEmitter =
 // destroyed before the callback is fired.
 let uniqueModalIdentifier = 0;
 
-type OrientationChangeEvent = $ReadOnly<{|
+type OrientationChangeEvent = $ReadOnly<{
   orientation: 'portrait' | 'landscape',
-|}>;
+}>;
 
-export type Props = $ReadOnly<{|
+export type Props = $ReadOnly<{
   ...ViewProps,
 
   /**
@@ -171,7 +171,7 @@ export type Props = $ReadOnly<{|
    * Defaults to `white` if not provided and transparent is `false`. Ignored if `transparent` is `true`.
    */
   backdropColor?: ?string,
-|}>;
+}>;
 
 function confirmProps(props: Props) {
   if (__DEV__) {
@@ -202,7 +202,7 @@ type State = {
 };
 
 class Modal extends React.Component<Props, State> {
-  static defaultProps: {|hardwareAccelerated: boolean, visible: boolean|} = {
+  static defaultProps: {hardwareAccelerated: boolean, visible: boolean} = {
     visible: true,
     hardwareAccelerated: false,
   };

package/Libraries/Network/XMLHttpRequest.js

@@ -15,7 +15,7 @@ import type {IPerformanceLogger} from '../Utilities/createPerformanceLogger';
 import {type EventSubscription} from '../vendor/emitter/EventEmitter';
 import EventTarget from 'event-target-shim';
 
-const BlobManager = require('../Blob/BlobManager');
+const BlobManager = require('../Blob/BlobManager').default;
 const GlobalPerformanceLogger = require('../Utilities/GlobalPerformanceLogger');
 const RCTNetworking = require('./RCTNetworking').default;
 const base64 = require('base64-js');

package/Libraries/Network/convertRequestBody.js

@@ -10,7 +10,9 @@
 
 'use strict';
 
-const Blob = require('../Blob/Blob');
+import typeof BlobT from '../Blob/Blob';
+
+const Blob: BlobT = require('../Blob/Blob').default;
 const binaryToBase64 = require('../Utilities/binaryToBase64');
 const FormData = require('./FormData');