micra.js 2.1.0 → 2.2.0

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.
@@ -110,13 +104,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 +117,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 +132,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,41 @@
  *   - 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 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)
  */
 export function renderList<S extends StateRecord>(
-  root: Element,
+  templates: Element[],
   state: StateRecord,
   rawState: StateRecord,
   instance: InternalInstance<S>,
 ): 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')!
@@ -56,14 +63,14 @@ export function renderList<S extends StateRecord>(
     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 (!parent) continue
 
     // Empty / non-array: clear all rendered rows
     if (!Array.isArray(items)) {
       tmpl.__micraList.forEach(n => n.remove())
       tmpl.__micraList = []
       keyMap.clear()
-      return
+      continue
     }
 
     if (keyAttr) {
@@ -71,7 +78,7 @@ export function renderList<S extends StateRecord>(
     } else {
       renderNoKey(tmpl, items as StateRecord[], marker, parent, state, rawState, instance)
     }
-  })
+  }
 }
 
 // ── Keyed diff ────────────────────────────────────────────────────────────────
@@ -118,16 +125,23 @@ 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)
     }
 
     const itemState = Object.assign(
       Object.create(state) as StateRecord,
       { item, index, $index: index },
     )
-    applyDirectives(node, itemState, rawState, instance)
+    // 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)
   }
 
@@ -167,9 +181,12 @@ 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) })

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,32 @@
  * 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 {
   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
   }