@kudzujs/core 0.5.8 → 0.6.0

package/framework/core.d.ts

@@ -1,8 +1,9 @@
 export type StateSetter<T> = (value: T | ((previous: T) => T)) => void
 export type EffectCleanup = () => void | Promise<void>
+export type EffectDependency = string | number | boolean | null
 
 export function useState<T>(initialValue: T): [T, StateSetter<T>]
-export function useEffect(effect: () => void | EffectCleanup | Promise<void>, dependencies: readonly []): void
+export function useEffect(effect: () => void | EffectCleanup | Promise<void>, dependencies: readonly EffectDependency[]): void
 export function useParams<Params extends Record<string, string> = Record<string, string>>(): Readonly<Params>
 
 export interface RefObject<T> {
@@ -49,11 +50,16 @@ export function renderPage<Props = Record<string, never>>(
     manifest?: string
     styles?: boolean | string[]
     base?: string
+    runtimeAsset?: string
     effectAsset?: string
     paramAsset?: string
     runtimeParams?: string[]
+    navigationAsset?: string
+    applicationId?: string
+    layoutId?: string
   },
-  props?: Props
+  props?: Props,
+  layout?: (props: { children: unknown }) => unknown | Promise<unknown>
 ): Promise<{
   html: string
   hasBehaviors: boolean
@@ -64,14 +70,14 @@ export function renderPage<Props = Record<string, never>>(
   hasListStyles: boolean
   hasStateSeed: boolean
   plan: {
-    states: Array<{ id: string; name: string; initialValue: unknown }>
+    states: Array<{ id: string; name: string; initialValue: unknown; lifetime?: "layout" | "route" }>
     params: Array<{ name: string; id: string }>
     events: Array<{
       event: string
       commands?: Array<[string, string, unknown]>
       native?: { module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown> }
     }>
-    effects: Array<{ module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown>; cleanup?: true }>
+    effects: Array<{ module: string; handler: string; states: Record<string, string>; scope: Record<string, unknown>; lifetime?: "layout" | "route"; dependencies?: string[]; cleanup?: true; owner?: string; list?: true }>
     bindings: Array<{
       target: string
       state?: string

package/framework/core.mjs

@@ -14,6 +14,7 @@ const listConditionalMarker = Symbol("kudzu.listConditional")
 const refMarker = Symbol("kudzu.ref")
 const contextMarker = Symbol("kudzu.context")
 const contextProviderMarker = Symbol("kudzu.contextProvider")
+const routeScopeMarker = Symbol("kudzu.routeScope")
 const noSelectValue = Symbol("kudzu.no-select-value")
 
 let renderContext
@@ -23,23 +24,24 @@ export function useState(initialValue, name) {
     throw new Error("useState() can only run while rendering a Kudzu component")
   }
 
-  const id = `s${renderContext.nextState++}`
+  const id = nextRenderId("s")
   const signal = createSignal(id, initialValue)
 
   const setter = () => {
     throw new Error("State setters are compiled into ordered browser behaviors")
   }
   Object.defineProperty(setter, setterMarker, { value: id })
-  renderContext.states[id] = { name: name ?? id, initialValue }
+  renderContext.states[id] = { name: name ?? id, initialValue, ...(renderContext.scoped ? { lifetime: renderContext.renderScope } : {}) }
   return [signal, setter]
 }
 
 export function useParams() {
+  if (renderContext?.renderScope === "layout") throw new Error("useParams() is only supported in route scope")
   if (!renderContext?.runtimeParamNames?.length) throw new Error("useParams() requires export const runtimeParams = true on a bracket page")
   if (!renderContext.params) {
     const params = Object.create(null)
-    renderContext.paramEntries = renderContext.runtimeParamNames.map((name, index) => {
-      const id = `p${index}`
+    renderContext.paramEntries = renderContext.runtimeParamNames.map(name => {
+      const id = nextRenderId("p")
       params[name] = createSignal(id, "")
       return { name, id }
     })
@@ -66,18 +68,45 @@ function createSignal(id, value) {
 
 export function useEffect(callback, dependencies, module, handler, states, scope, source, cleanup) {
   if (!renderContext) throw new Error("useEffect() can only run while rendering a Kudzu component")
-  if (typeof callback !== "function" || !Array.isArray(dependencies) || dependencies.length || !module || !handler) {
-    throw new Error("useEffect() must be compiled with a literal empty dependency array")
-  }
-  renderContext.effects.push({ module, handler, states, scope, source, ...(cleanup ? { cleanup: true } : {}) })
+  if (typeof callback !== "function" || !Array.isArray(dependencies) || !module || !handler) throw new Error("useEffect() must be compiled with a literal dependency array")
+  const dependencyIds = dependencies.map(dependency => {
+    if (!dependency?.[signalMarker] || !validEffectDependency(dependency.value)) throw new Error(`${source} useEffect() dependencies must be primitive Kudzu state or runtime parameter identifiers`)
+    return dependency.id
+  })
+  let owner
+  let list = false
+  if (renderContext.listDepth) {
+    const effects = renderContext.listRoot?.effects
+    if (!effects) throw new Error(`${source} useEffect() inside keyed lists must belong to the direct row component`)
+    const index = effects.length
+    if (renderContext.listTemplate) {
+      owner = nextRenderId("e")
+      renderContext.listEffectOwners.push(owner)
+      list = true
+    } else {
+      owner = renderContext.listEffectOwners[index]
+      if (!owner) throw new Error(`${source} Keyed row effects must have the same hook order for every item`)
+    }
+    effects.push(owner)
+  } else if (renderContext.conditionDepth) {
+    const owners = renderContext.effectOwners.at(-1)
+    if (!owners) throw new Error(`${source} useEffect() inside conditional DOM must belong to a rendered function component`)
+    owner = nextRenderId("e")
+    owners.push(owner)
+  }
+  if (!renderContext.listDepth || list) renderContext.effects.push({ module, handler, states, scope, source, renderScope: renderContext.renderScope, ...(dependencyIds.length ? { dependencies: dependencyIds } : {}), ...(cleanup ? { cleanup: true } : {}), ...(owner ? { owner } : {}), ...(list ? { list: true } : {}) })
   renderContext.hasBehaviors = true
   renderContext.hasEffects = true
 }
 
+function validEffectDependency(value) {
+  return value === null || typeof value === "string" || typeof value === "boolean" || typeof value === "number" && Number.isFinite(value) && !Object.is(value, -0)
+}
+
 export function useRef(initialValue) {
   if (!renderContext) throw new Error("useRef() can only run while rendering a Kudzu component")
   if (initialValue !== null) throw new Error("Kudzu DOM refs must initialize with null")
-  return { [refMarker]: true, id: `r${renderContext.nextRef++}`, current: null }
+  return { [refMarker]: true, id: nextRenderId("r"), current: null }
 }
 
 export function createContext(defaultValue) {
@@ -261,18 +290,26 @@ function serializeCapture(name, value, seen) {
   }
 }
 
-export async function renderPage(component, metadata = {}, props = {}) {
-  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
+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 }, route: { s: 0, r: 0, c: 0, l: 0, e: 0, p: 0 } }, nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, nextEffect: 0, nextParam: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listInitialMarkers: false, listConditionalBranch: false, listFields: undefined, listEffectOwners: [], effectOwners: [], contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], effects: [], bindings: [], textBindings: [], conditions: [], lists: [], runtimeParamNames: metadata.runtimeParams, paramEntries: [], params: undefined, hasBehaviors: false, hasNativeBehaviors: false, hasEffects: false, hasParams: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
-    const body = await renderNode({ type: component, props })
+    const page = { [routeScopeMarker]: true, component, props }
+    const body = await renderNode(layout ? { type: layout, props: { children: page } } : { type: component, props })
     renderContext.effects = renderContext.effects.map(effect => {
       try {
+        if (metadata.navigationAsset && effect.owner) throw new Error("useEffect() inside conditional or keyed DOM is not supported in a configured navigation group yet; move the effect to the layout or route component body, or remove the route from navigation")
+        const descriptor = nativeDescriptor(effect.states.map(([name, read]) => [name, read()]), effect.scope.map(([name, read]) => [name, typeof read === "function" ? read() : read]))
         return {
           module: effect.module,
           handler: effect.handler,
+          ...(effect.dependencies ? { dependencies: effect.dependencies } : {}),
           ...(effect.cleanup ? { cleanup: true } : {}),
-          ...nativeDescriptor(effect.states.map(([name, read]) => [name, read()]), effect.scope.map(([name, read]) => [name, read()]))
+          ...(effect.owner ? { owner: effect.owner } : {}),
+          ...(effect.list ? { list: true } : {}),
+          ...(renderContext.scoped ? { lifetime: effect.renderScope } : {}),
+          states: descriptor.states,
+          scope: descriptor.scope
         }
       } catch (error) {
         throw new Error(`${effect.source} ${error.message}`)
@@ -280,26 +317,30 @@ export async function renderPage(component, metadata = {}, props = {}) {
     })
     const title = escapeHtml(metadata.title ?? "Kudzu")
     const head = renderMetadata(metadata)
+    const capability = metadata.navigationAsset ? " data-k-capability" : ""
     const styles = metadata.styles === false
       ? ""
       : (Array.isArray(metadata.styles) ? metadata.styles : [assetPath(metadata.base, "assets/style.css")]).map(href => `<link rel="stylesheet" href="${escapeAttribute(href)}">`).join("")
     const runtime = renderContext.hasBehaviors
-      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu.js")}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.runtimeAsset ?? assetPath(metadata.base, "assets/kudzu.js"))}"></script>`
       : ""
     const nativeRuntime = renderContext.hasNativeBehaviors
-      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-native.js")}"></script>`
+      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-native.js")}"></script>`
       : ""
     const paramRuntime = renderContext.hasParams
-      ? `<script type="module" src="${escapeAttribute(metadata.paramAsset)}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.paramAsset)}"></script>`
       : ""
     const bindingRuntime = renderContext.hasBindings
-      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-binding.js")}"></script>`
+      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-binding.js")}"></script>`
       : ""
     const listRuntime = renderContext.hasLists
-      ? `<script type="module" src="${assetPath(metadata.base, "assets/kudzu-list.js")}"></script>`
+      ? `<script type="module"${capability} src="${assetPath(metadata.base, "assets/kudzu-list.js")}"></script>`
       : ""
     const effectRuntime = renderContext.hasEffects
-      ? `<script type="module" src="${escapeAttribute(metadata.effectAsset)}"></script>`
+      ? `<script type="module"${capability} src="${escapeAttribute(metadata.effectAsset)}"></script>`
+      : ""
+    const navigationRuntime = metadata.navigationAsset
+      ? `<script type="module" data-k-capability src="${escapeAttribute(metadata.navigationAsset)}"></script>`
       : ""
     const listStates = new Set(renderContext.lists.map(list => list.state))
     const seededListStates = new Set(renderContext.lists.filter(list => list.seed && !renderContext.textStates.has(list.state) && !renderContext.conditionStates.has(list.state)).map(list => list.state))
@@ -317,7 +358,7 @@ export async function renderPage(component, metadata = {}, props = {}) {
       : ""
 
     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}${textBindings}>${body}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}</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}${runtime}${paramRuntime}${bindingRuntime}${listRuntime}${nativeRuntime}${effectRuntime}${navigationRuntime}</head><body${state}${textBindings}${metadata.applicationId ? ` data-k-application="${escapeAttribute(metadata.applicationId)}" data-k-layout="${escapeAttribute(metadata.layoutId)}"` : ""}>${body}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasEffects: renderContext.hasEffects,
       hasParams: renderContext.hasParams,
@@ -342,16 +383,17 @@ export async function renderPage(component, metadata = {}, props = {}) {
 
 function renderMetadata(metadata) {
   const tags = []
+  const owned = metadata.navigationAsset ? " data-k-head" : ""
   const meta = (name, content, property = false) => {
-    if (content) tags.push(`<meta ${property ? "property" : "name"}="${escapeAttribute(name)}" content="${escapeAttribute(content)}">`)
+    if (content) tags.push(`<meta${owned} ${property ? "property" : "name"}="${escapeAttribute(name)}" content="${escapeAttribute(content)}">`)
   }
 
   if (metadata.description) meta("description", metadata.description)
   if (metadata.themeColor) meta("theme-color", metadata.themeColor)
-  if (metadata.url) tags.push(`<link rel="canonical" href="${escapeAttribute(metadata.url)}">`)
-  if (metadata.icon) tags.push(`<link rel="icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.icon))}">`)
-  if (metadata.appleTouchIcon) tags.push(`<link rel="apple-touch-icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.appleTouchIcon))}">`)
-  if (metadata.manifest) tags.push(`<link rel="manifest" href="${escapeAttribute(baseUrl(metadata.base, metadata.manifest))}">`)
+  if (metadata.url) tags.push(`<link${owned} rel="canonical" href="${escapeAttribute(metadata.url)}">`)
+  if (metadata.icon) tags.push(`<link${owned} rel="icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.icon))}">`)
+  if (metadata.appleTouchIcon) tags.push(`<link${owned} rel="apple-touch-icon" href="${escapeAttribute(baseUrl(metadata.base, metadata.appleTouchIcon))}">`)
+  if (metadata.manifest) tags.push(`<link${owned} rel="manifest" href="${escapeAttribute(baseUrl(metadata.base, metadata.manifest))}">`)
 
   meta("og:title", metadata.title, true)
   meta("og:description", metadata.description, true)
@@ -397,6 +439,16 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     return escapeHtml(node)
   }
   if (node instanceof Promise) return renderNode(await node, namespace, selectValue)
+  if (node?.[routeScopeMarker]) {
+    const previousScope = renderContext.renderScope
+    renderContext.renderScope = "route"
+    try {
+      const html = await renderNode({ type: node.component, props: node.props }, namespace, selectValue)
+      return `<template data-k-route-start></template>${html}<template data-k-route-end></template>`
+    } finally {
+      renderContext.renderScope = previousScope
+    }
+  }
   if (node?.[contextProviderMarker]) {
     renderContext.contexts.push([node.context, node.value])
     try {
@@ -411,7 +463,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     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++}`
+    const id = nextRenderId("c")
     renderContext.conditionDepth++
     const truthy = await renderNode(node.truthy(), namespace, selectValue)
     const falsy = await renderNode(node.falsy(), namespace, selectValue)
@@ -472,10 +524,29 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   }
 
   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)
+  if (typeof node.type === "function") {
+    if (!renderContext.conditionDepth) return renderNode(await node.type(node.props), namespace, selectValue)
+    const owners = []
+    renderContext.effectOwners.push(owners)
+    let result
+    try {
+      result = await node.type(node.props)
+    } finally {
+      renderContext.effectOwners.pop()
+    }
+    const html = await renderNode(result, namespace, selectValue)
+    return owners.map(owner => `<template data-k-effect="${owner}"></template>`).join("") + html
+  }
 
   const tag = node.type
   const props = node.props ?? {}
+  if (typeof tag === "string" && tag.toLowerCase() === "link") {
+    const rel = Object.entries(props).find(([name]) => name.toLowerCase() === "rel")?.[1]
+    const value = rel?.[signalMarker] || rel?.[bindingMarker] ? rel.value : rel
+    if (typeof value === "string" && value.toLowerCase().split(/\s+/).includes("stylesheet")) {
+      throw new Error("Stylesheets must be placed under src/ or declared in kudzu.config styles so Kudzu can emit them in <head>")
+    }
+  }
   const directListText = props.children?.[listFieldMarker] ? props.children : undefined
   const childSelectValue = tag === "select"
     ? Object.hasOwn(props, "value") ? bindingValue(props.value) : noSelectValue
@@ -494,6 +565,10 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     const root = renderContext.listRoot
     renderContext.listRoot = undefined
     if (root.template) attributes += ` data-k-list-root="${root.id}"`
+    if (root.effects.length) {
+      attributes += ` data-k-effects='${escapeJsonAttribute(root.effects)}'`
+      if (!root.template) attributes += ` data-k-effect-item='${escapeJsonAttribute(root.item)}'`
+    }
   }
 
   for (const [rawName, value] of Object.entries(props)) {
@@ -506,7 +581,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
     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 (rawName.toLowerCase().startsWith("data-k-") && rawName.toLowerCase() !== "data-k-native") throw new Error(`${rawName} uses Kudzu's reserved data-k-* prefix`)
     if (["ref", "dangerouslysetinnerhtml"].includes(rawName.toLowerCase()) && (value?.[signalMarker] || value?.[bindingMarker])) {
       throw new Error(`Reactive ${rawName} is not supported`)
     }
@@ -599,16 +674,19 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
 
 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 id = nextRenderId("l")
   const descriptor = { id, state: node.items.id, key: node.keyField, keys: node.items.value.map(item => item[node.keyField]) }
   renderContext.listDepth++
   const previousListFields = renderContext.listFields
+  const previousListEffectOwners = renderContext.listEffectOwners
   try {
     renderContext.listTemplate = true
+    renderContext.listEffectOwners = []
     renderContext.listFields = new Set([node.keyField])
-    renderContext.listRoot = { id, template: true }
+    renderContext.listRoot = { id, template: true, effects: [], item: {} }
     const template = await renderNode(node.render({}), namespace, selectValue)
-    if (template.includes("data-k-native-")) descriptor.mount = true
+    if (template.includes("data-k-native-") || template.includes("data-k-effects=")) descriptor.mount = true
+    if (template.includes("data-k-effects=")) descriptor.effects = true
     if (template.includes("data-k-list-condition")) descriptor.conditions = true
     if (template.includes("data-k-list-text-end")) descriptor.textRanges = true
     if (template.includes("data-k-list-attrs")) descriptor.attributes = true
@@ -621,7 +699,7 @@ async function renderList(node, namespace, selectValue) {
     renderContext.listTemplate = false
     renderContext.listInitialMarkers = Boolean(descriptor.conditions)
     for (const item of node.items.value) {
-      renderContext.listRoot = { id, key: item[node.keyField], template: false }
+      renderContext.listRoot = { id, key: item[node.keyField], template: false, effects: [], item }
       current += await renderNode(node.render(item), namespace, selectValue)
     }
     renderContext.lists.push(descriptor)
@@ -633,10 +711,17 @@ async function renderList(node, namespace, selectValue) {
     renderContext.listTemplate = false
     renderContext.listInitialMarkers = false
     renderContext.listFields = previousListFields
+    renderContext.listEffectOwners = previousListEffectOwners
     renderContext.listDepth--
   }
 }
 
+function nextRenderId(kind) {
+  if (renderContext.scoped) return `${renderContext.renderScope === "layout" ? "l" : "r"}${kind}${renderContext.counters[renderContext.renderScope][kind]++}`
+  const counters = { s: "nextState", r: "nextRef", c: "nextCondition", l: "nextList", e: "nextEffect", p: "nextParam" }
+  return `${kind}${renderContext[counters[kind]]++}`
+}
+
 function optionValue(props) {
   if (props.value != null) return bindingValue(props.value)
   return Array.isArray(props.children) ? props.children.join("") : props.children ?? ""

package/framework/dependency-runtime.js

@@ -0,0 +1,36 @@
+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)
+    else {
+      state.set(id, operation === "add" ? current + operand : operand)
+      changed.add(id)
+    }
+  }
+  for (const id of changed) commit(id, state.get(id))
+}
+
+export const browserState = new Map()
+const committers = []
+
+export function registerCommitter(commit) {
+  committers.push(commit)
+}
+
+export function commitDom(id, value) {
+  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) node.textContent = value
+  for (const commit of committers) commit(id)
+}
+
+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))
+
+  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) applyCommands(browserState, JSON.parse(target.getAttribute(`data-k-on-${eventName}`)), commitDom)
+  })
+}

