@expo/metro-runtime 3.0.1 → 3.0.2

package/src/async-require/fetchThenEval.web.ts

@@ -0,0 +1,70 @@
+/**
+ * Copyright © 2022 650 Industries.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+// Basically `__webpack_require__.l`.
+export function fetchThenEvalAsync(
+  url: string,
+  {
+    scriptType,
+    nonce,
+    crossOrigin,
+  }: { scriptType?: string; nonce?: string; crossOrigin?: string } = {}
+): Promise<void> {
+  if (typeof document === 'undefined') {
+    return require('./fetchThenEvalJs').fetchThenEvalAsync(url);
+  }
+  return new Promise<void>((resolve, reject) => {
+    const script = document.createElement('script');
+    if (scriptType) script.type = scriptType;
+    if (nonce) script.setAttribute('nonce', nonce);
+    // script.setAttribute('data-expo-metro', ...);
+    script.src = url;
+
+    if (crossOrigin && script.src.indexOf(window.location.origin + '/') !== 0) {
+      script.crossOrigin = crossOrigin;
+    }
+
+    script.onload = () => {
+      script.parentNode && script.parentNode.removeChild(script);
+      resolve();
+    };
+    // Create a new error object to preserve the original stack trace.
+    const error = new AsyncRequireError();
+
+    // Server error or network error.
+    script.onerror = (ev) => {
+      let event: Event;
+      if (typeof ev === 'string') {
+        event = {
+          type: 'error',
+          target: {
+            // @ts-expect-error
+            src: event,
+          },
+        };
+      } else {
+        event = ev;
+      }
+
+      const errorType = event && (event.type === 'load' ? 'missing' : event.type);
+      // @ts-expect-error
+      const realSrc = event?.target?.src;
+      error.message = 'Loading module ' + url + ' failed.\n(' + errorType + ': ' + realSrc + ')';
+      error.type = errorType;
+      error.request = realSrc;
+
+      script.parentNode && script.parentNode.removeChild(script);
+      reject(error);
+    };
+    document.head.appendChild(script);
+  });
+}
+
+class AsyncRequireError extends Error {
+  readonly name = 'AsyncRequireError';
+  type?: string;
+  request?: string;
+}

package/src/async-require/fetchThenEvalJs.ts

@@ -0,0 +1,39 @@
+/**
+ * Copyright © 2022 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 { fetchAsync } from './fetchAsync';
+
+declare let global: {
+  globalEvalWithSourceUrl?: any;
+};
+
+/**
+ * Load a bundle for a URL using fetch + eval on native and script tag injection on web.
+ *
+ * @param bundlePath Given a statement like `import('./Bacon')` `bundlePath` would be `Bacon`.
+ */
+export function fetchThenEvalAsync(url: string): Promise<void> {
+  return fetchAsync(url).then(({ body, headers }) => {
+    if (
+      headers?.has?.('Content-Type') != null &&
+      headers.get('Content-Type')!.includes('application/json')
+    ) {
+      // Errors are returned as JSON.
+      throw new Error(JSON.parse(body).message || `Unknown error fetching '${url}'`);
+    }
+
+    // NOTE(EvanBacon): All of this code is ignored in development mode at the root.
+
+    // Some engines do not support `sourceURL` as a comment. We expose a
+    // `globalEvalWithSourceUrl` function to handle updates in that case.
+    if (global.globalEvalWithSourceUrl) {
+      global.globalEvalWithSourceUrl(body, url);
+    } else {
+      // eslint-disable-next-line no-eval
+      eval(body);
+    }
+  });
+}

package/src/async-require/index.native.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright © 2022 650 Industries.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Ensure this is removed in production.
+// TODO: Enable in production.
+if (process.env.NODE_ENV !== 'production') {
+  const { buildAsyncRequire } =
+    require('./buildAsyncRequire') as typeof import('./buildAsyncRequire');
+  // @ts-ignore
+  global[`${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`] = buildAsyncRequire();
+}

package/src/async-require/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright © 2022 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 { buildAsyncRequire } from './buildAsyncRequire';
+
+// @ts-ignore
+global[`${global.__METRO_GLOBAL_PREFIX__ ?? ''}__loadBundleAsync`] = buildAsyncRequire();

package/src/async-require/loadBundle.ts

