@kudzujs/core 0.5.2 → 0.5.4

package/README.md

@@ -191,20 +191,22 @@ Kudzu resolves `current` when the handler reads it, so removed conditional eleme
 Create a context to pass static or reactive values through component layers without prop drilling:
 
 ```tsx
-const ThemeContext = createContext("light")
+type ThemeValue = { theme: string; setTheme: (theme: string) => void }
+const ThemeContext = createContext<ThemeValue | null>(null)
 
 function Toolbar() {
-  const theme = useContext(ThemeContext)
-  return <button className={`theme-${theme}`}>{theme}</button>
+  const value = useContext(ThemeContext)
+  if (!value) return null
+  return <button className={`theme-${value.theme}`} onClick={() => value.setTheme("light")}>{value.theme}</button>
 }
 
 function App() {
-  const [theme] = useState("dark")
-  return <ThemeContext.Provider value={theme}><Toolbar /></ThemeContext.Provider>
+  const [theme, setTheme] = useState("dark")
+  return <ThemeContext.Provider value={{ theme, setTheme }}><Toolbar /></ThemeContext.Provider>
 }
 ```
 
-The default value applies outside a Provider, nested Providers override their parent, and native handlers read the latest direct state value. Static Provider values must be serializable. Reactive Provider values must be a direct `useState` value; setters and objects containing reactive values are not supported.
+Context values may contain state, setters, arrays, nested plain objects, and static serializable fields. Consumers can read reactive properties, destructure or rename them, and call setters from normal handlers. Kudzu serializes only state and setter IDs, then materializes live browser getters and batched setters; no function source, Provider tree, component tree, or hydration is shipped. The default applies outside a Provider and nested Providers resolve to independent concrete state IDs at build time. Arbitrary functions, accessors, cycles, symbols, and non-plain objects remain rejected at the browser capture boundary.
 
 ## Conditional DOM
 
@@ -227,7 +229,7 @@ Logical state persists across branch switches, while uncontrolled DOM state rese
 
 Reactive conditional DOM currently targets the HTML namespace and is rejected inside SVG or MathML.
 
-Top-level immutable JSX locals can hold static or state-dependent branches:
+Top-level or block-scoped immutable JSX locals can hold static or state-dependent branches:
 
 ```tsx
 const menu = open ? <MenuBar /> : <p>Menu dormant</p>
@@ -236,7 +238,22 @@ const content = open && menu
 return <main>{content}</main>
 ```
 
-Kudzu compiles the local initializer to the same bounded DOM ranges as an inline condition. Reassigned, block-scoped, and keyed-list alias locals remain unsupported.
+Kudzu compiles the local initializer to the same bounded DOM ranges as an inline condition. Terminal early returns and one adjacent exhaustive `let` assignment normalize to the same representation:
+
+```tsx
+if (loading) return <Loading />
+if (failed) return <ErrorView />
+return <Content />
+
+let view
+if (open) view = <Menu />
+else view = <p>Closed</p>
+return view
+```
+
+Branches may contain only the return or assignment being normalized. Effectful statements, non-exhaustive assignments, later reassignment, loops, `switch`, and `try` remain ordinary JavaScript and state-dependent render forms are rejected rather than evaluated against signal-object truthiness. Reactive branches are still both rendered into inert templates at build time.
+
+A 1,000-component A/B build compared direct ternaries with an even mix of block locals, early returns, and exhaustive assignment. Both emitted 1,000 conditions and byte-identical runtime assets. The mixed source added 18 B gzip for three equivalent evaluator exports instead of one and built in 604 ms versus 590 ms (+2.24%).
 
 ## Keyed Lists
 
@@ -370,7 +387,7 @@ Supported:
 - Default, nested, and reactive context providers
 - Controlled `value` and `checked` form properties
 - Conditional child `&&` and ternary DOM patches
-- Top-level immutable JSX locals
+- Top-level and block-scoped JSX locals, terminal early returns, and exhaustive JSX assignment
 - Direct keyed local-state lists
 
 Not implemented yet:
@@ -411,13 +428,24 @@ The same native counter calculation was measured inline and through one relative
 
 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.
 