package/framework/effect-runtime.js

@@ -1,17 +1,19 @@
 import { deserialize } from "./serialization.js"
 
-export function createEffectContext(state, stateIds, commit, serializedScope = {}) {
+export function createEffectContext(state, stateIds, commit, serializedScope = {}, active = () => true) {
   const changed = new Set()
   let scheduled = false
 
   const flush = () => {
     scheduled = false
+    if (!active()) return changed.clear()
     const ids = [...changed]
     changed.clear()
     for (const id of ids) commit(id, state.get(id))
   }
 
   const setId = (id, value) => {
+    if (!active()) return
     const current = state.get(id)
     state.set(id, typeof value === "function" ? value(current) : value)
     changed.add(id)

package/framework/list-runtime.js

@@ -7,7 +7,7 @@ const imports = __KUDZU_LIST_ASYNC_PARTS__ ? new Map() : undefined
 const revisions = __KUDZU_LIST_ASYNC_PARTS__ ? new WeakMap() : undefined
 const itemParts = new WeakMap()
 const conditionOwners = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
-const itemPartsSelector = `[data-k-list-text]${__KUDZU_LIST_ATTRIBUTES__ ? ",[data-k-list-attrs]" : ""}${__KUDZU_LIST_EVENTS__ ? ",[data-k-list-events]" : ""}${__KUDZU_LIST_EXPRESSIONS__ ? ",[data-k-list-expression]" : ""}${__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? ",[data-k-list-expression-attrs]" : ""}${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}`
+const itemPartsSelector = `[data-k-list-text]${__KUDZU_LIST_ATTRIBUTES__ ? ",[data-k-list-attrs]" : ""}${__KUDZU_LIST_EVENTS__ ? ",[data-k-list-events]" : ""}${__KUDZU_LIST_EXPRESSIONS__ ? ",[data-k-list-expression]" : ""}${__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? ",[data-k-list-expression-attrs]" : ""}${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}${__KUDZU_LIST_EFFECTS__ ? ",[data-k-effects]" : ""}`
 
 function commitLists(id) {
   const lists = listTargets.get(id)
@@ -114,8 +114,11 @@ function updateList(list) {
     } else node.remove()
   }
   if (added) {
-    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) mountDom(additions)
-    parent.insertBefore(additions, list.boundary)
+    if (__KUDZU_LIST_MOUNTS__ && list.descriptor.mount) {
+      const addedNodes = [...additions.childNodes]
+      parent.insertBefore(additions, list.boundary)
+      for (const node of addedNodes) mountDom(node)
+    } else parent.insertBefore(additions, list.boundary)
     list.container ??= parent
   }
   let anchor = list.boundary
@@ -149,6 +152,7 @@ function fillListItem(root, item) {
 }
 
 function fillListParts(root, parts, item, revision) {
+  if (__KUDZU_LIST_EFFECTS__) for (const node of parts.effects) node.dataset.kEffectItem = JSON.stringify(item)
   for (const [node, field] of parts.directTexts) {
     const text = item?.[field]
     const value = text == null ? "" : String(text)
@@ -203,7 +207,7 @@ function fillListParts(root, parts, item, revision) {
 function listItemParts(root) {
   let parts = itemParts.get(root)
   if (parts) return parts
-  parts = { directTexts: [], texts: [], attributes: [], events: [], expressions: [], expressionAttributes: [], conditions: [] }
+  parts = { directTexts: [], texts: [], attributes: [], events: [], expressions: [], expressionAttributes: [], conditions: [], effects: [] }
   for (const node of matching(root, itemPartsSelector)) {
     if (node.hasAttribute("data-k-list-text")) (node.tagName === "TEMPLATE" ? parts.texts : parts.directTexts).push([node, node.dataset.kListText])
     if (__KUDZU_LIST_ATTRIBUTES__ && node.hasAttribute("data-k-list-attrs")) parts.attributes.push([node, JSON.parse(node.dataset.kListAttrs)])
@@ -214,6 +218,7 @@ function listItemParts(root) {
       parts.conditions.push([node, JSON.parse(node.dataset.kListCondition)])
       conditionOwners.set(node, root)
     }
+    if (__KUDZU_LIST_EFFECTS__ && node.hasAttribute("data-k-effects")) parts.effects.push(node)
   }
   itemParts.set(root, parts)
   return parts
@@ -230,7 +235,8 @@ function listItemPartPlan(template) {
     events: __KUDZU_LIST_EVENTS__ ? parts.events.map(([node, events]) => [indexes.get(node), events]) : [],
     expressions: __KUDZU_LIST_EXPRESSIONS__ ? parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : [],
     expressionAttributes: __KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]) : [],
-    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : []
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : [],
+    effects: __KUDZU_LIST_EFFECTS__ ? parts.effects.map(node => indexes.get(node)) : []
   }
 }
 
@@ -246,7 +252,8 @@ function mapListItemParts(parts, root) {
     conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([index, descriptor]) => {
       conditionOwners.set(target[index], root)
       return [target[index], descriptor]
-    }) : []
+    }) : [],
+    effects: __KUDZU_LIST_EFFECTS__ ? parts.effects.map(index => target[index]) : []
   })
 }