@remix-run/ui 0.1.1 → 0.2.0

package/src/runtime/core/attributes.ts

@@ -0,0 +1,118 @@
+import { normalizeCssValue } from '../../style/style.ts'
+import { normalizeSvgAttribute } from '../svg-attributes.ts'
+import type { ElementProps } from '../jsx.ts'
+
+const ATTRIBUTE_FALLBACK_NAMES = new Set([
+  'width',
+  'height',
+  'href',
+  'list',
+  'form',
+  'tabIndex',
+  'download',
+  'rowSpan',
+  'colSpan',
+  'role',
+  'popover',
+  'translate',
+])
+
+const BOOLEANISH_STRING_ATTRIBUTES = new Set([
+  'autoReverse',
+  'contenteditable',
+  'draggable',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+  'spellcheck',
+])
+
+export const FRAMEWORK_PROPS = new Set(['children', 'mix', 'key', 'animate', 'innerHTML', 'on'])
+
+export const SELF_CLOSING_TAGS = new Set([
+  'area',
+  'base',
+  'br',
+  'col',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
+])
+
+export function isChildlessElement(name: string): boolean {
+  return SELF_CLOSING_TAGS.has(name)
+}
+
+export function canUseProperty(
+  element: Element,
+  name: string,
+  isSvg: boolean,
+  attr: string,
+): element is Element & Record<string, unknown> {
+  if (isSvg) return false
+  if (ATTRIBUTE_FALLBACK_NAMES.has(name)) return false
+  if (isBooleanishStringAttribute(attr)) return false
+  return name in element
+}
+
+export function normalizeAttributeName(
+  name: string,
+  isSvg: boolean,
+): { ns?: string; attr: string } {
+  if (name.startsWith('aria-') || name.startsWith('data-')) return { attr: name }
+
+  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)
+}
+
+export function isBooleanishStringAttribute(name: string): boolean {
+  return BOOLEANISH_STRING_ATTRIBUTES.has(name)
+}
+
+export function shouldStringifyBooleanAttribute(name: string): boolean {
+  return isBooleanishStringAttribute(name) || name === 'value'
+}
+
+export 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 = toKebabCase(key)
+    let cssValue = Array.isArray(value) ? value.join(', ') : normalizeCssValue(key, value)
+
+    parts.push(`${cssKey}: ${cssValue};`)
+  }
+
+  return parts.join(' ')
+}
+
+export function getMergedClassName(props: ElementProps): string | undefined {
+  let classAttr = typeof props.class === 'string' ? props.class : ''
+  let className = typeof props.className === 'string' ? props.className : ''
+  let merged = classAttr && className ? `${classAttr} ${className}` : classAttr || className
+  return merged || undefined
+}
+
+export function toKebabCase(value: string): string {
+  return value.replace(/[A-Z]/g, (match) => `-${match.toLowerCase()}`)
+}

package/src/runtime/core/children.ts

@@ -0,0 +1,42 @@
+import type { RemixNode } from '../jsx.ts'
+
+export type EmptyChild = boolean | null | undefined
+export type PrimitiveChild = string | number | bigint
+
+export function isEmptyChild(value: RemixNode): value is EmptyChild {
+  return value == null || typeof value === 'boolean'
+}
+
+export function isPrimitiveChild(value: RemixNode): value is PrimitiveChild {
+  let type = typeof value
+  return type === 'string' || type === 'number' || type === 'bigint'
+}
+
+export function normalizeChildren(children: readonly RemixNode[]): RemixNode[] {
+  for (let child of children) {
+    if (Array.isArray(child)) {
+      return (children as unknown[]).flat(Infinity) as RemixNode[]
+    }
+  }
+
+  return children as RemixNode[]
+}
+
+export function packChildren(children: readonly RemixNode[]): RemixNode | undefined {
+  if (children.length === 0) {
+    return undefined
+  }
+
+  if (children.length === 1) {
+    let child = children[0]
+
+    if (child === undefined || isEmptyChild(child)) {
+      return undefined
+    }
+
+    return Array.isArray(child) ? normalizeChildren(child) : child
+  }
+
+  let normalized = normalizeChildren(children)
+  return normalized.length === 0 ? undefined : normalized
+}

package/src/runtime/core/props.ts