+#### Context Object Cost
+
+The same native counter was measured with local state access and through `value={{ count, setCount }}`. Context uses live object properties in both derived text and handlers, so this measures the complete recursive capture and generic binding capability.
+
+| Kudzu variant | Files | Initial JS gzip | Total output | Clean build | Click |
+|---|---:|---:|---:|---:|---:|
+| Local native state | 5 | **1,890 B** | **4,064 B** | **421 ms** | **3.96 µs** |
+| Context object | 7 | 4,991 B | 11,829 B | 441 ms | 7.54 µs |
+
+Context adds 3,101 B gzip and 3.59 µs per update only on pages using nested reactive capture descriptors. It preserves immediate logical reads across repeated setter calls and batches DOM writes once per synchronous turn. Capability specialization removes the recursive state/setter branches from pages that do not use them.
+
 #### Wrapper-Free Derived Text
 
-The same object-state counter was built with the v0.4.14 span target and the comment-bounded text range. Browser medians use five 20,000-update batches in each of seven fresh Chrome sessions.
+The same object-state counter was built with the legacy span target and the current comment-bounded text range. Browser medians use five 20,000-update batches in each of seven fresh Chrome sessions.
 
 | Text target | Files | JS gzip | Total output | Clean build | Update |
 |---|---:|---:|---:|---:|---:|
-| Span v0.4.14 | 7 | **4,453 B** | **10,065 B** | **404 ms** | **4.83 µs** |
+| Legacy span target | 7 | **4,453 B** | **10,065 B** | **404 ms** | **4.83 µs** |
 | Comment range | 7 | 4,763 B | 10,922 B | 426 ms | 5.03 µs |
 
 The range costs 310 B gzip only on pages using derived reactive text. It removes wrapper elements and preserves authored structure across table cells, options, SVG text, selectors, and conditional remounts; ordinary attribute and condition pages tree-shake the range code entirely.

package/framework/binding-runtime.js

