@expo/metro-runtime 3.0.0 → 3.0.2

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';

package/src/location/Location.native.ts

@@ -0,0 +1,201 @@
+// Copyright © 2023 650 Industries.
+// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
+
+import URL from 'url-parse';
+
+class DOMException extends Error {
+  constructor(message: string, name: string) {
+    super(message);
+    this.name = name;
+  }
+}
+
+// The differences between the definitions of `Location` and `WorkerLocation`
+// are because of the `LegacyUnforgeable` attribute only specified upon
+// `Location`'s properties. See:
+// - https://html.spec.whatwg.org/multipage/history.html#the-location-interface
+// - https://heycam.github.io/webidl/#LegacyUnforgeable
+class Location {
+  constructor(href: string | null = null) {
+    const url = new URL(
+      // @ts-expect-error
+      href
+    );
+    // @ts-expect-error
+    url.username = '';
+    // @ts-expect-error
+    url.password = '';
+    Object.defineProperties(this, {
+      hash: {
+        get() {
+          return url.hash;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.hash".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      host: {
+        get() {
+          return url.host;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.host".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      hostname: {
+        get() {
+          return url.hostname;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.hostname".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      href: {
+        get() {
+          return url.href;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.href".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      origin: {
+        get() {
+          return url.origin;
+        },
+        enumerable: true,
+      },
+      pathname: {
+        get() {
+          return url.pathname;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.pathname".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      port: {
+        get() {
+          return url.port;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.port".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      protocol: {
+        get() {
+          return url.protocol;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.protocol".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      search: {
+        get() {
+          // @ts-expect-error
+          return url.search;
+        },
+        set() {
+          throw new DOMException(`Cannot set "location.search".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      ancestorOrigins: {
+        get() {
+          return {
+            length: 0,
+            item: () => null,
+            contains: () => false,
+          };
+        },
+        enumerable: true,
+      },
+      assign: {
+        value: function assign() {
+          throw new DOMException(`Cannot call "location.assign()".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      reload: {
+        value: function reload() {
+          if (process.env.NODE_ENV !== 'production') {
+            // NOTE: This does change how native fast refresh works. The upstream metro-runtime will check
+            // if `location.reload` exists before falling back on an implementation that is nearly identical to
+            // this. The main difference is that on iOS there is a "reason" message sent, but at the time of writing
+            // this, that message is unused (ref: `RCTTriggerReloadCommandNotification`).
+            const DevSettings = (require('react-native') as typeof import('react-native'))
+              .DevSettings;
+            return DevSettings.reload();
+          } else {
+            throw new DOMException(`Cannot call "location.reload()".`, 'NotSupportedError');
+          }
+        },
+        enumerable: true,
+      },
+      replace: {
+        value: function replace() {
+          throw new DOMException(`Cannot call "location.replace()".`, 'NotSupportedError');
+        },
+        enumerable: true,
+      },
+      toString: {
+        value: function toString() {
+          return url.href;
+        },
+        enumerable: true,
+      },
+      [Symbol.for('Expo.privateCustomInspect')]: {
+        value(inspect: any) {
+          const object = {
+            hash: this.hash,
+            host: this.host,
+            hostname: this.hostname,
+            href: this.href,
+            origin: this.origin,
+            pathname: this.pathname,
+            port: this.port,
+            protocol: this.protocol,
+            search: this.search,
+          };
+          return `${this.constructor.name} ${inspect(object)}`;
+        },
+      },
+    });
+  }
+}
+
+Object.defineProperties(Location.prototype, {
+  [Symbol.toString()]: {
+    value: 'Location',
+    configurable: true,
+  },
+});
+
+let location: Location | undefined = undefined;
+
+export function setLocationHref(href: string) {
+  location = new Location(href);
+}
+
+export function install() {
+  Object.defineProperty(global, 'Location', {
+    value: Location,
+    configurable: true,
+    writable: true,
+  });
+
+  Object.defineProperty(window, 'location', {
+    get() {
+      return location;
+    },
+    set() {
+      throw new DOMException(`Cannot set "location".`, 'NotSupportedError');
+    },
+    enumerable: true,
+  });
+}

package/src/location/Location.ts

@@ -0,0 +1,3 @@
+export function install() {}
+
+export function setLocationHref(href: string) {}

package/src/location/install.native.ts

@@ -0,0 +1,90 @@
+// This MUST be first to ensure that `fetch` is defined in the React Native environment.
+import 'react-native/Libraries/Core/InitializeCore';
+
+import Constants from 'expo-constants';
+import URL from 'url-parse';
+
+import { install, setLocationHref } from './Location';
+import getDevServer from '../getDevServer';
+
+let hasWarned = false;
+
+const manifest = Constants.expoConfig as Record<string, any> | null;
+
+// Add a development warning for fetch requests with relative paths
+// to ensure developers are aware of the need to configure a production
+// base URL in the Expo config (app.json) under `expo.extra.router.origin`.
+function warnProductionOriginNotConfigured(requestUrl: string) {
+  if (hasWarned) {
+    return;
+  }
+  hasWarned = true;
+  if (!manifest?.extra?.router?.origin) {
+    console.warn(
+      `The relative fetch request "${requestUrl}" will not work in production until the Expo Router Config Plugin (app.json) is configured with the \`origin\` prop set to the base URL of your web server, e.g. \`{ plugins: [["expo-router", { origin: "..." }]] }\`. [Learn more](https://expo.github.io/router/docs/lab/runtime-location)`
+    );
+  }
+}
+
+// TODO: This would be better if native and tied as close to the JS engine as possible, i.e. it should
+// reflect the exact location of the JS file that was executed.
+function getBaseUrl() {
+  if (process.env.NODE_ENV !== 'production') {
+    // e.g. http://localhost:19006
+    return getDevServer().url?.replace(/\/$/, '');
+  }
+
+  // TODO: Make it official by moving out of `extra`
+  const productionBaseUrl = manifest?.extra?.router?.origin;
+
+  if (!productionBaseUrl) {
+    return null;
+  }
+
+  // Ensure no trailing slash
+  return productionBaseUrl?.replace(/\/$/, '');
+}
+
+function wrapFetchWithWindowLocation(fetch: Function & { __EXPO_BASE_URL_POLYFILLED?: boolean }) {
+  if (fetch.__EXPO_BASE_URL_POLYFILLED) {
+    return fetch;
+  }
+
+  const _fetch = (...props: any[]) => {
+    if (props[0] && typeof props[0] === 'string' && props[0].startsWith('/')) {
+      if (process.env.NODE_ENV !== 'production') {
+        warnProductionOriginNotConfigured(props[0]);
+      }
+
+      props[0] = new URL(props[0], window.location?.origin).toString();
+    } else if (props[0] && typeof props[0] === 'object') {
+      if (props[0].url && typeof props[0].url === 'string' && props[0].url.startsWith('/')) {
+        if (process.env.NODE_ENV !== 'production') {
+          warnProductionOriginNotConfigured(props[0]);
+        }
+
+        props[0].url = new URL(props[0].url, window.location?.origin).toString();
+      }
+    }
+    return fetch(...props);
+  };
+
+  _fetch.__EXPO_BASE_URL_POLYFILLED = true;
+
+  return _fetch;
+}
+
+if (manifest?.extra?.router?.origin !== false) {
+  // Polyfill window.location in native runtimes.
+  if (typeof window !== 'undefined' && !window.location) {
+    const url = getBaseUrl();
+    if (url) {
+      setLocationHref(url);
+      install();
+    }
+  }
+  // Polyfill native fetch to support relative URLs
+  Object.defineProperty(global, 'fetch', {
+    value: wrapFetchWithWindowLocation(fetch),
+  });
+}

package/src/messageSocket.ts

@@ -0,0 +1,25 @@
+/* eslint-env browser */
+
+// Setup websocket messages for reloading the page from the command line.
+// This is normally setup on the native client.
+
+const protocol = window.location.protocol === 'https:' ? 'wss' : 'ws';
+const messageSocket = new WebSocket(`${protocol}://${window.location.host}/message`);
+messageSocket.onmessage = (message) => {
+  const data = JSON.parse(String(message.data));
+  switch (data.method) {
+    case 'sendDevCommand':
+      switch (data.params.name) {
+        case 'reload':
+          window.location.reload();
+          break;
+      }
+      break;
+    case 'reload':
+      window.location.reload();
+      break;
+    case 'devMenu':
+      // no-op
+      break;
+  }
+};

package/src/setupFastRefresh.ts

@@ -0,0 +1,30 @@
+// This needs to run before the renderer initializes.
+
+const ReactRefreshRuntime = require('react-refresh/runtime');
+ReactRefreshRuntime.injectIntoGlobalHook(global);
+
+const Refresh = {
+  performFullRefresh() {
+    location.reload();
+  },
+
+  createSignatureFunctionForTransform: ReactRefreshRuntime.createSignatureFunctionForTransform,
+
+  isLikelyComponentType: ReactRefreshRuntime.isLikelyComponentType,
+
+  getFamilyByType: ReactRefreshRuntime.getFamilyByType,
+
+  register: ReactRefreshRuntime.register,
+
+  performReactRefresh() {
+    if (ReactRefreshRuntime.hasUnrecoverableErrors()) {
+      location.reload();
+      return;
+    }
+    ReactRefreshRuntime.performReactRefresh();
+  },
+};
+
+// The metro require polyfill can not have dependencies (applies for all polyfills).
+// Expose `Refresh` by assigning it to global to make it available in the polyfill.
+global[(global.__METRO_GLOBAL_PREFIX__ || '') + '__ReactRefresh'] = Refresh;

package/src/setupHMR.ts

@@ -0,0 +1,28 @@
+import HMRClient from './HMRClient';
+
+// Sets up developer tools for React Native web.
+// We assume full control over the console and send JavaScript logs to Metro.
+// [
+//   'trace',
+//   'info',
+//   'warn',
+//   'error',
+//   'log',
+//   'group',
+//   'groupCollapsed',
+//   'groupEnd',
+//   'debug',
+// ].forEach(level => {
+//   const originalFunction = console[level];
+//   console[level] = function (...args: readonly any[]) {
+//     HMRClient.log(
+//       // @ts-expect-error
+//       level, args);
+//     originalFunction.apply(console, args);
+//   };
+// });
+
+HMRClient.log('log', [`[web] Logs will appear in the browser console`]);
+
+// This is called native on native platforms
+HMRClient.setup({ isEnabled: true });

package/src/symbolicate.ts

@@ -0,0 +1,6 @@
+import { LogBoxLog } from './error-overlay/Data/LogBoxLog';
+import parseErrorStack from './error-overlay/modules/parseErrorStack';
+
+export { LogBoxLog, parseErrorStack };
+
+export * from './error-overlay/formatProjectFilePath';