sprae 11.6.0 → 12.0.1

package/directive/each.js

@@ -1,86 +1,90 @@
-import sprae, { _state, dir, frag, parse } from "../core.js";
-import store, { _change, _signals } from "../store.js";
-import { effect } from '../signal.js';
+import sprae, { store, _state, effect, _change, _signals, frag, throttle } from "../core.js";
 
+const each = (tpl, state, expr) => {
+  let [itemVar, idxVar = "$"] = expr.split(/\bin\b/)[0].trim().replace(/\(|\)/g, '').split(/\s*,\s*/);
 
-dir('each', (tpl, state, expr) => {
-    let [itemVar, idxVar = "$"] = expr.split(/\bin\b/)[0].trim().split(/\s*,\s*/);
+  // we need :if to be able to replace holder instead of tpl for :if :each case
+  let holder = document.createTextNode("");
 
-    // we need :if to be able to replace holder instead of tpl for :if :each case
-    let holder = document.createTextNode("");
+  // we re-create items any time new items are produced
+  let cur, keys, items, prevl = 0
 
-    // we re-create items any time new items are produced
-    let cur, keys, items, prevl = 0
+  // FIXME: pass items to update instead of global
+  let update = throttle(() => {
+    let i = 0, newItems = items, newl = newItems.length
 
-    let update = () => {
-      let i = 0, newItems = items, 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
+    }
 
-      // 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 while (i < prevl) cur[i] = newItems[i++]
+
+      // append
+      for (; i < newl; i++) {
+        cur[i] = newItems[i]
+
+        let idx = i,
+          // inherited state must be cheaper in terms of memory and faster in terms of performance, compared to creating a proxy store
+          // subscope = store({
+          //   // NOTE: since we simulate signal, we have to make sure it's actual signal, not fake one
+          //   // FIXME: try to avoid this, we also have issue with wrongly calling dispose in store on delete
+          //   [itemVar]: cur[_signals]?.[idx]?.peek ? cur[_signals]?.[idx] : cur[idx],
+          //   [idxVar]: keys ? keys[idx] : idx
+          // }, state)
+        subscope = Object.create(state, {
+          [itemVar]: { get: () => cur[idx] },
+          [idxVar]: { value: keys ? keys[idx] : idx }
+        })
+
+        let el = tpl.content ? frag(tpl) : tpl.cloneNode(true);
+
+        holder.before(el.content || el);
+
+        sprae(el, subscope);
+
+        // signal/holder disposal removes element
+        let _prev = ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose]
+        cur[_signals][i][Symbol.dispose] = () => {
+          _prev?.(), el[Symbol.dispose]?.(), el.remove()
+        };
       }
+    }
 
-      // delete
-      if (newl < prevl) cur.length = newl
-
-      // update, append, init
-      else {
-        // init
-        if (!cur) cur = newItems
-        // update
-        else while (i < prevl) cur[i] = newItems[i++]
-
-        // append
-        for (; i < newl; i++) {
-          cur[i] = newItems[i]
-          let idx = i,
-            // FIXME: inherited state is cheaper in terms of memory and faster in terms of performance
-            // compared to cloning all parent signals and creating a proxy
-            // FIXME: besides try to avoid _signals access: we can optimize store then not checking for _signals key
-            scope = store({
-              [itemVar]: cur[_signals]?.[idx] || cur[idx],
-              [idxVar]: keys ? keys[idx] : idx
-            }, state),
-
-            el = tpl.content ? frag(tpl) : tpl.cloneNode(true);
-
-          holder.before(el.content || el);
-          sprae(el, scope);
-
-          // signal/holder disposal removes element
-          let _prev = ((cur[_signals] ||= [])[i] ||= {})[Symbol.dispose]
-          cur[_signals][i][Symbol.dispose] = () => {
-            _prev?.(), el[Symbol.dispose]?.(), el.remove()
-          };
-        }
-      }
+    prevl = newl
+  })
 
-      prevl = newl
-    }
+  tpl.replaceWith(holder);
+  tpl[_state] = null // mark as fake-spraed, to preserve :-attribs for template
 
