micra.js 2.1.0 → 2.2.1

package/src/dom/directives.ts

@@ -4,27 +4,21 @@
  * Responsibilities:
  *   - data-text, data-html, data-if, data-show, data-bind, data-model
  *   - data-class (additive class toggling)
- *   - Directive result cache (built once per element, reused on re-renders)
  *
- * LLM NOTE: applyDirectives() is called on every render. The directive cache
- * (DirectiveCache on el.__micraCache) avoids repeated querySelectorAll on
- * re-renders — cache is built lazily on the first call for each root element.
+ * LLM NOTE: applyDirectives() is called on every render. It consumes a
+ * pre-computed ScanIndex (built once by scan.ts and cached on the element).
+ * The scan replaced 10+ querySelectorAll calls with a single TreeWalker pass.
  *
  * Important: this module does NOT handle data-each — see dom/each.ts.
  */
 
 import type {
-  CachedBinding,
   CachedIfBinding,
-  CachedPairBinding,
-  DirectiveCache,
   InternalInstance,
-  MicraElement,
-  MicraTemplate,
+  ScanIndex,
   StateRecord,
 } from '../types'
 import { evalExpr, warn } from '../utils/expr'
-import { queryOwn, queryAll } from './query'
 
 // ── Directive appliers ────────────────────────────────────────────────────────
 // Each function is PURE relative to state — reads state, writes DOM.
