@kudzujs/core 0.2.3 → 0.3.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.3.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
@@ -110,6 +110,27 @@ The handler above increments by two and patches its bound DOM once. Inspect the
 
 Kudzu compiles derived expressions to external ESM and patches only the bound DOM attribute or property.
 
+## 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.
+
 ## Normal JavaScript
 
 Command-only setters use the smallest optimized path. Conditions, local variables, browser globals, events, and `async`/`await` compile to external ESM without `eval`, `new Function`, or inline executable code.
@@ -136,7 +157,8 @@ 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
+└─ normal JS handler     → external ESM
 ```
 
 - Static pages ship no client JavaScript.
@@ -164,10 +186,11 @@ Supported:
 - Serializable component-local captures
 - Direct text DOM patches
 - Reactive `className`, `disabled`, and controlled `value` patches
+- Conditional child `&&` and ternary DOM patches
 
 Not implemented yet:
 
-- Conditional DOM patches and keyed lists
+- Keyed lists and generalized JSX-valued locals
 - Server actions and request-time SSR
 - Imported client helpers and React package islands
 - HMR and framework DevTools
@@ -182,13 +205,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 | **385 ms** |
+| Astro | Yes | **158 B** | **365 B** | 948 ms |
+| Svelte CSR | No | 10.5 KB | 26.9 KB | 885 ms |
+| Qwik CSR | No | 20.6 KB | 57.8 KB | 622 ms |
+| Vue CSR | No | 24.0 KB | 60.3 KB | 822 ms |
+| React CSR | No | 59.2 KB | 189.0 KB | 1084 ms |
+| Next.js | Yes | 182.1 KB | 652.2 KB | 3074 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

@@ -5,7 +5,7 @@
 - `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.
