@expo/metro-runtime 3.0.0 → 3.0.2

package/src/error-overlay/modules/openFileInEditor/index.ts

@@ -0,0 +1,16 @@
+declare const process: any;
+
+function openFileInEditor(file: string, lineNumber: number) {
+  if (process.env.NODE_ENV !== 'production') {
+    // TODO: This is not a great URL since it now blocks users from accessing the `/open-stack-frame` url in their router
+    // ideally it would be something like `/_devtools/open-stack-frame`.
+    const baseUrl = window.location.protocol + '//' + window.location.host;
+
+    fetch(baseUrl + '/open-stack-frame', {
+      method: 'POST',
+      body: JSON.stringify({ file, lineNumber }),
+    });
+  }
+}
+
+export default openFileInEditor;

package/src/error-overlay/modules/parseErrorStack/index.ts

@@ -0,0 +1,26 @@
+import { parse, StackFrame } from 'stacktrace-parser';
+
+function parseErrorStack(stack?: string): (StackFrame & { collapse?: boolean })[] {
+  if (stack == null) {
+    return [];
+  }
+  if (Array.isArray(stack)) {
+    return stack;
+  }
+
+  // This file seems to be web-only, so we can remove this.
+  // // Native support for parsing for non-standard Hermes stack traces.
+  // if (global.HermesInternal) {
+  //   return require('./parseHermesStack').parseErrorStack(stack);
+  // }
+
+  return parse(stack).map((frame) => {
+    // frame.file will mostly look like `http://localhost:8081/index.bundle?platform=web&dev=true&hot=false`
+    return {
+      ...frame,
+      column: frame.column != null ? frame.column - 1 : null,
+    };
+  });
+}
+
+export default parseErrorStack;

package/src/error-overlay/modules/parseErrorStack/parseHermesStack.ts

@@ -0,0 +1,3 @@
+import parseErrorStack from 'react-native/Libraries/Core/Devtools/parseErrorStack';
+
+export { parseErrorStack };

package/src/error-overlay/modules/stringifySafe/index.ts

@@ -0,0 +1,115 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+
+/**
+ * Tries to stringify with JSON.stringify and toString, but catches exceptions
+ * (e.g. from circular objects) and always returns a string and never throws.
+ */
+export function createStringifySafeWithLimits(limits: {
+  maxDepth?: number;
+  maxStringLimit?: number;
+  maxArrayLimit?: number;
+  maxObjectKeysLimit?: number;
+}): (foo: any) => string {
+  const {
+    maxDepth = Number.POSITIVE_INFINITY,
+    maxStringLimit = Number.POSITIVE_INFINITY,
+    maxArrayLimit = Number.POSITIVE_INFINITY,
+    maxObjectKeysLimit = Number.POSITIVE_INFINITY,
+  } = limits;
+  const stack: any[] = [];
+  function replacer(this: unknown, _key: string, value: any): any {
+    while (stack.length && this !== stack[0]) {
+      stack.shift();
+    }
+
+    if (typeof value === 'string') {
+      const truncatedString = '...(truncated)...';
+      if (value.length > maxStringLimit + truncatedString.length) {
+        return value.substring(0, maxStringLimit) + truncatedString;
+      }
+      return value;
+    }
+    if (typeof value !== 'object' || value === null) {
+      return value;
+    }
+
+    let retval = value;
+    if (Array.isArray(value)) {
+      if (stack.length >= maxDepth) {
+        retval = `[ ... array with ${value.length} values ... ]`;
+      } else if (value.length > maxArrayLimit) {
+        retval = value
+          .slice(0, maxArrayLimit)
+          .concat([`... extra ${value.length - maxArrayLimit} values truncated ...`]);
+      }
+    } else {
+      // Add refinement after Array.isArray call.
+      if (typeof value !== 'object') {
+        throw new Error('This was already found earlier');
+      }
+      const keys = Object.keys(value);
+      if (stack.length >= maxDepth) {
+        retval = `{ ... object with ${keys.length} keys ... }`;
+      } else if (keys.length > maxObjectKeysLimit) {
+        // Return a sample of the keys.
+        retval = {};
+        for (const k of keys.slice(0, maxObjectKeysLimit)) {
+          retval[k] = value[k];
+        }
+        const truncatedKey = '...(truncated keys)...';
+        retval[truncatedKey] = keys.length - maxObjectKeysLimit;
+      }
+    }
+    stack.unshift(retval);
+    return retval;
+  }
+
+  return function stringifySafe(arg: any): string {
+    if (arg === undefined) {
+      return 'undefined';
+    } else if (arg === null) {
+      return 'null';
+    } else if (typeof arg === 'function') {
+      try {
+        return arg.toString();
+      } catch {
+        return '[function unknown]';
+      }
+    } else if (arg instanceof Error) {
+      return arg.name + ': ' + arg.message;
+    } else {
+      // Perform a try catch, just in case the object has a circular
+      // reference or stringify throws for some other reason.
+      try {
+        const ret = JSON.stringify(arg, replacer);
+        if (ret === undefined) {
+          return '["' + typeof arg + '" failed to stringify]';
+        }
+        return ret;
+      } catch {
+        if (typeof arg.toString === 'function') {
+          try {
+            // $FlowFixMe[incompatible-use] : toString shouldn't take any arguments in general.
+            return arg.toString();
+          } catch {}
+        }
+      }
+    }
+    return '["' + typeof arg + '" failed to stringify]';
+  };
+}
+
+const stringifySafe = createStringifySafeWithLimits({
+  maxDepth: 10,
+  maxStringLimit: 100,
+  maxArrayLimit: 50,
+  maxObjectKeysLimit: 50,
+});
+
+export default stringifySafe;

