@kudzujs/core 0.2.3 → 0.4.0

package/README.md

@@ -6,11 +6,9 @@
 
 HTML-first TSX framework with synchronous state semantics and no virtual DOM.
 
-Brand assets, favicons, manifest icons, and the 1200×630 social preview live in [`public/`](./public).
-
 Kudzu keeps the familiar function-component, props, children, event-handler, and `useState` shape. Static components compile to HTML. Simple interactions compile to small behavior commands, while normal sync or async JavaScript handlers compile to external ESM.
 
-> Experimental `0.2.x`: the compiler API and supported TSX surface may change.
+> Experimental `0.4.x`: the compiler API and supported TSX surface may change.
 
 Documentation: [kudzujs.cloud/docs](https://kudzujs.cloud/docs)
 
@@ -56,6 +54,8 @@ Configure TypeScript:
 }
 ```
 
+Make sure application TSX files are included by this `tsconfig.json`. Files outside its `include` may fall into an editor-inferred React project and incorrectly report a missing `react/jsx-runtime` or React event-type errors.
+
 Create `src/pages/index.tsx`:
 
 ```tsx
@@ -100,15 +100,66 @@ The handler above increments by two and patches its bound DOM once. Inspect the
 
 ## Reactive Attributes
 
-`className`, `disabled`, and controlled `value` accept normal state-dependent TSX expressions:
+`className`, `disabled`, controlled `value`, and controlled `checked` accept normal state-dependent TSX expressions. The same `value` binding works for inputs and selects:
 
 ```tsx
 <div className={active ? "active" : "idle"} />
 <button disabled={loading}>Save</button>
 <input value={name} onInput={event => setName(event.currentTarget.value)} />
+<input type="checkbox" checked={subscribed} onChange={event => setSubscribed(event.currentTarget.checked)} />
+<select value={theme} onChange={event => setTheme(event.currentTarget.value)} />
+```
+
+Regular attributes use the same expressions without an allowlist:
+
+```tsx
+<button
+  aria-expanded={open}
+  data-state={open ? "open" : "closed"}
+  hidden={!visible}
+  title={open ? "Close menu" : "Open menu"}
+/>
+```
+
+Kudzu compiles derived expressions to external ESM and patches only the bound DOM attribute or property. `aria-*` and `data-*` boolean values serialize as `"true"` or `"false"`; ordinary false values remove the attribute. Reactive `style`, `ref`, and `dangerouslySetInnerHTML` remain unsupported.
+
+## Conditional DOM
+
+Inline child `&&` and ternary expressions insert and remove bounded DOM ranges directly. A menu bar needs only state setters:
+
+```tsx
+function MenuBar() {
+  return <nav><a href="/docs">Docs</a></nav>
+}
+
+const [open, setOpen] = useState(false)
+
+{open
+  ? <button onClick={() => setOpen(false)}>Close menu</button>
+  : <button onClick={() => setOpen(true)}>Open menu</button>}
+{open && <MenuBar />}
+```
+
+Logical state persists across branch switches, while uncontrolled DOM state resets on remount. Both branches are materialized in inert templates at build time, so conditional rendering is not an authorization boundary and dormant branches must not contain secrets.
+
+Reactive conditional DOM currently targets the HTML namespace and is rejected inside SVG or MathML.
+
+## Keyed Lists
+
+Map local array state directly to one keyed JSX element per item:
+
+```tsx
+const [items, setItems] = useState([
+  { id: 1, name: "Oak" },
+  { id: 2, name: "Pine" }
+])
+
+<ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>
 ```
 
-Kudzu compiles derived expressions to external ESM and patches only the bound DOM attribute or property.
+Kudzu emits initial items as static HTML, then adds, removes, updates, and moves keyed elements directly. Existing keys move without remounting, preserving uncontrolled descendant state. Each item must be a plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, plain objects, and primitive values.
+
+The MVP requires a direct local-state `.map`, one identifier callback parameter, one intrinsic JSX root, and `key={item.<field>}`. Item data may appear only as direct `item.<field>` text or attributes. Item-derived expressions, item-local handlers, nested conditions or lists, component tags, and fragments are rejected at build time. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
 
 ## Normal JavaScript
 
@@ -136,7 +187,9 @@ Primitive values, arrays, plain objects, and destructured props can be captured
 TSX
 ├─ static component      → HTML
 ├─ ordered state setter  → behavior command
