@expo/metro-runtime 3.0.1 → 3.0.2

package/src/error-overlay/ErrorOverlay.tsx

@@ -0,0 +1,191 @@
+/**
+ * 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, { useCallback, useEffect, useState } from 'react';
+import { Keyboard, ScrollView, View, StyleSheet } from 'react-native';
+
+import * as LogBoxData from './Data/LogBoxData';
+import { LogBoxLog, StackType } from './Data/LogBoxLog';
+import { useLogs, useSelectedLog } from './Data/LogContext';
+import * as LogBoxStyle from './UI/LogBoxStyle';
+import { LogBoxInspectorCodeFrame } from './overlay/LogBoxInspectorCodeFrame';
+import { LogBoxInspectorFooter as ErrorOverlayFooter } from './overlay/LogBoxInspectorFooter';
+import { LogBoxInspectorHeader as ErrorOverlayHeader } from './overlay/LogBoxInspectorHeader';
+import { LogBoxInspectorMessageHeader } from './overlay/LogBoxInspectorMessageHeader';
+import { LogBoxInspectorStackFrames } from './overlay/LogBoxInspectorStackFrames';
+
+const HEADER_TITLE_MAP = {
+  warn: 'Console Warning',
+  error: 'Console Error',
+  fatal: 'Uncaught Error',
+  syntax: 'Syntax Error',
+  static: 'Static Rendering Error (Node.js)',
+  component: 'Render Error',
+};
+
+export function LogBoxInspectorContainer() {
+  const { selectedLogIndex, logs } = useLogs();
+  const log = logs[selectedLogIndex];
+  if (log == null) {
+    return null;
+  }
+  return <LogBoxInspector log={log} selectedLogIndex={selectedLogIndex} logs={logs} />;
+}
+
+export function LogBoxInspector({
+  log,
+  selectedLogIndex,
+  logs,
+}: {
+  log: LogBoxLog;
+  selectedLogIndex: number;
+  logs: LogBoxLog[];
+}) {
+  const onDismiss = useCallback((): void => {
+    // Here we handle the cases when the log is dismissed and it
+    // was either the last log, or when the current index
+    // is now outside the bounds of the log array.
+    const logsArray = Array.from(logs);
+    if (selectedLogIndex != null) {
+      if (logsArray.length - 1 <= 0) {
+        LogBoxData.setSelectedLog(-1);
+      } else if (selectedLogIndex >= logsArray.length - 1) {
+        LogBoxData.setSelectedLog(selectedLogIndex - 1);
+      }
+
+      LogBoxData.dismiss(logsArray[selectedLogIndex]);
+    }
+  }, [selectedLogIndex]);
+
+  const onMinimize = useCallback((): void => {
+    LogBoxData.setSelectedLog(-1);
+  }, []);
+
+  const onChangeSelectedIndex = useCallback((index: number): void => {
+    LogBoxData.setSelectedLog(index);
+  }, []);
+
+  useEffect(() => {
+    if (log) {
+      LogBoxData.symbolicateLogNow('stack', log);
+      LogBoxData.symbolicateLogNow('component', log);
+    }
+  }, [log]);
+
+  useEffect(() => {
+    // Optimistically symbolicate the last and next logs.
+    if (logs.length > 1) {
+      const selected = selectedLogIndex;
+      const lastIndex = logs.length - 1;
+      const prevIndex = selected - 1 < 0 ? lastIndex : selected - 1;
+      const nextIndex = selected + 1 > lastIndex ? 0 : selected + 1;
+      for (const type of ['component', 'stack'] as const) {
+        LogBoxData.symbolicateLogLazy(type, logs[prevIndex]);
+        LogBoxData.symbolicateLogLazy(type, logs[nextIndex]);
+      }
+    }
+  }, [logs, selectedLogIndex]);
+
+  useEffect(() => {
+    Keyboard.dismiss();
+  }, []);
+
+  const _handleRetry = useCallback(
+    (type: StackType) => {
+      LogBoxData.retrySymbolicateLogNow(type, log);
+    },
+    [log]
+  );
+
+  return (
+    <View style={styles.container}>
+      <ErrorOverlayHeader onSelectIndex={onChangeSelectedIndex} level={log.level} />
+      <ErrorOverlayBody onRetry={_handleRetry} />
+      <ErrorOverlayFooter onDismiss={onDismiss} onMinimize={onMinimize} />
+    </View>
+  );
+}
+
+export function ErrorOverlayBody({ onRetry }: { onRetry: (type: StackType) => void }) {
+  const log = useSelectedLog();
+  return <ErrorOverlayBodyContents log={log} onRetry={onRetry} />;
+}
+
+export function ErrorOverlayBodyContents({
+  log,
+  onRetry,
+}: {
+  log: LogBoxLog;
+  onRetry: (type: StackType) => void;
+}) {
+  const [collapsed, setCollapsed] = useState(true);
+
+  useEffect(() => {
+    setCollapsed(true);
+  }, [log]);
+
+  const headerTitle = HEADER_TITLE_MAP[log.isComponentError ? 'component' : log.level] ?? log.type;
+
+  const header = (
+    <LogBoxInspectorMessageHeader
+      collapsed={collapsed}
+      onPress={() => setCollapsed(!collapsed)}
+      message={log.message}
+      level={log.level}
+      title={headerTitle}
+    />
+  );
+
+  // Hide useless React stack.
+  const needsStack = !log.message.content.match(
+    /(Expected server HTML to contain a matching|Text content did not match\.)/
+  );
+
+  return (
+    <>
+      {collapsed && header}
+      <ScrollView style={styles.scrollBody}>
+        {!collapsed && header}
+
+        <LogBoxInspectorCodeFrame codeFrame={log.codeFrame} />
+        {needsStack && (
+          <LogBoxInspectorStackFrames
+            type="stack"
+            // eslint-disable-next-line react/jsx-no-bind
+            onRetry={onRetry.bind(onRetry, 'stack')}
+          />
+        )}
+        {!!log?.componentStack?.length && (
+          <LogBoxInspectorStackFrames
+            type="component"
+            // eslint-disable-next-line react/jsx-no-bind
+            onRetry={onRetry.bind(onRetry, 'component')}
+          />
+        )}
+      </ScrollView>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  scrollBody: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(1),
+    flex: 1,
+  },
+  container: {
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    zIndex: 999,
+    flex: 1,
+    // @ts-expect-error: fixed is not in the RN types but it works on web
+    position: 'fixed',
+  },
+});
+
+export default LogBoxData.withSubscription(LogBoxInspectorContainer);

package/src/error-overlay/LogBox.ts

@@ -0,0 +1,51 @@
+import { IgnorePattern, LogData } from './Data/LogBoxData';
+import { ExtendedExceptionData } from './Data/parseLogBoxLog';
+
+export { LogData, ExtendedExceptionData, IgnorePattern };
+
+interface ILogBox {
+  install(): void;
+  uninstall(): void;
+  isInstalled(): boolean;
+  ignoreLogs(patterns: readonly IgnorePattern[]): void;
+  ignoreAllLogs(ignore?: boolean): void;
+  clearAllLogs(): void;
+  addLog(log: LogData): void;
+  addException(error: ExtendedExceptionData): void;
+}
+
+const LogBox: ILogBox = {
+  install(): void {
+    // Do nothing.
+  },
+
+  uninstall(): void {
+    // Do nothing.
+  },
+
+  isInstalled(): boolean {
+    return false;
+  },
+
+  ignoreLogs(patterns: readonly IgnorePattern[]): void {
+    // Do nothing.
+  },
+
+  ignoreAllLogs(value?: boolean): void {
+    // Do nothing.
+  },
+
+  clearAllLogs(): void {
+    // Do nothing.
+  },
+
+  addLog(log: LogData): void {
+    // Do nothing.
+  },
+
+  addException(ex: ExtendedExceptionData): void {
+    // Do nothing.
+  },
+};
+
+export default LogBox;

package/src/error-overlay/LogBox.web.ts

@@ -0,0 +1,174 @@
+/**
+ * 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 { IgnorePattern, LogData } from './Data/LogBoxData';
+import { ExtendedExceptionData } from './Data/parseLogBoxLog';
+
+export { LogData, ExtendedExceptionData, IgnorePattern };
+
+let LogBox: ILogBox;
+
+interface ILogBox {
+  install(): void;
+  uninstall(): void;
+  isInstalled(): boolean;
+  ignoreLogs(patterns: readonly IgnorePattern[]): void;
+  ignoreAllLogs(ignore?: boolean): void;
+  clearAllLogs(): void;
+  addLog(log: LogData): void;
+  addException(error: ExtendedExceptionData): void;
+}
+
+/**
+ * LogBox displays logs in the app.
+ */
+if (__DEV__) {
+  const LogBoxData = require('./Data/LogBoxData');
+  const { parseLogBoxLog, parseInterpolation } =
+    require('./Data/parseLogBoxLog') as typeof import('./Data/parseLogBoxLog');
+
+  let originalConsoleError: typeof console.error | undefined;
+  let consoleErrorImpl: typeof console.error | undefined;
+
+  let isLogBoxInstalled: boolean = false;
+
+  LogBox = {
+    install(): void {
+      if (isLogBoxInstalled) {
+        return;
+      }
+
+      isLogBoxInstalled = true;
+
+      // Trigger lazy initialization of module.
+      // require("../NativeModules/specs/NativeLogBox");
+
+      // IMPORTANT: we only overwrite `console.error` and `console.warn` once.
+      // When we uninstall we keep the same reference and only change its
+      // internal implementation
+      const isFirstInstall = originalConsoleError == null;
+      if (isFirstInstall) {
+        originalConsoleError = console.error.bind(console);
+
+        console.error = (...args) => {
+          consoleErrorImpl?.(...args);
+        };
+      }
+
+      consoleErrorImpl = registerError;
+
+      if (process.env.NODE_ENV === 'test') {
+        LogBoxData.setDisabled(true);
+      }
+    },
+
+    uninstall(): void {
+      if (!isLogBoxInstalled) {
+        return;
+      }
+
+      isLogBoxInstalled = false;
+
+      // IMPORTANT: we don't re-assign to `console` in case the method has been
+      // decorated again after installing LogBox. E.g.:
+      // Before uninstalling: original > LogBox > OtherErrorHandler
+      // After uninstalling:  original > LogBox (noop) > OtherErrorHandler
+      consoleErrorImpl = originalConsoleError;
+      delete (console as any).disableLogBox;
+    },
+
+    isInstalled(): boolean {
+      return isLogBoxInstalled;
+    },
+
+    ignoreLogs(patterns: readonly IgnorePattern[]): void {
+      LogBoxData.addIgnorePatterns(patterns);
+    },
+
+    ignoreAllLogs(value?: boolean): void {
+      LogBoxData.setDisabled(value == null ? true : value);
+    },
+
+    clearAllLogs(): void {
+      LogBoxData.clear();
+    },
+
+    addLog(log: LogData): void {
+      if (isLogBoxInstalled) {
+        LogBoxData.addLog(log);
+      }
+    },
+
+    addException(error: ExtendedExceptionData): void {
+      if (isLogBoxInstalled) {
+        LogBoxData.addException(error);
+      }
+    },
+  };
+
+  const isWarningModuleWarning = (...args: any) => {
+    return typeof args[0] === 'string' && args[0].startsWith('Warning: ');
+  };
+
+  const registerError = (...args: Parameters<typeof console.error>): void => {
+    // Let errors within LogBox itself fall through.
+    if (LogBoxData.isLogBoxErrorMessage(args[0])) {
+      originalConsoleError?.(...args);
+      return;
+    }
+
+    try {
+      if (!isWarningModuleWarning(...args)) {
+        // Only show LogBox for the 'warning' module, otherwise pass 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
+        // React Native ExceptionsManager, which reports it to LogBox as an error.
+        //
+        // The 'warning' module needs to be handled here because React internally calls
+        // `console.error('Warning: ')` with the component stack already included.
+        originalConsoleError?.(...args);
+        return;
+      }
+
+      const { category, message, componentStack } = parseLogBoxLog(args);
+
+      if (!LogBoxData.isMessageIgnored(message.content)) {
+        // Interpolate the message so they are formatted for adb and other CLIs.
+        // This is different than the message.content above because it includes component stacks.
+        const interpolated = parseInterpolation(args);
+        originalConsoleError?.(interpolated.message.content);
+
+        LogBoxData.addLog({
+          // Always show the static rendering issues as full screen since they
+          // are too confusing otherwise.
+          level: /did not match\. Server:/.test(message.content) ? 'fatal' : 'error',
+          category,
+          message,
+          componentStack,
+        });
+      }
+    } catch (err) {
+      LogBoxData.reportUnexpectedLogBoxError(err);
+    }
+  };
+} else {
+  LogBox = {
+    install(): void {},
+    uninstall(): void {},
+    isInstalled(): boolean {
+      return false;
+    },
+    ignoreLogs(patterns: readonly IgnorePattern[]): void {},
+    ignoreAllLogs(value?: boolean): void {},
+    clearAllLogs(): void {},
+    addLog(log: LogData): void {},
+    addException(ex: ExtendedExceptionData): void {},
+  };
+}
+
+export default LogBox;