package/src/error-overlay/modules/symbolicateStackTrace/index.native.ts

@@ -0,0 +1,3 @@
+import symbolicateStackTrace from 'react-native/Libraries/Core/Devtools/symbolicateStackTrace';
+
+export default symbolicateStackTrace;

package/src/error-overlay/modules/symbolicateStackTrace/index.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+
+import { StackFrame } from 'stacktrace-parser';
+
+export type CodeFrame = {
+  content: string;
+  location?: {
+    row: number;
+    column: number;
+    [key: string]: any;
+  };
+  fileName: string;
+};
+
+export type SymbolicatedStackTrace = {
+  stack: StackFrame[];
+  codeFrame?: CodeFrame;
+};
+
+async function symbolicateStackTrace(stack: StackFrame[]): Promise<SymbolicatedStackTrace> {
+  const baseUrl =
+    typeof window === 'undefined'
+      ? process.env.EXPO_DEV_SERVER_ORIGIN
+      : window.location.protocol + '//' + window.location.host;
+
+  const response = await fetch(baseUrl + '/symbolicate', {
+    method: 'POST',
+    body: JSON.stringify({ stack }),
+  });
+  return await response.json();
+}
+
+export default symbolicateStackTrace;

package/src/error-overlay/overlay/LogBoxInspectorCodeFrame.tsx

@@ -0,0 +1,102 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+
+import { LogBoxInspectorSection } from './LogBoxInspectorSection';
+import type { CodeFrame } from '../Data/parseLogBoxLog';
+import { Ansi } from '../UI/AnsiHighlight';
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+import { CODE_FONT } from '../UI/constants';
+import { formatProjectFilePath } from '../formatProjectFilePath';
+import openFileInEditor from '../modules/openFileInEditor';
+
+declare const process: any;
+
+export function LogBoxInspectorCodeFrame({ codeFrame }: { codeFrame?: CodeFrame }) {
+  if (codeFrame == null) {
+    return null;
+  }
+
+  function getFileName() {
+    return formatProjectFilePath(process.env.EXPO_PROJECT_ROOT, codeFrame?.fileName);
+  }
+
+  function getLocation() {
+    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">
+      <View style={styles.box}>
+        <View style={styles.frame}>
+          <ScrollView horizontal>
+            <Ansi 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>
+  );
+}
+
+const styles = StyleSheet.create({
+  box: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    borderWidth: 1,
+    borderColor: '#323232',
+    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: CODE_FONT,
+  },
+  fileText: {
+    userSelect: 'none',
+    color: LogBoxStyle.getTextColor(0.5),
+    textAlign: 'center',
+    flex: 1,
+    fontSize: 16,
+    includeFontPadding: false,
+    fontFamily: CODE_FONT,
+  },
+});