-└─ normal JS handler     → route handler ESM
+├─ conditional child     → bounded DOM range
+├─ keyed state map       → keyed DOM moves
+└─ normal JS handler     → external ESM
 ```
 
 - Static pages ship no client JavaScript.
@@ -163,11 +216,14 @@ Supported:
 - Synchronous and async event handlers
 - Serializable component-local captures
 - Direct text DOM patches
-- Reactive `className`, `disabled`, and controlled `value` patches
+- Reactive standard, `aria-*`, and `data-*` attributes
+- Controlled `value` and `checked` form properties
+- Conditional child `&&` and ternary DOM patches
+- Direct keyed local-state lists
 
 Not implemented yet:
 
-- Conditional DOM patches and keyed lists
+- Generalized JSX-valued locals and non-direct list item expressions
 - Server actions and request-time SSR
 - Imported client helpers and React package islands
 - HMR and framework DevTools
@@ -182,13 +238,13 @@ Same counter with initial value `7` and increment/decrement buttons:
 
 | Framework | Initial content | Initial JS gzip | Total output | Clean build |
 |---|---:|---:|---:|---:|
-| Kudzu | Yes | 563 B | 1.7 KB | **384 ms** |
-| Astro | Yes | **158 B** | **365 B** | 911 ms |
-| Svelte CSR | No | 10.5 KB | 26.9 KB | 910 ms |
-| Qwik CSR | No | 20.6 KB | 57.8 KB | 627 ms |
-| Vue CSR | No | 24.0 KB | 60.3 KB | 814 ms |
-| React CSR | No | 59.2 KB | 189.0 KB | 1052 ms |
-| Next.js | Yes | 182.1 KB | 652.2 KB | 2985 ms |
+| Kudzu | Yes | 487 B | 1.4 KB | **373 ms** |
+| Astro | Yes | **158 B** | **365 B** | 877 ms |
+| Svelte CSR | No | 10.5 KB | 26.9 KB | 837 ms |
+| Qwik CSR | No | 20.6 KB | 57.8 KB | 626 ms |
+| Vue CSR | No | 24.0 KB | 60.3 KB | 778 ms |
+| React CSR | No | 59.2 KB | 189.0 KB | 1049 ms |
+| Next.js | Yes | 182.1 KB | 652.2 KB | 3099 ms |
 
 Astro produces the smallest hand-authored counter. Kudzu's advantage in this fixture is React-shaped state code with a sub-1 KB runtime, not the smallest possible JavaScript.
 

package/framework/README.md

@@ -4,12 +4,13 @@
 - `core.mjs`: server-side JSX rendering, state slots, behavior metadata, and serializable capture validation.
 - `jsx-runtime.mjs`: automatic JSX runtime used by TypeScript.
 - `runtime.js`: command-only runtime for direct state-to-text patches.
-- `shared-runtime.js`: command runtime with binding commit hooks, emitted only when needed.
-- `binding-runtime.js`: optional reactive `className`, `disabled`, and `value` patches.
+- `shared-runtime.js`: command runtime with capability commit and DOM lifecycle hooks, emitted only when needed.
+- `binding-runtime.js`: optional generic attributes, form properties, and conditional range patches.
+- `list-runtime.js`: optional keyed list validation, updates, moves, and cleanup.
 - `serialization.js`: capture deserialization shared by binding and native handlers.
 - `native-runtime.js`: optional runtime for normal synchronous and asynchronous ESM handlers.
 - `*.d.ts`: public TypeScript and JSX declarations.
 
-Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes add `binding-runtime.js`; native handlers add `native-runtime.js`. Generated evaluators live under `dist/assets/handlers/`.
+Static routes receive no browser runtime. Command routes receive `runtime.js`; reactive attributes and conditions add `binding-runtime.js`; keyed lists add `list-runtime.js`; native handlers add `native-runtime.js`. Capability runtimes share state and lifecycle hooks through `shared-runtime.js`. Generated evaluators live under `dist/assets/handlers/`.
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime.

package/framework/binding-runtime.js

@@ -1,70 +1,205 @@
-import { browserState, registerCommitter } from "./shared-runtime.js"
+import { browserState, mountDom, registerCommitter, registerMountHook, registerUnmountHook, unmountDom } from "./shared-runtime.js"
 import { deserialize } from "./serialization.js"
 
+const imports = new Map()
 const bindingTargets = new Map()
+const conditionTargets = new Map()
+const mountedBindings = new WeakSet()
+const mountedConditions = new WeakSet()
+const bindingRegistrations = new WeakMap()
+const conditionRegistrations = new WeakMap()
+const bindingTypes = ["class", "disabled", "value", "checked"]
+const bindingSelector = [...bindingTypes.map(target => `[data-k-bind-${target}]`), "[data-k-bind-attrs]"].join(",")
 
 export 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 (value == null || value === false) {
+  } else if (target === "class" && (value == null || value === false)) {
     node.removeAttribute("class")
-  } else {
+  } 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 commitBindings(id) {
-  for (const binding of bindingTargets.get(id) ?? []) patchBinding(binding.node, binding.target, binding.read())
+  const bindings = bindingTargets.get(id)
+  if (!bindings) return
+  for (const binding of bindings) {
+    if (!binding.node.isConnected) bindings.delete(binding)
+    else patchBinding(binding.node, binding.target, binding.read())
+  }
+}
+
+function commitConditions(id) {
+  const conditions = conditionTargets.get(id)
+  if (!conditions) return
+  for (const condition of conditions) {
+    if (!condition.start.isConnected) conditions.delete(condition)
+    else updateCondition(condition)
+  }
 }
 
 registerCommitter(commitBindings)
+registerCommitter(commitConditions)
+registerMountHook(mountBindings)
+registerMountHook(mountConditions)
+registerUnmountHook(unmountBindings)
+registerUnmountHook(unmountConditions)
+
+if (typeof document !== "undefined") mountDom(document)
 
-if (typeof document !== "undefined") {
-  const imports = new Map()
-  const registrations = []
-  for (const target of ["class", "disabled", "value"]) {
-    for (const node of document.querySelectorAll(`[data-k-bind-${target}]`)) {
-      const descriptor = JSON.parse(node.dataset[`kBind${capitalize(target)}`])
+function mountBindings(root) {
+  for (const node of matching(root, bindingSelector)) {
+    if (mountedBindings.has(node)) continue
+    mountedBindings.add(node)
+    const registrations = []
+    bindingRegistrations.set(node, registrations)
+    const descriptors = bindingTypes.flatMap(target => node.hasAttribute(`data-k-bind-${target}`)
+      ? [[target, JSON.parse(node.dataset[`kBind${capitalize(target)}`])]]
+      : [])
+    if (node.dataset.kBindAttrs) descriptors.push(...JSON.parse(node.dataset.kBindAttrs).map(({ target, ...descriptor }) => [target, descriptor]))
+    for (const [target, descriptor] of descriptors) {
       if (descriptor.state) {
-        registerBinding(descriptor.state, { node, target, read: () => browserState.get(descriptor.state) })
+        const binding = { node, target, read: () => browserState.get(descriptor.state) }
+        register(bindingTargets, descriptor.state, binding)
+        registrations.push([descriptor.state, binding])
+        patchBinding(node, target, binding.read())
         continue
       }
-      let modulePromise = imports.get(descriptor.module)
-      if (!modulePromise) {
-        modulePromise = import(descriptor.module)
-        imports.set(descriptor.module, modulePromise)
-      }
-      registrations.push(modulePromise.then(async module => {
-        const context = await createBindingContext(descriptor, imports)
-        const binding = { node, target, read: () => module[descriptor.handler](context) }
-        for (const id of bindingStateIds(descriptor)) registerBinding(id, binding)
+      loadEvaluator(descriptor).then(evaluator => {
+        if (!node.isConnected) return
+        const binding = { node, target, read: evaluator.read }
+        for (const id of evaluator.stateIds) {
+          register(bindingTargets, id, binding)
+          registrations.push([id, binding])
+        }
         patchBinding(node, target, binding.read())
-      }))
+      }).catch(error => console.error(error))
     }
   }
-  Promise.all(registrations).catch(error => console.error(error))
 }
 
-function registerBinding(id, binding) {
-  const bindings = bindingTargets.get(id) ?? []
-  bindings.push(binding)
-  bindingTargets.set(id, bindings)
+function mountConditions(root) {
+  for (const start of matching(root, "template[data-k-if]")) {
+    if (mountedConditions.has(start)) continue
+    mountedConditions.add(start)
+    const descriptor = JSON.parse(start.dataset.kIf)
+    const end = findEnd(start, descriptor.id)
+    const truthy = start.content.querySelector("template[data-k-true]")
+    const falsy = start.content.querySelector("template[data-k-false]")
+    if (!end || !truthy || !falsy) continue
+    const condition = { start, end, truthy, falsy, kind: descriptor.kind, current: conditionKey(descriptor.kind, descriptor.initial) }
+    loadEvaluator(descriptor).then(evaluator => {
+      if (!start.isConnected) return
+      condition.read = evaluator.read
+      const registrations = []
+      for (const id of evaluator.stateIds) {
+        register(conditionTargets, id, condition)
+        registrations.push([id, condition])
+      }
+      conditionRegistrations.set(start, { condition, registrations })
+      updateCondition(condition)
+    }).catch(error => console.error(error))
+  }
+}
+
+function updateCondition(condition) {
+  const value = condition.read()
+  const next = conditionKey(condition.kind, value)
+  if (next === condition.current) return
+  removeConditionRange(condition.start, condition.end)
+  const truthy = Boolean(value)
+  const falseText = condition.kind === "and" && !truthy ? renderFalsy(value) : ""
+  const fragment = falseText
+    ? textFragment(condition.end.ownerDocument, falseText)
+    : (truthy ? condition.truthy : condition.falsy).content.cloneNode(true)
+  const nodes = [...fragment.childNodes]
+  condition.end.parentNode.insertBefore(fragment, condition.end)
+  condition.current = next
+  for (const node of nodes) mountDom(node)
+  const select = condition.start.closest("select[data-k-bind-value]")
+  for (const binding of new Set((bindingRegistrations.get(select) ?? []).map(([, entry]) => entry))) {
+    patchBinding(binding.node, binding.target, binding.read())
+  }
+}
+
+function unmountBindings(root) {
+  for (const node of matching(root, bindingSelector)) {
+    for (const [id, binding] of bindingRegistrations.get(node) ?? []) bindingTargets.get(id)?.delete(binding)
+    bindingRegistrations.delete(node)
+    mountedBindings.delete(node)
+  }
+}
+
+function unmountConditions(root) {
+  for (const start of matching(root, "template[data-k-if]")) {
+    const registration = conditionRegistrations.get(start)
+    for (const [id, condition] of registration?.registrations ?? []) conditionTargets.get(id)?.delete(condition)
+    conditionRegistrations.delete(start)
+    mountedConditions.delete(start)
+  }
+}
+
+function removeConditionRange(start, end) {
+  const range = start.ownerDocument.createRange()
+  range.setStartAfter(start)
+  range.setEndBefore(end)
+  const root = range.commonAncestorContainer
+  const nodes = matching(root, "*").filter(node => range.comparePoint(node, 0) === 0)
+  for (const node of nodes) if (!nodes.some(parent => parent !== node && parent.contains(node))) unmountDom(node)
+  range.deleteContents()
+}
+
+function conditionKey(kind, value) {
+  return value ? "true" : kind === "and" ? `false:${renderFalsy(value)}` : "false"
+}
+
+function renderFalsy(value) {
+  return value === false || value == null || value === true ? "" : String(value)
+}
+
+function textFragment(document, value) {
+  const fragment = document.createDocumentFragment()
+  fragment.append(document.createTextNode(value))
+  return fragment
+}
+
+function findEnd(start, id) {
+  return [...start.ownerDocument.querySelectorAll("template[data-k-if-end]")]
+    .find(node => node.dataset.kIfEnd === id)
 }
 
-async function createBindingContext(descriptor, imports) {
+function register(targets, id, entry) {
+  const entries = targets.get(id) ?? new Set()
+  entries.add(entry)
+  targets.set(id, entries)
+}
+
+async function loadEvaluator(descriptor) {
+  let modulePromise = imports.get(descriptor.module)
+  if (!modulePromise) {
+    modulePromise = import(descriptor.module)
+    imports.set(descriptor.module, modulePromise)
+  }
+  const [module, context] = await Promise.all([modulePromise, createBindingContext(descriptor)])
+  return { read: () => module[descriptor.handler](context), stateIds: bindingStateIds(descriptor) }
+}
+
+async function createBindingContext(descriptor) {
   const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value)]))
   const nested = {}
   await Promise.all(Object.entries(descriptor.scopeBindings).map(async ([name, binding]) => {
-    let modulePromise = imports.get(binding.module)
-    if (!modulePromise) {
-      modulePromise = import(binding.module)
-      imports.set(binding.module, modulePromise)
-    }
-    const [module, context] = await Promise.all([modulePromise, createBindingContext(binding, imports)])
-    nested[name] = () => module[binding.handler](context)
+    const evaluator = await loadEvaluator(binding)
+    nested[name] = evaluator.read
   }))
   return {
     get: name => browserState.get(descriptor.states[name]),
@@ -80,6 +215,14 @@ function bindingStateIds(descriptor) {
   ])
 }
 
+function matching(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
+}
+
 function capitalize(value) {
   return value[0].toUpperCase() + value.slice(1)
 }
+
+function isStringBooleanAttribute(name) {
+  return name.startsWith("aria-") || name.startsWith("data-")
+}

package/framework/build.mjs

@@ -31,6 +31,7 @@ export async function build({ quiet = false } = {}) {
 
   let behaviorCount = 0
   let bindingCount = 0
+  let listCount = 0
   let stateSeedCount = 0
   const plans = []
   const hasStyles = await exists(join(sourceDirectory, "style.css"))
@@ -51,6 +52,7 @@ export async function build({ quiet = false } = {}) {
     plans.push({ route: `/${route}`, ...result.plan })
     if (result.hasBehaviors) behaviorCount++
     if (result.hasBindings) bindingCount++
+    if (result.hasLists) listCount++
     if (result.hasStateSeed) stateSeedCount++
   }
 
@@ -59,7 +61,7 @@ export async function build({ quiet = false } = {}) {
   const commandEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.commands).map(event => event.event)))].sort()
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
   if (behaviorCount) {
-    const runtimeFile = bindingCount ? "./shared-runtime.js" : "./runtime.js"
+    const runtimeFile = bindingCount || listCount ? "./shared-runtime.js" : "./runtime.js"
     const runtime = specializeRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), commandEvents, stateSeedCount > 0)
     await writeFile(join(assetsDirectory, "kudzu.js"), runtime)
   }
@@ -71,6 +73,11 @@ export async function build({ quiet = false } = {}) {
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
     await writeFile(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime)
   }
+  if (listCount) {
+    const listRuntime = (await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"))
+      .replace('"./shared-runtime.js"', '"./kudzu.js"')
+    await writeFile(join(assetsDirectory, "kudzu-list.js"), listRuntime)
+  }
   if (hasNativeHandlers) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
       .replace('"./runtime.js"', '"./kudzu.js"')
@@ -184,7 +191,11 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
     const factory = context.factory
     const settersByFunction = new Map()
     const functions = new Map()
+    const listFieldExpressions = new WeakSet()
     let usesBehavior = false
+    let usesBinding = false
+    let usesConditional = false
+    let usesList = false
 
     const collect = node => {
       if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer)) {
@@ -226,13 +237,45 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
         return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, initializer)
       }
 
-      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && ["className", "disabled", "value"].includes(node.name.getText())) {
+      if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
+        const listParts = keyedListParts(node.expression, settersForNode(node, settersByFunction))
+        if (listParts) {
+          if (keyedListParentTag(node) === "table") throw new Error("Keyed table rows must be wrapped in <tbody>, <thead>, or <tfoot>")
+          validateKeyedList(listParts, sourceFile, listFieldExpressions)
+          usesBehavior = true
+          usesBinding = true
+          usesList = true
+          return factory.updateJsxExpression(node, factory.createCallExpression(factory.createIdentifier("__kList"), undefined, [
+            listParts.state,
+            factory.createStringLiteral(listParts.keyField),
+            ts.visitNode(listParts.callback, visitor)
+          ]))
+        }
+        const parts = conditionalParts(node.expression)
+        if (parts) {
+          const setters = settersForNode(node, settersByFunction)
+          const usedStates = referencedStateNames(parts.condition, setters)
+          const captures = captureNames(parts.condition, parts.condition, setters)
+          if (usedStates.size || captures.size) {
+            usesBehavior = true
+            usesConditional = true
+            const truthy = ts.visitNode(parts.truthy, visitor)
+            const falsy = ts.visitNode(parts.falsy, visitor)
+            const compiled = compileConditional(parts.kind, parts.condition, truthy, falsy, setters, factory, context, reactiveBindings, handlerUrl)
+            return factory.updateJsxExpression(node, compiled)
+          }
+        }
+      }
+
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !/^on/i.test(node.name.getText()) && !["style", "key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
         const expression = node.initializer.expression
+        if (listFieldExpressions.has(expression)) return node
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(expression, setters)
         const captures = captureNames(expression, expression, setters)
         if ((usedStates.size || captures.size) && !ts.isIdentifier(expression)) {
           usesBehavior = true
+          usesBinding = true
           const compiled = compileReactiveBinding(expression, setters, factory, context, reactiveBindings, handlerUrl)
           return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, compiled))
         }
@@ -257,8 +300,10 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
 
     const behaviorImports = [factory.createImportSpecifier(false, factory.createIdentifier("behavior"), factory.createIdentifier("__kBehavior"))]
     if (nativeHandlers.length) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("nativeBehavior"), factory.createIdentifier("__kNativeBehavior")))
-    if (reactiveBindings.length) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("binding"), factory.createIdentifier("__kBinding")))
-    if (reactiveBindings.length) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("bindingValue"), factory.createIdentifier("__kBindingValue")))
+    if (usesBinding) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("binding"), factory.createIdentifier("__kBinding")))
+    if (usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("conditional"), factory.createIdentifier("__kConditional")))
+    if (usesList) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("list"), factory.createIdentifier("__kList")))
+    if (usesBinding || usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("bindingValue"), factory.createIdentifier("__kBindingValue")))
     const behaviorImport = factory.createImportDeclaration(
       undefined,
       factory.createImportClause(false, undefined, factory.createNamedImports(behaviorImports)),
@@ -268,7 +313,94 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
   }
 }
 
+function keyedListParts(expression, setters) {
+  const value = unwrapExpression(expression)
+  if (!ts.isCallExpression(value) || value.arguments.length !== 1 || !ts.isPropertyAccessExpression(value.expression) || value.expression.name.text !== "map" || !ts.isIdentifier(value.expression.expression)) return undefined
+  const state = value.expression.expression
+  if (![...setters.values()].includes(state.text)) return undefined
+  const callback = value.arguments[0]
+  if (!ts.isArrowFunction(callback) || callback.parameters.length !== 1 || !ts.isIdentifier(callback.parameters[0].name)) {
+    throw new Error("Keyed list map callback must be an arrow function with one identifier parameter")
+  }
+  const root = unwrapExpression(callback.body)
+  if (!ts.isJsxElement(root) && !ts.isJsxSelfClosingElement(root)) throw new Error("Keyed list map callback must return one JSX element")
+  const attributes = ts.isJsxElement(root) ? root.openingElement.attributes : root.attributes
+  const key = attributes.properties.find(attribute => ts.isJsxAttribute(attribute) && attribute.name.getText() === "key")
+  const field = key && ts.isJsxAttribute(key) && key.initializer && ts.isJsxExpression(key.initializer) && key.initializer.expression && directProperty(key.initializer.expression, callback.parameters[0].name.text)
+  if (!field) throw new Error(`Keyed list root must have key={${callback.parameters[0].name.text}.<field>}`)
+  return { state, callback, root, item: callback.parameters[0].name.text, keyField: field }
+}
+
+function validateKeyedList(parts, sourceFile, listFieldExpressions) {
+  const fail = (node, message) => {
+    const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
+    throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
+  }
+  const validateElement = node => {
+    const tag = ts.isJsxElement(node) ? node.openingElement.tagName : node.tagName
+    if (!ts.isIdentifier(tag) || tag.text[0] !== tag.text[0].toLowerCase()) fail(node, "Keyed list items must use intrinsic JSX elements")
+  }
+  const visit = node => {
+    if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) validateElement(node)
+    if (node !== parts.root && ts.isCallExpression(node) && ts.isPropertyAccessExpression(node.expression) && node.expression.name.text === "map") fail(node, "Nested keyed lists are not supported")
+    if (ts.isJsxSpreadAttribute(node) && referencesIdentifier(node.expression, parts.item)) fail(node, "Keyed list item spreads are not supported")
+    if (ts.isJsxAttribute(node) && /^on[A-Z]/.test(node.name.getText())) fail(node, "Item-local handlers are not supported in keyed lists")
+    if (ts.isJsxExpression(node) && node.expression) {
+      const expression = unwrapExpression(node.expression)
+      const field = directProperty(expression, parts.item)
+      const isRootKey = node.parent?.parent === parts.root && ts.isJsxAttribute(node.parent) && node.parent.name.getText() === "key"
+      if (field && ts.isJsxAttribute(node.parent) && ["style", "ref", "dangerouslysetinnerhtml"].includes(node.parent.name.getText().toLowerCase())) fail(node, `Keyed list item ${node.parent.name.getText()} is not supported`)
+      if (isRootKey || field) {
+        if (field) listFieldExpressions.add(node.expression)
+        return
+      }
+      if (conditionalParts(expression)) fail(node, "Nested reactive conditions are not supported in keyed lists")
+      if (referencesIdentifier(expression, parts.item)) fail(node, `Keyed list item expressions must be direct ${parts.item}.<field> reads`)
+    }
+    ts.forEachChild(node, visit)
+  }
+  visit(parts.root)
+}
+
+function directProperty(expression, objectName) {
+  const value = unwrapExpression(expression)
+  if (!ts.isPropertyAccessExpression(value) || !ts.isIdentifier(value.expression)) return undefined
+  if (objectName !== undefined && value.expression.text !== objectName) return undefined
+  return value.name.text
+}
+
+function keyedListParentTag(node) {
+  for (let current = node.parent; current; current = current.parent) {
+    if (ts.isJsxElement(current)) return current.openingElement.tagName.getText().toLowerCase()
+  }
+  return undefined
+}
+
+function referencesIdentifier(root, name) {
+  let found = false
+  const visit = node => {
+    if (ts.isIdentifier(node) && node.text === name && isReferenceIdentifier(node)) found = true
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(root)
+  return found
+}
+
+function unwrapExpression(node) {
+  return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node
+}
+
 function compileReactiveBinding(expression, setters, factory, context, reactiveBindings, handlerUrl) {
+  return factory.createCallExpression(factory.createIdentifier("__kBinding"), undefined, compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl))
+}
+
+function compileConditional(kind, expression, truthy, falsy, setters, factory, context, reactiveBindings, handlerUrl) {
+  const [initial, ...descriptor] = compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl)
+  const thunk = branch => factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), branch)
+  return factory.createCallExpression(factory.createIdentifier("__kConditional"), undefined, [factory.createStringLiteral(kind), initial, thunk(truthy), thunk(falsy), ...descriptor])
+}
+
+function compileReactiveExpression(expression, setters, factory, context, reactiveBindings, handlerUrl) {
   const usedStates = referencedStateNames(expression, setters)
   const captures = captureNames(expression, expression, setters)
   const exportName = `binding${reactiveBindings.length}`
@@ -297,13 +429,29 @@ function compileReactiveBinding(expression, setters, factory, context, reactiveB
     }
     return ts.visitEachChild(node, rewriteInitial, context)
   }
-  return factory.createCallExpression(factory.createIdentifier("__kBinding"), undefined, [
+  return [
     ts.visitNode(expression, rewriteInitial),
     factory.createStringLiteral(handlerUrl),
     factory.createStringLiteral(exportName),
     factory.createArrayLiteralExpression(states),
     factory.createArrayLiteralExpression(scope)
-  ])
+  ]
+}
+
+function conditionalParts(expression) {
+  const unwrap = node => ts.isParenthesizedExpression(node) ? unwrap(node.expression) : node
+  const value = unwrap(expression)
+  if (ts.isBinaryExpression(value) && value.operatorToken.kind === ts.SyntaxKind.AmpersandAmpersandToken) {
+    return { kind: "and", condition: value.left, truthy: unwrap(value.right), falsy: factoryNull() }
+  }
+  if (ts.isConditionalExpression(value)) {
+    return { kind: "ternary", condition: value.condition, truthy: unwrap(value.whenTrue), falsy: unwrap(value.whenFalse) }
+  }
+  return undefined
+}
+
+function factoryNull() {
+  return ts.factory.createNull()
 }
 
 function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl) {