@@ -229,7 +229,7 @@ async function loadEvaluator(descriptor) {
 }
 
 async function createBindingContext(descriptor) {
-  const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value)]))
+  const scope = Object.fromEntries(Object.entries(descriptor.scope).map(([name, value]) => [name, deserialize(value, id => browserState.get(id))]))
   const nested = {}
   await Promise.all(Object.entries(descriptor.scopeBindings).map(async ([name, binding]) => {
     const evaluator = await loadEvaluator(binding)
@@ -245,10 +245,19 @@ function bindingStateIds(descriptor) {
   return new Set([
     ...Object.values(descriptor.states),
     ...Object.values(descriptor.scopeStates),
+    ...(globalThis.__KUDZU_CAPTURE_STATE__ ? Object.values(descriptor.scope).flatMap(serializedStateIds) : []),
     ...Object.values(descriptor.scopeBindings).flatMap(binding => [...bindingStateIds(binding)])
   ])
 }
 
+function serializedStateIds(value) {
+  if (!value || typeof value !== "object") return []
+  if (value.type === "state") return [value.id]
+  if (value.type === "array") return value.value.flatMap(serializedStateIds)
+  if (value.type === "object") return value.value.flatMap(([, entry]) => serializedStateIds(entry))
+  return []
+}
+
 function matching(root, selector) {
   return [...(root.matches?.(selector) ? [root] : []), ...(root.querySelectorAll?.(selector) ?? [])]
 }

package/framework/build.mjs

@@ -82,6 +82,8 @@ export async function build({ quiet = false, minify = true } = {}) {
   const nativeEvents = [...new Set(plans.flatMap(plan => plan.events.filter(event => event.native).map(event => event.event)))].sort()
   const hasTextBindings = plans.some(plan => plan.bindings.some(binding => binding.target === "text"))
   const hasListConditions = plans.some(plan => plan.lists.some(list => list.conditions))
+  const hasNestedStateCaptures = hasNestedCaptureState(plans)
+  const hasSetterCaptures = hasCaptureType(plans, "setter")
   const nativeModules = handlerModules.filter(module => module.hasNativeHandlers).map(module => assetPath(base, `assets/${module.path}`))
   const hasNativeHandlers = nativeModules.length > 0
   if (behaviorCount) {
@@ -89,14 +91,20 @@ export async function build({ quiet = false, minify = true } = {}) {
     const runtime = specializeRuntime(await readFile(new URL(runtimeFile, import.meta.url), "utf8"), commandEvents, stateSeedCount > 0)
     await writeJavaScript(join(assetsDirectory, "kudzu.js"), runtime, minify)
   }
-  if (bindingCount || hasNativeHandlers) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify)
+  if (bindingCount || hasNativeHandlers) await writeJavaScript(join(assetsDirectory, "kudzu-serialization.js"), await readFile(new URL("./serialization.js", import.meta.url), "utf8"), minify, {
+    "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures),
+    "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
+  })
   if (bindingCount || listStyleCount) await writeJavaScript(join(assetsDirectory, "kudzu-style.js"), await readFile(new URL("./style.js", import.meta.url), "utf8"), minify)
   if (bindingCount) {
     const bindingRuntime = (await readFile(new URL("./binding-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
       .replace('"./style.js"', '"./kudzu-style.js"')
-    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, { "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings) })
+    await writeBundledJavaScript(join(assetsDirectory, "kudzu-binding.js"), bindingRuntime, minify, {
+      "globalThis.__KUDZU_TEXT_BINDINGS__": String(hasTextBindings),
+      "globalThis.__KUDZU_CAPTURE_STATE__": String(hasNestedStateCaptures)
+    })
   }
   if (listCount) {
     let listRuntime = (await readFile(new URL("./list-runtime.js", import.meta.url), "utf8"))
@@ -115,7 +123,9 @@ export async function build({ quiet = false, minify = true } = {}) {
     const nativeRuntime = (await readFile(new URL("./native-runtime.js", import.meta.url), "utf8"))
       .replace('"./shared-runtime.js"', '"./kudzu.js"')
       .replace('"./serialization.js"', '"./kudzu-serialization.js"')
-    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeNativeRuntime(nativeRuntime, nativeEvents, nativeModules), minify)
+    await writeJavaScript(join(assetsDirectory, "kudzu-native.js"), specializeNativeRuntime(nativeRuntime, nativeEvents, nativeModules), minify, {
+      "globalThis.__KUDZU_CAPTURE_SETTER__": String(hasSetterCaptures)
+    })
   }
   for (const handlerModule of handlerModules) {
     const output = join(assetsDirectory, handlerModule.path)
@@ -171,6 +181,20 @@ function specializeNativeRuntime(source, events, modules) {
   return `${imports}\n${specializeEvents(source, events).replace(/const modules = new Map\(\[[^\n]*\]\)/, `const modules = new Map([${entries}])`)}`
 }
 
+function hasCaptureType(value, type) {
+  if (!value || typeof value !== "object") return false
+  if (value.type === type) return true
+  return (Array.isArray(value) ? value : Object.values(value)).some(entry => hasCaptureType(entry, type))
+}
+
+function hasNestedCaptureState(value, insideCapture = false) {
+  if (!value || typeof value !== "object") return false
+  if (value.type === "state") return insideCapture
+  if (value.type === "array") return value.value.some(entry => hasNestedCaptureState(entry, true))
+  if (value.type === "object") return value.value.some(([, entry]) => hasNestedCaptureState(entry, true))
+  return (Array.isArray(value) ? value : Object.values(value)).some(entry => hasNestedCaptureState(entry, false))
+}
+
 export function specializeRuntime(source, events, hasStateSeed) {
   const specialized = specializeEvents(source, events)
   if (hasStateSeed) return specialized
@@ -179,8 +203,8 @@ export function specializeRuntime(source, events, hasStateSeed) {
     .replace(/^  if \(initialState\).*\n/m, "")
 }
 
-async function writeJavaScript(file, source, minify) {
-  const code = minify ? (await transform(source, { format: "esm", legalComments: "none", minify: true, target: "es2022" })).code : source
+async function writeJavaScript(file, source, minify, define) {
+  const code = minify || define ? (await transform(source, { define, format: "esm", legalComments: "none", minify, target: "es2022" })).code : source
   await writeFile(file, code)
 }
 
@@ -392,10 +416,13 @@ async function compile(file, sourceFiles, base) {
 function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpressions, handlerUrl, file, sourceFiles, clientImports) {
   return context => sourceFile => {
     const factory = context.factory
+    sourceFile = normalizeRenderControlFlow(sourceFile, factory, context)
+    ts.setParentRecursive(sourceFile, false)
     const importBindings = clientImportBindings(sourceFile, file, sourceFiles)
     const settersByFunction = new Map()
     const functions = new Map()
     const components = new Map()
+    const contexts = new Set()
     const jsxLocalDeclarations = new Map()
     const jsxLocalsByFunction = new Map()
     const listLocalDeclarations = new WeakSet()
@@ -429,10 +456,13 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         functions.set(node.name.text, node.initializer)
         if (node.parent?.parent?.parent === sourceFile) components.set(node.name.text, { function: node.initializer, declaration: node })
       }
-      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && isTopLevelConst(node)) {
+      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && ts.isCallExpression(node.initializer) && ts.isIdentifier(node.initializer.expression) && node.initializer.expression.text === "createContext") contexts.add(node.name.text)
+      if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && isLocalConst(node)) {
         const owner = nearestFunction(node)
         const declarations = jsxLocalDeclarations.get(owner) ?? new Map()
-        declarations.set(node.name.text, { node, initializer: node.initializer })
+        const entries = declarations.get(node.name.text) ?? []
+        entries.push({ node, initializer: node.initializer })
+        declarations.set(node.name.text, entries)
         jsxLocalDeclarations.set(owner, declarations)
       }
       ts.forEachChild(node, collect)
@@ -443,32 +473,41 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       let changed = true
       while (changed) {
         changed = false
-        for (const [name, { initializer }] of declarations) {
-          if (!names.has(name) && isJsxLocalValue(initializer, names)) {
+        for (const [name, entries] of declarations) {
+          if (!names.has(name) && entries.some(({ initializer }) => isJsxLocalValue(initializer, names))) {
             names.add(name)
             changed = true
           }
         }
       }
+      for (const name of names) {
+        const entries = declarations.get(name)
+        if (entries.length > 1) {
+          const position = sourceFile.getLineAndCharacterOfPosition(entries[1].node.getStart(sourceFile))
+          throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Block-scoped JSX local "${name}" must not shadow another local`)
+        }
+      }
       jsxLocalsByFunction.set(owner, names)
     }
     for (const [owner, declarations] of jsxLocalDeclarations) {
       const setters = settersByFunction.get(owner) ?? new Map()
-      for (const [name, declaration] of declarations) {
-        const parts = keyedListParts(declaration.initializer, setters)
-        if (!parts) continue
-        const uses = []
-        const collectUses = node => {
-          if (ts.isJsxExpression(node) && node.initializer === undefined && ts.isIdentifier(node.expression) && node.expression.text === name && nearestFunction(node) === owner) uses.push(node)
-          ts.forEachChild(node, collectUses)
+      for (const [name, entries] of declarations) {
+        for (const declaration of entries) {
+          const parts = keyedListParts(declaration.initializer, setters)
+          if (!parts) continue
+          const uses = []
+          const collectUses = node => {
+            if (ts.isJsxExpression(node) && node.initializer === undefined && ts.isIdentifier(node.expression) && node.expression.text === name && nearestFunction(node) === owner) uses.push(node)
+            ts.forEachChild(node, collectUses)
+          }
+          collectUses(owner.body)
+          const references = identifierReferenceCount(owner.body, name)
+          const position = sourceFile.getLineAndCharacterOfPosition(declaration.node.getStart(sourceFile))
+          if (uses.length > 1) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" must be rendered exactly once`)
+          if (references !== uses.length) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" may only be used as a JSX child`)
+          listLocalDeclarations.add(declaration.node)
+          if (uses.length) listLocalUses.set(uses[0], parts)
         }
-        collectUses(owner.body)
-        const references = identifierReferenceCount(owner.body, name)
-        const position = sourceFile.getLineAndCharacterOfPosition(declaration.node.getStart(sourceFile))
-        if (uses.length > 1) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" must be rendered exactly once`)
-        if (references !== uses.length) throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} Keyed list local "${name}" may only be used as a JSX child`)
-        listLocalDeclarations.add(declaration.node)
-        if (uses.length) listLocalUses.set(uses[0], parts)
       }
     }
     const rawRenderedLists = []
@@ -484,6 +523,16 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       const position = sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile))
       throw new Error(`${sourceFile.fileName}:${position.line + 1}:${position.character + 1} ${message}`)
     }
+    const rejectUnsupportedRenderControl = node => {
+      if (ts.isIfStatement(node) && containsRenderControl(node, jsxLocalsByFunction.get(nearestFunction(node)) ?? new Set())) {
+        const setters = settersForNode(node, settersByFunction)
+        if (referencedStateNames(node.expression, setters).size) {
+          fail(node, "Reactive render if statements must use terminal returns or exhaustive adjacent JSX assignment")
+        }
+      }
+      ts.forEachChild(node, rejectUnsupportedRenderControl)
+    }
+    rejectUnsupportedRenderControl(sourceFile)
     const listComponentNames = new Set(rawRenderedLists.flatMap(({ parts }) => {
       const tag = jsxTagName(parts.root)
       return tag && ts.isIdentifier(tag) && tag.text[0] === tag.text[0].toUpperCase() ? [tag.text] : []
@@ -527,6 +576,28 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       renderedLists.set(node, parts)
     }
 
+    const compileRenderExpression = (expression, anchor) => {
+      const parts = conditionalParts(expression)
+      if (!parts) return ts.visitNode(expression, visitor)
+      const setters = settersForNode(anchor, settersByFunction)
+      const usedStates = referencedStateNames(parts.condition, setters)
+      const captures = captureNames(parts.condition, parts.condition, setters)
+      if (!usedStates.size && !captures.size) return ts.visitEachChild(expression, visitor, context)
+      usesBehavior = true
+      usesConditional = true
+      return compileConditional(
+        parts.kind,
+        parts.condition,
+        compileRenderExpression(parts.truthy, anchor),
+        compileRenderExpression(parts.falsy, anchor),
+        setters,
+        factory,
+        context,
+        reactiveBindings,
+        handlerUrl
+      )
+    }
+
     const visitor = node => {
       if (specializedDeclarations.has(node)) return node
       if (componentSpecializations.has(node)) return ts.visitNode(componentSpecializations.get(node).root, visitor)
@@ -554,18 +625,13 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
       }
 
       if (ts.isVariableDeclaration(node) && ts.isIdentifier(node.name) && node.initializer && jsxLocalsByFunction.get(nearestFunction(node))?.has(node.name.text) && referencesIdentifier(nearestFunction(node).body, node.name.text)) {
-        const parts = conditionalParts(node.initializer)
-        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 compiled = compileConditional(parts.kind, parts.condition, ts.visitNode(parts.truthy, visitor), ts.visitNode(parts.falsy, visitor), setters, factory, context, reactiveBindings, handlerUrl)
-            return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, compiled)
-          }
-        }
+        const compiled = compileRenderExpression(node.initializer, node)
+        if (compiled !== node.initializer) return factory.updateVariableDeclaration(node, node.name, node.exclamationToken, node.type, compiled)
+      }
+
+      if (ts.isReturnStatement(node) && node.expression && isJsxLocalValue(node.expression, jsxLocalsByFunction.get(nearestFunction(node)) ?? new Set())) {
+        const compiled = compileRenderExpression(node.expression, node)
+        if (compiled !== node.expression) return factory.updateReturnStatement(node, compiled)
       }
 
       if (ts.isJsxExpression(node) && node.expression && listConditions.has(node.expression)) {
@@ -596,19 +662,10 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
             ts.visitNode(listParts.callback, visitor)
           ]))
         }
-        const parts = conditionalParts(node.expression)
-        if (parts) {
-          const setters = settersForNode(node, settersByFunction)
-          const usedStates = referencedStateNames(parts.condition, setters)
-          const captures = captureNames(parts.condition, parts.condition, setters)
-          if (usedStates.size || captures.size) {
-            usesBehavior = true
-            usesConditional = true
-            const truthy = ts.visitNode(parts.truthy, visitor)
-            const falsy = ts.visitNode(parts.falsy, visitor)
-            const compiled = compileConditional(parts.kind, parts.condition, truthy, falsy, setters, factory, context, reactiveBindings, handlerUrl)
-            return factory.updateJsxExpression(node, compiled)
-          }
+        const conditional = conditionalParts(node.expression)
+        if (conditional) {
+          const compiled = compileRenderExpression(node.expression, node)
+          if (compiled !== node.expression) return factory.updateJsxExpression(node, compiled)
         }
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(node.expression, setters)
@@ -620,7 +677,7 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
         }
       }
 
-      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())) {
+      if (ts.isJsxAttribute(node) && node.initializer && ts.isJsxExpression(node.initializer) && node.initializer.expression && !isContextProviderValue(node, contexts) && !/^on/i.test(node.name.getText()) && !["key", "ref", "dangerouslysetinnerhtml"].includes(node.name.getText().toLowerCase())) {
         const expression = node.initializer.expression
         const setters = settersForNode(node, settersByFunction)
         const usedStates = referencedStateNames(expression, setters)
@@ -671,6 +728,112 @@ function createKudzuTransformer(nativeHandlers, reactiveBindings, listExpression
   }
 }
 
+function normalizeRenderControlFlow(sourceFile, factory, context) {
+  const normalizeStatements = statements => {
+    const nested = statements.map(statement => ts.visitEachChild(statement, visitNested, context))
+    const assigned = []
+    for (let index = 0; index < nested.length; index++) {
+      const statement = nested[index]
+      const next = nested[index + 1]
+      const declaration = singleUninitializedLet(statement)
+      const assignment = declaration && next && assignmentConditional(next, declaration.name.text, factory)
+      if (declaration && assignment) {
+        const updated = factory.updateVariableDeclaration(declaration, declaration.name, declaration.exclamationToken, declaration.type, assignment)
+        const list = factory.createVariableDeclarationList([updated], ts.NodeFlags.Const)
+        assigned.push(factory.updateVariableStatement(statement, statement.modifiers, list))
+        index++
+      } else {
+        assigned.push(statement)
+      }
+    }
+
+    if (!assigned.length) return assigned
+    const finalIf = returnConditional(assigned.at(-1), factory)
+    if (finalIf) return [...assigned.slice(0, -1), factory.createReturnStatement(finalIf)]
+    if (!ts.isReturnStatement(assigned.at(-1)) || !assigned.at(-1).expression) return assigned
+    let expression = assigned.at(-1).expression
+    let start = assigned.length - 1
+    while (start > 0) {
+      const previous = assigned[start - 1]
+      if (!ts.isIfStatement(previous) || previous.elseStatement) break
+      const truthy = returnOnlyExpression(previous.thenStatement)
+      if (!truthy) break
+      expression = factory.createConditionalExpression(previous.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), expression)
+      start--
+    }
+    return start === assigned.length - 1 ? assigned : [...assigned.slice(0, start), factory.createReturnStatement(expression)]
+  }
+
+  const visitNested = node => {
+    if (ts.isBlock(node)) return factory.updateBlock(node, normalizeStatements([...node.statements]))
+    if (isFunctionLike(node) && ts.isBlock(node.body)) {
+      if (!isRenderFunction(node)) return node
+      const body = factory.updateBlock(node.body, normalizeStatements([...node.body.statements]))
+      if (ts.isFunctionDeclaration(node)) return factory.updateFunctionDeclaration(node, node.modifiers, node.asteriskToken, node.name, node.typeParameters, node.parameters, node.type, body)
+      if (ts.isFunctionExpression(node)) return factory.updateFunctionExpression(node, node.modifiers, node.asteriskToken, node.name, node.typeParameters, node.parameters, node.type, body)
+      if (ts.isArrowFunction(node)) return factory.updateArrowFunction(node, node.modifiers, node.typeParameters, node.parameters, node.type, node.equalsGreaterThanToken, body)
+    }
+    return ts.visitEachChild(node, visitNested, context)
+  }
+
+  return ts.visitEachChild(sourceFile, visitNested, context)
+}
+
+function isRenderFunction(node) {
+  if (ts.isFunctionDeclaration(node)) return node.modifiers?.some(modifier => modifier.kind === ts.SyntaxKind.DefaultKeyword) || Boolean(node.name && /^[A-Z]/.test(node.name.text))
+  const declaration = node.parent
+  return ts.isVariableDeclaration(declaration) && ts.isIdentifier(declaration.name) && /^[A-Z]/.test(declaration.name.text)
+}
+
+function singleUninitializedLet(statement) {
+  if (!ts.isVariableStatement(statement) || (statement.declarationList.flags & ts.NodeFlags.Let) === 0 || statement.declarationList.declarations.length !== 1) return undefined
+  const declaration = statement.declarationList.declarations[0]
+  return ts.isIdentifier(declaration.name) && !declaration.initializer ? declaration : undefined
+}
+
+function assignmentConditional(statement, name, factory) {
+  if (!ts.isIfStatement(statement) || !statement.elseStatement) return undefined
+  const truthy = assignmentOnlyExpression(statement.thenStatement, name)
+  const falsy = ts.isIfStatement(statement.elseStatement)
+    ? assignmentConditional(statement.elseStatement, name, factory)
+    : assignmentOnlyExpression(statement.elseStatement, name)
+  if (!truthy || !falsy) return undefined
+  return factory.createConditionalExpression(statement.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), falsy)
+}
+
+function assignmentOnlyExpression(statement, name) {
+  const candidate = ts.isBlock(statement) && statement.statements.length === 1 ? statement.statements[0] : statement
+  if (!ts.isExpressionStatement(candidate) || !ts.isBinaryExpression(candidate.expression) || candidate.expression.operatorToken.kind !== ts.SyntaxKind.EqualsToken || !ts.isIdentifier(candidate.expression.left) || candidate.expression.left.text !== name) return undefined
+  return candidate.expression.right
+}
+
+function returnConditional(statement, factory) {
+  if (!ts.isIfStatement(statement) || !statement.elseStatement) return undefined
+  const truthy = returnOnlyExpression(statement.thenStatement)
+  const falsy = ts.isIfStatement(statement.elseStatement)
+    ? returnConditional(statement.elseStatement, factory)
+    : returnOnlyExpression(statement.elseStatement)
+  if (!truthy || !falsy) return undefined
+  return factory.createConditionalExpression(statement.expression, factory.createToken(ts.SyntaxKind.QuestionToken), truthy, factory.createToken(ts.SyntaxKind.ColonToken), falsy)
+}
+
+function returnOnlyExpression(statement) {
+  const candidate = ts.isBlock(statement) && statement.statements.length === 1 ? statement.statements[0] : statement
+  return ts.isReturnStatement(candidate) && candidate.expression ? candidate.expression : undefined
+}
+
+function containsRenderControl(root, knownLocals) {
+  let found = false
+  const visit = node => {
+    if (isFunctionLike(node) && node !== root) return
+    if (ts.isReturnStatement(node) && node.expression && isJsxLocalValue(node.expression, knownLocals)) found = true
+    if (ts.isBinaryExpression(node) && node.operatorToken.kind === ts.SyntaxKind.EqualsToken && containsJsx(node.right)) found = true
+    if (!found) ts.forEachChild(node, visit)
+  }
+  visit(root)
+  return found
+}
+
 function keyedListParts(expression, setters) {
   const value = unwrapExpression(expression)
   if (!ts.isCallExpression(value) || value.arguments.length !== 1 || !ts.isPropertyAccessExpression(value.expression) || value.expression.name.text !== "map" || !ts.isIdentifier(value.expression.expression)) return undefined
@@ -847,6 +1010,13 @@ function jsxTagName(node) {
   return ts.isJsxElement(node) ? node.openingElement.tagName : ts.isJsxSelfClosingElement(node) ? node.tagName : undefined
 }
 
+function isContextProviderValue(node, contexts) {
+  if (node.name.getText() !== "value") return false
+  const element = node.parent?.parent
+  const tag = ts.isJsxOpeningElement(element) || ts.isJsxSelfClosingElement(element) ? element.tagName : undefined
+  return ts.isPropertyAccessExpression(tag) && tag.name.text === "Provider" && ts.isIdentifier(tag.expression) && contexts.has(tag.expression.text)
+}
+
 function isJsxSyntaxIdentifier(node) {
   const parent = node.parent
   return (ts.isJsxOpeningElement(parent) || ts.isJsxClosingElement(parent) || ts.isJsxSelfClosingElement(parent)) && parent.tagName === node || ts.isJsxAttribute(parent) && parent.name === node
@@ -994,11 +1164,10 @@ function unwrapExpression(node) {
   return ts.isParenthesizedExpression(node) ? unwrapExpression(node.expression) : node
 }
 
-function isTopLevelConst(node) {
+function isLocalConst(node) {
   const list = node.parent
   const statement = list?.parent
-  const owner = nearestFunction(node)
-  return ts.isVariableDeclarationList(list) && (list.flags & ts.NodeFlags.Const) !== 0 && ts.isVariableStatement(statement) && statement.parent === owner?.body
+  return ts.isVariableDeclarationList(list) && (list.flags & ts.NodeFlags.Const) !== 0 && ts.isVariableStatement(statement)
 }
 
 function isJsxLocalValue(expression, known) {

package/framework/core.mjs

@@ -1,6 +1,7 @@
 import { serializeStyle } from "./style.js"
 
 const signalMarker = Symbol("kudzu.signal")
+const setterMarker = Symbol("kudzu.setter")
 const behaviorMarker = Symbol("kudzu.behavior")
 const nativeBehaviorMarker = Symbol("kudzu.nativeBehavior")
 const bindingMarker = Symbol("kudzu.binding")
@@ -35,10 +36,12 @@ export function useState(initialValue, name) {
     }
   }
 
-  renderContext.states[id] = { name: name ?? id, initialValue }
-  return [signal, () => {
+  const setter = () => {
     throw new Error("State setters are compiled into ordered browser behaviors")
-  }]
+  }
+  Object.defineProperty(setter, setterMarker, { value: id })
+  renderContext.states[id] = { name: name ?? id, initialValue }
+  return [signal, setter]
 }
 
 export function useRef(initialValue) {
@@ -190,6 +193,8 @@ function bindingDescriptor(value) {
 function serializeCapture(name, value, seen) {
   if (value?.[listItemMarker]) return { type: "list-item" }
   if (value?.[refMarker]) return { type: "ref", id: value.id }
+  if (value?.[signalMarker]) return { type: "state", id: value.id }
+  if (typeof value === "function" && value[setterMarker]) return { type: "setter", id: value[setterMarker] }
   if (value === null || typeof value === "string" || typeof value === "boolean") return value
   if (typeof value === "number") {
     return Number.isFinite(value) && !Object.is(value, -0) ? value : { type: "number", value: String(value) }
@@ -375,7 +380,7 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
   }
   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
+    const reactive = reactiveStateIds(descriptor).size > 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)
@@ -492,14 +497,14 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
     }
     if (value?.[signalMarker] || value?.[bindingMarker]) {
       const initialValue = value[signalMarker] ? value.value : value.value
-      const reactive = value[signalMarker] || Object.keys(value.states).length > 0 || Object.keys(value.scopeStates).length > 0 || Object.keys(value.scopeBindings).length > 0
+      const descriptor = value[signalMarker]
+        ? { state: value.id }
+        : bindingDescriptor(value)
+      const reactive = reactiveStateIds(descriptor).size > 0
       if (!reactive) {
         if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
         continue
       }
-      const descriptor = value[signalMarker]
-        ? { state: value.id }
-        : bindingDescriptor(value)
       if (tag !== "select" || name !== "value") attributes += renderAttribute(name, initialValue)
       if (propertyTarget) attributes += ` data-k-bind-${name}='${escapeJsonAttribute(descriptor)}'`
       else attributeBindings.push({ target: name, ...descriptor })
@@ -587,10 +592,19 @@ function reactiveStateIds(descriptor) {
   return new Set([
     ...Object.values(descriptor.states),
     ...Object.values(descriptor.scopeStates),
+    ...Object.values(descriptor.scope).flatMap(serializedStateIds),
     ...Object.values(descriptor.scopeBindings).flatMap(entry => [...reactiveStateIds(entry)])
   ])
 }
 
+function serializedStateIds(value) {
+  if (!value || typeof value !== "object") return []
+  if (value.type === "state") return [value.id]
+  if (value.type === "array") return value.value.flatMap(serializedStateIds)
+  if (value.type === "object") return value.value.flatMap(([, entry]) => serializedStateIds(entry))
+  return []
+}
+
 function renderAttribute(name, value) {
   if (name === "style") {
     const style = serializeStyle(value)

package/framework/native-runtime.js

@@ -6,7 +6,6 @@ const registrations = new WeakMap()
 export function createNativeContext(state, stateIds, commit, serializedScope = {}) {
   const changed = new Set()
   let scheduled = false
-  const scope = Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value)]))
 
   const flush = () => {
     scheduled = false
@@ -15,6 +14,18 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
     for (const id of ids) commit(id, state.get(id))
   }
 
+  const setId = globalThis.__KUDZU_CAPTURE_SETTER__ ? (id, value) => {
+    const current = state.get(id)
+    state.set(id, typeof value === "function" ? value(current) : value)
+    changed.add(id)
+    if (!scheduled) {
+      scheduled = true
+      queueMicrotask(flush)
+    }
+  } : undefined
+
+  const scope = Object.fromEntries(Object.entries(serializedScope).map(([name, value]) => [name, deserialize(value, id => state.get(id), globalThis.__KUDZU_CAPTURE_SETTER__ ? setId : undefined)]))
+
   return {
     get(name) {
       return state.get(stateIds[name])
@@ -23,6 +34,10 @@ export function createNativeContext(state, stateIds, commit, serializedScope = {
       return serializedScope[name]?.type === "state" ? state.get(serializedScope[name].id) : scope[name]
     },
     set(name, value) {
+      if (globalThis.__KUDZU_CAPTURE_SETTER__) {
+        setId(stateIds[name], value)
+        return
+      }
       const id = stateIds[name]
       const current = state.get(id)
       state.set(id, typeof value === "function" ? value(current) : value)

package/framework/serialization.js

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

package/package.json

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