@remix-run/ui 0.2.0 → 0.4.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

@@ -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/reconcile.ts

@@ -340,6 +340,10 @@ function enqueueMixinBindingUpdate(
       let prevProps = getHostProps(node)
       let nextProps = resolveNodeMixProps(node, this.frame, this.scheduler, state)
       patchHostProps(prevProps, nextProps, this.node)
+      if (node._controlledState || shouldTrackControlledReflection(nextProps)) {
+        ensureControlledReflection(node, this.scheduler)
+        syncControlledReflection(node, nextProps)
+      }
 
       dispatchMixinCommit(state)
       done(state ? getMixinRuntimeSignal(state) : AbortSignal.abort())
@@ -700,10 +704,12 @@ function insert(
     cursor = null
   }
 
-  cursor =
-    node.type === Frame
-      ? skipCommentsExceptFrameStart(cursor ?? null)
-      : skipComments(cursor ?? null)
+  // Preserve frame-start markers for non-Frame nodes too, so a following <Frame>
+  // (e.g. the first child of a bare Fragment at a clientEntry boundary) can still
+  // claim its rmx:f marker during hydration instead of being re-inserted fresh.
+  // A rmx:f marker always belongs to a <Frame>, so no non-Frame node should
+  // consume one.
+  cursor = skipCommentsExceptFrameStart(cursor ?? null)
 
   // Also check after skipComments in case we skipped past the anchor
   if (cursor && anchor && cursor === anchor) {
@@ -1097,7 +1103,7 @@ function resolveClientFrame(node: VNode, runtime: FrameRuntime): void {
   let resolveController = new AbortController()
   node._frameResolveController = resolveController
 
-  Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal))
+  Promise.resolve(runtime.resolveFrame(frameSrc, resolveController.signal, getFrameName(node)))
     .then(async (content) => {
       if (node._frameResolveToken !== token || resolveController.signal.aborted) return
       node._frameFallbackRoot?.dispose()

package/src/runtime/vdom.ts

@@ -172,6 +172,9 @@ export function createRangeRoot(
 export function createRoot(container: HTMLElement, options: VirtualRootOptions = {}): VirtualRoot {
   let vroot: VNode | null = null
   let styles = options.styleManager ?? defaultStyleManager
+  if (container.innerHTML.trim() !== '') {
+    styles.replaceServerStyles(container)
+  }
   let hydrationCursor = container.innerHTML.trim() !== '' ? container.firstChild : undefined
 
   let eventTarget = new TypedEventTarget<VirtualRootEventMap>()

package/src/{components/select → select}/README.md

@@ -2,10 +2,11 @@
 
 `Select` is a button-triggered popup value picker backed by `listbox` and `popover`. Use it when the user should choose one stable string value from a finite set.
 
-## Usage
+## Component Usage
 
 ```tsx
-import { Option, Select, onSelectChange } from 'remix/ui/select'
+import { Option, Select } from 'remix/ui/select'
+import { onSelectChange } from 'remix/ui/select/primitives'
 
 export function FrameworkSelect() {
   return (
@@ -44,34 +45,34 @@ Use `textValue` when closed-trigger typeahead should match a different string fr
 </Select>
 ```
 
+## Primitive Usage
+
 Use the lower-level primitives when the trigger or popup structure needs to be owned by another component. Keep the same provider, trigger, popover, list, option, and hidden-input relationship.
 
 ```tsx
 import type { Handle } from 'remix/ui'
-import * as button from 'remix/ui/button'
-import * as listbox from 'remix/ui/listbox'
 import * as popover from 'remix/ui/popover'
-import * as select from 'remix/ui/select'
+import { triggerStyle } from 'remix/ui/select'
+import * as select from 'remix/ui/select/primitives'
+import { listStyle, optionStyle, surfaceStyle } from './select.styles'
 
 function SelectValue(handle: Handle) {
   let context = handle.context.get(select.Context)
 
-  return () => <span mix={button.labelStyle}>{context.displayedLabel}</span>
+  return () => <span>{context.displayedLabel}</span>
 }
 
 function IssueTypeSelect() {
   return () => (
-    <select.Context defaultLabel="Select a type" name="issueType">
-      <button type="button" mix={[button.baseStyle, select.triggerStyle, select.trigger()]}>
+    <select.Context defaultLabel="Select a type" labelSwapDelayMs={100} name="issueType">
+      <button type="button" mix={[triggerStyle, select.trigger()]}>
         <SelectValue />
       </button>
       <popover.Context>
-        <div mix={[popover.surfaceStyle, select.popover()]}>
-          <div mix={[popover.contentStyle, listbox.listStyle, select.list()]}>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>
-              Bug
-            </div>
-            <div mix={[listbox.optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
+        <div mix={[surfaceStyle, select.popover()]}>
+          <div mix={[listStyle, select.list()]}>
+            <div mix={[optionStyle, select.option({ label: 'Bug', value: 'bug' })]}>Bug</div>
+            <div mix={[optionStyle, select.option({ label: 'Feature', value: 'feature' })]}>
               Feature
             </div>
           </div>
@@ -83,15 +84,24 @@ function IssueTypeSelect() {
 }
 ```
 
-## `select.*`
+## `remix/ui/select`
 
 - `Select`: composed trigger, popover, listbox, option list, and optional hidden input for form participation. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and button props.
-- `Option`: option wrapper that renders the standard check glyph and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `Option`: option component that renders the standard check indicator and label slot. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `triggerStyle`: standard select trigger style for custom trigger composition.
+- `SelectProps` and `SelectOptionProps`: public TypeScript props for the composed APIs.
+
+## `remix/ui/select/primitives`
+
+- `Context`: lower-level provider for custom composition. Accepts `defaultLabel`, `defaultValue`, `disabled`, `name`, and primitive-only `labelSwapDelayMs`; the label-swap delay defaults to `75` milliseconds.
+- `trigger()`: wires the trigger button, open behavior, closed-trigger typeahead, and trigger ARIA attributes.
+- `popover()`: wires the popover surface and keeps its min-width synced to the trigger before open.
+- `list()`: wires the listbox root used inside the popover.
+- `option(...)`: registers one selectable option. Accepts `label`, `value`, optional `disabled`, and optional `textValue`.
+- `hiddenInput()`: mirrors the selected value into a hidden input for form participation.
 - `onSelectChange(...)`: event mixin for the bubbling `SelectChangeEvent`.
-- `Context`, `trigger()`, `popover()`, `list()`, `option(...)`, and `hiddenInput()`: lower-level composition primitives.
-- `triggerStyle`: standard select trigger style.
 - `SelectChangeEvent`: event with `value`, `label`, and `optionId`.
-- `SelectProps`, `SelectContextProps`, and `SelectOptionProps`: public TypeScript props for the composed and lower-level APIs.
+- `SelectContextProps`, `SelectProps`, and `SelectOptionProps`: primitive prop types for custom composition.
 
 ## Behavior Notes