Faster select/create/replace: destructured no-with compile for read-only exprs, flat row-program replay, shared event evaluator

Author: dy

core.js

@@ -140,8 +140,15 @@ 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')
+/** Symbol for the flat directive program on clone masters: [{p: childNodes-index path, d: dirs}] in DFS order */
+const _prog = Symbol('program')
+
+/** Is q a strict descendant path of p */
+const inside = (p, q) => {
+  if (q.length <= p.length) return false
+  for (let i = 0; i < p.length; i++) if (p[i] !== q[i]) return false
+  return true
+}
 
 /**
  * Applies directives to an HTML element and manages its reactive state.
@@ -196,39 +203,27 @@ const sprae = (root = document.body, state, master) => {
   )
   let start
 
+  // recording state: prog collects (path, dirs) per directive-bearing element while the first clone is scanned
+  let prog = master ? master[_prog] : undefined, path = prog === undefined && master ? [] : null
+
   const add = el[_add] = (el, mel) => {
-    let dirs = mel?.[_dirs]
+    let _attrs = el.attributes, rec = mel && []
 
-    // replay master's recorded scan — no attribute reads, no parsing
-    if (dirs !== undefined) {
-      // clones from the recording batch still carry directive attrs (more than master's residual) — strip them;
-      // later clones come from the stripped master and skip removeAttribute entirely
-      let strip = dirs.length && el.attributes.length > dirs.n, d
-      for (let i = 0; i < dirs.length; i++) {
-        d = dirs[i]
-        if (strip) el.removeAttribute(d[0])
-        if (apply(el, d[0], d[1], d[2])) return
-      }
-    }
-    else {
-      let _attrs = el.attributes, rec = mel && (mel[_dirs] = [])
-
-      if (_attrs) for (let i = 0; i < _attrs.length;) {
-        let { name, value } = _attrs[i]
-
-        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])
-
-          // n = master's residual attr count (directives may add attrs to el, so el.attributes can't be the reference)
-          if (apply(el, name, short, value)) return rec && (rec.n = mel.attributes.length), undefined
-        } else i++
-      }
-      if (rec) rec.n = mel.attributes.length
+    if (_attrs) for (let i = 0; i < _attrs.length;) {
+      let { name, value } = _attrs[i]
+
+      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])
+
+        // n = master's residual attr count (directives may add attrs to el, so el.attributes can't be the reference)
+        if (apply(el, name, short, value)) return rec?.length && (rec.n = mel.attributes.length, record(rec)), undefined
+      } else i++
     }
+    if (rec?.length) rec.n = mel.attributes.length, record(rec)
 
     // custom elements own their children — don't descend
     if (el !== root && isCE(el)) return
@@ -237,13 +232,49 @@ const sprae = (root = document.body, state, master) => {
     // real DOM: firstChild/nextSibling avoids array copy; frag.childNodes is already snapshot array
     if (el.firstChild !== undefined) {
       // 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)
+      let child = el.firstChild, mchild = mel?.firstChild, next, idx = 0
+      while (child) (
+        next = child.nextSibling,
+        child.nodeType == 1 && (path?.push(idx), add(child, mchild), path?.pop()),
+        mchild &&= mchild.nextSibling, child = next, idx++
+      )
     }
     else for (let child of el.childNodes) child.nodeType == 1 && add(child)
   };
 
-  add(el, master);
+  const record = rec => path && prog.push({ p: path.slice(), d: rec })
+
+  // replay master's flat program — no attribute scans, no tree walk, dir-less elements never visited
+  const replay = prog => {
+    let m = prog.length, nodes = Array(m), node, p, d, e, h, i
+    // resolve all nodes upfront: applying a directive may move nodes (:portal) and shift later paths
+    for (e = 0; e < m; e++) {
+      p = prog[e].p, node = el
+      for (h = 0; h < p.length; h++) node = node.childNodes[p[h]]
+      nodes[e] = node
+    }
+    for (e = 0; e < m; e++) {
+      p = prog[e].p, d = prog[e].d, node = nodes[e]
+      // clones from the recording batch still carry directive attrs (more than master's residual) — strip them;
+      // later clones come from the stripped master and skip removeAttribute entirely
+      let strip = node.attributes.length > d.n
+      for (i = 0; i < d.length; i++) {
+        if (strip) node.removeAttribute(d[i][0])
+        if (apply(node, d[i][0], d[i][1], d[i][2])) {
+          // stop: skip this element's recorded descendants (subsprae owns them)
+          while (e + 1 < m && inside(p, prog[e + 1].p)) e++
+          break
+        }
+      }
+    }
+  }
+
+  if (prog !== undefined) replay(prog)
+  else {
+    if (path) prog = master[_prog] = []
+    add(el, master)
+    path = null // MO-added nodes reuse `add` later — no recording for those
+  }
 
   currentDir = currentEl = null;
 

directive/event.js

@@ -17,9 +17,9 @@ export default (el, state, expr, name) => {
   // if (!/^(?:[\w$]+|\([^()]*\))\s*=>/.test(expr) && !/^function\b/.test(expr)) expr = `()=>{${expr}}`;
 
   const [type, mods] = names[name] ??= (([t, ...m]) => [t, m])(name.slice(2).split('.')),
-    evaluate = parse(expr).bind(el),
+    evaluate = parse(expr),
     // decorate pops mods — pass a copy to keep the memo intact
-    trigger = decorate(Object.assign(e => evaluate(state, (fn) => typeof fn === 'function' ? fn(e) : fn), { target: el }), mods.length ? [...mods] : mods),
+    trigger = decorate(Object.assign(e => evaluate.call(el, state, (fn) => typeof fn === 'function' ? fn(e) : fn), { target: el }), mods.length ? [...mods] : mods),
     // stable dispatcher: dispose neutralizes by nulling — removeEventListener is undo work a dying node doesn't need
     handler = e => live && live(e);
   let live = trigger

sprae.js

@@ -222,6 +222,42 @@ const hasSemi = s => {
   return false
 }
 
+// Words that cannot (or must not) become destructuring bindings
+const RESERVED = new Set('true,false,null,undefined,this,typeof,instanceof,in,of,new,void,return,function,class,const,let,var,if,else,for,while,do,switch,case,default,break,continue,try,catch,finally,throw,yield,async,await,delete,with,super,import,export,extends,arguments'.split(','))
+
+// `with(scope)` disables identifier caching for the whole function — every read is a dynamic runtime
+// lookup, on every run of every effect. For gated read-only expressions we compile a destructured
+// prologue instead: identifiers become plain property reads V8 can optimize. Resolution is equivalent —
+// scope `has` always answers true and `get` falls through row → state → globalThis, exactly like `with`.
+// Gates (fall back to `with`): assignments/inc/dec (scope writes need the trap), ternaries/short-circuits
+// (destructuring would read both branches eagerly), templates/regex/semicolons (tokenizer simplicity).
+const destructurable = expr => !/(?<![=!<>])=(?![=>])|\+\+|--|\?(?!\.)|&&|\|\||[;`/]|\bdelete\b/.test(expr)
+
+// Free identifier candidates: skip strings, property access (after `.`), numeric tails, reserved words,
+// and object keys (`name:` can only be a key — ternaries are gated out). Over-extraction is harmless:
+// the extra name resolves through the same scope chain a `with` lookup would.
+const free = expr => {
+  let names = new Set, i = 0, n = expr.length, last = '', ch, j, k, word
+  while (i < n) {
+    ch = expr[i]
+    if (ch === '"' || ch === "'") { i++; while (i < n && expr[i] !== ch) i += expr[i] === '\\' ? 2 : 1; i++; last = ch; continue }
+    if (/[A-Za-z_$]/.test(ch)) {
+      j = i
+      while (j < n && /[\w$]/.test(expr[j])) j++
+      word = expr.slice(i, j)
+      if (last !== '.' && !/\d/.test(last) && !RESERVED.has(word)) {
+        k = j
+        while (k < n && /\s/.test(expr[k])) k++
+        if (expr[k] !== ':') names.add(word)
+      }
+      i = j; last = word[word.length - 1]; continue
+    }
+    if (!/\s/.test(ch)) last = ch
+    i++
+  }
+  return names
+}
+
 // Configure sprae with default compiler and signals
 use({
 
@@ -231,7 +267,13 @@ use({
     if (/^(if|let|const)\b/.test(expr));
     // first-level semicolons - no return
     else if (hasSemi(expr));
-    else expr = `return ${expr}`
+    else {
+      if (destructurable(expr)) try {
+        let names = free(expr)
+        return sprae.constructor(`${names.size ? `const{${[...names].join(',')}}=arguments[0];` : ''}return(${expr})`)
+      } catch (e) { } // odd extraction → with-mode
+      expr = `return ${expr}`
+    }
     // async expression
     if (/\bawait\s/.test(expr)) expr = `return (async()=>{${expr}})()`
     return sprae.constructor(`with(arguments[0]){${expr}}`)