@remix-run/ui 0.1.1 → 0.2.0

package/src/server/stream.ts

@@ -2,7 +2,15 @@ import type { ComponentHandle, FrameHandle, Key, RemixNode } from '../runtime/co
 import type { ElementType, ElementProps, RemixElement } from '../runtime/jsx.ts'
 import { Fragment, createComponent, createFrameHandle, Frame } from '../runtime/component.ts'
 import { isEntry, type EntryComponent } from '../runtime/client-entries.ts'
-import { normalizeSvgAttribute } from '../runtime/svg-attributes.ts'
+import {
+  FRAMEWORK_PROPS as RUNTIME_FRAMEWORK_PROPS,
+  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'
 
 interface VNode {
   type: ElementType
@@ -24,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. */
@@ -90,6 +100,8 @@ interface RenderContext {
   unresolvedHydrationData: Map<string, UnresolvedHydrationData>
   frameData: Map<string, FrameData>
   blockingFrameTails: ReadableStream<Uint8Array>[]
+  signal: AbortSignal
+  flushKind: FlushKind
   serverIdScope: string
   serverIdCounter: number
 }
@@ -114,54 +126,32 @@ type Segment =
       pending?: Promise<void>
     }
 
-const SELF_CLOSING_TAGS = new Set([
-  'area',
-  'base',
-  'br',
-  'col',
-  'embed',
-  'hr',
-  'img',
-  'input',
-  'link',
-  'meta',
-  'param',
-  'source',
-  'track',
-  'wbr',
-])
-
-const DEFAULT_STYLE_LAYER = 'rmx'
+const TEXTAREA_VALUE_PROPS = new Set(['value', 'defaultValue'])
+const INPUT_DEFAULT_PROPS = new Set(['defaultValue', 'defaultChecked'])
+
 const DOCTYPE_PATTERN = /<!doctype(?:\s[^>]*)?>/gi
 
 function stripDoctypeMarkup(html: string): string {
   return html.replace(DOCTYPE_PATTERN, '')
 }
 
-function getStyleLayerName(selector: string, layer: string = DEFAULT_STYLE_LAYER): string {
+function hasRenderableHtml(html: string): boolean {
+  return stripDoctypeMarkup(html).trim() !== ''
+}
+
+function emptyReadableStream(): ReadableStream<Uint8Array> {
+  return new ReadableStream({
+    start(controller) {
+      controller.close()
+    },
+  })
+}
+
+function getStyleLayerName(selector: string, layer: string = REMIX_UI_STYLE_LAYER): string {
   return `${layer}.${selector}`
 }
 
-const NUMERIC_CSS_PROPS = new Set([
-  'z-index',
-  'opacity',
-  'flex-grow',
-  'flex-shrink',
-  'flex-order',
-  'grid-area',
-  'grid-row',
-  'grid-column',
-  'font-weight',
-  'line-height',
-  'order',
-  'orphans',
-  'widows',
-  'zoom',
-  'columns',
-  'column-count',
-])
-
-const FRAMEWORK_PROPS = new Set(['children', 'innerHTML', 'on', 'key', 'mix'])
+const SSR_OMITTED_PROPS = RUNTIME_FRAMEWORK_PROPS
 
 const ssrSignal = Object.freeze({
   get aborted() {
@@ -206,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,
@@ -218,20 +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(finalHtml)
+        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.
@@ -239,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
@@ -250,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')
 }
@@ -289,24 +327,28 @@ function createServerComponentId(context: RenderContext): string {
   return `s${context.serverIdScope}-${context.serverIdCounter}`
 }
 
-async function splitFirstChunk(
-  stream: ReadableStream<Uint8Array>,
-): Promise<{ first: Uint8Array; tail: ReadableStream<Uint8Array> }> {
+async function splitFirstChunk(stream: ReadableStream<Uint8Array>): Promise<ResolvedFrameHtml> {
   let reader = stream.getReader()
+  let decoder = new TextDecoder()
 
-  let { value, done } = await reader.read()
-  if (done || !value) {
-    reader.releaseLock()
-    return {
-      first: new Uint8Array(),
-      tail: new ReadableStream({
-        start(controller) {
-          controller.close()
-        },
-      }),
+  let first: Uint8Array | undefined
+  while (true) {
+    let { value, done } = await reader.read()
+    if (done || !value) break
+
+    let text = decoder.decode(value, { stream: true })
+    if (hasRenderableHtml(text)) {
+      first = value
+      break
     }
   }
 
+  if (!first) {
+    decoder.decode()
+    reader.releaseLock()
+    return { html: '', tail: emptyReadableStream() }
+  }
+
   let released = false
   function release() {
     if (released) return
@@ -334,17 +376,15 @@ async function splitFirstChunk(
     },
   })
 
-  return { first: value, tail }
+  return { html: stripFlushMarkers(stripDoctypeMarkup(decoder.decode(first))), tail }
 }
 
 async function resolveFrameHtml(
   input: string | ReadableStream<Uint8Array>,
 ): Promise<ResolvedFrameHtml> {
-  if (typeof input === 'string') return { html: stripDoctypeMarkup(input) }
+  if (typeof input === 'string') return { html: stripFlushMarkers(stripDoctypeMarkup(input)) }
 
-  let decoder = new TextDecoder()
-  let { first, tail } = await splitFirstChunk(input)
-  return { html: stripDoctypeMarkup(decoder.decode(first)), tail }
+  return await splitFirstChunk(input)
 }
 
 function isRemixElement(node: unknown): node is RemixElement {
@@ -385,6 +425,7 @@ function buildSegment(node: RemixNode, context: RenderContext, frameState: SsrFr
       let tag = type
 
       if (tag === 'html') {
+        context.flushKind = 'document'
         return buildElementSegment(tag, props, context, frameState)
       }
 
@@ -438,6 +479,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(
@@ -464,7 +508,15 @@ function buildElementSegment(
   let processedProps = processStyleProps(mixedProps)
   // Determine namespace context for the current element and its children
   let currentIsSvg = context.insideSvg || tag === 'svg'
-  let attrs = renderAttributes(processedProps, currentIsSvg)
+
+  if (!currentIsSvg && tag === 'textarea') {
+    return buildTextareaElementSegment(tag, processedProps)
+  }
+
+  let attrs =
+    !currentIsSvg && tag === 'input'
+      ? renderInputAttributes(processedProps)
+      : renderAttributes(processedProps, currentIsSvg)
 
   if (SELF_CLOSING_TAGS.has(tag)) {
     return staticSeg(`<${tag}${attrs} />`)
@@ -485,6 +537,27 @@ function buildElementSegment(
   return compositeSeg([open, children, close])
 }
 
+function buildTextareaElementSegment(tag: string, props: any): Segment {
+  let attrs = renderAttributes(props, false, TEXTAREA_VALUE_PROPS)
+  let value = props.value ?? props.defaultValue ?? ''
+  return staticSeg(`<${tag}${attrs}>${escapeTextContent(String(value))}</${tag}>`)
+}
+
+function renderInputAttributes(props: any): string {
+  let value =
+    props.value === undefined && props.defaultValue !== undefined ? props.defaultValue : props.value
+  let checked =
+    props.checked === undefined && props.defaultChecked !== undefined
+      ? props.defaultChecked
+      : props.checked
+  let inputProps = {
+    ...props,
+    ...(value === undefined ? {} : { value }),
+    ...(checked === undefined ? {} : { checked }),
+  }
+  return renderAttributes(inputProps, false, INPUT_DEFAULT_PROPS)
+}
+
 function buildHeadElementSegment(
   tag: string,
   props: any,
@@ -502,18 +575,23 @@ function buildHeadElementSegment(
   return compositeSeg([open, children, close])
 }
 
-function renderAttributes(props: any, isSvg: boolean): string {
+function renderAttributes(props: any, isSvg: boolean, excludedProps?: Set<string>): string {
   let attrs = ''
 
   for (let key in props) {
-    if (FRAMEWORK_PROPS.has(key)) continue
+    if (SSR_OMITTED_PROPS.has(key)) continue
+    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))}"`
@@ -798,7 +876,11 @@ function buildComponentSegment(
   let [renderedNode] = handle.render(props)
   let childContext = { ...context, parentVNode: vnode }
 
-  return buildSegment(renderedNode, childContext, frameState)
+  let rendered = buildSegment(renderedNode, childContext, frameState)
+  if (childContext.flushKind === 'document') {
+    context.flushKind = 'document'
+  }
+  return rendered
 }
 
 function createHydrationPropsReplacer(context: RenderContext, frameState: SsrFrameState) {
@@ -1063,24 +1145,11 @@ function escapeTemplateContent(html: string): string {
 }
 
 function transformAttributeName(name: string, isSvg: boolean): string {
-  // aria-/data- pass through
-  if (name.startsWith('aria-') || name.startsWith('data-')) return name
-
-  // HTML mappings
-  if (name === 'className') return 'class'
-  if (!isSvg) {
-    if (name === 'htmlFor') return 'for'
-    if (name === 'tabIndex') return 'tabindex'
-    if (name === 'acceptCharset') return 'accept-charset'
-    if (name === 'httpEquiv') return 'http-equiv'
-    return name.toLowerCase()
-  }
-
-  return normalizeSvgAttribute(name).attr
+  return normalizeAttributeName(name, isSvg).attr
 }
 
 function finalizeHtml(html: string, context: RenderContext): string {
-  let hasHtmlRoot = html.trimStart().toLowerCase().startsWith('<html')
+  let hasHtmlRoot = context.flushKind === 'document'
 
   let styles = collectStyleTags(context)
   if (styles) {
@@ -1164,7 +1233,7 @@ function collectStyleTags(context: RenderContext): string {
 function wrapStyleForLayer(
   selector: string,
   css: string,
-  layer: string = DEFAULT_STYLE_LAYER,
+  layer: string = REMIX_UI_STYLE_LAYER,
 ): string {
   let trimmed = css.trim()
   if (!trimmed) return ''
@@ -1174,7 +1243,7 @@ function wrapStyleForLayer(
 function renderStyleTag(
   selector: string,
   css: string,
-  layer: string = DEFAULT_STYLE_LAYER,
+  layer: string = REMIX_UI_STYLE_LAYER,
 ): string {
   let wrappedCss = wrapStyleForLayer(selector, css, layer)
   if (!wrappedCss) return ''
@@ -1225,36 +1294,6 @@ function escapeScriptJson(json: string): string {
   return json.replace(/</g, '\\u003c')
 }
 
-function serializeStyleObject(style: Record<string, any>): string {
-  let parts: string[] = []
-
-  for (let [key, value] of Object.entries(style)) {
-    if (value == null) continue
-    if (typeof value === 'boolean') continue
-    if (typeof value === 'number' && !Number.isFinite(value)) continue
-
-    // Convert camelCase to kebab-case
-    let cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-
-    // Add px to numeric values where appropriate
-    let shouldAppendPx =
-      typeof value === 'number' &&
-      value !== 0 &&
-      !NUMERIC_CSS_PROPS.has(cssKey) &&
-      !cssKey.startsWith('--')
-
-    let cssValue = shouldAppendPx
-      ? `${value}px`
-      : Array.isArray(value)
-        ? value.join(', ')
-        : String(value)
-
-    parts.push(`${cssKey}: ${cssValue};`)
-  }
-
-  return parts.join(' ')
-}
-
 // Frame styles work end-to-end when frame handlers use their own `renderToStream`:
 // the handler's `finalizeHtml` emits selector-addressed `<style>` tags in its HTML, and on the client,
 // the `adoptServerStyleTag` MutationObserver (stylesheet.ts) picks it up anywhere in the
@@ -1267,26 +1306,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)
+          }
         }
       }),
     )
@@ -1296,19 +1342,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()
       }
@@ -1337,11 +1387,13 @@ async function drain(stream: ReadableStream<Uint8Array>): Promise<string> {
  * @returns Rendered HTML.
  */
 export async function renderToString(node: RemixNode): Promise<string> {
-  return drain(
-    renderToStream(node, {
-      onError(error) {
-        throw error
-      },
-    }),
+  return stripFlushMarkers(
+    await drain(
+      renderToStream(node, {
+        onError(error) {
+          throw error
+        },
+      }),
+    ),
   )
 }

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/layers.ts

@@ -0,0 +1,2 @@
+export const REMIX_UI_STYLE_LAYER = 'rmx'
+export const REMIX_UI_RESET_LAYER = 'rmx-reset'