@kudzujs/core 0.4.12 → 0.4.14

package/README.md

@@ -98,6 +98,14 @@ function increaseTwice() {
 
 The handler above increments by two and patches its bound DOM once. Inspect the generated plan at `.kudzu/kudzu-plan.json`.
 
+State may also hold serializable plain objects. Property expressions in JSX text update directly:
+
+```tsx
+const [weather, setWeather] = useState({ temperature: 28, label: "Warm" })
+
+return <p>{weather.temperature}° {weather.label}</p>
+```
+
 ## Reactive Attributes
 
 `className`, `disabled`, controlled `value`, and controlled `checked` accept normal state-dependent TSX expressions. The same `value` binding works for inputs and selects:
@@ -209,6 +217,7 @@ const rows = items.map(item =>
     style={{ opacity: item.done ? 0.5 : 1 }}
   >
     {item.name.toUpperCase()}
+    {item.done ? <strong>Complete</strong> : <span>Pending</span>}
     <button onClick={() => setItems(items.filter(entry => entry.id !== item.id))}>Remove</button>
   </li>
 )
@@ -216,9 +225,9 @@ const rows = items.map(item =>
 return <ul>{rows}</ul>
 ```
 
-Kudzu emits initial items as static HTML, then adds, removes, updates, styles, and moves keyed elements directly. The map may appear directly in JSX or in one top-level immutable `const` rendered once as a JSX child. Existing keys move without remounting, preserving uncontrolled descendant state. Direct `item.<field>` reads use compact markers; derived item expressions compile to external ESM evaluators. Item-local handlers use direct DOM listeners and receive the latest JSON-safe item for their key, including after updates, additions, and reorders. The item remains stored once in shared list state; handler descriptors carry a placeholder that the list runtime fills when mounting or updating the keyed root.
+Kudzu emits initial items as static HTML, then adds, removes, updates, styles, conditional branches, and moves keyed elements directly. The map may appear directly in JSX or in one top-level immutable `const` rendered once as a JSX child. Existing keys move without remounting, preserving uncontrolled descendant state. Direct `item.<field>` reads use compact markers; derived item expressions compile to external ESM evaluators. Single-level item-local `&&` and ternary JSX conditions patch only their bounded branch and mount or unmount its handlers. Item-local handlers use direct DOM listeners and receive the latest JSON-safe item for their key, including after updates, additions, and reorders. The item remains stored once in shared list state; handler descriptors carry a placeholder that the list runtime fills when mounting or updating the keyed root.
 
-Each item must be an ordinary plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, ordinary plain objects, and primitive values. Null-prototype objects are rejected to preserve JSON round-trip parity. The current syntax requires a local-state `.map`, one identifier callback parameter, one intrinsic JSX root, and `key={item.<field>}`. A list alias may only be rendered once and cannot be read by other JavaScript. Derived expressions must be pure and synchronous: item reads, literals, operators, templates, approved read-only string/array methods, deterministic `Math` methods, and `String`/`Number`/`Boolean` conversion are supported. Component state, locals, imported helpers, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Nested conditions or lists, item spreads, component tags, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
+Each item must be an ordinary plain object with a unique string or finite-number key; nested data may contain only JSON-safe arrays, ordinary plain objects, and primitive values. Null-prototype objects are rejected to preserve JSON round-trip parity. The current syntax requires a local-state `.map`, one identifier callback parameter, one intrinsic JSX root, and `key={item.<field>}`. A list alias may only be rendered once and cannot be read by other JavaScript. Derived expressions must be pure and synchronous: item reads, literals, operators, templates, approved read-only string/array methods, deterministic `Math` methods, and `String`/`Number`/`Boolean` conversion are supported. Component state, locals, imported helpers, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Nested item conditions or lists, item spreads, component tags, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
 
 ## Normal JavaScript
 
@@ -238,7 +247,18 @@ async function load() {
 }
 ```
 
-Primitive values, arrays, plain objects, and destructured props can be captured by client handlers. Functions, symbols, bigints, cycles, class instances, and imported helper functions are not yet supported as captures.
+Native handlers may call default, named, or namespace helpers imported from relative TypeScript modules. Kudzu bundles the reachable helper graph into handler ESM and shared chunks; helper runtime imports must remain relative, and dynamic imports or JSX helpers are rejected. Imported functions cannot be used directly as JSX event callbacks.
+
+```tsx
+import { normalizeStatus } from "../lib/status"
+
+async function load() {
+  const response = await fetch("/api/status")
+  setStatus(normalizeStatus(await response.json()))
+}
+```
+
+Primitive values, arrays, plain objects, and destructured props can be captured by client handlers. Functions, symbols, bigints, cycles, and class instances are not supported as captures.
 
 Native handlers use direct DOM listeners with normal `currentTarget`, bubbling, default-action, and propagation semantics. Handler modules load before listener registration, so `preventDefault`, `stopPropagation`, and `stopImmediatePropagation` work synchronously as expected.
 
@@ -276,6 +296,7 @@ Supported:
 - Build-time async components
 - Primitive `useState` bindings
 - Synchronous and async event handlers
+- Relative imported helpers in native handlers
 - Serializable component-local captures
 - Direct text DOM patches
 - Reactive standard, `aria-*`, and `data-*` attributes
@@ -291,7 +312,7 @@ Not implemented yet:
 
 - Block-scoped JSX locals and reusable keyed-list aliases
 - Server actions and request-time SSR
-- Imported client helpers and React package islands
+- React package islands
 - HMR and framework DevTools
 
 ## Benchmarks
@@ -314,6 +335,17 @@ Same counter with initial value `7` and increment/decrement buttons:
 
 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.
 
+#### Imported Helper Cost
+
+The same native counter calculation was measured inline and through one relative TypeScript helper. Click medians are per state update from five 20,000-click batches in each of seven fresh Chrome sessions.
+
+| Kudzu variant | Files | Initial JS gzip | Total output | Clean build | Click |
+|---|---:|---:|---:|---:|---:|
+| Inline native handler | 5 | 1,827 B | 3,923 B | **426 ms** | **3.78 µs** |
+| Imported helper | 5 | 1,845 B | 3,949 B | 446 ms | 4.47 µs |
+
+Bundling removes the helper file boundary, leaving 26 raw bytes and 18 gzip bytes for the function definition and calls. The measured call adds 0.69 µs per state update. The smaller 393 B command-only counter above uses a different optimized runtime path and is not the helper overhead baseline.
+
 ### Static Journal Page
 
 Same content and CSS across every fixture:
@@ -334,15 +366,15 @@ The list starts with 1,000 keyed items, then updates every label, reverses the o
 
 | Framework | Initial content | Initial JS gzip | Total output | Build | Update | Reverse | Remove | Add | Operations total |
 |---|---:|---:|---:|---:|---:|---:|---:|---:|---:|
-| Astro | Yes | **324 B** | **43.6 KB** | 826 ms | **4.1 ms** | **3.7 ms** | **1.4 ms** | **3.3 ms** | **12.5 ms** |
-| Kudzu | Yes | 5.0 KB | 60.3 KB | **452 ms** | 7.1 ms | 7.5 ms | 1.9 ms | 7.0 ms | 23.5 ms |
-| Next.js | Yes | 182.2 KB | 695.2 KB | 3002 ms | 7.5 ms | 12.3 ms | 4.1 ms | 7.8 ms | 31.7 ms |
-| Vue CSR | No | 24.3 KB | 61.3 KB | 765 ms | 11.4 ms | 9.8 ms | 4.4 ms | 7.0 ms | 32.6 ms |
-| React CSR | No | 59.3 KB | 189.4 KB | 1039 ms | 9.9 ms | 13.4 ms | 4.7 ms | 6.1 ms | 34.1 ms |
-| Svelte CSR | No | 12.9 KB | 33.1 KB | 845 ms | 6.2 ms | 42.9 ms | 4.6 ms | 6.2 ms | 59.9 ms |
-| Qwik CSR | No | 22.2 KB | 64.1 KB | 630 ms | 10.7 ms | 27.5 ms | 39.2 ms | 22.2 ms | 99.6 ms |
-
-Astro is the hand-authored native DOM baseline in the interactive fixtures. React, Vue, Svelte, and Qwik used client-rendered fixtures, while Kudzu and Astro emitted initial HTML; Qwik therefore did not exercise its SSR resumability advantage. Kudzu's keyed-list operations total 23.5 ms, 11.0 ms behind the hand-authored Astro baseline and 10.6 ms ahead of React across all four operations.
+| Astro | Yes | **324 B** | **43.6 KB** | 834 ms | **4.3 ms** | **3.8 ms** | **1.3 ms** | **3.1 ms** | **12.5 ms** |
+| Kudzu | Yes | 5.1 KB | 60.3 KB | **438 ms** | 7.5 ms | 7.0 ms | 1.8 ms | 6.9 ms | 23.2 ms |
+| Next.js | Yes | 182.2 KB | 695.2 KB | 2983 ms | 7.0 ms | 12.0 ms | 3.9 ms | 6.7 ms | 29.6 ms |
+| React CSR | No | 59.3 KB | 189.4 KB | 1020 ms | 9.5 ms | 11.7 ms | 3.8 ms | 5.3 ms | 30.3 ms |
+| Vue CSR | No | 24.3 KB | 61.3 KB | 773 ms | 11.4 ms | 9.5 ms | 4.1 ms | 6.6 ms | 31.6 ms |
+| Svelte CSR | No | 12.9 KB | 33.1 KB | 828 ms | 5.8 ms | 38.9 ms | 4.0 ms | 5.9 ms | 54.6 ms |
+| Qwik CSR | No | 22.2 KB | 64.1 KB | 594 ms | 9.1 ms | 22.2 ms | 30.8 ms | 19.0 ms | 81.1 ms |
+
+Astro is the hand-authored native DOM baseline in the interactive fixtures. React, Vue, Svelte, and Qwik used client-rendered fixtures, while Kudzu and Astro emitted initial HTML; Qwik therefore did not exercise its SSR resumability advantage. Kudzu's keyed-list operations total 23.2 ms, 10.7 ms behind the hand-authored Astro baseline and 7.1 ms ahead of React across all four operations.
 
 Benchmark snapshot collected on July 22, 2026 with Node 24.14.0 on an Intel i5-9500. These results compare the selected one-page fixtures, not ecosystem maturity, browser interaction speed beyond the listed operations, or each framework's full rendering options. Build times vary with machine load and filesystem cache.
 

package/framework/README.md

@@ -6,12 +6,12 @@
 - `runtime.js`: command-only runtime for direct state-to-text 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, external item-expression evaluation, dynamic styles and item-handler scopes, moves, and cleanup.
+- `list-runtime.js`: optional keyed list validation, external item-expression evaluation, item-local conditional ranges, dynamic styles and item-handler scopes, 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.
 - `dev-state.js`: dev-only, short-lived logical-state snapshot validation and restoration.
 - `*.d.ts`: public TypeScript and JSX declarations.
 
-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/`. The dev server derives stable state identities from route-unique variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
+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 and their bundled relative TypeScript helpers live under `dist/assets/handlers/`; shared helper chunks are emitted only when multiple handler entries need them. The dev server derives stable state identities from route-unique state variable names in each route plan; every state sharing a duplicate name is omitted. It then injects its SSE reload, short-lived full-URL-scoped logical-state snapshot, and build-error client into responses only, never into `dist/`. Snapshots are consumed even when the next page is static or broken. Reload restoration covers compatible framework state, not uncontrolled DOM state, focus, selection, or imperative mutations.
 
 Page `metadata` can emit description, canonical, favicon, manifest, Open Graph, and Twitter Card tags without a client runtime.

package/framework/binding-runtime.js

@@ -9,11 +9,14 @@ const mountedBindings = new WeakSet()
 const mountedConditions = new WeakSet()
 const bindingRegistrations = new WeakMap()
 const conditionRegistrations = new WeakMap()
-const bindingTypes = ["class", "disabled", "value", "checked", "style"]
+const bindingTypes = ["text", "class", "disabled", "value", "checked", "style"]
 const bindingSelector = [...bindingTypes.map(target => `[data-k-bind-${target}]`), "[data-k-bind-attrs]"].join(",")
 
 export function patchBinding(node, target, value) {
-  if (target === "disabled") {
+  if (target === "text") {
+    const next = value == null ? "" : String(value)
+    if (node.textContent !== next) node.textContent = next
+  } else if (target === "disabled") {
     node.toggleAttribute("disabled", Boolean(value))
   } else if (target === "checked") {
     node.checked = Boolean(value)

package/framework/build.mjs

@@ -1,9 +1,9 @@
 import { createServer } from "node:http"
 import { randomUUID } from "node:crypto"
 import { cp, mkdir, readFile, readdir, rm, stat, watch, writeFile } from "node:fs/promises"
-import { extname, join, relative, resolve, sep } from "node:path"
+import { dirname, extname, join, relative, resolve, sep } from "node:path"
 import { pathToFileURL } from "node:url"
-import { transform } from "esbuild"
+import { build as bundle, transform } from "esbuild"
 import ts from "typescript"
 import { renderPage } from "./core.mjs"
 import { stateSchema } from "./dev-state.js"
@@ -24,10 +24,11 @@ export async function build({ quiet = false, minify = true } = {}) {
 
   const sourceFiles = (await walk(sourceDirectory)).filter(file => /\.(?:ts|tsx)$/.test(file)).sort()
   if (!sourceFiles.length) throw new Error("No TypeScript files found in src/")
+  const sourceFileSet = new Set(sourceFiles)
 
   const handlerModules = []
   for (const file of sourceFiles) {
-    const handlerModule = await compile(file)
+    const handlerModule = await compile(file, sourceFileSet)
     if (handlerModule) handlerModules.push(handlerModule)
   }
 
@@ -67,6 +68,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   await mkdir(assetsDirectory, { recursive: true })
   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()
+  const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
   const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => `/assets/${module.path}`)
   const hasNativeHandlers = nativeModules.length > 0
   if (behaviorCount) {
@@ -94,7 +96,7 @@ export async function build({ quiet = false, minify = true } = {}) {
   }`
     listRuntime = listRuntime.replace("  /* list-style */", listStyleCount ? stylePatch : "")
     if (listStyleCount) listRuntime = `import { serializeStyle } from "./kudzu-style.js"\n${listRuntime}`
-    await writeJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify)
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-list.js"), listRuntime, minify, { __KUDZU_LIST_CONDITIONS__: String(hasListConditions) })
   }
   if (hasNativeHandlers) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