@@ -0,0 +1,187 @@
+import type { ElementProps } from '../jsx.ts'
+import {
+  canUseProperty,
+  getMergedClassName,
+  isBooleanishStringAttribute,
+  normalizeAttributeName,
+  serializeStyleObject,
+  toKebabCase,
+} from './attributes.ts'
+import { normalizeCssValue } from '../../style/style.ts'
+
+const SVG_NS = 'http://www.w3.org/2000/svg'
+
+function isFrameworkProp(name: string): boolean {
+  return (
+    name === 'children' ||
+    name === 'mix' ||
+    name === 'key' ||
+    name === 'animate' ||
+    name === 'innerHTML' ||
+    name === 'on'
+  )
+}
+
+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 {}
+}
+
+/**
+ * Patches DOM attributes and selected properties from old props to new props.
+ *
+ * @param curr Previous host props.
+ * @param next Next host props.
+ * @param dom Element to patch.
+ */
+export function patchHostProps(curr: ElementProps, next: ElementProps, dom: Element): void {
+  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')
+    }
+  }
+
+  for (let name in curr) {
+    if (isFrameworkProp(name)) continue
+    if (name === 'class' || name === 'className') continue
+    if (name in next && next[name] != null) continue
+
+    let { ns, attr } = normalizeAttributeName(name, isSvg)
+    if (canUseProperty(dom, name, isSvg, attr)) {
+      clearRuntimePropertyOnRemoval(dom, name)
+    }
+
+    if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
+    else dom.removeAttribute(attr)
+  }
+
+  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) continue
+
+    if (name === 'style' && isStyleObject(nextValue)) {
+      if (isStyleObject(prevValue)) {
+        patchStyleObject(dom, prevValue, nextValue)
+      } else {
+        dom.removeAttribute('style')
+        patchStyleObject(dom, undefined, nextValue)
+      }
+      continue
+    }
+
+    patchHostProp(dom, name, nextValue, isSvg)
+  }
+}
+
+function patchHostProp(dom: Element, name: string, value: unknown, isSvg: boolean): void {
+  let { ns, attr } = normalizeAttributeName(name, isSvg)
+
+  if (attr === 'style' && isStyleObject(value)) {
+    patchStyleObject(dom, undefined, value)
+    return
+  }
+
+  if (attr === 'style' && typeof value === 'string') {
+    dom.setAttribute('style', value)
+    return
+  }
+
+  if (canUseProperty(dom, name, isSvg, attr)) {
+    try {
+      dom[name] = value == null ? '' : value
+      return
+    } catch {}
+  }
+
+  if (typeof value === 'function') return
+
+  let isAriaOrData = name.startsWith('aria-') || name.startsWith('data-')
+  let isBooleanishString = isBooleanishStringAttribute(attr)
+  if (value != null && (value !== false || isAriaOrData || isBooleanishString)) {
+    let attrValue = name === 'popover' && value === true ? '' : String(value)
+    if (ns) dom.setAttributeNS(ns, attr, attrValue)
+    else dom.setAttribute(attr, attrValue)
+  } else {
+    if (ns) dom.removeAttributeNS(ns, toLocalName(attr))
+    else dom.removeAttribute(attr)
+  }
+}
+
+function isStyleObject(value: unknown): value is Record<string, unknown> {
+  return typeof value === 'object' && value !== null && !Array.isArray(value)
+}
+
+function patchStyleObject(
+  dom: Element,
+  curr: Record<string, unknown> | undefined,
+  next: Record<string, unknown>,
+): void {
+  if (!(dom instanceof HTMLElement || dom instanceof SVGElement)) {
+    dom.setAttribute('style', serializeStyleObject(next))
+    return
+  }
+
+  let style = dom.style
+  if (curr) {
+    for (let name in curr) {
+      let nextCssValue = styleValueToCss(name, next[name])
+      if (nextCssValue !== undefined) continue
+
+      let prevCssValue = styleValueToCss(name, curr[name])
+      if (prevCssValue === undefined) continue
+
+      style.removeProperty(toKebabCase(name))
+    }
+  }
+
+  for (let name in next) {
+    let nextCssValue = styleValueToCss(name, next[name])
+    if (nextCssValue === undefined) continue
+
+    let prevCssValue = curr ? styleValueToCss(name, curr[name]) : undefined
+    if (prevCssValue === nextCssValue) continue
+
+    style.setProperty(toKebabCase(name), nextCssValue)
+  }
+}
+
+function styleValueToCss(name: string, value: unknown): string | undefined {
+  if (value == null) return undefined
+  if (typeof value === 'boolean') return undefined
+  if (typeof value === 'number' && !Number.isFinite(value)) return undefined
+
+  if (Array.isArray(value)) {
+    return value.join(', ')
+  }
+
+  return normalizeCssValue(name, value)
+}

package/src/runtime/core/vnode.ts

@@ -0,0 +1,48 @@
+import type { ElementProps, ElementType, RemixElement, RemixNode } from '../jsx.ts'
+
+export function createRemixElement(
+  type: ElementType,
+  props: ElementProps | null | undefined,
+  key?: string,
+): RemixElement {
+  return {
+    $rmx: true,
+    key,
+    props: normalizeElementProps(props),
+    type,
+  }
+}
+
+export function isRemixElement(node: RemixNode): node is RemixElement {
+  return typeof node === 'object' && node !== null && '$rmx' in node
+}
+
+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)
+  }
+}

package/src/runtime/create-element.ts

@@ -1,5 +1,6 @@
 import { jsx } from './jsx.ts'
 import type { ElementType, RemixElement } from './jsx.ts'
+import { normalizeChildren } from './core/children.ts'
 
 /**
  * Creates a Remix virtual element from a JSX-like call signature.
@@ -20,7 +21,7 @@ export function createElement(
       console.error(new Error('mixin elements must not receive children'))
     }
   } else {
-    nextProps.children = children
+    nextProps.children = normalizeChildren(children)
   }
 
   if (nextProps.key != null) {

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'
 }