+- `binding-runtime.js`: optional reactive attributes and conditional DOM range patches.
 - `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.

package/framework/binding-runtime.js

@@ -1,7 +1,13 @@
-import { browserState, registerCommitter } from "./shared-runtime.js"
+import { browserState, mountText, registerCommitter } 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()
 
 export function patchBinding(node, target, value) {
   if (target === "disabled") {
@@ -17,54 +23,168 @@ export function patchBinding(node, target, 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)
+
+if (typeof document !== "undefined") mountDom(document)
 
-if (typeof document !== "undefined") {
-  const imports = new Map()
-  const registrations = []
+function mountDom(root) {
+  mountText(root)
+  mountBindings(root)
+  mountConditions(root)
+}
+
+function mountBindings(root) {
   for (const target of ["class", "disabled", "value"]) {
-    for (const node of document.querySelectorAll(`[data-k-bind-${target}]`)) {
+    for (const node of matching(root, `[data-k-bind-${target}]`)) {
+      if (mountedBindings.has(node)) continue
+      mountedBindings.add(node)
       const descriptor = JSON.parse(node.dataset[`kBind${capitalize(target)}`])
       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)
+        bindingRegistrations.set(node, [[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 }
+        const registrations = []
+        for (const id of evaluator.stateIds) {
+          register(bindingTargets, id, binding)
+          registrations.push([id, binding])
+        }
+        bindingRegistrations.set(node, registrations)
         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)
+}
+
+function unmountDom(root) {
+  for (const node of matching(root, "[data-k-bind-class],[data-k-bind-disabled],[data-k-bind-value]")) {
+    for (const [id, binding] of bindingRegistrations.get(node) ?? []) bindingTargets.get(id)?.delete(binding)
+    bindingRegistrations.delete(node)
+    mountedBindings.delete(node)
+  }
+  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
+  for (const node of matching(root, "[data-k-bind-class],[data-k-bind-disabled],[data-k-bind-value],template[data-k-if]")) {
+    if (range.comparePoint(node, 0) === 0) 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)
+}
+
+function register(targets, id, entry) {
+  const entries = targets.get(id) ?? new Set()
+  entries.add(entry)
+  targets.set(id, entries)
 }
 
-async function createBindingContext(descriptor, imports) {
+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 +200,10 @@ 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)
 }

package/framework/build.mjs

@@ -185,6 +185,8 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
     const settersByFunction = new Map()
     const functions = new Map()
     let usesBehavior = false
+    let usesBinding = false
+    let usesConditional = false
 
     const collect = node => {
       if (ts.isVariableDeclaration(node) && ts.isArrayBindingPattern(node.name) && node.initializer && ts.isCallExpression(node.initializer)) {
@@ -226,6 +228,23 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
         return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, initializer)
       }
 
+      if (ts.isJsxExpression(node) && node.initializer === undefined && node.expression && (ts.isJsxElement(node.parent) || ts.isJsxFragment(node.parent))) {
+        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 && ["className", "disabled", "value"].includes(node.name.getText())) {
         const expression = node.initializer.expression
         const setters = settersForNode(node, settersByFunction)
@@ -233,6 +252,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
         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 +277,9 @@ 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 (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)),
@@ -269,6 +290,16 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, handlerUrl) {
 }
 
 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 +328,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) {

package/framework/core.d.ts

@@ -6,6 +6,7 @@ export function behavior(commands: Array<["add" | "set" | "log", unknown, unknow
 export function nativeBehavior(module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 export function binding(value: unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 export function bindingValue(value: unknown): unknown
+export function conditional(kind: "and" | "ternary", value: unknown, truthy: () => unknown, falsy: () => unknown, module: string, handler: string, states: Array<[string, unknown]>, scope: Array<[string, unknown]>): unknown
 
 export function renderPage(
   component: (props: Record<string, never>) => unknown | Promise<unknown>,
@@ -49,5 +50,6 @@ export function renderPage(
       scopeStates?: Record<string, string>
       scopeBindings?: Record<string, unknown>
     }>
+    conditions: Array<Record<string, unknown>>
   }
 }>

package/framework/core.mjs

@@ -2,6 +2,7 @@ const signalMarker = Symbol("kudzu.signal")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
 const bindingMarker = Symbol("kudzu.binding")
+const conditionalMarker = Symbol("kudzu.conditional")
 
 let renderContext
 
@@ -53,6 +54,14 @@ export function nativeBehavior(module, handler, states, scope) {
 }
 
 export function binding(value, module, handler, states, scope) {
+  return { [bindingMarker]: true, value, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+export function conditional(kind, value, truthy, falsy, module, handler, states, scope) {
+  return { [conditionalMarker]: true, kind, value, truthy, falsy, ...reactiveDescriptor(module, handler, states, scope) }
+}
+
+function reactiveDescriptor(module, handler, states, scope) {
   const scopeStates = {}
   const serializedScope = {}
   const scopeBindings = {}
@@ -62,8 +71,6 @@ export function binding(value, module, handler, states, scope) {
     else serializedScope[name] = serializeCapture(name, entry, new Set())
   }
   return {
-    [bindingMarker]: true,
-    value,
     module,
     handler,
     states: Object.fromEntries(states.map(([name, signal]) => {
@@ -116,7 +123,7 @@ function serializeCapture(name, value, seen) {
 }
 
 export async function renderPage(component, metadata = {}) {
-  renderContext = { nextState: 0, states: {}, textStates: new Set(), events: [], bindings: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false }
+  renderContext = { nextState: 0, nextCondition: 0, conditionDepth: 0, states: {}, textStates: new Set(), conditionStates: new Set(), events: [], bindings: [], conditions: [], hasBehaviors: false, hasNativeBehaviors: false, hasBindings: false }
 
   try {
     const body = await renderNode({ type: component, props: {} })
@@ -135,21 +142,22 @@ export async function renderPage(component, metadata = {}) {
       ? '<script type="module" src="/assets/kudzu-binding.js"></script>'
       : ""
     const initialState = renderContext.hasBehaviors
-      ? Object.entries(renderContext.states).filter(([id]) => !renderContext.textStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
+      ? Object.entries(renderContext.states).filter(([id]) => !renderContext.textStates.has(id) || renderContext.conditionStates.has(id)).map(([id, entry]) => [id, entry.initialValue])
       : []
     const state = initialState.length
-      ? ` data-k-state="${escapeAttribute(JSON.stringify(initialState))}"`
+      ? ` data-k-state='${escapeJsonAttribute(initialState)}'`
       : ""
 
     return {
-      html: `<!doctype html>\n<html lang="${escapeAttribute(metadata.lang ?? "en")}">\n<head>\n<meta charset="utf-8">\n<meta name="viewport" content="width=device-width, initial-scale=1">\n<title>${title}</title>\n${head}${styles}\n</head>\n<body${state}>\n${body}\n${runtime}\n${bindingRuntime}\n${nativeRuntime}\n</body>\n</html>\n`,
+      html: `<!doctype html><html lang="${escapeAttribute(metadata.lang ?? "en")}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>${title}</title>${head}${styles}</head><body${state}>${body}${runtime}${bindingRuntime}${nativeRuntime}</body></html>`,
       hasBehaviors: renderContext.hasBehaviors,
       hasBindings: renderContext.hasBindings,
       hasStateSeed: initialState.length > 0,
       plan: {
         states: Object.entries(renderContext.states).map(([id, state]) => ({ id, ...state })),
         events: renderContext.events,
-        bindings: renderContext.bindings
+        bindings: renderContext.bindings,
+        conditions: renderContext.conditions
       }
     }
   } finally {
@@ -172,7 +180,7 @@ function renderMetadata(metadata) {
 
   meta("og:title", metadata.title, true)
   meta("og:description", metadata.description, true)
-  meta("og:type", metadata.type ?? "website", true)
+  if (metadata.type || metadata.title || metadata.description || metadata.url || metadata.image || metadata.siteName || metadata.locale) meta("og:type", metadata.type ?? "website", true)
   meta("og:url", metadata.url, true)
   meta("og:image", metadata.image, true)
   if (metadata.image) {
@@ -187,33 +195,57 @@ function renderMetadata(metadata) {
   meta("twitter:description", metadata.description)
   meta("twitter:image", metadata.twitterImage ?? metadata.image)
 
-  return tags.length ? `${tags.join("\n")}\n` : ""
+  return tags.join("")
 }
 
-async function renderNode(node) {
+async function renderNode(node, namespace) {
   if (node == null || node === false || node === true) return ""
   if (Array.isArray(node)) {
     let html = ""
-    for (const child of node) html += await renderNode(child)
+    for (const child of node) html += await renderNode(child, namespace)
     return html
   }
   if (node?.[signalMarker]) {
     renderContext.textStates.add(node.id)
-    return `<span data-k-text="${node.id}" data-k-value="${escapeAttribute(JSON.stringify(node.value))}">${escapeHtml(node.value)}</span>`
+    if (renderContext.conditionDepth) renderContext.conditionStates.add(node.id)
+    return `<span data-k-text="${node.id}" data-k-value='${escapeJsonAttribute(node.value)}'>${escapeHtml(node.value)}</span>`
   }
   if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
     return escapeHtml(node)
   }
-  if (node instanceof Promise) return renderNode(await node)
+  if (node instanceof Promise) return renderNode(await node, namespace)
+  if (node?.[conditionalMarker]) {
+    const descriptor = bindingDescriptor(node)
+    const stateIds = reactiveStateIds(descriptor)
+    if (!stateIds.size) return renderNode(node.value ? node.truthy() : node.falsy(), namespace)
+    if (namespace) throw new Error(`Reactive conditional DOM is not supported inside ${namespace}`)
+
+    const id = `c${renderContext.nextCondition++}`
+    renderContext.conditionDepth++
+    const truthy = await renderNode(node.truthy())
+    const falsy = await renderNode(node.falsy())
+    renderContext.conditionDepth--
+    const metadata = { id, kind: node.kind, initial: node.value, ...descriptor }
+    for (const stateId of stateIds) renderContext.conditionStates.add(stateId)
+    renderContext.conditions.push(metadata)
+    renderContext.hasBehaviors = true
+    renderContext.hasBindings = true
+    const encoded = escapeJsonAttribute(metadata)
+    const current = node.value ? truthy : node.kind === "and" ? await renderNode(node.value) : falsy
+    return `<template data-k-if='${encoded}'><template data-k-true>${truthy}</template><template data-k-false>${falsy}</template></template>${current}<template data-k-if-end="${id}"></template>`
+  }
   if (!node || typeof node !== "object" || !("type" in node)) {
     throw new Error(`Cannot render ${String(node)}`)
   }
 
-  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children)
-  if (typeof node.type === "function") return renderNode(await node.type(node.props))
+  if (node.type === Symbol.for("kudzu.fragment")) return renderNode(node.props.children, namespace)
+  if (typeof node.type === "function") return renderNode(await node.type(node.props), namespace)
 
   const tag = node.type
   const props = node.props ?? {}
+  const childNamespace = tag === "svg" || tag === "math"
+    ? tag
+    : namespace === "svg" && tag === "foreignObject" ? undefined : namespace
   let attributes = ""
 
   for (const [rawName, value] of Object.entries(props)) {
@@ -223,11 +255,11 @@ async function renderNode(node) {
       const event = rawName.slice(2).toLowerCase()
       if (value?.[behaviorMarker]) {
         const commands = JSON.stringify(value.commands)
-        attributes += ` data-k-on-${event}="${escapeAttribute(commands)}"`
+        attributes += ` data-k-on-${event}='${escapeJsonAttribute(value.commands)}'`
         renderContext.events.push({ event, commands: value.commands })
       } else if (value?.[nativeBehaviorMarker]) {
         const native = { module: value.module, handler: value.handler, states: value.states, scope: value.scope }
-        attributes += ` data-k-native-${event}="${escapeAttribute(JSON.stringify(native))}"`
+        attributes += ` data-k-native-${event}='${escapeJsonAttribute(native)}'`
         renderContext.events.push({ event, native })
         renderContext.hasNativeBehaviors = true
       } else {
@@ -250,8 +282,9 @@ async function renderNode(node) {
         ? { state: value.id }
         : bindingDescriptor(value)
       attributes += renderAttribute(name, initialValue)
-      attributes += ` data-k-bind-${target}="${escapeAttribute(JSON.stringify(descriptor))}"`
+      attributes += ` data-k-bind-${target}='${escapeJsonAttribute(descriptor)}'`
       renderContext.bindings.push({ target, ...descriptor })
+      if (renderContext.conditionDepth) for (const stateId of reactiveStateIds(descriptor)) renderContext.conditionStates.add(stateId)
       renderContext.hasBehaviors = true
       renderContext.hasBindings = true
       continue
@@ -270,7 +303,16 @@ async function renderNode(node) {
 
   const voidElements = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"])
   if (voidElements.has(tag)) return `<${tag}${attributes}>`
-  return `<${tag}${attributes}>${await renderNode(props.children)}</${tag}>`
+  return `<${tag}${attributes}>${await renderNode(props.children, childNamespace)}</${tag}>`
+}
+
+function reactiveStateIds(descriptor) {
+  if (descriptor.state) return new Set([descriptor.state])
+  return new Set([
+    ...Object.values(descriptor.states),
+    ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scopeBindings).flatMap(entry => [...reactiveStateIds(entry)])
+  ])
 }
 
 function renderAttribute(name, value) {
@@ -292,6 +334,10 @@ function escapeAttribute(value) {
   return escapeHtml(value).replaceAll("'", "&#39;")
 }
 
+function escapeJsonAttribute(value) {
+  return JSON.stringify(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll("'", "&#39;")
+}
+
 function toKebabCase(value) {
   return value.replace(/[A-Z]/g, character => `-${character.toLowerCase()}`)
 }

package/framework/runtime.js

@@ -1,41 +1,30 @@
 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)
-      continue
+  const changed=new Set
+  for(const [operation,id,value] of commands){
+    const current=state.get(id)
+    if(operation==="log")log(value,current)
+    else {
+      state.set(id,operation==="add"?current+value:value)
+      changed.add(id)
     }
-    state.set(id, operation === "add" ? current + operand : operand)
-    changed.add(id)
   }
-
-  for (const id of changed) commit(id, state.get(id))
+  for(const id of changed)commit(id,state.get(id))
 }
 
-export const browserState = new Map()
+export const browserState=new Map
 
 export function commitDom(id, value) {
-  for (const node of document.querySelectorAll(`[data-k-text="${id}"]`)) node.textContent = value
+  for(const node of document.querySelectorAll(`[data-k-text="${id}"]`))node.textContent = value
 }
 
-if (typeof document !== "undefined") {
+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))
+  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) return
-      const commands = target.dataset[`kOn${capitalize(eventName)}`]
-      applyCommands(browserState, JSON.parse(commands), commitDom)
+  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)
     })
-  }
-}
-
-function capitalize(value) {
-  return value[0].toUpperCase() + value.slice(1)
 }

