@remix-run/ui 0.1.2 → 0.3.0

package/src/runtime/frame.ts

@@ -129,6 +129,7 @@ export type FrameContext = {
   namedFrames: Map<string, FrameHandle>
   regionTailRef?: ChildNode | null
   regionParent?: ParentNode | null
+  signal?: AbortSignal
 }
 
 type FrameInit = {
@@ -153,6 +154,15 @@ export type Frame = {
   render: (content: InternalFrameContent, options?: RenderOptions) => Promise<void>
   ready: () => Promise<void>
   flush: () => void
+  clearPendingTemplateWatch: () => void
+  isDisplayingResolvedContent: () => boolean
+  startInheritedReload: (signal?: AbortSignal) => void
+  updateMarker: (marker: FrameMarkerData, options?: RenderOptions) => Promise<void>
+  renderMarkerContent: (
+    marker: FrameMarkerData,
+    content: InternalFrameContent,
+    options?: RenderOptions,
+  ) => Promise<void>
   dispose: () => void
   handle: FrameHandle
 }
@@ -161,15 +171,21 @@ type RenderOptions = {
   flushKind?: FlushKind
   initialHydrationTracker?: InitialHydrationTracker
   signal?: AbortSignal
+  contentStatus?: 'pending' | 'resolved'
 }
 
 export function createFrame(root: FrameRoot, init: FrameInit): Frame {
   let container = createContainer(root)
-  let observers: MutationObserver[] = []
-  let subscriptions: Array<() => void> = []
   let contentRoot: VirtualRoot | undefined
   let reloadController: AbortController | undefined
   let styleManager = init.styleManager ?? createStyleManager()
+  let currentMarker = init.marker
+  let displayedContentStatus: 'pending' | 'resolved' = init.marker?.status ?? 'resolved'
+  let pendingTemplateMarkerId: string | undefined
+  let pendingTemplateObserver: MutationObserver | undefined
+  let pendingTemplateUnsubscribe: (() => void) | undefined
+  let inheritedReloadPending = false
+  let inheritedReloadAbortUnsubscribe: (() => void) | undefined
 
   // Merge any rmx-data found in the current document once at startup.
   mergeRmxDataFromDocument(init.data, container.doc)
@@ -184,6 +200,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       let controller = new AbortController()
       reloadController = controller
       frame.dispatchEvent(new Event('reloadStart'))
+      startSubFrameInheritedReloads(getContentNodes(), controller.signal)
       try {
         let content = await init.resolveFrame(frame.src, controller.signal, frameName)
         if (reloadController !== controller || controller.signal.aborted) return controller.signal
@@ -250,6 +267,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
 
       if (options?.signal?.aborted) return
       contentRoot.render(content)
+      displayedContentStatus = options?.contentStatus ?? 'resolved'
       return
     }
 
@@ -290,17 +308,20 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
         ...context,
         regionParent: container.doc.documentElement,
         regionTailRef: null,
+        signal: options?.signal,
       })
       diffNodes([container.doc.body], [parsed.body], {
         ...context,
         regionParent: container.doc.documentElement,
         regionTailRef: null,
+        signal: options?.signal,
       })
 
       let bodyContainer = createElementContainer(container.doc.body)
       if (options?.signal?.aborted) return
       scheduleHydrationInContainer(bodyContainer, context, options?.initialHydrationTracker)
-      createSubFrames(bodyContainer.childNodes, context)
+      await createSubFrames(bodyContainer.childNodes, context, options)
+      displayedContentStatus = options?.contentStatus ?? 'resolved'
       return
     }
 
@@ -320,11 +341,13 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       ...context,
       regionTailRef: container.regionTailRef,
       regionParent: container.regionParent,
+      signal: options?.signal,
     })
 
     if (options?.signal?.aborted) return
     scheduleHydrationInContainer(container, context, options?.initialHydrationTracker)
