@remix-run/ui 0.1.1 → 0.2.0

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

@@ -9,6 +9,7 @@ import type { MixInput } from './mixins/mixin.ts'
  * - Copyright (c) 2015-present Jason Miller
  */
 type Booleanish = boolean | 'true' | 'false'
+type TranslateValue = 'yes' | 'no'
 
 /**
  * Layout animation configuration for FLIP-based position animations.
@@ -109,6 +110,8 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   attributeName?: Trackable<string | undefined>
   /** The `attributeType` SVG attribute. */
   attributeType?: Trackable<string | undefined>
+  /** The `autoReverse` SVG attribute. */
+  autoReverse?: Trackable<Booleanish | undefined>
   /** The `azimuth` SVG attribute. */
   azimuth?: Trackable<number | string | undefined>
   /** The `baseFrequency` SVG attribute. */
@@ -212,7 +215,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `exponent` SVG attribute. */
   exponent?: Trackable<number | string | undefined>
   /** The `externalResourcesRequired` SVG attribute. */
-  externalResourcesRequired?: Trackable<number | string | undefined>
+  externalResourcesRequired?: Trackable<Booleanish | undefined>
   /** The `fill` SVG attribute. */
   fill?: Trackable<string | undefined>
   /** The `fillOpacity` SVG attribute. */
@@ -238,7 +241,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `flood-opacity` SVG attribute. */
   'flood-opacity'?: Trackable<number | string | undefined>
   /** The `focusable` SVG attribute. */
-  focusable?: Trackable<number | string | undefined>
+  focusable?: Trackable<Booleanish | undefined>
   /** The `fontFamily` SVG attribute. */
   fontFamily?: Trackable<string | undefined>
   /** The `font-family` SVG attribute. */
@@ -446,7 +449,7 @@ export interface SVGProps<eventTarget extends EventTarget = SVGElement>
   /** The `pointsAtZ` SVG attribute. */
   pointsAtZ?: Trackable<number | string | undefined>
   /** The `preserveAlpha` SVG attribute. */
-  preserveAlpha?: Trackable<number | string | undefined>
+  preserveAlpha?: Trackable<Booleanish | undefined>
   /** The `preserveAspectRatio` SVG attribute. */
   preserveAspectRatio?: Trackable<string | undefined>
   /** The `primitiveUnits` SVG attribute. */
@@ -1263,7 +1266,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `decoding` HTML attribute. */
   decoding?: Trackable<'sync' | 'async' | 'auto' | undefined>
   /** The `draggable` HTML attribute. */
-  draggable?: Trackable<boolean | undefined>
+  draggable?: Trackable<Booleanish | undefined>
   /** The `encType` HTML attribute. */
   encType?: Trackable<string | undefined>
   /** The `enctype` HTML attribute. */
@@ -1487,7 +1490,9 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `span` HTML attribute. */
   span?: Trackable<number | undefined>
   /** The `spellcheck` HTML attribute. */
-  spellcheck?: Trackable<boolean | undefined>
+  spellcheck?: Trackable<Booleanish | undefined>
+  /** The `spellCheck` HTML attribute. */
+  spellCheck?: Trackable<Booleanish | undefined>
   /** The `src` HTML attribute. */
   src?: Trackable<string | undefined>
   /** The `srcDoc` HTML attribute. */
@@ -1551,7 +1556,7 @@ export interface AllHTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `results` HTML attribute. */
   results?: Trackable<number | undefined>
   /** The `translate` HTML attribute. */
-  translate?: Trackable<boolean | undefined>
+  translate?: Trackable<TranslateValue | undefined>
 
   // RDFa Attributes
   /** The `about` HTML attribute. */
@@ -1632,7 +1637,7 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `dir` HTML attribute. */
   dir?: Trackable<'auto' | 'rtl' | 'ltr' | undefined>
   /** The `draggable` HTML attribute. */
-  draggable?: Trackable<boolean | undefined>
+  draggable?: Trackable<Booleanish | undefined>
   /** The `enterkeyhint` HTML attribute. */
   enterkeyhint?: Trackable<
     'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send' | undefined
@@ -1662,7 +1667,9 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `slot` HTML attribute. */
   slot?: Trackable<string | undefined>
   /** The `spellcheck` HTML attribute. */
-  spellcheck?: Trackable<boolean | undefined>
+  spellcheck?: Trackable<Booleanish | undefined>
+  /** The `spellCheck` HTML attribute. */
+  spellCheck?: Trackable<Booleanish | undefined>
   /** The `style` HTML attribute. */
   style?: Trackable<string | StyleProps | undefined>
   /** The `tabindex` HTML attribute. */
@@ -1672,7 +1679,7 @@ export interface HTMLProps<eventTarget extends EventTarget = EventTarget>
   /** The `title` HTML attribute. */
   title?: Trackable<string | undefined>
   /** The `translate` HTML attribute. */
-  translate?: Trackable<boolean | undefined>
+  translate?: Trackable<TranslateValue | undefined>
 
   // WAI-ARIA Attributes
   // Most elements only allow a subset of roles and so this
@@ -3418,6 +3425,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,
@@ -138,6 +158,7 @@ export type Frame = {
 }
 
 type RenderOptions = {
+  flushKind?: FlushKind
   initialHydrationTracker?: InitialHydrationTracker
   signal?: AbortSignal
 }
@@ -211,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
     }
@@ -237,39 +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 &&
       htmlContent !== undefined &&
-      isFullDocumentHtml(htmlContent)
+      options?.flushKind === 'document'
 
     if (isFullDocumentReload && htmlContent !== undefined) {
-      // 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(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,
       })
 
@@ -282,8 +306,7 @@ export function createFrame(root: FrameRoot, init: FrameInit): Frame {
 
     let fragment =
       htmlContent !== undefined ? createFragmentFromString(container.doc, htmlContent) : content
-    context.styleManager.reset()
-    context.styleManager.adoptServerStyles(
+    context.styleManager.replaceServerStyles(
       collectFrameServerStyleTags(createElementContainer(fragment)),
     )
     removeEmptyHeads(fragment)
@@ -344,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)
 
@@ -986,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 {
@@ -1006,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
       }
     }
 
@@ -1025,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
@@ -1104,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
@@ -1201,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}.
@@ -43,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[]
@@ -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,31 +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: unknown[] = []
-  flattenMixValue(mix, normalizedMix)
-  return normalizedMix.length === 0 ? undefined : normalizedMix
-}
-
-function flattenMixValue(mix: unknown, out: unknown[]): void {
-  if (!mix) return
-  if (!Array.isArray(mix)) {
-    out.push(mix)
-    return
-  }
-  for (let item of mix) {
-    flattenMixValue(item, out)
-  }
-}