one 1.17.10 → 1.17.11

package/src/headless.tsx

@@ -21,6 +21,12 @@ export type CreateHeadlessAppProps = {
 export function createApp(options: CreateHeadlessAppProps) {
   // always spa mode — render() checks this to use createRoot instead of hydrateRoot
   globalThis['__vxrnIsSPA'] = true
+  // headless mode has no dev server serving /_one/assets/*_vxrn_loader.js;
+  // routes (and their loader exports) are statically bundled and accessed
+  // through `options.routes`. doPreloadDev/doPreload short-circuit on this
+  // flag so they don't round-trip through an iframe-host URL that can return
+  // a spurious __oneError 404 for paths overlapping the host's route tree.
+  globalThis['__vxrnHeadless'] = true
 
   const setupComplete = options.getSetupPromise
     ? options.getSetupPromise()

package/src/index.ts

@@ -94,7 +94,26 @@ export type {
   StackHeaderRightProps,
   StackHeaderSearchBarProps,
   StackScreenProps,
+  StackScreenOptions,
 } from './layouts/stack-utils'
+// Stack render API (for custom web overlay rendering)
+export type {
+  StackRender,
+  StackRenderProps,
+  StackRenderComponent,
+} from './router/web/ScreenRenderContext'
+// Tabs / Drawer render API + global setup
+export {
+  setupRendering,
+  getRenderingConfig,
+  type RenderingConfig,
+  type TabsRender,
+  type TabsRenderProps,
+  type TabsRenderComponent,
+  type DrawerRender,
+  type DrawerRenderProps,
+  type DrawerRenderComponent,
+} from './router/renderingRegistry'
 // utilities
 export { withLayoutContext } from './layouts/withLayoutContext'
 export { Link } from './link/Link'
@@ -162,11 +181,7 @@ export { watchFile } from './utils/watchFile'
 // resilient dynamic-import recovery: retry a transient chunk-fetch failure in
 // place (so it never poisons a React.lazy memo), then fall back to one's
 // debounced reload. lazyWithRetry is a drop-in for React.lazy.
-export {
-  loadWithRetry,
-  isChunkLoadError,
-  handleSkewError,
-} from './utils/dynamicImport'
+export { loadWithRetry, isChunkLoadError, handleSkewError } from './utils/dynamicImport'
 export { lazyWithRetry } from './lazyWithRetry'
 export { ErrorBoundary } from './views/ErrorBoundary'
 export type { ErrorBoundaryProps, ErrorRouteInfo } from './views/Try'

package/src/layouts/Drawer.tsx

@@ -4,16 +4,58 @@ import {
   type DrawerNavigationOptions,
 } from '@react-navigation/drawer'
 import type { DrawerNavigationState, ParamListBase } from '@react-navigation/native'
+import React, { useMemo, type ComponentProps } from 'react'
+import { Platform } from 'react-native'
 
+import { getRenderingConfig, type DrawerRender } from '../router/renderingRegistry'
 import { withLayoutContext } from './withLayoutContext'
 
 const DrawerNavigator = createDrawerNavigator().Navigator
 
-export const Drawer = withLayoutContext<
+const RNDrawer = withLayoutContext<
   DrawerNavigationOptions,
   typeof DrawerNavigator,
   DrawerNavigationState<ParamListBase>,
   DrawerNavigationEventMap
 >(DrawerNavigator)
 
+type DrawerExtraProps = {
+  /**
+   * Platform-keyed sidebar component. Replaces the default drawer content.
+   * Dispatches on `Platform.OS` - `render.ios` works on iOS, `render.web`
+   * on web, etc. Falls back to `setupRendering({ Drawer: { ... } })` global
+   * if no prop is set, then to the built-in drawer content.
+   */
+  render?: DrawerRender
+}
+
+const DrawerWithRender = React.forwardRef<
+  unknown,
+  ComponentProps<typeof RNDrawer> & DrawerExtraProps
+>((props, ref) => {
+  const { render, drawerContent, ...rest } = props as any
+
+  // Resolution: prop drawerContent > prop render[platform] > setupRendering[platform] > default
+  const effectiveDrawerContent = useMemo(() => {
+    if (drawerContent) return drawerContent
+    const platform = Platform.OS as 'web' | 'ios' | 'android'
+    const fromProp = render?.[platform]
+    if (fromProp) return fromProp
+    const fromGlobal = getRenderingConfig().Drawer?.[platform]
+    if (fromGlobal) return fromGlobal
+    return undefined
+  }, [drawerContent, render])
+
+  if (effectiveDrawerContent) {
+    return <RNDrawer {...rest} ref={ref} drawerContent={effectiveDrawerContent} />
+  }
+  return <RNDrawer {...rest} ref={ref} />
+})
+
+// Preserve withLayoutContext's static Screen so user code like
+// `<Drawer.Screen ... />` keeps working through the render wrapper.
+export const Drawer = Object.assign(DrawerWithRender, {
+  Screen: RNDrawer.Screen,
+})
+
 export default Drawer

package/src/layouts/Stack.tsx

@@ -1,6 +1,5 @@
 import type { ParamListBase, StackNavigationState } from '@react-navigation/native'
 import {
-  createNativeStackNavigator,
   type NativeStackNavigationEventMap,
   type NativeStackNavigationOptions,
 } from '@react-navigation/native-stack'
@@ -18,8 +17,11 @@ import { withLayoutContext } from './withLayoutContext'
 import { isChildOfType } from '../utils/children'
 import { Protected } from '../views/Protected'
 import { Screen } from '../views/Screen'
+import { createStackNavigator } from './stack-navigator'
+import { StackRenderProvider, type StackRender } from '../router/web/ScreenRenderContext'
+import { getRenderingConfig } from '../router/renderingRegistry'
 
-const NativeStackNavigator = createNativeStackNavigator().Navigator
+const NativeStackNavigator = createStackNavigator().Navigator
 
 const RNStack = withLayoutContext<
   NativeStackNavigationOptions,
@@ -62,47 +64,63 @@ function mapChildren(children: React.ReactNode): React.ReactNode {
     .filter(Boolean)
 }
 
+type StackExtraProps = {
+  /**
+   * Platform-keyed render component for overlay routes (modal / formSheet /
+   * pageSheet / transparentModal / fullScreenModal). v1 consumes `web` only;
+   * `ios` / `android` are reserved for future use. Per-route overrides go on
+   * `<Stack.Screen options={{ render }} />`.
+   */
+  render?: StackRender
+}
+
 /**
  * Stack navigator with support for Header Composition API.
  * Wraps the base Stack to pre-process StackScreen children.
  */
-const StackWithComposition = React.forwardRef<unknown, ComponentProps<typeof RNStack>>(
-  (props, ref) => {
-    const { children, screenOptions, ...rest } = props
-
-    // extract Stack.Header from children for screenOptions
-    const screenOptionsWithHeader = useMemo(() => {
-      const stackHeader = Children.toArray(children).find((child) =>
-        isChildOfType(child, StackHeaderComponent)
-      )
-
-      if (stackHeader && isChildOfType(stackHeader, StackHeaderComponent)) {
-        const headerProps: StackScreenProps = { children: stackHeader }
-        if (screenOptions) {
-          if (typeof screenOptions === 'function') {
-            return (...args: Parameters<typeof screenOptions>) => {
-              const opts = screenOptions(...args)
-              return appendScreenStackPropsToOptions(opts, headerProps)
-            }
+const StackWithComposition = React.forwardRef<
+  unknown,
+  ComponentProps<typeof RNStack> & StackExtraProps
+>((props, ref) => {
+  const { children, screenOptions, render, ...rest } = props
+
+  // extract Stack.Header from children for screenOptions
+  const screenOptionsWithHeader = useMemo(() => {
+    const stackHeader = Children.toArray(children).find((child) =>
+      isChildOfType(child, StackHeaderComponent)
+    )
+
+    if (stackHeader && isChildOfType(stackHeader, StackHeaderComponent)) {
+      const headerProps: StackScreenProps = { children: stackHeader }
+      if (screenOptions) {
+        if (typeof screenOptions === 'function') {
+          return (...args: Parameters<typeof screenOptions>) => {
+            const opts = screenOptions(...args)
+            return appendScreenStackPropsToOptions(opts, headerProps)
           }
-          return appendScreenStackPropsToOptions(screenOptions, headerProps)
         }
-        return appendScreenStackPropsToOptions({}, headerProps)
+        return appendScreenStackPropsToOptions(screenOptions, headerProps)
       }
+      return appendScreenStackPropsToOptions({}, headerProps)
+    }
 
-      return screenOptions
-    }, [children, screenOptions])
+    return screenOptions
+  }, [children, screenOptions])
 
-    // pre-process children to convert StackScreen to Screen
-    const processedChildren = useMemo(() => mapChildren(children), [children])
+  // pre-process children to convert StackScreen to Screen
+  const processedChildren = useMemo(() => mapChildren(children), [children])
 
-    return (
-      <RNStack {...rest} ref={ref} screenOptions={screenOptionsWithHeader}>
-        {processedChildren}
-      </RNStack>
-    )
-  }
-)
+  const navigator = (
+    <RNStack {...rest} ref={ref} screenOptions={screenOptionsWithHeader}>
+      {processedChildren}
+    </RNStack>
+  )
+
+  // Per-instance prop wins; otherwise fall back to setupRendering global.
+  const effectiveRender = render ?? getRenderingConfig().Stack
+  if (!effectiveRender) return navigator
+  return <StackRenderProvider value={effectiveRender}>{navigator}</StackRenderProvider>
+})
 
 export const Stack = Object.assign(StackWithComposition, {
   Screen: StackScreen,

package/src/layouts/Tabs.tsx

@@ -6,20 +6,21 @@ import {
   createBottomTabNavigator,
 } from '@react-navigation/bottom-tabs'
 import type { ParamListBase, TabNavigationState } from '@react-navigation/native'
+import React, { useMemo, type ComponentProps } from 'react'
 import { Platform, Pressable } from 'react-native'
 
 import type { OneRouter } from '../interfaces/router'
 import { Link } from '../link/Link'
 import { Protected } from '../views/Protected'
+import { getRenderingConfig, type TabsRender } from '../router/renderingRegistry'
 import { withLayoutContext } from './withLayoutContext'
 
-const TabBar = ({ state, ...restProps }: BottomTabBarProps) => {
+const DefaultTabBar = ({ state, ...restProps }: BottomTabBarProps) => {
   /**
-   * With React Navigation v7, spacial routes such as +not-found and _sitemap are being added to `state.routes`, but we don't want them to be shown in the tab bar.
+   * With React Navigation v7, special routes such as +not-found and _sitemap
+   * are being added to `state.routes`, but we don't want them to be shown in
+   * the tab bar.
    */
-
-  // TODO due to adding onlyMatching, we can remove this now i think (need to make sure)
-
   const filteredRoutes = state.routes.filter(
     (r) => r.name !== '+not-found' && !r.name.startsWith('_sitemap')
   )
@@ -35,63 +36,94 @@ const TabBar = ({ state, ...restProps }: BottomTabBarProps) => {
   )
 }
 
-// This is the only way to access the navigator.
 const BottomTabNavigator = createBottomTabNavigator().Navigator
 
 type BottomTabNavigationOptionsWithHref = BottomTabNavigationOptions & {
   href?: OneRouter.Href | null
 }
 
-export const Tabs = Object.assign(
-  withLayoutContext<
-    BottomTabNavigationOptionsWithHref,
-    typeof BottomTabNavigator,
-    TabNavigationState<ParamListBase>,
-    BottomTabNavigationEventMap
-  >(
-    BottomTabNavigator,
-    (screens) => {
-      // Support the `href` shortcut prop.
-      return screens.map((screen) => {
-        if (typeof screen.options !== 'function' && screen.options?.href !== undefined) {
-          const { href, ...options } = screen.options
-          if (options.tabBarButton) {
-            throw new Error('Cannot use `href` and `tabBarButton` together.')
-          }
-          return {
-            ...screen,
-            options: {
-              ...options,
-              tabBarButton: (props) => {
-                if (href == null) {
-                  return null
-                }
-                const children =
-                  Platform.OS === 'web' ? (
-                    props.children
-                  ) : (
-                    <Pressable>{props.children}</Pressable>
-                  )
-                return (
-                  <Link
-                    {...(props as any)}
-                    style={[{ display: 'flex' }, props.style]}
-                    href={href}
-                    asChild={Platform.OS !== 'web'}
-                    // biome-ignore lint/correctness/noChildrenProp: children prop needed for asChild pattern
-                    children={children}
-                  />
-                )
-              },
-            },
-          }
-        }
-        return screen
-      })
-    },
-    { props: { tabBar: TabBar } }
-  ),
-  { Protected }
-)
+const RNTabs = withLayoutContext<
+  BottomTabNavigationOptionsWithHref,
+  typeof BottomTabNavigator,
+  TabNavigationState<ParamListBase>,
+  BottomTabNavigationEventMap
+>(BottomTabNavigator, (screens) => {
+  // Support the `href` shortcut prop.
+  return screens.map((screen) => {
+    if (typeof screen.options !== 'function' && screen.options?.href !== undefined) {
+      const { href, ...options } = screen.options
+      if (options.tabBarButton) {
+        throw new Error('Cannot use `href` and `tabBarButton` together.')
+      }
+      return {
+        ...screen,
+        options: {
+          ...options,
+          tabBarButton: (props) => {
+            if (href == null) {
+              return null
+            }
+            const children =
+              Platform.OS === 'web' ? (
+                props.children
+              ) : (
+                <Pressable>{props.children}</Pressable>
+              )
+            return (
+              <Link
+                {...(props as any)}
+                style={[{ display: 'flex' }, props.style]}
+                href={href}
+                asChild={Platform.OS !== 'web'}
+                // biome-ignore lint/correctness/noChildrenProp: children prop needed for asChild pattern
+                children={children}
+              />
+            )
+          },
+        },
+      }
+    }
+    return screen
+  })
+})
+
+type TabsExtraProps = {
+  /**
+   * Platform-keyed tab bar component. Replaces the default bottom-tabs bar.
+   * v1 consumes `web` only; `ios` / `android` accepted for future use.
+   * Falls back to `setupRendering({ Tabs: { web } })` global registry if
+   * no prop is set, then to the built-in `BottomTabBar`.
+   */
+  render?: TabsRender
+}
+
+const TabsWithRender = React.forwardRef<
+  unknown,
+  ComponentProps<typeof RNTabs> & TabsExtraProps
+>((props, ref) => {
+  const { render, tabBar, ...rest } = props as any
+
+  // Resolution: prop tabBar > prop render[platform] > setupRendering[platform] > default.
+  // Tabs runs on web AND native so we dispatch on Platform.OS - unlike Stack,
+  // where the web navigator only consumes the `web` slot.
+  const effectiveTabBar = useMemo(() => {
+    if (tabBar) return tabBar
+    const platform = Platform.OS as 'web' | 'ios' | 'android'
+    const fromProp = render?.[platform]
+    if (fromProp) return fromProp
+    const fromGlobal = getRenderingConfig().Tabs?.[platform]
+    if (fromGlobal) return fromGlobal
+    return DefaultTabBar
+  }, [tabBar, render])
+
+  return <RNTabs {...rest} ref={ref} tabBar={effectiveTabBar} />
+})
+
+export const Tabs = Object.assign(TabsWithRender, {
+  Protected,
+  // Preserve withLayoutContext's static Screen so user code like
+  // `<Tabs.Screen ... />` keeps working through the render wrapper.
+  Screen: RNTabs.Screen,
+})
 
 export default Tabs

package/src/layouts/stack-navigator.ts

@@ -0,0 +1,9 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
+
+/**
+ * Returns a Stack navigator factory. On native this is the stock
+ * `@react-navigation/native-stack`; on web this is replaced via the
+ * `.web.ts` sibling with a custom navigator that supports the `render`
+ * prop for overlay presentations.
+ */
+export const createStackNavigator = createNativeStackNavigator

package/src/layouts/stack-navigator.web.ts

@@ -0,0 +1,3 @@
+import { createWebStackNavigator } from '../router/web/WebStackNavigator'
+
+export const createStackNavigator = createWebStackNavigator

package/src/layouts/stack-utils/StackScreen.tsx

@@ -9,10 +9,34 @@ import {
   type StackHeaderProps,
 } from './StackHeaderComponent'
 import { Screen } from '../../views/Screen'
+import type { StackRender } from '../../router/web/ScreenRenderContext'
+
+export type StackScreenOptions = NativeStackNavigationOptions & {
+  /**
+   * Per-route override of the Stack-level `render` prop. Same platform-keyed
+   * shape (`{ web?, ios?, android? }`); v1 consumes `web` only. When set, it
+   * takes precedence over the Stack-level render for this route.
+   */
+  render?: StackRender
+
+  /**
+   * Web-only. When `true`, the route's React subtree stays mounted across
+   * dismissal and re-navigation - `useState`, `useId`, `useReducer`, refs,
+   * and anything stored in the route component all survive. The render
+   * component receives `open: false` while the route is "closed".
+   *
+   * Caveat: route params are captured at first mount. If the same route is
+   * navigated to with different params later, the captured subtree keeps
+   * the original params. Best for stable, parameter-free overlays
+   * (settings, persistent filters, command palettes). For routes with
+   * dynamic params, leave `keepMounted` off.
+   */
+  keepMounted?: boolean
+}
 
 export interface StackScreenProps extends PropsWithChildren {
   name?: string
-  options?: NativeStackNavigationOptions
+  options?: StackScreenOptions
 }
 
 /**
@@ -36,7 +60,7 @@ export function StackScreen({ children, options, ...rest }: StackScreenProps) {
       }),
     [options, children]
   )
-  return <Screen {...rest} options={updatedOptions} />
+  return <Screen {...rest} options={updatedOptions as NativeStackNavigationOptions} />
 }
 
 const VALID_PRESENTATIONS = [
@@ -85,17 +109,14 @@ export function validateStackPresentation(
 }
 
 export function appendScreenStackPropsToOptions(
-  options: NativeStackNavigationOptions,
+  options: StackScreenOptions,
   props: StackScreenProps
-): NativeStackNavigationOptions {
-  let updatedOptions = { ...options, ...props.options }
+): StackScreenOptions {
+  let updatedOptions: StackScreenOptions = { ...options, ...props.options }
 
   validateStackPresentation(updatedOptions)
 
-  function appendChildOptions(
-    child: React.ReactElement,
-    options: NativeStackNavigationOptions
-  ) {
+  function appendChildOptions(child: React.ReactElement, options: StackScreenOptions) {
     if (child.type === StackHeaderComponent) {
       return appendStackHeaderPropsToOptions(options, child.props as StackHeaderProps)
     } else {

package/src/layouts/stack-utils/index.tsx

@@ -43,4 +43,5 @@ export {
   appendScreenStackPropsToOptions,
   validateStackPresentation,
   type StackScreenProps,
+  type StackScreenOptions,
 } from './StackScreen'

package/src/router/renderingRegistry.ts

@@ -0,0 +1,109 @@
+import type { ComponentType } from 'react'
+
+import type { StackRender, StackRenderProps } from './web/ScreenRenderContext'
+
+/**
+ * Tab bar render component receives bottom-tabs' standard tabBar props plus
+ * the children prop is omitted (tab bar replaces only the bar UI, not the
+ * screens). The actual prop type from `@react-navigation/bottom-tabs` is
+ * `BottomTabBarProps`; we re-export a structural-compatible type so the
+ * registry can be typed without a hard dep on bottom-tabs.
+ */
+export type TabsRenderProps = {
+  state: any
+  navigation: any
+  descriptors: any
+  insets: { top: number; right: number; bottom: number; left: number }
+}
+
+export type TabsRenderComponent = ComponentType<TabsRenderProps>
+
+export type TabsRender = {
+  web?: TabsRenderComponent
+  ios?: TabsRenderComponent
+  android?: TabsRenderComponent
+}
+
+/**
+ * Drawer sidebar render component. Receives the standard
+ * `DrawerContentComponentProps` from `@react-navigation/drawer`. Replaces
+ * the drawer's sidebar content (the list of items / nav UI) but not the
+ * drawer chrome itself (overlay, gestures, animation).
+ */
+export type DrawerRenderProps = {
+  state: any
+  navigation: any
+  descriptors: any
+}
+
+export type DrawerRenderComponent = ComponentType<DrawerRenderProps>
+
+export type DrawerRender = {
+  web?: DrawerRenderComponent
+  ios?: DrawerRenderComponent
+  android?: DrawerRenderComponent
+}
+
+/**
+ * Global render configuration. Populated by `setupRendering()`, typically
+ * called from One's setup file. Each navigator (Stack, Tabs) reads from
+ * this registry as a fallback when no per-instance `render` prop is set.
+ *
+ * Per-instance render prop > per-route options.render > setupRendering global.
+ */
+export type RenderingConfig = {
+  Stack?: StackRender
+  Tabs?: TabsRender
+  Drawer?: DrawerRender
+}
+
+let renderingConfig: RenderingConfig = {}
+
+/**
+ * Register default render components for One's navigators. Call from your
+ * setup file before the app renders. Settings are global - every `<Stack>`
+ * and `<Tabs>` instance picks them up unless overridden via prop or
+ * per-route options.
+ *
+ * @example
+ * ```ts
+ * // app/setup.ts
+ * import { setupRendering } from 'one'
+ * import { Sheet } from 'tamagui'
+ *
+ * setupRendering({
+ *   Stack: {
+ *     web: ({ children, open, dismiss, sheetAllowedDetents }) => (
+ *       <Sheet modal open={open} onOpenChange={(o) => !o && dismiss()}
+ *              snapPoints={sheetAllowedDetents}>
+ *         <Sheet.Overlay />
+ *         <Sheet.Frame>{children}</Sheet.Frame>
+ *       </Sheet>
+ *     ),
+ *   },
+ *   Tabs: { web: MyCustomTabBar },
+ * })
+ * ```
+ */
+export function setupRendering(config: RenderingConfig): void {
+  renderingConfig = {
+    ...renderingConfig,
+    Stack: { ...renderingConfig.Stack, ...config.Stack },
+    Tabs: { ...renderingConfig.Tabs, ...config.Tabs },
+    Drawer: { ...renderingConfig.Drawer, ...config.Drawer },
+  }
+}
+
+export function getRenderingConfig(): RenderingConfig {
+  return renderingConfig
+}
+
+/**
+ * For tests - clears the global registry.
+ * @internal
+ */
+export function resetRenderingConfig(): void {
+  renderingConfig = {}
+}
+
+export type { StackRender, StackRenderProps }

package/src/router/router.ts

@@ -728,6 +728,17 @@ async function doPreloadDev(href: string): Promise<any> {
     const startTime = performance.now()
     const normalizedPath = normalizeLoaderPath(href)
 
+    // one/headless ships with routes statically bundled (createApp's `routes`
+    // option). there's no dev server to fetch /_one/assets/*_vxrn_loader.js
+    // from — when the iframe is same-origin with a real one app, that fetch
+    // resolves against the host's routes and can spuriously return an
+    // __oneError 404 marker for paths the host considers a 404 (e.g. /docs/*
+    // when the host has its own /docs route without that slug). bail before
+    // the fetch so linkTo doesn't misread the host's response as our 404.
+    if (globalThis['__vxrnHeadless']) {
+      return null
+    }
+
     try {
       const loaderJSUrl = getLoaderPath(href, true)
 
@@ -786,6 +797,11 @@ async function doPreloadDev(href: string): Promise<any> {
 }
 
 async function doPreload(href: string) {
+  // see doPreloadDev — same rationale.
+  if (globalThis['__vxrnHeadless']) {
+    return null
+  }
+
   const preloadPath = getPreloadPath(href)
   const loaderPath = getLoaderPath(href)
   const cssPreloadPath = getPreloadCSSPath(href)
@@ -931,20 +947,28 @@ export function preloadRoute(href: string, injectCSS = false): Promise<any> | un
       // normalize the path to match what useLoader uses for cache keys
       const normalizedHref = normalizeLoaderPath(href)
       if (!preloadingLoader[normalizedHref]) {
-        setBoundedPreloadRecord(preloadingLoader, normalizedHref, doPreloadDev(href).then((data) => {
-          setBoundedPreloadRecord(preloadedLoaderData, normalizedHref, data)
-          return data
-        }))
+        setBoundedPreloadRecord(
+          preloadingLoader,
+          normalizedHref,
+          doPreloadDev(href).then((data) => {
+            setBoundedPreloadRecord(preloadedLoaderData, normalizedHref, data)
+            return data
+          })
+        )
       }
       return preloadingLoader[normalizedHref]
     }
 
     if (!preloadingLoader[href]) {
-      setBoundedPreloadRecord(preloadingLoader, href, doPreload(href).then((data) => {
-        // Store the resolved data for synchronous access
-        setBoundedPreloadRecord(preloadedLoaderData, href, data)
-        return data
-      }))
+      setBoundedPreloadRecord(
+        preloadingLoader,
+        href,
+        doPreload(href).then((data) => {
+          // Store the resolved data for synchronous access
+          setBoundedPreloadRecord(preloadedLoaderData, href, data)
+          return data
+        })
+      )
     }
 
     if (injectCSS) {