@kudzujs/core 0.6.23 → 0.6.25

package/README.md

@@ -399,14 +399,31 @@ The original row component remains reusable across multiple lists and ordinary J
 One nested keyed map may read a direct array property of its parent item. This supports category/item data populated after mount while preserving both parent and child DOM identity across updates and reorder:
 
 ```tsx
+function ItemCard({ item, onSelect }: {
+  item: Item
+  onSelect: () => void
+}) {
+  return <li>
+    <span>{item.title}</span>
+    {item.available ? <strong>Available</strong> : <small>Unavailable</small>}
+    <button onClick={() => onSelect()}>Select</button>
+  </li>
+}
+
 {categories.map(category => <section key={category.id}>
   <h2>{category.title}</h2>
-  <ul>{category.items.map(item => <ItemCard key={item.id} item={item} />)}</ul>
+  <ul>{category.items.map(item => <ItemCard
+    key={item.id}
+    item={item}
+    onSelect={() => setSelected(item)}
+  />)}</ul>
 </section>)}
 ```
 
 The nested collection must be `parent.<field>`. Its child row may be intrinsic or a same-file or relative-imported component that specializes to one intrinsic root. Child handlers receive the latest child item, and one level of child-local `&&` or ternary JSX conditions patches bounded DOM without remounting the child row. A second child list, third nesting level, computed collection, parent-item capture from the child row, conditions inside child conditions, child effects, child component tags below the specialized row root, and child row-local state remain unsupported.
 
+In the matched 100-parent/1,000-child component benchmark, a selected child text and condition update measured 1.2 ms, child reverse 0.4 ms, parent reverse 4.6 ms, and parent removal 0.6 ms. Svelte measured 2.2/0.8/5.4/1.1 ms, Vue 4.3/2.3/5.0/2.0 ms, React 8.9/4.2/7.4/4.1 ms, and hand-written Astro/native 0.5/0.3/3.1/0.1 ms. Kudzu shipped 6.6 KB initial JavaScript gzip and complete initial HTML. Sharing inert child-condition branches and descriptors through each live child-list prototype reduced HTML from 676,086 B to 417,086 B and total deploy output from 693,806 B to 435,326 B raw; the sum of gzip-compressed files is 23,473 B. The CSR targets omit initial rows, so their artifact sizes are not architecture-equivalent.
+
 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 or top-level local or relative-imported row component, and `key={item.<field>}`. State-backed list wrappers use one destructured props parameter, an intrinsic return root, no effects, and a direct local-state prop. Same-file wrappers must be unexported and state-backed at every call; relative default, named/aliased, and direct named re-export wrappers are specialized per qualifying call. Row components accept destructured projected props, top-level single-`const` calculations and inline effects before one intrinsic return. Effect dependencies inside a direct outer row may be empty, direct primitive Kudzu state identifiers, or direct `item.<field>` properties whose selected values remain JSON-safe primitives. Whole-item, computed, nested, derived, `__proto__`, `prototype`, and `constructor` dependencies are rejected. 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, imported helpers used inside calculations, browser globals, Promise values, mutation, arbitrary calls, and prototype-sensitive properties are rejected. Package, namespace, and star-export list wrappers, package or namespace row imports, same-file exported rows, reusable aliases, prop spreads/defaults/rest, children, conditions nested inside item conditions, component tags below a specialized row root, refs, and `dangerouslySetInnerHTML` remain unsupported. Keyed rows must be placed inside an explicit `<tbody>`, `<thead>`, or `<tfoot>`.
 
 The focused wrapper fixture emits 1,393 B raw / 500 B gzip HTML and 10,719 B raw / 4,665 B gzip JavaScript across its route capabilities. After one warm-up, seven clean builds measured 314.1, 325.3, 322.3, 327.2, 336.1, 322.4, and 315.0 ms, with a 322.4 ms median.

package/framework/core.mjs