@@ -0,0 +1,46 @@
+/**
+ * Copyright © 2022 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 { buildUrlForBundle } from './buildUrlForBundle';
+import { fetchThenEvalAsync } from './fetchThenEval';
+// import LoadingView from '../LoadingView';
+
+let pendingRequests = 0;
+
+/**
+ * Load a bundle for a URL using fetch + eval on native and script tag injection on web.
+ *
+ * @param bundlePath Given a statement like `import('./Bacon')` `bundlePath` would be `Bacon.bundle?params=from-metro`.
+ */
+export async function loadBundleAsync(bundlePath: string): Promise<void> {
+  const requestUrl = buildUrlForBundle(bundlePath);
+
+  if (process.env.NODE_ENV === 'production') {
+    return fetchThenEvalAsync(requestUrl);
+  } else {
+    const LoadingView = require('../LoadingView')
+      .default as typeof import('../LoadingView').default;
+
+    // Send a signal to the `expo` package to show the loading indicator.
+    LoadingView.showMessage('Downloading...', 'load');
+
+    pendingRequests++;
+
+    return fetchThenEvalAsync(requestUrl)
+      .then(() => {
+        if (process.env.NODE_ENV !== 'production') {
+          const HMRClient = require('../HMRClient')
+            .default as typeof import('../HMRClient').default;
+          HMRClient.registerBundle(requestUrl);
+        }
+      })
+      .finally(() => {
+        if (!--pendingRequests) {
+          LoadingView.hide();
+        }
+      });
+  }
+}

package/src/effects.ts

@@ -0,0 +1,11 @@
+// Only during development.
+if (process.env.NODE_ENV !== 'production') {
+  if (
+    // Disable for SSR
+    typeof window !== 'undefined'
+  ) {
+    require('./setupFastRefresh');
+    require('./setupHMR');
+    require('./messageSocket');
+  }
+}

package/src/error-overlay/Data/LogBoxData.tsx

