@remix-run/ui 0.8.0 → 0.9.0

package/src/runtime/mixins/mixin.ts

@@ -6,6 +6,7 @@ import type { SchedulerPhaseEvent } from '../scheduler.ts'
 import { jsx } from '../jsx.ts'
 import { TypedEventTarget } from '../typed-event-target.ts'
 import { invariant } from '../invariant.ts'
+import { composeMixedProps, isMixinElementFunction } from '../core/mix.ts'
 
 type RebindNode<value, baseNode, boundNode> = value extends (
   ...args: infer fnArgs
@@ -288,9 +289,9 @@ export function createMixin<
 
 export function resolveMixedProps(input: ResolveMixedPropsInput): ResolveMixedPropsOutput {
   let state = input.state ?? createMixinRuntimeState()
-  let handle = state.handle as ScopedAnyMixinHandle | undefined
-  if (!handle) {
-    handle = createMixinHandle({
+  let scopedHandle = state.handle as ScopedAnyMixinHandle | undefined
+  if (!scopedHandle) {
+    scopedHandle = createMixinHandle({
       id: state.id,
       hostType: input.hostType,
       frame: input.frame,
@@ -299,16 +300,14 @@ export function resolveMixedProps(input: ResolveMixedPropsInput): ResolveMixedPr
       getRuntimeSignal: () => getMixinRuntimeSignal(state),
       getBinding: () => state.binding,
     }) as ScopedAnyMixinHandle
-    state.handle = handle
+    state.handle = scopedHandle
   }
+  let handle = scopedHandle
   let hostType = input.hostType
-  let descriptors = resolveMixDescriptors(input.props)
-  let composedProps = withoutMix(input.props)
-  let mixinProps = withoutMixinTreeProps(composedProps)
-  let maxDescriptors = 1024
 
-  for (let index = 0; index < descriptors.length && index < maxDescriptors; index++) {
-    let descriptor = descriptors[index]
+  let runnerCount = 0
+  let props = composeMixedProps(hostType, input.props, (descriptor, index, mixinProps) => {
+    runnerCount = index + 1
     let entry = state.runners[index]
     if (!entry || entry.type !== descriptor.type) {
       if (entry) {
@@ -332,46 +331,15 @@ export function resolveMixedProps(input: ResolveMixedPropsInput): ResolveMixedPr
       }
     }
 
+    // Unlike the server renderer, mixin errors are not isolated here: a
+    // throwing mixin aborts the client render.
     handle.setActiveScope(entry.scope)
     let result = entry.runner(...descriptor.args, mixinProps)
     handle.setActiveScope(undefined)
-    if (!result) continue
-    if (isMixinElement(result)) continue
-
-    let returnedDescriptors = resolveReturnedMixDescriptors(result)
-    if (returnedDescriptors) {
-      for (let returned of returnedDescriptors) descriptors.push(returned)
-      continue
-    }
-
-    if (!isRemixElement(result)) {
-      console.error(new Error('mixins must return a remix element'))
-      continue
-    }
-
-    let resultType =
-      typeof result.type === 'string'
-        ? result.type
-        : isMixinElement(result.type)
-          ? result.type.__rmxMixinElementType
-          : null
-    if (resultType !== hostType) {
-      console.error(new Error('mixins must return an element with the same host type'))
-      continue
-    }
-
-    if (result.type !== resultType) {
-      result = { ...result, type: resultType }
-    }
-
-    let nextProps = sanitizeReturnedMixinProps(result.props)
-    let nestedDescriptors = resolveMixDescriptors(nextProps)
-    for (let nested of nestedDescriptors) descriptors.push(nested)
-    composedProps = composeMixinProps(composedProps, withoutMix(nextProps))
-    mixinProps = withoutMixinTreeProps(composedProps)
-  }
+    return result
+  })
 
-  for (let index = descriptors.length; index < state.runners.length; index++) {
+  for (let index = runnerCount; index < state.runners.length; index++) {
     let entry = state.runners[index]
     if (entry) {
       handle.dispatchScopedEvent(entry.scope, new Event('remove'))
@@ -379,18 +347,11 @@ export function resolveMixedProps(input: ResolveMixedPropsInput): ResolveMixedPr
     }
   }
 
-  if (state.runners.length > descriptors.length) {
-    state.runners.length = descriptors.length
+  if (state.runners.length > runnerCount) {
+    state.runners.length = runnerCount
   }
 
-  let nextMix = input.props.mix
-  return {
-    state,
-    props: {
-      ...composedProps,
-      ...(nextMix === undefined ? {} : { mix: nextMix }),
-    },
-  }
+  return { state, props }
 }
 
 export function teardownMixins(state?: MixinRuntimeState) {
@@ -847,96 +808,8 @@ function isBindingInUpdateScope(binding: MixinRuntimeBinding, parents: ParentNod
   return false
 }
 
-function resolveMixDescriptors(props: ElementProps): AnyMixinDescriptor[] {
-  let mix = props.mix
-  if (!mix) return []
-  if (Array.isArray(mix)) {
-    if (mix.length === 0) return []
-    return mix.filter(Boolean) as AnyMixinDescriptor[]
-  }
-  return [mix] as AnyMixinDescriptor[]
-}
-
-function withoutMix(props: ElementProps): ElementProps {
-  if (!('mix' in props)) return props
-  let output = { ...props }
-  delete output.mix
-  return output
-}
-
-function withoutMixinTreeProps(props: ElementProps): ElementProps {
-  if (!('children' in props) && !('innerHTML' in props)) return props
-  let output = { ...props }
-  delete output.children
-  delete output.innerHTML
-  return output
-}
-
-function sanitizeReturnedMixinProps(props: ElementProps): ElementProps {
-  if (!('children' in props) && !('innerHTML' in props)) return props
-  console.error(new Error('mixins must not return children or innerHTML'))
-  return withoutMixinTreeProps(props)
-}
-
-function composeMixinProps(previous: ElementProps, next: ElementProps): ElementProps {
-  return { ...previous, ...next }
-}
-
-function resolveReturnedMixDescriptors(value: unknown): AnyMixinDescriptor[] | null {
-  let descriptors: AnyMixinDescriptor[] = []
-  if (!collectReturnedMixDescriptors(value, descriptors)) {
-    return null
-  }
-
-  return descriptors
-}
-
-function collectReturnedMixDescriptors(
-  value: unknown,
-  output: AnyMixinDescriptor[],
-): value is MixInput<Element, ElementProps> {
-  if (!value) {
-    return true
-  }
-
-  if (Array.isArray(value)) {
-    for (let item of value) {
-      if (!collectReturnedMixDescriptors(item, output)) {
-        return false
-      }
-    }
-    return true
-  }
-
-  if (!isMixinDescriptor(value)) {
-    return false
-  }
-
-  output.push(value)
-  return true
-}
-
-function isRemixElement(value: unknown): value is RemixElement {
-  if (!value || typeof value !== 'object') return false
-  return (value as { $rmx?: unknown }).$rmx === true
-}
-
-export function isMixinDescriptor(value: unknown): value is AnyMixinDescriptor {
-  if (!value || typeof value !== 'object' || isRemixElement(value)) {
-    return false
-  }
-
-  let descriptor = value as { type?: unknown; args?: unknown }
-  return typeof descriptor.type === 'function' && Array.isArray(descriptor.args)
-}
-
-function isMixinElement(value: unknown): value is MixinElement<Element, ElementProps> {
-  if (typeof value !== 'function') return false
-  return '__rmxMixinElementType' in value
-}
-
 function normalizeMixinRunner(result: AnyMixinSetupResult, handle: AnyMixinHandle): AnyMixinRunner {
-  if (typeof result === 'function' && !isMixinElement(result)) {
+  if (typeof result === 'function' && !isMixinElementFunction(result)) {
     return result as AnyMixinRunner
   }
   if (result === undefined) {

package/src/runtime/module-preloader.ts

@@ -2,11 +2,13 @@ const SERVER_MODULE_PRELOAD_SELECTOR = 'link[data-rmx-module-preload][rel~="modu
 
 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 {
@@ -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
@@ -42,16 +34,18 @@ interface FrameRedirectNavigationInfo {
 const formSubmissionNavigationInfoType = 'frame-form-submission'
 const frameRedirectNavigationInfoType = 'frame-redirect'
 
-function resyncWebKitScrollAfterNavigation(event: NavigateEvent, resetScroll: boolean): void {
+function resyncWebKitScrollAfterNavigation(
+  event: NavigateEvent,
+  resetScroll: boolean,
+  transition: NavigationTransition,
+): void {
   let userAgent = navigator.userAgent
-  if (!userAgent.includes('AppleWebKit')) return
-  if (userAgent.includes('Chrome') || userAgent.includes('Chromium')) return
+  if (!userAgent.includes('AppleWebKit') || isChromiumUserAgent(userAgent)) return
   if (!resetScroll || (event.navigationType !== 'push' && event.navigationType !== 'replace'))
     return
   if (new URL(event.destination.url).hash) return
 
-  window.navigation.addEventListener(
-    'navigatesuccess',
+  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
@@ -62,7 +56,7 @@ function resyncWebKitScrollAfterNavigation(event: NavigateEvent, resetScroll: bo
         window.scrollTo({ behavior: 'instant', left: 0, top: 0 })
       })
     },
-    { once: true, signal: event.signal },
+    () => {},
   )
 }
 
@@ -89,7 +83,7 @@ export async function navigate(href: string, options?: NavigationOptions) {
     resetScroll: options?.resetScroll !== false,
     $rmx: true,
   } satisfies NavigationState
-  let navigation = window.navigation
+  let navigation = getInterceptableNavigation()
   if (!navigation) {
     if (options?.history === 'replace') {
       window.location.replace(href)
@@ -126,7 +120,7 @@ export function startNavigationListenerImpl(
     reloadFrame: typeof reloadFrameForNavigation
   },
 ) {
-  let navigation = window.navigation
+  let navigation = getInterceptableNavigation()
   if (!navigation) return
   let resolveFormNavigation = createFormNavigationResolver(signal)
 
@@ -137,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:
@@ -144,10 +139,9 @@ export function startNavigationListenerImpl(
       if (!event.canIntercept || isCrossOriginDestination(event)) return
 
       if (isFrameRedirectNavigationInfo(event.info)) {
-        resyncWebKitScrollAfterNavigation(event, event.info.resetScroll)
-        event.intercept({
+        interceptNavigation(navigation, event, event.info.resetScroll, {
           async handler() {},
-          scroll: event.info.resetScroll === false ? 'manual' : undefined,
+          scroll: 'manual',
         })
         return
       }
@@ -161,7 +155,6 @@ export function startNavigationListenerImpl(
         : getRuntimeNavigation(navigation, event, resolveFormNavigation)
       if (!runtimeNavigation) return
       let { state } = runtimeNavigation
-      resyncWebKitScrollAfterNavigation(event, state.resetScroll)
 
       let topFrame = options.getTopFrame()
       let namedFrame = state.target ? options.getNamedFrame(state.target) : undefined
@@ -170,10 +163,6 @@ export function startNavigationListenerImpl(
       let handler = async () => {
         if (event.signal.aborted) return
 
-        if (event.navigationType === 'traverse' && state.resetScroll) {
-          preserveStartingDocumentScrollState(navigation, event)
-        }
-
         let submission = await runtimeNavigation.getSubmission?.()
         if (event.signal.aborted) return
 
@@ -183,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
@@ -216,7 +210,7 @@ export function startNavigationListenerImpl(
 
           // Modern browsers allow you to update the in-flight navigation entry before it's committed
           if (supportsPrecommit) {
-            event.intercept({
+            interceptNavigation(navigation, event, state.resetScroll, {
               ...interceptOptions,
               precommitHandler(controller) {
                 controller.redirect(event.destination.url, { history: 'replace' })
@@ -241,14 +235,14 @@ export function startNavigationListenerImpl(
           }
         }
 
-        event.intercept(interceptOptions)
+        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(interceptOptions)
+          interceptNavigation(navigation, event, state.resetScroll, interceptOptions)
         }
       }
     },
@@ -256,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
 }
@@ -289,46 +295,160 @@ function isCrossOriginDestination(event: NavigateEvent): boolean {
   return destination.origin !== window.location.origin
 }
 
-function preserveStartingDocumentScrollState(navigation: Navigation, event: NavigateEvent): void {
-  // 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
+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 { scrollHeight, clientHeight } = document.documentElement
-  let stylesheet = new CSSStyleSheet()
-  stylesheet.replaceSync(`
-    html {
-      min-height: ${scrollHeight + clientHeight}px !important;
-      overflow-anchor: none !important;
+  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;
+        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 cleanedUp = false
-  let cleanup = () => {
-    if (cleanedUp) return
-    cleanedUp = true
-    event.signal.removeEventListener('abort', cleanup)
-    navigation.removeEventListener('navigatesuccess', cleanup)
-    navigation.removeEventListener('navigateerror', cleanup)
+  let removed = false
+  function remove() {
+    event.signal.removeEventListener('abort', remove)
+    if (removed) return
+    removed = true
     document.adoptedStyleSheets = document.adoptedStyleSheets.filter(
       (current) => current !== stylesheet,
     )
   }
 
-  event.signal.addEventListener('abort', cleanup, { once: true })
-  navigation.addEventListener('navigatesuccess', cleanup, { once: true })
-  navigation.addEventListener('navigateerror', cleanup, { once: true })
+  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(

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)
 
@@ -1188,6 +1190,7 @@ function resolveClientFrame(
   }
   let resolveController = reload?.controller ?? new AbortController()
   state.resolveController = resolveController
+  let frameCommitted = Promise.withResolvers<void>()
 
   let resolve = Promise.resolve()
     .then(() =>
@@ -1206,6 +1209,8 @@ function resolveClientFrame(
       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
@@ -1216,6 +1221,7 @@ function resolveClientFrame(
       }
     })
     .finally(() => {
+      frameCommitted.resolve()
       reload?.complete()
       if (state.resolveController === resolveController) {
         state.resolveController = undefined
@@ -1225,6 +1231,9 @@ function resolveClientFrame(
   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
 }
 
 /**
@@ -112,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())
   }
 
@@ -145,6 +150,7 @@ export function run(init: RunInit): AppRuntime {
     moduleLoads: new Map(),
     frameInstances: new WeakMap(),
     namedFrames,
+    processClientEntryPreloads: init.processClientEntryPreloads,
   })
 
   let appController = new AbortController()