@expo/metro-runtime 3.0.1 → 3.0.2

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,
+  },
+});

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,
+  },
+});