@@ -0,0 +1,438 @@
+/**
+ * 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 * as React from 'react';
+
+import { LogBoxLog, StackType } from './LogBoxLog';
+import type { LogLevel } from './LogBoxLog';
+import { LogContext } from './LogContext';
+import { parseLogBoxException } from './parseLogBoxLog';
+import type { Message, Category, ComponentStack, ExtendedExceptionData } from './parseLogBoxLog';
+import NativeLogBox from '../modules/NativeLogBox';
+import parseErrorStack from '../modules/parseErrorStack';
+
+export type LogBoxLogs = Set<LogBoxLog>;
+
+export type LogData = {
+  level: LogLevel;
+  message: Message;
+  category: Category;
+  componentStack: ComponentStack;
+};
+
+type ExtendedError = any;
+
+export type Observer = (options: {
+  logs: LogBoxLogs;
+  isDisabled: boolean;
+  selectedLogIndex: number;
+}) => void;
+
+export type IgnorePattern = string | RegExp;
+
+export type Subscription = {
+  unsubscribe: () => void;
+};
+
+export type WarningInfo = {
+  finalFormat: string;
+  forceDialogImmediately: boolean;
+  suppressDialog_LEGACY: boolean;
+  suppressCompletely: boolean;
+  monitorEvent: string | null;
+  monitorListVersion: number;
+  monitorSampleRate: number;
+};
+
+export type WarningFilter = (format: string) => WarningInfo;
+
+type Props = object;
+
+type State = {
+  logs: LogBoxLogs;
+  isDisabled: boolean;
+  hasError: boolean;
+  selectedLogIndex: number;
+};
+
+const observers: Set<{ observer: Observer } & any> = new Set();
+const ignorePatterns: Set<IgnorePattern> = new Set();
+let logs: LogBoxLogs = new Set();
+let updateTimeout: null | ReturnType<typeof setImmediate> | ReturnType<typeof setTimeout> = null;
+let _isDisabled = false;
+let _selectedIndex = -1;
+
+const LOGBOX_ERROR_MESSAGE =
+  'An error was thrown when attempting to render log messages via LogBox.';
+
+function getNextState() {
+  return {
+    logs,
+    isDisabled: _isDisabled,
+    selectedLogIndex: _selectedIndex,
+  };
+}
+
+export function reportLogBoxError(error: ExtendedError, componentStack?: string): void {
+  const ExceptionsManager = require('../modules/ExceptionsManager').default;
+
+  if (componentStack != null) {
+    error.componentStack = componentStack;
+  }
+  ExceptionsManager.handleException(error);
+}
+
+export function reportUnexpectedLogBoxError(error: ExtendedError, componentStack?: string): void {
+  error.message = `${LOGBOX_ERROR_MESSAGE}\n\n${error.message}`;
+  return reportLogBoxError(error, componentStack);
+}
+
+export function isLogBoxErrorMessage(message: string): boolean {
+  return typeof message === 'string' && message.includes(LOGBOX_ERROR_MESSAGE);
+}
+
+export function isMessageIgnored(message: string): boolean {
+  for (const pattern of ignorePatterns) {
+    if (
+      (pattern instanceof RegExp && pattern.test(message)) ||
+      (typeof pattern === 'string' && message.includes(pattern))
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function setImmediateShim(callback: () => void) {
+  if (!global.setImmediate) {
+    return setTimeout(callback, 0);
+  }
+  return global.setImmediate(callback);
+}
+
+function handleUpdate(): void {
+  if (updateTimeout == null) {
+    updateTimeout = setImmediateShim(() => {
+      updateTimeout = null;
+      const nextState = getNextState();
+      observers.forEach(({ observer }) => observer(nextState));
+    });
+  }
+}
+
+function appendNewLog(newLog: LogBoxLog): void {
+  // Don't want store these logs because they trigger a
+  // state update when we add them to the store.
+  if (isMessageIgnored(newLog.message.content)) {
+    return;
+  }
+
+  // If the next log has the same category as the previous one
+  // then roll it up into the last log in the list by incrementing
+  // the count (similar to how Chrome does it).
+  const lastLog = Array.from(logs).pop();
+  if (lastLog && lastLog.category === newLog.category) {
+    lastLog.incrementCount();
+    handleUpdate();
+    return;
+  }
+
+  if (newLog.level === 'fatal') {
+    // If possible, to avoid jank, we don't want to open the error before
+    // it's symbolicated. To do that, we optimistically wait for
+    // symbolication for up to a second before adding the log.
+    const OPTIMISTIC_WAIT_TIME = 1000;
+
+    let addPendingLog: null | (() => void) = () => {
+      logs.add(newLog);
+      if (_selectedIndex < 0) {
+        setSelectedLog(logs.size - 1);
+      } else {
+        handleUpdate();
+      }
+      addPendingLog = null;
+    };
+
+    const optimisticTimeout = setTimeout(() => {
+      if (addPendingLog) {
+        addPendingLog();
+      }
+    }, OPTIMISTIC_WAIT_TIME);
+
+    // TODO: HANDLE THIS
+    newLog.symbolicate('component');
+
+    newLog.symbolicate('stack', (status) => {
+      if (addPendingLog && status !== 'PENDING') {
+        addPendingLog();
+        clearTimeout(optimisticTimeout);
+      } else if (status !== 'PENDING') {
+        // The log has already been added but we need to trigger a render.
+        handleUpdate();
+      }
+    });
+  } else if (newLog.level === 'syntax') {
+    logs.add(newLog);
+    setSelectedLog(logs.size - 1);
+  } else {
+    logs.add(newLog);
+    handleUpdate();
+  }
+}
+
+export function addLog(log: LogData): void {
+  const errorForStackTrace = new Error();
+
+  // Parsing logs are expensive so we schedule this
+  // otherwise spammy logs would pause rendering.
+  setImmediate(() => {
+    try {
+      const stack = parseErrorStack(errorForStackTrace?.stack);
+
+      appendNewLog(
+        new LogBoxLog({
+          level: log.level,
+          message: log.message,
+          isComponentError: false,
+          stack,
+          category: log.category,
+          componentStack: log.componentStack,
+        })
+      );
+    } catch (error) {
+      reportUnexpectedLogBoxError(error);
+    }
+  });
+}
+
+export function addException(error: ExtendedExceptionData): void {
+  // Parsing logs are expensive so we schedule this
+  // otherwise spammy logs would pause rendering.
+  setImmediate(() => {
+    try {
+      appendNewLog(new LogBoxLog(parseLogBoxException(error)));
+    } catch (loggingError) {
+      reportUnexpectedLogBoxError(loggingError);
+    }
+  });
+}
+
+export function symbolicateLogNow(type: StackType, log: LogBoxLog) {
+  log.symbolicate(type, () => {
+    handleUpdate();
+  });
+}
+
+export function retrySymbolicateLogNow(type: StackType, log: LogBoxLog) {
+  log.retrySymbolicate(type, () => {
+    handleUpdate();
+  });
+}
+
+export function symbolicateLogLazy(type: StackType, log: LogBoxLog) {
+  log.symbolicate(type);
+}
+
+export function clear(): void {
+  if (logs.size > 0) {
+    logs = new Set();
+    setSelectedLog(-1);
+  }
+}
+
+export function setSelectedLog(proposedNewIndex: number): void {
+  const oldIndex = _selectedIndex;
+  let newIndex = proposedNewIndex;
+
+  const logArray = Array.from(logs);
+  let index = logArray.length - 1;
+  while (index >= 0) {
+    // The latest syntax error is selected and displayed before all other logs.
+    if (logArray[index].level === 'syntax') {
+      newIndex = index;
+      break;
+    }
+    index -= 1;
+  }
+  _selectedIndex = newIndex;
+  handleUpdate();
+  if (NativeLogBox) {
+    setTimeout(() => {
+      if (oldIndex < 0 && newIndex >= 0) {
+        NativeLogBox.show();
+      } else if (oldIndex >= 0 && newIndex < 0) {
+        NativeLogBox.hide();
+      }
+    }, 0);
+  }
+}
+
+export function clearWarnings(): void {
+  const newLogs = Array.from(logs).filter((log) => log.level !== 'warn');
+  if (newLogs.length !== logs.size) {
+    logs = new Set(newLogs);
+    setSelectedLog(-1);
+    handleUpdate();
+  }
+}
+
+export function clearErrors(): void {
+  const newLogs = Array.from(logs).filter((log) => log.level !== 'error' && log.level !== 'fatal');
+  if (newLogs.length !== logs.size) {
+    logs = new Set(newLogs);
+    setSelectedLog(-1);
+  }
+}
+
+export function dismiss(log: LogBoxLog): void {
+  if (logs.has(log)) {
+    logs.delete(log);
+    handleUpdate();
+  }
+}
+
+export function getIgnorePatterns(): IgnorePattern[] {
+  return Array.from(ignorePatterns);
+}
+
+export function addIgnorePatterns(patterns: IgnorePattern[]): void {
+  const existingSize = ignorePatterns.size;
+  // The same pattern may be added multiple times, but adding a new pattern
+  // can be expensive so let's find only the ones that are new.
+  patterns.forEach((pattern: IgnorePattern) => {
+    if (pattern instanceof RegExp) {
+      for (const existingPattern of ignorePatterns) {
+        if (
+          existingPattern instanceof RegExp &&
+          existingPattern.toString() === pattern.toString()
+        ) {
+          return;
+        }
+      }
+      ignorePatterns.add(pattern);
+    }
+    ignorePatterns.add(pattern);
+  });
+  if (ignorePatterns.size === existingSize) {
+    return;
+  }
+  // We need to recheck all of the existing logs.
+  // This allows adding an ignore pattern anywhere in the codebase.
+  // Without this, if you ignore a pattern after the a log is created,
+  // then we would keep showing the log.
+  logs = new Set(Array.from(logs).filter((log) => !isMessageIgnored(log.message.content)));
+  handleUpdate();
+}
+
+export function setDisabled(value: boolean): void {
+  if (value === _isDisabled) {
+    return;
+  }
+  _isDisabled = value;
+  handleUpdate();
+}
+
+export function isDisabled(): boolean {
+  return _isDisabled;
+}
+
+export function observe(observer: Observer): Subscription {
+  const subscription = { observer };
+  observers.add(subscription);
+
+  observer(getNextState());
+
+  return {
+    unsubscribe(): void {
+      observers.delete(subscription);
+    },
+  };
+}
+
+export function withSubscription(WrappedComponent: React.FC<object>): React.Component<object> {
+  class LogBoxStateSubscription extends React.Component<React.PropsWithChildren<Props>, State> {
+    static getDerivedStateFromError() {
+      return { hasError: true };
+    }
+
+    componentDidCatch(err: Error, errorInfo: { componentStack: string } & any) {
+      /* $FlowFixMe[class-object-subtyping] added when improving typing for
+       * this parameters */
+      reportLogBoxError(err, errorInfo.componentStack);
+    }
+
+    _subscription?: Subscription;
+
+    state = {
+      logs: new Set<LogBoxLog>(),
+      isDisabled: false,
+      hasError: false,
+      selectedLogIndex: -1,
+    };
+
+    render() {
+      if (this.state.hasError) {
+        // This happens when the component failed to render, in which case we delegate to the native redbox.
+        // We can't show any fallback UI here, because the error may be with <View> or <Text>.
+        return null;
+      }
+
+      return (
+        <LogContext.Provider
+          value={{
+            selectedLogIndex: this.state.selectedLogIndex,
+            isDisabled: this.state.isDisabled,
+            logs: Array.from(this.state.logs),
+          }}>
+          {this.props.children}
+          <WrappedComponent />
+        </LogContext.Provider>
+      );
+    }
+
+    componentDidMount(): void {
+      this._subscription = observe((data) => {
+        this.setState(data);
+      });
+    }
+
+    componentWillUnmount(): void {
+      if (this._subscription != null) {
+        this._subscription.unsubscribe();
+      }
+    }
+
+    _handleDismiss = (): 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 { selectedLogIndex, logs: stateLogs } = this.state;
+      const logsArray = Array.from(stateLogs);
+      if (selectedLogIndex != null) {
+        if (logsArray.length - 1 <= 0) {
+          setSelectedLog(-1);
+        } else if (selectedLogIndex >= logsArray.length - 1) {
+          setSelectedLog(selectedLogIndex - 1);
+        }
+
+        dismiss(logsArray[selectedLogIndex]);
+      }
+    };
+
+    _handleMinimize = (): void => {
+      setSelectedLog(-1);
+    };
+
+    _handleSetSelectedLog = (index: number): void => {
+      setSelectedLog(index);
+    };
+  }
+
+  // @ts-expect-error
+  return LogBoxStateSubscription;
+}