@@ -42,7 +36,8 @@ function applyText(el: Element, expr: string, state: StateRecord): void {
  * for the full security model.
  */
 function applyHtml(el: Element, expr: string, state: StateRecord): void {
-  el.innerHTML = String(evalExpr(expr, state) ?? '')
+  const html = String(evalExpr(expr, state) ?? '')
+  if (el.innerHTML !== html) el.innerHTML = html
 }
 
 /**
@@ -78,7 +73,9 @@ function applyIf(binding: CachedIfBinding, state: StateRecord): void {
  * data-show — visibility toggle via `style.display`. Element stays in the DOM.
  */
 function applyShow(el: Element, expr: string, state: StateRecord): void {
-  (el as HTMLElement).style.display = evalExpr(expr, state) ? '' : 'none'
+  const desired = evalExpr(expr, state) ? '' : 'none'
+  const htmlEl = el as HTMLElement
+  if (htmlEl.style.display !== desired) htmlEl.style.display = desired
 }
 
 function applyBind(
@@ -110,13 +107,8 @@ function applyBind(
 
 /**
  * data-class="active:isActive, disabled:count === 0"
- * Parses comma-separated `className:expression` pairs and toggles classes additively.
- * Unlike data-bind="class:expr" this does NOT replace the full className.
- *
- * Syntax mirrors data-bind — split by comma, then by first colon.
- *
- * @example
- * <div data-class="active:tab === 'home', hidden:!loaded">
+ * Toggles classes additively (does NOT replace full className like data-bind:class).
+ * Pairs are pre-parsed at scan time.
  */
 function applyClass(
   el: Element,
@@ -128,20 +120,6 @@ function applyClass(
   }
 }
 
-/** @internal Parse a comma+colon spec like `href:url, disabled:loading` once. */
-function parsePairs(expr: string): Array<readonly [string, string]> {
-  const out: Array<readonly [string, string]> = []
-  for (const part of expr.split(',')) {
-    const colonIdx = part.indexOf(':')
-    if (colonIdx === -1) continue
-    const left  = part.slice(0, colonIdx).trim()
-    const right = part.slice(colonIdx + 1).trim()
-    if (!left) continue
-    out.push([left, right])
-  }
-  return out
-}
-
 function applyModel(
   el: Element,
   key: string,
@@ -157,126 +135,65 @@ function applyModel(
   // listener is attached separately in events.ts — this only syncs the value
 }
 
-// ── Directive cache ───────────────────────────────────────────────────────────
-
-/** @internal Collect all directive bindings for a root element. Built once. */
-function buildCache(root: Element): DirectiveCache {
-  const pick = (attr: string): CachedBinding[] => {
-    const els = queryOwn(root, attr)
-    // Include root itself
-    if ((root as HTMLElement).hasAttribute?.(attr)) els.unshift(root)
-    return els
-      .filter(el => !el.closest('template'))
-      .map(el => ({ el, expr: el.getAttribute(attr)! }))
-  }
-  const pickPairs = (attr: string): CachedPairBinding[] =>
-    pick(attr).map(b => ({ ...b, pairs: parsePairs(b.expr) }))
-  return {
-    text:  pick('data-text'),
-    html:  pick('data-html'),
-    if:    pick('data-if') as CachedIfBinding[],
-    show:  pick('data-show'),
-    bind:  pickPairs('data-bind'),
-    model: pick('data-model'),
-    class: pickPairs('data-class'),
-  }
-}
-
 // ── Main entry point ──────────────────────────────────────────────────────────
 
 /**
  * Apply all non-each directives to a component subtree.
  *
- * For regular Elements: directive bindings are cached in `el.__micraCache`
- * after the first call — subsequent re-renders skip querySelectorAll entirely.
- *
- * For DocumentFragments (no-key each clones): always re-scan because these
- * fragments are new clones on every render.
+ * Consumes a pre-computed ScanIndex. data-if runs first so subsequent
+ * directives don't write into a tree that's about to be detached this tick.
  *
- * @param root     - Component root Element or DocumentFragment (no-key each clone)
+ * @param scan     - Pre-computed scan from scan.ts (cached per element)
  * @param state    - Expression state (may include item/index for each rows)
  * @param rawState - Raw (non-proxy) state for model sync
- * @param instance - Component instance (unused here, kept for future hooks)
  */
 export function applyDirectives<S extends StateRecord>(
-  root: Element | DocumentFragment,
+  scan: ScanIndex,
   state: StateRecord,
   rawState: StateRecord,
   _instance: InternalInstance<S>,
-): void {
-  // DocumentFragments are temporary clones — always scan, never cache
-  if (root.nodeType === Node.DOCUMENT_FRAGMENT_NODE) {
-    applyFromList(buildFragmentList(root as DocumentFragment), state, rawState)
-    return
-  }
-
-  const el = root as MicraElement
-  if (!el.__micraCache) el.__micraCache = buildCache(el)
-  applyFromList(el.__micraCache, state, rawState)
-}
-
-/** @internal Apply a pre-built cache / binding list to current state. */
-function applyFromList(
-  cache: DirectiveCache,
-  state: StateRecord,
-  rawState: StateRecord,
 ): void {
   // data-if runs first so subsequent directives don't write into a tree that's
   // about to be detached this tick.
-  cache.if.forEach(b => applyIf(b, state))
-  cache.text.forEach(b => applyText(b.el, b.expr, state))
-  cache.html.forEach(b => applyHtml(b.el, b.expr, state))
-  cache.show.forEach(b => applyShow(b.el, b.expr, state))
-  cache.bind.forEach(b => applyBind(b.el, b.pairs, state))
-  cache.model.forEach(b => applyModel(b.el, b.expr.trim(), rawState))
-  cache.class.forEach(b => applyClass(b.el, b.pairs, state))
-}
-
-/** @internal Scan a DocumentFragment (no-key each clone) — returns a DirectiveCache. */
-function buildFragmentList(frag: DocumentFragment): DirectiveCache {
-  const pick = (attr: string): CachedBinding[] =>
-    queryAll(frag, `[${attr}]`)
-      .filter(el => !el.closest('template'))
-      .map(el => ({ el, expr: el.getAttribute(attr)! }))
-  const pickPairs = (attr: string): CachedPairBinding[] =>
-    pick(attr).map(b => ({ ...b, pairs: parsePairs(b.expr) }))
-  return {
-    text:  pick('data-text'),
-    html:  pick('data-html'),
-    if:    pick('data-if') as CachedIfBinding[],
-    show:  pick('data-show'),
-    bind:  pickPairs('data-bind'),
-    model: pick('data-model'),
-    class: pickPairs('data-class'),
-  }
+  for (const b of scan.if) applyIf(b, state)
+  for (const b of scan.text) applyText(b.el, b.expr, state)
+  for (const b of scan.html) applyHtml(b.el, b.expr, state)
+  for (const b of scan.show) applyShow(b.el, b.expr, state)
+  for (const b of scan.bind) applyBind(b.el, b.pairs, state)
+  for (const b of scan.model) applyModel(b.el, b.expr.trim(), rawState)
+  for (const b of scan.class) applyClass(b.el, b.pairs, state)
 }
 
 // ── Dev warning helper ────────────────────────────────────────────────────────
 
 /**
  * Validate directive usage and emit dev warnings.
- * Called once after the initial render of a component.
+ * Called once after the initial render of a component, with the already-built
+ * scan so we don't walk the DOM again.
  *
  * @internal
  */
-export function validateDirectives(root: Element): void {
-  queryOwn(root, 'data-each').forEach(el => {
-    const tmpl = el as MicraTemplate
+export function validateDirectives(scan: ScanIndex): void {
+  for (const el of scan.each) {
+    const tmpl = el as HTMLTemplateElement & { __micraNoKeyWarned?: true }
     if (!el.hasAttribute('data-key') && !tmpl.__micraNoKeyWarned) {
       tmpl.__micraNoKeyWarned = true
-      warn(`data-each="${el.getAttribute('data-each')}" has no data-key — keyed diff disabled. Add data-key="id" for better performance.`)
+      warn(
+        `data-each="${el.getAttribute('data-each')}" has no data-key — ` +
+        `keyed diff disabled. Add data-key="id" for better performance.`,
+      )
     }
-  })
+  }
 
   // data-bind="class:..." replaces className wholesale, which fights with
   // data-class on the same element. Warn so the developer picks one.
-  const bindEls = queryOwn(root, 'data-bind')
-  if ((root as HTMLElement).hasAttribute?.('data-bind') && !bindEls.includes(root)) bindEls.unshift(root)
-  for (const el of bindEls) {
-    const spec = el.getAttribute('data-bind') ?? ''
-    const hasClassBind = spec.split(',').some(p => p.trim().split(':')[0]?.trim() === 'class')
-    if (hasClassBind && el.hasAttribute('data-class')) {
-      warn(`element has both data-bind="class:..." and data-class — they fight on every render. Use one.`)
+  for (const b of scan.bind) {
+    const hasClassBind = b.pairs.some(p => p[0] === 'class')
+    if (hasClassBind && b.el.hasAttribute('data-class')) {
+      warn(
+        `element has both data-bind="class:..." and data-class — they fight ` +
+        `on every render. Use one.`,
+      )
     }
   }
 }

package/src/dom/each.ts

@@ -8,34 +8,43 @@
  *   - Apply directives to each row with a scoped itemState
  *
  * LLM NOTE: renderList() is called on every render cycle AFTER applyDirectives().
- * Only <template> elements with data-each are processed.
+ * The template list comes pre-scanned from scan.ts — no DOM queries here.
+ * Each row node gets its own ScanIndex cached on `node.__micraScan` so
+ * re-renders of that row don't re-walk the DOM.
  * Keyed mode (data-key present) mutates the DOM in-place — nodes are
  * created once and reused. Non-keyed mode removes all nodes and re-clones.
  */
 
-import type { InternalInstance, MicraElement, MicraTemplate, StateRecord } from '../types'
+import type {
+  InternalInstance,
+  MicraElement,
+  MicraTemplate,
+  StateRecord,
+} from '../types'
 import { evalExpr, warn } from '../utils/expr'
 import { applyDirectives } from './directives'
-import { bindDataOn, bindAtEvents } from './events'
-import { queryOwn, queryAll } from './query'
+import { bindDataOn, bindAtEvents, bindModels } from './events'
+import { scanComponent, scanFragment } from './scan'
 
 /**
- * Process all `<template data-each>` elements owned by `root`.
+ * Process all `<template data-each>` elements found by the scanner.
  * Scoped itemState makes `item`, `index`, `$index` available in row expressions.
  *
- * @param root      - Component root Element
- * @param state     - Expression state (proxy merging rawState + instance)
- * @param rawState  - Raw (non-proxy) state — used for model binding
- * @param instance  - Component instance (for event binding)
+ * @param templates  - Pre-scanned list of <template data-each> elements
+ * @param state      - Expression state (proxy merging rawState + instance)
+ * @param rawState   - Raw (non-proxy) state — used for model binding
+ * @param instance   - Component instance (for event binding)
+ * @param triggerKey - Which state key triggered this render (null = initial, 'MULTIPLE' = batch)
  */
 export function renderList<S extends StateRecord>(
-  root: Element,
+  templates: Element[],
   state: StateRecord,
   rawState: StateRecord,
   instance: InternalInstance<S>,
+  triggerKey: string | null | 'MULTIPLE',
 ): void {
-  queryOwn(root, 'data-each').forEach(tmplEl => {
-    if (tmplEl.tagName !== 'TEMPLATE') return
+  for (const tmplEl of templates) {
+    if (tmplEl.tagName !== 'TEMPLATE') continue
     const tmpl = tmplEl as MicraTemplate
 
     const itemsExpr = tmpl.getAttribute('data-each')!
@@ -53,25 +62,30 @@ export function renderList<S extends StateRecord>(
 
     const marker = tmpl.__micraMarker
     const keyMap = tmpl.__micraNodes
-    const parent = marker.parentNode
     // The template (and its marker) is currently detached — likely a data-if
     // ancestor unmounted this subtree. Nothing to do until it returns.
-    if (!parent) return
+    if (!marker.parentNode) continue
 
     // Empty / non-array: clear all rendered rows
     if (!Array.isArray(items)) {
       tmpl.__micraList.forEach(n => n.remove())
       tmpl.__micraList = []
       keyMap.clear()
-      return
+      continue
     }
 
+    // canSkipUnchanged: true when only this list's state key changed — rows
+    // whose item reference and index are both unchanged can skip applyDirectives.
+    const canSkipUnchanged = triggerKey !== null &&
+                             triggerKey !== 'MULTIPLE' &&
+                             triggerKey === itemsExpr
+
     if (keyAttr) {
-      renderKeyed(tmpl, items as StateRecord[], keyAttr, marker, keyMap, parent, state, rawState, instance)
+      renderKeyed(tmpl, items as StateRecord[], keyAttr, marker, keyMap, state, rawState, instance, canSkipUnchanged)
     } else {
-      renderNoKey(tmpl, items as StateRecord[], marker, parent, state, rawState, instance)
+      renderNoKey(tmpl, items as StateRecord[], marker, state, rawState, instance)
     }
-  })
+  }
 }
 
 // ── Keyed diff ────────────────────────────────────────────────────────────────
@@ -82,10 +96,10 @@ function renderKeyed<S extends StateRecord>(
   keyAttr: string,
   marker: Comment,
   keyMap: Map<unknown, MicraElement>,
-  parent: Node,
   state: StateRecord,
   rawState: StateRecord,
   instance: InternalInstance<S>,
+  canSkipUnchanged: boolean,
 ): void {
   const nextKeys  = new Set<unknown>()
   const nextNodes: MicraElement[] = []
@@ -118,16 +132,37 @@ function renderKeyed<S extends StateRecord>(
       }
       node.__micraKey = key
       keyMap.set(key, node)
-      // Bind data-on and @event handlers on the freshly created node (once)
-      bindDataOn(node, instance)
-      bindAtEvents(node, instance)
+      // Bind data-on / @event / data-model listeners once per row node.
+      // Scan the row, cache the scan on the node for future re-renders.
+      const rowScan = scanComponent(node)
+      node.__micraScan = rowScan
+      bindDataOn(rowScan.on, instance)
+      bindAtEvents(rowScan.atEvents, instance)
+      bindModels(rowScan.model, instance)
+      // itemState is created once per node and reused across renders.
+      // item / index / $index are mutated in place each render — avoids
+      // Object.create + assign on every cycle and lets safeWrapCache hit.
+      node._itemState = Object.create(state) as StateRecord
+    } else if (canSkipUnchanged && node.__micraItem === item && node.__micraIndex === index) {
+      // Item reference and index are unchanged, and no other state key changed
+      // this cycle — the DOM already reflects the latest values. Skip re-render.
+      nextNodes.push(node)
+      continue
     }
 
-    const itemState = Object.assign(
-      Object.create(state) as StateRecord,
-      { item, index, $index: index },
-    )
-    applyDirectives(node, itemState, rawState, instance)
+    node.__micraItem  = item
+    node.__micraIndex = index
+
+    // Reuse the cached itemState, just update the per-row values.
+    const itemState = node._itemState!
+    itemState.item = item
+    itemState.index = index
+    itemState.$index = index
+
+    // Use the cached scan if present (created above on first sight of this key);
+    // older paths may pass a node we haven't scanned yet.
+    const rowScan = node.__micraScan ?? (node.__micraScan = scanComponent(node))
+    applyDirectives(rowScan, itemState, rawState, instance)
     nextNodes.push(node)
   }
 
@@ -136,23 +171,81 @@ function renderKeyed<S extends StateRecord>(
     if (!nextKeys.has(key)) { node.remove(); keyMap.delete(key) }
   }
 
-  // Insert / reorder nodes after marker (insertBefore is no-op if already in place)
-  let cursor: Node = marker
-  for (const node of nextNodes) {
-    if (cursor.nextSibling !== node) parent.insertBefore(node, cursor.nextSibling)
-    cursor = node
+  const prevList = tmpl.__micraList
+  if (prevList.length === 0) {
+    // First render (or refill after a clear): every node is new and already in
+    // order — batch into one fragment so the DOM takes a single insertion
+    // instead of N anchor.after() calls. Skips LIS entirely.
+    if (nextNodes.length) {
+      const frag = document.createDocumentFragment()
+      for (const node of nextNodes) frag.append(node)
+      marker.after(frag)
+    }
+  } else {
+    // Skip DOM reorder when list order is unchanged (pure JS array compare, no DOM reads).
+    let orderChanged = nextNodes.length !== prevList.length
+    if (!orderChanged) {
+      for (let i = 0; i < nextNodes.length; i++) {
+        if (nextNodes[i] !== prevList[i]) { orderChanged = true; break }
+      }
+    }
+    if (orderChanged) reorderKeyed(nextNodes, prevList, marker)
   }
 
   tmpl.__micraList = nextNodes
 }
 
+// ── Keyed list reorder (LIS) ───────────────────────────────────────────────────
+
+/**
+ * Move DOM nodes to match `nextNodes` order using the minimum number of moves.
+ *
+ * Computes the Longest Increasing Subsequence of each node's position in prevList —
+ * nodes in the LIS keep their place. Only the others are re-inserted via anchor.after().
+ *
+ * Complexity: O(n log n) for LIS, O(k) DOM operations where k = nodes that moved.
+ * For a 2-node swap this means 2 DOM ops instead of n.
+ */
+function reorderKeyed(nextNodes: MicraElement[], prevList: MicraElement[], marker: Comment): void {
+  const prevPos = new Map<MicraElement, number>()
+  for (let i = 0; i < prevList.length; i++) prevPos.set(prevList[i]!, i)
+
+  const n = nextNodes.length
+  const tails: number[] = []     // patience sort: smallest tail at each LIS length
+  const tailIdx: number[] = []   // index into nextNodes for each tail
+  const prev: number[] = new Array(n).fill(-1)
+
+  for (let i = 0; i < n; i++) {
+    const p = prevPos.get(nextNodes[i]!)
+    if (p === undefined) continue  // new node — always moved
+    let lo = 0, hi = tails.length
+    while (lo < hi) { const m = (lo + hi) >> 1; tails[m]! < p ? lo = m + 1 : hi = m }
+    if (lo > 0) prev[i] = tailIdx[lo - 1]!
+    tails[lo] = p
+    tailIdx[lo] = i
+  }
+
+  // Reconstruct stable (non-moving) set from LIS parent chain
+  const stable = new Set<number>()
+  let idx: number = tailIdx[tails.length - 1]!
+  while (idx >= 0) { stable.add(idx); idx = prev[idx]! }
+
+  // Move unstable nodes into position; stable (LIS) nodes serve as anchors
+  let anchor: ChildNode = marker
+  for (let i = 0; i < n; i++) {
+    const node = nextNodes[i]!
+    if (stable.has(i)) { anchor = node; continue }
+    anchor.after(node)
+    anchor = node
+  }
+}
+
 // ── Non-keyed (full re-render) ─────────────────────────────────────────────────
 
 function renderNoKey<S extends StateRecord>(
   tmpl: MicraTemplate,
   items: StateRecord[],
   marker: Comment,
-  parent: Node,
   state: StateRecord,
   rawState: StateRecord,
   instance: InternalInstance<S>,
@@ -167,13 +260,16 @@ function renderNoKey<S extends StateRecord>(
       Object.create(state) as StateRecord,
       { item, index, $index: index },
     )
-    applyDirectives(clone, itemState, rawState, instance)
-    bindDataOn(clone as unknown as Element, instance)
-    bindAtEvents(clone as unknown as Element, instance)
+    // Fresh clone each render → fresh scan each render (uncached).
+    const fragScan = scanFragment(clone)
+    applyDirectives(fragScan, itemState, rawState, instance)
+    bindDataOn(fragScan.on, instance)
+    bindAtEvents(fragScan.atEvents, instance)
+    bindModels(fragScan.model, instance)
 
     const nodes = Array.from(clone.childNodes) as MicraElement[]
     nodes.forEach(n => { n.__micraEach = true; frag.append(n) })
     tmpl.__micraList.push(...nodes)
   }
-  parent.insertBefore(frag, marker.nextSibling)
+  marker.after(frag)
 }

package/src/dom/events.ts

@@ -9,11 +9,18 @@
  * LLM NOTE: Every listener attached here is also recorded in
  * instance.__micraListeners so destroy() can remove it cleanly.
  * Re-render skips already-bound elements via per-element __micra* flags.
+ *
+ * All three binders accept pre-computed element lists from scan.ts —
+ * no DOM queries here.
  */
 
-import type { InternalInstance, MicraElement, StateRecord } from '../types'
+import type {
+  CachedBinding,
+  InternalInstance,
+  MicraElement,
+  StateRecord,
+} from '../types'
 import { warn } from '../utils/expr'
-import { queryOwn, queryOwnAll, queryAll } from './query'
 
 /** @internal Attach a DOM listener and track it on the instance for destroy(). */
 function track<S extends StateRecord>(
@@ -34,23 +41,16 @@ function track<S extends StateRecord>(
  *
  * Supports modifiers: `click.prevent`, `click.stop`, `click.self`.
  *
+ * @param els - Pre-computed list of [data-on] elements from scan.ts
+ *
  * @example
  * <button data-on="click:save">Save</button>
  * <form  data-on="submit.prevent:handleSubmit">
  */
 export function bindDataOn<S extends StateRecord>(
-  root: Element,
+  els: Element[],
   instance: InternalInstance<S>,
 ): void {
-  const isFragment = root.nodeType === 11
-  const els = isFragment
-    ? queryAll(root as unknown as ParentNode, '[data-on]')
-    : queryOwn(root, 'data-on')
-
-  // Include root itself if it carries data-on (e.g., the keyed item IS the button)
-  if (!isFragment && (root as HTMLElement).hasAttribute?.('data-on') && !els.includes(root))
-    els.unshift(root)
-
   for (const el of els) {
     const mEl = el as MicraElement
     if (mEl.__micraEvents) continue
@@ -81,25 +81,19 @@ export function bindDataOn<S extends StateRecord>(
 /**
  * Bind `@event="method"` shorthand attributes (Stimulus-style).
  * Bound once per element via `__micraAtBound` — re-renders are no-ops.
- * Supports the same modifiers as data-on: `@click.prevent="submit"`.
+ *
+ * @param els - Pre-computed list of elements with at least one @-prefixed attr
+ *              (from scan.ts — replaces the old `querySelectorAll('*')` walk)
  *
  * @example
  * <button @click="increment">+</button>
  * <form @submit.prevent="handleSubmit">
  */
 export function bindAtEvents<S extends StateRecord>(
-  root: Element,
+  els: Element[],
   instance: InternalInstance<S>,
 ): void {
-  const isFragment = root.nodeType === 11
-  const all = isFragment
-    ? queryAll(root as unknown as ParentNode, '*')
-    : queryOwnAll(root, '*')
-
-  // Include root itself for the regular-element case
-  if (!isFragment && !all.includes(root)) all.unshift(root)
-
-  for (const el of all) {
+  for (const el of els) {
     const mEl = el as MicraElement
     if (mEl.__micraAtBound) continue
 
@@ -133,25 +127,23 @@ export function bindAtEvents<S extends StateRecord>(
  * Numeric inputs (`type="number"` / `type="range"`) write numbers, not strings.
  * Checkbox inputs write booleans. Everything else writes strings.
  *
+ * @param bindings - Pre-computed model bindings from scan.ts
+ *                   (each carries { el, expr } where expr is the state key)
+ *
  * @example
  * <input data-model="search">   // updates state.search on every keystroke
  * <select data-model="sortBy">  // updates state.sortBy on change
  */
 export function bindModels<S extends StateRecord>(
-  root: Element,
+  bindings: CachedBinding[],
   instance: InternalInstance<S>,
 ): void {
-  const isFragment = root.nodeType === 11
-  const els = isFragment
-    ? queryAll(root as unknown as ParentNode, '[data-model]')
-    : queryOwn(root, 'data-model')
-
-  for (const el of els) {
+  for (const { el, expr } of bindings) {
     const mEl = el as MicraElement
     if (mEl.__micraModel) continue
     mEl.__micraModel = true
 
-    const key = (el as HTMLInputElement).dataset['model'] ?? ''
+    const key = expr.trim()
     const tag = el.tagName
     const inputEl = el as HTMLInputElement
     const inputType = inputEl.type

package/src/dom/refs.ts

@@ -2,33 +2,33 @@
  * src/dom/refs.ts — data-ref collection.
  *
  * Responsibilities:
- *   - After each render, scan for `[data-ref]` elements (owned by this component)
- *   - Populate `instance.refs` so methods can do `this.refs.chart` etc.
+ *   - Populate `instance.refs` from a pre-scanned list of [data-ref] elements.
  *
  * LLM NOTE: This module is PURE relative to state — it only reads DOM attributes
  * and writes to instance.refs. It does NOT trigger renders.
  */
 
 import type { InternalInstance, MicraElement, StateRecord } from '../types'
-import { queryOwn } from './query'
 
 /**
- * Collect all `[data-ref="name"]` elements owned by this component root into
- * `instance.refs`.
+ * Build `instance.refs` from the pre-scanned [data-ref] elements.
  *
  * Called once after the initial render and again on every re-render (refs may
  * point to newly created elements after an each-list update).
  *
+ * @param els - List of [data-ref] elements from scan.ts
+ *
  * @example
  * // HTML: <canvas data-ref="chart">
  * // JS:   this.refs.chart  →  HTMLCanvasElement
  */
 export function collectRefs<S extends StateRecord>(
-  root: Element,
+  els: Element[],
   instance: InternalInstance<S>,
 ): void {
+  if (!els.length) return
   instance.refs = {}
-  for (const el of queryOwn(root, 'data-ref')) {
+  for (const el of els) {
     const name = (el as MicraElement).dataset['ref']
     if (name) instance.refs[name] = el as HTMLElement
   }