@expo/metro-runtime 3.0.0 → 3.0.2

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}</>;
+}

package/src/error-overlay/UI/LogBoxStyle.ts

@@ -0,0 +1,64 @@
+/**
+ * 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.
+ */
+
+export function getBackgroundColor(opacity?: number): string {
+  return `rgba(0, 0, 0, ${opacity == null ? 1 : opacity})`;
+  // return `rgba(51, 51, 51, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundLightColor(opacity?: number): string {
+  return `rgba(69, 69, 69, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getBackgroundDarkColor(opacity?: number): string {
+  return `rgba(34, 34, 34, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningColor(opacity?: number): string {
+  return `rgba(250, 186, 48, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningDarkColor(opacity?: number): string {
+  return `rgba(224, 167, 8, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getFatalDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorColor(opacity?: number): string {
+  return `rgba(243, 83, 105, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getErrorDarkColor(opacity?: number): string {
+  return `rgba(208, 75, 95, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getLogColor(opacity?: number): string {
+  return `rgba(119, 119, 119, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getWarningHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getDividerColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getHighlightColor(opacity?: number): string {
+  return `rgba(252, 176, 29, ${opacity == null ? 1 : opacity})`;
+}
+
+export function getTextColor(opacity?: number): string {
+  return `rgba(255, 255, 255, ${opacity == null ? 1 : opacity})`;
+}

package/src/error-overlay/UI/constants.ts

@@ -0,0 +1,7 @@
+import { Platform } from 'react-native';
+
+export const CODE_FONT = Platform.select({
+  default: 'Courier',
+  ios: 'Courier New',
+  android: 'monospace',
+});

package/src/error-overlay/formatProjectFilePath.ts

@@ -0,0 +1,38 @@
+import type { StackFrame } from 'stacktrace-parser';
+
+export type MetroStackFrame = StackFrame & { collapse?: boolean };
+
+export function formatProjectFilePath(projectRoot: string, file?: string | null): string {
+  if (file == null) {
+    return '<unknown>';
+  }
+
+  return pathRelativeToPath(file.replace(/\\/g, '/'), projectRoot.replace(/\\/g, '/')).replace(
+    /\?.*$/,
+    ''
+  );
+}
+
+function pathRelativeToPath(path: string, relativeTo: string, sep = '/') {
+  const relativeToParts = relativeTo.split(sep);
+  const pathParts = path.split(sep);
+  let i = 0;
+  while (i < relativeToParts.length && i < pathParts.length) {
+    if (relativeToParts[i] !== pathParts[i]) {
+      break;
+    }
+    i++;
+  }
+  return pathParts.slice(i).join(sep);
+}
+
+export function getStackFormattedLocation(projectRoot: string, frame: MetroStackFrame) {
+  const column = frame.column != null && parseInt(String(frame.column), 10);
+  const location =
+    formatProjectFilePath(projectRoot, frame.file) +
+    (frame.lineNumber != null
+      ? ':' + frame.lineNumber + (column && !isNaN(column) ? ':' + (column + 1) : '')
+      : '');
+
+  return location;
+}

package/src/error-overlay/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+// TODO: This will break tree shaking due to how we transpile this package.
+import { Platform } from 'react-native';
+
+import ErrorToastContainer from './toast/ErrorToastContainer';
+
+declare const process: any;
+
+if (!global.setImmediate) {
+  global.setImmediate = function (fn) {
+    return setTimeout(fn, 0);
+  };
+}
+
+if (process.env.NODE_ENV === 'development') {
+  if (Platform.OS === 'web') {
+    // Stack traces are big with React Navigation
+
+    require('./LogBox').default.install();
+  }
+}
+
+export function withErrorOverlay(Comp: React.ComponentType<any>) {
+  if (process.env.NODE_ENV === 'production') {
+    return Comp;
+  }
+  return function ErrorOverlay(props: any) {
+    return (
+      <ErrorToastContainer>
+        <Comp {...props} />
+      </ErrorToastContainer>
+    );
+  };
+}

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

@@ -0,0 +1,4 @@
+// @ts-expect-error
+import ExceptionsManager from 'react-native/Library/Core/ExceptionsManager';
+
+export default ExceptionsManager;

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

@@ -0,0 +1,82 @@
+/**
+ * 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 parseErrorStack from '../parseErrorStack';
+
+type ExtendedError = any;
+
+class SyntheticError extends Error {
+  name: string = '';
+}
+
+/**
+ * Handles the developer-visible aspect of errors and exceptions
+ */
+let exceptionID = 0;
+
+function parseException(e: ExtendedError, isFatal: boolean) {
+  const stack = parseErrorStack(e?.stack);
+  const currentExceptionID = ++exceptionID;
+  const originalMessage = e.message || '';
+  let message = originalMessage;
+  if (e.componentStack != null) {
+    message += `\n\nThis error is located at:${e.componentStack}`;
+  }
+  const namePrefix = e.name == null || e.name === '' ? '' : `${e.name}: `;
+
+  if (!message.startsWith(namePrefix)) {
+    message = namePrefix + message;
+  }
+
+  message = e.jsEngine == null ? message : `${message}, js engine: ${e.jsEngine}`;
+
+  const data = {
+    message,
+    originalMessage: message === originalMessage ? null : originalMessage,
+    name: e.name == null || e.name === '' ? null : e.name,
+    componentStack: typeof e.componentStack === 'string' ? e.componentStack : null,
+    stack,
+    id: currentExceptionID,
+    isFatal,
+    extraData: {
+      jsEngine: e.jsEngine,
+      rawStack: e.stack,
+    },
+  };
+
+  return {
+    ...data,
+    isComponentError: !!e.isComponentError,
+  };
+}
+
+/**
+ * Logs exceptions to the (native) console and displays them
+ */
+function handleException(e: any) {
+  let error: Error;
+  if (e instanceof Error) {
+    error = e;
+  } else {
+    // Workaround for reporting errors caused by `throw 'some string'`
+    // Unfortunately there is no way to figure out the stacktrace in this
+    // case, so if you ended up here trying to trace an error, look for
+    // `throw '<error message>'` somewhere in your codebase.
+    error = new SyntheticError(e);
+  }
+
+  require('../../LogBox').default.addException(parseException(error, true));
+}
+
+const ErrorUtils = {
+  parseException,
+  handleException,
+  SyntheticError,
+};
+
+export default ErrorUtils;

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

@@ -0,0 +1,3 @@
+import NativeLogBox from 'react-native/Libraries/NativeModules/specs/NativeLogBox';
+
+export default NativeLogBox;

package/src/error-overlay/modules/NativeLogBox/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+let currentRoot: ReactDOM.Root | null = null;
+export default {
+  show() {
+    if (currentRoot) {
+      return;
+    }
+    const ErrorOverlay: React.ComponentType = require('../../ErrorOverlay').default;
+    // Create a new div with ID `error-overlay` element and render LogBoxInspector into it.
+    const div = document.createElement('div');
+    div.id = 'error-overlay';
+    document.body.appendChild(div);
+
+    currentRoot = ReactDOM.createRoot(div);
+    currentRoot.render(<ErrorOverlay />);
+  },
+  hide() {
+    // Remove div with ID `error-overlay`
+    if (currentRoot) {
+      currentRoot.unmount();
+      currentRoot = null;
+    }
+    const div = document.getElementById('error-overlay');
+    div?.remove();
+  },
+};

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

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