sprae 13.3.7 → 13.4.0

package/core.js

@@ -140,14 +140,19 @@ const err = (e, expr, el = currentEl) => {
  * @property {Record<string, Signal>} [_signals] - Internal signals map
  */
 
+/** Symbol for cached directive scan on clone masters */
+const _dirs = Symbol('dirs')
+
 /**
  * Applies directives to an HTML element and manages its reactive state.
  *
  * @param {Element} [el=document.body] - The target HTML element to apply directives to.
  * @param {Object} [state] - Initial state values to populate the element's reactive state.
+ * @param {Element} [master] - Internal: clone source (eg. :each template) — first clone records
+ *   its directive scan on the master, later clones replay it without touching attributes.
  * @returns {SpraeState & Object} The reactive state object associated with the element.
  */
-const sprae = (root = document.body, state) => {
+const sprae = (root = document.body, state, master) => {
   // repeated call can be caused by eg. :each with new objects with old keys
   if (root[_state]) return Object.assign(root[_state], state)
 
@@ -181,25 +186,41 @@ const sprae = (root = document.body, state) => {
     el[_off] = el[_on] = el[_dispose] = el[_add] = el[_state] = null
   }
 
-  const add = el[_add] = (el) => {
-    let _attrs = el.attributes, start;
-
-    if (_attrs) for (let i = 0; i < _attrs.length;) {
-      let { name, value } = _attrs[i]
-
-      if (name.startsWith(prefix)) {
-        el.removeAttribute(name)
+  // apply one directive to el; true = stop (subsprae directives like :each/:if/:scope change state identity)
+  const apply = (el, name, short, value, prev = el[_state]) => (
+    currentDir = name, currentEl = el,
+    // directive initializer can be redefined
+    fx.push(start = dir(el, short, value, state)), offs.push(start()),
+    el[_state] !== prev
+  )
+  let start
+
+  const add = el[_add] = (el, mel) => {
+    let dirs = mel?.[_dirs]
+
+    // replay master's recorded scan — no attribute reads, no parsing
+    if (dirs !== undefined) {
+      for (let [name, short, value] of dirs) {
+        el.removeAttribute(name) // clones from the recording batch still carry attrs; no-op for later ones
+        if (apply(el, name, short, value)) return
+      }
+    }
+    else {
+      let _attrs = el.attributes, rec = mel && (mel[_dirs] = [])
 
-        let prev = el[_state]
-        currentDir = name;
-        currentEl = el;
+      if (_attrs) for (let i = 0; i < _attrs.length;) {
+        let { name, value } = _attrs[i]
 
-        // directive initializer can be redefined
-        fx.push(start = dir(el, name.slice(prefix.length), value, state)), offs.push(start())
+        if (name.startsWith(prefix)) {
+          el.removeAttribute(name)
+          // strip master too: later clones come out clean; unprocessed tail (after a stop) stays for subsprae
+          mel?.removeAttribute(name)
+          let short = name.slice(prefix.length)
+          rec?.push([name, short, value])
 
-        // stop after subsprae directives (:each, :if, :scope) that change element's state identity
-        if (el[_state] !== prev) return
-      } else i++
+          if (apply(el, name, short, value)) return
+        } else i++
+      }
     }
 
     // custom elements own their children — don't descend
@@ -208,13 +229,14 @@ const sprae = (root = document.body, state) => {
     // :if and :each replace element with text node, which tweaks .children length, but .childNodes length persists
     // real DOM: firstChild/nextSibling avoids array copy; frag.childNodes is already snapshot array
     if (el.firstChild !== undefined) {
-      let child = el.firstChild, next
-      while (child) (next = child.nextSibling, child.nodeType == 1 && add(child), child = next)
+      // master is never mutated structurally, so its pointers stay aligned with pre-captured clone pointers
+      let child = el.firstChild, mchild = mel?.firstChild, next
+      while (child) (next = child.nextSibling, child.nodeType == 1 && add(child, mchild), mchild &&= mchild.nextSibling, child = next)
     }
     else for (let child of el.childNodes) child.nodeType == 1 && add(child)
   };
 
-  add(el);
+  add(el, master);
 
   currentDir = currentEl = null;
 
@@ -443,8 +465,11 @@ export const clsx = (c) => !c ? '' : typeof c === 'string' ? c : (
  * @param {number|Function} [ms] - Delay in ms or scheduler function (default: microtask)
  * @returns {T} Throttled function
  */
+/** Makes a scheduler from ms delay, custom scheduler fn, or default microtask */
+const sched = (ms) => typeof ms === 'function' ? ms : ms ? (fn) => setTimeout(fn, ms) : queueMicrotask
+
 export const throttle = (fn, ms) => {
-  let _planned = 0, _depth = 0, arg, schedule = typeof ms === 'function' ? ms : ms ? (fn) => setTimeout(fn, ms) : queueMicrotask;
+  let _planned = 0, _depth = 0, arg, schedule = sched(ms);
   const throttled = (e) => {
     arg = e
     if (!_planned++) fn(arg), schedule(() => {
@@ -468,7 +493,7 @@ export const throttle = (fn, ms) => {
  * @returns {T} Debounced function
  */
 export const debounce = (fn, ms, immediate) => {
-  let schedule = typeof ms === 'function' ? ms : ms ? (fn) => setTimeout(fn, ms) : queueMicrotask;
+  let schedule = sched(ms);
   return immediate
     ? ((_blocked) => (arg) => !_blocked && (fn(arg), _blocked = 1, schedule(() => _blocked = 0)))()
     : ((_count = 0) => (arg, _c = ++_count) => schedule(() => _c == _count && fn(arg)))()

package/directive/each.js

@@ -1,18 +1,12 @@
-import sprae, { parse, _state, _off, effect, _change, _signals, frag, throttle, mutate } from "../core.js";
+import sprae, { parse, _state, _off, effect, untracked, _change, _touch, _signals, frag, throttle, mutate } from "../core.js"
 
-// Row scope proxies — positional reads item via cur[idx], keyed holds direct ref
-const posHandler = {
-  get: (s, k) => k === s.v ? s.c?.[s.i] : k === s.k ? (s.o ? s.o[s.i] : s.i) : k === _signals ? s : s.l?.[k] !== undefined ? s.l[k] : s.p?.[k],
-  set: (s, k, v) => (k === s.v ? (s.c && (s.c[s.i] = v)) : k === s.k ? 0 : s.l?.[k] !== undefined ? ((s.l[k] = v), 0) : k in (s.p?.[_signals] || {}) ? (s.p[k] = v) : (s.l ||= {})[k] = v, 1),
-  has: () => true
-}
-const keyHandler = {
-  get: (s, k) => k === s.v ? s.r : k === s.k ? s.i : k === _signals ? s : s.l?.[k] !== undefined ? s.l[k] : s.p?.[k],
-  set: (s, k, v) => (k === s.v ? (s.r = v) : k === s.k ? 0 : s.l?.[k] !== undefined ? ((s.l[k] = v), 0) : k in (s.p?.[_signals] || {}) ? (s.p[k] = v) : (s.l ||= {})[k] = v, 1),
+// Row scope proxy — positional rows (s.c = source array) read item live via c[i], keyed rows hold direct ref s.r
+const rowHandler = {
+  get: (s, k) => k === s.v ? (s.c ? s.c[s.i] : s.r) : k === s.k ? (s.o ? s.o[s.i] : s.i) : k === _signals ? s : s.l?.[k] !== undefined ? s.l[k] : s.p?.[k],
+  set: (s, k, v) => (k === s.v ? (s.c ? s.c[s.i] = v : s.r = v) : k === s.k ? 0 : s.l?.[k] !== undefined ? ((s.l[k] = v), 0) : k in (s.p?.[_signals] || {}) ? (s.p[k] = v) : (s.l ||= {})[k] = v, 1),
   has: () => true
 }
 
-const rm = r => { r.el[Symbol.dispose]?.(); r.el.remove() }
 
 /**
  * Each directive - renders list items from array/object/number.
@@ -22,17 +16,23 @@ const rm = r => { r.el[Symbol.dispose]?.(); r.el.remove() }
  * Primitives use positional (index-based) mode.
  */
 export default (tpl, state, expr) => {
-  const [lhs, rhs] = expr.split(/\bin|of\b/)
+  // first standalone `in`/`of` splits the expression — `\b` on both sides so `includes`, `index`, `typeof` etc. in rhs don't match
+  const [, lhs, rhs] = expr.match(/^(.*?)\b(?:in|of)\b(.*)$/s) || []
   let [itemVar, idxVar = "$"] = lhs.trim().replace(/\(|\)/g, '').split(/\s*,\s*/)
 
   let doc = tpl.ownerDocument
   let holder = tpl._eachHolder || (tpl._eachHolder = doc.createTextNode(""))
   let rowMap = new Map, rows = [], items, keys, cur, keyed = false
 
-  let mkrow = (scope, h) => {
-    let proxy = new Proxy(scope, h)
+  // removal always evicts from rowMap — every path (keyed diff, positional shrink, clear) must, or rows leak
+  let rm = r => { rowMap.delete(r.scope.r); r.el.remove(); r.el[Symbol.dispose]?.() }
+
+  // _di tracks current DOM index so swap/reorder only touches actually-moved rows
+  // scope shape is uniform (keyed: r, positional: c/o) — monomorphic for the proxy traps
+  let mkrow = (r, c, i) => {
+    let scope = { p: state, v: itemVar, k: idxVar, r, c, i, o: keys, l: null }
     let el = tpl.content ? frag(tpl) : tpl.cloneNode(true)
-    return { el, scope, proxy, node: el.content || el }
+    return { el, scope, proxy: new Proxy(scope, rowHandler), node: el.content || el, _di: i }
   }
 
   let insert = pending => {
@@ -40,11 +40,14 @@ export default (tpl, state, expr) => {
     let f = pending.length > 1 ? doc.createDocumentFragment() : null
     for (let r of pending) f ? f.appendChild(r.node) : holder.before(r.node)
     if (f) holder.before(f)
-    for (let r of pending) sprae(r.el, r.proxy)
+    // element rows pair with tpl as clone master: first row records the directive scan, rest replay it
+    for (let r of pending) sprae(r.el, r.proxy, tpl.content ? undefined : tpl)
   }
 
-  let update = throttle(() => mutate(() => {
-    let src = items, newl = src.length, prevl = rows.length
+  // untracked: update reads item signals (src[i]) but must not subscribe the :each effect to them —
+  // it re-runs via _change/_touch only, else every index write re-notifies it (O(N) per splice)
+  let update = throttle(() => untracked(() => mutate(() => {
+    let src = items, newl = src.length, prevl = rows.length, lenChanged = newl !== prevl
 
     // detect keyed: array of objects (store items are shallow proxies — keyed by proxy identity)
     keyed = false
@@ -53,7 +56,7 @@ export default (tpl, state, expr) => {
     }
 
     if (keyed && prevl) {
-      let newRows = [], pending = [], seen = new Set(), moved = false
+      let newRows = [], pending = [], seen = new Set(), moved = false, misplaced = false
 
       for (let i = 0; i < newl; i++) {
         let id = src[i]
@@ -63,28 +66,55 @@ export default (tpl, state, expr) => {
         }
         let row = rowMap.get(id)
         if (row) {
-          if (row.scope.i !== i) moved = true
-          row.scope.i = i; row.scope.r = id
+          // index-only shifts from remove/append keep DOM order — reorder only for same-length permutes (swap)
+          if (!lenChanged && row.scope.i !== i) moved = true
+          // insert() appends new rows at the tail — a reused row after a new one means wrong placement
+          if (pending.length) misplaced = true
+          row.scope.i = i; row.scope.r = id; row.scope.o = keys
         } else {
-          row = mkrow({ p: state, v: itemVar, k: idxVar, r: id, i, l: null }, keyHandler)
+          row = mkrow(id, null, i)
           rowMap.set(id, row)
           pending.push(row)
         }
         newRows.push(row)
       }
 
-      for (let [id, row] of rowMap) if (!seen.has(id)) { rm(row); rowMap.delete(id); moved = true }
+      for (let [id, row] of rowMap) if (!seen.has(id)) rm(row)
 
       insert(pending)
 
-      if (moved) {
+      if (misplaced) {
+        // new rows sit at the tail — sweep everything into list order
         let next = holder
         for (let i = newRows.length - 1; i >= 0; i--) {
-          let n = newRows[i].el._holder || newRows[i].el.content || newRows[i].el
+          let n = newRows[i].node
           if (n.nextSibling !== next) next.before(n)
           next = n
+          newRows[i]._di = i
         }
       }
+      else if (moved) {
+        // collect rows whose DOM position no longer matches their list index
+        let fix = []
+        for (let i = 0; i < newRows.length; i++) {
+          let row = newRows[i]
+          if (row._di !== i) fix.push(row)
+          row._di = i
+        }
+        // 2-node swap fast path (common case: JFB swap rows)
+        if (fix.length === 2) {
+          let a = fix[0].node, b = fix[1].node, t = doc.createTextNode('')
+          a.replaceWith(t); b.replaceWith(a); t.replaceWith(b)
+        } else {
+          // general reorder: backward sweep, only move rows that aren't already in place
+          let next = holder
+          for (let i = newRows.length - 1; i >= 0; i--) {
+            let n = newRows[i].node
+            if (n.nextSibling !== next) next.before(n)
+            next = n
+          }
+        }
+      } else for (let i = 0; i < newRows.length; i++) newRows[i]._di = i
 
       rows = newRows
     } else {
@@ -108,9 +138,7 @@ export default (tpl, state, expr) => {
       if (newl > prevl) {
         let pending = []
         for (let i = prevl; i < newl; i++) {
-          let row = keyed
-            ? mkrow({ p: state, v: itemVar, k: idxVar, r: src[i], i, l: null }, keyHandler)
-            : mkrow({ p: state, v: itemVar, k: idxVar, c: src, i, o: keys, l: null }, posHandler)
+          let row = keyed ? mkrow(src[i], null, i) : mkrow(null, src, i)
           rows.push(row)
           if (keyed) rowMap.set(src[i], row)
           pending.push(row)
@@ -118,7 +146,7 @@ export default (tpl, state, expr) => {
         insert(pending)
       }
     }
-  }))
+  })))
 
   if (tpl.parentNode) mutate(() => tpl.replaceWith(holder))
   tpl[_state] = null
@@ -130,7 +158,7 @@ export default (tpl, state, expr) => {
     else items = value || []
     let off = effect(() => {
       items[_change]?.value
-      if (items[_signals]) for (let i = 0, n = items.length; i < n; i++) items[i] // index writes (swap/replace)
+      items[_touch] // O(1) subscribe to index/content changes (swap, splice) on list stores
       update()
     })
     return () => off()

package/directive/if.js

@@ -53,3 +53,26 @@ export default (el, state) => {
   cb[_off] = () => { _el._holder._match?.[0][_off]?.(); _el._holder._match = null }
   return cb
 }
+
+/**
+ * Else directive - conditional branch following :if (`:else` or `:else :if="cond"`).
+ * Shares the holder clause machinery above.
+ * @param {Element | HTMLTemplateElement} el - Element with directive
+ * @returns {() => void} Update function
+ */
+export const _else = (el) => {
+  let _el, _prev = el
+
+  _el = el.content ? frag(el) : el
+  _el[_state] ??= null  // mark _el (frag) as needing sprae
+
+  // find holder
+  while (_prev && !(_el._holder = _prev._holder)) _prev = _prev.previousSibling
+
+  el.remove()
+  el[_state] = null // mark as fake-spraed to stop further init, to lazy-sprae when branch matches
+
+  _el._holder._clauses.push(_el._clause = [_el, true])
+
+  return _el._holder.update
+}