package/framework/shared-runtime.js

@@ -26,10 +26,18 @@ export function commitDom(id, value) {
   for (const commit of committers) commit(id)
 }
 
+export function mountText(root) {
+  for (const node of matching(root, "[data-k-text]")) {
+    const id = node.dataset.kText
+    if (browserState.has(id)) node.textContent = browserState.get(id)
+    else browserState.set(id, JSON.parse(node.dataset.kValue))
+  }
+}
+
 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))
+  mountText(document)
 
   const eventNames = ["click", "input", "change"]
   for (const eventName of eventNames) {
@@ -42,6 +50,10 @@ if (typeof document !== "undefined") {
   }
 }
 
+function matching(root, selector) {
+  return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
+}
+
 function capitalize(value) {
   return value[0].toUpperCase() + value.slice(1)
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kudzujs/core",
-  "version": "0.2.3",
+  "version": "0.3.0",
   "description": "HTML-first TSX framework with synchronous state semantics and no virtual DOM",
   "type": "module",
   "license": "MIT",
@@ -46,7 +46,7 @@
   "scripts": {
     "build": "node ./bin/kudzu.mjs build",
     "dev": "node ./bin/kudzu.mjs dev",
-    "check": "tsc --noEmit && node ./bin/kudzu.mjs build",
+    "check": "tsc --noEmit && tsc -p test/fixtures/tsconfig.json --noEmit && node ./bin/kudzu.mjs build",
     "test": "node --test",
     "prepublishOnly": "npm run check && npm test",
     "deploy": "wrangler deploy",