sprae 9.0.1 → 9.1.1

package/core.js

@@ -1,7 +1,3 @@
-import swapdom from 'swapdom'
-import * as signals from 'ulive'
-import justin from 'subscript/justin'
-
 // polyfill
 const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 
@@ -9,7 +5,7 @@ const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 const SPRAE = `∴`
 
 // signals impl
-export let { signal, effect, batch, computed, untracked } = signals;
+export let signal, effect, batch, computed, untracked
 
 // reserved directives - order matters!
 export const directive = {};
@@ -49,7 +45,9 @@ export default function sprae(container, values) {
 
           // NOTE: secondary directives don't stop flow nor extend state, so no need to check
           for (let name of names) {
-            let update = (directive[name] || directive.default)(el, attr.value, state, name);
+            let dir = directive[name] || directive.default
+            let evaluate = (dir.parse || parse)(attr.value, parse)
+            let update = dir(el, evaluate, state, name);
             if (update) {
               update[_dispose] = effect(update);
               effects.push(update);
@@ -83,6 +81,7 @@ export default function sprae(container, values) {
     while (effects.length) effects.pop()[_dispose]();
     container.classList.remove(SPRAE)
     memo.delete(container);
+    // NOTE: each child disposes own children etc.
     let els = container.getElementsByClassName(SPRAE);
     while (els.length) els[0][_dispose]?.()
   }
@@ -93,29 +92,26 @@ export default function sprae(container, values) {
 // default compiler
 const evalMemo = {};
 
-export let compile = (expr, dir, evaluate) => {
-  if (evaluate = evalMemo[expr = expr.trim()]) return evaluate
+const parse = (expr, dir, fn) => {
+  if (fn = evalMemo[expr = expr.trim()]) return fn
 
   // static-time errors
-  try {
-    // evaluate = new Function(`__scope`, `with (__scope) { return ${expr} };`);
-    evaluate = justin(expr);
-  }
-  catch (e) { throw Object.assign(e, { message: `${SPRAE} ${e.message}\n\n${dir}${expr ? `="${expr}"\n\n` : ""}`, expr }) }
+  try { fn = compile(expr); }
+  catch (e) { throw Object.assign(e, { message: `∴ ${e.message}\n\n${dir}${expr ? `="${expr}"\n\n` : ""}`, expr }) }
+
+  fn.expr = expr
 
   // runtime errors
-  return evalMemo[expr] = evaluate
+  return evalMemo[expr] = fn
 }
 
-// DOM swapper
-export let swap = swapdom
+// compiler
+export let compile
 
-// interpolate a$<b> fields from context
-export const ipol = (v, state) => {
-  return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field]?.valueOf?.() ?? '') : v
-};
+// DOM swapper
+export let swap
 
-// configure signals/compiler/differ
+// configure signals/compile/differ
 // it's more compact than using sprae.signal = signal etc.
 sprae.use = s => {
   s.signal && (
@@ -126,4 +122,5 @@ sprae.use = s => {
     untracked = s.untracked || batch
   );
   s.swap && (swap = s.swap)
+  s.compile && (compile = s.compile)
 }

package/directive/aria.js

@@ -1,8 +1,7 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 import { attr, dashcase } from './default.js'
 
-directive['aria'] = (el, expr, state) => {
-  let evaluate = compile(expr, 'aria')
+directive['aria'] = (el, evaluate, state) => {
   const update = (value) => {
     for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
   }

package/directive/class.js

@@ -1,7 +1,7 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive } from "../core.js";
+import { ipol } from './default.js';
 
-directive.class = (el, expr, state) => {
-  let evaluate = compile(expr, 'class');
+directive.class = (el, evaluate, state) => {
   let cur = new Set
   return () => {
     let v = evaluate(state);

package/directive/data.js

@@ -1,8 +1,6 @@
-import { directive, compile } from "../core.js";
-
-directive['data'] = (el, expr, state) => {
-  let evaluate = compile(expr, 'data')
+import { directive } from "../core.js";
 
+directive['data'] = (el, evaluate, state) => {
   return () => {
     let value = evaluate(state)?.valueOf()
     for (let key in value) el.dataset[key] = value[key];

package/directive/default.js

@@ -1,15 +1,14 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive } from "../core.js";
 
 // set generic property directive
-directive.default = (el, expr, state, name) => {
+directive.default = (el, evaluate, state, name) => {
   let evt = name.startsWith("on") && name.slice(2);
-  let evaluate = compile(expr, name);
 
   if (evt) {
     let off
     return () => (
       off?.(), // intermediate teardown
-      off = on(el, evt, evaluate(state))
+      off = on(el, evt, evaluate(state)?.valueOf())
     );
   }
 
@@ -146,3 +145,8 @@ const debounce = (fn, wait) => {
 export const dashcase = (str) => {
   return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase());
 }
+
+// interpolate a$<b> fields from context
+export const ipol = (v, state) => {
+  return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field]?.valueOf?.() ?? '') : v
+};

package/directive/each.js

@@ -1,61 +1,61 @@
-import sprae, { directive, compile, swap } from "../core.js";
+import sprae, { directive, swap } from "../core.js";
 
 export const _each = Symbol(":each");
 
-const keys = {}; // boxed primitives pool
+const keys = {}, _key = Symbol('key');
 
 // :each must init before :ref, :id or any others, since it defines scope
-directive.each = (tpl, expr, state, name) => {
-  let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
-  let [itemVar, idxVar = "_$"] = leftSide.split(/\s*,\s*/);
-
+(directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
   // we need :if to be able to replace holder instead of tpl for :if :each case
-  const holder = (tpl[_each] = document.createTextNode(""));
+  const holder = (tpl[_each] = document.createTextNode("")), parent = tpl.parentNode;
   tpl.replaceWith(holder);
 
-  const evaluate = compile(itemsExpr, name);
-  const memo = new WeakMap;
-
-  tpl.removeAttribute(':key')
+  // key -> el
+  const elCache = new WeakMap, stateCache = new WeakMap
 
   let cur = [];
 
+  const remove = el => {
+    el.remove()
+    el[Symbol.dispose]?.()
+    if (el[_key]) {
+      elCache.delete(el[_key])
+      stateCache.delete(el[_key])
+    }
+  }, { insert, replace } = swap
+
+  const options = { remove, insert, replace }
+
+  // naive approach: whenever items change we replace full list
   return () => {
-    // naive approach: whenever items change we replace full list
     let items = evaluate(state)?.valueOf(), els = [];
-    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i);
 
-    const count = new WeakSet
-    for (let idx in items) {
-      let item = items[idx]
-      // creating via prototype is faster in both creation time & reading time
-      let substate = Object.create(state, { [idxVar]: { value: idx } });
-      substate[itemVar] = item; // can be changed by subsequent updates, need to be writable
-      let el, key = (item.key ?? item.id ?? item); // NOTE: no need to unwrap singnal, since item fallback covers it
+    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i)
 
-      if (key == null) el = tpl.cloneNode(true)
-      else {
-        // make sure key is object
-        if (Object(key) !== key) key = (keys[key] ||= Object(key));
+    // let c = 0, inc = () => { if (c++ > 100) throw 'Inf recursion' }
+    const count = new WeakMap
+    for (let idx in items) {
+      let el, item = items[idx], key = item?.key ?? item?.id ?? item ?? idx
+      key = (Object(key) !== key) ? (keys[key] ||= Object(key)) : item
 
-        if (count.has(key)) {
-          console.warn('Duplicate key', key), el = tpl.cloneNode(true);
-        }
-        else {
-          count.add(key);
-          el = memo.get(key) || memo.set(key, tpl.cloneNode(true)).get(key);
-        }
-      }
+      if (key == null || count.has(key) || tpl.content) el = (tpl.content || tpl).cloneNode(true)
+      else count.set(key, 1), (el = elCache.get(key) || (elCache.set(key, tpl.cloneNode(true)), elCache.get(key)))[_key] = key;
 
-      if (el.content) el = el.content.cloneNode(true) // <template>
+      // creating via prototype is faster in both creation time & reading time
+      let substate = stateCache.get(key) || (stateCache.set(key, Object.create(state, { [idxVar]: { value: idx } })), stateCache.get(key));
+      substate[itemVar] = item; // can be changed by subsequent updates, need to be writable
 
-      sprae(el, substate)
+      sprae(el, substate);
 
       // document fragment
-      if (el.nodeType === 11) els.push(...el.childNodes);
-      else els.push(el);
+      if (el.nodeType === 11) els.push(...el.childNodes); else els.push(el);
     }
 
-    swap(holder.parentNode, cur, cur = els, holder);
-  };
-};
+    swap(parent, cur, cur = els, holder, options);
+  }
+}).parse = (expr, parse) => {
+  let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
+  let [itemVar, idxVar = "$"] = leftSide.split(/\s*,\s*/);
+
+  return [itemVar, idxVar, parse(itemsExpr)]
+}

package/directive/fx.js

@@ -1,6 +1,5 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 
-directive.fx = (el, expr, state, name) => {
-  let evaluate = compile(expr, name);
+directive.fx = (el, evaluate, state) => {
   return () => evaluate(state);
 };

package/directive/html.js

@@ -1,7 +1,7 @@
-import sprae, { directive, compile } from "../core.js";
+import sprae, { directive } from "../core.js";
 
-directive.html = (el, expr, state, name) => {
-  let evaluate = compile(expr, name), tpl = evaluate(state);
+directive.html = (el, evaluate, state) => {
+  let tpl = evaluate(state);
 
   if (!tpl) return
 

package/directive/if.js

@@ -1,17 +1,15 @@
-import sprae, { compile, directive, swap } from "../core.js";
+import sprae, { directive, swap } from "../core.js";
 import { _each } from './each.js';
 
 // :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
 // as for :if :scope - :if must init first, since it is lazy, to avoid initializing component ahead of time by :scope
 // we consider :scope={x} :if={x} case insignificant
 const _prevIf = Symbol("if");
-directive.if = (ifEl, expr, state, name) => {
+directive.if = (ifEl, evaluate, state) => {
   let parent = ifEl.parentNode,
     next = ifEl.nextElementSibling,
     holder = document.createTextNode(''),
 
-    evaluate = compile(expr, name),
-
     // actual replaceable els (takes <template>)
     cur, ifs, elses, none = [];
 

package/directive/ref.js

@@ -1,10 +1,11 @@
-import { directive, ipol } from "../core.js";
+import { directive } from "../core.js";
+import { ipol } from './default.js';
 
 // ref must be last within primaries, since that must be skipped by :each, but before secondaries
-directive.ref = (el, expr, state) => {
+(directive.ref = (el, expr, state) => {
   let prev;
   return () => {
     if (prev) delete state[prev]
     state[prev = ipol(expr, state)] = el;
   }
-};
+}).parse = expr => expr

package/directive/scope.js

@@ -1,9 +1,8 @@
-import sprae, { directive, compile } from "../core.js";
+import sprae, { directive } from "../core.js";
 
 // `:each` can redefine scope as `:each="a in {myScope}"`,
 // same time per-item scope as `:each="..." :scope="{collapsed:true}"` is useful
-directive.scope = (el, expr, rootState, name) => {
-  let evaluate = compile(expr, name);
+directive.scope = (el, evaluate, rootState) => {
   // local state may contain signals that update, so we take them over
   return () => {
     sprae(el, { ...rootState, ...(evaluate(rootState)?.valueOf?.() || {}) });

package/directive/style.js

@@ -1,7 +1,7 @@
-import { directive, compile, ipol } from "../core.js";
+import { directive } from "../core.js";
+import { ipol } from './default.js';
 
-directive.style = (el, expr, state) => {
-  let evaluate = compile(expr, 'style');
+directive.style = (el, evaluate, state) => {
   let initStyle = el.getAttribute("style") || "";
   if (!initStyle.endsWith(";")) initStyle += "; ";
 

package/directive/text.js

@@ -1,8 +1,7 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 
 // set text content
-directive.text = (el, expr, state) => {
-  let evaluate = compile(expr, 'text');
+directive.text = (el, evaluate, state) => {
   if (el.content) el.replaceWith(el = document.createTextNode('')) // <template :text="abc"/>
 
   return () => {

package/directive/value.js

@@ -1,10 +1,8 @@
-import { directive, compile } from "../core.js";
+import { directive } from "../core.js";
 import { attr } from './default.js';
 
 // connect expr to element value
-directive.value = (el, expr, state) => {
-  let evaluate = compile(expr, 'value');
-
+directive.value = (el, evaluate, state) => {
   let from, to;
   let update = el.type === "text" || el.type === ""
     ? (value) => el.setAttribute("value", (el.value = value == null ? "" : value))