package/src/error-overlay/overlay/LogBoxInspectorFooter.tsx

@@ -0,0 +1,111 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+import React from 'react';
+import { Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { useSelectedLog } from '../Data/LogContext';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  onDismiss: () => void;
+  onMinimize: () => void;
+};
+
+export function LogBoxInspectorFooter(props: Props) {
+  const log = useSelectedLog();
+
+  if (['static', 'syntax'].includes(log.level)) {
+    return (
+      <View style={styles.root}>
+        <View style={styles.button}>
+          <Text style={styles.syntaxErrorText}>This error cannot be dismissed.</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.root}>
+      <FooterButton text="Dismiss" onPress={props.onDismiss} />
+      <FooterButton text="Minimize" onPress={props.onMinimize} />
+    </View>
+  );
+}
+
+function FooterButton({ text, onPress }: { onPress: () => void; text: string }) {
+  return (
+    <Pressable onPress={onPress} style={{ flex: 1 }}>
+      {({
+        /** @ts-expect-error: react-native types are broken. */
+        hovered,
+        pressed,
+      }) => (
+        <View
+          style={[
+            buttonStyles.safeArea,
+            {
+              // @ts-expect-error: web-only type
+              transitionDuration: '150ms',
+              backgroundColor: pressed
+                ? '#323232'
+                : hovered
+                ? '#111111'
+                : LogBoxStyle.getBackgroundColor(),
+            },
+          ]}>
+          <View style={buttonStyles.content}>
+            <Text style={buttonStyles.label}>{text}</Text>
+          </View>
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const buttonStyles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    borderTopWidth: 1,
+    borderColor: '#323232',
+    // paddingBottom: DeviceInfo.getConstants().isIPhoneX_deprecated ? 30 : 0,
+  },
+  content: {
+    alignItems: 'center',
+    height: 48,
+    justifyContent: 'center',
+  },
+  label: {
+    userSelect: 'none',
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+});
+
+const styles = StyleSheet.create({
+  root: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    boxShadow: `0 -2px 0 2px #000`,
+    flexDirection: 'row',
+  },
+  button: {
+    flex: 1,
+  },
+  syntaxErrorText: {
+    textAlign: 'center',
+    width: '100%',
+    height: 48,
+    fontSize: 14,
+    lineHeight: 20,
+    paddingTop: 20,
+    paddingBottom: 50,
+    fontStyle: 'italic',
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});

package/src/error-overlay/overlay/LogBoxInspectorHeader.tsx

@@ -0,0 +1,167 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+import React from 'react';
+import { Image, Platform, StatusBar, StyleSheet, Text, View } from 'react-native';
+
+import type { LogLevel } from '../Data/LogBoxLog';
+import { useLogs } from '../Data/LogContext';
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  onSelectIndex: (selectedIndex: number) => void;
+  level: LogLevel;
+};
+
+export function LogBoxInspectorHeader(props: Props) {
+  const { selectedLogIndex: selectedIndex, logs } = useLogs();
+  const total = logs.length;
+
+  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 = selectedIndex - 1 < 0 ? total - 1 : selectedIndex - 1;
+  const nextIndex = selectedIndex + 1 > total - 1 ? 0 : selectedIndex + 1;
+
+  const titleText = `Log ${selectedIndex + 1} of ${total}`;
+
+  return (
+    <View style={[styles.safeArea, styles[props.level]]}>
+      <View style={styles.header}>
+        <LogBoxInspectorHeaderButton
+          disabled={total <= 1}
+          level={props.level}
+          image={require('@expo/metro-runtime/assets/chevron-left.png')}
+          onPress={() => props.onSelectIndex(prevIndex)}
+        />
+        <View style={styles.title}>
+          <Text style={styles.titleText}>{titleText}</Text>
+        </View>
+        <LogBoxInspectorHeaderButton
+          disabled={total <= 1}
+          level={props.level}
+          image={require('@expo/metro-runtime/assets/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(),
+    },
+    static: {
+      default: 'transparent',
+      pressed: LogBoxStyle.getFatalDarkColor(),
+    },
+  })[level];
+
+function LogBoxInspectorHeaderButton(props: {
+  disabled: boolean;
+  image: number;
+  level: LogLevel;
+  onPress?: () => void;
+}) {
+  return (
+    <LogBoxButton
+      backgroundColor={backgroundForLevel(props.level)}
+      onPress={props.disabled ? undefined : props.onPress}
+      style={headerStyles.button}>
+      {props.disabled ? null : (
+        <Image
+          source={props.image}
+          tintColor={LogBoxStyle.getTextColor()}
+          style={headerStyles.buttonImage}
+        />
+      )}
+    </LogBoxButton>
+  );
+}
+
+const headerStyles = StyleSheet.create({
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    aspectRatio: 1,
+    marginRight: 6,
+    marginLeft: 6,
+    borderRadius: 3,
+  },
+  buttonImage: {
+    height: 14,
+    width: 8,
+  },
+});
+
+const styles = StyleSheet.create({
+  syntax: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  static: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  fatal: {
+    backgroundColor: LogBoxStyle.getFatalColor(),
+  },
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(),
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+
+    paddingHorizontal: 8,
+    height: Platform.select({
+      default: 48,
+      ios: 44,
+    }),
+  },
+  title: {
+    alignItems: 'center',
+    flex: 1,
+    justifyContent: 'center',
+  },
+  titleText: {
+    color: LogBoxStyle.getTextColor(),
+    fontSize: 16,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  safeArea: {
+    paddingTop: Platform.OS !== 'ios' ? StatusBar.currentHeight : 40,
+  },
+});

package/src/error-overlay/overlay/LogBoxInspectorMessageHeader.tsx

@@ -0,0 +1,116 @@
+/**
+ * Copyright (c) 650 Industries.
+ * 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.
+ */
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import type { LogLevel } from '../Data/LogBoxLog';
+import type { Message } from '../Data/parseLogBoxLog';
+import { LogBoxMessage } from '../UI/LogBoxMessage';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  collapsed: boolean;
+  message: Message;
+  level: LogLevel;
+  title: string;
+  onPress: () => void;
+};
+
+const SHOW_MORE_MESSAGE_LENGTH = 300;
+
+function ShowMoreButton({
+  message,
+  collapsed,
+  onPress,
+}: Pick<Props, 'collapsed' | 'message' | 'onPress'>) {
+  if (message.content.length < SHOW_MORE_MESSAGE_LENGTH || !collapsed) {
+    return null;
+  }
+  return (
+    <Text style={styles.collapse} onPress={onPress}>
+      ... See More
+    </Text>
+  );
+}
+
+export function LogBoxInspectorMessageHeader(props: Props) {
+  return (
+    <View style={styles.body}>
+      <View style={styles.heading}>
+        <Text style={[styles.headingText, styles[props.level]]}>{props.title}</Text>
+      </View>
+      <Text style={styles.bodyText}>
+        <LogBoxMessage
+          maxLength={props.collapsed ? SHOW_MORE_MESSAGE_LENGTH : Infinity}
+          message={props.message}
+          style={styles.messageText}
+        />
+        <ShowMoreButton {...props} />
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  body: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    boxShadow: `0 2px 0 2px #00000080`,
+  },
+  bodyText: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 20,
+    fontWeight: '500',
+    paddingHorizontal: 12,
+    paddingBottom: 10,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginTop: 10,
+    marginBottom: 5,
+  },
+  headingText: {
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 28,
+  },
+  warn: {
+    color: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    color: LogBoxStyle.getErrorColor(1),
+  },
+  fatal: {
+    color: LogBoxStyle.getFatalColor(1),
+  },
+  syntax: {
+    color: LogBoxStyle.getFatalColor(1),
+  },
+  static: {
+    color: LogBoxStyle.getFatalColor(1),
+  },
+  messageText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 14,
+    fontWeight: '300',
+    lineHeight: 12,
+  },
+  button: {
+    paddingVertical: 5,
+    paddingHorizontal: 10,
+    borderRadius: 3,
+  },
+});