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

package/Libraries/LogBox/UI/LogBoxInspectorMessageHeader.js

@@ -18,26 +18,21 @@ import LogBoxMessage from './LogBoxMessage';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+const SHOW_MORE_MESSAGE_LENGTH = 300;
+
+component LogBoxInspectorMessageHeader(
   collapsed: boolean,
   message: Message,
   level: LogLevel,
   title: string,
   onPress: () => void,
-}>;
-
-const SHOW_MORE_MESSAGE_LENGTH = 300;
-
-function LogBoxInspectorMessageHeader(props: Props): React.Node {
+) {
   function renderShowMore() {
-    if (
-      props.message.content.length < SHOW_MORE_MESSAGE_LENGTH ||
-      !props.collapsed
-    ) {
+    if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
       return null;
     }
     return (
-      <Text style={messageStyles.collapse} onPress={() => props.onPress()}>
+      <Text style={messageStyles.collapse} onPress={() => onPress()}>
         ... See More
       </Text>
     );
@@ -47,15 +42,15 @@ function LogBoxInspectorMessageHeader(props: Props): React.Node {
     <View style={messageStyles.body}>
       <View style={messageStyles.heading}>
         <Text
-          style={[messageStyles.headingText, messageStyles[props.level]]}
+          style={[messageStyles.headingText, messageStyles[level]]}
           id="logbox_message_title_text">
-          {props.title}
+          {title}
         </Text>
       </View>
       <Text style={messageStyles.bodyText} id="logbox_message_contents_text">
         <LogBoxMessage
-          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
-          message={props.message}
+          maxLength={collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={message}
           style={messageStyles.messageText}
         />
         {renderShowMore()}

package/Libraries/LogBox/UI/LogBoxInspectorReactFrames.js

@@ -21,10 +21,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
-  log: LogBoxLog,
-}>;
-
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 
 // Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41
@@ -49,29 +45,30 @@ function getPrettyFileName(path: string) {
 
   return fileName;
 }
-function LogBoxInspectorReactFrames(props: Props): React.Node {
+
+component LogBoxInspectorReactFrames(log: LogBoxLog) {
   const [collapsed, setCollapsed] = useState(true);
   if (
-    props.log.getAvailableComponentStack() == null ||
-    props.log.getAvailableComponentStack().length < 1
+    log.getAvailableComponentStack() == null ||
+    log.getAvailableComponentStack().length < 1
   ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.getAvailableComponentStack().slice(0, 3);
+      return log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.getAvailableComponentStack();
+      return log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.getAvailableComponentStack().length <= 3) {
+    if (log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.getAvailableComponentStack().length - 3;
+    const count = log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {
@@ -95,9 +92,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
               // Older versions of DevTools do not provide full path.
               // This will not work on Windows, remove check once the
               // DevTools return the full file path.
-              frame.fileName.startsWith('/')
+              frame.file != null && frame.file.startsWith('/')
                 ? () =>
-                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                    openFileInEditor(frame.file ?? '', frame.lineNumber ?? 1)
                 : null
             }
             style={componentStyles.frame}>
@@ -106,13 +103,13 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
                 id="logbox_component_stack_frame_text"
                 style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
-                {frame.content}
+                {frame.methodName}
                 <Text style={componentStyles.bracket}>{' />'}</Text>
               </Text>
             </View>
             <Text style={componentStyles.frameLocation}>
-              {getPrettyFileName(frame.fileName)}
-              {frame.location ? `:${frame.location.row}` : ''}
+              {frame.file != null ? getPrettyFileName(frame.file) : ''}
+              {frame.lineNumber != null ? `:${frame.lineNumber}` : ''}
             </Text>
           </LogBoxButton>
         </View>
@@ -164,14 +161,24 @@ const componentStyles = StyleSheet.create({
     paddingRight: 10,
   },
   frameName: {
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
     color: LogBoxStyle.getTextColor(1),
     fontSize: 14,
     includeFontPadding: false,
     lineHeight: 18,
   },
   bracket: {
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
     color: LogBoxStyle.getTextColor(0.4),
     fontSize: 14,
     fontWeight: '500',

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

@@ -21,10 +21,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
-  log: LogBoxLog,
-}>;
-
 const BEFORE_SLASH_RE = /^(.*)[\\/]/;
 
 // Taken from React https://github.com/facebook/react/blob/206d61f72214e8ae5b935f0bf8628491cb7f0797/packages/react-devtools-shared/src/backend/describeComponentFrame.js#L27-L41
@@ -49,29 +45,30 @@ function getPrettyFileName(path: string) {
 
   return fileName;
 }
-function LogBoxInspectorReactFrames(props: Props): React.Node {
+
+component LogBoxInspectorReactFrames(log: LogBoxLog) {
   const [collapsed, setCollapsed] = useState(true);
   if (
-    props.log.getAvailableComponentStack() == null ||
-    props.log.getAvailableComponentStack().length < 1
+    log.getAvailableComponentStack() == null ||
+    log.getAvailableComponentStack().length < 1
   ) {
     return null;
   }
 
   function getStackList() {
     if (collapsed) {
-      return props.log.getAvailableComponentStack().slice(0, 3);
+      return log.getAvailableComponentStack().slice(0, 3);
     } else {
-      return props.log.getAvailableComponentStack();
+      return log.getAvailableComponentStack();
     }
   }
 
   function getCollapseMessage() {
-    if (props.log.getAvailableComponentStack().length <= 3) {
+    if (log.getAvailableComponentStack().length <= 3) {
       return;
     }
 
-    const count = props.log.getAvailableComponentStack().length - 3;
+    const count = log.getAvailableComponentStack().length - 3;
     if (collapsed) {
       return `See ${count} more components`;
     } else {
@@ -95,9 +92,9 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
               // Older versions of DevTools do not provide full path.
               // This will not work on Windows, remove check once the
               // DevTools return the full file path.
-              frame.fileName.startsWith('/')
+              frame.file != null && frame.file.startsWith('/')
                 ? () =>
-                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                    openFileInEditor(frame.file ?? '', frame.lineNumber ?? 1)
                 : null
             }
             style={componentStyles.frame}>
@@ -106,13 +103,13 @@ function LogBoxInspectorReactFrames(props: Props): React.Node {
                 id="logbox_component_stack_frame_text"
                 style={componentStyles.frameName}>
                 <Text style={componentStyles.bracket}>{'<'}</Text>
-                {frame.content}
+                {frame.methodName}
                 <Text style={componentStyles.bracket}>{' />'}</Text>
               </Text>
             </View>
             <Text style={componentStyles.frameLocation}>
-              {getPrettyFileName(frame.fileName)}
-              {frame.location ? `:${frame.location.row}` : ''}
+              {frame.file != null ? getPrettyFileName(frame.file) : ''}
+              {frame.lineNumber != null ? `:${frame.lineNumber}` : ''}
             </Text>
           </LogBoxButton>
         </View>
@@ -167,6 +164,7 @@ const componentStyles = StyleSheet.create({
     fontFamily: Platform.select({
       android: 'monospace',
       ios: 'Menlo',
+      macos: 'Menlo',
       win32: 'Consolas', // Win32
     }),
     color: LogBoxStyle.getTextColor(1),
@@ -178,6 +176,7 @@ const componentStyles = StyleSheet.create({
     fontFamily: Platform.select({
       android: 'monospace',
       ios: 'Menlo',
+      macos: 'Menlo',
       win32: 'Consolas', // Win32
     }),
     color: LogBoxStyle.getTextColor(0.4),

package/Libraries/LogBox/UI/LogBoxInspectorSection.js

@@ -14,20 +14,18 @@ import Text from '../../Text/Text';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorSection(
   heading: string,
   children: React.Node,
   action?: ?React.Node,
-}>;
-
-function LogBoxInspectorSection(props: Props): React.Node {
+) {
   return (
     <View style={styles.section}>
       <View style={styles.heading}>
-        <Text style={styles.headingText}>{props.heading}</Text>
-        {props.action}
+        <Text style={styles.headingText}>{heading}</Text>
+        {action}
       </View>
-      <View style={styles.body}>{props.children}</View>
+      <View style={styles.body}>{children}</View>
     </View>
   );
 }

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -19,19 +19,17 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorSourceMapStatus(
   onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}>;
-
-function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+) {
   const [state, setState] = useState({
     animation: null,
     rotate: null,
   });
 
   useEffect(() => {
-    if (props.status === 'PENDING') {
+    if (status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);
         const animation = Animated.loop(
@@ -67,11 +65,11 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         state.animation.stop();
       }
     };
-  }, [props.status, state.animation]);
+  }, [status, state.animation]);
 
   let image;
   let color;
-  switch (props.status) {
+  switch (status) {
     case 'FAILED':
       image = require('./LogBoxImages/alert-triangle.png');
       color = LogBoxStyle.getErrorColor(1);
@@ -82,7 +80,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
       break;
   }
 
-  if (props.status === 'COMPLETE' || image == null) {
+  if (status === 'COMPLETE' || image == null) {
     return null;
   }
 
@@ -93,14 +91,14 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         pressed: LogBoxStyle.getBackgroundColor(1),
       }}
       hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
-      onPress={props.onPress}
+      onPress={onPress}
       style={styles.root}>
       <Animated.Image
         source={image}
         style={[
           styles.image,
           {tintColor: color},
-          state.rotate == null || props.status !== 'PENDING'
+          state.rotate == null || status !== 'PENDING'
             ? null
             : {transform: [{rotate: state.rotate}]},
         ]}

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

@@ -19,12 +19,10 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useEffect, useState} from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorSourceMapStatus(
   onPress?: ?(event: GestureResponderEvent) => void,
   status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}>;
-
-function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
+) {
   // [Win32] Dont use Animated
   /*
   const [state, setState] = useState({
@@ -33,7 +31,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
   });
 
   useEffect(() => {
-    if (props.status === 'PENDING') {
+    if (status === 'PENDING') {
       if (state.animation == null) {
         const animated = new Animated.Value(0);
         const animation = Animated.loop(
@@ -69,12 +67,12 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         state.animation.stop();
       }
     };
-  }, [props.status, state.animation]);
+  }, [status, state.animation]);
 
   let image;
   */
   let color;
-  switch (props.status) {
+  switch (status) {
     case 'FAILED':
       // image = require('./LogBoxImages/alert-triangle.png'); // [win32] Dont use LogBox images
       color = LogBoxStyle.getErrorColor(1);
@@ -87,10 +85,10 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
       return null; // [Win32]
   }
 
-  if (props.status === 'COMPLETE' /* [Win32] || image == null */) {
-    return null;
-  }
-
+  // [Win32] 'COMPLETE' and 'NONE' are already handled by the switch default
+  // above (which returns null), so status is narrowed to 'FAILED' | 'PENDING'
+  // here. The upstream `if (status === 'COMPLETE' || image == null)` check is
+  // therefore dead code on Win32 and is omitted.
   return (
     <LogBoxButton
       backgroundColor={{
@@ -98,7 +96,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         pressed: LogBoxStyle.getBackgroundColor(1),
       }}
       hitSlop={{bottom: 8, left: 8, right: 8, top: 8}}
-      onPress={props.onPress}
+      onPress={onPress}
       style={styles.root}>
       {/* [Win32] Avoid Animated usage
       <Animated.Image
@@ -106,7 +104,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
         style={[
           styles.image,
           {tintColor: color},
-          state.rotate == null || props.status !== 'PENDING'
+          state.rotate == null || status !== 'PENDING'
             ? null
             : {transform: [{rotate: state.rotate}]},
         ]}

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,13 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
-}>;
-
-function LogBoxInspectorStackFrame(props: Props): React.Node {
-  const {frame, onPress} = props;
+) {
   const column = frame.column != null && parseInt(frame.column, 10);
   const location =
     getFileName(frame.file) +
@@ -90,7 +87,12 @@ const styles = StyleSheet.create({
     includeFontPadding: false,
     lineHeight: 18,
     fontWeight: '400',
-    fontFamily: Platform.select({android: 'monospace', ios: 'Menlo'}),
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      macos: 'Menlo',
+      windows: 'Consolas',
+    }),
   },
   location: {
     color: LogBoxStyle.getTextColor(0.8),

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

@@ -19,13 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{
+component LogBoxInspectorStackFrame(
   frame: StackFrame,
   onPress?: ?(event: GestureResponderEvent) => void,
-}>;
-
-function LogBoxInspectorStackFrame(props: Props): React.Node {
-  const {frame, onPress} = props;
+) {
   const column = frame.column != null && parseInt(frame.column, 10);
   const location =
     getFileName(frame.file) +
@@ -93,6 +90,7 @@ const styles = StyleSheet.create({
     fontFamily: Platform.select({
       android: 'monospace',
       ios: 'Menlo',
+      macos: 'Menlo',
       win32: 'Consolas',
     }),
   },

package/Libraries/LogBox/UI/LogBoxInspectorStackFrames.js

@@ -24,11 +24,6 @@ import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 import {useState} from 'react';
 
-type Props = $ReadOnly<{
-  log: LogBoxLog,
-  onRetry: () => void,
-}>;
-
 export function getCollapseMessage(
   stackFrames: Stack,
   collapsed: boolean,
@@ -65,21 +60,21 @@ export function getCollapseMessage(
   }
 }
 
-function LogBoxInspectorStackFrames(props: Props): React.Node {
+component LogBoxInspectorStackFrames(log: LogBoxLog, onRetry: () => void) {
   const [collapsed, setCollapsed] = useState(() => {
     // Only collapse frames initially if some frames are not collapsed.
-    return props.log.getAvailableStack().some(({collapse}) => !collapse);
+    return log.getAvailableStack().some(({collapse}) => !collapse);
   });
 
   function getStackList() {
     if (collapsed === true) {
-      return props.log.getAvailableStack().filter(({collapse}) => !collapse);
+      return log.getAvailableStack().filter(({collapse}) => !collapse);
     } else {
-      return props.log.getAvailableStack();
+      return log.getAvailableStack();
     }
   }
 
-  if (props.log.getAvailableStack().length === 0) {
+  if (log.getAvailableStack().length === 0) {
     return null;
   }
 
@@ -88,13 +83,11 @@ function LogBoxInspectorStackFrames(props: Props): React.Node {
       heading="Call Stack"
       action={
         <LogBoxInspectorSourceMapStatus
-          onPress={
-            props.log.symbolicated.status === 'FAILED' ? props.onRetry : null
-          }
-          status={props.log.symbolicated.status}
+          onPress={log.symbolicated.status === 'FAILED' ? onRetry : null}
+          status={log.symbolicated.status}
         />
       }>
-      {props.log.symbolicated.status !== 'COMPLETE' && (
+      {log.symbolicated.status !== 'COMPLETE' && (
         <View style={stackStyles.hintBox}>
           <Text style={stackStyles.hintText}>
             This call stack is not symbolicated. Some features are unavailable
@@ -102,32 +95,29 @@ function LogBoxInspectorStackFrames(props: Props): React.Node {
           </Text>
         </View>
       )}
-      <StackFrameList
-        list={getStackList()}
-        status={props.log.symbolicated.status}
-      />
+      <StackFrameList list={getStackList()} status={log.symbolicated.status} />
       <StackFrameFooter
         onPress={() => setCollapsed(!collapsed)}
-        message={getCollapseMessage(props.log.getAvailableStack(), collapsed)}
+        message={getCollapseMessage(log.getAvailableStack(), collapsed)}
       />
     </LogBoxInspectorSection>
   );
 }
 
-function StackFrameList(props: {
+component StackFrameList(
   list: Stack | Array<StackFrame>,
   status: string | 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING',
-}) {
+) {
   return (
     <>
-      {props.list.map((frame, index) => {
+      {list.map((frame, index) => {
         const {file, lineNumber} = frame;
         return (
           <LogBoxInspectorStackFrame
             key={index}
             frame={frame}
             onPress={
-              props.status === 'COMPLETE' && file != null && lineNumber != null
+              status === 'COMPLETE' && file != null && lineNumber != null
                 ? () => openFileInEditor(file, lineNumber)
                 : null
             }
@@ -138,9 +128,7 @@ function StackFrameList(props: {
   );
 }
 
-function StackFrameFooter(
-  props: $ReadOnly<{message: string, onPress: () => void}>,
-) {
+component StackFrameFooter(message: string, onPress: () => void) {
   return (
     <View style={stackStyles.collapseContainer}>
       <LogBoxButton
@@ -148,9 +136,9 @@ function StackFrameFooter(
           default: 'transparent',
           pressed: LogBoxStyle.getBackgroundColor(1),
         }}
-        onPress={props.onPress}
+        onPress={onPress}
         style={stackStyles.collapseButton}>
-        <Text style={stackStyles.collapse}>{props.message}</Text>
+        <Text style={stackStyles.collapse}>{message}</Text>
       </LogBoxButton>
     </View>
   );