@remix-run/ui 0.7.0 → 0.8.0

package/src/runtime/frame.ts

@@ -170,7 +170,9 @@ export type FrameRuntime = {
   moduleLoads: Map<string, Promise<ElementFunction | undefined>>
   frameInstances: WeakMap<Comment, Frame>
   namedFrames: Map<string, FrameHandle>
-  serverFrameReload: { signal: AbortSignal } | undefined
+  serverFrameReload:
+    | { signal: AbortSignal; reconciliationTracker?: ReconciliationTracker }
+    | undefined
   reloadForNavigation?: (options?: FrameReloadOptions) => Promise<FrameReloadResult>
 }
 
@@ -215,6 +217,7 @@ export type FrameContext = {
   regionParent?: ParentNode | null
   signal?: AbortSignal
   isActiveModulePreload?: (node: Node) => boolean
+  reconciliationTracker?: ReconciliationTracker
 }
 
 type FrameInit = {
@@ -260,7 +263,7 @@ export type Frame = {
 
 type RenderOptions = {
   flushKind?: FlushKind
-  initialHydrationTracker?: InitialHydrationTracker
+  reconciliationTracker?: ReconciliationTracker
   signal?: AbortSignal
   contentStatus?: 'pending' | 'resolved'
   data?: RmxData
@@ -385,7 +388,22 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       }
 
       if (isRenderAborted(options.signal)) return
-      contentRoot.render(content)
+      let previousServerFrameReload = runtime.serverFrameReload
+      if (options.signal) {
+        runtime.serverFrameReload = {
+          signal: options.signal,
+          reconciliationTracker: options.reconciliationTracker,
+        }
+      }
+
+      try {
+        contentRoot.render(content)
+        await new Promise<void>((resolve) => context.scheduler.enqueueCommitPhase([resolve]))
+      } finally {
+        runtime.serverFrameReload = previousServerFrameReload
+      }
+
+      if (isRenderAborted(options.signal)) return
       displayedContentStatus = options.contentStatus ?? 'resolved'
       return
     }
@@ -419,7 +437,11 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       modulePreloader.consumePreloadLinks(parsed)
       let responseData = options.data
       mergeRmxDataFromDocument(responseData, parsed)
-      let responseContext = { ...context, data: responseData }
+      let responseContext = {
+        ...context,
+        data: responseData,
+        reconciliationTracker: options.reconciliationTracker,
+      }
       context.styleManager.adoptServerStyles(
         collectFrameServerStyleTags(createElementContainer(parsed)),
       )
@@ -447,7 +469,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       scheduleHydrationInContainer(
         bodyContainer,
         responseContext,
-        options.initialHydrationTracker,
+        options.reconciliationTracker,
         options.signal,
       )
       await createSubFrames(bodyContainer.childNodes, responseContext, options)
@@ -465,7 +487,11 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     removeEmptyHeads(fragment)
     let responseData = options.data
     mergeRmxDataFromFragment(responseData, fragment)
-    let responseContext = { ...context, data: responseData }
+    let responseContext = {
+      ...context,
+      data: responseData,
+      reconciliationTracker: options.reconciliationTracker,
+    }
 
     let nextContainer = createContainer(fragment)
 
@@ -478,11 +504,10 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       signal: options.signal,
     })
 
-    if (isRenderAborted(options.signal)) return
     scheduleHydrationInContainer(
       container,
       responseContext,
-      options.initialHydrationTracker,
+      options.reconciliationTracker,
       options.signal,
     )
     await createSubFrames(container.childNodes, responseContext, options)