-    createSubFrames(container.childNodes, context)
+    await createSubFrames(container.childNodes, context, options)
+    displayedContentStatus = options?.contentStatus ?? 'resolved'
   }
 
   function createFrameContentRoot(): VirtualRoot {
@@ -368,30 +391,11 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     let initialHydrationTracker = createInitialHydrationTracker()
 
     context.styleManager.replaceServerStyles(collectFrameServerStyleTags(container))
-    createSubFrames(container.childNodes, context)
+    await createSubFrames(container.childNodes, context)
     scheduleHydrationInContainer(container, context, initialHydrationTracker)
 
-    if (init.marker?.status === 'pending') {
-      let markerId = init.marker.id
-      let early = consumeFrameTemplate(markerId) ?? getEarlyFrameContent(markerId)
-      if (early) {
-        await render(early, { initialHydrationTracker })
-      } else {
-        let observer = setupTemplateObserver()
-        let unsubscribe = subscribeFrameTemplate(markerId, async (fragment) => {
-          unsubscribe()
-          await render(fragment)
-          observer.disconnect()
-        })
-        subscriptions.push(unsubscribe)
-        let buffered = consumeFrameTemplate(markerId)
-        if (buffered) {
-          unsubscribe()
-          await render(buffered)
-          observer.disconnect()
-        }
-        observers.push(observer)
-      }
+    if (currentMarker?.status === 'pending') {
+      await watchPendingFrameTemplate(currentMarker, initialHydrationTracker)
     }
 
     initialHydrationTracker.finalize()
@@ -403,16 +407,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     reloadController = undefined
     contentRoot?.dispose()
     contentRoot = undefined
-
-    // Disconnect any MutationObservers waiting for templates.
-    for (let observer of observers) {
-      observer.disconnect()
-    }
-    observers.length = 0
-    for (let unsubscribe of subscriptions) {
-      unsubscribe()
-    }
-    subscriptions.length = 0
+    clearPendingFrameTemplateWatch()
 
     // Remove hydrated virtual roots in this frame's region.
     removeVirtualRoots(container.childNodes)
@@ -434,9 +429,173 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     render,
     ready: () => readyPromise,
     flush: () => context.scheduler.dequeue(),
+    clearPendingTemplateWatch: clearPendingFrameTemplateWatch,
+    isDisplayingResolvedContent: () => displayedContentStatus === 'resolved',
+    startInheritedReload,
+    updateMarker,
+    renderMarkerContent,
     dispose,
     handle: frame,
   }
+
+  async function updateMarker(marker: FrameMarkerData, options?: RenderOptions): Promise<void> {
+    if (options?.signal?.aborted) return
+    let previousMarker = currentMarker
+    let isInheritedReload = previousMarker !== undefined && previousMarker.id !== marker.id
+    currentMarker = marker
+
+    if (isInheritedReload) {
+      startInheritedReload(options?.signal)
+    }
+
+    if (marker.status === 'pending') {
+      await watchPendingFrameTemplate(
+        marker,
+        options?.initialHydrationTracker,
+        options?.signal,
+        isInheritedReload
+          ? () => {
+              completeInheritedReload()
+            }
+          : undefined,
+      )
+    } else {
+      clearPendingFrameTemplateWatch()
+      if (isInheritedReload && !options?.signal?.aborted) {
+        completeInheritedReload()
+      }
+    }
+  }
+
+  async function renderMarkerContent(
+    marker: FrameMarkerData,
+    content: InternalFrameContent,
+    options?: RenderOptions,
+  ): Promise<void> {
+    if (options?.signal?.aborted) return
+    let previousMarker = currentMarker
+    let isInheritedReload = previousMarker !== undefined && previousMarker.id !== marker.id
+    currentMarker = marker
+
+    if (isInheritedReload) {
+      startInheritedReload(options?.signal)
+    }
+
+    clearPendingFrameTemplateWatch()
+    await render(content, { ...options, contentStatus: 'resolved' })
+
+    if (isInheritedReload && !options?.signal?.aborted) {
+      completeInheritedReload()
+    }
+  }
+
+  function startInheritedReload(signal?: AbortSignal): void {
+    if (signal?.aborted) return
+    if (!inheritedReloadPending) {
+      inheritedReloadPending = true
+      frame.dispatchEvent(new Event('reloadStart'))
+      startSubFrameInheritedReloads(getContentNodes(), signal)
+    }
+
+    inheritedReloadAbortUnsubscribe?.()
+    inheritedReloadAbortUnsubscribe = undefined
+    if (signal) {
+      let abort = () => completeInheritedReload()
+      signal.addEventListener('abort', abort, { once: true })
+      inheritedReloadAbortUnsubscribe = () => {
+        signal.removeEventListener('abort', abort)
+      }
+    }
+  }
+
+  function completeInheritedReload(): void {
+    if (!inheritedReloadPending) return
+    inheritedReloadPending = false
+    inheritedReloadAbortUnsubscribe?.()
+    inheritedReloadAbortUnsubscribe = undefined
+    frame.dispatchEvent(new Event('reloadComplete'))
+  }
+
+  function startSubFrameInheritedReloads(nodes: Node[], signal?: AbortSignal): void {
+    for (let i = 0; i < nodes.length; i++) {
+      if (signal?.aborted) break
+
+      let node = nodes[i]
+
+      if (isFrameStart(node)) {
+        let end = findEndMarker(node, isFrameStart, isFrameEnd)
+        context.frameInstances.get(node)?.startInheritedReload(signal)
+        i = nodes.indexOf(end)
+        continue
+      }
+
+      if (node.childNodes && node.childNodes.length > 0) {
+        startSubFrameInheritedReloads(Array.from(node.childNodes), signal)
+      }
+    }
+  }
+
+  function clearPendingFrameTemplateWatch(): void {
+    pendingTemplateUnsubscribe?.()
+    pendingTemplateUnsubscribe = undefined
+    pendingTemplateObserver?.disconnect()
+    pendingTemplateObserver = undefined
+    pendingTemplateMarkerId = undefined
+  }
+
+  async function watchPendingFrameTemplate(
+    marker: FrameMarkerData,
+    initialHydrationTracker?: InitialHydrationTracker,
+    signal?: AbortSignal,
+    onResolved?: () => void,
+  ): Promise<void> {
+    if (signal?.aborted) return
+    if (pendingTemplateMarkerId === marker.id) return
+
+    clearPendingFrameTemplateWatch()
+    pendingTemplateMarkerId = marker.id
+
+    let early = consumeFrameTemplate(marker.id) ?? getEarlyFrameContent(marker.id)
+    if (early) {
+      clearPendingFrameTemplateWatch()
+      await render(early, { initialHydrationTracker, signal, contentStatus: 'resolved' })
+      if (!signal?.aborted) onResolved?.()
+      return
+    }
+
+    if (signal?.aborted) {
+      clearPendingFrameTemplateWatch()
+      return
+    }
+
+    let observer = setupTemplateObserver()
+    pendingTemplateObserver = observer
+    let unsubscribe = subscribeFrameTemplate(marker.id, async (fragment) => {
+      if (signal?.aborted) return
+      if (pendingTemplateMarkerId !== marker.id) return
+      clearPendingFrameTemplateWatch()
+      await render(fragment, { signal, contentStatus: 'resolved' })
+      if (!signal?.aborted) onResolved?.()
+    })
+    pendingTemplateUnsubscribe = unsubscribe
+
+    signal?.addEventListener(
+      'abort',
+      () => {
+        if (pendingTemplateMarkerId === marker.id) {
+          clearPendingFrameTemplateWatch()
+        }
+      },
+      { once: true },
+    )
+
+    let buffered = consumeFrameTemplate(marker.id)
+    if (buffered) {
+      clearPendingFrameTemplateWatch()
+      await render(buffered, { initialHydrationTracker, signal, contentStatus: 'resolved' })
+      if (!signal?.aborted) onResolved?.()
+    }
+  }
 }
 
 export function createFrameRuntime(init: {
@@ -752,16 +911,32 @@ function hydrateRegion(
   root.render(vElement)
 }
 
-function createSubFrames(nodes: Node[], context: FrameContext) {
+async function createSubFrames(
+  nodes: Node[],
+  context: FrameContext,
+  options?: RenderOptions,
+): Promise<void> {
+  let tasks: Promise<void>[] = []
+
   for (let i = 0; i < nodes.length; i++) {
+    if (options?.signal?.aborted) break
+
     let node = nodes[i]
 
     if (isFrameStart(node)) {
       let end = findEndMarker(node, isFrameStart, isFrameEnd)
+      let existingFrame = context.frameInstances.get(node)
+      let id = getFrameId(node)
+      let marker = context.data.f?.[id]
 
-      if (!context.frameInstances.has(node)) {
-        let id = getFrameId(node)
-        let marker = context.data.f?.[id]
+      if (existingFrame) {
+        if (marker) {
+          let frameMarker: FrameMarkerData = { ...marker, id }
+          tasks.push(existingFrame.updateMarker(frameMarker, options))
+        } else {
+          existingFrame.clearPendingTemplateWatch()
+        }
+      } else {
         if (marker) {
           let frameMarker: FrameMarkerData = { ...marker, id }
           let subFrame = createFrame([node, end], {
@@ -788,9 +963,11 @@ function createSubFrames(nodes: Node[], context: FrameContext) {
     }
 
     if (node.childNodes && node.childNodes.length > 0) {
-      createSubFrames(Array.from(node.childNodes), context)
+      tasks.push(createSubFrames(Array.from(node.childNodes), context, options))
     }
   }
+
+  await Promise.all(tasks)
 }
 
 function isHydrationMarkerLive(marker: HydrationMarker, context: FrameContext): boolean {

package/src/runtime/jsx.ts

@@ -44,7 +44,7 @@ export type Renderable = RemixElement | string | number | bigint | boolean | nul
  * Particularly useful for `props.children`.
  *
  * ```tsx
- * function MyComponent({ children }: { children: RemixNode }) {}
+ * function MyComponent(handle: Handle<{ children: RemixNode }>) {}
  * ```
  */
 export type RemixNode = Renderable | RemixNode[]
@@ -77,10 +77,6 @@ type MixinElementType = ((
   __rmxMixinElementType: string
 }
 
-type MergeComponentProps<handleProps, renderProps> = [handleProps] extends [Record<string, never>]
-  ? renderProps
-  : handleProps & renderProps
-
 /**
  * Get the props for a specific element type.
  *
@@ -120,7 +116,7 @@ declare global {
       // host elements
       | keyof IntrinsicElements
       // Factory component
-      | ((handle: Handle<any, any>) => RenderFn<any>)
+      | ((handle: Handle<any, any>) => RenderFn)
       // Mixin element used internally by mixin render callbacks
       | MixinElementType
 
@@ -134,11 +130,11 @@ declare global {
 
     type LibraryManagedAttributes<component, props> = component extends MixinElementType
       ? ExpandMixProp<Parameters<ReturnType<component>>[0]>
-      : component extends (handle: Handle<infer P, any>) => RenderFn<infer R>
-        ? // It's a ComponentFactory - infer props from the handle
-          ExpandMixProp<MergeComponentProps<P, R>>
-        : component extends () => RenderFn<infer P>
-          ? ExpandMixProp<P>
+      : component extends () => RenderFn
+        ? ExpandMixProp<Record<string, never>>
+        : component extends (handle: Handle<infer P, any>) => RenderFn
+          ? // It's a ComponentFactory - infer props from the handle
+            ExpandMixProp<P>
           : // Otherwise use props as-is (simple function component)
             ExpandMixProp<props>
 

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

@@ -1,4 +1,4 @@
-import { createMixin, renderMixinElement } from './mixin.ts'
+import { createMixin, renderMixinElement, type MixinFactory } from './mixin.ts'
 import { navigate } from '../navigation.ts'
 import { on } from './on-mixin.ts'
 import type { ElementProps } from '../jsx.ts'
@@ -21,108 +21,110 @@ const nativeLinkHostTypes = new Set(['a', 'area'])
 /**
  * Adds client-side navigation behavior to anchor-like elements.
  */
-export const link = createMixin<
+export const link: MixinFactory<
   HTMLElement,
   [href: string, options?: NavigationOptions],
   LinkCurrentProps
->((handle, hostType) => {
-  let suppressKeyboardClick = false
+> = createMixin<HTMLElement, [href: string, options?: NavigationOptions], LinkCurrentProps>(
+  (handle, hostType) => {
+    let suppressKeyboardClick = false
 
-  return (href, options, props: LinkCurrentProps) => {
-    if (nativeLinkHostTypes.has(hostType)) {
-      return renderMixinElement(handle.element, {
-        ...(props ?? {}),
-        href,
-        ...(options?.target == null ? {} : { 'rmx-target': options.target }),
-        ...(options?.src == null ? {} : { 'rmx-src': options.src }),
-        ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
-      })
-    }
-
-    let nextProps = { ...props }
-    if (nextProps.role == null) {
-      nextProps.role = 'link'
-    }
-    if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
-      nextProps['aria-disabled'] = 'true'
-    }
-    if (hostType === 'button' && nextProps.type == null) {
-      nextProps.type = 'button'
-    }
-    if (
-      hostType !== 'button' &&
-      nextProps.tabIndex == null &&
-      nextProps.tabindex == null &&
-      nextProps.contentEditable == null &&
-      nextProps.contenteditable == null
-    ) {
-      nextProps.tabIndex = 0
-    }
+    return (href, options, props: LinkCurrentProps) => {
+      if (nativeLinkHostTypes.has(hostType)) {
+        return renderMixinElement(handle.element, {
+          ...(props ?? {}),
+          href,
+          ...(options?.target == null ? {} : { 'rmx-target': options.target }),
+          ...(options?.src == null ? {} : { 'rmx-src': options.src }),
+          ...(options?.resetScroll === false ? { 'rmx-reset-scroll': 'false' } : {}),
+        })
+      }
 
-    return renderMixinElement(handle.element, {
-      ...nextProps,
-      mix: [
-        on('click', (event) => {
-          if (event.detail === 0 && suppressKeyboardClick) {
-            suppressKeyboardClick = false
-            event.preventDefault()
-            return
-          }
+      let nextProps = { ...props }
+      if (nextProps.role == null) {
+        nextProps.role = 'link'
+      }
+      if (nextProps.disabled === true && nextProps['aria-disabled'] == null) {
+        nextProps['aria-disabled'] = 'true'
+      }
+      if (hostType === 'button' && nextProps.type == null) {
+        nextProps.type = 'button'
+      }
+      if (
+        hostType !== 'button' &&
+        nextProps.tabIndex == null &&
+        nextProps.tabindex == null &&
+        nextProps.contentEditable == null &&
+        nextProps.contenteditable == null
+      ) {
+        nextProps.tabIndex = 0
+      }
 
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
-            event.preventDefault()
-            return
-          }
-          if (event.button !== 0) return
+      return renderMixinElement(handle.element, {
+        ...nextProps,
+        mix: [
+          on('click', (event) => {
+            if (event.detail === 0 && suppressKeyboardClick) {
+              suppressKeyboardClick = false
+              event.preventDefault()
+              return
+            }
 
-          event.preventDefault()
-          if (event.metaKey || event.ctrlKey) {
-            globalThis.open(href, '_blank')
-            return
-          }
+            suppressKeyboardClick = false
+            if (isDisabledElement(event.currentTarget)) {
+              event.preventDefault()
+              return
+            }
+            if (event.button !== 0) return
 
-          void navigate(href, options)
-        }),
-        on('auxclick', (event) => {
-          suppressKeyboardClick = false
-          if (isDisabledElement(event.currentTarget)) {
             event.preventDefault()
-            return
-          }
-          if (event.button !== 1) return
+            if (event.metaKey || event.ctrlKey) {
+              globalThis.open(href, '_blank')
+              return
+            }
 
-          event.preventDefault()
-          globalThis.open(href, '_blank')
-        }),
-        on('keydown', (event) => {
-          if (event.key === 'Enter') {
-            if (event.repeat) return
+            void navigate(href, options)
+          }),
+          on('auxclick', (event) => {
+            suppressKeyboardClick = false
             if (isDisabledElement(event.currentTarget)) {
               event.preventDefault()
               return
             }
+            if (event.button !== 1) return
 
-            suppressKeyboardClick = hostType === 'button'
             event.preventDefault()
-            void navigate(href, options)
-            return
-          }
+            globalThis.open(href, '_blank')
+          }),
+          on('keydown', (event) => {
+            if (event.key === 'Enter') {
+              if (event.repeat) return
+              if (isDisabledElement(event.currentTarget)) {
+                event.preventDefault()
+                return
+              }
 
-          if (hostType === 'button' && event.key === ' ') {
-            suppressKeyboardClick = true
-            event.preventDefault()
-          }
-        }),
-        on('keyup', (event) => {
-          if (hostType === 'button' && event.key === ' ') {
-            event.preventDefault()
-          }
-        }),
-      ],
-    })
-  }
-})
+              suppressKeyboardClick = hostType === 'button'
+              event.preventDefault()
+              void navigate(href, options)
+              return
+            }
+
+            if (hostType === 'button' && event.key === ' ') {
+              suppressKeyboardClick = true
+              event.preventDefault()
+            }
+          }),
+          on('keyup', (event) => {
+            if (hostType === 'button' && event.key === ' ') {
+              event.preventDefault()
+            }
+          }),
+        ],
+      })
+    }
+  },
+)
 
 function isDisabledElement(node: Element) {
   return (

package/src/runtime/mixins/mixin.ts

@@ -130,6 +130,14 @@ export type MixinDescriptor<
   readonly __node?: (node: node) => void
 }
 
+export type MixinFactory<
+  node extends EventTarget = Element,
+  args extends unknown[] = [],
+  props extends ElementProps = ElementProps,
+> = <boundNode extends node = node>(
+  ...args: RebindTuple<args, node, boundNode>
+) => MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props>
+
 type PreviousMixDepth = [0, 0, 1, 2, 3, 4]
 type FalsyMixValue = false | 0 | 0n | '' | null | undefined
 type NullableMixValue<descriptor> = descriptor | FalsyMixValue
@@ -244,7 +252,7 @@ export function createMixin<
   node extends EventTarget = Element,
   args extends unknown[] = [],
   props extends ElementProps = ElementProps,
->(type: MixinType<node, args, props>) {
+>(type: MixinType<node, args, props>): MixinFactory<node, args, props> {
   return <boundNode extends node = node>(
     ...args: RebindTuple<args, node, boundNode>
   ): MixinDescriptor<boundNode, RebindTuple<args, node, boundNode>, props> => ({

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

@@ -1,4 +1,4 @@
-import { createMixin } from './mixin.ts'
+import { createMixin, type MixinFactory } from './mixin.ts'
 import type { ElementProps } from '../jsx.ts'
 
 /**
@@ -9,8 +9,8 @@ export type RefCallback<node extends EventTarget> = (node: node, signal: AbortSi
 /**
  * Calls a callback when an element is inserted and aborts it when removed.
  */
-export const ref = createMixin<Element, [callback: RefCallback<Element>], ElementProps>(
-  (handle) => {
+export const ref: MixinFactory<Element, [callback: RefCallback<Element>], ElementProps> =
+  createMixin<Element, [callback: RefCallback<Element>], ElementProps>((handle) => {
     let controller: AbortController | undefined
 
     handle.addEventListener('insert', (event) => {
@@ -28,5 +28,4 @@ export const ref = createMixin<Element, [callback: RefCallback<Element>], Elemen
       callback = nextCallback
       return handle.element
     }
-  },
-)
+  })