@@ -107,6 +109,30 @@ export async function build({ quiet = false, minify = true } = {}) {
     await mkdir(resolve(output, ".."), { recursive: true })
     await writeJavaScript(output, handlerModule.code, minify)
   }
+  const clientModules = await collectClientModules(handlerModules.flatMap(module => module.clientImports), sourceFileSet)
+  for (const file of clientModules) {
+    const output = join(assetsDirectory, clientModulePath(file))
+    await mkdir(resolve(output, ".."), { recursive: true })
+    await writeJavaScript(output, await compileClientModule(file, sourceFileSet), minify)
+  }
+  if (clientModules.length) {
+    await bundle({
+      entryPoints: handlerModules.map(module => join(assetsDirectory, module.path)),
+      outbase: join(assetsDirectory, "handlers"),
+      outdir: join(assetsDirectory, "handlers"),
+      entryNames: "[dir]/[name]",
+      chunkNames: "chunks/[name]-[hash]",
+      allowOverwrite: true,
+      bundle: true,
+      splitting: true,
+      format: "esm",
+      target: "es2022",
+      minify,
+      legalComments: "none",
+      logLevel: "silent"
+    })
+    await rm(join(assetsDirectory, "modules"), { recursive: true, force: true })
+  }
   await writeFile(join(workDirectory, "kudzu-plan.json"), JSON.stringify({ routes: plans }, null, 2))
   if (hasStyles) await cp(join(sourceDirectory, "style.css"), join(assetsDirectory, "style.css"))
   if (await exists(join(root, "public"))) await cp(join(root, "public"), outputDirectory, { recursive: true })
