@kudzujs/core 0.8.62 → 0.9.0

package/framework/core.d.ts

@@ -154,6 +154,7 @@ export interface RouteIR {
     dependencies?: string[]
     dependencyExpressions?: unknown[]
     dependencyStates?: Record<string, string>
+    dependencyEvaluators?: Array<{ module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown>; field: string }>
     itemDependencies?: string[]
     listState?: string
     cleanup?: true

package/framework/core.mjs

@@ -170,7 +170,7 @@ function createInternalState(initialValue) {
   return signal
 }
 
-export function useEffect(callback, dependencies, module, handler, states, scope, source, cleanup, itemDependencies = [], dependencyExpressions = [], dependencyStates = []) {
+export function useEffect(callback, dependencies, module, handler, states, scope, source, cleanup, itemDependencies = [], dependencyExpressions = [], dependencyStates = [], dependencyEvaluators = []) {
   if (!renderContext) throw new Error("useEffect() can only run while rendering a Kudzu component")
   if (typeof callback !== "function" || !Array.isArray(dependencies) || !module || !handler) throw new Error("useEffect() must be compiled with a literal dependency array")
   if (itemDependencies.length && !renderContext.listDepth) throw new Error(`${source} useEffect() item-property dependencies are only supported in direct keyed row components`)
@@ -183,6 +183,12 @@ export function useEffect(callback, dependencies, module, handler, states, scope
     if (!dependency?.[signalMarker]) throw new Error(`${source} useEffect() derived dependency state ${JSON.stringify(name)} must be Kudzu state`)
     return [name, dependency.id]
   }))
+  const evaluators = dependencyEvaluators.map(evaluator => {
+    if (!evaluator || typeof evaluator.field !== "string" || ["__proto__", "constructor", "prototype"].includes(evaluator.field)) throw new Error(`${source} useEffect() calculation dependency requires a static safe field`)
+    const descriptor = reactiveDescriptor(evaluator.module, evaluator.handler, evaluator.states, evaluator.scope)
+    retainHandlerReference(descriptor.module, descriptor.handler)
+    return { ...descriptor, field: evaluator.field }
+  })
   let owner
   let list = false
   if (renderContext.listDepth) {
@@ -209,7 +215,7 @@ export function useEffect(callback, dependencies, module, handler, states, scope
     owners.push(owner)
   }
   if (!renderContext.listDepth || list) {
-    renderContext.effects.push({ module, handler, states, scope, source, renderScope: renderContext.renderScope, ...(dependencyIds.length ? { dependencies: dependencyIds } : {}), ...(dependencyExpressions.length ? { dependencyExpressions, dependencyStates: dependencyStateIds } : {}), ...(itemDependencies.length ? { itemDependencies, listState: renderContext.listRoot.state } : {}), ...(cleanup ? { cleanup: true } : {}), ...(owner ? { owner } : {}), ...(list ? { list: true } : {}) })
+    renderContext.effects.push({ module, handler, states, scope, source, renderScope: renderContext.renderScope, ...(dependencyIds.length ? { dependencies: dependencyIds } : {}), ...(dependencyExpressions.length ? { dependencyExpressions, dependencyStates: dependencyStateIds } : {}), ...(evaluators.length ? { dependencyEvaluators: evaluators } : {}), ...(itemDependencies.length ? { itemDependencies, listState: renderContext.listRoot.state } : {}), ...(cleanup ? { cleanup: true } : {}), ...(owner ? { owner } : {}), ...(list ? { list: true } : {}) })
     retainHandlerReference(module, handler)
   }
   renderContext.hasBehaviors = true
@@ -434,11 +440,15 @@ function serializeCapture(name, value, seen) {
   if (value === undefined) return { type: "undefined" }
   if (typeof value !== "object") throw new Error(`Native capture "${name}" is not serializable: ${typeof value}`)
   if (seen.has(value)) throw new Error(`Native capture "${name}" is not serializable: cycle`)
+  const cached = renderContext?.captureCache.get(value)
+  if (cached) return cached
 
   seen.add(value)
   try {
     if (Array.isArray(value)) {
-      return { type: "array", value: Array.from(value, entry => serializeCapture(name, entry, seen)) }
+      const serialized = { type: "array", value: Array.from(value, entry => serializeCapture(name, entry, seen)) }
+      renderContext?.captureCache.set(value, serialized)
+      return serialized
     }
     const prototype = Object.getPrototypeOf(value)
     if (prototype !== Object.prototype && prototype !== null) {
@@ -451,14 +461,16 @@ function serializeCapture(name, value, seen) {
       if (!("value" in descriptor)) throw new Error(`Native capture "${name}" is not serializable: accessor`)
       entries.push([key, serializeCapture(name, descriptor.value, seen)])
     }
-    return { type: "object", nullPrototype: prototype === null, value: entries }
+    const serialized = { type: "object", nullPrototype: prototype === null, value: entries }
+    renderContext?.captureCache.set(value, serialized)
+    return serialized
   } finally {
     seen.delete(value)
   }
 }
 
 export async function renderPage(component, metadata = {}, props = {}, layout) {
-  renderContext = { scoped: Boolean(layout), renderScope: layout ? "layout" : "route", counters: { layout: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0, i: 0 }, route: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0, i: 0 } }, nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, nextEffect: 0, nextParam: 0, nextId: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listRowRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, listEffectOwners: [], listRowStates: [], listRowRefs: [], listRowConditions: [], listRowLists: [], effectOwners: [], contexts: [], sharedStates: new Map(), states: {}, textStates: new Set(), conditionStates: new Set(), conditionOwnedStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], handlerReferences: new Map(), runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, searchParams: new Map(), searchParamEntries: [], searchParamsWritable: false, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
+  renderContext = { scoped: Boolean(layout), renderScope: layout ? "layout" : "route", counters: { layout: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0, i: 0 }, route: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0, i: 0 } }, nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, nextEffect: 0, nextParam: 0, nextId: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listRowRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, listEffectOwners: [], listRowStates: [], listRowRefs: [], listRowConditions: [], listRowLists: [], effectOwners: [], contexts: [], captureCache: new WeakMap(), sharedStates: new Map(), states: {}, textStates: new Set(), conditionStates: new Set(), conditionOwnedStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], handlerReferences: new Map(), runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, searchParams: new Map(), searchParamEntries: [], searchParamsWritable: false, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
     const page = { [routeScopeMarker]: true, component, props }
