sprae 9.1.1 → 10.0.1

package/core.js

@@ -1,97 +1,93 @@
+import { effect, untracked, use } from "./signal.js";
+import store, { _signals } from './store.js';
+
 // polyfill
 const _dispose = (Symbol.dispose ||= Symbol("dispose"));
 
 // mark
 const SPRAE = `∴`
 
-// signals impl
-export let signal, effect, batch, computed, untracked
-
 // reserved directives - order matters!
 export const directive = {};
 
 // sprae element: apply directives
 const memo = new WeakMap();
 
-export default function sprae(container, values) {
-  if (!container.children) return // text nodes, comments etc
-
-  // repeated call can be caused by :each with new objects with old keys needs an update
-  if (memo.has(container)) {
-    const [state, effects] = memo.get(container)
-    // we rewrite signals instead of update, because user should have what he provided
-    for (let k in values) { state[k] = values[k] }
-    // since we call direct updates here, we have to make sure
-    // we don't subscribe outer effect, as in case of :each
-    untracked(() => { for (let fx of effects) fx() })
-  }
+export default function sprae(els, values) {
+  let state
 
-  // take over existing state instead of creating clone
-  const state = values || {};
-  const effects = [];
-
-  // init directives on element
-  const init = (el, parent = el.parentNode) => {
-    if (el.attributes) {
-      // init generic-name attributes second
-      for (let i = 0; i < el.attributes.length;) {
-        let attr = el.attributes[i];
-
-        if (attr.name[0] === ':') {
-          el.removeAttribute(attr.name);
-
-          // multiple attributes like :id:for=""
-          let names = attr.name.slice(1).split(':')
-
-          // NOTE: secondary directives don't stop flow nor extend state, so no need to check
-          for (let name of names) {
-            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);
-            }
-          }
-
-          // stop if element was spraed by directive or skipped (detached) like in case of :if or :each
-          if (memo.has(el)) return;
-          if (el.parentNode !== parent) return false;
-        } else i++;
+  // make multiple items
+  if (!els?.[Symbol.iterator]) els = [els]
+
+  for (let el of els) {
+    // text nodes, comments etc - but collections are fine
+    if (el?.children) {
+      // repeated call can be caused by :each with new objects with old keys needs an update
+      if (memo.has(el)) {
+        // we rewrite signals instead of update, because user should have what he provided
+        Object.assign(memo.get(el), values)
       }
-    }
+      else {
+        // take over existing state instead of creating clone
+        state ||= store(values || {});
 
-    for (let i = 0, child; child = el.children[i]; i++) {
-      // if element was removed from parent (skipped) - reduce index
-      if (init(child, el) === false) i--;
+        init(el, state);
+
+        // if element was spraed by :with or :each instruction - skip, otherwise save
+        if (!memo.has(el)) memo.set(el, state);
+      }
     }
   };
 
-  init(container);
+  return state;
+}
 
-  // if element was spraed by :scope or :each instruction - skip
-  if (memo.has(container)) return state// memo.get(container)
+// init directives on a single element
+function init(el, state, parent = el.parentNode, effects = []) {
+  if (el.attributes) {
+    // init generic-name attributes second
+    for (let i = 0; i < el.attributes.length;) {
+      let attr = el.attributes[i];
+
+      if (attr.name[0] === ':') {
+        el.removeAttribute(attr.name);
+
+        // multiple attributes like :id:for=""
+        let names = attr.name.slice(1).split(':')
+
+        // NOTE: secondary directives don't stop flow nor extend state, so no need to check
+        for (let name of names) {
+          let dir = directive[name] || directive.default
+          let evaluate = (dir.parse || parse)(attr.value, parse)
+          let dispose = dir(el, evaluate, state, name);
+          if (dispose) effects.push(dispose);
+        }
+
+        // stop if element was spraed by internal directive
+        if (memo.has(el)) return;
+
+        // stop if element is skipped (detached) like in case of :if or :each
+        if (el.parentNode !== parent) return;
+      } else i++;
+    }
+  }
 
-  // save
-  memo.set(container, [state, effects]);
-  container.classList?.add(SPRAE); // mark spraed element
+  for (let child of [...el.children]) init(child, state, el)
 
-  // expose dispose
-  container[_dispose] = () => {
-    while (effects.length) effects.pop()[_dispose]();
-    container.classList.remove(SPRAE)
-    memo.delete(container);
+  // mark spraed element
+  el.classList?.add(SPRAE);
+  el[_dispose] = () => {
+    while (effects.length) effects.pop()();
+    el.classList.remove(SPRAE);
+    memo.delete(el);
     // NOTE: each child disposes own children etc.
-    let els = container.getElementsByClassName(SPRAE);
+    let els = el.getElementsByClassName(SPRAE);
     while (els.length) els[0][_dispose]?.()
   }
+};
 
-  return state;
-}
-
-// default compiler
+// compiler
 const evalMemo = {};
-
 const parse = (expr, dir, fn) => {
   if (fn = evalMemo[expr = expr.trim()]) return fn
 
@@ -99,28 +95,15 @@ const parse = (expr, dir, fn) => {
   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] = fn
 }
 
-// compiler
 export let compile
 
-// DOM swapper
-export let swap
-
 // configure signals/compile/differ
 // it's more compact than using sprae.signal = signal etc.
 sprae.use = s => {
-  s.signal && (
-    signal = s.signal,
-    effect = s.effect,
-    computed = s.computed,
-    batch = s.batch || (fn => fn()),
-    untracked = s.untracked || batch
-  );
-  s.swap && (swap = s.swap)
-  s.compile && (compile = s.compile)
+  s.signal && use(s);
+  s.compile && (compile = s.compile);
 }

package/directive/aria.js

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

package/directive/class.js

@@ -1,17 +1,18 @@
 import { directive } from "../core.js";
 import { ipol } from './default.js';
+import { effect } from "../signal.js";
 
 directive.class = (el, evaluate, state) => {
   let cur = new Set
-  return () => {
+  return effect(() => {
     let v = evaluate(state);
     let clsx = new Set;
     if (v) {
-      if (typeof v === "string") ipol(v?.valueOf?.(), state).split(' ').map(cls => clsx.add(cls));
-      else if (Array.isArray(v)) v.map(v => (v = ipol(v?.valueOf?.(), state)) && clsx.add(v));
-      else Object.entries(v).map(([k, v]) => v?.valueOf?.() && clsx.add(k));
+      if (typeof v === "string") ipol(v, state).split(' ').map(cls => clsx.add(cls));
+      else if (Array.isArray(v)) v.map(v => (v = ipol(v, state)) && clsx.add(v));
+      else Object.entries(v).map(([k, v]) => v && clsx.add(k));
     }
     for (let cls of cur) if (clsx.has(cls)) clsx.delete(cls); else el.classList.remove(cls);
     for (let cls of cur = clsx) el.classList.add(cls)
-  };
+  });
 };

package/directive/data.js

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

package/directive/default.js

@@ -1,22 +1,20 @@
 import { directive } from "../core.js";
+import { effect } from "../signal.js";
 
 // set generic property directive
 directive.default = (el, evaluate, state, name) => {
-  let evt = name.startsWith("on") && name.slice(2);
-
-  if (evt) {
-    let off
-    return () => (
-      off?.(), // intermediate teardown
-      off = on(el, evt, evaluate(state)?.valueOf())
-    );
-  }
-
-  return () => {
-    let value = evaluate(state)?.valueOf();
-    if (name) attr(el, name, ipol(value, state))
-    else for (let key in value) attr(el, dashcase(key), ipol(value[key], state));
-  };
+  let evt = name.startsWith("on") && name.slice(2), off
+  return effect(
+    evt ?
+      () => (
+        off?.(), // intermediate teardown
+        off = on(el, evt, evaluate(state))
+      ) :
+      () => {
+        let value = evaluate(state);
+        if (name) attr(el, name, ipol(value, state))
+        else for (let key in value) attr(el, dashcase(key), ipol(value[key], state));
+      });
 };
 
 
@@ -148,5 +146,5 @@ export const dashcase = (str) => {
 
 // interpolate a$<b> fields from context
 export const ipol = (v, state) => {
-  return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field]?.valueOf?.() ?? '') : v
+  return v?.replace ? v.replace(/\$<([^>]+)>/g, (match, field) => state[field] ?? '') : v
 };

package/directive/each.js

@@ -1,59 +1,96 @@
-import sprae, { directive, swap } from "../core.js";
+import sprae, { directive } from "../core.js";
+import { _change, _signals } from "../store.js";
+import { effect, untracked, computed } from '../signal.js';
 
-export const _each = Symbol(":each");
 
-const keys = {}, _key = Symbol('key');
+export const _each = Symbol(":each");
 
-// :each must init before :ref, :id or any others, since it defines scope
-(directive.each = (tpl, [itemVar, idxVar, evaluate], state) => {
+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("")), parent = tpl.parentNode;
+  const holder = (tpl[_each] = document.createTextNode(""));
   tpl.replaceWith(holder);
 
-  // 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 () => {
-    let items = evaluate(state)?.valueOf(), els = [];
-
-    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i)
-
-    // 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 (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;
-
-      // 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
+  // we re-create items any time new items are produced
+  let cur, keys, prevl = 0
+
+  // separate computed effect reduces number of needed updates for the effect
+  const items = computed(() => {
+    keys = null
+    let items = evaluate(state)
+    if (typeof items === "number") items = Array.from({ length: items }, (_, i) => i + 1)
+    if (items?.constructor === Object) keys = Object.keys(items), items = Object.values(items)
+    return items || []
+  })
+
+  const update = () => {
+    // NOTE: untracked avoids rerendering full list whenever internal items or props change
+    untracked(() => {
+      let i = 0, newItems = items.value, newl = newItems.length
+
+      // 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
+      }
+
+      // delete
+      if (newl < prevl) {
+        cur.length = newl
+      }
+      // update, append, init
+      else {
+        // init
+        if (!cur) {
+          cur = newItems
+        }
+        // update
+        else {
+          for (; i < prevl; i++) {
+            cur[i] = newItems[i]
+          }
+        }
+
+        // append
+        for (; i < newl; i++) {
+          cur[i] = newItems[i]
+          let idx = i,
+            scope = Object.create(state, {
+              [itemVar]: { get() { return cur[idx] } },
+              [idxVar]: { value: keys ? keys[idx] : idx },
+            }),
+            el = (tpl.content || tpl).cloneNode(true), // single element or fragment
+            els = tpl.content ? [...el.childNodes] : [el] // total added elements
+
+          holder.before(el);
+          sprae(els, scope);
+
+          // signal/holder disposal removes element
+          ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose] = () => {
+            for (let el of els) el[Symbol.dispose](), el.remove()
+          };
+        }
+      }
+
+      prevl = newl
+    })
+  }
 
