@expo/metro-runtime 3.0.1 → 3.0.2

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

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

@@ -0,0 +1,92 @@
+/**
+ * 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, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+
+import { ErrorToast } from './ErrorToast';
+import * as LogBoxData from '../Data/LogBoxData';
+import { LogBoxLog } from '../Data/LogBoxLog';
+import { useLogs } from '../Data/LogContext';
+import { useRejectionHandler } from '../useRejectionHandler';
+
+export function ErrorToastContainer() {
+  useRejectionHandler();
+  const { logs, isDisabled } = useLogs();
+  if (!logs.length || isDisabled) {
+    return null;
+  }
+  return <ErrorToastStack logs={logs} />;
+}
+
+function ErrorToastStack({ logs }: { logs: LogBoxLog[] }) {
+  const onDismissWarns = useCallback(() => {
+    LogBoxData.clearWarnings();
+  }, []);
+
+  const onDismissErrors = useCallback(() => {
+    LogBoxData.clearErrors();
+  }, []);
+
+  const setSelectedLog = useCallback((index: number): void => {
+    LogBoxData.setSelectedLog(index);
+  }, []);
+
+  function openLog(log: LogBoxLog) {
+    let index = logs.length - 1;
+
+    // Stop at zero because if we don't find any log, we'll open the first log.
+    while (index > 0 && logs[index] !== log) {
+      index -= 1;
+    }
+    setSelectedLog(index);
+  }
+
+  const warnings = useMemo(() => logs.filter((log) => log.level === 'warn'), [logs]);
+
+  const errors = useMemo(
+    () => logs.filter((log) => log.level === 'error' || log.level === 'fatal'),
+    [logs]
+  );
+
+  return (
+    <View style={styles.list}>
+      {warnings.length > 0 && (
+        <ErrorToast
+          log={warnings[warnings.length - 1]}
+          level="warn"
+          totalLogCount={warnings.length}
+          onPressOpen={() => openLog(warnings[warnings.length - 1])}
+          onPressDismiss={onDismissWarns}
+        />
+      )}
+
+      {errors.length > 0 && (
+        <ErrorToast
+          log={errors[errors.length - 1]}
+          level="error"
+          totalLogCount={errors.length}
+          onPressOpen={() => openLog(errors[errors.length - 1])}
+          onPressDismiss={onDismissErrors}
+        />
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  list: {
+    bottom: 6,
+    left: 10,
+    right: 10,
+    maxWidth: 320,
+    // @ts-expect-error
+    position: 'fixed',
+  },
+});
+
+export default LogBoxData.withSubscription(ErrorToastContainer);

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

@@ -0,0 +1,28 @@
+import React from 'react';
+import { StyleSheet, Text } from 'react-native';
+
+import type { Message as MessageType } from '../Data/parseLogBoxLog';
+import { LogBoxMessage } from '../UI/LogBoxMessage';
+import * as LogBoxStyle from '../UI/LogBoxStyle';
+
+export function ErrorToastMessage({ message }: { message?: MessageType }) {
+  return (
+    <Text numberOfLines={1} style={styles.text}>
+      {message && <LogBoxMessage plaintext message={message} style={styles.substitutionText} />}
+    </Text>
+  );
+}
+
+const styles = StyleSheet.create({
+  text: {
+    userSelect: 'none',
+    paddingLeft: 8,
+    color: LogBoxStyle.getTextColor(1),
+    flex: 1,
+    fontSize: 14,
+    lineHeight: 22,
+  },
+  substitutionText: {
+    color: LogBoxStyle.getTextColor(0.6),
+  },
+});

package/src/error-overlay/useRejectionHandler.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import ExceptionsManager from './modules/ExceptionsManager';
+
+function useStackTraceLimit(limit: number) {
+  const current = React.useRef(0);
+  React.useEffect(() => {
+    try {
+      // @ts-expect-error: StackTraceLimit is not defined in the Error type
+      const currentLimit = Error.stackTraceLimit;
+      // @ts-expect-error: StackTraceLimit is not defined in the Error type
+      Error.stackTraceLimit = limit;
+      current.current = currentLimit;
+    } catch {}
+    return () => {
+      try {
+        // @ts-expect-error: StackTraceLimit is not defined in the Error type
+        Error.stackTraceLimit = current.current;
+      } catch {}
+    };
+  }, [limit]);
+}
+
+export function useRejectionHandler() {
+  const hasError = React.useRef(false);
+
+  useStackTraceLimit(35);
+
+  React.useEffect(() => {
+    function onUnhandledError(ev: ErrorEvent) {
+      hasError.current = true;
+
+      const error = ev?.error;
+      if (!error || !(error instanceof Error) || typeof error.stack !== 'string') {
+        return;
+      }
+
+      ExceptionsManager.handleException(error);
+    }
+
+    function onUnhandledRejection(ev: PromiseRejectionEvent) {
+      hasError.current = true;
+
+      const reason = ev?.reason;
+      if (!reason || !(reason instanceof Error) || typeof reason.stack !== 'string') {
+        return;
+      }
+
+      ExceptionsManager.handleException(reason);
+    }
+
+    window.addEventListener('unhandledrejection', onUnhandledRejection);
+    window.addEventListener('error', onUnhandledError);
+    return () => {
+      window.removeEventListener('error', onUnhandledError);
+      window.removeEventListener('unhandledrejection', onUnhandledRejection);
+    };
+  }, []);
+
+  return hasError;
+}

package/src/getDevServer.native.ts

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

package/src/getDevServer.ts

@@ -0,0 +1,34 @@
+import qs from 'qs';
+
+const getDevServer = () => {
+  // Disable for SSR
+  if (typeof window === 'undefined') {
+    return {
+      bundleLoadedFromServer: true,
+      fullBundleUrl: '',
+      url: '',
+    };
+  }
+
+  return {
+    // The bundle is always loaded from a server in the browser.
+    bundleLoadedFromServer: true,
+
+    /** URL but ensures that platform query param is added. */
+    get fullBundleUrl() {
+      if (document?.currentScript && 'src' in document.currentScript) {
+        return document.currentScript.src;
+      }
+
+      const url = window.location.toString();
+      const query = qs.parse(url);
+
+      return (
+        location.origin + location.pathname + '?' + qs.stringify({ ...query, platform: 'web' })
+      );
+    },
+    url: location.origin + location.pathname,
+  };
+};
+
+export default getDevServer;

package/src/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright © 2023 650 Industries.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import './location/install';
+// IMPORT POSITION MATTERS FOR FAST REFRESH ON WEB
+import './effects';
+// vvv EVERYTHING ELSE vvv
+import './async-require';