@remix-run/ui 0.1.2 → 0.3.0

package/src/runtime/reconcile.ts

@@ -20,6 +20,7 @@ import {
   isCommittedTextNode,
   isFragmentNode,
   isHostNode,
+  isNonRenderNode,
   isTextNode,
   findContextFromAncestry,
 } from './vnode.ts'
@@ -421,6 +422,10 @@ export function diffVNodes(
     return rootCursor
   }
 
+  if (isNonRenderNode(curr) && isNonRenderNode(next)) {
+    return rootCursor
+  }
+
   if (isCommittedTextNode(curr) && isTextNode(next)) {
     diffText(curr, next, vParent)
     return rootCursor
@@ -444,7 +449,7 @@ export function diffVNodes(
       frame,
       scheduler,
       styles,
-      vParent,
+      next,
       rootTarget,
       undefined,
       anchor,
@@ -484,7 +489,7 @@ function replace(
     return
   }
 
-  let replacementAnchor = findNextSiblingDomAnchor(curr, vParent) ?? anchor
+  let replacementAnchor = findNextSiblingDomAnchor(curr) ?? anchor
   remove(curr, domParent, scheduler, styles)
   insert(next, domParent, frame, scheduler, styles, vParent, rootTarget, replacementAnchor)
 }
@@ -709,6 +714,10 @@ function insert(
     ? (dom: Node) => domParent.insertBefore(dom, anchor)
     : (dom: Node) => domParent.appendChild(dom)
 
+  if (isNonRenderNode(node)) {
+    return cursor
+  }
+
   if (isTextNode(node)) {
     if (cursor instanceof Text) {
       node._parent = vParent
@@ -878,17 +887,7 @@ function insert(
   if (isFragmentNode(node)) {
     // Insert fragment children in order before the same anchor
     for (let child of node._children) {
-      cursor = insert(
-        child,
-        domParent,
-        frame,
-        scheduler,
-        styles,
-        vParent,
-        rootTarget,
-        anchor,
-        cursor,
-      )
+      cursor = insert(child, domParent, frame, scheduler, styles, node, rootTarget, anchor, cursor)
     }
     return cursor
   }
@@ -1275,6 +1274,8 @@ export function renderComponent(
   anchor?: Node,
   cursor?: Node | null,
 ): Node | null | undefined {
+  if (handle.isRemoved()) return cursor
+
   let [element, tasks] = handle.render(next.props)
   let content = toVNode(element)
   let newCursor = diffVNodes(
@@ -2020,15 +2021,23 @@ function shouldDispatchInlineMixinLifecycle(node: Node): boolean {
   return true
 }
 
-export function findNextSiblingDomAnchor(curr: VNode, vParent?: VNode): Node | null {
+export function findNextSiblingDomAnchor(curr: VNode): Node | null {
+  let vParent = curr._parent
   if (!vParent || !Array.isArray(vParent._children)) return null
   let children = vParent._children
+  if (children.length === 0) return findNextSiblingDomAnchor(vParent)
+
   let idx = children.indexOf(curr)
   if (idx === -1) return null
   for (let i = idx + 1; i < children.length; i++) {
     let dom = findFirstDomAnchor(children[i])
     if (dom) return dom
   }
+
+  if (isFragmentNode(vParent)) {
+    return findNextSiblingDomAnchor(vParent)
+  }
+
   return null
 }
 

package/src/runtime/scheduler.ts

@@ -17,7 +17,23 @@ type SchedulerPhaseListener = EventListenerOrEventListenerObject | null
 /**
  * Scheduler API used by the reconciler and frame runtime.
  */
-export type Scheduler = ReturnType<typeof createScheduler>
+export interface Scheduler {
+  enqueue(vnode: CommittedComponentNode, domParent: ParentNode): void
+  enqueueWork(newTasks: EmptyFn[]): void
+  enqueueCommitPhase(newTasks: EmptyFn[]): void
+  enqueueTasks(newTasks: EmptyFn[]): void
+  addEventListener(
+    type: SchedulerPhaseType,
+    listener: SchedulerPhaseListener,
+    options?: AddEventListenerOptions | boolean,
+  ): void
+  removeEventListener(
+    type: SchedulerPhaseType,
+    listener: SchedulerPhaseListener,
+    options?: EventListenerOptions | boolean,
+  ): void
+  dequeue(): void
+}
 
 // Protect against infinite cascading updates (e.g. handle.update() during render)
 const MAX_CASCADING_UPDATES = 50
@@ -38,7 +54,7 @@ export function createScheduler(
   doc: Document,
   rootTarget: EventTarget,
   styles: StyleManager = defaultStyleManager,
-) {
+): Scheduler {
   let documentState = createDocumentState(doc)
   let scheduled = new Map<CommittedComponentNode, ParentNode>()
   let workTasks: EmptyFn[] = []
@@ -53,23 +69,7 @@ export function createScheduler(
     beforeUpdate: 0,
     commit: 0,
   }
-  let scheduler: {
-    enqueue(vnode: CommittedComponentNode, domParent: ParentNode): void
-    enqueueWork(newTasks: EmptyFn[]): void
-    enqueueCommitPhase(newTasks: EmptyFn[]): void
-    enqueueTasks(newTasks: EmptyFn[]): void
-    addEventListener(
-      type: SchedulerPhaseType,
-      listener: SchedulerPhaseListener,
-      options?: AddEventListenerOptions | boolean,
-    ): void
-    removeEventListener(
-      type: SchedulerPhaseType,
-      listener: SchedulerPhaseListener,
-      options?: EventListenerOptions | boolean,
-    ): void
-    dequeue(): void
-  }
+  let scheduler: Scheduler
 
   function dispatchError(error: unknown) {
     console.error(error)
@@ -137,7 +137,7 @@ export function createScheduler(
             // Needed for fragment self-updates that add children - without this, new children
             // would be appended after siblings. The keyed diff has placement logic, but unkeyed
             // diff relies on anchor for correct positioning.
-            let anchor = findNextSiblingDomAnchor(vnode, vParent) || undefined
+            let anchor = findNextSiblingDomAnchor(vnode) || undefined
             try {
               let updateStyles = getFrameStyleManager(vnode)
               renderComponent(

package/src/runtime/svg-attributes.ts

@@ -5,6 +5,7 @@ const CANONICAL_CAMEL_SVG_ATTRS = new Set([
   'accentHeight',
   'attributeName',
   'attributeType',
+  'autoReverse',
   'baseFrequency',
   'baseProfile',
   'calcMode',

package/src/runtime/to-vnode.ts

@@ -2,7 +2,7 @@ import { Fragment } from './component.ts'
 import { invariant } from './invariant.ts'
 import { isEmptyChild, isPrimitiveChild, normalizeChildren } from './core/children.ts'
 import type { RemixElement, RemixNode } from './jsx.ts'
-import { isRemixElement, TEXT_NODE, type VNode } from './vnode.ts'
+import { isRemixElement, NON_RENDER_NODE, TEXT_NODE, type VNode } from './vnode.ts'
 
 function flatMapChildrenToVNodes(node: RemixElement): VNode[] {
   if (!('children' in node.props)) return []
@@ -21,7 +21,7 @@ function flattenChildrenToVNodes(nodes: RemixNode[], out: VNode[]): void {
 
 export function toVNode(node: RemixNode): VNode {
   if (isEmptyChild(node)) {
-    return { type: TEXT_NODE, _text: '' }
+    return { type: NON_RENDER_NODE }
   }
 
   if (isPrimitiveChild(node)) {

package/src/runtime/vnode.ts

@@ -6,6 +6,7 @@ import type { ElementProps, RemixNode } from './jsx.ts'
 export { isRemixElement }
 
 export const TEXT_NODE = Symbol('TEXT_NODE')
+export const NON_RENDER_NODE = Symbol('NON_RENDER_NODE')
 export const ROOT_VNODE = Symbol('ROOT_VNODE')
 
 export type VNodeType =
@@ -13,6 +14,7 @@ export type VNodeType =
   | string // host element
   | Function // component
   | typeof TEXT_NODE
+  | typeof NON_RENDER_NODE
   | typeof Fragment
   | typeof Frame
 
@@ -66,6 +68,10 @@ export type TextNode = VNode & {
   _text: string
 }
 
+export type NonRenderNode = VNode & {
+  type: typeof NON_RENDER_NODE
+}
+
 export type CommittedTextNode = TextNode & {
   _dom: Text
 }
@@ -102,6 +108,10 @@ export function isTextNode(node: VNode): node is TextNode {
   return node.type === TEXT_NODE
 }
 
+export function isNonRenderNode(node: VNode): node is NonRenderNode {
+  return node.type === NON_RENDER_NODE
+}
+
 export function isCommittedTextNode(node: VNode): node is CommittedTextNode {
   return isTextNode(node) && node._dom instanceof Text
 }

package/src/server/README.md

@@ -1,6 +1,6 @@
 # Server
 
-Remix Component can render to HTML on the server using two APIs:
+Remix UI can render to HTML on the server using two APIs:
 
 - `renderToString` - Returns a complete HTML string. Simple, but buffers the entire response.
 - `renderToStream` - Returns a `ReadableStream<Uint8Array>`. Sends the initial HTML immediately and streams frame content as it resolves.
@@ -26,6 +26,7 @@ import { renderToStream } from 'remix/ui/server'
 
 let stream = renderToStream(<App />, {
   frameSrc: request.url,
+  signal: request.signal,
   resolveFrame(src, _target, context) {
     let frameUrl = new URL(src, context?.currentFrameSrc ?? request.url)
     return fetchHtml(frameUrl)
@@ -44,6 +45,7 @@ return new Response(stream, {
 
 - **`frameSrc`** - Seeds SSR frame state for the current render. When provided, server-rendered components can read `handle.frame.src` and `handle.frames.top.src` during SSR.
 - **`topFrameSrc`** - Overrides the root frame URL used for `handle.frames.top.src`. This is mainly useful when calling `renderToStream()` from inside `resolveFrame()` for a nested frame render.
+- **`signal`** - Cancels pending server rendering work. Pass `request.signal` so client disconnects can stop unresolved frame work without invoking `onError` for the disconnect itself.
 - **`resolveFrame(src, target, context)`** - Called when a `<Frame>` needs its content. Return a string of HTML, a `ReadableStream<Uint8Array>`, or a promise of either. `context.currentFrameSrc` is the URL for the frame that contains the `<Frame>`, and `context.topFrameSrc` is the outer document URL. Required if your component tree contains `<Frame>` elements.
 - **`onError(error)`** - Called when a rendering error occurs. If not provided, the stream rejects with the error.
 
@@ -80,7 +82,7 @@ function ProductPage() {
 
 ## CSS
 
-Components using the `css` prop have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
+Components using the `css(...)` mixin through `mix` have their styles collected during rendering and emitted as a single `<style>` tag in the `<head>`. No client-side style injection is needed for server-rendered content.
 
 ## See Also
 

package/src/server/stream.ts

@@ -7,6 +7,7 @@ import {
   SELF_CLOSING_TAGS,
   normalizeAttributeName,
   serializeStyleObject,
+  shouldStringifyBooleanAttribute,
 } from '../runtime/core/attributes.ts'
 import { appendFlushMarker, type FlushKind, stripFlushMarkers } from '../runtime/stream-protocol.ts'
 import { REMIX_UI_STYLE_LAYER } from '../style/layers.ts'
@@ -31,6 +32,8 @@ export interface RenderToStreamOptions {
   frameSrc?: string | URL
   /** Source URL for the top-level frame in nested frame renders. */
   topFrameSrc?: string | URL
+  /** Signal that cancels pending server rendering work. */
+  signal?: AbortSignal
   /** Error hook invoked when rendering work throws. */
   onError?: (error: unknown) => void
   /** Callback used to resolve nested frame content during streaming SSR. */
@@ -97,6 +100,7 @@ interface RenderContext {
   unresolvedHydrationData: Map<string, UnresolvedHydrationData>
   frameData: Map<string, FrameData>
   blockingFrameTails: ReadableStream<Uint8Array>[]
+  signal: AbortSignal
   flushKind: FlushKind
   serverIdScope: string
   serverIdCounter: number
@@ -192,6 +196,7 @@ export function renderToStream(
   let currentFrameSrc = normalizeFrameSrc(options?.frameSrc ?? options?.topFrameSrc)
   let topFrameSrc = normalizeFrameSrc(options?.topFrameSrc ?? currentFrameSrc)
   let rootFrameState = createSsrFrameState(currentFrameSrc, topFrameSrc)
+  let renderAbortController = new AbortController()
 
   let context: RenderContext = {
     insideSvg: false,
@@ -204,21 +209,38 @@ export function renderToStream(
     unresolvedHydrationData: new Map(),
     frameData: new Map(),
     blockingFrameTails: [],
+    signal: renderAbortController.signal,
     flushKind: 'fragment',
     serverIdScope: crypto.randomUUID().slice(0, 8),
     serverIdCounter: 0,
   }
 
+  function cancel(reason: unknown): void {
+    if (!renderAbortController.signal.aborted) {
+      renderAbortController.abort(reason)
+    }
+  }
+
+  let signal = options?.signal
+  if (signal?.aborted) {
+    cancel(signal.reason)
+  } else {
+    signal?.addEventListener('abort', () => cancel(signal.reason), { once: true })
+  }
+
   return new ReadableStream({
     async start(controller) {
       try {
         let root = buildSegment(node, context, rootFrameState)
         await resolveBlocking(root)
+        if (closeIfCancelled(controller, context)) return
         await resolveClientEntries(context, options?.resolveClientEntry)
+        if (closeIfCancelled(controller, context)) return
         validateClientEntriesForHydration(context)
         let html = serializeSegment(root)
         let finalHtml = finalizeHtml(html, context)
         let bytes = encoder.encode(appendFlushMarker(finalHtml, context.flushKind))
+        if (closeIfCancelled(controller, context)) return
         controller.enqueue(bytes)
 
         // If we have any tails from blocking frame streams, stream them now.
@@ -226,7 +248,7 @@ export function renderToStream(
         // that must come after the initial document chunk.
         let tailPromise =
           context.blockingFrameTails.length > 0
-            ? streamByteStreams(context.blockingFrameTails, controller, context.onError)
+            ? streamByteStreams(context.blockingFrameTails, controller, context)
             : Promise.resolve()
 
         // If we have pending non-blocking frames, stream them as they resolve
@@ -237,15 +259,44 @@ export function renderToStream(
 
         await Promise.all([tailPromise, pendingPromise])
 
+        if (closeIfCancelled(controller, context)) return
         controller.close()
       } catch (error) {
+        if (isSignalAbortError(context.signal, error)) {
+          closeStream(controller)
+          return
+        }
         onError(error)
         controller.error(error)
       }
     },
+    cancel(reason) {
+      cancel(reason)
+    },
   })
 }
 
+function isSignalAbortError(signal: AbortSignal, error: unknown): boolean {
+  return signal.aborted && error === signal.reason
+}
+
+function closeIfCancelled(
+  controller: ReadableStreamDefaultController,
+  context: RenderContext,
+): boolean {
+  if (!context.signal.aborted) return false
+  closeStream(controller)
+  return true
+}
+
+function closeStream(controller: ReadableStreamDefaultController): void {
+  try {
+    controller.close()
+  } catch {
+    // The consumer may already have cancelled the stream.
+  }
+}
+
 function defaultResolveFrame(): never {
   throw new Error('No resolveFrame provided')
 }
@@ -387,7 +438,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
 
     if (typeof type === 'function') {
       if (type === Frame) {
-        return buildFrameSegment(props, context, frameState)
+        return buildFrameSegment(node, context, frameState)
       }
       if (isEntry(type)) {
         return buildEntrySegment(type, props, context, frameState)
@@ -405,7 +456,12 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
   return staticSeg('')
 }
 
-function buildFrameSegment(props: any, context: RenderContext, frameState: SsrFrameState): Segment {
+function buildFrameSegment(
+  node: RemixElement,
+  context: RenderContext,
+  frameState: SsrFrameState,
+): Segment {
+  let props = node.props
   let frameId = randomId('f')
 
   // Store frame data in context for aggregation
@@ -428,6 +484,9 @@ function buildFrameSegment(props: any, context: RenderContext, frameState: SsrFr
     let framePromise = Promise.resolve(
       context.resolveFrame(props.src, props.name, resolveFrameContext),
     ).then(async (resolved) => resolveFrameHtml(resolved))
+    // The response stream can be cancelled before pending frames are drained.
+    // Keep the promise observed so request aborts don't become unhandled.
+    framePromise.catch(() => {})
     context.pendingFrames.push({ frameId, promise: framePromise })
   } else {
     seg.pending = Promise.resolve(
@@ -529,11 +588,15 @@ function renderAttributes(props: any, isSvg: boolean, excludedProps?: Set<string
     if (excludedProps?.has(key)) continue
 
     let value = props[key]
-    if (value === undefined || value === null || value === false) continue
-
     let attrName = transformAttributeName(key, isSvg)
+    let shouldStringifyBoolean = shouldStringifyBooleanAttribute(attrName)
+    if (value === undefined || value === null || (value === false && !shouldStringifyBoolean)) {
+      continue
+    }
 
-    if (value === true) {
+    if (typeof value === 'boolean' && shouldStringifyBoolean) {
+      attrs += ` ${attrName}="${escapeHtml(String(value))}"`
+    } else if (value === true) {
       attrs += ` ${attrName}`
     } else {
       attrs += ` ${attrName}="${escapeHtml(String(value))}"`
@@ -1248,26 +1311,33 @@ async function streamPendingFrames(
   let processedFrames = new Set<string>()
 
   while (true) {
+    if (context.signal.aborted) break
+
     let batch = context.pendingFrames.filter(({ frameId }) => !processedFrames.has(frameId))
     if (batch.length === 0) break
 
     await Promise.all(
       batch.map(async ({ frameId, promise }) => {
+        if (context.signal.aborted) return
         processedFrames.add(frameId)
         try {
           let { html, tail } = await promise
+          if (context.signal.aborted) return
           html = dedupeServerStyleTagsInHtml(html, context.emittedStyles)
 
           // Stream as a template element (first chunk only)
           let templateHtml = `<template id="${frameId}">${escapeTemplateContent(html)}</template>`
+          if (context.signal.aborted) return
           controller.enqueue(encoder.encode(templateHtml))
 
           // Forward any additional chunks from a stream-valued resolveFrame result.
           if (tail) {
-            await streamByteStreams([tail], controller, context.onError)
+            await streamByteStreams([tail], controller, context)
           }
         } catch (error) {
-          context.onError(error)
+          if (!isSignalAbortError(context.signal, error)) {
+            context.onError(error)
+          }
         }
       }),
     )
@@ -1277,19 +1347,23 @@ async function streamPendingFrames(
 async function streamByteStreams(
   streams: ReadableStream<Uint8Array>[],
   controller: ReadableStreamDefaultController,
-  onError: (error: unknown) => void,
+  context: RenderContext,
 ): Promise<void> {
   await Promise.all(
     streams.map(async (stream) => {
       let reader = stream.getReader()
       try {
         while (true) {
+          if (context.signal.aborted) break
           let { done, value } = await reader.read()
           if (done) break
+          if (context.signal.aborted) break
           controller.enqueue(value)
         }
       } catch (error) {
-        onError(error)
+        if (!isSignalAbortError(context.signal, error)) {
+          context.onError(error)
+        }
       } finally {
         reader.releaseLock()
       }

package/src/style/css-mixin.ts

@@ -1,4 +1,5 @@
 import { createMixin, renderMixinElement } from '../runtime/mixins/mixin.ts'
+import type { MixinFactory } from '../runtime/mixins/mixin.ts'
 import type { MixinDescriptor } from '../runtime/mixins/mixin.ts'
 import type { ElementProps } from '../runtime/jsx.ts'
 import { invariant } from '../runtime/invariant.ts'
@@ -20,7 +21,11 @@ const clientStyleCache: StyleCache = new Map()
 /**
  * Applies generated class names for CSS object styles.
  */
-export const css = createMixin<Element, [styles: CSSProps], ElementProps>((handle) => {
+export const css: MixinFactory<Element, [styles: CSSProps], ElementProps> = createMixin<
+  Element,
+  [styles: CSSProps],
+  ElementProps
+>((handle) => {
   let activeSelector = ''
   let activeGeneration = -1
   let currentStyles: CSSProps = {}

package/src/style/index.ts

@@ -6,5 +6,4 @@ export type {
 } from './style.ts'
 export { processStyleClass, normalizeCssValue } from './style.ts'
 export { createStyleManager }
-
-export type StyleManager = ReturnType<typeof createStyleManager>
+export type { ServerStyleSource, StyleManager } from './stylesheet.ts'

package/src/style/style.ts

@@ -141,22 +141,15 @@ function styleToCss(styles: StyleObject, selector: string = ''): string {
         continue
       }
 
-      // For nested selectors, keep them wholesale inside the base block
       // Allow nested selectors to be conditionally disabled.
       // e.g. { '&:hover': condition ? undefined : { ... } }
       let record = toRecord(value)
       if (!record) continue
 
-      let nestedContent = ''
-      for (let [prop, propValue] of Object.entries(record)) {
-        if (propValue != null) {
-          let normalizedValue = normalizeCssValue(prop, propValue)
-          nestedContent += `    ${camelToKebab(prop)}: ${normalizedValue};\n`
-        }
-      }
-      if (nestedContent) {
+      let nestedContent = nestedStyleBodyToCss(record, 4)
+      if (nestedContent.trim().length > 0) {
         // Preserve key verbatim (e.g., '&[aria-selected], &[rmx-focus]')
-        nestedBlocks.push(`  ${key} {\n${nestedContent}  }`)
+        nestedBlocks.push(`  ${key} {\n${nestedContent}\n  }`)
       }
     } else {
       // Base declaration
@@ -189,6 +182,32 @@ function styleToCss(styles: StyleObject, selector: string = ''): string {
   return css
 }
 
+function nestedStyleBodyToCss(styles: StyleObject, spaces: number): string {
+  // This renders content that is already inside a style rule. Nested selectors
+  // and nested at-rules can stay in that rule body; root at-rule placement is
+  // handled by styleToCss before entering a nested style body.
+  let pad = ' '.repeat(spaces)
+  let declarations: string[] = []
+  let nestedBlocks: string[] = []
+
+  for (let [key, value] of Object.entries(styles)) {
+    if (isComplexSelector(key)) {
+      let record = toRecord(value)
+      if (!record) continue
+
+      let nestedContent = nestedStyleBodyToCss(record, spaces + 2)
+      if (nestedContent.trim().length > 0) {
+        nestedBlocks.push(`${pad}${key} {\n${nestedContent}\n${pad}}`)
+      }
+    } else if (value != null) {
+      let normalizedValue = normalizeCssValue(key, value)
+      declarations.push(`${pad}${camelToKebab(key)}: ${normalizedValue};`)
+    }
+  }
+
+  return [...declarations, ...nestedBlocks].join('\n')
+}
+
 function indent(text: string, spaces: number): string {
   let pad = ' '.repeat(spaces)
   return text

package/src/style/stylesheet.ts

@@ -1,7 +1,19 @@
 import { REMIX_UI_STYLE_LAYER } from './layers.ts'
 
 type RuleEntry = { count: number; index: number }
-type ServerStyleSource = ParentNode | Iterable<Node>
+export type ServerStyleSource = ParentNode | Iterable<Node>
+
+export interface StyleManager {
+  insert(className: string, rule: string): void
+  remove(className: string): void
+  has(className: string): boolean
+  getGeneration(): number
+  reset(): void
+  adoptServerStyles(source: ServerStyleSource): Set<string>
+  replaceServerStyles(source: ServerStyleSource): void
+  selectors(): IterableIterator<string>
+  dispose(): void
+}
 
 const SERVER_STYLE_SELECTOR = 'style[data-rmx]'
 
@@ -68,7 +80,7 @@ function getStyleSelector(styleEl: HTMLStyleElement): string | null {
   return selector ? selector : null
 }
 
-export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER) {
+export function createStyleManager(layer: string = REMIX_UI_STYLE_LAYER): StyleManager {
   let stylesheet: CSSStyleSheet | null = null
   let generation = 0