@kudzujs/core 0.3.0 → 0.4.1

package/framework/core.mjs

@@ -3,6 +3,11 @@ 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 listExpressionMarker = Symbol("kudzu.listExpression")
+const listItemMarker = Symbol("kudzu.listItem")
+const noSelectValue = Symbol("kudzu.no-select-value")
 
 let renderContext
 
@@ -61,6 +66,64 @@ export function conditional(kind, value, truthy, falsy, module, handler, states,
   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 }
+}
+
+export function listField(read, field) {
+  return { [listFieldMarker]: true, field, value: renderContext?.listTemplate ? undefined : read() }
+}
+
+export function listExpression(read, module, handler) {
+  const value = renderContext?.listTemplate ? undefined : read()
+  if (value && typeof value.then === "function") throw new Error("Derived keyed list item expressions must return synchronous values")
+  return { [listExpressionMarker]: true, module, handler, value }
+}
+
+export function listItem() {
+  return { [listItemMarker]: true }
+}
+
+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) throw new Error("Keyed list items must be ordinary 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) throw new Error("Keyed list items must contain only arrays and ordinary 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 = {}
@@ -92,6 +155,7 @@ function bindingDescriptor(value) {
 }
 
 function serializeCapture(name, value, seen) {
+  if (value?.[listItemMarker]) return { type: "list-item" }
   if (value === null || typeof value === "string" || typeof value === "boolean") return value
   if (typeof value === "number") {
     return Number.isFinite(value) && !Object.is(value, -0) ? value : { type: "number", value: String(value) }
@@ -123,7 +187,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, nextCondition: 0, conditionDepth: 0, states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false }
+  renderContext = { nextState: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, 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: {} })
@@ -141,6 +205,9 @@ 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) || renderContext.conditionStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
       : []
