@kudzujs/core 0.2.3 → 0.4.0

package/framework/core.d.ts

@@ -6,6 +6,8 @@ export function behavior(commands: Array<["add" | "set" | "log", unknown, unknow
 export function nativeBehavior(module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 export function binding(value: unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 export function bindingValue(value: unknown): unknown
+export function conditional(kind: "and" | "ternary", value: unknown, truthy: () => unknown, falsy: () => unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
+export function list(items: unknown, keyField: string, render: (item: unknown) => unknown): unknown
 
 export function renderPage(
   component: (props: Record<string, never>) => unknown | Promise<unknown>,
@@ -31,6 +33,7 @@ export function renderPage(
   html: string
   hasBehaviors: boolean
   hasBindings: boolean
+  hasLists: boolean
   hasStateSeed: boolean
   plan: {
     states: Array<{ id: string; name: string; initialValue: unknown }>
@@ -40,7 +43,7 @@ export function renderPage(
       native?: { module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown> }
     }>
     bindings: Array<{
-      target: "class" | "disabled" | "value"
+      target: string
       state?: string
       module?: string
       handler?: string
@@ -49,5 +52,7 @@ export function renderPage(
       scopeStates?: Record<string, string>
       scopeBindings?: Record<string, unknown>
     }>
+    conditions: Array<Record<string, unknown>>
+    lists: Array<Record<string, unknown>>
   }
 }>

package/framework/core.mjs

@@ -2,6 +2,10 @@ const signalMarker = Symbol("kudzu.signal")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
 const bindingMarker = Symbol("kudzu.binding")
+const conditionalMarker = Symbol("kudzu.conditional")
+const listMarker = Symbol("kudzu.list")
+const listFieldMarker = Symbol("kudzu.listField")
+const noSelectValue = Symbol("kudzu.no-select-value")
 
 let renderContext
 
@@ -53,6 +57,58 @@ export function nativeBehavior(module, handler, states, scope) {
 }
 
 export function binding(value, module, handler, states, scope) {
+  return { [bindingMarker]: true, value, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+export function conditional(kind, value, truthy, falsy, module, handler, states, scope) {
+  return { [conditionalMarker]: true, kind, value, truthy, falsy, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+export function list(items, keyField, render) {
+  if (!items?.[signalMarker] || !Array.isArray(items.value)) throw new Error("A keyed list must use local array state")
+  const keys = new Set()
+  for (const item of items.value) {
+    const key = item?.[keyField]
+    if (!validListKey(key)) throw new Error(`Keyed list key "${keyField}" must be a string or finite number`)
+    assertListItem(item)
+    assertListValue(item, new Set())
+    const token = `${typeof key}:${key}`
+    if (keys.has(token)) throw new Error(`Duplicate keyed list key: ${String(key)}`)
+    keys.add(token)
+  }
+  return { [listMarker]: true, items, keyField, render }
+}
+
+function validListKey(key) {
+  return typeof key === "string" || typeof key === "number" && Number.isFinite(key)
+}
+
+function assertListItem(item) {
+  const prototype = item && typeof item === "object" ? Object.getPrototypeOf(item) : undefined
+  if (!item || Array.isArray(item) || prototype !== Object.prototype && prototype !== null) throw new Error("Keyed list items must be plain objects")
+}
+
+function assertListValue(value, seen) {
+  if (value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0)) return
+  if (!value || typeof value !== "object") throw new Error(`Keyed list items must contain only JSON-safe values`)
+  if (seen.has(value)) throw new Error("Keyed list items must not contain cycles")
+  const prototype = Object.getPrototypeOf(value)
+  if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null) throw new Error("Keyed list items must contain only arrays and plain objects")
+  if (Object.getOwnPropertySymbols(value).length) throw new Error("Keyed list items must not contain symbols")
+  seen.add(value)
+  const descriptors = Object.getOwnPropertyDescriptors(value)
+  if (Array.isArray(value) && Object.keys(descriptors).some(key => key !== "length" && !/^(0|[1-9]\d*)$/.test(key))) throw new Error("Keyed list arrays must not contain custom properties")
+  if (Array.isArray(value) && Object.keys(value).length !== value.length) throw new Error("Keyed list arrays must not contain holes")
+  for (const [key, descriptor] of Object.entries(descriptors)) {
+    if (Array.isArray(value) && key === "length") continue
+    if (!descriptor.enumerable) throw new Error("Keyed list items must not contain non-enumerable properties")
+    if (!("value" in descriptor)) throw new Error("Keyed list items must not contain accessors")
+    assertListValue(descriptor.value, seen)
+  }
+  seen.delete(value)
+}
+
+function reactiveDescriptor(module, handler, states, scope) {
   const scopeStates = {}
   const serializedScope = {}
   const scopeBindings = {}
@@ -62,8 +118,6 @@ export function binding(value, module, handler, states, scope) {
     else serializedScope[name] = serializeCapture(name, entry, new Set())
   }
   return {
-    [bindingMarker]: true,
-    value,
     module,
     handler,
     states: Object.fromEntries(states.map(([name, signal]) => {
@@ -116,7 +170,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, states: {}, textStates: new Set(), events: [], bindings: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false }
+  renderContext = { nextState: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false }
 
   try {
     const body = await renderNode({ type: component, props: {} })
@@ -134,22 +188,28 @@ export async function renderPage(component, metadata = {}) {
     const bindingRuntime = renderContext.hasBindings
       ? '<script type="module" src="/assets/kudzu-binding.js"></script>'
       : ""
+    const listRuntime = renderContext.hasLists
+      ? '<script type="module" src="/assets/kudzu-list.js"></script>'
+      : ""
     const initialState = renderContext.hasBehaviors
-      ? Object.entries(renderContext.states).filter(([id]) => !renderContext.textStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
+      ? Object.entries(renderContext.states).filter(([id]) => !renderContext.textStates.has(id) || renderContext.conditionStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
       : []
     const state = initialState.length
-      ? ` data-k-state="${escapeAttribute(JSON.stringify(initialState))}"`
+      ? ` data-k-state='${escapeJsonAttribute(initialState)}'`
       : ""
 
     return {
-      html: `<!doctype html>\n<html lang="${escapeAttribute(metadata.lang ?? "en")}">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>${title}</title>\n${head}${styles}\n</head>\n<body${state}>\n${body}\n${runtime}\n${bindingRuntime}\n${nativeRuntime}\n</body>\n</html>\n`,
+      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styles}</head><body${state}>${body}${runtime}${bindingRuntime}${listRuntime}${nativeRuntime}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasBindings: renderContext.hasBindings,
+      hasLists: renderContext.hasLists,
       hasStateSeed: initialState.length > 0,
       plan: {
         states: Object.entries(renderContext.states).map(([id, state]) => ({ id, ...state })),
         events: renderContext.events,
-        bindings: renderContext.bindings
+        bindings: renderContext.bindings,
+        conditions: renderContext.conditions,
+        lists: renderContext.lists
       }
     }
   } finally {
@@ -172,7 +232,7 @@ function renderMetadata(metadata) {
 
   meta("og:title", metadata.title, true)
   meta("og:description", metadata.description, true)
-  meta("og:type", metadata.type ?? "website", true)
+  if (metadata.type || metadata.title || metadata.description || metadata.url || metadata.image || metadata.siteName || metadata.locale) meta("og:type", metadata.type ?? "website", true)
   meta("og:url", metadata.url, true)
   meta("og:image", metadata.image, true)
   if (metadata.image) {
@@ -187,47 +247,94 @@ function renderMetadata(metadata) {
   meta("twitter:description", metadata.description)
   meta("twitter:image", metadata.twitterImage ?? metadata.image)
 
-  return tags.length ? `${tags.join("\n")}\n` : ""
+  return tags.join("")
 }
 
-async function renderNode(node) {
+async function renderNode(node, namespace, selectValue = noSelectValue) {
   if (node == null || node === false || node === true) return ""
   if (Array.isArray(node)) {
     let html = ""
-    for (const child of node) html += await renderNode(child)
+    for (const child of node) html += await renderNode(child, namespace, selectValue)
     return html
   }
   if (node?.[signalMarker]) {
     renderContext.textStates.add(node.id)
-    return `<span data-k-text="${node.id}" data-k-value="${escapeAttribute(JSON.stringify(node.value))}">${escapeHtml(node.value)}</span>`
+    if (renderContext.conditionDepth || renderContext.listDepth) renderContext.conditionStates.add(node.id)
+    return `<span data-k-text="${node.id}" data-k-value='${escapeJsonAttribute(node.value)}'>${escapeHtml(node.value)}</span>`
   }
   if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
     return escapeHtml(node)
   }
-  if (node instanceof Promise) return renderNode(await node)
+  if (node instanceof Promise) return renderNode(await node, namespace, selectValue)
+  if (node?.[conditionalMarker]) {
+    const descriptor = bindingDescriptor(node)
+    const stateIds = reactiveStateIds(descriptor)
+    if (!stateIds.size) return renderNode(node.value ? node.truthy() : node.falsy(), namespace, selectValue)
+    if (namespace) throw new Error(`Reactive conditional DOM is not supported inside ${namespace}`)
+
+    const id = `c${renderContext.nextCondition++}`
+    renderContext.conditionDepth++
+    const truthy = await renderNode(node.truthy(), namespace, selectValue)
+    const falsy = await renderNode(node.falsy(), namespace, selectValue)
+    renderContext.conditionDepth--
+    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor }
+    for (const stateId of stateIds) renderContext.conditionStates.add(stateId)
+    renderContext.conditions.push(metadata)
+    renderContext.hasBehaviors = true
+    renderContext.hasBindings = true
+    const encoded = escapeJsonAttribute(metadata)
+    const current = node.value ? truthy : node.kind === "and" ? await renderNode(node.value, namespace, selectValue) : falsy
+    return `<template data-k-if='${encoded}'><template data-k-true>${truthy}</template><template data-k-false>${falsy}</template></template>${current}<template data-k-if-end="${id}"></template>`
+  }
+  if (node?.[listMarker]) return renderList(node, namespace, selectValue)
+  if (node?.[listFieldMarker]) {
+    return `<template data-k-list-text="${escapeAttribute(node.field)}"></template>${escapeHtml(node.value ?? "")}<template data-k-list-text-end></template>`
+  }
   if (!node || typeof node !== "object" || !("type" in node)) {
     throw new Error(`Cannot render ${String(node)}`)
   }
 
-  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children)
-  if (typeof node.type === "function") return renderNode(await node.type(node.props))
+  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children, namespace, selectValue)
+  if (typeof node.type === "function") return renderNode(await node.type(node.props), namespace, selectValue)
 
   const tag = node.type
   const props = node.props ?? {}
+  const childSelectValue = tag === "select"
+    ? Object.hasOwn(props, "value") ? bindingValue(props.value) : noSelectValue
+    : selectValue
+  const childNamespace = tag === "svg" || tag === "math"
+    ? tag
+    : namespace === "svg" && tag === "foreignObject" ? undefined : namespace
   let attributes = ""
+  const attributeBindings = []
+  const listAttributes = []
+
+  if (renderContext.listRoot) {
+    const root = renderContext.listRoot
+    renderContext.listRoot = undefined
+    attributes += root.template
+      ? ` data-k-list-root="${root.id}"`
+      : ` data-k-list-item='${escapeJsonAttribute([root.id, root.key])}'`
+  }
 
   for (const [rawName, value] of Object.entries(props)) {
     if (rawName === "children" || rawName === "key") continue
+    if (rawName === "selected" && selectValue !== noSelectValue) continue
+    if (/^on/i.test(rawName) && !/^on[A-Z]/.test(rawName)) throw new Error(`${rawName} must use a camelCase event handler`)
+    if (rawName.toLowerCase().startsWith("data-k-")) throw new Error(`${rawName} uses Kudzu's reserved data-k-* prefix`)
+    if (["style", "ref", "dangerouslysetinnerhtml"].includes(rawName.toLowerCase()) && (value?.[signalMarker] || value?.[bindingMarker])) {
+      throw new Error(`Reactive ${rawName} is not supported`)
+    }
 
     if (/^on[A-Z]/.test(rawName)) {
       const event = rawName.slice(2).toLowerCase()
       if (value?.[behaviorMarker]) {
         const commands = JSON.stringify(value.commands)
-        attributes += ` data-k-on-${event}="${escapeAttribute(commands)}"`
+        attributes += ` data-k-on-${event}='${escapeJsonAttribute(value.commands)}'`
         renderContext.events.push({ event, commands: value.commands })
       } else if (value?.[nativeBehaviorMarker]) {
         const native = { module: value.module, handler: value.handler, states: value.states, scope: value.scope }
-        attributes += ` data-k-native-${event}="${escapeAttribute(JSON.stringify(native))}"`
+        attributes += ` data-k-native-${event}='${escapeJsonAttribute(native)}'`
         renderContext.events.push({ event, native })
         renderContext.hasNativeBehaviors = true
       } else {
@@ -238,48 +345,103 @@ async function renderNode(node) {
     }
 
     const name = rawName === "className" ? "class" : rawName === "htmlFor" ? "for" : rawName
-    const target = name === "class" || name === "disabled" || name === "value" ? name : undefined
-    if (target && (value?.[signalMarker] || value?.[bindingMarker])) {
+    const propertyTarget = name === "class" || name === "disabled" || name === "value" || name === "checked"
+    if (value?.[listFieldMarker]) {
+      attributes += renderAttribute(name, value.value)
+      listAttributes.push([name, value.field])
+      continue
+    }
+    if (value?.[signalMarker] || value?.[bindingMarker]) {
       const initialValue = value[signalMarker] ? value.value : value.value
       const reactive = value[signalMarker] || Object.keys(value.states).length > 0 || Object.keys(value.scopeStates).length > 0 || Object.keys(value.scopeBindings).length > 0
       if (!reactive) {
-        attributes += renderAttribute(name, initialValue)
+        if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
         continue
       }
       const descriptor = value[signalMarker]
         ? { state: value.id }
         : bindingDescriptor(value)
-      attributes += renderAttribute(name, initialValue)
-      attributes += ` data-k-bind-${target}="${escapeAttribute(JSON.stringify(descriptor))}"`
-      renderContext.bindings.push({ target, ...descriptor })
+      if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
+      if (propertyTarget) attributes += ` data-k-bind-${name}='${escapeJsonAttribute(descriptor)}'`
+      else attributeBindings.push({ target: name, ...descriptor })
+      renderContext.bindings.push({ target: name, ...descriptor })
+      if (renderContext.conditionDepth || renderContext.listDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
       renderContext.hasBehaviors = true
       renderContext.hasBindings = true
       continue
     }
 
-    if (value == null || value === false) continue
-    if (value === true) {
-      attributes += ` ${name}`
-    } else if (name === "style" && typeof value === "object") {
+    if (tag === "select" && name === "value") continue
+    if (name === "style" && value && typeof value === "object") {
       const style = Object.entries(value).map(([property, entry]) => `${toKebabCase(property)}:${entry}`).join(";")
       attributes += ` style="${escapeAttribute(style)}"`
     } else {
-      attributes += ` ${name}="${escapeAttribute(value)}"`
+      attributes += renderAttribute(name, value)
     }
   }
 
+  if (attributeBindings.length) attributes += ` data-k-bind-attrs='${escapeJsonAttribute(attributeBindings)}'`
+  if (listAttributes.length) attributes += ` data-k-list-attrs='${escapeJsonAttribute(listAttributes)}'`
+
+  if (tag === "option" && selectValue !== noSelectValue && String(optionValue(props)) === (selectValue == null ? "" : String(selectValue))) attributes += " selected"
+
   const voidElements = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"])
   if (voidElements.has(tag)) return `<${tag}${attributes}>`
-  return `<${tag}${attributes}>${await renderNode(props.children)}</${tag}>`
+  return `<${tag}${attributes}>${await renderNode(props.children, childNamespace, childSelectValue)}</${tag}>`
+}
+
+async function renderList(node, namespace, selectValue) {
+  if (namespace) throw new Error(`Reactive keyed lists are not supported inside ${namespace}`)
+  const id = `l${renderContext.nextList++}`
+  const descriptor = { id, state: node.items.id, key: node.keyField }
+  const itemProxy = value => new Proxy({}, {
+    get: (_, field) => ({ [listFieldMarker]: true, field: String(field), value: value?.[field] })
+  })
+  renderContext.listDepth++
+  try {
+    renderContext.listRoot = { id, template: true }
+    const template = await renderNode(node.render(itemProxy(undefined)), namespace, selectValue)
+    let current = ""
+    for (const item of node.items.value) {
+      renderContext.listRoot = { id, key: item[node.keyField], template: false }
+      current += await renderNode(node.render(itemProxy(item)), namespace, selectValue)
+    }
+    renderContext.lists.push(descriptor)
+    renderContext.hasBehaviors = true
+    renderContext.hasLists = true
+    return `<template data-k-list='${escapeJsonAttribute(descriptor)}'>${template}</template>${current}<template data-k-list-end="${id}"></template>`
+  } finally {
+    renderContext.listRoot = undefined
+    renderContext.listDepth--
+  }
+}
+
+function optionValue(props) {
+  if (props.value != null) return bindingValue(props.value)
+  return Array.isArray(props.children) ? props.children.join("") : props.children ?? ""
+}
+
+function reactiveStateIds(descriptor) {
+  if (descriptor.state) return new Set([descriptor.state])
+  return new Set([
+    ...Object.values(descriptor.states),
+    ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scopeBindings).flatMap(entry => [...reactiveStateIds(entry)])
+  ])
 }
 
 function renderAttribute(name, value) {
-  if (name === "disabled") return value ? " disabled" : ""
+  if (name === "disabled" || name === "checked") return value ? ` ${name}` : ""
   if (name === "value") return value == null ? "" : ` value="${escapeAttribute(value)}"`
-  if (value == null || value === false) return ""
+  if (value == null || (value === false && !isStringBooleanAttribute(name))) return ""
+  if (value === true && !isStringBooleanAttribute(name)) return ` ${name}`
   return ` ${name}="${escapeAttribute(value)}"`
 }
 
+function isStringBooleanAttribute(name) {
+  return name.startsWith("aria-") || name.startsWith("data-")
+}
+
 function escapeHtml(value) {
   return String(value)
     .replaceAll("&", "&amp;")
@@ -292,6 +454,10 @@ function escapeAttribute(value) {
   return escapeHtml(value).replaceAll("'", "&#39;")
 }
 
+function escapeJsonAttribute(value) {
+  return JSON.stringify(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("'", "&#39;")
+}
+
 function toKebabCase(value) {
   return value.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`)
 }

package/framework/list-runtime.js

@@ -0,0 +1,185 @@
+import { browserState, mountDom, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
+
+const listTargets = new Map()
+const listRegistrations = new WeakMap()
+const mountedLists = new WeakSet()
+
+function commitLists(id) {
+  const lists = listTargets.get(id)
+  if (!lists) return
+  for (const list of lists) {
+    if (!list.start.isConnected) unregisterList(list.start)
+    else updateList(list)
+  }
+}
+
+registerCommitter(commitLists)
+registerMountHook(mountLists)
+registerUnmountHook(unmountLists)
+
+if (typeof document !== "undefined") mountDom(document)
+
+function mountLists(root) {
+  for (const start of matching(root, "template[data-k-list]")) {
+    if (mountedLists.has(start)) continue
+    mountedLists.add(start)
+    const descriptor = JSON.parse(start.dataset.kList)
+    const roots = [...start.ownerDocument.querySelectorAll("[data-k-list-item]")].filter(node => JSON.parse(node.dataset.kListItem)[0] === descriptor.id)
+    const list = {
+      start,
+      descriptor,
+      roots: new Map(roots.map(node => [keyToken(JSON.parse(node.dataset.kListItem)[1]), node])),
+      container: roots[0]?.parentNode,
+      boundary: roots.length ? roots.at(-1).nextSibling : findEnd(start, descriptor.id)
+    }
+    register(listTargets, descriptor.state, list)
+    listRegistrations.set(start, { state: descriptor.state, list })
+    updateList(list)
+  }
+}
+
+function unmountLists(root) {
+  for (const start of matching(root, "template[data-k-list]")) unregisterList(start)
+}
+
+function unregisterList(start) {
+  const registration = listRegistrations.get(start)
+  if (registration) {
+    const lists = listTargets.get(registration.state)
+    lists?.delete(registration.list)
+    if (!lists?.size) listTargets.delete(registration.state)
+  }
+  listRegistrations.delete(start)
+  mountedLists.delete(start)
+}
+
+function updateList(list) {
+  const items = browserState.get(list.descriptor.state)
+  if (!Array.isArray(items)) throw new Error("Keyed list state must remain an array")
+  const entries = []
+  const keys = new Set()
+  for (const item of items) {
+    const key = item?.[list.descriptor.key]
+    if (!validListKey(key)) throw new Error(`Keyed list key "${list.descriptor.key}" must be a string or finite number`)
+    assertListItem(item)
+    assertListValue(item, new Set())
+    const token = keyToken(key)
+    if (keys.has(token)) throw new Error(`Duplicate keyed list key: ${String(key)}`)
+    keys.add(token)
+    entries.push({ item, key, token })
+  }
+  const next = []
+  for (const { item, key, token } of entries) {
+    let node = list.roots.get(token)
+    if (!node) {
+      const fragment = list.start.content.cloneNode(true)
+      node = fragment.querySelector(`[data-k-list-root="${list.descriptor.id}"]`)
+      if (!node) throw new Error("Keyed list template has no root element")
+      node.removeAttribute("data-k-list-root")
+      node.dataset.kListItem = JSON.stringify([list.descriptor.id, key])
+      fillListItem(node, item)
+      ;(list.container ?? list.start.parentNode).insertBefore(fragment, list.boundary)
+      list.container ??= node.parentNode
+      mountDom(node)
+    } else {
+      fillListItem(node, item)
+    }
+    next.push([token, node])
+  }
+  for (const [token, node] of list.roots) {
+    if (keys.has(token)) continue
+    unmountDom(node)
+    node.remove()
+  }
+  const parent = list.container ?? list.start.parentNode
+  for (const [, node] of next) parent.insertBefore(node, list.boundary)
+  list.roots = new Map(next)
+}
+
+function fillListItem(root, item) {
+  for (const marker of matching(root, "template[data-k-list-text]")) {
+    const value = item?.[marker.dataset.kListText]
+    let end = marker.nextSibling
+    while (end && !(end.nodeType === Node.ELEMENT_NODE && end.matches("template[data-k-list-text-end]"))) end = end.nextSibling
+    if (!end) throw new Error("Keyed list text marker has no end")
+    const range = marker.ownerDocument.createRange()
+    range.setStartAfter(marker)
+    range.setEndBefore(end)
+    range.deleteContents()
+    end.before(marker.ownerDocument.createTextNode(value == null ? "" : String(value)))
+  }
+  for (const node of matching(root, "[data-k-list-attrs]")) {
+    for (const [target, field] of JSON.parse(node.dataset.kListAttrs)) patchBinding(node, target, item?.[field])
+  }
+}
+
+function patchBinding(node, target, value) {
+  if (target === "disabled") {
+    node.toggleAttribute("disabled", Boolean(value))
+  } else if (target === "checked") {
+    node.checked = Boolean(value)
+  } else if (target === "value") {
+    const next = value == null ? "" : String(value)
+    if (node.value !== next) node.value = next
+  } else if (target === "class" && (value == null || value === false)) {
+    node.removeAttribute("class")
+  } else if (target === "class") {
+    node.setAttribute("class", String(value))
+  } else if (value == null || (value === false && !isStringBooleanAttribute(target))) {
+    node.removeAttribute(target)
+  } else {
+    node.setAttribute(target, value === true && !isStringBooleanAttribute(target) ? "" : String(value))
+  }
+}
+
+function keyToken(key) {
+  return `${typeof key}:${key}`
+}
+
+function validListKey(key) {
+  return typeof key === "string" || typeof key === "number" && Number.isFinite(key)
+}
+
+function assertListItem(item) {
+  const prototype = item && typeof item === "object" ? Object.getPrototypeOf(item) : undefined
+  if (!item || Array.isArray(item) || prototype !== Object.prototype && prototype !== null) throw new Error("Keyed list items must be plain objects")
+}
+
+function assertListValue(value, seen) {
+  if (value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0)) return
+  if (!value || typeof value !== "object") throw new Error("Keyed list items must contain only JSON-safe values")
+  if (seen.has(value)) throw new Error("Keyed list items must not contain cycles")
+  const prototype = Object.getPrototypeOf(value)
+  if (!Array.isArray(value) && prototype !== Object.prototype && prototype !== null) throw new Error("Keyed list items must contain only arrays and plain objects")
+  if (Object.getOwnPropertySymbols(value).length) throw new Error("Keyed list items must not contain symbols")
+  seen.add(value)
+  const descriptors = Object.getOwnPropertyDescriptors(value)
+  if (Array.isArray(value) && Object.keys(descriptors).some(key => key !== "length" && !/^(0|[1-9]\d*)$/.test(key))) throw new Error("Keyed list arrays must not contain custom properties")
+  if (Array.isArray(value) && Object.keys(value).length !== value.length) throw new Error("Keyed list arrays must not contain holes")
+  for (const [key, descriptor] of Object.entries(descriptors)) {
+    if (Array.isArray(value) && key === "length") continue
+    if (!descriptor.enumerable) throw new Error("Keyed list items must not contain non-enumerable properties")
+    if (!("value" in descriptor)) throw new Error("Keyed list items must not contain accessors")
+    assertListValue(descriptor.value, seen)
+  }
+  seen.delete(value)
+}
+
+function findEnd(start, id) {
+  return [...start.ownerDocument.querySelectorAll("template[data-k-list-end]")]
+    .find(node => node.dataset.kListEnd === id)
+}
+
+function register(targets, id, entry) {
+  const entries = targets.get(id) ?? new Set()
+  entries.add(entry)
+  targets.set(id, entries)
+}
+
+function matching(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
+}
+
+function isStringBooleanAttribute(name) {
+  return name.startsWith("aria-") || name.startsWith("data-")
+}

package/framework/runtime.js

@@ -1,41 +1,30 @@
 export function applyCommands(state, commands, commit, log = console.log) {
-  const changed = new Set()
-
-  for (const [operation, id, operand] of commands) {
-    const current = state.get(id)
-    if (operation === "log") {
-      log(operand, current)
-      continue
+  const changed=new Set
+  for(const [operation,id,value] of commands){
+    const current=state.get(id)
+    if(operation==="log")log(value,current)
+    else {
+      state.set(id,operation==="add"?current+value:value)
+      changed.add(id)
     }
-    state.set(id, operation === "add" ? current + operand : operand)
-    changed.add(id)
   }
-
-  for (const id of changed) commit(id, state.get(id))
+  for(const id of changed)commit(id,state.get(id))
 }
 
-export const browserState = new Map()
+export const browserState=new Map
 
 export function commitDom(id, value) {
-  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) node.textContent = value
+  for(const node of document.querySelectorAll(`[data-k-text="${id}"]`))node.textContent = value
 }
 
-if (typeof document !== "undefined") {
+if(typeof document!=="undefined"){
   const initialState = document.body.dataset.kState
   if (initialState) for (const [id, value] of JSON.parse(initialState)) browserState.set(id, value)
-  for (const node of document.querySelectorAll("[data-k-text]")) browserState.set(node.dataset.kText, JSON.parse(node.dataset.kValue))
+  for(const node of document.querySelectorAll("[data-k-text]"))browserState.set(node.dataset.kText,JSON.parse(node.dataset.kValue))
 
   const eventNames = ["click", "input", "change"]
-  for (const eventName of eventNames) {
-    document.addEventListener(eventName, event => {
-      const target = event.target.closest(`[data-k-on-${eventName}]`)
-      if (!target) return
-      const commands = target.dataset[`kOn${capitalize(eventName)}`]
-      applyCommands(browserState, JSON.parse(commands), commitDom)
+  for(const eventName of eventNames)document.addEventListener(eventName,event=>{
+      const target=event.target.closest(`[data-k-on-${eventName}]`)
+      if(target)applyCommands(browserState,JSON.parse(target.getAttribute(`data-k-on-${eventName}`)),commitDom)
     })
-  }
-}
-
-function capitalize(value) {
-  return value[0].toUpperCase() + value.slice(1)
 }