@remix-run/ui 0.1.0 → 0.1.2

package/src/runtime/diff-dom.ts

@@ -1,6 +1,12 @@
 import { invariant } from './invariant.ts'
 import type { FrameContext } from './frame.ts'
 
+type HydratedVirtualRootStartMarker = Comment & {
+  $rmx: {
+    dispose(): void
+  }
+}
+
 export function diffNodes(curr: Node[], next: Node[], context: FrameContext) {
   let parent = curr[0]?.parentNode ?? context.regionParent ?? null
   invariant(parent, 'Parent node not found')
@@ -23,8 +29,7 @@ export function diffNodes(curr: Node[], next: Node[], context: FrameContext) {
         parent.appendChild(n)
       }
     } else if (c && !n) {
-      disposeRemovedSubFrames(c, context)
-      parent.removeChild(c)
+      removeNode(c, parent, context)
     } else if (c && n) {
       // Skip hydrated client-entry boundary ranges; hydration pass re-renders
       // roots with new props from incoming payload
@@ -71,7 +76,10 @@ function diffNode(current: Node, next: Node, context: FrameContext): ChildNode |
   // Comment -> Comment
   if (isCommentNode(current) && isCommentNode(next)) {
     let newData = next.data
-    if (current.data !== newData) current.data = newData
+    if (current.data !== newData) {
+      if (isFrameStartMarker(current)) disposeFrameStartMarker(current, context)
+      current.data = newData
+    }
     return
   }
 
@@ -80,7 +88,10 @@ function diffNode(current: Node, next: Node, context: FrameContext): ChildNode |
     // Different tags: replace
     if (current.tagName !== next.tagName) {
       let parent = current.parentNode
-      if (parent) parent.replaceChild(next, current)
+      if (parent) {
+        parent.insertBefore(next, current)
+        removeNode(current, parent, context)
+      }
       return
     }
 
@@ -93,7 +104,10 @@ function diffNode(current: Node, next: Node, context: FrameContext): ChildNode |
 
   // Type mismatch: replace
   let parent = current.parentNode
-  if (parent) parent.replaceChild(next, current)
+  if (parent) {
+    parent.insertBefore(next, current)
+    removeNode(current, parent, context)
+  }
 }
 
 function diffElementAttributes(current: Element, next: Element): void {
@@ -315,8 +329,7 @@ function diffElementChildren(current: Element, next: Element, context: FrameCont
   for (let i = 0; i < currentChildren.length; i++) {
     if (!used[i]) {
       let nodeToRemove = currentChildren[i]
-      disposeRemovedSubFrames(nodeToRemove, context)
-      current.removeChild(currentChildren[i])
+      removeNode(nodeToRemove, current, context)
     }
   }
 }
@@ -375,6 +388,32 @@ function isFrameStartMarker(node: Node): node is Comment {
   return node instanceof Comment && node.data.trim().startsWith('rmx:f:')
 }
 
+function removeNode(node: Node, parent: ParentNode, context: FrameContext): void {
+  disposeRemovedVirtualRoots(node)
+  disposeRemovedSubFrames(node, context)
+
+  if (node.parentNode === parent) {
+    parent.removeChild(node)
+  }
+}
+
+function disposeRemovedVirtualRoots(node: Node): void {
+  let stack: Node[] = [node]
+  while (stack.length > 0) {
+    let next = stack.pop()
+    if (!next) continue
+
+    if (isHydratedVirtualRootStartMarker(next)) {
+      next.$rmx.dispose()
+      continue
+    }
+
+    for (let child of Array.from(next.childNodes)) {
+      stack.push(child)
+    }
+  }
+}
+
 function disposeRemovedSubFrames(node: Node, context: FrameContext): void {
   let stack: Node[] = [node]
   while (stack.length > 0) {
@@ -382,11 +421,7 @@ function disposeRemovedSubFrames(node: Node, context: FrameContext): void {
     if (!next) continue
 
     if (isFrameStartMarker(next)) {
-      let subFrame = context.frameInstances.get(next)
-      if (subFrame) {
-        subFrame.dispose()
-        context.frameInstances.delete(next)
-      }
+      disposeFrameStartMarker(next, context)
     }
 
     for (let child of Array.from(next.childNodes)) {
@@ -395,10 +430,22 @@ function disposeRemovedSubFrames(node: Node, context: FrameContext): void {
   }
 }
 
+function disposeFrameStartMarker(marker: Comment, context: FrameContext): void {
+  let subFrame = context.frameInstances.get(marker)
+  if (subFrame) {
+    subFrame.dispose()
+    context.frameInstances.delete(marker)
+  }
+}
+
 function isVirtualRootStartMarker(node: Node): node is Comment {
   return isCommentNode(node) && node.data.trim().startsWith('rmx:h:')
 }
 
+function isHydratedVirtualRootStartMarker(node: Node): node is HydratedVirtualRootStartMarker {
+  return isVirtualRootStartMarker(node) && '$rmx' in node
+}
+
 function isVirtualRootEndMarker(node: Node): node is Comment {
   return isCommentNode(node) && node.data.trim() === '/rmx:h'
 }

package/src/runtime/diff-props.ts

@@ -1,200 +1,15 @@
 import { invariant } from './invariant.ts'
-import { createStyleManager, normalizeCssValue } from '../style/index.ts'
+import { createStyleManager } from '../style/index.ts'
 import type { StyleManager } from '../style/index.ts'
-import type { ElementProps } from './jsx.ts'
-import { normalizeSvgAttribute } from './svg-attributes.ts'
-
-const SVG_NS = 'http://www.w3.org/2000/svg'
 
 let globalStyleManager =
   typeof window !== 'undefined' ? createStyleManager() : (null as unknown as StyleManager)
 
 export { type StyleManager }
+export { patchHostProps as diffHostProps } from './core/props.ts'
 
 export let defaultStyleManager: StyleManager = globalStyleManager
 
-// Preact excludes certain attributes from the property path due to browser quirks
-const ATTRIBUTE_FALLBACK_NAMES = new Set([
-  'width',
-  'height',
-  'href',
-  'list',
-  'form',
-  'tabIndex',
-  'download',
-  'rowSpan',
-  'colSpan',
-  'role',
-  'popover',
-])
-
-// Determine if we should use the property path for a given name.
-// Also acts as a type guard to allow bracket assignment without casts.
-function canUseProperty(
-  dom: Element,
-  name: string,
-  isSvg: boolean,
-): dom is Element & Record<string, unknown> {
-  if (isSvg) return false
-  if (ATTRIBUTE_FALLBACK_NAMES.has(name)) return false
-  return name in dom
-}
-
-function isFrameworkProp(name: string): boolean {
-  return (
-    name === 'children' ||
-    name === 'mix' ||
-    name === 'key' ||
-    name === 'animate' ||
-    name === 'innerHTML'
-  )
-}
-
-// TODO: would rather actually diff el.style object directly instead of writing
-// to the style attribute
-function serializeStyleObject(style: Record<string, unknown>): 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
-
-    let cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`)
-
-    let cssValue = Array.isArray(value)
-      ? (value as unknown[]).join(', ')
-      : normalizeCssValue(key, value)
-
-    parts.push(`${cssKey}: ${cssValue};`)
-  }
-  return parts.join(' ')
-}
-
-function normalizePropName(name: string, isSvg: boolean): { ns?: string; attr: string } {
-  // aria-/data- pass through
-  if (name.startsWith('aria-') || name.startsWith('data-')) return { attr: name }
-
-  // DOM property -> HTML mappings
-  if (name === 'className') return { attr: 'class' }
-  if (!isSvg) {
-    if (name === 'htmlFor') return { attr: 'for' }
-    if (name === 'tabIndex') return { attr: 'tabindex' }
-    if (name === 'acceptCharset') return { attr: 'accept-charset' }
-    if (name === 'httpEquiv') return { attr: 'http-equiv' }
-    return { attr: name.toLowerCase() }
-  }
-
-  return normalizeSvgAttribute(name)
-}
-
-function toLocalName(attrName: string): string {
-  let separatorIndex = attrName.indexOf(':')
-  if (separatorIndex === -1) return attrName
-  return attrName.slice(separatorIndex + 1)
-}
-
-function clearRuntimePropertyOnRemoval(dom: Element & Record<string, unknown>, name: string): void {
-  try {
-    if (name === 'value' || name === 'defaultValue') {
-      dom[name] = ''
-      return
-    }
-    if (name === 'checked' || name === 'defaultChecked' || name === 'selected') {
-      dom[name] = false
-      return
-    }
-    if (name === 'selectedIndex') {
-      dom[name] = -1
-    }
-  } catch {}
-}
-
-function getMergedClassName(props: ElementProps): string | undefined {
-  let classAttr = typeof props.class === 'string' ? props.class : ''
-  let className = typeof props.className === 'string' ? props.className : ''
-  let mergedClassName =
-    classAttr && className ? `${classAttr} ${className}` : classAttr || className
-  return mergedClassName || undefined
-}
-
-export function diffHostProps(curr: ElementProps, next: ElementProps, dom: Element) {
-  let isSvg = dom.namespaceURI === SVG_NS
-  let currClassName = getMergedClassName(curr)
-  let nextClassName = getMergedClassName(next)
-
-  if (currClassName !== nextClassName) {
-    if (nextClassName) {
-      dom.setAttribute('class', nextClassName)
-    } else {
-      dom.removeAttribute('class')
-    }
-  }
-
-  // Removals
-  for (let name in curr) {
-    if (isFrameworkProp(name)) continue
-    if (name === 'class' || name === 'className') continue
-    if (!(name in next) || next[name] == null) {
-      // Clear runtime state for form-like props where removing the attribute is not enough.
-      if (canUseProperty(dom, name, isSvg)) {
-        clearRuntimePropertyOnRemoval(dom, name)
-      }
-
-      let { ns, attr } = normalizePropName(name, isSvg)
-      if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
-      else dom.removeAttribute(attr)
-    }
-  }
-
-  // Additions/updates
-  for (let name in next) {
-    if (isFrameworkProp(name)) continue
-    if (name === 'class' || name === 'className') continue
-    let nextValue = next[name]
-    if (nextValue == null) continue
-    let prevValue = curr[name]
-    if (prevValue !== nextValue) {
-      let { ns, attr } = normalizePropName(name, isSvg)
-
-      // Object style: serialize to attribute for now
-      if (
-        attr === 'style' &&
-        typeof nextValue === 'object' &&
-        nextValue &&
-        !Array.isArray(nextValue)
-      ) {
-        dom.setAttribute('style', serializeStyleObject(nextValue))
-        continue
-      }
-
-      // Prefer property assignment when possible (HTML only, not SVG)
-      if (canUseProperty(dom, name, isSvg)) {
-        try {
-          dom[name] = nextValue == null ? '' : nextValue
-          continue
-        } catch {}
-      }
-
-      // Attribute path
-      if (typeof nextValue === 'function') {
-        // Never serialize functions as attribute values
-        continue
-      }
-
-      let isAriaOrData = name.startsWith('aria-') || name.startsWith('data-')
-      if (nextValue != null && (nextValue !== false || isAriaOrData)) {
-        // Special-case popover: true => presence only
-        let attrValue = name === 'popover' && nextValue === true ? '' : String(nextValue)
-        if (ns) dom.setAttributeNS(ns, attr, attrValue)
-        else dom.setAttribute(attr, attrValue)
-      } else {
-        if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
-        else dom.removeAttribute(attr)
-      }
-    }
-  }
-}
-
 /**
  * Reset the global style state. For testing only - not exported from index.ts.
  */

package/src/runtime/dom.ts

@@ -3418,6 +3418,10 @@ export interface TemplateHTMLProps<eventTarget extends EventTarget = HTMLTemplat
  */
 export interface TextareaHTMLProps<eventTarget extends EventTarget = HTMLTextAreaElement>
   extends HTMLProps<eventTarget> {
+  /** Textarea content comes from `value` or `defaultValue`. */
+  children?: never
+  /** Textarea content comes from `value` or `defaultValue`. */
+  innerHTML?: never
   /** The `autocomplete` HTML attribute. */
   autocomplete?: Trackable<string | undefined>
   /** The `autoComplete` HTML attribute. */

package/src/runtime/frame.ts

@@ -8,6 +8,7 @@ import type { Scheduler, VirtualRoot } from './vdom.ts'
 import { createRangeRoot, createRoot } from './vdom.ts'
 import { diffNodes } from './diff-dom.ts'
 import { createStyleManager, type StyleManager } from '../style/index.ts'
+import { findFlushMarker, type FlushKind } from './stream-protocol.ts'
 
 type FrameRoot = [Comment, Comment] | Element | Document | DocumentFragment
 
@@ -39,12 +40,31 @@ type FrameMarkerData = FrameData & {
 type PendingClientEntries = Map<Comment, [Comment, RemixElement]>
 
 /**
- * Loads a client entry module for hydration.
+ * Loads a named client-entry export for hydration.
+ *
+ * @param moduleUrl Browser-resolvable URL for the module that contains the client entry.
+ * @param exportName Named export to read from the loaded module.
+ * @returns The exported component function, or a promise for it.
+ *
+ * @example
+ * ```ts
+ * run({
+ *   async loadModule(moduleUrl, exportName) {
+ *     let mod = await import(moduleUrl)
+ *     return mod[exportName]
+ *   },
+ * })
+ * ```
  */
 export type LoadModule = (moduleUrl: string, exportName: string) => Promise<Function> | Function
 
 /**
- * Resolves frame content for the given frame source.
+ * Resolves content for a browser-loaded frame.
+ *
+ * @param src Source string from the `<Frame src>` prop.
+ * @param signal Abort signal for the active frame load or reload.
+ * @param target Optional name of the frame being reloaded.
+ * @returns HTML, a stream of HTML bytes, or Remix node content to render into the frame.
  */
 export type ResolveFrame = (
   src: string,
@@ -58,6 +78,11 @@ type FrameTemplateListener = (fragment: DocumentFragment) => void
 
 const bufferedFrameTemplates = new Map<string, DocumentFragment[]>()
 const frameTemplateListeners = new Map<string, Set<FrameTemplateListener>>()
+const DOCTYPE_PATTERN = /<!doctype(?:\s[^>]*)?>/gi
+
+function stripDoctypeMarkup(html: string): string {
+  return html.replace(DOCTYPE_PATTERN, '')
+}
 
 function syncElementAttributes(target: Element, source: Element) {
   for (let attribute of Array.from(target.attributes)) {
@@ -133,6 +158,7 @@ export type Frame = {
 }
 
 type RenderOptions = {
+  flushKind?: FlushKind
   initialHydrationTracker?: InitialHydrationTracker
   signal?: AbortSignal
 }
@@ -206,9 +232,9 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     if (options?.signal?.aborted) return
 
     if (content instanceof ReadableStream) {
-      await renderFrameStream(content, container.doc, async (html) => {
+      await renderFrameStream(content, container.doc, async (html, flushKind) => {
         if (options?.signal?.aborted) return
-        await render(html, options)
+        await render(html, { ...options, flushKind })
       })
       return
     }
@@ -232,37 +258,42 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
       contentRoot = undefined
     }
 
+    if (typeof content === 'string') {
+      let flushed = await consumeFlushBatches(content, async (html, flushKind) => {
+        await render(html, { ...options, flushKind })
+      })
+      if (flushed.applied) {
+        if (flushed.remainder !== '') {
+          await render(flushed.remainder, { ...options, flushKind: 'fragment' })
+        }
+        return
+      }
+    }
+
+    let htmlContent = typeof content === 'string' ? stripDoctypeMarkup(content) : undefined
+
     let isFullDocumentReload =
       container.root instanceof Document &&
-      typeof content === 'string' &&
-      isFullDocumentHtml(content)
-
-    if (isFullDocumentReload && typeof content === 'string') {
-      // Full-document reload should tear down existing hydrated roots and subframes
-      // before diffing fresh HTML, otherwise stale component instances can survive
-      // on detached DOM nodes.
-      let previousBodyNodes = Array.from(container.doc.body.childNodes)
-      removeVirtualRoots(previousBodyNodes)
-      disposeSubFrames(previousBodyNodes, context)
-      let parsed = new DOMParser().parseFromString(content, 'text/html')
+      htmlContent !== undefined &&
+      options?.flushKind === 'document'
+
+    if (isFullDocumentReload && htmlContent !== undefined) {
+      let parsed = new DOMParser().parseFromString(htmlContent, 'text/html')
       mergeRmxDataFromDocument(context.data, parsed)
-      context.styleManager.reset()
-      context.styleManager.adoptServerStyles(
+      context.styleManager.replaceServerStyles(
         collectFrameServerStyleTags(createElementContainer(parsed)),
       )
 
       syncElementAttributes(container.doc.documentElement, parsed.documentElement)
-      syncElementAttributes(container.doc.head, parsed.head)
-      syncElementAttributes(container.doc.body, parsed.body)
 
-      diffNodes(Array.from(container.doc.head.childNodes), Array.from(parsed.head.childNodes), {
+      diffNodes([container.doc.head], [parsed.head], {
         ...context,
-        regionParent: container.doc.head,
+        regionParent: container.doc.documentElement,
         regionTailRef: null,
       })
-      diffNodes(Array.from(container.doc.body.childNodes), Array.from(parsed.body.childNodes), {
+      diffNodes([container.doc.body], [parsed.body], {
         ...context,
-        regionParent: container.doc.body,
+        regionParent: container.doc.documentElement,
         regionTailRef: null,
       })
 
@@ -274,9 +305,8 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
     }
 
     let fragment =
-      typeof content === 'string' ? createFragmentFromString(container.doc, content) : content
-    context.styleManager.reset()
-    context.styleManager.adoptServerStyles(
+      htmlContent !== undefined ? createFragmentFromString(container.doc, htmlContent) : content
+    context.styleManager.replaceServerStyles(
       collectFrameServerStyleTags(createElementContainer(fragment)),
     )
     removeEmptyHeads(fragment)
@@ -337,8 +367,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
   async function hydrateInitial(): Promise<void> {
     let initialHydrationTracker = createInitialHydrationTracker()
 
-    context.styleManager.reset()
-    context.styleManager.adoptServerStyles(collectFrameServerStyleTags(container))
+    context.styleManager.replaceServerStyles(collectFrameServerStyleTags(container))
     createSubFrames(container.childNodes, context)
     scheduleHydrationInContainer(container, context, initialHydrationTracker)
 
@@ -979,13 +1008,12 @@ function extractTemplatesFromBuffer(
 async function renderFrameStream(
   stream: ReadableStream<Uint8Array>,
   doc: Document,
-  applyHtml: (html: string) => Promise<void>,
+  applyHtml: (html: string, flushKind: FlushKind) => Promise<void>,
 ): Promise<void> {
   let reader = stream.getReader()
   let decoder = new TextDecoder()
   let buffer = ''
   let html = ''
-  let appliedLength = 0
   let appliedOnce = false
 
   try {
@@ -999,13 +1027,9 @@ async function renderFrameStream(
 
       if (parsed.html !== '') {
         html += parsed.html
-        let htmlMarkers = collectHtmlMarkerSummary(html)
-        if (!hasBalancedMarkerSummary(htmlMarkers)) {
-          continue
-        }
-        await applyHtml(html)
-        appliedLength = html.length
-        appliedOnce = true
+        let flushed = await consumeFlushBatches(html, applyHtml)
+        appliedOnce = flushed.applied || appliedOnce
+        html = flushed.remainder
       }
     }
 
@@ -1018,21 +1042,40 @@ async function renderFrameStream(
       buffer = ''
     }
 
-    if (html !== '' && html.length > appliedLength) {
-      await applyHtml(html)
+    if (html !== '') {
+      await applyHtml(html, 'fragment')
       appliedOnce = true
     }
 
     // A frame stream can legitimately resolve to empty content. Ensure the
     // existing frame region is cleared instead of treated as a no-op.
     if (html === '' && !appliedOnce) {
-      await applyHtml('')
+      await applyHtml('', 'fragment')
     }
   } finally {
     reader.releaseLock()
   }
 }
 
+async function consumeFlushBatches(
+  html: string,
+  applyHtml: (html: string, flushKind: FlushKind) => Promise<void>,
+): Promise<{ applied: boolean; remainder: string }> {
+  let applied = false
+  let cursor = 0
+  let marker = findFlushMarker(html, cursor)
+
+  while (marker) {
+    let batch = html.slice(cursor, marker.index)
+    await applyHtml(batch, marker.kind)
+    applied = true
+    cursor = marker.endIndex
+    marker = findFlushMarker(html, cursor)
+  }
+
+  return { applied, remainder: html.slice(cursor) }
+}
+
 type FrameContainer = {
   doc: Document
   root: ParentNode
@@ -1085,7 +1128,7 @@ function createCommentContainer([start, end]: [Comment, Comment]): FrameContaine
 
 function createFragmentFromString(doc: Document, content: string): DocumentFragment {
   let template = doc.createElement('template')
-  template.innerHTML = content.trim()
+  template.innerHTML = stripDoctypeMarkup(content).trim()
   return template.content
 }
 
@@ -1097,11 +1140,6 @@ function isRemixNodeFrameContent(content: InternalFrameContent): content is Remi
   )
 }
 
-function isFullDocumentHtml(content: string): boolean {
-  let trimmed = content.trimStart()
-  return /^<!doctype html\b/i.test(trimmed) || /^<html[\s>]/i.test(trimmed)
-}
-
 type HydrationMarker = {
   id: string
   start: Comment
@@ -1194,18 +1232,3 @@ function findEndMarker(
 
   throw new Error('End marker not found')
 }
-
-function collectHtmlMarkerSummary(html: string): Record<string, number> {
-  return {
-    frameStarts: html.match(/<!--\s*rmx:f:/g)?.length ?? 0,
-    frameEnds: html.match(/<!--\s*\/rmx:f\s*-->/g)?.length ?? 0,
-    hydrationStarts: html.match(/<!--\s*rmx:h:/g)?.length ?? 0,
-    hydrationEnds: html.match(/<!--\s*\/rmx:h\s*-->/g)?.length ?? 0,
-  }
-}
-
-function hasBalancedMarkerSummary(summary: Record<string, number>): boolean {
-  return (
-    summary.frameStarts === summary.frameEnds && summary.hydrationStarts === summary.hydrationEnds
-  )
-}

package/src/runtime/jsx.ts

@@ -1,5 +1,6 @@
 import type * as dom from './dom.d.ts'
 import type { Handle, RenderFn } from './component.ts'
+import { createRemixElement } from './core/vnode.ts'
 
 /**
  * Any valid element type accepted by JSX or {@link import('./create-element.ts').createElement}.
@@ -102,7 +103,7 @@ export type Props<T extends keyof JSX.IntrinsicElements> = NormalizeMixProp<
  */
 export function jsx(type: ElementType, props: ElementProps, key?: string): RemixElement
 export function jsx(type: ElementType, props: ElementProps, key?: string): RemixElement {
-  return { type, props: normalizeElementProps(props), key, $rmx: true }
+  return createRemixElement(type, props, key)
 }
 
 export { jsx as jsxDEV, jsx as jsxs }
@@ -367,32 +368,3 @@ declare global {
         IntrinsicHTMLElements {}
   }
 }
-
-function normalizeElementProps(props: ElementProps | null | undefined): ElementProps {
-  if (!props) return {}
-  if (!('mix' in props)) return props
-
-  let { mix, ...rest } = props
-  let normalizedMix = normalizeMixValue(mix)
-  return normalizedMix === undefined ? rest : { ...rest, mix: normalizedMix }
-}
-
-function normalizeMixValue(mix: unknown): unknown[] | undefined {
-  if (!mix) return undefined
-
-  let normalizedMix = flattenMixValue(mix)
-  return normalizedMix.length === 0 ? undefined : normalizedMix
-}
-
-function flattenMixValue(mix: unknown): unknown[] {
-  if (!mix) return []
-  if (!Array.isArray(mix)) return [mix]
-
-  let flattened: unknown[] = []
-
-  for (let item of mix) {
-    flattened.push(...flattenMixValue(item))
-  }
-
-  return flattened
-}