-      sprae(el, substate);
+  let planned = 0
+  return effect(() => {
+    // subscribe to items change (.length)
+    if (!cur) items.value[_change]?.value
+
+    // make first render immediately, debounce subsequent renders
+    if (!planned) {
+      update()
+      queueMicrotask(() => (planned && update(), planned = 0))
+    } else planned++
+  })
+}
 
-      // document fragment
-      if (el.nodeType === 11) els.push(...el.childNodes); else els.push(el);
-    }
 
-    swap(parent, cur, cur = els, holder, options);
-  }
-}).parse = (expr, parse) => {
+// redefine parser to exclude `[a in] b`
+directive.each.parse = (expr, parse) => {
   let [leftSide, itemsExpr] = expr.split(/\s+in\s+/);
   let [itemVar, idxVar = "$"] = leftSide.split(/\s*,\s*/);
 

package/directive/fx.js

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

package/directive/if.js

@@ -1,9 +1,10 @@
-import sprae, { directive, swap } from "../core.js";
+import sprae, { directive } from "../core.js";
 import { _each } from './each.js';
+import { effect } from "../signal.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
+// as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
+// we consider :with={x} :if={x} case insignificant
 const _prevIf = Symbol("if");
 directive.if = (ifEl, evaluate, state) => {
   let parent = ifEl.parentNode,
@@ -25,14 +26,15 @@ directive.if = (ifEl, evaluate, state) => {
     else next.remove(), elses = next.content ? [...next.content.childNodes] : [next];
   } else elses = none
 
-  return () => {
-    const newEls = evaluate(state)?.valueOf() ? ifs : ifEl[_prevIf] ? none : elses;
+  return effect(() => {
+    const newEls = evaluate(state) ? ifs : ifEl[_prevIf] ? none : elses;
     if (next) next[_prevIf] = newEls === ifs
     if (cur != newEls) {
       // :if :each
       if (cur[0]?.[_each]) cur = [cur[0][_each]]
-      swap(parent, cur, cur = newEls, holder);
-      for (let el of cur) sprae(el, state);
+      for (let el of cur) el.remove();
+      cur = newEls;
+      for (let el of cur) parent.insertBefore(el, holder), sprae(el, state);
     }
-  };
+  });
 };

package/directive/ref.js

@@ -1,11 +1,11 @@
 import { directive } from "../core.js";
+import { _change, _signals } from "../store.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) => {
-  let prev;
-  return () => {
-    if (prev) delete state[prev]
-    state[prev = ipol(expr, state)] = el;
-  }
-}).parse = expr => expr
+directive.ref = (el, expr, state) => {
+  // defining prop is needed for inherited scope, like :each or :with, since el cannot be signal
+  Object.defineProperty(state, ipol(expr, state), { value: el })
+}
+
+directive.ref.parse = expr => expr