@@ -585,7 +585,10 @@ async function renderNode(node, namespace, selectValue = noSelectValue) {
       ? ""
       : 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>`
+    const shared = renderContext.listInitialMarkers && !renderContext.listTemplate && owner?.descriptor.ownerField
+    const condition = shared ? " data-k-list-condition" : ` data-k-list-condition='${escapeJsonAttribute(descriptor)}'`
+    const branches = shared ? "" : `<template data-k-list-true>${truthy}</template><template data-k-list-false>${falsy}</template>`
+    return `<template${condition}${initial}>${branches}</template>${current}<template data-k-list-condition-end></template>`
   }
   if (!node || typeof node !== "object" || !("type" in node)) {
     throw new Error(`Cannot render ${String(node)}`)

package/framework/list-runtime.js

@@ -9,6 +9,7 @@ const itemParts = new WeakMap()
 const listItems = new WeakMap()
 const ownedLists = __KUDZU_NESTED_LISTS__ ? new WeakMap() : undefined
 const conditionOwners = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
+const conditionTemplates = __KUDZU_LIST_CONDITIONS__ ? new WeakMap() : undefined
 const itemPartsSelector = `[data-k-list-text]${__KUDZU_LIST_ATTRIBUTES__ ? ",[data-k-list-attrs]" : ""}${__KUDZU_LIST_EVENTS__ ? ",[data-k-list-events]" : ""}${__KUDZU_LIST_EXPRESSIONS__ ? ",[data-k-list-expression]" : ""}${__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? ",[data-k-list-expression-attrs]" : ""}${__KUDZU_LIST_CONDITIONS__ ? ",[data-k-list-condition]" : ""}${__KUDZU_LIST_EFFECTS__ ? ",[data-k-effects]" : ""}`
 
 function commitLists(id) {
@@ -39,7 +40,12 @@ function mountLists(root) {
     if (__KUDZU_LIST_ROW_STATES__ && descriptor.rowStates) for (let index = 0; index < roots.length; index++) initializeRowStates(descriptor, descriptor.keys[index])
     const templateRoot = start.content.firstElementChild
     const parts = listItemPartPlan(templateRoot, descriptor.nested)
-    for (const root of roots) __KUDZU_LIST_CONDITIONS__ && descriptor.conditions ? listItemParts(root, descriptor.nested) : mapListItemParts(parts, root, descriptor.nested)
+    for (const root of roots) {
+      if (__KUDZU_LIST_CONDITIONS__ && descriptor.conditions) {
+        const initialParts = listItemParts(root, descriptor.nested)
+        mapListConditionTemplates(parts.conditions, initialParts.conditions)
+      } else mapListItemParts(parts, root, descriptor.nested)
+    }
     if (__KUDZU_LIST_SEEDS__ && 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 = {
@@ -417,7 +423,8 @@ function listItemParts(root, nested = false) {
     if (__KUDZU_LIST_EXPRESSIONS__ && node.hasAttribute("data-k-list-expression")) parts.expressions.push([node, JSON.parse(node.dataset.kListExpression)])
     if (__KUDZU_LIST_EXPRESSION_ATTRIBUTES__ && 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)])
+      const encoded = node.dataset.kListCondition || conditionTemplates.get(node)?.dataset.kListCondition
+      parts.conditions.push([node, encoded ? JSON.parse(encoded) : undefined])
       conditionOwners.set(node, root)
     }
     if (__KUDZU_LIST_EFFECTS__ && node.hasAttribute("data-k-effects")) parts.effects.push(node)
@@ -429,7 +436,7 @@ function listItemParts(root, nested = false) {
 function listItemPartPlan(template, nested = false) {
   const source = nested ? ownedElements(template) : [template, ...template.querySelectorAll("*")]
   const indexes = new Map(source.map((node, index) => [node, index]))
-  const parts = listItemParts(template)
+  const parts = listItemParts(template, nested)
   return {
     directTexts: parts.directTexts.map(([node, field]) => [indexes.get(node), field]),
     texts: __KUDZU_LIST_TEXT_RANGES__ ? parts.texts.map(([node, field]) => [indexes.get(node), field]) : [],
@@ -437,7 +444,7 @@ function listItemPartPlan(template, nested = false) {
     events: __KUDZU_LIST_EVENTS__ ? parts.events.map(([node, events]) => [indexes.get(node), events]) : [],
     expressions: __KUDZU_LIST_EXPRESSIONS__ ? parts.expressions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : [],
     expressionAttributes: __KUDZU_LIST_EXPRESSION_ATTRIBUTES__ ? parts.expressionAttributes.map(([node, attributes]) => [indexes.get(node), attributes]) : [],
-    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor]) : [],
+    conditions: __KUDZU_LIST_CONDITIONS__ ? parts.conditions.map(([node, descriptor]) => [indexes.get(node), descriptor, node]) : [],
     effects: __KUDZU_LIST_EFFECTS__ ? parts.effects.map(node => indexes.get(node)) : []
   }
 }
@@ -459,6 +466,15 @@ function mapListItemParts(parts, root, nested = false) {
   })
 }
 
+function mapListConditionTemplates(planned, initial) {
+  if (planned.length !== initial.length) throw new Error("Keyed list condition markers do not match its template")
+  for (let index = 0; index < initial.length; index++) {
+    const marker = initial[index][0]
+    initial[index][1] ??= planned[index][1]
+    if (!marker.content.querySelector("template[data-k-list-true],template[data-k-list-false]")) conditionTemplates.set(marker, planned[index][2])
+  }
+}
+
 function updateListCondition(marker, kind, value, item) {
   const current = listConditionKey(kind, value)
   if (marker.dataset.kListCurrent === current) return
@@ -472,9 +488,12 @@ function updateListCondition(marker, kind, value, item) {
     node = next
   }
   const falseText = kind === "and" && !value ? renderFalsy(value) : ""
+  const selector = value ? "template[data-k-list-true]" : "template[data-k-list-false]"
+  const branch = marker.content.querySelector(selector) ?? conditionTemplates.get(marker)?.content.querySelector(selector)
+  if (!falseText && !branch) throw new Error("Keyed list condition marker has no branch template")
   const fragment = falseText
     ? marker.ownerDocument.createDocumentFragment()
-    : marker.content.querySelector(value ? "template[data-k-list-true]" : "template[data-k-list-false]").content.cloneNode(true)
+    : branch.content.cloneNode(true)
   if (falseText) fragment.append(marker.ownerDocument.createTextNode(falseText))
   const nodes = [...fragment.childNodes]
   const revision = (revisions.get(marker) ?? 0) + 1

package/package.json

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