-    tpl.replaceWith(holder);
-    tpl[_state] = null // mark as fake-spraed, to preserve :-attribs for template
-
-    return value => {
-      // obtain new items
-      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 planned = 0
-      return effect(() => {
-        // subscribe to items change (.length) - we do it every time (not just in update) since preact unsubscribes unused signals
-        items[_change]?.value
-
-        // make first render immediately, debounce subsequent renders
-        if (!planned++) update(), queueMicrotask(() => (planned > 1 && update(), planned = 0));
-      })
-    }
-  },
+  return value => {
+    // resolve new items
+    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
+    return effect(() => {
+      // subscribe to items change (.length) - we do it every time (not just in update) since preact unsubscribes unused signals
+      items[_change]?.value
+
+      // make first render immediately, debounce subsequent renders
+      update()
+    })
+  }
+}
+
+// :each directive skips v, k
+each.parse = (str) => str.split(/\bin\b/)[1].trim()
 
-  // redefine evaluator to take second part of expression
-  expr => parse(expr.split(/\bin\b/)[1])
-)
+export default each

package/directive/else.js

@@ -0,0 +1,22 @@
+import { _on, _off, _state, frag } from '../core.js';
+
+
+// NOTE: we can reach :else counterpart whereas prev :else :if is on hold
+export default (el, state, _el, _, _prev=el) => {
+
+  // console.log(':else init', el)
+  _el = el.content ? frag(el) : el
+
+  // 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() => {
+    // console.log(':else update', _el)
+    _el._holder.update()
+  }
+}

package/directive/fx.js

@@ -1,3 +1,3 @@
-import { dir } from "../core.js";
+import { call } from "../core.js"
 
-dir('fx', _ => _ => _)
+export default () => v => (call(v))

package/directive/if.js

@@ -1,41 +1,47 @@
-import sprae, { dir, _state, _on, _off, frag } from "../core.js";
+// "centralized" version of :if
+import sprae, { throttle, _on, _off, _state, frag } from '../core.js';
 