package/directive/style.js

@@ -1,16 +1,17 @@
 import { directive } from "../core.js";
 import { ipol } from './default.js';
+import { effect } from "../signal.js";
 
 directive.style = (el, evaluate, state) => {
   let initStyle = el.getAttribute("style") || "";
   if (!initStyle.endsWith(";")) initStyle += "; ";
 
-  return () => {
-    let v = evaluate(state)?.valueOf();
+  return effect(() => {
+    let v = evaluate(state);
     if (typeof v === "string") el.setAttribute("style", initStyle + ipol(v, state));
     else {
       el.setAttribute("style", initStyle);
       for (let k in v) el.style.setProperty(k, ipol(v[k], state));
     }
-  };
+  });
 };

package/directive/text.js

@@ -1,11 +1,12 @@
 import { directive } from "../core.js";
+import { effect } from "../signal.js";
 
 // set text content
 directive.text = (el, evaluate, state) => {
   if (el.content) el.replaceWith(el = document.createTextNode('')) // <template :text="abc"/>
 
-  return () => {
-    let value = evaluate(state)?.valueOf();
+  return effect(() => {
+    let value = evaluate(state);
     el.textContent = value == null ? "" : value;
-  };
+  });
 };

package/directive/value.js

@@ -1,5 +1,6 @@
 import { directive } from "../core.js";
 import { attr } from './default.js';
+import { effect } from "../signal.js";
 
 // connect expr to element value
 directive.value = (el, evaluate, state) => {
@@ -25,5 +26,5 @@ directive.value = (el, evaluate, state) => {
           }
           : (value) => (el.value = value);
 
-  return () => (update(evaluate(state)?.valueOf?.()));
+  return effect(() => (update(evaluate(state))));
 };

package/directive/with.js

@@ -0,0 +1,16 @@
+import sprae, { directive } from "../core.js";
+import store, { _signals } from '../store.js';
+import { effect } from "../signal.js";
+
+directive.with = (el, evaluate, rootState) => {
+  let state, values
+  return effect(() => {
+    values = evaluate(rootState);
+    Object.assign(state ||= sprae(el,
+      store(
+        values,
+        Object.create(rootState[_signals])
+      )
+    ), values)
+  })
+};