sprae 13.2.2 → 13.3.1

package/core.js

@@ -161,8 +161,18 @@ const sprae = (root = document.body, state) => {
   // on/off all effects
   // we don't call prevOn as convention: everything defined before :else :if won't be disabled by :if
   // imagine <x :onx="..." :if="..."/> - when :if is false, it disables directives after :if (calls _off) but ignores :onx
-  el[_on] = () => (!offs && (offs = fx.map(fn => fn())))
-  el[_off] = () => (offs?.map(off => off?.()), offs = null)
+  el[_on] = () => {
+    if (offs) return offs
+    offs = Array(fx.length)
+    for (let i = 0; i < fx.length; i++) offs[i] = fx[i]()
+    return offs
+  }
+  el[_off] = () => {
+    if (!offs) return
+    let current = offs
+    offs = null
+    for (let i = 0; i < current.length; i++) current[i]?.()
+  }
 
   // destroy
   el[_dispose] ||= () => {

package/directive/class.js

@@ -10,14 +10,29 @@ import { clsx } from "../core.js";
  * @returns {(v: string | string[] | Record<string, boolean>) => void} Update function
  */
 export default (el, st, ex, name) => {
-  let _cur = new Set, _new
+  let _cur = null, _new, _prev = null
 
   return (v) => {
-    _new = new Set
-    if (v) for (let c of clsx(typeof v === 'function' ? v(el.className) : v).split(' ')) c && _new.add(c)
-    for (let c of _cur) if (!_new.has(c)) el.classList.remove(c);
-    for (let c of _new) if (!_cur.has(c)) el.classList.add(c);
-    if (!el.classList.length) el.removeAttribute('class')
+    v = typeof v === 'function' ? v(el.className) : v
+
+    if (v?.constructor === Object) {
+      _prev = null
+      if (_cur) for (let c of _cur) if (!v[c]) el.classList.remove(c), _cur.delete(c)
+      if (!_cur?.size) _cur = null
+      for (let c in v) if (v[c] && !_cur?.has(c)) el.classList.add(c), (_cur ||= new Set).add(c)
+      if (!_cur) el.removeAttribute('class')
+      return
+    }
+
+    v = clsx(v)
+    if (v === _prev) return
+    _prev = v
+
+    _new = null
+    if (v) for (let c of v.split(' ')) c && (_new ||= new Set).add(c)
+    if (_cur) for (let c of _cur) if (!_new?.has(c)) el.classList.remove(c)
+    if (_new) for (let c of _new) if (!_cur?.has(c)) el.classList.add(c)
+    if (!_new) el.removeAttribute('class')
     _cur = _new
   }
 }

package/directive/each.js

@@ -1,117 +1,206 @@
-import sprae, { store, parse, _state, effect, _change, _signals, frag, throttle, debounce, mutate } from "../core.js";
+import sprae, { parse, _state, _off, effect, _change, _signals, frag, throttle, mutate } from "../core.js";
+
+// Lightweight row scope — reads item via cur[idx] (positional) or direct ref (keyed).
+// Local vars (e.g. :ref) stored in `l` on first write.
+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
+}
+// Keyed: `r` holds direct item reference — immune to store index shifts
+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),
+  has: () => true
+}
 
 /**
  * Each directive - renders list items from array/object/number.
  * Syntax: `:each="item in items"` or `:each="(item, idx) of items"`
- * @param {HTMLTemplateElement | Element} tpl - Template element
- * @param {Object} state - State object
- * @param {string} expr - Iterator expression
- * @returns {{ eval: Function, [Symbol.dispose]: () => void }} Directive result
+ *
+ * Keyed by object identity: when items are objects, splice/remove only
+ * disposes the removed row — survivors keep their DOM and don't re-evaluate.
+ * Primitives fall back to index-based (positional) updates.
  */
 export default (tpl, state, expr) => {
   const [lhs, rhs] = expr.split(/\bin|of\b/)
-
   let [itemVar, idxVar = "$"] = lhs.trim().replace(/\(|\)/g, '').split(/\s*,\s*/);
 
-  // we need :if to be able to replace holder instead of tpl for :if :each case
-  // Reuse holder from previous init (survives :if off/on cycle)
   let doc = tpl.ownerDocument
   let holder = tpl._eachHolder || (tpl._eachHolder = doc.createTextNode(""));
 
-  // we re-create items any time new items are produced
-  let cur, keys, items, prevl = 0
+  // Map<identity, {el, scope, proxy}> for keyed mode
+  // Array<{el, scope, proxy}> for positional mode
+  let rowMap = new Map, rows = [], items, keys, cur
 
-  let update = throttle(() => mutate(() => {
-    let i = 0, newItems = items, newl = newItems.length
+  // Can we use identity keying? Only for object items.
+  let keyed = false
 
-    // plain array update, not store (signal with array) - updates full list
-    if (cur && !cur[_change]) {
-      for (let s of cur[_signals] || []) s[Symbol.dispose]()
-      cur = null, prevl = 0
+  let update = throttle(() => mutate(() => {
+    let newItems = items, newl = newItems.length, prevl = rows.length
+
+    // detect keyed mode: object items in plain (non-store) arrays only.
+    // store arrays must use positional mode: store wraps items in new Proxies,
+    // breaking identity matching on replace (every item looks "new").
+    keyed = false
+    if (!newItems[_change]) for (let i = 0; i < newl; i++) {
+      let item = newItems[i]
+      if (item != null) { keyed = typeof item === 'object'; break }
     }
 
+    if (keyed && prevl) {
+      // --- KEYED DIFF: only when we have existing rows to diff against ---
+
+      // fast path: pure append (list only grew, no removals possible)
+      if (newl > prevl && rowMap.size === prevl) {
+        let batch = (newl - prevl) > 1 ? doc.createDocumentFragment() : null
+        let pending = batch ? [] : null
+        for (let i = prevl; i < newl; i++) {
+          let identity = newItems[i]
+          let scope = { p: state, v: itemVar, k: idxVar, r: identity, i, l: null }
+          let proxy = new Proxy(scope, keyHandler)
+          let el = tpl.content ? frag(tpl) : tpl.cloneNode(true)
+          let insertNode = el.content || el
+          let row = { el, scope, proxy }
+          rowMap.set(identity, row)
+          rows.push(row)
+          if (batch) { batch.appendChild(insertNode); pending.push([el, proxy]) }
+          else { holder.before(insertNode); sprae(el, proxy) }
+        }
+        if (batch && pending.length) {
+          holder.before(batch)
+          for (let [el, proxy] of pending) sprae(el, proxy)
+        }
+      } else {
+        // full diff: removals, reorders, mixed insert/remove
+        let removed = 0
+        if (newl <= prevl) {
+          let newSet = new Set
+          for (let i = 0; i < newl; i++) newSet.add(newItems[i])
+          for (let [identity, row] of rowMap) {
+            if (!newSet.has(identity)) {
+              row.el[Symbol.dispose]?.(); row.el.remove()
+              rowMap.delete(identity); removed++
+            }
+          }
+        }
 
-    // delete
-    if (newl < prevl) cur.length = newl
+        let newRows = [], moved = false
+        let batch = null, pending = null
+        if (newl - rowMap.size > 1) batch = doc.createDocumentFragment(), pending = []
+
+        for (let i = 0; i < newl; i++) {
+          let identity = newItems[i], row = rowMap.get(identity)
+          if (row) {
+            if (row.scope.i !== i) moved = true
+            row.scope.i = i; row.scope.r = identity
+            newRows.push(row)
+          } else {
+            let scope = { p: state, v: itemVar, k: idxVar, r: identity, i, l: null }
+            let proxy = new Proxy(scope, keyHandler)
+            let el = tpl.content ? frag(tpl) : tpl.cloneNode(true)
+            let insertNode = el.content || el
+            row = { el, scope, proxy }
+            rowMap.set(identity, row)
+            newRows.push(row)
+            if (batch) { batch.appendChild(insertNode); pending.push([el, proxy]) }
+            else { holder.before(insertNode); sprae(el, proxy) }
+          }
+        }
 
-    // update, append, init
-    else {
-      // init
-      if (!cur) cur = newItems
-      // update
-      else while (i < prevl) cur[i] = newItems[i++]
+        if (batch && pending.length) {
+          holder.before(batch)
+          for (let [el, proxy] of pending) sprae(el, proxy)
+        }
 
-      // batch append using DocumentFragment for efficiency
-      let batchSize = newl - i
-      let batch = batchSize > 1 ? doc.createDocumentFragment() : null
-      let pending = batch ? [] : null
+        if (moved || removed) {
+          let next = holder
+          for (let i = newRows.length - 1; i >= 0; i--) {
+            let node = newRows[i].el._holder || newRows[i].el.content || newRows[i].el
+            if (node.nextSibling !== next) next.before(node)
+            next = node
+          }
+        }
 
-      // append
-      for (; i < newl; i++) {
-        cur[i] = newItems[i]
+        rows = newRows
+      }
+    } else {
+      // --- POSITIONAL PATH: index-based (primitives, numbers) ---
 
-        let idx = i
-        let el = tpl.content ? frag(tpl) : tpl.cloneNode(true);
-        // el.content is DocumentFragment for frag() output, el itself for cloneNode
-        let insertNode = el.content || el
+      // plain array replaced — full reset
+      if (prevl && cur !== newItems && !newItems[_change]) {
+        for (let r of rows) { r.el[Symbol.dispose]?.(); r.el.remove() }
+        rows.length = 0; prevl = 0; rowMap.clear()
+      }
+      cur = newItems
 
-        // collect for batch insert
-        if (batch) {
-          batch.appendChild(insertNode)
-          pending.push([ el, idx ])
-        } else {
-          holder.before(insertNode)
-          let subscope = store({
-            get [itemVar]() { return cur?.[idx] },
-            [idxVar]: keys ? keys[idx] : idx
-          }, state)
-          sprae(el, subscope)
-        }
+      // shrink
+      if (newl < prevl) {
+        for (let i = newl; i < prevl; i++) { rows[i].el[Symbol.dispose]?.(); rows[i].el.remove() }
+        rows.length = newl
+      }
 
-        // signal/holder disposal removes element
-        let _prev = ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose]
-        cur[_signals][i][Symbol.dispose] = () => {
-          _prev?.(), el[Symbol.dispose]?.(), el.remove()
-        };
+      // update surviving rows' item source
+      for (let i = 0; i < Math.min(prevl, newl); i++) {
+        rows[i].scope.c = newItems
+        if (keys) rows[i].scope.o = keys
       }
 
-      // batch insert all at once, then sprae
-      if (batch) {
-        holder.before(batch)
-        for (let [el, idx] of pending) {
-          let subscope = store({
-            get [itemVar]() { return cur?.[idx] },
-            [idxVar]: keys ? keys[idx] : idx
-          }, state)
-          sprae(el, subscope)
+      // append
+      if (newl > prevl) {
+        let batch = (newl - prevl) > 1 ? doc.createDocumentFragment() : null
+        let pending = batch ? [] : null
+
+        for (let i = prevl; i < newl; i++) {
+          let handler = keyed ? keyHandler : posHandler
+          let scope = keyed
+            ? { p: state, v: itemVar, k: idxVar, r: newItems[i], i, l: null }
+            : { p: state, v: itemVar, k: idxVar, c: newItems, i, o: keys, l: null }
+          let proxy = new Proxy(scope, handler)
+          let el = tpl.content ? frag(tpl) : tpl.cloneNode(true)
+          let insertNode = el.content || el
+          let row = { el, scope }
+          rows.push(row)
+          if (keyed) rowMap.set(newItems[i], row)
+
+          if (batch) {
+            batch.appendChild(insertNode)
+            pending.push([el, proxy])
+          } else {
+            holder.before(insertNode)
+            sprae(el, proxy)
+          }
+        }
+
+        if (batch) {
+          holder.before(batch)
+          for (let [el, proxy] of pending) sprae(el, proxy)
         }
       }
     }
-
-    prevl = newl
   }))
 
-  // Replace template with holder (idempotent: skip if already replaced, e.g. :if re-activation)
   if (tpl.parentNode) mutate(() => tpl.replaceWith(holder))
-  tpl[_state] = null // mark as fake-spraed, to preserve :-attribs for template
+  tpl[_state] = null
 
-  let disposeItems = () => { if (cur) { for (let s of cur[_signals] || []) s[Symbol.dispose]?.(); cur = null; prevl = 0 } }
+  let disposeAll = () => {
+    for (let r of rows) { r.el[Symbol.dispose]?.(); r.el.remove() }
+    rows.length = 0; rowMap.clear()
+  }
 
-  return Object.assign(value => {
-    // resolve new items
+  let cb = value => {
     keys = null
     if (typeof value === "number") items = Array.from({ length: value }, (_, i) => i + 1)
     else if (value?.constructor === Object) keys = Object.keys(value), items = Object.values(value)
     else items = value || []
 
-    // whenever list changes, we rebind internal change effect
     let off = effect(() => {
-      // subscribe to items change (.length) - we do it every time (not just in update) since preact signals unsubscribes unused signals
       items[_change]?.value
-
-      // make first render immediately, debounce subsequent renders
       update()
     })
-    return () => { off(); disposeItems() }
-  }, {eval:parse(rhs)})
+    return () => off()
+  }
+  cb.eval = parse(rhs)
+  cb[_off] = disposeAll
+  return cb
 }