-// :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
-// 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");
+// :if="a"
+export default (el, state, _holder, _el, _match) => {
+  // new element :if
+  // console.log(':if init', el)
+  if (!el._holder) {
+    // mark el as fake-spraed to delay init, since we sprae rest when branch matches, both :if and :else :if
+    el[_state] ??= null
 
-dir('if', (el, state) => {
-  let holder = document.createTextNode('')
+    _el = el.content ? frag(el) : el
 
-  let nextEl = el.nextElementSibling,
-    curEl, ifEl, elseEl;
+    el.replaceWith(_holder = document.createTextNode(''))
+    _el._holder = _holder._holder = _holder
 
-  el.replaceWith(holder)
 
-  ifEl = el.content ? frag(el) : el
-  ifEl[_state] = null // mark el as fake-spraed to hold-on init, since we sprae rest when branch matches
+    _holder._clauses = [_el._clause = [_el, false]]
 
-  // FIXME: instead of nextEl / el we should use elseEl / ifEl
-  if (nextEl?.hasAttribute(":else")) {
-    nextEl.removeAttribute(":else");
-    // if nextEl is :else :if - leave it for its own :if handler
-    if (!nextEl.hasAttribute(":if")) nextEl.remove(), elseEl = nextEl.content ? frag(nextEl) : nextEl, elseEl[_state] = null
-  }
-  else nextEl = null
-
-  return (value, newEl = el[_prevIf] ? null : value ? ifEl : elseEl) => {
-    if (nextEl) nextEl[_prevIf] = el[_prevIf] || newEl == ifEl
-    if (curEl != newEl) {
-      // disable effects on child elements when element is not matched
-      if (curEl) curEl.remove(), curEl[_off]?.();
-      if (curEl = newEl) {
-        holder.before(curEl.content || curEl)
-        // remove fake memo to sprae as new
-        curEl[_state] === null ? (delete curEl[_state], sprae(curEl, state))
-        // enable effects if branch is matched
-        : curEl[_on]()
+    _holder.update = throttle(() => {
+      let match = _holder._clauses.find(([, s]) => s)
+      // console.group(':if update clauses', ..._holder._clauses)
+
+      if (match != _match) {
+        // console.log(':if match', match)
+        _match?.[0].remove()
+        _match?.[0][_off]?.()
+        if (_match = match) {
+          _holder.before(_match[0].content || _match[0])
+          // there's no :else after :if, so lazy-sprae here doesn't risk adding own destructor to own list of destructors
+          !_match[0][_state] ? (delete _match[0][_state], sprae(_match[0], state)) : _match[0][_on]?.()
+        }
       }
-    }
-  };
-})
+      // console.groupEnd()
+    })
+  }
+  // :else :if needs to be spraed all over to have clean list of offable effects
+  else sprae(_el = el, state)
+
+  // :else may have children to init which is called after :if
+  // or preact can schedule :else after :if, so we ensure order of call by next tick
+  return value => {
+    // console.log(':if update', _el, value)
+    _el._clause[1] = value
+    _el._holder.update()
+  }
+}

package/directive/ref.js

@@ -1,9 +1,10 @@
-import { dir, parse } from "../core.js";
-import { untracked } from "../signal.js";
-import { setter } from "../store.js";
+import { parse } from "../core.js"
+// import { setter } from "./value.js"
 
-dir('ref', (el, state, expr) => (
+export default (el, state, expr, name, _prev, _set) => (
   typeof parse(expr)(state) == 'function' ?
-    v => v.call(null, el) :
-    (setter(expr)(state, el), _ => _)
-))
+    v => (v(el)) :
+    // NOTE: we have to set element statically (outside of effect) to avoid parasitic sub - multiple els with same :ref can cause recursion (eg. :each :ref="x")
+    // (setter(expr)(state, el))
+    (Object.defineProperty(state, expr, { value: el, configurable: true }), () => {})
+)

package/directive/scope.js

@@ -0,0 +1,17 @@
+import sprae, { store, call, untracked, _state } from '../core.js'
+
+export default (el, rootState, _scope) => (
+  // prevent subsequent effects
+  el[_state] = null,
+  // 0 run pre-creates state to provide scope for the first effect - it can write vars in it, so we should already have it
+  _scope = store({}, rootState),
+  // 1st run spraes subtree with values from scope - it can be postponed by modifiers (we isolate reads from parent effect)
+  // 2nd+ runs update _scope
+  values => {
+    let ext = call(values, _scope);
+    // we bind to _scope to alleviate friction of using scope method directly
+    for (let k in ext) _scope[k] = typeof ext[k] === 'function' ? ext[k].bind(_scope) : ext[k];
+    // Object.assign(_scope, call(values, _scope))
+    return el[_state] ?? (delete el[_state], untracked(() => sprae(el, _scope)))
+  }
+)

package/directive/spread.js

@@ -0,0 +1,3 @@
+import { attr, dashcase } from "../core.js";
+
+export default (target) => value => { for (let key in value) attr(target, dashcase(key), value[key]) }

package/directive/style.js

@@ -1,12 +1,14 @@
-import { dir } from "../core.js";
+import { call, attr } from "../core.js";
 
-dir('style', (el, initStyle) => (
-  initStyle = el.getAttribute("style"),
+export default (el, _static) => (
+  _static = el.getAttribute("style"),
   v => {
-    if (typeof v === "string") el.setAttribute("style", initStyle + (initStyle.endsWith(';') ? '' : '; ') + v);
+    v = call(v, el.style)
+    if (typeof v === "string") attr(el, "style", _static + '; ' + v);
     else {
-      if (initStyle) el.setAttribute("style", initStyle);
-      for (let k in v) k[0] == '-' ? (el.style.setProperty(k, v[k])) : el.style[k] = v[k]
+      if (_static) attr(el, "style", _static);
+      // NOTE: we skip names not starting with a letter - eg. el.style stores properties as { 0: --x } or JSDOM has _pfx
+      for (let k in v) k[0] == '-' ? el.style.setProperty(k, v[k]) : k[0] > 'A' && (el.style[k] = v[k])
     }
-  })
+  }
 )

package/directive/text.js

@@ -1,7 +1,7 @@
-import { dir, frag } from "../core.js";
+import { frag, call } from "../core.js"
 
-dir('text', el => (
+export default el => (
   // <template :text="a"/> or previously initialized template
   el.content && el.replaceWith(el = frag(el).childNodes[0]),
-  value => el.textContent = value == null ? "" : value
-))
+  v => (v = call(v, el.textContent), el.textContent = v == null ? "" : v)
+)

package/directive/value.js

@@ -1,39 +1,13 @@
-import sprae, { parse } from "../core.js";
-import { dir } from "../core.js";
-import { untracked } from "../signal.js";
-import { setter } from "../store.js";
-import { attr } from './default.js';
-
-
-dir('value', (el, state, expr) => {
-  const update =
-    (el.type === "text" || el.type === "") ?
-      (value) => el.setAttribute("value", (el.value = value == null ? "" : value)) :
-      (el.tagName === "TEXTAREA" || el.type === "text" || el.type === "") ?
-        (value, from, to) => (
-          // we retain selection in input
-          (from = el.selectionStart),
-          (to = el.selectionEnd),
-          el.setAttribute("value", (el.value = value == null ? "" : value)),
-          from && el.setSelectionRange(from, to)
-        ) :
-        (el.type === "checkbox") ?
-          (value) => (el.checked = value, attr(el, "checked", value)) :
-          el.type === 'radio' ? (value) => (
-            el.value === value && ((el.checked = value), attr(el, 'checked', value))
-          ) :
-          (el.type === "select-one") ?
-            (value) => {
-              for (let o of el.options)
-                o.value == value ? o.setAttribute("selected", '') : o.removeAttribute("selected");
-              el.value = value;
-            } :
-            (el.type === 'select-multiple') ? (value) => {
-              for (let o of el.options) o.removeAttribute('selected')
-              for (let v of value) el.querySelector(`[value="${v}"]`).setAttribute('selected', '')
-            } :
-              (value) => (el.value = value);
+import sprae, { attr, parse, _state } from "../core.js";
+
+
+// create expression setter, reflecting value back to state
+export const setter = (expr, _set = parse(`${expr}=__`)) => (target, value) => {
+  // save value to stash
+  target.__ = value; _set(target), delete target.__
+}
 
+export default (el, state, expr, name) => {
   // bind back to value, but some values can be not bindable, eg. `:value="7"`
   try {
     const set = setter(expr)
@@ -51,9 +25,34 @@ dir('value', (el, state, expr) => {
       sprae(el, state)
     }
 
-    // initial state value
+    // initial state value - setter has already cached it, no need to parse again
     parse(expr)(state) ?? handleChange()
-  } catch {}
-
-  return update
-})
+  } catch { }
+
+  return (el.type === "text" || el.type === "") ?
+    (value) => el.setAttribute("value", (el.value = value == null ? "" : value)) :
+    (el.tagName === "TEXTAREA" || el.type === "text" || el.type === "") ?
+      (value, from, to) => (
+        // we retain selection in input
+        (from = el.selectionStart),
+        (to = el.selectionEnd),
+        el.setAttribute("value", (el.value = value == null ? "" : value)),
+        from && el.setSelectionRange(from, to)
+      ) :
+      (el.type === "checkbox") ?
+        (value) => (el.checked = value, attr(el, "checked", value)) :
+        (el.type === 'radio') ? (value) => (
+          el.value === value && ((el.checked = value), attr(el, 'checked', value))
+        ) :
+          (el.type === "select-one") ?
+            (value) => {
+              for (let o of el.options)
+                o.value == value ? o.setAttribute("selected", '') : o.removeAttribute("selected");
+              el.value = value;
+            } :
+            (el.type === 'select-multiple') ? (value) => {
+              for (let o of el.options) o.removeAttribute('selected')
+              for (let v of value) el.querySelector(`[value="${v}"]`).setAttribute('selected', '')
+            } :
+              (value) => (el.value = value);
+}