@@ -149,15 +216,17 @@ export async function renderPage(component, metadata = {}) {
       : ""
 
     return {
-      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}${nativeRuntime}</body></html>`,
+      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,
-        conditions: renderContext.conditions
+        conditions: renderContext.conditions,
+        lists: renderContext.lists
       }
     }
   } finally {
@@ -198,32 +267,32 @@ function renderMetadata(metadata) {
   return tags.join("")
 }
 
-async function renderNode(node, namespace) {
+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, namespace)
+    for (const child of node) html += await renderNode(child, namespace, selectValue)
     return html
   }
   if (node?.[signalMarker]) {
     renderContext.textStates.add(node.id)
-    if (renderContext.conditionDepth) renderContext.conditionStates.add(node.id)
+    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, namespace)
+  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)
+    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())
-    const falsy = await renderNode(node.falsy())
+    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)
@@ -231,36 +300,67 @@ async function renderNode(node, namespace) {
     renderContext.hasBehaviors = true
     renderContext.hasBindings = true
     const encoded = escapeJsonAttribute(metadata)
-    const current = node.value ? truthy : node.kind === "and" ? await renderNode(node.value) : falsy
+    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?.[listExpressionMarker]) {
+    const descriptor = { module: node.module, handler: node.handler }
+    return `<template data-k-list-expression='${escapeJsonAttribute(descriptor)}'></template>${escapeHtml(node.value ?? "")}<template data-k-list-expression-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, namespace)
-  if (typeof node.type === "function") return renderNode(await node.type(node.props), namespace)
+  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 = []
+  const listExpressionAttributes = []
+  const listEvents = []
+
+  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()
+        const event = rawName.slice(2).toLowerCase()
       if (value?.[behaviorMarker]) {
         const commands = JSON.stringify(value.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 }
+        const template = { module: value.module, handler: value.handler, states: value.states, scope: value.scope }
+        const native = template
         attributes += ` data-k-native-${event}='${escapeJsonAttribute(native)}'`
         renderContext.events.push({ event, native })
+        if (renderContext.listDepth && Object.values(template.scope).some(entry => entry?.type === "list-item")) listEvents.push([event, template])
         renderContext.hasNativeBehaviors = true
       } else {
         throw new Error(`${rawName} must reference a compilable event handler`)
@@ -270,40 +370,87 @@ async function renderNode(node, namespace) {
     }
 
     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?.[listExpressionMarker]) {
+      attributes += renderAttribute(name, value.value)
+      listExpressionAttributes.push([name, value.module, value.handler])
+      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}='${escapeJsonAttribute(descriptor)}'`
-      renderContext.bindings.push({ target, ...descriptor })
-      if (renderContext.conditionDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
+      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 (listExpressionAttributes.length) attributes += ` data-k-list-expression-attrs='${escapeJsonAttribute(listExpressionAttributes)}'`
+  if (listEvents.length) attributes += ` data-k-list-events='${escapeJsonAttribute(listEvents)}'`
+
+  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, childNamespace)}</${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 }
+  renderContext.listDepth++
+  try {
+    renderContext.listTemplate = true
+    renderContext.listRoot = { id, template: true }
+    const template = await renderNode(node.render({}), namespace, selectValue)
+    let current = ""
+    renderContext.listTemplate = false
+    for (const item of node.items.value) {
+      renderContext.listRoot = { id, key: item[node.keyField], template: false }
+      current += await renderNode(node.render(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.listTemplate = false
+    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) {
@@ -316,12 +463,17 @@ function reactiveStateIds(descriptor) {
 }
 
 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;")

package/framework/list-runtime.js

@@ -0,0 +1,233 @@
+import { browserState, mountDom, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
+
+const listTargets = new Map()
+const listRegistrations = new WeakMap()
+const mountedLists = new WeakSet()
+const imports = new Map()
+const revisions = new WeakMap()
+
+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) {
+  const revision = (revisions.get(root) ?? 0) + 1
+  revisions.set(root, revision)
+  for (const marker of matching(root, "template[data-k-list-text]")) {
+    patchListText(marker, "template[data-k-list-text-end]", item?.[marker.dataset.kListText])
+  }
+  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])
+  }
+  for (const node of matching(root, "[data-k-list-events]")) {
+    for (const [event, native] of JSON.parse(node.dataset.kListEvents)) {
+      native.scope = Object.fromEntries(Object.entries(native.scope).map(([name, value]) => [name, value?.type === "list-item" ? serializeItem(item) : value]))
+      node.dataset[`kNative${capitalize(event)}`] = JSON.stringify(native)
+    }
+  }
+  for (const marker of matching(root, "template[data-k-list-expression]")) {
+    evaluate(JSON.parse(marker.dataset.kListExpression), item).then(value => {
+      if (revisions.get(root) === revision && root.isConnected) patchListText(marker, "template[data-k-list-expression-end]", value)
+    }).catch(error => console.error(error))
+  }
+  for (const node of matching(root, "[data-k-list-expression-attrs]")) {
+    for (const [target, module, handler] of JSON.parse(node.dataset.kListExpressionAttrs)) {
+      evaluate({ module, handler }, item).then(value => {
+        if (revisions.get(root) === revision && root.isConnected) patchBinding(node, target, value)
+      }).catch(error => console.error(error))
+    }
+  }
+}
+
+function patchListText(marker, endSelector, value) {
+  let end = marker.nextSibling
+  while (end && !(end.nodeType === Node.ELEMENT_NODE && end.matches(endSelector))) 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)))
+}
+
+function evaluate(descriptor, item) {
+  let module = imports.get(descriptor.module)
+  if (!module) {
+    module = import(descriptor.module)
+    imports.set(descriptor.module, module)
+  }
+  return module.then(exports => {
+    const value = exports[descriptor.handler](item)
+    if (value && typeof value.then === "function") throw new Error("Derived keyed list item expressions must return synchronous values")
+    return value
+  })
+}
+
+function serializeItem(value) {
+  if (value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number") return value
+  if (Array.isArray(value)) return { type: "array", value: value.map(serializeItem) }
+  return { type: "object", nullPrototype: false, value: Object.entries(value).map(([key, entry]) => [key, serializeItem(entry)]) }
+}
+
+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) throw new Error("Keyed list items must be ordinary 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) throw new Error("Keyed list items must contain only arrays and ordinary 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-")
+}
+
+function capitalize(value) {
+  return value[0].toUpperCase() + value.slice(1)
+}

package/framework/native-runtime.js

@@ -39,19 +39,38 @@ if (typeof document !== "undefined") {
   const eventNames = ["click", "input", "change", "submit", "keydown", "keyup"]
   for (const eventName of eventNames) {
     document.addEventListener(eventName, event => {
-      const target = event.target.closest(`[data-k-native-${eventName}]`)
-      if (!target) return
-
-      const native = JSON.parse(target.dataset[`kNative${capitalize(eventName)}`])
-      let modulePromise = modules.get(native.module)
-      if (!modulePromise) {
-        modulePromise = import(native.module)
-        modules.set(native.module, modulePromise)
+      try {
+        dispatchNative(event, snapshotNativeTargets(event, eventName), modules).catch(error => console.error(error))
+      } catch (error) {
+        console.error(error)
       }
-      modulePromise
-        .then(module => module[native.handler](createNativeContext(browserState, native.states, commitDom, native.scope), delegatedEvent(event, target)))
-        .catch(error => console.error(error))
-    }, true)
+    })
+  }
+}
+
+function snapshotNativeTargets(event, eventName) {
+  const selector = `[data-k-native-${eventName}]`
+  const targets = []
+  for (let target = event.target.closest(selector); target; target = target.parentElement?.closest(selector)) {
+    targets.push({ target, native: JSON.parse(target.dataset[`kNative${capitalize(eventName)}`]) })
+  }
+  return targets
+}
+
+async function dispatchNative(event, targets, modules) {
+  for (const { target, native } of targets) {
+    let modulePromise = modules.get(native.module)
+    if (!modulePromise) {
+      modulePromise = import(native.module)
+      modules.set(native.module, modulePromise)
+    }
+    try {
+      const module = await modulePromise
+      const result = module[native.handler](createNativeContext(browserState, native.states, commitDom, native.scope), delegatedEvent(event, target))
+      if (result && typeof result.then === "function") result.catch(error => console.error(error))
+    } catch (error) {
+      console.error(error)
+    }
   }
 }