expo 55.0.0-canary-20251015-a6a1272 → 55.0.0-canary-20251023-4c86f95

package/src/async-require/buildUrlForBundle.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import getDevServer from './getDevServer';
+
 /**
  * Given a path and some optional additional query parameters, create the dev server bundle URL.
  * @param bundlePath like `/foobar`
@@ -12,19 +14,9 @@
  * @returns a URL like "/foobar.bundle?platform=android&modulesOnly=true&runModule=false&runtimeBytecodeVersion=null"
  */
 export function buildUrlForBundle(bundlePath: string): string {
-  if (bundlePath.match(/^https?:\/\//)) {
-    return bundlePath;
-  }
-
-  if (
-    typeof window !== 'undefined' &&
-    // @ts-expect-error
-    typeof window.$$EXPO_INITIAL_PROPS !== 'undefined'
-  ) {
-    // In a webview, you cannot read from an absolute path.
+  if (/^https?:\/\//.test(bundlePath)) {
     return bundlePath;
   }
-  // NOTE(EvanBacon): This must come from the window origin (at least in dev mode).
-  // Otherwise Metro will crash from attempting to load a bundle that doesn't exist.
-  return '/' + bundlePath.replace(/^\/+/, '');
+  const { url: baseURL } = getDevServer();
+  return baseURL ? new URL(bundlePath, baseURL).toString() : `//${bundlePath.replace(/^\/+/, '')}`;
 }

package/src/async-require/getDevServer.ts

@@ -1,3 +1,5 @@
+import { getFullBundlerUrl } from './getFullBundlerUrl';
+
 const getDevServer = () => {
   // Disable for SSR
   if (typeof window === 'undefined') {
@@ -14,15 +16,7 @@ const getDevServer = () => {
 
     /** URL but ensures that platform query param is added. */
     get fullBundleUrl() {
-      if (document?.currentScript && 'src' in document.currentScript) {
-        return document.currentScript.src;
-      }
-
-      const bundleUrl = new URL(location.href);
-
-      bundleUrl.searchParams.set('platform', 'web');
-
-      return bundleUrl.toString();
+      return getFullBundlerUrl();
     },
     url: location.origin + location.pathname,
   };

package/src/async-require/getFullBundlerUrl.ts

@@ -0,0 +1,13 @@
+export function getFullBundlerUrl(): string {
+  const currentScript = document?.currentScript;
+  const bundleUrl = new URL(
+    currentScript && 'src' in currentScript ? currentScript.src : location.href,
+    location.href
+  );
+
+  if (!bundleUrl.searchParams.has('platform')) {
+    bundleUrl.searchParams.set('platform', process.env.EXPO_OS ?? 'web');
+  }
+
+  return bundleUrl.toString();
+}

package/src/async-require/hmr.ts

@@ -10,35 +10,24 @@
  */
 import MetroHMRClient from '@expo/metro/metro-runtime/modules/HMRClient';
 import prettyFormat, { plugins } from 'pretty-format';
-import { DeviceEventEmitter } from 'react-native';
 
-// Ensure events are sent so custom Fast Refresh views are shown.
-function showLoading(message: string, _type: 'load' | 'refresh') {
-  DeviceEventEmitter.emit('devLoadingView:showMessage', {
-    message,
-  });
-}
-
-function hideLoading() {
-  DeviceEventEmitter.emit('devLoadingView:hide', {});
-}
+import {
+  getConnectionError,
+  getFullBundlerUrl,
+  handleCompileError,
+  hideLoading,
+  resetErrorOverlay,
+  showLoading,
+} from './hmrUtils';
 
 const pendingEntryPoints: string[] = [];
 
 // @ts-expect-error: Account for multiple versions of pretty-format inside of a monorepo.
 const prettyFormatFunc = typeof prettyFormat === 'function' ? prettyFormat : prettyFormat.default;
 
-type HMRClientType = {
-  send: (msg: string) => void;
-  isEnabled: () => boolean;
-  disable: () => void;
-  enable: () => void;
-  hasPendingUpdates: () => boolean;
-};
-
-let hmrClient: HMRClientType | null = null;
+let hmrClient: MetroHMRClient | null = null;
 let hmrUnavailableReason: string | null = null;
-let currentCompileErrorMessage: string | null = null;
+const buildErrorQueue = new Set<unknown>();
 let didConnect: boolean = false;
 const pendingLogs: [LogLevel, any[]][] = [];
 
@@ -53,14 +42,6 @@ type LogLevel =
   | 'groupEnd'
   | 'debug';
 
-export type HMRClientNativeInterface = {
-  enable(): void;
-  disable(): void;
-  registerBundle(requestUrl: string): void;
-  log(level: LogLevel, data: any[]): void;
-  setup(props: { isEnabled: boolean }): void;
-};
-
 function assert(foo: any, msg: string): asserts foo {
   if (!foo) throw new Error(msg);
 }
@@ -69,7 +50,7 @@ function assert(foo: any, msg: string): asserts foo {
  * HMR Client that receives from the server HMR updates and propagates them
  * runtime to reflects those changes.
  */
-const HMRClient: HMRClientNativeInterface = {
+const HMRClient = {
   enable() {
     if (hmrUnavailableReason !== null) {
       // If HMR became unavailable while you weren't using it,
@@ -127,12 +108,19 @@ const HMRClient: HMRClientNativeInterface = {
       return;
     }
     try {
+      const webMetadata =
+        process.env.EXPO_OS === 'web'
+          ? {
+              platform: 'web',
+              mode: 'BRIDGE',
+            }
+          : undefined;
       hmrClient.send(
         JSON.stringify({
+          // TODO: Type this properly.
+          ...webMetadata,
           type: 'log',
           level,
-          platform: 'web',
-          mode: 'BRIDGE',
           data: data.map((item) =>
             typeof item === 'string'
               ? item
@@ -154,48 +142,63 @@ const HMRClient: HMRClientNativeInterface = {
 
   // Called once by the bridge on startup, even if Fast Refresh is off.
   // It creates the HMR client but doesn't actually set up the socket yet.
-  setup({ isEnabled }: { isEnabled: boolean }) {
-    assert(!hmrClient, 'Cannot initialize hmrClient twice');
-
-    const serverScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
-    const client = new MetroHMRClient(`${serverScheme}://${window.location.host}/hot`);
-    hmrClient = client;
-
-    const fullBundleUrl = (() => {
-      if (document?.currentScript && 'src' in document.currentScript) {
-        return document.currentScript.src;
-      }
+  setup(
+    platformOrOptions: string | { isEnabled: boolean },
+    bundleEntry?: string,
+    host?: string,
+    port?: number | string,
+    isEnabledOrUndefined?: boolean,
+    scheme: string = 'http'
+  ) {
+    let isEnabled = !!isEnabledOrUndefined;
+    let serverScheme: string;
+    let serverHost: string;
+
+    if (process.env.EXPO_OS === 'web') {
+      assert(
+        platformOrOptions && typeof platformOrOptions === 'object',
+        'Expected platformOrOptions to be an options object on web.'
+      );
+      assert(!hmrClient, 'Cannot initialize hmrClient twice');
+      isEnabled = platformOrOptions.isEnabled;
 
-      const bundleUrl = new URL(location.href);
+      serverScheme = window.location.protocol === 'https:' ? 'wss' : 'ws';
+      serverHost = window.location.host;
+    } else {
+      assert(
+        platformOrOptions && typeof platformOrOptions === 'string',
+        'Missing required parameter `platform`'
+      );
+      assert(bundleEntry, 'Missing required parameter `bundleEntry`');
+      assert(host, 'Missing required parameter `host`');
+      assert(!hmrClient, 'Cannot initialize hmrClient twice');
 
-      bundleUrl.searchParams.set('platform', process.env.EXPO_OS ?? 'web');
+      serverHost = port !== null && port !== '' ? `${host}:${port}` : host;
+      serverScheme = scheme;
+    }
 
-      return bundleUrl.toString();
-    })();
+    const origin = `${serverScheme}://${serverHost}`;
+    const client = new MetroHMRClient(`${origin}/hot`);
+    hmrClient = client;
 
     pendingEntryPoints.push(
       // HMRServer understands regular bundle URLs, so prefer that in case
       // there are any important URL parameters we can't reconstruct from
       // `setup()`'s arguments.
-      fullBundleUrl
+      getFullBundlerUrl({
+        serverScheme,
+        serverHost,
+        bundleEntry,
+        platform: typeof platformOrOptions === 'string' ? platformOrOptions : undefined,
+      })
     );
 
     client.on('connection-error', (e: Error) => {
-      let error = `Cannot connect to Metro.
- 
- Try the following to fix the issue:
- - Ensure the Metro dev server is running and available on the same network as this device`;
-      error += `
- 
- URL: ${window.location.host}
- 
- Error: ${e.message}`;
-
-      setHMRUnavailableReason(error);
+      setHMRUnavailableReason(getConnectionError(serverHost, e));
     });
 
     client.on('update-start', ({ isInitialUpdate }: { isInitialUpdate?: boolean }) => {
-      currentCompileErrorMessage = null;
+      buildErrorQueue.clear();
       didConnect = true;
 
       if (client.isEnabled() && !isInitialUpdate) {
@@ -205,10 +208,7 @@ const HMRClient: HMRClientNativeInterface = {
 
     client.on('update', ({ isInitialUpdate }: { isInitialUpdate?: boolean }) => {
       if (client.isEnabled() && !isInitialUpdate) {
-        dismissRedbox();
-        // @ts-expect-error
-        globalThis.__expo_dev_resetErrors?.();
-        // LogBox.clearAllLogs();
+        resetErrorOverlay();
       }
     });
 
@@ -216,22 +216,7 @@ const HMRClient: HMRClientNativeInterface = {
       hideLoading();
     });
 
-    client.on('error', (data: { type: string; message: string }) => {
-      hideLoading();
-
-      if (data.type === 'GraphNotFoundError') {
-        client.close();
-        setHMRUnavailableReason('Metro has restarted since the last edit. Reload to reconnect.');
-      } else if (data.type === 'RevisionNotFoundError') {
-        client.close();
-        setHMRUnavailableReason('Metro and the client are out of sync. Reload to reconnect.');
-      } else {
-        currentCompileErrorMessage = `${data.type} ${data.message}`;
-        if (client.isEnabled()) {
-          showCompileError();
-        }
-      }
-    });
+    client.on('error', (data) => this._onMetroError(data));
 
     client.on('close', (closeEvent: { code: number; reason: string }) => {
       hideLoading();
@@ -242,19 +227,19 @@ const HMRClient: HMRClientNativeInterface = {
         closeEvent == null ||
         closeEvent.code === 1000 ||
         closeEvent.code === 1005 ||
+        closeEvent.code === 1006 ||
         closeEvent.code == null;
 
       setHMRUnavailableReason(
         `${
           isNormalOrUnsetCloseReason
-            ? 'Disconnected from Metro.'
-            : `Disconnected from Metro (${closeEvent.code}: "${closeEvent.reason}").`
+            ? 'Disconnected from Expo CLI.'
+            : `Disconnected from Expo CLI (${closeEvent.code}: "${closeEvent.reason}").`
         }
 
 To reconnect:
-- Ensure that Metro is running and available on the same network
-- Reload this app (will trigger further help if Metro cannot be connected to)
-      `
+- Start the dev server with: npx expo
+- Reload the ${process.env.EXPO_OS === 'web' ? 'page' : 'app'}`
       );
     });
 
@@ -267,6 +252,37 @@ To reconnect:
     registerBundleEntryPoints(hmrClient);
     flushEarlyLogs();
   },
+
+  // Related Metro error's formatting
+  // https://github.com/facebook/metro/blob/34bb8913ec4b5b02690b39d2246599faf094f721/packages/metro/src/lib/formatBundlingError.js#L36
+  _onMetroError(error: unknown) {
+    if (!hmrClient) {
+      return;
+    }
+
+    assert(typeof error === 'object' && error != null, 'Expected data to be an object');
+
+    hideLoading();
+
+    if ('type' in error) {
+      if (error.type === 'GraphNotFoundError') {
+        hmrClient.close();
+        setHMRUnavailableReason('Expo CLI has restarted since the last edit. Reload to reconnect.');
+        return;
+      } else if (error.type === 'RevisionNotFoundError') {
+        hmrClient.close();
+        setHMRUnavailableReason(
+          `Expo CLI and the ${process.env.EXPO_OS} client are out of sync. Reload to reconnect.`
+        );
+        return;
+      }
+    }
+
+    buildErrorQueue.add(error);
+    if (hmrClient.isEnabled()) {
+      showCompileError();
+    }
+  },
 };
 
 function setHMRUnavailableReason(reason: string) {
@@ -286,7 +302,7 @@ function setHMRUnavailableReason(reason: string) {
   }
 }
 
-function registerBundleEntryPoints(client: HMRClientType | null) {
+function registerBundleEntryPoints(client: MetroHMRClient | null) {
   if (hmrUnavailableReason != null) {
     // "Bundle Splitting – Metro disconnected"
     window.location.reload();
@@ -314,28 +330,14 @@ function flushEarlyLogs() {
   }
 }
 
-function dismissRedbox() {
-  // TODO(EvanBacon): Error overlay for web.
-}
-
 function showCompileError() {
-  if (currentCompileErrorMessage === null) {
+  if (buildErrorQueue.size === 0) {
     return;
   }
 
-  // Even if there is already a redbox, syntax errors are more important.
-  // Otherwise you risk seeing a stale runtime error while a syntax error is more recent.
-  dismissRedbox();
-
-  const message = currentCompileErrorMessage;
-  currentCompileErrorMessage = null;
-
-  const error = new Error(message);
-  // Symbolicating compile errors is wasted effort
-  // because the stack trace is meaningless:
-  // @ts-expect-error
-  error.preventSymbolication = true;
-  throw error;
+  const cause: any = buildErrorQueue.values().next().value;
+  buildErrorQueue.clear();
+  handleCompileError(cause);
 }
 
 export default HMRClient;

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

@@ -0,0 +1,97 @@
+// Based on https://github.com/facebook/react-native/blob/9ab95dd2b5746e8323ad1d65591d5a4ec7718790/packages/react-native/Libraries/Utilities/HMRClient.js
+
+// @ts-expect-error missing types
+import getDevServer from 'react-native/Libraries/Core/Devtools/getDevServer';
+import LogBox from 'react-native/Libraries/LogBox/LogBox';
+// @ts-expect-error missing types
+import NativeRedBox from 'react-native/Libraries/NativeModules/specs/NativeRedBox';
+import DevSettings from 'react-native/Libraries/Utilities/DevSettings';
+
+import { HMRMetroBuildError } from './buildErrors';
+
+export function showLoading(message: string, type: 'load' | 'refresh') {
+  const DevLoadingView = require('react-native/Libraries/Utilities/DevLoadingView').default;
+  DevLoadingView.showMessage(message, type);
+}
+
+export function hideLoading() {
+  const DevLoadingView = require('react-native/Libraries/Utilities/DevLoadingView').default;
+  DevLoadingView.hide();
+}
+
+export function resetErrorOverlay() {
+  dismissRedbox();
+  // @ts-expect-error clearAllLogs exists, but ts types are missing
+  LogBox.clearAllLogs();
+}
+
+export function reload() {
+  // @ts-expect-error missing types
+  DevSettings.reload('Bundle Splitting – Metro disconnected');
+}
+
+export function getFullBundlerUrl({
+  serverScheme,
+  serverHost,
+  bundleEntry,
+  platform,
+}: {
+  serverScheme: string;
+  serverHost: string;
+  bundleEntry: string;
+  platform: string;
+}): string {
+  return (
+    getDevServer().fullBundleUrl ??
+    `${serverScheme}://${serverHost}/hot?bundleEntry=${bundleEntry}&platform=${platform}`
+  );
+}
+
+export function getConnectionError(serverHost: string, e: Error): string {
+  let error = `Cannot connect to Expo CLI.
+
+Try the following to fix the issue:
+- Ensure that Expo dev server is running and available on the same network`;
+
+  if (process.env.EXPO_OS === 'android') {
+    error += `
+- Ensure that your device/emulator is connected to your machine and has USB debugging enabled - run 'adb devices' to see a list of connected devices
+- If you're on a physical device connected to the same machine, run 'adb reverse tcp:8081 tcp:8081' to forward requests from your device`;
+  }
+
+  error += `
+
+URL: ${serverHost}
+
+Error: ${e.message}`;
+  return error;
+}
+
+function dismissRedbox() {
+  if (process.env.EXPO_OS === 'ios' && NativeRedBox != null && NativeRedBox.dismiss != null) {
+    NativeRedBox.dismiss();
+  } else {
+    const NativeExceptionsManager =
+      require('react-native/Libraries/Core/NativeExceptionsManager').default;
+    NativeExceptionsManager &&
+      NativeExceptionsManager.dismissRedbox &&
+      NativeExceptionsManager.dismissRedbox();
+  }
+}
+
+export function handleCompileError(cause: any) {
+  if (cause === null) {
+    return;
+  }
+
+  // Even if there is already a redbox, syntax errors are more important.
+  // Otherwise you risk seeing a stale runtime error while a syntax error is more recent.
+  dismissRedbox();
+
+  const LogBox = require('react-native/Libraries/LogBox/LogBox').default;
+  // The error is passed thru LogBox APIs directly to the parsing function.
+  // Won't log the error in devtools console
+  // (using throw would mangle the error message and print with ANSI
+  // because throw on native is processed as console.error)
+  LogBox.addException(new HMRMetroBuildError(cause.message, cause.type, cause.cause));
+}

package/src/async-require/hmrUtils.ts

@@ -0,0 +1,54 @@
+import { DeviceEventEmitter } from 'react-native';
+
+import { HMRMetroBuildError } from './buildErrors';
+import { getFullBundlerUrl as getFullBundlerUrlHelper } from './getFullBundlerUrl';
+
+export function getFullBundlerUrl(_: {
+  serverScheme?: string;
+  serverHost?: string;
+  bundleEntry?: string;
+  platform?: string;
+}): string {
+  return getFullBundlerUrlHelper();
+}
+
+export function showLoading(message: string, _type: 'load' | 'refresh') {
+  // Ensure events are sent so custom Fast Refresh views are shown.
+  DeviceEventEmitter.emit('devLoadingView:showMessage', {
+    message,
+  });
+}
+
+export function hideLoading() {
+  DeviceEventEmitter.emit('devLoadingView:hide', {});
+}
+
+export function resetErrorOverlay() {
+  // @ts-expect-error
+  globalThis.__expo_dev_resetErrors?.();
+}
+
+export function reload() {
+  // "Bundle Splitting – Metro disconnected"
+  window.location.reload();
+}
+
+export function getConnectionError(serverHost: string, e: Error): string {
+  return `
+Cannot connect to Expo CLI.
+
+Try the following to fix the issue:
+- Ensure the Expo dev server is running and available on the same network as this device
+
+URL: ${serverHost}
+
+Error: ${e.message}
+  `.trim();
+}
+
+export function handleCompileError(cause: any) {
+  if (!cause) {
+    return;
+  }
+  throw new HMRMetroBuildError(cause.message, cause.type, cause.cause);
+}

package/src/dom/dom-entry.tsx

@@ -1,7 +1,6 @@
 // Entry file for a DOM Component.
 import '@expo/metro-runtime';
 
-import { withErrorOverlay } from '@expo/metro-runtime/error-overlay';
 import React from 'react';
 
 import { JSONValue } from './dom.types';
@@ -15,6 +14,7 @@ interface MarshalledProps {
 }
 
 interface WindowType {
+  $$EXPO_DOM_HOST_OS?: string;
   $$EXPO_INITIAL_PROPS?: MarshalledProps;
 }
 
@@ -65,6 +65,13 @@ function convertError(error: any) {
 }
 
 export function registerDOMComponent(AppModule: any) {
+  if (typeof window.$$EXPO_DOM_HOST_OS === 'undefined') {
+    throw new Error(
+      'Top OS ($$EXPO_DOM_HOST_OS) is not defined. This is a bug in the DOM Component runtime.'
+    );
+  }
+  process.env.EXPO_DOM_HOST_OS = window.$$EXPO_DOM_HOST_OS;
+
   function DOMComponentRoot(props: Record<string, unknown>) {
     // Props listeners
     const [marshalledProps, setProps] = React.useState(() => {
@@ -102,12 +109,12 @@ export function registerDOMComponent(AppModule: any) {
   }
 
   try {
+    if (process.env.NODE_ENV !== 'production') {
+      require('@expo/log-box/lib').setupLogBox();
+    }
+
     React.startTransition(() => {
-      if (process.env.NODE_ENV !== 'production') {
-        registerRootComponent(withErrorOverlay(DOMComponentRoot));
-      } else {
-        registerRootComponent(DOMComponentRoot);
-      }
+      registerRootComponent(DOMComponentRoot);
     });
   } catch (e) {
     const error = convertError(e);

package/src/dom/dom-internal.types.ts

@@ -0,0 +1,9 @@
+import type { DOMProps } from './dom.types';
+
+export interface DOMPropsInternal extends DOMProps {
+  /**
+   * Allows dynamically redirecting a component to a different source, for example prebuilt version.
+   * @internal
+   */
+  sourceOverride?: { uri: string };
+}

package/src/dom/dom.types.ts

@@ -36,4 +36,10 @@ export interface DOMProps extends Omit<RNWebViewProps, 'source'> {
    * @default false
    */
   useExpoDOMWebView?: boolean;
+
+  /**
+   * Allows dynamically redirecting a component to a different source, for example a prebuilt version.
+   * @internal
+   */
+  overrideUri?: string;
 }

package/src/dom/internal.ts

@@ -1,5 +1,7 @@
 export { default as WebView } from './webview-wrapper';
 
+export * from './dom-internal.types';
+
 // Skip all dom-only functions to give 'undefined is not a function' errors.
 export const registerDOMComponent: undefined | typeof import('./dom-entry').registerDOMComponent =
   undefined;

package/src/dom/webview-wrapper.tsx

@@ -1,9 +1,14 @@
 // A webview without babel to test faster.
+//
+// Keep in sync with ExpoLogBox native webview wrappers.
+// Android https://github.com/expo/expo/blob/main/packages/%40expo/log-box/android/src/main/expo/modules/logbox/ExpoLogBoxWebViewWrapper.kt
+// iOS https://github.com/expo/expo/blob/main/packages/%40expo/log-box/ios/ExpoLogBoxWebViewWrapper.swift
 import React from 'react';
 import { AppState } from 'react-native';
 
 import { getBaseURL } from './base';
-import type { BridgeMessage, DOMProps, WebViewProps, WebViewRef } from './dom.types';
+import { DOMPropsInternal } from './dom-internal.types';
+import type { BridgeMessage, WebViewProps, WebViewRef } from './dom.types';
 import { _emitGlobalEvent } from './global-events';
 import {
   getInjectBodySizeObserverScript,
@@ -22,14 +27,15 @@ type RawWebViewProps = React.ComponentProps<Exclude<typeof ExpoDomWebView, undef
 
 interface Props {
   children?: any;
-  dom?: DOMProps;
+  dom?: DOMPropsInternal;
   filePath: string;
   ref: React.Ref<object>;
   [propName: string]: unknown;
 }
 
 const RawWebView = React.forwardRef<object, Props>((props, ref) => {
-  const { children, dom, filePath, ref: _ref, ...marshalProps } = props as Props;
+  const { children, dom: domProps, filePath, ref: _ref, ...marshalProps } = props as Props;
+  const { overrideUri, ...dom } = domProps || {};
   if (__DEV__) {
     if (children !== undefined) {
       throw new Error(
@@ -66,7 +72,7 @@ const RawWebView = React.forwardRef<object, Props>((props, ref) => {
   const webView = resolveWebView(dom?.useExpoDOMWebView ?? false);
   const webviewRef = React.useRef<WebViewRef>(null);
   const domImperativeHandlePropsRef = React.useRef<string[]>([]);
-  const source = { uri: `${getBaseURL()}/${filePath}` };
+  const source = { uri: overrideUri ?? `${getBaseURL()}/${filePath}` };
   const [containerStyle, setContainerStyle] = React.useState<WebViewProps['containerStyle']>(null);
 
   const { debugZeroHeightStyle, debugOnLayout } = useDebugZeroHeight(dom);
@@ -129,10 +135,12 @@ const RawWebView = React.forwardRef<object, Props>((props, ref) => {
         subscription.remove();
       });
     },
-    ...dom,
+    ...domProps,
     containerStyle: [containerStyle, debugZeroHeightStyle, dom?.containerStyle],
     onLayout: __DEV__ ? debugOnLayout : dom?.onLayout,
     injectedJavaScriptBeforeContentLoaded: [
+      // Inject the top-most OS for the DOM component to read.
+      `window.$$EXPO_DOM_HOST_OS = ${JSON.stringify(process.env.EXPO_OS)};true;`,
       // On first mount, inject `$$EXPO_INITIAL_PROPS` with the initial props.
       `window.$$EXPO_INITIAL_PROPS = ${JSON.stringify(smartActions)};true;`,
       dom?.matchContents ? getInjectBodySizeObserverScript() : null,