@expo/metro-runtime 3.0.0 → 3.0.2

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

@@ -0,0 +1,52 @@
+/**
+ * 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 * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  heading: string;
+  children: React.ReactNode;
+  action?: any;
+};
+
+export function LogBoxInspectorSection(props: Props) {
+  return (
+    <View style={styles.section}>
+      <View style={styles.heading}>
+        <Text style={styles.headingText}>{props.heading}</Text>
+        {props.action}
+      </View>
+      <View style={styles.body}>{props.children}</View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  section: {
+    marginTop: 15,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  headingText: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 18,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  body: {
+    paddingBottom: 10,
+  },
+});

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

@@ -0,0 +1,125 @@
+/**
+ * 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, { useEffect, useState } from 'react';
+import { Animated, Easing, GestureResponderEvent, StyleSheet, Text } from 'react-native';
+
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  onPress?: ((event: GestureResponderEvent) => void) | null;
+  status: 'COMPLETE' | 'FAILED' | 'NONE' | 'PENDING';
+};
+
+export function LogBoxInspectorSourceMapStatus(props: Props) {
+  const [state, setState] = useState<{
+    animation: null | Animated.CompositeAnimation;
+    rotate: null | Animated.AnimatedInterpolation<string>;
+  }>({
+    animation: null,
+    rotate: null,
+  });
+
+  useEffect(() => {
+    if (props.status === 'PENDING') {
+      if (state.animation == null) {
+        const animated = new Animated.Value(0);
+        const animation = Animated.loop(
+          Animated.timing(animated, {
+            duration: 2000,
+            easing: Easing.linear,
+            toValue: 1,
+            useNativeDriver: true,
+          })
+        );
+        setState({
+          animation,
+          rotate: animated.interpolate({
+            inputRange: [0, 1],
+            outputRange: ['0deg', '360deg'],
+          }),
+        });
+        animation.start();
+      }
+    } else {
+      if (state.animation != null) {
+        state.animation.stop();
+        setState({
+          animation: null,
+          rotate: null,
+        });
+      }
+    }
+
+    return () => {
+      if (state.animation != null) {
+        state.animation.stop();
+      }
+    };
+  }, [props.status, state.animation]);
+
+  let image;
+  let color;
+  switch (props.status) {
+    case 'FAILED':
+      image = require('@expo/metro-runtime/assets/alert-triangle.png');
+      color = LogBoxStyle.getErrorColor(1);
+      break;
+    case 'PENDING':
+      image = require('@expo/metro-runtime/assets/loader.png');
+      color = LogBoxStyle.getWarningColor(1);
+      break;
+  }
+
+  if (props.status === 'COMPLETE' || image == null) {
+    return null;
+  }
+
+  return (
+    <LogBoxButton
+      backgroundColor={{
+        default: 'transparent',
+        pressed: LogBoxStyle.getBackgroundColor(1),
+      }}
+      hitSlop={{ bottom: 8, left: 8, right: 8, top: 8 }}
+      onPress={props.onPress}
+      style={styles.root}>
+      <Animated.Image
+        source={image}
+        tintColor={color ?? LogBoxStyle.getTextColor(0.4)}
+        style={[
+          styles.image,
+          state.rotate == null || props.status !== 'PENDING'
+            ? null
+            : { transform: [{ rotate: state.rotate }] },
+        ]}
+      />
+      <Text style={[styles.text, { color }]}>Source Map</Text>
+    </LogBoxButton>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    alignItems: 'center',
+    borderRadius: 12,
+    flexDirection: 'row',
+    height: 24,
+    paddingHorizontal: 8,
+  },
+  image: {
+    height: 14,
+    width: 16,
+    marginEnd: 4,
+  },
+  text: {
+    fontSize: 12,
+    includeFontPadding: false,
+    lineHeight: 16,
+  },
+});

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

@@ -0,0 +1,89 @@
+/**
+ * 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 { GestureResponderEvent, StyleSheet, Text, View } from 'react-native';
+import { StackFrame } from 'stacktrace-parser';
+
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+import { CODE_FONT } from '../UI/constants';
+import { getStackFormattedLocation } from '../formatProjectFilePath';
+
+declare const process: any;
+
+type Props = {
+  frame: StackFrame & { collapse?: boolean };
+  onPress?: (event: GestureResponderEvent) => void;
+};
+
+export function LogBoxInspectorStackFrame(props: Props) {
+  const { frame, onPress } = props;
+  const location = getStackFormattedLocation(process.env.EXPO_PROJECT_ROOT, frame);
+  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>
+  );
+}
+
+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: CODE_FONT,
+  },
+  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,
+  },
+});

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

@@ -0,0 +1,201 @@
+/**
+ * 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 { StyleSheet, Text, View } from 'react-native';
+
+import { LogBoxInspectorSection } from './LogBoxInspectorSection';
+import { LogBoxInspectorSourceMapStatus } from './LogBoxInspectorSourceMapStatus';
+import { LogBoxInspectorStackFrame } from './LogBoxInspectorStackFrame';
+import type { StackType } from '../Data/LogBoxLog';
+import type { Stack } from '../Data/LogBoxSymbolication';
+import { useSelectedLog } from '../Data/LogContext';
+import { LogBoxButton } from '../UI/LogBoxButton';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+import openFileInEditor from '../modules/openFileInEditor';
+
+type Props = {
+  type: StackType;
+  onRetry: () => void;
+};
+
+export function getCollapseMessage(stackFrames: Stack, collapsed: boolean): string {
+  if (stackFrames.length === 0) {
+    return 'No frames to show';
+  }
+
+  const collapsedCount = stackFrames.reduce((count, { collapse }) => {
+    if (collapse === true) {
+      return count + 1;
+    }
+
+    return count;
+  }, 0);
+
+  if (collapsedCount === 0) {
+    return 'Showing all frames';
+  }
+
+  const framePlural = `frame${collapsedCount > 1 ? 's' : ''}`;
+  if (collapsedCount === stackFrames.length) {
+    return collapsed
+      ? `See${collapsedCount > 1 ? ' all ' : ' '}${collapsedCount} collapsed ${framePlural}`
+      : `Collapse${collapsedCount > 1 ? ' all ' : ' '}${collapsedCount} ${framePlural}`;
+  } else {
+    return collapsed
+      ? `See ${collapsedCount} more ${framePlural}`
+      : `Collapse ${collapsedCount} ${framePlural}`;
+  }
+}
+
+export function LogBoxInspectorStackFrames({ onRetry, type }: Props) {
+  const log = useSelectedLog();
+
+  const [collapsed, setCollapsed] = useState(() => {
+    // Only collapse frames initially if some frames are not collapsed.
+    return log.getAvailableStack(type)?.some(({ collapse }) => !collapse);
+  });
+
+  function getStackList() {
+    if (collapsed === true) {
+      return log.getAvailableStack(type)?.filter(({ collapse }) => !collapse);
+    } else {
+      return log.getAvailableStack(type);
+    }
+  }
+
+  if (log.getAvailableStack(type)?.length === 0) {
+    return null;
+  }
+
+  return (
+    <LogBoxInspectorSection
+      heading={type === 'component' ? 'Component Stack' : 'Call Stack'}
+      action={
+        <LogBoxInspectorSourceMapStatus
+          onPress={log.symbolicated[type].status === 'FAILED' ? onRetry : null}
+          status={log.symbolicated[type].status}
+        />
+      }>
+      {log.symbolicated[type].status !== 'COMPLETE' && (
+        <View style={stackStyles.hintBox}>
+          <Text style={stackStyles.hintText}>
+            This call stack is not symbolicated. Some features are unavailable such as viewing the
+            function name or tapping to open files.
+          </Text>
+        </View>
+      )}
+      <StackFrameList list={getStackList()!} status={log.symbolicated[type].status} />
+      <StackFrameFooter
+        onPress={() => setCollapsed(!collapsed)}
+        message={getCollapseMessage(log.getAvailableStack(type)!, !!collapsed)}
+      />
+    </LogBoxInspectorSection>
+  );
+}
+
+function StackFrameList({
+  list,
+  status,
+}: {
+  list: Stack;
+  status: 'NONE' | 'PENDING' | 'COMPLETE' | 'FAILED';
+}): any {
+  return list.map((frame, index) => {
+    const { file, lineNumber } = frame;
+    return (
+      <LogBoxInspectorStackFrame
+        key={index}
+        frame={frame}
+        onPress={
+          status === 'COMPLETE' && file != null && lineNumber != null
+            ? () => openFileInEditor(file, lineNumber)
+            : undefined
+        }
+      />
+    );
+  });
+}
+
+function StackFrameFooter({ message, onPress }: { message: string; onPress: () => void }) {
+  return (
+    <View style={stackStyles.collapseContainer}>
+      <LogBoxButton
+        backgroundColor={{
+          default: 'transparent',
+          pressed: LogBoxStyle.getBackgroundColor(1),
+        }}
+        onPress={onPress}
+        style={stackStyles.collapseButton}>
+        <Text style={stackStyles.collapse}>{message}</Text>
+      </LogBoxButton>
+    </View>
+  );
+}
+
+const stackStyles = StyleSheet.create({
+  section: {
+    marginTop: 15,
+  },
+  heading: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    paddingHorizontal: 12,
+    marginBottom: 10,
+  },
+  headingText: {
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 20,
+    fontWeight: '600',
+    includeFontPadding: false,
+    lineHeight: 20,
+  },
+  body: {
+    paddingBottom: 10,
+  },
+  bodyText: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '500',
+    paddingHorizontal: 27,
+  },
+  hintText: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 13,
+    includeFontPadding: false,
+    lineHeight: 18,
+    fontWeight: '400',
+    marginHorizontal: 10,
+  },
+  hintBox: {
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    marginHorizontal: 10,
+    paddingHorizontal: 5,
+    paddingVertical: 10,
+    borderRadius: 5,
+    marginBottom: 5,
+  },
+  collapseContainer: {
+    marginLeft: 15,
+    flexDirection: 'row',
+  },
+  collapseButton: {
+    borderRadius: 5,
+  },
+  collapse: {
+    color: LogBoxStyle.getTextColor(0.7),
+    fontSize: 12,
+    fontWeight: '300',
+    lineHeight: 20,
+    marginTop: 0,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+  },
+});

package/src/error-overlay/toast/ErrorToast.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, { useEffect } from 'react';
+import { Image, Pressable, StyleSheet, Text, View } from 'react-native';
+
+import { ErrorToastMessage } from './ErrorToastMessage';
+import * as LogBoxData from '../Data/LogBoxData';
+import { LogBoxLog } from '../Data/LogBoxLog';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+type Props = {
+  log: LogBoxLog;
+  totalLogCount: number;
+  level: 'warn' | 'error';
+  onPressOpen: () => void;
+  onPressDismiss: () => void;
+};
+
+function useSymbolicatedLog(log: LogBoxLog) {
+  // Eagerly symbolicate so the stack is available when pressing to inspect.
+  useEffect(() => {
+    LogBoxData.symbolicateLogLazy('stack', log);
+    LogBoxData.symbolicateLogLazy('component', log);
+  }, [log]);
+}
+
+export function ErrorToast(props: Props) {
+  const { totalLogCount, level, log } = props;
+
+  useSymbolicatedLog(log);
+
+  return (
+    <View style={toastStyles.container}>
+      <Pressable style={{ flex: 1 }} onPress={props.onPressOpen}>
+        {({
+          /** @ts-expect-error: react-native types are broken. */
+          hovered,
+          pressed,
+        }) => (
+          <View
+            style={[
+              toastStyles.press,
+              {
+                // @ts-expect-error: web-only type
+                transitionDuration: '150ms',
+                backgroundColor: pressed
+                  ? '#323232'
+                  : hovered
+                  ? '#111111'
+                  : LogBoxStyle.getBackgroundColor(),
+              },
+            ]}>
+            <Count count={totalLogCount} level={level} />
+            <ErrorToastMessage message={log.message} />
+            <Dismiss onPress={props.onPressDismiss} />
+          </View>
+        )}
+      </Pressable>
+    </View>
+  );
+}
+
+function Count({ count, level }: { count: number; level: Props['level'] }) {
+  return (
+    <View style={[countStyles.inside, countStyles[level]]}>
+      <Text style={countStyles.text}>{count <= 1 ? '!' : count}</Text>
+    </View>
+  );
+}
+
+function Dismiss({ onPress }: { onPress: () => void }) {
+  return (
+    <Pressable
+      style={{
+        marginLeft: 5,
+      }}
+      hitSlop={{
+        top: 12,
+        right: 10,
+        bottom: 12,
+        left: 10,
+      }}
+      onPress={onPress}>
+      {({
+        /** @ts-expect-error: react-native types are broken. */
+        hovered,
+        pressed,
+      }) => (
+        <View
+          style={[dismissStyles.press, hovered && { opacity: 0.8 }, pressed && { opacity: 0.5 }]}>
+          <Image
+            source={require('@expo/metro-runtime/assets/close.png')}
+            style={dismissStyles.image}
+          />
+        </View>
+      )}
+    </Pressable>
+  );
+}
+
+const countStyles = StyleSheet.create({
+  warn: {
+    backgroundColor: LogBoxStyle.getWarningColor(1),
+  },
+  error: {
+    backgroundColor: LogBoxStyle.getErrorColor(1),
+  },
+  log: {
+    backgroundColor: LogBoxStyle.getLogColor(1),
+  },
+  inside: {
+    marginRight: 8,
+    minWidth: 22,
+    aspectRatio: 1,
+    paddingHorizontal: 4,
+    borderRadius: 11,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  text: {
+    color: LogBoxStyle.getTextColor(1),
+    fontSize: 14,
+    lineHeight: 18,
+    textAlign: 'center',
+    fontWeight: '600',
+    textShadow: `0px 0px 3px ${LogBoxStyle.getBackgroundColor(0.8)}`,
+  },
+});
+
+const dismissStyles = StyleSheet.create({
+  press: {
+    backgroundColor: '#323232',
+    height: 20,
+    width: 20,
+    borderRadius: 25,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  image: {
+    height: 8,
+    width: 8,
+  },
+});
+
+const toastStyles = StyleSheet.create({
+  container: {
+    height: 48,
+    justifyContent: 'center',
+    marginBottom: 4,
+  },
+  press: {
+    borderWidth: 1,
+    borderRadius: 8,
+    overflow: 'hidden',
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderColor: '#323232',
+    backgroundColor: LogBoxStyle.getBackgroundColor(),
+    flex: 1,
+    paddingHorizontal: 12,
+  },
+});

package/src/error-overlay/toast/ErrorToastContainer.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function ErrorToastContainer({
+  children,
+}: {
+  children: React.ReactNode;
+}): React.ReactElement {
+  return <>{children}</>;
+}