@@ -137,6 +163,22 @@ async function writeJavaScript(file, source, minify) {
   await writeFile(file, code)
 }
 
+async function writeBundledJavaScript(file, source, minify, define) {
+  const result = await bundle({
+    stdin: { contents: source, resolveDir: dirname(file), sourcefile: file },
+    bundle: true,
+    write: false,
+    external: ["./kudzu.js", "./kudzu-style.js"],
+    define,
+    format: "esm",
+    target: "es2022",
+    minify,
+    legalComments: "none",
+    logLevel: "silent"
+  })
+  await writeFile(file, result.outputFiles[0].contents)
+}
+
 export function parseDevPort(value) {
   if (value === undefined || value.trim() === "") return 3000
   if (!/^\d+$/.test(value)) throw new Error(`Invalid dev server port: ${value}`)
@@ -275,11 +317,12 @@ function escapeHtml(value) {
   return value.replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;")
 }
 
-async function compile(file) {
+async function compile(file, sourceFiles) {
   const source = await readFile(file, "utf8")
   const nativeHandlers = []
   const reactiveBindings = []
   const listExpressions = []
+  const clientImports = new Set()
   const handlerPath = `handlers/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
   const result = ts.transpileModule(source, {
     fileName: file,
@@ -289,7 +332,7 @@ async function compile(file) {
       jsx: ts.JsxEmit.ReactJSX,
       jsxImportSource: "@kudzujs/core"
     },
-    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, `/assets/${handlerPath}`)] },
+    transformers: { before: [createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, `/assets/${handlerPath}`, file, sourceFiles, clientImports)] },
     reportDiagnostics: true
   })
 
@@ -304,6 +347,7 @@ async function compile(file) {
 
   if (!nativeHandlers.length && !reactiveBindings.length && !listExpressions.length) return undefined
   const moduleSource = [
+    printClientImports(nativeHandlers.flatMap(handler => handler.imports), handlerPath),
     ...nativeHandlers.map(handler => printNativeHandler(handler)),
     ...reactiveBindings.map(entry => printReactiveBinding(entry)),
     ...listExpressions.map(entry => printListExpression(entry))
@@ -314,12 +358,13 @@ async function compile(file) {
   })
   const moduleErrors = moduleResult.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
   if (moduleErrors.length) throw new Error(moduleErrors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
-  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0 }
+  return { path: handlerPath, code: moduleResult.outputText, hasNativeHandlers: nativeHandlers.length > 0, clientImports: [...clientImports] }
 }
 
-function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl) {
+function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
+    const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
     const settersByFunction = new Map()
     const functions = new Map()
     const jsxLocalDeclarations = new Map()
@@ -328,6 +373,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
     const listLocalUses = new WeakMap()
     const listValues = new WeakMap()
     const listEventItems = new WeakMap()
+    const listConditions = new WeakMap()
     let usesBehavior = false
     let usesBinding = false
     let usesConditional = false
@@ -431,6 +477,15 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         }
       }
 
+      if (ts.isJsxExpression(node) && node.expression && listConditions.has(node.expression)) {
+        const entry = listConditions.get(node.expression)
+        return factory.updateJsxExpression(node, compileListConditional({
+          ...entry,
+          truthy: ts.visitNode(entry.truthy, visitor),
+          falsy: ts.visitNode(entry.falsy, visitor)
+        }, factory, listExpressions, handlerUrl))
+      }
+
       if (ts.isJsxExpression(node) && node.expression && listValues.has(node.expression)) {
         return factory.updateJsxExpression(node, compileListValue(node.expression, listValues.get(node.expression), factory, listExpressions, handlerUrl))
       }
@@ -443,7 +498,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         const listParts = listLocalUses.get(node) ?? 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, settersForNode(node, settersByFunction), listValues, listEventItems)
+          validateKeyedList(listParts, sourceFile, settersForNode(node, settersByFunction), listValues, listEventItems, listConditions)
           usesBehavior = true
           usesList = true
           return factory.updateJsxExpression(node, factory.createCallExpression(factory.createIdentifier("__kList"), undefined, [
@@ -466,6 +521,14 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
             return factory.updateJsxExpression(node, compiled)
           }
         }
+        const setters = settersForNode(node, settersByFunction)
+        const usedStates = referencedStateNames(node.expression, setters)
+        const captures = captureNames(node.expression, node.expression, setters)
+        if ((usedStates.size || captures.size) && !ts.isIdentifier(node.expression) && !containsJsx(node.expression)) {
+          usesBehavior = true
+          usesBinding = true
+          return factory.updateJsxExpression(node, compileReactiveBinding(node.expression, setters, factory, context, reactiveBindings, handlerUrl))
+        }
       }
 
       if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !/^on/i.test(node.name.getText()) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
@@ -483,7 +546,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
 
       if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && /^on[A-Z]/.test(node.name.getText())) {
         const setters = settersForNode(node, settersByFunction)
-        const event = compileEvent(node.initializer.expression, setters, functions, factory, nativeHandlers, handlerUrl, listEventItems.get(node))
+        const event = compileEvent(node.initializer.expression, setters, functions, factory, nativeHandlers, handlerUrl, listEventItems.get(node), importBindings, clientImports)
         if (event) {
           usesBehavior = true
           return factory.updateJsxAttribute(node, node.name, factory.createJsxExpression(undefined, event))
@@ -507,6 +570,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listExpression"), factory.createIdentifier("__kListExpression")))
       behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listField"), factory.createIdentifier("__kListField")))
       behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listItem"), factory.createIdentifier("__kListItem")))
+      behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("listConditional"), factory.createIdentifier("__kListConditional")))
     }
     if (usesBinding || usesConditional) behaviorImports.push(factory.createImportSpecifier(false, factory.createIdentifier("bindingValue"), factory.createIdentifier("__kBindingValue")))
     const behaviorImport = factory.createImportDeclaration(
@@ -536,7 +600,7 @@ function keyedListParts(expression, setters) {
   return { state, callback, root, item: callback.parameters[0].name.text, keyField: field }
 }
 
-function validateKeyedList(parts, sourceFile, setters, listValues, listEventItems) {
+function validateKeyedList(parts, sourceFile, setters, listValues, listEventItems, listConditions) {
   const fail = (node, message) => {
     const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
     throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
@@ -545,6 +609,7 @@ function validateKeyedList(parts, sourceFile, setters, listValues, listEventItem
     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")
   }
+  let conditionDepth = 0
   const visit = node => {
     if (ts.isJsxFragment(node)) fail(node, "Fragments are not supported in keyed lists")
     if (ts.isJsxElement(node) || ts.isJsxSelfClosingElement(node)) validateElement(node)
@@ -556,7 +621,18 @@ function validateKeyedList(parts, sourceFile, setters, listValues, listEventItem
     }
     if (ts.isJsxExpression(node) && node.expression) {
       const expression = unwrapExpression(node.expression)
-      if (conditionalParts(expression) && containsJsx(expression)) fail(node, "Nested reactive conditions are not supported in keyed lists")
+      const condition = conditionalParts(expression)
+      if (condition && containsJsx(expression)) {
+        if (conditionDepth) fail(node, "Nested item conditions are not supported in keyed lists")
+        if (!referencesIdentifier(condition.condition, parts.item)) fail(node, "Keyed list item conditions must read the item")
+        validateListExpression(condition.condition, parts.item, node, fail)
+        listConditions.set(node.expression, { ...condition, item: parts.item })
+        conditionDepth++
+        visit(condition.truthy)
+        visit(condition.falsy)
+        conditionDepth--
+        return
+      }
       const field = directProperty(expression, parts.item)
       const isRootKey = ts.isJsxAttribute(node.parent) && node.parent.name.getText() === "key"
       if (field && ["__proto__", "constructor", "prototype"].includes(field)) fail(node, `Keyed list item property "${field}" is not supported`)
@@ -645,6 +721,16 @@ function compileListExpression(read, expression, item, factory, listExpressions,
   return factory.createCallExpression(factory.createIdentifier("__kListExpression"), undefined, [read, factory.createStringLiteral(handlerUrl), factory.createStringLiteral(exportName)])
 }
 
+function compileListConditional(entry, factory, listExpressions, handlerUrl) {
+  const exportName = `listExpression${listExpressions.length}`
+  listExpressions.push({ exportName, expression: entry.condition, item: entry.item })
+  const read = factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), entry.condition)
+  const thunk = branch => factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), branch)
+  return factory.createCallExpression(factory.createIdentifier("__kListConditional"), undefined, [
+    factory.createStringLiteral(entry.kind), read, thunk(entry.truthy), thunk(entry.falsy), factory.createStringLiteral(handlerUrl), factory.createStringLiteral(exportName)
+  ])
+}
+
 function compileListValue(expression, entry, factory, listExpressions, handlerUrl) {
   const read = factory.createArrowFunction(undefined, undefined, [], undefined, factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), expression)
   return entry.field
@@ -769,17 +855,20 @@ function factoryNull() {
   return ts.factory.createNull()
 }
 
-function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl, listItem) {
+function compileEvent(expression, setters, functions, factory, nativeHandlers, handlerUrl, listItem, importBindings, clientImports) {
   if (ts.isIdentifier(expression)) expression = functions.get(expression.text)
   if (!expression || (!ts.isArrowFunction(expression) && !ts.isFunctionExpression(expression) && !ts.isFunctionDeclaration(expression))) return undefined
 
   const optimized = compileOptimizedEvent(expression, setters, factory)
   if (optimized) return optimized
 
-  const captures = nativeCaptureNames(expression, setters)
+  const allCaptures = nativeCaptureNames(expression, setters)
+  const imports = [...referencedImportedBindings(expression, importBindings)].map(name => importBindings.get(name))
+  const captures = new Set([...allCaptures].filter(name => !importBindings.has(name)))
+  for (const entry of imports) clientImports.add(entry.target)
   const usedStates = nativeStateNames(expression, setters)
   const exportName = `handler${nativeHandlers.length}`
-  nativeHandlers.push({ exportName, expression, captures, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
+  nativeHandlers.push({ exportName, expression, captures, imports, setters: new Map([...setters].filter(([, state]) => usedStates.has(state))) })
   const states = [...usedStates].map(name => factory.createArrayLiteralExpression([
     factory.createStringLiteral(name),
     factory.createIdentifier(name)
@@ -830,6 +919,16 @@ function nativeCaptureNames(expression, setters) {
   return captureNames(expression, expression.body, setters)
 }
 
+function referencedImportedBindings(expression, imports) {
+  const names = new Set()
+  const visit = node => {
+    if (ts.isIdentifier(node) && imports.has(node.text) && isReferenceIdentifier(node)) names.add(node.text)
+    ts.forEachChild(node, visit)
+  }
+  visit(expression.body)
+  return names
+}
+
 function captureNames(declarationRoot, referenceRoot, setters) {
   const local = new Set()
   const collectDeclarations = node => {
@@ -896,6 +995,135 @@ function settersForNode(node, settersByFunction) {
   return new Map()
 }
 
+function clientImportBindings(sourceFile, file, sourceFiles) {
+  const bindings = new Map()
+  for (const node of sourceFile.statements) {
+    if (!ts.isImportDeclaration(node) || !node.importClause || node.importClause.isTypeOnly || !ts.isStringLiteral(node.moduleSpecifier) || !node.moduleSpecifier.text.startsWith(".")) continue
+    const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+    if (node.importClause.name) bindings.set(node.importClause.name.text, { kind: "default", local: node.importClause.name.text, target })
+    const named = node.importClause.namedBindings
+    if (named && ts.isNamespaceImport(named)) bindings.set(named.name.text, { kind: "namespace", local: named.name.text, target })
+    if (named && ts.isNamedImports(named)) {
+      for (const entry of named.elements) {
+        if (!entry.isTypeOnly) bindings.set(entry.name.text, { kind: "named", imported: (entry.propertyName ?? entry.name).text, local: entry.name.text, target })
+      }
+    }
+  }
+  return bindings
+}
+
+function printClientImports(entries, handlerPath) {
+  const unique = new Map(entries.map(entry => [`${entry.target}:${entry.kind}:${entry.imported ?? ""}:${entry.local}`, entry]))
+  const groups = Map.groupBy(unique.values(), entry => entry.target)
+  const imports = []
+  for (const [target, group] of groups) {
+    const specifier = relativeModulePath(handlerPath, clientModulePath(target))
+    const defaults = group.filter(entry => entry.kind === "default")
+    const named = group.filter(entry => entry.kind === "named")
+    if (defaults.length === 1 || named.length) imports.push(`import ${defaults.length === 1 ? `${defaults[0].local}${named.length ? ", " : ""}` : ""}${named.length ? `{ ${named.map(entry => entry.imported === entry.local ? entry.local : `${entry.imported} as ${entry.local}`).join(", ")} }` : ""} from ${JSON.stringify(specifier)}`)
+    if (defaults.length > 1) for (const entry of defaults) imports.push(`import ${entry.local} from ${JSON.stringify(specifier)}`)
+    for (const entry of group.filter(entry => entry.kind === "namespace")) imports.push(`import * as ${entry.local} from ${JSON.stringify(specifier)}`)
+  }
+  return imports.join("\n")
+}
+
+async function collectClientModules(entries, sourceFiles) {
+  const modules = new Set()
+  const queue = [...new Set(entries)]
+  while (queue.length) {
+    const file = queue.shift()
+    if (modules.has(file)) continue
+    const source = await readFile(file, "utf8")
+    const sourceFile = parseSourceFile(file, source)
+    if (containsJsx(sourceFile)) throw new Error(`${relative(root, file)} Imported client helpers must not contain JSX`)
+    rejectUnsupportedClientImports(sourceFile, file)
+    modules.add(file)
+    for (const node of sourceFile.statements) {
+      if ((!ts.isImportDeclaration(node) && !ts.isExportDeclaration(node)) || !node.moduleSpecifier || !ts.isStringLiteral(node.moduleSpecifier) || !runtimeModuleReference(node)) continue
+      if (!node.moduleSpecifier.text.startsWith(".")) throw new Error(`${relative(root, file)} Imported client helpers may only use relative runtime imports`)
+      queue.push(resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles))
+    }
+  }
+  const outputs = new Map()
+  for (const file of modules) {
+    const output = clientModulePath(file)
+    if (outputs.has(output)) throw new Error(`${relative(root, file)} and ${relative(root, outputs.get(output))} emit the same client module path`)
+    outputs.set(output, file)
+  }
+  return [...modules].sort()
+}
+
+async function compileClientModule(file, sourceFiles) {
+  const source = await readFile(file, "utf8")
+  const transformer = context => sourceFile => {
+    const factory = context.factory
+    const visitor = node => {
+      if (ts.isImportDeclaration(node) && runtimeModuleReference(node) && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateImportDeclaration(node, node.modifiers, node.importClause, factory.createStringLiteral(relativeModulePath(clientModulePath(file), clientModulePath(target))), node.attributes)
+      }
+      if (ts.isExportDeclaration(node) && runtimeModuleReference(node) && node.moduleSpecifier && ts.isStringLiteral(node.moduleSpecifier) && node.moduleSpecifier.text.startsWith(".")) {
+        const target = resolveSourceImport(file, node.moduleSpecifier.text, sourceFiles)
+        return factory.updateExportDeclaration(node, node.modifiers, node.isTypeOnly, node.exportClause, factory.createStringLiteral(relativeModulePath(clientModulePath(file), clientModulePath(target))), node.attributes)
+      }
+      return ts.visitEachChild(node, visitor, context)
+    }
+    return ts.visitNode(sourceFile, visitor)
+  }
+  const result = ts.transpileModule(source, {
+    fileName: file,
+    compilerOptions: { target: ts.ScriptTarget.ES2022, module: ts.ModuleKind.ESNext },
+    transformers: { before: [transformer] },
+    reportDiagnostics: true
+  })
+  const errors = result.diagnostics?.filter(diagnostic => diagnostic.category === ts.DiagnosticCategory.Error) ?? []
+  if (errors.length) throw new Error(errors.map(error => ts.flattenDiagnosticMessageText(error.messageText, "\n")).join("\n"))
+  return result.outputText
+}
+
+function resolveSourceImport(importer, specifier, sourceFiles) {
+  const base = resolve(dirname(importer), specifier)
+  const extension = extname(base)
+  const stem = /\.(?:js|jsx|ts|tsx)$/.test(extension) ? base.slice(0, -extension.length) : base
+  const candidates = extension === ".ts" || extension === ".tsx"
+    ? [base]
+    : [`${stem}.ts`, `${stem}.tsx`]
+  const matches = candidates.filter(candidate => sourceFiles.has(candidate))
+  if (matches.length !== 1) throw new Error(`${relative(root, importer)} Relative import ${JSON.stringify(specifier)} must resolve to one TypeScript file in src/`)
+  return matches[0]
+}
+
+function runtimeModuleReference(node) {
+  if (ts.isExportDeclaration(node)) return !node.isTypeOnly && (!node.exportClause || !ts.isNamedExports(node.exportClause) || node.exportClause.elements.some(entry => !entry.isTypeOnly))
+  const clause = node.importClause
+  if (!clause) return true
+  if (clause.isTypeOnly) return false
+  if (clause.name || clause.namedBindings && ts.isNamespaceImport(clause.namedBindings)) return true
+  return clause.namedBindings?.elements.some(entry => !entry.isTypeOnly) ?? false
+}
+
+function rejectUnsupportedClientImports(sourceFile, file) {
+  const visit = node => {
+    if (ts.isCallExpression(node) && node.expression.kind === ts.SyntaxKind.ImportKeyword) throw new Error(`${relative(root, file)} Dynamic imports are not supported in imported client helpers`)
+    if (ts.isCallExpression(node) && ts.isIdentifier(node.expression) && node.expression.text === "require") throw new Error(`${relative(root, file)} require() is not supported in imported client helpers`)
+    ts.forEachChild(node, visit)
+  }
+  visit(sourceFile)
+}
+
+function parseSourceFile(file, source) {
+  return ts.createSourceFile(file, source, ts.ScriptTarget.ES2022, true, file.endsWith(".tsx") ? ts.ScriptKind.TSX : ts.ScriptKind.TS)
+}
+
+function clientModulePath(file) {
+  return `modules/${relative(sourceDirectory, file).replaceAll(sep, "/").replace(/\.(?:ts|tsx)$/, ".js")}`
+}
+
+function relativeModulePath(from, to) {
+  const path = relative(dirname(from), to).replaceAll(sep, "/")
+  return path.startsWith(".") ? path : `./${path}`
+}
+
 function printNativeHandler({ exportName, expression, captures, setters }) {
   const factory = ts.factory
   const stateNames = new Set(setters.values())

package/framework/core.d.ts

@@ -24,6 +24,7 @@ export function list(items: unknown, keyField: string, render: (item: unknown) =
 export function listField(read: () => unknown, field: string): unknown
 export function listExpression(read: () => unknown, module: string, handler: string): unknown
 export function listItem(): unknown
+export function listConditional(kind: "and" | "ternary", read: () => unknown, truthy: () => unknown, falsy: () => unknown, module: string, handler: string): unknown
 
 export function renderPage(
   component: (props: Record<string, never>) => unknown | Promise<unknown>,

package/framework/core.mjs

@@ -9,6 +9,7 @@ const listMarker = Symbol("kudzu.list")
 const listFieldMarker = Symbol("kudzu.listField")
 const listExpressionMarker = Symbol("kudzu.listExpression")
 const listItemMarker = Symbol("kudzu.listItem")
+const listConditionalMarker = Symbol("kudzu.listConditional")
 const refMarker = Symbol("kudzu.ref")
 const contextMarker = Symbol("kudzu.context")
 const contextProviderMarker = Symbol("kudzu.contextProvider")
@@ -123,6 +124,10 @@ export function listItem() {
   return { [listItemMarker]: true }
 }
 
+export function listConditional(kind, read, truthy, falsy, module, handler) {
+  return { [listConditionalMarker]: true, kind, value: renderContext?.listTemplate ? undefined : read(), truthy, falsy, module, handler }
+}
+
 function validListKey(key) {
   return typeof key === "string" || typeof key === "number" && Number.isFinite(key)
 }
@@ -216,7 +221,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, nextRef: 0, nextCondition: 0, nextList: 0, conditionDepth: 0, listDepth: 0, listRoot: undefined, listTemplate: false, listFields: undefined, contexts: [], states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false, hasListStyles: false }
+  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: [], bindings: [], conditions: [], lists: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false, hasLists: false, hasListStyles: false }
 
   try {
     const body = await renderNode({ type: component, props: {} })
@@ -348,15 +353,44 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   }
   if (node?.[listMarker]) return renderList(node, namespace, selectValue)
   if (node?.[listFieldMarker]) {
-    if (renderContext.listTemplate) renderContext.listFields?.add(node.field)
-    const marker = renderContext.listTemplate ? ` data-k-list-text="${escapeAttribute(node.field)}"` : ""
+    if (renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch) renderContext.listFields?.add(node.field)
+    const marker = renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch ? ` data-k-list-text="${escapeAttribute(node.field)}"` : ""
     return `<template${marker}></template>${escapeHtml(node.value ?? "")}<template data-k-list-text-end></template>`
   }
   if (node?.[listExpressionMarker]) {
     const descriptor = { module: node.module, handler: node.handler }
-    const marker = renderContext.listTemplate ? ` data-k-list-expression='${escapeJsonAttribute(descriptor)}'` : ""
+    const marker = renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch ? ` data-k-list-expression='${escapeJsonAttribute(descriptor)}'` : ""
     return `<template${marker}></template>${escapeHtml(node.value ?? "")}<template data-k-list-expression-end></template>`
   }
+  if (node?.[bindingMarker]) {
+    const descriptor = bindingDescriptor(node)
+    const reactive = Object.keys(node.states).length > 0 || Object.keys(node.scopeStates).length > 0 || Object.keys(node.scopeBindings).length > 0
+    if (!reactive) return renderNode(node.value, namespace, selectValue)
+    renderContext.bindings.push({ target: "text", ...descriptor })
+    if (renderContext.conditionDepth || renderContext.listDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
+    renderContext.hasBehaviors = true
+    renderContext.hasBindings = true
+    return `<span data-k-bind-text='${escapeJsonAttribute(descriptor)}'>${escapeHtml(node.value ?? "")}</span>`
+  }
+  if (node?.[listConditionalMarker]) {
+    const descriptor = { kind: node.kind, module: node.module, handler: node.handler }
+    const previousBranch = renderContext.listConditionalBranch
+    renderContext.listConditionalBranch = true
+    let truthy
+    let falsy
+    try {
+      truthy = await renderNode(node.truthy(), namespace, selectValue)
+      falsy = await renderNode(node.falsy(), namespace, selectValue)
+    } finally {
+      renderContext.listConditionalBranch = previousBranch
+    }
+    const key = conditionKey(node.kind, node.value)
+    const current = renderContext.listTemplate
+      ? ""
+      : node.kind === "and" && !node.value ? escapeHtml(renderFalsy(node.value)) : node.value ? truthy : falsy
+    const initial = renderContext.listTemplate ? "" : ` data-k-list-current="${escapeAttribute(key)}"`
+    return `<template data-k-list-condition='${escapeJsonAttribute(descriptor)}'${initial}><template data-k-list-true>${truthy}</template><template data-k-list-false>${falsy}</template></template>${current}<template data-k-list-condition-end></template>`
+  }
   if (!node || typeof node !== "object" || !("type" in node)) {
     throw new Error(`Cannot render ${String(node)}`)
   }
@@ -459,10 +493,10 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   }
 
   if (attributeBindings.length) attributes += ` data-k-bind-attrs='${escapeJsonAttribute(attributeBindings)}'`
-  if (renderContext.listTemplate && listAttributes.length) attributes += ` data-k-list-attrs='${escapeJsonAttribute(listAttributes)}'`
-  if (renderContext.listTemplate && listExpressionAttributes.length) attributes += ` data-k-list-expression-attrs='${escapeJsonAttribute(listExpressionAttributes)}'`
-  if (renderContext.listTemplate && listEvents.length) attributes += ` data-k-list-events='${escapeJsonAttribute(listEvents)}'`
-  if (renderContext.listTemplate && directListText) {
+  if ((renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch) && listAttributes.length) attributes += ` data-k-list-attrs='${escapeJsonAttribute(listAttributes)}'`
+  if ((renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch) && listExpressionAttributes.length) attributes += ` data-k-list-expression-attrs='${escapeJsonAttribute(listExpressionAttributes)}'`
+  if ((renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch) && listEvents.length) attributes += ` data-k-list-events='${escapeJsonAttribute(listEvents)}'`
+  if ((renderContext.listTemplate || renderContext.listInitialMarkers || renderContext.listConditionalBranch) && directListText) {
     renderContext.listFields?.add(directListText.field)
     attributes += ` data-k-list-text="${escapeAttribute(directListText.field)}"`
   }
@@ -487,10 +521,12 @@ async function renderList(node, namespace, selectValue) {
     renderContext.listRoot = { id, template: true }
     const template = await renderNode(node.render({}), namespace, selectValue)
     if (template.includes("data-k-native-")) descriptor.mount = true
+    if (template.includes("data-k-list-condition")) descriptor.conditions = true
     const seed = listSeed(node.items.value, renderContext.listFields)
     if (seed) descriptor.seed = seed
     let current = ""
     renderContext.listTemplate = false
+    renderContext.listInitialMarkers = Boolean(descriptor.conditions)
     for (const item of node.items.value) {
       renderContext.listRoot = { id, key: item[node.keyField], template: false }
       current += await renderNode(node.render(item), namespace, selectValue)
@@ -502,6 +538,7 @@ async function renderList(node, namespace, selectValue) {
   } finally {
     renderContext.listRoot = undefined
     renderContext.listTemplate = false
+    renderContext.listInitialMarkers = false
     renderContext.listFields = previousListFields
     renderContext.listDepth--
   }
@@ -512,6 +549,14 @@ function optionValue(props) {
   return Array.isArray(props.children) ? props.children.join("") : props.children ?? ""
 }
 
+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 reactiveStateIds(descriptor) {
   if (descriptor.state) return new Set([descriptor.state])
   return new Set([

package/framework/list-runtime.js

@@ -6,7 +6,8 @@ const mountedLists = new WeakSet()
 const imports = new Map()
 const revisions = new WeakMap()
 const itemParts = new WeakMap()
-const itemPartsSelector = "[data-k-list-text],[data-k-list-attrs],[data-k-list-events],[data-k-list-expression],[data-k-list-expression-attrs]"
+const conditionOwners = new WeakMap()
+const itemPartsSelector = `[data-k-list-text],[data-k-list-attrs],[data-k-list-events],[data-k-list-expression],[data-k-list-expression-attrs]${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}`
 
 function commitLists(id) {
   const lists = listTargets.get(id)
@@ -32,7 +33,7 @@ function mountLists(root) {
     const roots = listRoots(start, end)
     const templateRoot = start.content.firstElementChild
     const parts = listItemPartPlan(templateRoot)
-    for (const root of roots) mapListItemParts(parts, root)
+    for (const root of roots) __KUDZU_LIST_CONDITIONS__ && descriptor.conditions ? listItemParts(root) : mapListItemParts(parts, root)
     if (descriptor.seed && !browserState.has(descriptor.state)) browserState.set(descriptor.state, roots.map((root, index) => seedListItem(root, descriptor, index)))
     const items = browserState.get(descriptor.state)
     const list = {
@@ -144,6 +145,10 @@ function fillListItem(root, item) {
   const revision = (revisions.get(root) ?? 0) + 1
   revisions.set(root, revision)
   const parts = listItemParts(root)
+  fillListParts(root, parts, item, revision)
+}
+
+function fillListParts(root, parts, item, revision) {
   for (const [node, field] of parts.directTexts) {
     const text = item?.[field]
     const value = text == null ? "" : String(text)
@@ -178,18 +183,29 @@ function fillListItem(root, item) {
       }).catch(error => console.error(error))
     }
   }
+  if (__KUDZU_LIST_CONDITIONS__) {
+    for (const [marker, descriptor] of parts.conditions) {
+      evaluate(descriptor, item).then(value => {
+        if (revisions.get(root) === revision && root.isConnected) updateListCondition(marker, descriptor.kind, value, item)
+      }).catch(error => console.error(error))
+    }
+  }
 }
 
 function listItemParts(root) {
   let parts = itemParts.get(root)
   if (parts) return parts
-  parts = { directTexts: [], texts: [], attributes: [], events: [], expressions: [], expressionAttributes: [] }
+  parts = { directTexts: [], texts: [], attributes: [], events: [], expressions: [], expressionAttributes: [], conditions: [] }
   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 (node.hasAttribute("data-k-list-attrs")) parts.attributes.push([node, JSON.parse(node.dataset.kListAttrs)])
     if (node.hasAttribute("data-k-list-events")) parts.events.push([node, node.dataset.kListEvents])
     if (node.hasAttribute("data-k-list-expression")) parts.expressions.push([node, JSON.parse(node.dataset.kListExpression)])
     if (node.hasAttribute("data-k-list-expression-attrs")) parts.expressionAttributes.push([node, JSON.parse(node.dataset.kListExpressionAttrs)])
+    if (__KUDZU_LIST_CONDITIONS__ && node.hasAttribute("data-k-list-condition")) {
+      parts.conditions.push([node, JSON.parse(node.dataset.kListCondition)])
+      conditionOwners.set(node, root)
+    }
   }
   itemParts.set(root, parts)
   return parts
@@ -205,7 +221,8 @@ function listItemPartPlan(template) {
     attributes: parts.attributes.map(([node, attributes]) => [indexes.get(node), attributes]),
     events: parts.events.map(([node, events]) => [indexes.get(node), events]),
     expressions: parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]),
-    expressionAttributes: parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes])
+    expressionAttributes: parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]),
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : []
   }
 }
 
@@ -217,10 +234,50 @@ function mapListItemParts(parts, root) {
     attributes: parts.attributes.map(([index, attributes]) => [target[index], attributes]),
     events: parts.events.map(([index, events]) => [target[index], events]),
     expressions: parts.expressions.map(([index, descriptor]) => [target[index], descriptor]),
-    expressionAttributes: parts.expressionAttributes.map(([index, attributes]) => [target[index], attributes])
+    expressionAttributes: parts.expressionAttributes.map(([index, attributes]) => [target[index], attributes]),
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([index, descriptor]) => {
+      conditionOwners.set(target[index], root)
+      return [target[index], descriptor]
+    }) : []
   })
 }
 
+function updateListCondition(marker, kind, value, item) {
+  const current = listConditionKey(kind, value)
+  if (marker.dataset.kListCurrent === current) return
+  let end = marker.nextSibling
+  while (end && !(end.nodeType === Node.ELEMENT_NODE && end.matches("template[data-k-list-condition-end]"))) end = end.nextSibling
+  if (!end) throw new Error("Keyed list condition marker has no end")
+  for (let node = marker.nextSibling; node && node !== end;) {
+    const next = node.nextSibling
+    unmountDom(node)
+    node.remove()
+    node = next
+  }
+  const falseText = kind === "and" && !value ? renderFalsy(value) : ""
+  const fragment = falseText
+    ? marker.ownerDocument.createDocumentFragment()
+    : marker.content.querySelector(value ? "template[data-k-list-true]" : "template[data-k-list-false]").content.cloneNode(true)
+  if (falseText) fragment.append(marker.ownerDocument.createTextNode(falseText))
+  const nodes = [...fragment.childNodes]
+  const revision = (revisions.get(marker) ?? 0) + 1
+  revisions.set(marker, revision)
+  fillListParts(marker, listItemParts(fragment), item, revision)
+  end.parentNode.insertBefore(fragment, end)
+  marker.dataset.kListCurrent = current
+  const owner = conditionOwners.get(marker)
+  if (owner) itemParts.delete(owner)
+  for (const node of nodes) mountDom(node)
+}
+
+function listConditionKey(kind, value) {
+  return value ? "true" : kind === "and" ? `false:${renderFalsy(value)}` : "false"
+}
+
+function renderFalsy(value) {
+  return value === false || value == null || value === true ? "" : String(value)
+}
+
 function listRoots(start, end) {
   const roots = []
   for (let node = start.nextSibling; node && node !== end; node = node.nextSibling) {

package/package.json

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