package/src/error-overlay/UI/AnsiHighlight.tsx

@@ -0,0 +1,96 @@
+/**
+ * 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 Anser from 'anser';
+import React from 'react';
+import { StyleProp, StyleSheet, Text, TextStyle, View } from 'react-native';
+
+// Afterglow theme from https://iterm2colorschemes.com/
+const COLORS: Record<string, string> = {
+  'ansi-black': 'rgb(27, 27, 27)',
+  'ansi-red': 'rgb(187, 86, 83)',
+  'ansi-green': 'rgb(144, 157, 98)',
+  'ansi-yellow': 'rgb(234, 193, 121)',
+  'ansi-blue': 'rgb(125, 169, 199)',
+  'ansi-magenta': 'rgb(176, 101, 151)',
+  'ansi-cyan': 'rgb(140, 220, 216)',
+  // Instead of white, use the default color provided to the component
+  // 'ansi-white': 'rgb(216, 216, 216)',
+  'ansi-bright-black': 'rgb(98, 98, 98)',
+  'ansi-bright-red': 'rgb(187, 86, 83)',
+  'ansi-bright-green': 'rgb(144, 157, 98)',
+  'ansi-bright-yellow': 'rgb(234, 193, 121)',
+  'ansi-bright-blue': 'rgb(125, 169, 199)',
+  'ansi-bright-magenta': 'rgb(176, 101, 151)',
+  'ansi-bright-cyan': 'rgb(140, 220, 216)',
+  'ansi-bright-white': 'rgb(247, 247, 247)',
+};
+
+export function Ansi({ text, style }: { text: string; style: StyleProp<TextStyle> }) {
+  let commonWhitespaceLength = Infinity;
+  const parsedLines = text.split(/\n/).map((line) =>
+    Anser.ansiToJson(line, {
+      json: true,
+      remove_empty: true,
+      use_classes: true,
+    })
+  );
+
+  parsedLines.map((lines) => {
+    // The third item on each line includes the whitespace of the source code.
+    // We are looking for the least amount of common whitespace to trim all lines.
+    // Example: Array [" ", " 96 |", "     text", ...]
+    const match = lines[2] && lines[2]?.content?.match(/^ +/);
+    const whitespaceLength = (match && match[0]?.length) || 0;
+    if (whitespaceLength < commonWhitespaceLength) {
+      commonWhitespaceLength = whitespaceLength;
+    }
+  });
+
+  const getText = (content: string, key: number) => {
+    if (key === 1) {
+      // Remove the vertical bar after line numbers
+      return content.replace(/\| $/, ' ');
+    } else if (key === 2 && commonWhitespaceLength < Infinity) {
+      // Remove common whitespace at the beginning of the line
+      return content.substr(commonWhitespaceLength);
+    } else {
+      return content;
+    }
+  };
+
+  return (
+    <View>
+      {parsedLines.map((items, i) => (
+        <View style={styles.line} key={i}>
+          {items.map((bundle, key) => {
+            const textStyle =
+              bundle.fg && COLORS[bundle.fg]
+                ? {
+                    backgroundColor: bundle.bg && COLORS[bundle.bg],
+                    color: bundle.fg && COLORS[bundle.fg],
+                  }
+                : {
+                    backgroundColor: bundle.bg && COLORS[bundle.bg],
+                  };
+            return (
+              <Text style={[style, textStyle]} key={key}>
+                {getText(bundle.content, key)}
+              </Text>
+            );
+          })}
+        </View>
+      ))}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  line: {
+    flexDirection: 'row',
+  },
+});

package/src/error-overlay/UI/LogBoxButton.tsx

@@ -0,0 +1,63 @@
+/**
+ * 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, { useState } from 'react';
+import { GestureResponderEvent, Insets, Platform, Pressable, View, ViewStyle } from 'react-native';
+
+import * as LogBoxStyle from './LogBoxStyle';
+
+type Props = {
+  backgroundColor: {
+    default: string;
+    pressed: string;
+  };
+  children?: any;
+  hitSlop?: Insets;
+  onPress?: ((event: GestureResponderEvent) => void) | null;
+  style?: ViewStyle;
+};
+
+export function LogBoxButton(props: Props) {
+  const [pressed, setPressed] = useState(false);
+
+  let backgroundColor = props.backgroundColor;
+  if (!backgroundColor) {
+    backgroundColor = {
+      default: LogBoxStyle.getBackgroundColor(0.95),
+      pressed: LogBoxStyle.getBackgroundColor(0.6),
+    };
+  }
+
+  const content = (
+    <View
+      style={[
+        {
+          backgroundColor: pressed ? backgroundColor.pressed : backgroundColor.default,
+          ...Platform.select({
+            web: {
+              cursor: 'pointer',
+            },
+          }),
+        },
+        props.style,
+      ]}>
+      {props.children}
+    </View>
+  );
+
+  return props.onPress == null ? (
+    content
+  ) : (
+    <Pressable
+      hitSlop={props.hitSlop}
+      onPress={props.onPress}
+      onPressIn={() => setPressed(true)}
+      onPressOut={() => setPressed(false)}>
+      {content}
+    </Pressable>
+  );
+}

package/src/error-overlay/UI/LogBoxMessage.tsx

@@ -0,0 +1,73 @@
+/**
+ * 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 { StyleProp, Text, TextStyle } from 'react-native';
+
+import type { Message } from '../Data/parseLogBoxLog';
+
+type Props = {
+  message: Message;
+  style: StyleProp<TextStyle>;
+  plaintext?: boolean;
+  maxLength?: number;
+};
+
+const cleanContent = (content: string) =>
+  content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
+
+export function LogBoxMessage(props: Props): JSX.Element {
+  const { content, substitutions }: Message = props.message;
+
+  if (props.plaintext === true) {
+    return <Text>{cleanContent(content)}</Text>;
+  }
+
+  const maxLength = props.maxLength != null ? props.maxLength : Infinity;
+  const substitutionStyle: StyleProp<TextStyle> = props.style;
+  const elements: JSX.Element[] = [];
+  let length = 0;
+  const createUnderLength = (key: string | '-1', message: string, style?: StyleProp<TextStyle>) => {
+    let cleanMessage = cleanContent(message);
+
+    if (props.maxLength != null) {
+      cleanMessage = cleanMessage.slice(0, props.maxLength - length);
+    }
+
+    if (length < maxLength) {
+      elements.push(
+        <Text key={key} style={style}>
+          {cleanMessage}
+        </Text>
+      );
+    }
+
+    length += cleanMessage.length;
+  };
+
+  const lastOffset = substitutions.reduce((prevOffset, substitution, index) => {
+    const key = String(index);
+
+    if (substitution.offset > prevOffset) {
+      const prevPart = content.substr(prevOffset, substitution.offset - prevOffset);
+
+      createUnderLength(key, prevPart);
+    }
+
+    const substititionPart = content.substr(substitution.offset, substitution.length);
+
+    createUnderLength(key + '.5', substititionPart, substitutionStyle);
+    return substitution.offset + substitution.length;
+  }, 0);
+
+  if (lastOffset < content.length) {
+    const lastPart = content.substr(lastOffset);
+    createUnderLength('-1', lastPart);
+  }
+
+  return <>{elements}</>;
+}