@@ -471,6 +483,7 @@ export async function renderPage(component, metadata = {}, props = {}, layout) {
           handler: effect.handler,
           ...(effect.dependencies ? { dependencies: effect.dependencies } : {}),
           ...(effect.dependencyExpressions ? { dependencyExpressions: effect.dependencyExpressions, dependencyStates: effect.dependencyStates } : {}),
+          ...(effect.dependencyEvaluators ? { dependencyEvaluators: effect.dependencyEvaluators } : {}),
           ...(effect.itemDependencies ? { itemDependencies: effect.itemDependencies, listState: effect.listState } : {}),
           ...(effect.cleanup ? { cleanup: true } : {}),
           ...(effect.owner ? { owner: effect.owner } : {}),

package/framework/dependency-runtime.js

@@ -4,7 +4,7 @@ export function applyCommands(state, commands, commit, log = console.log) {
     const current = state.get(id)
     if (operation === "log") log(operand, current)
     else {
-      state.set(id, operation === "add" ? current + operand : operand)
+      state.set(id, operation === "add" ? current + operand : operation === "toggle" ? !current : operand)
       changed.add(id)
     }
   }

package/framework/effect-runtime.js

@@ -1,6 +1,6 @@
 import { deserialize } from "./serialization.js"
 
-export function createEffectContext(state, stateIds, commit, serializedScope = {}, active = () => true) {
+export function createEffectContext(state, stateIds, commit, serializedScope = {}, active = () => true, resolveRef) {
   const changed = new Set()
   let scheduled = false
 
@@ -24,7 +24,7 @@ export function createEffectContext(state, stateIds, commit, serializedScope = {
   }
 
   const scope = globalThis.__KUDZU_EFFECT_CAPTURES__
-    ? Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value, id => state.get(id), globalThis.__KUDZU_CAPTURE_SETTER__ ? setId : undefined)]))
+    ? Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value, id => state.get(id), globalThis.__KUDZU_CAPTURE_SETTER__ ? setId : undefined, undefined, resolveRef)]))
     : undefined
 
   return {

package/framework/list-runtime.js

@@ -1,4 +1,4 @@
-import { browserState, mountDom, notifyListItem, registerCommitter, registerMountHook, registerUnmountHook, releaseState, unmountDom } from "./shared-runtime.js"
+import { browserState, listItems, listRowPaths, mountDom, notifyListItem, registerCommitter, registerMountHook, registerUnmountHook, releaseState, unmountDom } from "./shared-runtime.js"
 import { selectCollection } from "./collection-selector.js"
 const loadListEvaluator = descriptor => import("./binding-runtime.js").then(module => module.loadEvaluator(descriptor))
 
@@ -9,10 +9,10 @@ const mountedLists = new WeakSet()
 const imports = __KUDZU_LIST_ASYNC_PARTS__ ? new Map() : undefined
 const revisions = __KUDZU_LIST_ASYNC_PARTS__ ? new WeakMap() : undefined
 const itemParts = new WeakMap()
-const listItems = new WeakMap()
 const listIndexes = __KUDZU_LIST_INDEXES__ ? new WeakMap() : undefined
 const ownershipPaths = __KUDZU_LIST_ROW_HOOKS__ ? new WeakMap() : undefined
 const rowReplacements = __KUDZU_LIST_ROW_HOOKS__ ? new WeakMap() : undefined
+const directRowReplacements = __KUDZU_LIST_ROW_HOOKS__ ? new WeakSet() : undefined
 const ownedLists = __KUDZU_NESTED_LISTS__ ? new WeakMap() : undefined
 const conditionOwners = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
 const conditionTemplates = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
@@ -33,8 +33,8 @@ function commitLists(id) {
 }
 
 registerCommitter(commitLists)
-registerMountHook(mountLists)
-registerUnmountHook(unmountLists)
+registerMountHook(mountLists, "lists")
+registerUnmountHook(unmountLists, "lists")
 
 if (typeof document !== "undefined") mountDom(document)
 
@@ -50,8 +50,9 @@ function mountLists(root) {
     const roots = listRoots(start, end)
     const nested = __KUDZU_NESTED_LISTS__ ? mountNestedPrototype(start, descriptor, roots) : undefined
     const templateRoot = __KUDZU_NESTED_LISTS__ ? nested.templateRoot : listTemplateRoot(start, descriptor)
+    const lifecycle = listLifecycle(descriptor, templateRoot)
     if (__KUDZU_LIST_ROW_HOOKS__) for (let index = 0; index < roots.length; index++) initializeGeneralRowHooks(descriptor, descriptor.keys[index], roots[index], nested?.owner)
-    const parts = listItemPartPlan(templateRoot, descriptor.nested)
+    const parts = listItemPartPlan(templateRoot, descriptor.nested, descriptor)
     const staticRows = __KUDZU_STATIC_COLLECTIONS__ && descriptor.static && parts.directFill ? new Map() : undefined
     for (const root of roots) {
       if (__KUDZU_LIST_CONDITIONS__ && descriptor.conditions) {
@@ -68,6 +69,8 @@ function mountLists(root) {
     const list = {
       start,
       descriptor,
+      lifecycle,
+      unmountLifecycle: descriptor.rowStates?.length ? lifecycle.filter(capability => capability !== "bindings") : lifecycle,
       templateRoot,
       ...(__KUDZU_NESTED_LISTS__ && nested.childPrototypes?.size ? { childPrototypes: nested.childPrototypes } : {}),
       parts,
@@ -237,7 +240,7 @@ function updateList(list) {
       if (!node) throw new Error("Keyed list template has no root element")
       node.removeAttribute("data-k-list-root")
       if (__KUDZU_NESTED_LISTS__ && list.childPrototypes) childPrototypes.set(node, list.childPrototypes)
-      if (__KUDZU_LIST_ROW_HOOKS__) initializeGeneralRowHooks(list.descriptor, key, node, list.owner, item)
+      if (__KUDZU_LIST_ROW_HOOKS__ && hasRowHooks(list.descriptor)) initializeGeneralRowHooks(list.descriptor, key, node, list.owner, item)
       if (staticRoot) listItems.set(node, item)
       else if (list.parts.directFill) {
         listItems.set(node, item)
@@ -256,7 +259,7 @@ function updateList(list) {
     if (keys.has(token)) continue
     if (list.descriptor.fastRelease) node.remove()
     else if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
-      unmountDom(node)
+      unmountDom(node, list.unmountLifecycle)
       node.remove()
     } else node.remove()
     if (__KUDZU_LIST_ROW_HOOKS__ && list.descriptor.rowStates) deleteRowStates(list.descriptor, ownershipPaths.get(node))
@@ -282,8 +285,8 @@ function updateList(list) {
       if (run.firstChild) parent.insertBefore(run, list.boundary)
       ordered = true
     } else parent.insertBefore(additions, list.boundary)
-    if (addedNodes?.length > 32 && addedNodes.length * 2 > next.length && addedNodes.length * 2 > parent.children.length && !list.descriptor.children && !list.descriptor.ownerField) mountDom(parent)
-    else if (addedNodes) for (const node of addedNodes) mountDom(node)
+    if (addedNodes?.length > 32 && addedNodes.length * 2 > next.length && addedNodes.length * 2 > parent.children.length && !list.descriptor.children && !list.descriptor.ownerField) mountDom(parent, list.lifecycle)
+    else if (addedNodes) for (const node of addedNodes) mountDom(node, list.lifecycle)
     list.container ??= parent
   }
   let anchor = list.boundary
@@ -433,7 +436,7 @@ function updateStableList(list, items) {
     const firstAdded = fragment.firstChild
     parent.insertBefore(fragment, list.boundary)
     if (referenceOnly) list.values.clear()
-    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) for (let node = firstAdded; node !== list.boundary; node = node.nextSibling) mountDom(node)
+    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) for (let node = firstAdded; node !== list.boundary; node = node.nextSibling) mountDom(node, list.lifecycle)
     list.container ??= parent
     list.items = items
     return true
@@ -578,12 +581,12 @@ function addListRoot(list, { item, index = list.roots.size, key, token, value })
   if (!node) throw new Error("Keyed list template has no root element")
   node.removeAttribute("data-k-list-root")
   if (__KUDZU_NESTED_LISTS__ && list.childPrototypes) childPrototypes.set(node, list.childPrototypes)
-  if (__KUDZU_LIST_ROW_HOOKS__) initializeGeneralRowHooks(list.descriptor, key, node, list.owner, item)
+  if (__KUDZU_LIST_ROW_HOOKS__ && hasRowHooks(list.descriptor)) initializeGeneralRowHooks(list.descriptor, key, node, list.owner, item)
   mapListItemParts(list.parts, node, list.descriptor.nested)
   fillListItem(node, item, list.descriptor.nested, index)
   const parent = list.container ?? list.start.parentNode
   parent.insertBefore(node, list.boundary)
-  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(node)
+  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(node, list.lifecycle)
   list.roots.set(token, node)
   if (__KUDZU_LIST_STABLE_FAST_PATHS__) list.orderedRoots.push(node)
   if (!usesItemReferences(list)) list.values.set(token, value)
@@ -592,7 +595,7 @@ function addListRoot(list, { item, index = list.roots.size, key, token, value })
 
 function removeListRoot(list, token) {
   const node = list.roots.get(token)
-  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount && !list.descriptor.fastRelease) unmountDom(node)
+  if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount && !list.descriptor.fastRelease) unmountDom(node, list.unmountLifecycle)
   node.remove()
   if (__KUDZU_LIST_ROW_HOOKS__ && list.descriptor.rowStates) deleteRowStates(list.descriptor, ownershipPaths.get(node))
   list.roots.delete(token)
@@ -610,7 +613,7 @@ function fillListItem(root, item, nested = false, index = 0, parts = listItemPar
     const children = ownedLists.get(root)
     if (children) for (const child of children.values()) updateList(child)
   }
-  if (__KUDZU_LIST_ROW_HOOKS__) replaceRowIds(root, rowReplacements.get(root))
+  if (__KUDZU_LIST_ROW_HOOKS__) replaceOwnedRowIds(root)
 }
 
 function fillListParts(root, parts, item, revision, index = 0, previous) {
@@ -720,7 +723,7 @@ function hydrateListItemPartValues(planned, initial, missing) {
   if (index !== planned.length) throw new Error("Keyed list item markers do not match its template")
 }
 
-function listItemPartPlan(template, nested = false) {
+function listItemPartPlan(template, nested = false, descriptor) {
   const source = nested ? ownedElements(template) : [template, ...template.querySelectorAll("*")]
   const indexes = new Map(source.map((node, index) => [node, index]))
   const parts = listItemParts(template, nested)
@@ -728,7 +731,7 @@ function listItemPartPlan(template, nested = false) {
   const location = structural ? node => elementPath(template, node) : node => indexes.get(node)
   return {
     structural,
-    directFill: structural && !parts.events.length && !__KUDZU_LIST_ASYNC_PARTS__ && !__KUDZU_NESTED_LISTS__ && !__KUDZU_LIST_INDEXES__ && !__KUDZU_LIST_ROW_HOOKS__,
+    directFill: structural && !parts.events.length && !__KUDZU_LIST_ASYNC_PARTS__ && !__KUDZU_NESTED_LISTS__ && !__KUDZU_LIST_INDEXES__,
     directTexts: parts.directTexts.map(([node, field]) => [location(node), field]),
     texts: __KUDZU_LIST_TEXT_RANGES__ ? parts.texts.map(([node, field]) => [location(node), field]) : [],
     attributes: __KUDZU_LIST_ATTRIBUTES__ ? parts.attributes.map(([node, attributes]) => [location(node), attributes]) : [],
@@ -736,7 +739,11 @@ function listItemPartPlan(template, nested = false) {
     expressions: __KUDZU_LIST_EXPRESSIONS__ ? parts.expressions.map(([node, descriptor]) => [location(node), descriptor]) : [],
     expressionAttributes: __KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? parts.expressionAttributes.map(([node, attributes]) => [location(node), attributes]) : [],
     conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [location(node), descriptor, node]) : [],
-    effects: __KUDZU_LIST_EFFECTS__ ? parts.effects.map(location) : []
+    effects: __KUDZU_LIST_EFFECTS__ ? parts.effects.map(location) : [],
+    rowIds: structural && __KUDZU_GENERAL_ROW_HOOKS__ && hasRowHooks(descriptor) ? source.flatMap(node => {
+      const attributes = [...node.attributes].filter(attribute => attribute.name.startsWith("data-k-") && attribute.value.includes("$k")).map(attribute => attribute.name)
+      return attributes.length ? [[location(node), attributes]] : []
+    }) : []
   }
 }
 
@@ -795,6 +802,14 @@ function fillStructuralListParts(parts, root, item) {
     const attributes = part[1]
     for (let index = 0; index < attributes.length; index++) patchBinding(node, attributes[index][0], item[attributes[index][1]])
   }
+  if (__KUDZU_GENERAL_ROW_HOOKS__ && directRowReplacements.delete(root)) {
+    const replacement = listRowPaths.get(root)
+    for (const [path, attributes] of parts.rowIds) {
+      let node = root
+      for (let index = 0; index < path.length; index++) node = node.children[path[index]]
+      for (const attribute of attributes) node.setAttribute(attribute, node.getAttribute(attribute).replaceAll("$k", replacement))
+    }
+  }
 }
 
 function elementPath(root, node) {
@@ -1051,20 +1066,48 @@ function initializeGeneralRowHooks(descriptor, key, root, owner, item) {
   const path = [...(ownershipPaths.get(owner) ?? []), `${descriptor.id}=${token}`]
   ownershipPaths.set(root, path)
   const statePath = descriptor.ownerField ? path : [token]
-  root.dataset.kRowPath = encodeURIComponent(statePath.join("/"))
-  const replacements = new Map()
+  listRowPaths.set(root, encodeURIComponent(statePath.join("/")))
+  const direct = !descriptor.nested && !descriptor.children && !descriptor.ownerField
+  if (direct) directRowReplacements.add(root)
+  const replacements = direct ? undefined : new Map()
   for (const state of descriptor.rowStates ?? []) {
     const id = rowStateId(state.id, statePath)
     if (!browserState.has(id)) browserState.set(id, state.initializer === "list-item" ? structuredClone(item) : __KUDZU_COMPLEX_LIST_ROW_STATE__ && state.initialValue !== null && typeof state.initialValue === "object" ? structuredClone(state.initialValue) : state.initialValue)
-    replacements.set(state.id, id)
+    replacements?.set(state.id, id)
   }
-  if (__KUDZU_LIST_ROW_REFS__) for (const ref of descriptor.rowRefs ?? []) replacements.set(ref, rowStateId(ref, statePath))
-  for (const marker of descriptor.rowConditions ?? []) replacements.set(marker, rowStateId(marker, statePath))
-  rowReplacements.set(root, replacements)
-  replaceRowIds(root, replacements)
+  if (__KUDZU_LIST_ROW_REFS__) for (const ref of descriptor.rowRefs ?? []) replacements?.set(ref, rowStateId(ref, statePath))
+  for (const marker of descriptor.rowConditions ?? []) replacements?.set(marker, rowStateId(marker, statePath))
+  if (replacements) rowReplacements.set(root, replacements)
+  if (descriptor.conditions || descriptor.expressions || descriptor.expressionAttributes) replaceOwnedRowIds(root)
+}
+
+function replaceOwnedRowIds(root) {
+  if (!directRowReplacements.delete(root)) return replaceRowIds(root, rowReplacements.get(root))
+  const path = listRowPaths.get(root)
+  const replace = node => {
+    for (const attribute of [...node.attributes]) if (attribute.name.startsWith("data-k-") && attribute.value.includes("$k")) attribute.value = attribute.value.replaceAll("$k", path)
+    for (const child of node.children) replace(child)
+    for (const child of node.content?.children ?? []) replace(child)
+  }
+  replace(root)
 }
 /* general-row-hooks-end */
 
+function hasRowHooks(descriptor) {
+  return Boolean(descriptor.rowStates?.length || descriptor.rowRefs?.length || descriptor.rowConditions?.length)
+}
+
+function listLifecycle(descriptor, template) {
+  const capabilities = []
+  if (template.matches?.("[data-k-text]") || template.querySelector?.("[data-k-text]")) capabilities.push("text")
+  if (descriptor.attributes || descriptor.expressions || descriptor.expressionAttributes || descriptor.rowStates?.length) capabilities.push("bindings")
+  if (descriptor.conditions || template.querySelector?.("[data-k-if]")) capabilities.push("conditions")
+  if (descriptor.nested || descriptor.children || template.querySelector?.("template[data-k-list]")) capabilities.push("lists")
+  if (descriptor.events || template.querySelector?.("[data-k-native-click],[data-k-native-input],[data-k-native-change],[data-k-native-submit],[data-k-native-keydown],[data-k-native-keyup]")) capabilities.push("native")
+  if (descriptor.effects) capabilities.push("effects")
+  return capabilities
+}
+
 function initializeRowStates(descriptor, key, root) {
   const token = keyToken(key)
   const replacements = new Map()

package/framework/native-runtime.js

@@ -60,18 +60,21 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
 
 if (typeof document !== "undefined") {
   const eventNames = ["click", "input", "change", "submit", "keydown", "keyup"]
-  const mount = root => mountNative(root, eventNames, modules)
-  registerMountHook(mount)
-  registerUnmountHook(unmountNative)
+  const selector = eventNames.map(eventName => `[data-k-native-${eventName}]`).join(",")
+  const mount = root => mountNative(root, eventNames, selector, modules)
+  const unmount = root => unmountNative(root, selector)
+  registerMountHook(mount, "native")
+  registerUnmountHook(unmount, "native")
   mount(document)
   addEventListener("pagehide", event => {
-    if (!event.persisted) unmountNative(document)
+    if (!event.persisted) unmount(document)
   })
 }
 
-function mountNative(root, eventNames, modules) {
-  for (const eventName of eventNames) {
-    for (const node of matching(root, `[data-k-native-${eventName}]`)) {
+function mountNative(root, eventNames, selector, modules) {
+  for (const node of matching(root, selector)) {
+    for (const eventName of eventNames) {
+      if (!node.hasAttribute(`data-k-native-${eventName}`)) continue
       const listeners = registrations.get(node) ?? new Map()
       if (listeners.has(eventName)) continue
       let encoded = node.dataset[`kNative${capitalize(eventName)}`]
@@ -104,8 +107,8 @@ function mountNative(root, eventNames, modules) {
   }
 }
 
-function unmountNative(root) {
-  for (const node of matching(root, "*")) {
+function unmountNative(root, selector) {
+  for (const node of matching(root, selector)) {
     for (const [eventName, registration] of registrations.get(node) ?? []) {
       registration.active = false
       node.removeEventListener(eventName, registration.listener)

package/framework/runtime.js

@@ -4,7 +4,7 @@ export function applyCommands(state, commands, commit, log = console.log) {
     const current=state.get(id)
     if(operation==="log")log(value,current)
     else {
-      state.set(id,operation==="add"?current+value:value)
+      state.set(id,operation==="add"?current+value:operation==="toggle"?!current:value)
       changed.add(id)
     }
   }

package/framework/serialization.js

@@ -1,8 +1,15 @@
-export function deserialize(value, getState, setState, active) {
+export function deserialize(value, getState, setState, active, resolveRef) {
   if (!value || typeof value !== "object") return value
   if (value.type === "undefined") return undefined
   if (value.type === "number") return value.value === "NaN" ? NaN : value.value === "Infinity" ? Infinity : value.value === "-Infinity" ? -Infinity : -0
-  if (value.type === "ref") return { get current() { return typeof document === "undefined" || active?.() === false ? null : document.querySelector(`[data-k-ref="${value.id}"]`) } }
+  if (value.type === "ref") {
+    let current
+    return { get current() {
+      if (typeof document === "undefined" || active?.() === false) return null
+      if (!current?.isConnected) current = resolveRef ? resolveRef(value.id) : document.querySelector(`[data-k-ref="${value.id}"]`)
+      return current
+    } }
+  }
   if (globalThis.__KUDZU_CAPTURE_STATE__ && value.type === "state") return getState?.(value.id)
   if (globalThis.__KUDZU_CAPTURE_SETTER__ && value.type === "setter") return next => {
     if (!setState) throw new Error("Captured state setter is not available in this context")
@@ -10,20 +17,20 @@ export function deserialize(value, getState, setState, active) {
   }
   if (value.type === "array") {
     const array = []
-    for (const [index, entry] of value.value.entries()) defineCapture(array, String(index), entry, getState, setState, active)
+    for (const [index, entry] of value.value.entries()) defineCapture(array, String(index), entry, getState, setState, active, resolveRef)
     return array
   }
   if (value.type === "object") {
     const object = value.nullPrototype ? Object.create(null) : {}
-    for (const [key, entry] of value.value) defineCapture(object, key, entry, getState, setState, active)
+    for (const [key, entry] of value.value) defineCapture(object, key, entry, getState, setState, active, resolveRef)
     return object
   }
   return value
 }
 
-function defineCapture(target, key, entry, getState, setState, active) {
+function defineCapture(target, key, entry, getState, setState, active, resolveRef) {
   const descriptor = globalThis.__KUDZU_CAPTURE_STATE__ && entry?.type === "state" && getState
     ? { get: () => getState(entry.id) }
-    : { value: deserialize(entry, getState, setState, active), writable: true }
+    : { value: deserialize(entry, getState, setState, active, resolveRef), writable: true }
   Object.defineProperty(target, key, { ...descriptor, enumerable: true, configurable: true })
 }

package/framework/shared-runtime.js

@@ -2,7 +2,7 @@ export function applyCommands(state, commands, commit, log = console.log) {
   if (commands.length === 1 && commands[0][0] !== "log") {
     const [operation, id, operand] = commands[0]
     const current = state.get(id)
-    const value = operation === "add" ? current + operand : operand
+    const value = operation === "add" ? current + operand : operation === "toggle" ? !current : operand
     state.set(id, value)
     commit(id, value)
     return
@@ -15,7 +15,7 @@ export function applyCommands(state, commands, commit, log = console.log) {
       log(operand, current)
       continue
     }
-    state.set(id, operation === "add" ? current + operand : operand)
+    state.set(id, operation === "add" ? current + operand : operation === "toggle" ? !current : operand)
     changed.add(id)
   }
 
@@ -23,6 +23,8 @@ export function applyCommands(state, commands, commit, log = console.log) {
 }
 
 export const browserState = new Map()
+export const listItems = new WeakMap()
+export const listRowPaths = new WeakMap()
 const committers = []
 const mountHooks = []
 const unmountHooks = []
@@ -52,12 +54,12 @@ export function registerCommitter(commit) {
   committers.push(commit)
 }
 
-export function registerMountHook(mount) {
-  mountHooks.push(mount)
+export function registerMountHook(mount, capability) {
+  mountHooks.push({ mount, capability })
 }
 
-export function registerUnmountHook(unmount) {
-  unmountHooks.push(unmount)
+export function registerUnmountHook(unmount, capability) {
+  unmountHooks.push({ unmount, capability })
 }
 
 export function registerStateReleaseHook(release) {
@@ -100,14 +102,14 @@ function unmountText(root) {
   }
 }
 
-export function mountDom(root) {
-  mountText(root)
-  for (const mount of mountHooks) mount(root)
+export function mountDom(root, capabilities) {
+  if (!capabilities || capabilities.includes("text")) mountText(root)
+  for (const entry of mountHooks) if (!capabilities || !entry.capability || capabilities.includes(entry.capability)) entry.mount(root)
 }
 
-export function unmountDom(root) {
-  for (const unmount of unmountHooks) unmount(root)
-  unmountText(root)
+export function unmountDom(root, capabilities) {
+  for (const entry of unmountHooks) if (!capabilities || !entry.capability || capabilities.includes(entry.capability)) entry.unmount(root)
+  if (!capabilities || capabilities.includes("text")) unmountText(root)
 }
 
 if (typeof document !== "undefined") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.8.62",
+  "version": "0.9.0",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",