react-native-windows 0.71.7 → 0.72.0-preview.1

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

@@ -0,0 +1,167 @@
+/**
+ * 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 {CodeFrame} from '../Data/parseLogBoxLog';
+
+import ScrollView from '../../Components/ScrollView/ScrollView';
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import * as LogBoxData from '../Data/LogBoxData';
+import AnsiHighlight from './AnsiHighlight';
+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;
+  }
+
+  function getFileName() {
+    // $FlowFixMe[incompatible-use]
+    const matches = /[^/]*$/.exec(codeFrame.fileName);
+    if (matches && matches.length > 0) {
+      return matches[0];
+    }
+
+    // $FlowFixMe[incompatible-use]
+    return codeFrame.fileName;
+  }
+
+  function getLocation() {
+    // $FlowFixMe[incompatible-use]
+    const location = codeFrame.location;
+    if (location != null) {
+      return ` (${location.row}:${
+        location.column + 1 /* Code frame columns are zero indexed */
+      })`;
+    }
+
+    return null;
+  }
+
+  return (
+    <LogBoxInspectorSection heading="Source" action={<AppInfo />}>
+      <View style={styles.box}>
+        <View style={styles.frame}>
+          <ScrollView horizontal>
+            <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>
+    </LogBoxInspectorSection>
+  );
+}
+
+function AppInfo() {
+  const appInfo = LogBoxData.getAppInfo();
+  if (appInfo == null) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: appInfo.onPress
+          ? LogBoxStyle.getBackgroundColor(1)
+          : 'transparent',
+      }}
+      style={appInfoStyles.buildButton}
+      onPress={appInfo.onPress}>
+      <Text style={appInfoStyles.text}>
+        {appInfo.appVersion} ({appInfo.engine})
+      </Text>
+    </LogBoxButton>
+  );
+}
+
+const appInfoStyles = StyleSheet.create({
+  text: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 12,
+    lineHeight: 12,
+  },
+  buildButton: {
+    flex: 0,
+    flexGrow: 0,
+    paddingVertical: 4,
+    paddingHorizontal: 5,
+    borderRadius: 5,
+    marginRight: -8,
+  },
+});
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginLeft: 10,
+    marginRight: 10,
+    marginTop: 5,
+    borderRadius: 3,
+  },
+  frame: {
+    padding: 10,
+    borderBottomColor: LogBoxStyle.getTextColor(0.1),
+    borderBottomWidth: 1,
+  },
+  button: {
+    paddingTop: 10,
+    paddingBottom: 10,
+  },
+  content: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 20,
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      windows: 'Consolas',
+    }),
+  },
+  fileText: {
+    color: LogBoxStyle.getTextColor(0.5),
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      windows: 'Consolas',
+    }),
+  },
+});
+
+export default LogBoxInspectorCodeFrame;

package/Libraries/LogBox/UI/LogBoxInspectorHeader.windows.js

@@ -0,0 +1,172 @@
+/**
+ * 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 {ImageSource} from '../../Image/ImageSource';
+import type {LogLevel} from '../Data/LogBoxLog';
+
+import StatusBar from '../../Components/StatusBar/StatusBar';
+import View from '../../Components/View/View';
+import Image from '../../Image/Image';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+type Props = $ReadOnly<{|
+  onSelectIndex: (selectedIndex: number) => void,
+  selectedIndex: number,
+  total: number,
+  level: LogLevel,
+|}>;
+
+function LogBoxInspectorHeader(props: Props): React.Node {
+  if (props.level === 'syntax') {
+    return (
+      <View style={[styles.safeArea, styles[props.level]]}>
+        <View style={styles.header}>
+          <View style={styles.title}>
+            <Text style={styles.titleText}>Failed to compile</Text>
+          </View>
+        </View>
+      </View>
+    );
+  }
+
+  const prevIndex =
+    props.selectedIndex - 1 < 0 ? props.total - 1 : props.selectedIndex - 1;
+  const nextIndex =
+    props.selectedIndex + 1 > props.total - 1 ? 0 : props.selectedIndex + 1;
+
+  const titleText = `Log ${props.selectedIndex + 1} of ${props.total}`;
+
+  return (
+    <View style={[styles.safeArea, styles[props.level]]}>
+      <View style={styles.header}>
+        <LogBoxInspectorHeaderButton
+          disabled={props.total <= 1}
+          level={props.level}
+          image={require('./LogBoxImages/chevron-left.png')}
+          onPress={() => props.onSelectIndex(prevIndex)}
+        />
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{titleText}</Text>
+        </View>
+        <LogBoxInspectorHeaderButton
+          disabled={props.total <= 1}
+          level={props.level}
+          image={require('./LogBoxImages/chevron-right.png')}
+          onPress={() => props.onSelectIndex(nextIndex)}
+        />
+      </View>
+    </View>
+  );
+}
+
+const backgroundForLevel = (level: LogLevel) =>
+  ({
+    warn: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getWarningDarkColor(),
+    },
+    error: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getErrorDarkColor(),
+    },
+    fatal: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+    syntax: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  }[level]);
+
+function LogBoxInspectorHeaderButton(
+  props: $ReadOnly<{|
+    disabled: boolean,
+    image: ImageSource,
+    level: LogLevel,
+    onPress?: ?() => void,
+  |}>,
+): React.Node {
+  return (
+    <LogBoxButton
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? null : props.onPress}
+      style={headerStyles.button}>
+      {props.disabled ? null : (
+        <Image source={props.image} style={headerStyles.buttonImage} />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const headerStyles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    aspectRatio: 1,
+    justifyContent: 'center',
+    marginTop: 5,
+    marginRight: 6,
+    marginLeft: 6,
+    marginBottom: -8,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+    tintColor: LogBoxStyle.getTextColor(),
+  },
+});
+
+const styles = StyleSheet.create({
+  syntax: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  fatal: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(),
+  },
+  header: {
+    flexDirection: 'row',
+    // $FlowFixMe[underconstrained-implicit-instantiation]
+    height: Platform.select({
+      android: 48,
+      ios: 44,
+      // [Windows
+      windows: 48,
+      // Windows]
+    }),
+  },
+  title: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  titleText: {
+    color: LogBoxStyle.getTextColor(),
+    fontSize: 16,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  safeArea: {
+    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 40,
+  },
+});
+
+export default LogBoxInspectorHeader;

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

@@ -0,0 +1,193 @@
+/**
+ * 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 LogBoxLog from '../Data/LogBoxLog';
+
+import View from '../../Components/View/View';
+import openFileInEditor from '../../Core/Devtools/openFileInEditor';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxButton from './LogBoxButton';
+import LogBoxInspectorSection from './LogBoxInspectorSection';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React 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
+function getPrettyFileName(path: string) {
+  let fileName = path.replace(BEFORE_SLASH_RE, '');
+
+  // In DEV, include code for a common special case:
+  // prefer "folder/index.js" instead of just "index.js".
+  if (/^index\./.test(fileName)) {
+    const match = path.match(BEFORE_SLASH_RE);
+    if (match) {
+      const pathBeforeSlash = match[1];
+      if (pathBeforeSlash) {
+        const folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
+        // Note the below string contains a zero width space after the "/" character.
+        // This is to prevent browsers like Chrome from formatting the file name as a link.
+        // (Since this is a source link, it would not work to open the source file anyway.)
+        fileName = folderName + '/​' + fileName;
+      }
+    }
+  }
+
+  return fileName;
+}
+function LogBoxInspectorReactFrames(props: Props): React.Node {
+  const [collapsed, setCollapsed] = React.useState(true);
+  if (props.log.componentStack == null || props.log.componentStack.length < 1) {
+    return null;
+  }
+
+  function getStackList() {
+    if (collapsed) {
+      return props.log.componentStack.slice(0, 3);
+    } else {
+      return props.log.componentStack;
+    }
+  }
+
+  function getCollapseMessage() {
+    if (props.log.componentStack.length <= 3) {
+      return;
+    }
+
+    const count = props.log.componentStack.length - 3;
+    if (collapsed) {
+      return `See ${count} more components`;
+    } else {
+      return `Collapse ${count} components`;
+    }
+  }
+
+  return (
+    <LogBoxInspectorSection heading="Component Stack">
+      {getStackList().map((frame, index) => (
+        <View
+          // Unfortunately we don't have a unique identifier for stack traces.
+          key={index}
+          style={componentStyles.frameContainer}>
+          <LogBoxButton
+            backgroundColor={{
+              default: 'transparent',
+              pressed: LogBoxStyle.getBackgroundColor(1),
+            }}
+            onPress={
+              // 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('/')
+                ? () =>
+                    openFileInEditor(frame.fileName, frame.location?.row ?? 1)
+                : null
+            }
+            style={componentStyles.frame}>
+            <View style={componentStyles.component}>
+              <Text style={componentStyles.frameName}>
+                <Text style={componentStyles.bracket}>{'<'}</Text>
+                {frame.content}
+                <Text style={componentStyles.bracket}>{' />'}</Text>
+              </Text>
+            </View>
+            <Text style={componentStyles.frameLocation}>
+              {getPrettyFileName(frame.fileName)}
+              {frame.location ? `:${frame.location.row}` : ''}
+            </Text>
+          </LogBoxButton>
+        </View>
+      ))}
+      <View style={componentStyles.collapseContainer}>
+        <LogBoxButton
+          backgroundColor={{
+            default: 'transparent',
+            pressed: LogBoxStyle.getBackgroundColor(1),
+          }}
+          onPress={() => setCollapsed(!collapsed)}
+          style={componentStyles.collapseButton}>
+          <Text style={componentStyles.collapse}>{getCollapseMessage()}</Text>
+        </LogBoxButton>
+      </View>
+    </LogBoxInspectorSection>
+  );
+}
+
+const componentStyles = StyleSheet.create({
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+  },
+  frameContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+  },
+  frame: {
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  component: {
+    flexDirection: 'row',
+    paddingRight: 10,
+  },
+  frameName: {
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      windows: 'Consolas',
+    }),
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  bracket: {
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      windows: 'Consolas',
+    }),
+    color: LogBoxStyle.getTextColor(0.4),
+    fontSize: 14,
+    fontWeight: '500',
+    includeFontPadding: false,
+    lineHeight: 18,
+  },
+  frameLocation: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+    paddingLeft: 10,
+  },
+});
+
+export default LogBoxInspectorReactFrames;

package/Libraries/LogBox/UI/LogBoxInspectorSourceMapStatus.js

@@ -41,6 +41,7 @@ function LogBoxInspectorSourceMapStatus(props: Props): React.Node {
             useNativeDriver: true,
           }),
         );
+        // $FlowFixMe[incompatible-call]
         setState({
           animation,
           rotate: animated.interpolate({

package/Libraries/LogBox/UI/LogBoxInspectorStackFrame.js

@@ -19,10 +19,10 @@ import LogBoxButton from './LogBoxButton';
 import * as LogBoxStyle from './LogBoxStyle';
 import * as React from 'react';
 
-type Props = $ReadOnly<{|
+type Props = $ReadOnly<{
   frame: StackFrame,
   onPress?: ?(event: PressEvent) => void,
-|}>;
+}>;
 
 function LogBoxInspectorStackFrame(props: Props): React.Node {
   const {frame, onPress} = props;

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

@@ -0,0 +1,118 @@
+/**
+ * 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 {StackFrame} from '../../Core/NativeExceptionsManager';
+import type {PressEvent} from '../../Types/CoreEventTypes';
+
+import View from '../../Components/View/View';
+import StyleSheet from '../../StyleSheet/StyleSheet';
+import Text from '../../Text/Text';
+import Platform from '../../Utilities/Platform';
+import LogBoxButton from './LogBoxButton';
+import * as LogBoxStyle from './LogBoxStyle';
+import * as React from 'react';
+
+type Props = $ReadOnly<{
+  frame: StackFrame,
+  onPress?: ?(event: PressEvent) => 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) +
+    (frame.lineNumber != null
+      ? ':' +
+        frame.lineNumber +
+        (column && !isNaN(column) ? ':' + (column + 1) : '')
+      : '');
+  return (
+    <View style={styles.frameContainer}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: onPress ? LogBoxStyle.getBackgroundColor(1) : 'transparent',
+        }}
+        onPress={onPress}
+        style={styles.frame}>
+        <Text style={[styles.name, frame.collapse === true && styles.dim]}>
+          {frame.methodName}
+        </Text>
+        <Text
+          ellipsizeMode="middle"
+          numberOfLines={1}
+          style={[styles.location, frame.collapse === true && styles.dim]}>
+          {location}
+        </Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+function getFileName(file: ?string) {
+  if (file == null) {
+    return '<unknown>';
+  }
+  const queryIndex = file.indexOf('?');
+  return file.substring(
+    file.lastIndexOf('/') + 1,
+    queryIndex === -1 ? file.length : queryIndex,
+  );
+}
+
+const styles = StyleSheet.create({
+  frameContainer: {
+    flexDirection: 'row',
+    paddingHorizontal: 15,
+  },
+  frame: {
+    flex: 1,
+    paddingVertical: 4,
+    paddingHorizontal: 10,
+    borderRadius: 5,
+  },
+  lineLocation: {
+    flexDirection: 'row',
+  },
+  name: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '400',
+    fontFamily: Platform.select({
+      android: 'monospace',
+      ios: 'Menlo',
+      windows: 'Consolas',
+    }),
+  },
+  location: {
+    color: LogBoxStyle.getTextColor(0.8),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+    paddingLeft: 10,
+  },
+  dim: {
+    color: LogBoxStyle.getTextColor(0.4),
+    fontWeight: '300',
+  },
+  line: {
+    color: LogBoxStyle.getTextColor(0.8),
+    fontSize: 12,
+    fontWeight: '300',
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});
+
+export default LogBoxInspectorStackFrame;