@@ -532,11 +557,11 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
   }
 
   async function hydrateInitial(): Promise<void> {
-    let initialHydrationTracker = createInitialHydrationTracker()
+    let reconciliationTracker = createReconciliationTracker()
 
     context.styleManager.adoptServerStyles(collectFrameServerStyleTags(container))
     let subFramesReady = createSubFrames(container.childNodes, context)
-    scheduleHydrationInContainer(container, context, initialHydrationTracker)
+    scheduleHydrationInContainer(container, context, reconciliationTracker)
 
     try {
       await subFramesReady
@@ -544,11 +569,11 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       if (disposed || context.lifecycleSignal.aborted) return
 
       if (currentMarker?.status === 'pending') {
-        await watchPendingFrameTemplate(currentMarker, initialHydrationTracker)
+        await watchPendingFrameTemplate(currentMarker, reconciliationTracker)
       }
 
-      initialHydrationTracker.finalize()
-      await initialHydrationTracker.ready()
+      reconciliationTracker.finalize()
+      await reconciliationTracker.ready()
     } finally {
       clearRmxData(context.data)
     }
@@ -615,7 +640,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     if (marker.status === 'pending') {
       await watchPendingFrameTemplate(
         marker,
-        options?.initialHydrationTracker,
+        options?.reconciliationTracker,
         options?.signal,
         isInheritedReload
           ? () => {
@@ -736,7 +761,13 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       if (reloadController !== controller || controller.signal.aborted) {
         return { signal: controller.signal }
       }
-      await render(content, { signal: controller.signal })
+      let reconciliationTracker = createReconciliationTracker()
+      await render(content, {
+        signal: controller.signal,
+        reconciliationTracker,
+      })
+      reconciliationTracker.finalize()
+      await reconciliationTracker.ready()
       return {
         signal: controller.signal,
         redirectedTo:
@@ -825,7 +856,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
 
   async function watchPendingFrameTemplate(
     marker: FrameMarkerData,
-    initialHydrationTracker?: InitialHydrationTracker,
+    reconciliationTracker?: ReconciliationTracker,
     signal?: AbortSignal,
     onResolved?: () => void,
   ): Promise<void> {
@@ -838,7 +869,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     let early = consumeFrameTemplate(marker.id) ?? getEarlyFrameContent(marker.id)
     if (early) {
       clearPendingFrameTemplateWatch()
-      await render(early, { initialHydrationTracker, signal, contentStatus: 'resolved' })
+      await render(early, { reconciliationTracker, signal, contentStatus: 'resolved' })
       if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted) onResolved?.()
       return
     }
@@ -872,7 +903,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     let buffered = consumeFrameTemplate(marker.id)
     if (buffered) {
       clearPendingFrameTemplateWatch()
-      await render(buffered, { initialHydrationTracker, signal, contentStatus: 'resolved' })
+      await render(buffered, { reconciliationTracker, signal, contentStatus: 'resolved' })
       if (!disposed && !context.lifecycleSignal.aborted && !signal?.aborted) onResolved?.()
     }
   }
@@ -910,42 +941,60 @@ export function createFrameRuntime(init: {
   }
 }
 
-type InitialHydrationTracker = {
+export type ReconciliationTracker = {
   track: () => () => void
+  waitFor: (task: Promise<void>) => void
   finalize: () => void
   ready: () => Promise<void>
 }
 
-function createInitialHydrationTracker(): InitialHydrationTracker {
+function createReconciliationTracker(): ReconciliationTracker {
   let pending = 0
   let finalized = false
+  let failed = false
+  let failure: unknown
 
   let resolveReady: (() => void) | undefined
-  let readyPromise = new Promise<void>((resolve) => {
+  let rejectReady: ((error: unknown) => void) | undefined
+  let readyPromise = new Promise<void>((resolve, reject) => {
     resolveReady = resolve
+    rejectReady = reject
   })
 
-  function maybeResolve() {
-    if (finalized && pending === 0) {
-      resolveReady?.()
-      resolveReady = undefined
+  function maybeSettle() {
+    if (!finalized || pending !== 0) return
+    if (failed) rejectReady?.(failure)
+    else resolveReady?.()
+    resolveReady = undefined
+    rejectReady = undefined
+  }
+
+  function track(): () => void {
+    pending++
+    let completed = false
+    return () => {
+      if (completed) return
+      completed = true
+      pending--
+      maybeSettle()
     }
   }
 
   return {
-    track() {
-      pending++
-      let completed = false
-      return () => {
-        if (completed) return
-        completed = true
-        pending--
-        maybeResolve()
-      }
+    track,
+    waitFor(task) {
+      let complete = track()
+      void task.then(complete, (error) => {
+        if (!failed) {
+          failed = true
+          failure = error
+        }
+        complete()
+      })
     },
     finalize() {
       finalized = true
-      maybeResolve()
+      maybeSettle()
     },
     ready() {
       return readyPromise
@@ -1006,7 +1055,7 @@ function collectOwnedServerStyleTags(nodes: Node[], styles: HTMLStyleElement[]):
       continue
     }
 
-    if (node instanceof HTMLStyleElement && node.matches('style[data-rmx]')) {
+    if (node instanceof HTMLStyleElement && node.matches('style[data-rmx-style]')) {
       styles.push(node)
       continue
     }
@@ -1049,7 +1098,7 @@ function copyOwnRmxEntries<T>(target: Record<string, T>, source: Record<string,
 function scheduleHydrationInContainer(
   container: FrameContainer,
   context: FrameContext,
-  initialHydrationTracker?: InitialHydrationTracker,
+  reconciliationTracker?: ReconciliationTracker,
   signal?: AbortSignal,
 ): void {
   let hydrationMarkers = findHydrationMarkers(container)
@@ -1061,7 +1110,7 @@ function scheduleHydrationInContainer(
   for (let marker of hydrationMarkers) {
     let entry = hydrationData[marker.id]
     if (!entry) continue
-    scheduleHydrationMarker(marker, entry, context, initialHydrationTracker, signal)
+    scheduleHydrationMarker(marker, entry, context, reconciliationTracker, signal)
   }
 }
 
@@ -1069,12 +1118,12 @@ function scheduleHydrationMarker(
   marker: HydrationMarker,
   entry: HydrationData,
   context: FrameContext,
-  initialHydrationTracker?: InitialHydrationTracker,
+  reconciliationTracker?: ReconciliationTracker,
   signal?: AbortSignal,
 ): void {
   if (signal?.aborted || context.lifecycleSignal.aborted) return
 
-  let done = initialHydrationTracker?.track()
+  let done = reconciliationTracker?.track()
   let key = `${entry.moduleUrl}#${entry.exportName}`
   let identity: ClientEntryIdentity = {
     moduleUrl: entry.moduleUrl,
@@ -1216,30 +1265,40 @@ function hydrateRegion(
 
   context.pendingClientEntries.delete(start)
 
-  // The same marker can be discovered by overlapping hydration passes
-  // (for example, document root + nested frame root). Reuse the existing
-  // virtual root instead of redefining the marker property.
-  let owner = getClientEntryBoundaryOwner(start)
-  if (owner) {
+  // During a server frame reload, expose the reload signal and reconciliation
+  // tracker to client frames created while this entry renders so blocking
+  // frames keep the reload pending until their content arrives.
+  let renderEntry = (root: Pick<VirtualRoot, 'render'>) => {
     if (!signal) {
-      owner.root.render(vElement)
+      root.render(vElement)
       return
     }
 
     let frameRuntime = context.frame.$runtime
     invariant(
       isFrameRuntime(frameRuntime),
-      'Expected frame runtime while rendering a preserved client entry',
+      'Expected frame runtime while rendering a client entry during a reload',
     )
 
     let previousServerFrameReload = frameRuntime.serverFrameReload
 
-    frameRuntime.serverFrameReload = { signal }
+    frameRuntime.serverFrameReload = {
+      signal,
+      reconciliationTracker: context.reconciliationTracker,
+    }
     try {
-      owner.root.render(vElement)
+      root.render(vElement)
     } finally {
       frameRuntime.serverFrameReload = previousServerFrameReload
     }
+  }
+
+  // The same marker can be discovered by overlapping hydration passes
+  // (for example, document root + nested frame root). Reuse the existing
+  // virtual root instead of redefining the marker property.
+  let owner = getClientEntryBoundaryOwner(start)
+  if (owner) {
+    renderEntry(owner.root)
     return
   }
 
@@ -1254,7 +1313,7 @@ function hydrateRegion(
   })
 
   setClientEntryBoundaryOwner(start, identity, root)
-  root.render(vElement)
+  renderEntry(root)
 }
 
 async function createSubFrames(
@@ -1302,6 +1361,9 @@ async function createSubFrames(
             namedFrames: context.namedFrames,
           })
           context.frameInstances.set(node, subFrame)
+          if (frameMarker.status === 'resolved') {
+            tasks.push(subFrame.ready())
+          }
         }
       }
 

package/src/runtime/mixins/link-mixin.ts

@@ -34,10 +34,10 @@ export const link: MixinFactory<
         return renderMixinElement(handle.element, {
           ...(props ?? {}),
           href,
-          ...(options?.target == null ? {} : { 'rmx-target': options.target }),
-          ...(options?.src == null ? {} : { 'rmx-src': options.src }),
-          ...(options?.history == null ? {} : { 'rmx-history': options.history }),
-          ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
+          ...(options?.target == null ? {} : { 'data-rmx-target': options.target }),
+          ...(options?.src == null ? {} : { 'data-rmx-src': options.src }),
+          ...(options?.history == null ? {} : { 'data-rmx-history': options.history }),
+          ...(options?.resetScroll === false ? { 'data-rmx-reset-scroll': 'false' } : {}),
         })
       }
 

package/src/runtime/mixins/mixin.ts

@@ -107,6 +107,15 @@ type MixinRuntimeType<
   type: string,
 ) => ((...args: [...args, currentProps: props]) => MixinReturn<node, props>) | void
 
+type MixinDescriptorType<
+  args extends unknown[] = [],
+  node extends EventTarget = Element,
+  props extends ElementProps = ElementProps,
+> = <boundNode extends node>(
+  handle: MixinHandle<boundNode, props>,
+  type: string,
+) => ((...args: [...args, currentProps: props]) => MixinReturn<boundNode, props>) | void
+
 /**
  * Public mixin setup function signature.
  */
@@ -127,7 +136,7 @@ export type MixinDescriptor<
   args extends unknown[] = [],
   props extends ElementProps = ElementProps,
 > = {
-  type: MixinRuntimeType<args, node, props>
+  type: MixinDescriptorType<args, node, props>
   args: args
   readonly __node?: (node: node) => void
 }
@@ -149,13 +158,22 @@ type NestedMixValue<descriptor, depth extends number = 4> = depth extends 0
       | NullableMixValue<descriptor>
       | ReadonlyArray<NestedMixValue<descriptor, PreviousMixDepth[depth]>>
 
+type MixinInputDescriptor<
+  in node extends EventTarget = Element,
+  props extends ElementProps = ElementProps,
+> = {
+  type: (handle: MixinHandle<node, props>, type: string) => unknown
+  args: readonly unknown[]
+  readonly __node?: (node: node) => void
+}
+
 /**
  * Accepted authoring shape for the `mix` prop on host elements.
  */
 export type MixInput<
   node extends EventTarget = Element,
   props extends ElementProps = ElementProps,
-> = NestedMixValue<MixinDescriptor<node, any, props>>
+> = NestedMixValue<MixinInputDescriptor<node, props>>
 
 /**
  * Accepted value shape for the `mix` prop.
@@ -163,7 +181,7 @@ export type MixInput<
 export type MixValue<
   node extends EventTarget = Element,
   props extends ElementProps = ElementProps,
-> = MixinDescriptor<node, any, props> | ReadonlyArray<MixinDescriptor<node, any, props>>
+> = MixinInputDescriptor<node, props> | ReadonlyArray<MixinInputDescriptor<node, props>>
 
 type MixinReturn<node extends EventTarget = Element, props extends ElementProps = ElementProps> =
   | void
@@ -259,7 +277,11 @@ export function createMixin<
   return <boundNode extends node = node>(
     ...args: RebindTuple<args, node, boundNode>
   ): MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props> => ({
-    type: type as unknown as MixinRuntimeType<RebindTuple<args, node, boundNode>, boundNode, props>,
+    type: type as unknown as MixinDescriptorType<
+      RebindTuple<args, node, boundNode>,
+      boundNode,
+      props
+    >,
     args: args as RebindTuple<args, node, boundNode>,
   })
 }

package/src/runtime/mixins/on-mixin.ts

@@ -1,7 +1,7 @@
 import { createMixin, type MixinType } from './mixin.ts'
 import type { ElementProps } from '../jsx.ts'
 import type { MixinDescriptor } from './mixin.ts'
-import type { EnsureEvent, EventMap } from '../event-listeners.ts'
+import type { EnsureEvent, EventMap } from '../event-types.ts'
 
 type SignaledListener<event extends Event> = (
   event: event,

package/src/runtime/module-preloader.ts

@@ -1,4 +1,4 @@
-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
@@ -36,7 +36,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 +74,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)