@remix-run/ui 0.7.0 → 0.9.0

package/src/runtime/module-preloader.ts

@@ -1,12 +1,14 @@
-const SERVER_MODULE_PRELOAD_SELECTOR = 'link[data-rmx][rel~="modulepreload" i][href]'
+const SERVER_MODULE_PRELOAD_SELECTOR = 'link[data-rmx-module-preload][rel~="modulepreload" i][href]'
 
 interface ModulePreloader {
   adoptInitialPreloadLinks(source: ParentNode): void
-  consumePreloadLinks(source: ParentNode): void
+  consumePreloadLinks(source: ParentNode, process?: ProcessClientEntryPreloads): Promise<void>
   hasActivePreloads(): boolean
   isActivePreload(node: Node): boolean
 }
 
+export type ProcessClientEntryPreloads = (preloads: string[]) => string[] | Promise<string[]>
+
 const modulePreloaders = new WeakMap<Document, ModulePreloader>()
 
 export function getDocumentModulePreloader(doc: Document): ModulePreloader {
@@ -36,7 +38,7 @@ function createModulePreloader(doc: Document): ModulePreloader {
     let link = doc.createElement('link')
     link.rel = 'modulepreload'
     link.href = href
-    link.setAttribute('data-rmx', '')
+    link.setAttribute('data-rmx-module-preload', '')
     let url = link.href
     if (requestedUrls.has(url)) return
     requestedUrls.add(url)
@@ -74,7 +76,7 @@ function createModulePreloader(doc: Document): ModulePreloader {
         let observerLink = doc.createElement('link')
         observerLink.rel = 'modulepreload'
         observerLink.href = initialLink.href
-        observerLink.setAttribute('data-rmx', '')
+        observerLink.setAttribute('data-rmx-module-preload', '')
         let url = initialLink.href
         requestedUrls.add(url)
         activateLink(initialLink)
@@ -96,14 +98,15 @@ function createModulePreloader(doc: Document): ModulePreloader {
         doc.head.append(observerLink)
       }
     },
-    consumePreloadLinks(source) {
+    async consumePreloadLinks(source, process) {
       let hrefs: string[] = []
       for (let link of source.querySelectorAll<HTMLLinkElement>(SERVER_MODULE_PRELOAD_SELECTOR)) {
         let href = link.getAttribute('href')
         link.remove()
         if (href) hrefs.push(href)
       }
-      for (let href of hrefs) preload(href)
+      let processedHrefs = process ? await process(hrefs) : hrefs
+      for (let href of processedHrefs) preload(href)
     },
     hasActivePreloads() {
       return activeLinkCount > 0

package/src/runtime/navigation.ts

@@ -1,15 +1,7 @@
 import { getTopFrame, getNamedFrame } from './run.ts'
 import { reloadFrameForNavigation } from './frame.ts'
 import { createFormNavigationResolver, type FormSubmission } from './form-navigation.ts'
-
-interface NavigationPrecommitControllerLike {
-  redirect(url: string, options: { history: 'replace' }): void
-}
-
-interface NavigationInterceptOptionsWithPrecommit extends NavigationInterceptOptions {
-  handler(): Promise<void>
-  precommitHandler(controller: NavigationPrecommitControllerLike): void
-}
+import { isDocumentReload } from './document-reload.ts'
 
 type NavigationState = {
   target: string | undefined
@@ -36,11 +28,38 @@ interface FormSubmissionNavigationInfo {
 
 interface FrameRedirectNavigationInfo {
   type: typeof frameRedirectNavigationInfoType
+  resetScroll: boolean
 }
 
 const formSubmissionNavigationInfoType = 'frame-form-submission'
 const frameRedirectNavigationInfoType = 'frame-redirect'
 
+function resyncWebKitScrollAfterNavigation(
+  event: NavigateEvent,
+  resetScroll: boolean,
+  transition: NavigationTransition,
+): void {
+  let userAgent = navigator.userAgent
+  if (!userAgent.includes('AppleWebKit') || isChromiumUserAgent(userAgent)) return
+  if (!resetScroll || (event.navigationType !== 'push' && event.navigationType !== 'replace'))
+    return
+  if (new URL(event.destination.url).hash) return
+
+  void transition.finished.then(
+    () => {
+      // WebKit can reset its internal scroll position without synchronizing the visual viewport.
+      // https://bugs.webkit.org/show_bug.cgi?id=309542
+      if (event.signal.aborted || window.scrollX !== 0 || window.scrollY !== 0) return
+      window.scrollTo({ behavior: 'instant', left: 0, top: 1 })
+      requestAnimationFrame(() => {
+        if (event.signal.aborted || window.scrollX !== 0 || window.scrollY !== 1) return
+        window.scrollTo({ behavior: 'instant', left: 0, top: 0 })
+      })
+    },
+    () => {},
+  )
+}
+
 /**
  * Options for client-side frame-aware navigation.
  */
@@ -64,7 +83,17 @@ export async function navigate(href: string, options?: NavigationOptions) {
     resetScroll: options?.resetScroll !== false,
     $rmx: true,
   } satisfies NavigationState
-  let transition = window.navigation.navigate(href, { state, history: options?.history })
+  let navigation = getInterceptableNavigation()
+  if (!navigation) {
+    if (options?.history === 'replace') {
+      window.location.replace(href)
+    } else {
+      window.location.assign(href)
+    }
+    return
+  }
+
+  let transition = navigation.navigate(href, { state, history: options?.history })
   await transition.finished
 }
 
@@ -91,7 +120,8 @@ export function startNavigationListenerImpl(
     reloadFrame: typeof reloadFrameForNavigation
   },
 ) {
-  let navigation = window.navigation
+  let navigation = getInterceptableNavigation()
+  if (!navigation) return
   let resolveFormNavigation = createFormNavigationResolver(signal)
 
   navigation.updateCurrentEntry({
@@ -101,6 +131,7 @@ export function startNavigationListenerImpl(
   navigation.addEventListener(
     'navigate',
     (event) => {
+      if (isDocumentReload(event.info)) return
       // Safari seems to incorrectly set canIntercept to true for sub-domain navigations, so
       // we do a host check ourselves/. The spec is clear that a different host should prevent
       // interception so this is likely a bug in Safari:
@@ -108,7 +139,10 @@ export function startNavigationListenerImpl(
       if (!event.canIntercept || isCrossOriginDestination(event)) return
 
       if (isFrameRedirectNavigationInfo(event.info)) {
-        event.intercept({ async handler() {} })
+        interceptNavigation(navigation, event, event.info.resetScroll, {
+          async handler() {},
+          scroll: 'manual',
+        })
         return
       }
 
@@ -118,7 +152,7 @@ export function startNavigationListenerImpl(
             state: replayedSubmission.state,
             getSubmission: replayedSubmission.getSubmission,
           }
-        : getRuntimeNavigation(event, resolveFormNavigation)
+        : getRuntimeNavigation(navigation, event, resolveFormNavigation)
       if (!runtimeNavigation) return
       let { state } = runtimeNavigation
 
@@ -127,6 +161,8 @@ export function startNavigationListenerImpl(
       let frame = namedFrame ?? topFrame
 
       let handler = async () => {
+        if (event.signal.aborted) return
+
         let submission = await runtimeNavigation.getSubmission?.()
         if (event.signal.aborted) return
 
@@ -136,10 +172,15 @@ export function startNavigationListenerImpl(
 
         topFrame.src = event.destination.url
         if (frame !== topFrame) frame.src = state.src
-        let { redirectedTo } = await options.reloadFrame(frame, {
+        let reload = options.reloadFrame(frame, {
           ...submission,
           signal: event.signal,
         })
+        await reload.committed
+        if (event.signal.aborted || reload.signal.aborted) return
+        if (state.resetScroll) event.scroll()
+
+        let { redirectedTo } = await reload.finished
 
         if (redirectedTo && frame === topFrame) {
           frame.src = redirectedTo
@@ -150,16 +191,17 @@ export function startNavigationListenerImpl(
             state: { ...state, src: redirectedTo },
             info: {
               type: frameRedirectNavigationInfoType,
+              resetScroll: state.resetScroll,
             } satisfies FrameRedirectNavigationInfo,
           })
         }
-
-        let isNewEntry = event.navigationType === 'push' || event.navigationType === 'replace'
-        if (state.resetScroll && isNewEntry) {
-          window.scrollTo(0, 0)
-        }
       }
 
+      let interceptOptions = {
+        handler,
+        scroll: state.resetScroll === false ? 'manual' : undefined,
+      } satisfies NavigationInterceptOptions
+
       if (runtimeNavigation.getSubmission) {
         // <form method="post"> navigations
         if (runtimeNavigation.replaceHistory && replayedSubmission == null) {
@@ -168,20 +210,19 @@ export function startNavigationListenerImpl(
 
           // Modern browsers allow you to update the in-flight navigation entry before it's committed
           if (supportsPrecommit) {
-            let interceptOptions: NavigationInterceptOptionsWithPrecommit = {
-              handler,
+            interceptNavigation(navigation, event, state.resetScroll, {
+              ...interceptOptions,
               precommitHandler(controller) {
                 controller.redirect(event.destination.url, { history: 'replace' })
               },
-            }
-            event.intercept(interceptOptions)
+            })
             return
           }
 
           // Safari doesn't support precommit as of Aug 2026, so we do a full replacement navigation
           if (event.cancelable) {
             event.preventDefault()
-            window.navigation.navigate(event.destination.url, {
+            navigation.navigate(event.destination.url, {
               history: 'replace',
               state,
               info: {
@@ -194,14 +235,14 @@ export function startNavigationListenerImpl(
           }
         }
 
-        event.intercept({ handler })
+        interceptNavigation(navigation, event, state.resetScroll, interceptOptions)
       } else {
         // <a>/<form method="get"> navigations
         if (runtimeNavigation.replaceHistory && event.cancelable) {
           event.preventDefault()
           navigation.navigate(event.destination.url, { history: 'replace', state })
         } else {
-          event.intercept({ handler })
+          interceptNavigation(navigation, event, state.resetScroll, interceptOptions)
         }
       }
     },
@@ -209,6 +250,18 @@ export function startNavigationListenerImpl(
   )
 }
 
+function getInterceptableNavigation(): Navigation | undefined {
+  let navigation = window.navigation
+  if (
+    !navigation ||
+    typeof NavigateEvent === 'undefined' ||
+    !('sourceElement' in NavigateEvent.prototype)
+  ) {
+    return
+  }
+  return navigation
+}
+
 function isRuntimeNavigation(info: unknown): info is NavigationState {
   return typeof info === 'object' && info != null && '$rmx' in info
 }
@@ -231,7 +284,9 @@ function isFrameRedirectNavigationInfo(value: unknown): value is FrameRedirectNa
     typeof value === 'object' &&
     value != null &&
     'type' in value &&
-    value.type === frameRedirectNavigationInfoType
+    value.type === frameRedirectNavigationInfoType &&
+    'resetScroll' in value &&
+    typeof value.resetScroll === 'boolean'
   )
 }
 
@@ -240,23 +295,183 @@ function isCrossOriginDestination(event: NavigateEvent): boolean {
   return destination.origin !== window.location.origin
 }
 
+function interceptNavigation(
+  navigation: Navigation,
+  event: NavigateEvent,
+  resetScroll: boolean,
+  options: NavigationInterceptOptions,
+): void {
+  let scrollStyleWorkarounds = installNavigationScrollStyleWorkarounds(event, resetScroll)
+
+  let transitionBound = false
+  function bindTransition() {
+    if (transitionBound) return
+    if (event.signal.aborted) return scrollStyleWorkarounds?.remove()
+
+    // The Navigation API creates the transition before running interception handlers.
+    let transition = navigation.transition
+    if (!transition) return scrollStyleWorkarounds?.remove()
+    transitionBound = true
+
+    resyncWebKitScrollAfterNavigation(event, resetScroll, transition)
+    if (scrollStyleWorkarounds) {
+      scheduleNavigationScrollCleanup(
+        transition,
+        scrollStyleWorkarounds.remove,
+        scrollStyleWorkarounds.cleanup,
+      )
+    }
+  }
+
+  let interceptOptions: NavigationInterceptOptions = {
+    ...options,
+    handler() {
+      bindTransition()
+      return options.handler?.()
+    },
+  }
+  let precommitHandler = options.precommitHandler
+  if (precommitHandler) {
+    interceptOptions.precommitHandler = function precommit(controller) {
+      bindTransition()
+      return precommitHandler(controller)
+    }
+  }
+
+  try {
+    event.intercept(interceptOptions)
+  } catch (error) {
+    scrollStyleWorkarounds?.remove()
+    throw error
+  }
+}
+
+type NavigationScrollStyles = {
+  cssText: string
+  cleanup: 'finished' | 'after-paint'
+}
+
+function getNavigationScrollStyles(
+  event: NavigateEvent,
+  resetScroll: boolean,
+): NavigationScrollStyles | undefined {
+  if (!resetScroll) return
+
+  if (event.navigationType === 'traverse') {
+    // Full-document reconciliation can temporarily shrink the page or trigger scroll anchoring
+    // before the Navigation API performs its deferred restoration. Preserve the starting scroll
+    // range and position until the navigation finishes so native restoration remains authoritative.
+    // Root scroll height includes page-level effects such as body padding.
+
+    // We think this is a bug in Chromium where they are incorrectly classifying a
+    // DOM-modification-driven scroll change as a user scroll action, causing it to skip restoration
+    // after the transition. The intended user-scroll behavior is tested here:
+    // https://github.com/web-platform-tests/wpt/blob/master/navigation-api/scroll-behavior/after-transition-skips-restore-when-scrolled.html
+    let { scrollHeight, clientHeight } = document.documentElement
+    return {
+      cssText: `
+        html {
+          min-height: ${scrollHeight + clientHeight}px !important;
+          overflow-anchor: none !important;
+        }
+
+        body {
+          overflow-anchor: none !important;
+        }
+      `,
+      cleanup: 'finished',
+    }
+  }
+
+  if (event.navigationType !== 'push' && event.navigationType !== 'replace') return
+  if (new URL(event.destination.url).hash) return
+  if (!isChromiumUserAgent(navigator.userAgent)) return
+
+  // Chromium can treat reconciliation-driven scroll anchoring as user scrolling and preserve an
+  // offset after NavigateEvent.scroll() resets the destination. Suppress anchoring before
+  // interception and keep it disabled through the first post-navigation paint.
+  return {
+    cssText: `
+      html,
+      body {
+        overflow-anchor: none !important;
+      }
+    `,
+    cleanup: 'after-paint',
+  }
+}
+
+function isChromiumUserAgent(userAgent: string): boolean {
+  return userAgent.includes('Chrome') || userAgent.includes('Chromium')
+}
+
+type NavigationScrollStylesheet = {
+  remove(): void
+  cleanup: NavigationScrollStyles['cleanup']
+}
+
+function installNavigationScrollStyleWorkarounds(
+  event: NavigateEvent,
+  resetScroll: boolean,
+): NavigationScrollStylesheet | undefined {
+  let scrollStyles = getNavigationScrollStyles(event, resetScroll)
+  if (!scrollStyles) return
+
+  let stylesheet = new CSSStyleSheet()
+  stylesheet.replaceSync(scrollStyles.cssText)
+  document.adoptedStyleSheets = [...document.adoptedStyleSheets, stylesheet]
+
+  let removed = false
+  function remove() {
+    event.signal.removeEventListener('abort', remove)
+    if (removed) return
+    removed = true
+    document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
+      (current) => current !== stylesheet,
+    )
+  }
+
+  if (event.signal.aborted) remove()
+  else event.signal.addEventListener('abort', remove, { once: true })
+  return { remove, cleanup: scrollStyles.cleanup }
+}
+
+function scheduleNavigationScrollCleanup(
+  transition: NavigationTransition,
+  removeScrollStyles: () => void,
+  cleanup: NavigationScrollStylesheet['cleanup'],
+): void {
+  function removeAfterSuccess() {
+    if (cleanup === 'finished') return removeScrollStyles()
+    // The first callback runs before the first post-navigation paint. The second removes the
+    // stylesheet before the following frame.
+    requestAnimationFrame(() => requestAnimationFrame(removeScrollStyles))
+  }
+
+  void transition.finished.then(removeAfterSuccess, removeScrollStyles)
+}
+
 function getRuntimeNavigation(
+  navigation: Navigation,
   event: NavigateEvent,
   resolveFormNavigation: ReturnType<typeof createFormNavigationResolver>,
 ): RuntimeNavigation | undefined {
   if (event.navigationType === 'traverse') {
-    let state = getTraverseNavigationState(event)
+    let state = getTraverseNavigationState(navigation, event)
     return state ? { state } : undefined
   }
 
-  let sourceNavigation = getSourceElementNavigation(event, resolveFormNavigation)
+  let sourceNavigation = getSourceElementNavigation(navigation, event, resolveFormNavigation)
   if (sourceNavigation) return sourceNavigation
 
   let destinationState = event.destination.getState()
   if (isRuntimeNavigation(destinationState)) return { state: destinationState }
 }
 
-function getTraverseNavigationState(event: NavigateEvent): NavigationState | undefined {
+function getTraverseNavigationState(
+  navigation: Navigation,
+  event: NavigateEvent,
+): NavigationState | undefined {
   let destinationState = event.destination.getState()
   if (isRuntimeNavigation(destinationState)) {
     return destinationState
@@ -264,7 +479,6 @@ function getTraverseNavigationState(event: NavigateEvent): NavigationState | und
 
   // Safari returns `null` for destination.getState(), even though its in the
   // navigation.entries(), so we do its job for it and look it up.
-  let navigation = window.navigation
   let matchingEntry = navigation.entries().find((entry) => entry.key === event.destination.key)
   if (matchingEntry) {
     let state = matchingEntry.getState()
@@ -277,6 +491,7 @@ function getTraverseNavigationState(event: NavigateEvent): NavigationState | und
 }
 
 function getSourceElementNavigation(
+  navigation: Navigation,
   event: NavigateEvent,
   resolveFormNavigation: ReturnType<typeof createFormNavigationResolver>,
 ): RuntimeNavigation | undefined {
@@ -286,36 +501,36 @@ function getSourceElementNavigation(
 
   let linkElement = sourceElement.closest('a, area')
   if (linkElement instanceof Element) {
-    if (linkElement.hasAttribute('rmx-document')) return
+    if (linkElement.hasAttribute('data-rmx-document')) return
     if (linkElement.hasAttribute('download')) return
 
     return {
       state: {
-        target: linkElement.getAttribute('rmx-target') ?? undefined,
-        src: linkElement.getAttribute('rmx-src') ?? event.destination.url,
-        resetScroll: linkElement.getAttribute('rmx-reset-scroll') !== 'false',
+        target: linkElement.getAttribute('data-rmx-target') ?? undefined,
+        src: linkElement.getAttribute('data-rmx-src') ?? event.destination.url,
+        resetScroll: linkElement.getAttribute('data-rmx-reset-scroll') !== 'false',
         $rmx: true,
       },
-      replaceHistory: getReplaceHistory(linkElement.getAttribute('rmx-history'), false),
+      replaceHistory: getReplaceHistory(linkElement.getAttribute('data-rmx-history'), false),
     }
   }
 
   let formNavigation = resolveFormNavigation(event)
-  if (!formNavigation || formNavigation.hasAttribute('rmx-document')) return
+  if (!formNavigation || formNavigation.hasAttribute('data-rmx-document')) return
 
   let replaceHistoryByDefault =
     formNavigation.getSubmission !== undefined &&
-    event.destination.url === window.navigation.currentEntry?.url
+    event.destination.url === navigation.currentEntry?.url
 
   return {
     state: {
-      target: formNavigation.getAttribute('rmx-target') ?? undefined,
-      src: formNavigation.getAttribute('rmx-src') ?? event.destination.url,
-      resetScroll: formNavigation.getAttribute('rmx-reset-scroll') !== 'false',
+      target: formNavigation.getAttribute('data-rmx-target') ?? undefined,
+      src: formNavigation.getAttribute('data-rmx-src') ?? event.destination.url,
+      resetScroll: formNavigation.getAttribute('data-rmx-reset-scroll') !== 'false',
       $rmx: true,
     },
     replaceHistory: getReplaceHistory(
-      formNavigation.getAttribute('rmx-history'),
+      formNavigation.getAttribute('data-rmx-history'),
       replaceHistoryByDefault,
     ),
     getSubmission: formNavigation.getSubmission,

package/src/runtime/reconcile.ts

@@ -1097,6 +1097,7 @@ function insertFrame(
           moduleLoads: runtime.moduleLoads,
           frameInstances: runtime.frameInstances,
           namedFrames: runtime.namedFrames,
+          processClientEntryPreloads: runtime.processClientEntryPreloads,
         })
         runtime.frameInstances.set(start, instance)
       }
@@ -1147,6 +1148,7 @@ function insertFrame(
     moduleLoads: runtime.moduleLoads,
     frameInstances: runtime.frameInstances,
     namedFrames: runtime.namedFrames,
+    processClientEntryPreloads: runtime.processClientEntryPreloads,
   })
   runtime.frameInstances.set(start, instance)
 
@@ -1163,7 +1165,7 @@ function insertFrame(
       resolveController: undefined,
     },
   })
-  resolveClientFrame(committed, runtime)
+  resolveClientFrame(committed, runtime, runtime.serverFrameReload)
 
   return committed
 }
@@ -1171,7 +1173,7 @@ function insertFrame(
 function resolveClientFrame(
   node: CommittedFrameNode,
   runtime: FrameRuntime,
-  serverFrameReload?: { signal: AbortSignal },
+  serverFrameReload?: NonNullable<FrameRuntime['serverFrameReload']>,
 ): void {
   let frameSrc = getFrameSrc(node)
   let state = node._state
@@ -1188,8 +1190,9 @@ function resolveClientFrame(
   }
   let resolveController = reload?.controller ?? new AbortController()
   state.resolveController = resolveController
+  let frameCommitted = Promise.withResolvers<void>()
 
-  Promise.resolve()
+  let resolve = Promise.resolve()
     .then(() =>
       runtime.resolveFrame(frameSrc, {
         signal: resolveController.signal,
@@ -1203,7 +1206,12 @@ function resolveClientFrame(
       state.fallbackRoot?.dispose()
       state.fallbackRoot = undefined
       let nextContent = asAbortableFrameContent(content, resolveController.signal)
-      await instance.render(nextContent, { signal: resolveController.signal })
+      await instance.render(nextContent, {
+        signal: resolveController.signal,
+        reconciliationTracker: serverFrameReload?.reconciliationTracker,
+        blockingFrameTracker: serverFrameReload?.blockingFrameTracker,
+        onCommit: frameCommitted.resolve,
+      })
       if (state.resolveToken !== token || resolveController.signal.aborted) return
       state.resolved = true
     })
@@ -1213,11 +1221,19 @@ function resolveClientFrame(
       }
     })
     .finally(() => {
+      frameCommitted.resolve()
       reload?.complete()
       if (state.resolveController === resolveController) {
         state.resolveController = undefined
       }
     })
+
+  if (serverFrameReload?.reconciliationTracker && !node.props.fallback) {
+    serverFrameReload.reconciliationTracker.waitFor(resolve)
+  }
+  if (serverFrameReload?.blockingFrameTracker && !node.props.fallback) {
+    serverFrameReload.blockingFrameTracker.waitFor(frameCommitted.promise)
+  }
 }
 
 function disposeFrameResources(node: CommittedFrameNode): void {

package/src/runtime/run.ts

@@ -7,6 +7,7 @@ import type { ComponentErrorEvent } from './error-event.ts'
 import type { LoadModule, ResolveFrame, ResolveFrameOptions } from './frame.ts'
 import { startNavigationListener } from './navigation.ts'
 import { TypedEventTarget } from './typed-event-target.ts'
+import type { ProcessClientEntryPreloads } from './module-preloader.ts'
 
 /**
  * Options for starting the client runtime with {@link run}.
@@ -27,6 +28,9 @@ export interface RunInit {
    * method, encoding, and abort signal.
    */
   resolveFrame?: ResolveFrame
+
+  /** Processes module preloads discovered in late client entry responses before activation. */
+  processClientEntryPreloads?: ProcessClientEntryPreloads
 }
 
 /**
@@ -76,9 +80,12 @@ export function getNamedFrame(name: string): FrameHandle {
 // manual reloads use the requested form encoding instead of always sending multipart bodies.
 function getRequestBody(options?: ResolveFrameOptions): BodyInit | undefined {
   let formData = options?.formData
-  if (!formData || options?.method?.toLowerCase() === 'get') return
+  let method = options?.method
+  if (!formData || !method || ['get', 'head'].includes(method.toLowerCase())) return
+
+  let encType = options?.encType
 
-  if (options?.encType === 'text/plain') {
+  if (encType === 'text/plain') {
     let body = ''
     for (let [name, value] of formData) {
       name = normalizeLineBreaks(name)
@@ -88,7 +95,7 @@ function getRequestBody(options?: ResolveFrameOptions): BodyInit | undefined {
     return new Blob([body], { type: 'text/plain' })
   }
 
-  if (options?.encType !== 'application/x-www-form-urlencoded') return formData
+  if (encType !== 'application/x-www-form-urlencoded') return formData
 
   let body = new URLSearchParams()
   for (let [name, value] of formData) {
@@ -109,7 +116,8 @@ async function defaultResolveFrame(src: string, options?: ResolveFrameOptions):
     signal: options?.signal,
   })
 
-  if (!response.ok) {
+  let isHtml = response.headers.get('Content-Type')?.toLowerCase().includes('text/html')
+  if (response.status >= 500 || (response.status >= 300 && !isHtml)) {
     throw new Error(`Failed to resolve frame: ${response.status} ${response.statusText}`.trimEnd())
   }
 
@@ -142,6 +150,7 @@ export function run(init: RunInit): AppRuntime {
     moduleLoads: new Map(),
     frameInstances: new WeakMap(),
     namedFrames,
+    processClientEntryPreloads: init.processClientEntryPreloads,
   })
 
   let appController = new AbortController()