sprae 12.2.4 → 12.3.0

package/signal.js

@@ -6,7 +6,7 @@ let current, depth = 0, batched;
 export const signal = (v, _s, _obs = new Set, _v = () => _s.value) => (
   _s = {
     get value() {
-      current?.deps.push(_obs.add(current));
+      current?.deps.add(_obs.add(current));
       return v
     },
     set value(val) {
@@ -15,23 +15,24 @@ export const signal = (v, _s, _obs = new Set, _v = () => _s.value) => (
       for (let sub of _obs) batched ? batched.add(sub) : sub(); // notify effects
     },
     peek() { return v },
-    toJSON: _v, then: _v, toString: _v, valueOf: _v
+    toJSON: _v, toString: _v, valueOf: _v
   }
 )
 
-export const effect = (fn, _teardown, _fx, _deps, __tmp) => (
+export const effect = (fn, _teardown, _fx, _deps) => (
   _fx = (prev) => {
-    __tmp = _teardown;
+    let tmp = _teardown;
     _teardown = null; // we null _teardown to avoid repeated call in case of recursive update
-    __tmp?.call?.();
+    tmp?.call?.();
     prev = current, current = _fx
     if (depth++ > 10) throw 'Cycle detected';
-    try { _teardown = fn(); } finally { current = prev; depth-- }
+    try { _teardown = fn() } finally { current = prev; depth-- }
   },
-  _deps = _fx.deps = [],
+  _fx.fn = fn,
+  _deps = _fx.deps = new Set(),
 
   _fx(),
-  (dep) => { _teardown?.call?.(); while (dep = _deps.pop()) dep.delete(_fx); }
+  (dep) => { _teardown?.call?.(); for (dep of _deps) dep.delete(_fx); _deps.clear() }
 )
 
 export const computed = (fn, _s = signal(), _c, _e, _v = () => _c.value) => (
@@ -41,14 +42,14 @@ export const computed = (fn, _s = signal(), _c, _e, _v = () => _c.value) => (
       return _s.value
     },
     peek: _s.peek,
-    toJSON: _v, then: _v, toString: _v, valueOf: _v
+    toJSON: _v, toString: _v, valueOf: _v
   }
 )
 
-export const batch = (fn, _first = !batched) => {
+export const batch = (fn, _first = !batched, _list) => {
   batched ??= new Set;
   try { fn(); }
-  finally { if (_first) { for (const fx of batched) fx(); batched = null } }
+  finally { if (_first) { [batched, _list] = [null, batched]; for (const fx of _list) fx(); } }
 }
 
 export const untracked = (fn, _prev, _v) => (_prev = current, current = null, _v = fn(), current = _prev, _v)

package/sprae.js

@@ -1,6 +1,8 @@
 import store from "./store.js";
-import { batch, computed, effect, signal, untracked } from './signal.js';
-import sprae, { use, directive, modifier, start, throttle, debounce, _off, _state, _on, _dispose } from './core.js';
+import { batch, computed, effect, signal, untracked } from './core.js';
+import * as signals from './signal.js';
+import sprae, { use, decorate, directive, modifier, parse, throttle, debounce, _off, _state, _on, _dispose, _add, call } from './core.js';
+import pkg from './package.json' with { type: 'json' };
 
 import _if from "./directive/if.js";
 import _else from "./directive/else.js";
@@ -12,71 +14,64 @@ import _value from "./directive/value.js";
 import _ref from "./directive/ref.js";
 import _scope from "./directive/scope.js";
 import _each from "./directive/each.js";
-import _default from "./directive/default.js";
+import _default from "./directive/_.js";
 import _spread from "./directive/spread.js";
+import _event from "./directive/event.js";
+import _seq from "./directive/sequence.js";
 
 
 Object.assign(directive, {
-  // :x="x"
-  '*': _default,
-
-  // FIXME
-  // 'on*': _on,
-
-  // :="{a,b,c}"
+  _: (el, state, expr, name) => (name.startsWith('on') ? _event : _default)(el, state, expr, name),
   '': _spread,
-
-  // :class="[a, b, c]"
   class: _class,
-
-  // :text="..."
   text: _text,
-
-  // :style="..."
   style: _style,
-
-  // :fx="..."
   fx: _fx,
-
-  // :value - 2 way binding like x-model
   value: _value,
-
-  // :ref="..."
   ref: _ref,
-
-  // :scope creates variables scope for a subtree
   scope: _scope,
-
   if: _if,
   else: _else,
-
-  // :each="v,k in src"
   each: _each
 })
 
-Object.assign(modifier, {
-  debounce: (fn,
-    _how = 250,
-    _schedule = _how === "tick" ? queueMicrotask : _how === "raf" ? requestAnimationFrame : _how === "idle" ? requestIdleCallback : ((fn) => setTimeout(fn, _how)),
-    _count = 0
-  ) =>
-    debounce(fn, _schedule),
-
-  throttle: (fn, _how = 250, _schedule = _how === "tick" ? queueMicrotask : _how === "raf" ? requestAnimationFrame : ((fn) => setTimeout(fn, _how))) => (
-    throttle(fn, _schedule)
-  ),
 
-  once: (fn, _done, _fn) => Object.assign((e) => !_done && (_done = 1, fn(e)), { once: true }),
+/**
+ * Directive initializer (with modifiers support)
+ * @type {(el: HTMLElement, name:string, value:string, state:Object) => Function}
+ * */
+const dir = (target, name, expr, state) => {
+  let [dirName, ...mods] = name.split('.'), create = directive[dirName] || directive._
 
-  // event modifiers
-  // actions
-  prevent: (fn) => (e) => (e?.preventDefault(), fn(e)),
-  stop: (fn) => (e) => (e?.stopPropagation(), fn(e)),
-  immediate: (fn) => (e) => (e?.stopImmediatePropagation(), fn(e)),
+  return () => {
+    let update = create(target, state, expr, name)
 
-  // options
-  passive: fn => (fn.passive = true, fn),
-  capture: fn => (fn.capture = true, fn),
+    if (!update?.call) return update?.[_dispose]
+
+    // throttle prevents multiple updates within one tick as well as isolates stack for each update
+    let trigger = decorate(Object.assign(throttle(() => change.value++), { target }), mods),
+      change = signal(0), // signal authorized to trigger effect: 0 = init; >0 = trigger
+      count = 0, // called effect count
+      evaluate = update.eval ?? parse(expr).bind(target),
+      _out, out = () => (_out && call(_out), _out=null) // effect trigger and invoke may happen in the same tick, so it will be effect-within-effect call - we need to store output of evaluate to return from trigger effect
+
+    state =  target[_state] ?? state
+
+    return effect(() => (
+      // if planned count is same as actual count - plan new update, else update right away
+      change.value == count ? (trigger()) : (count = change.value, _out = evaluate(state, update)),
+      out
+    ))
+  }
+}
+
+Object.assign(modifier, {
+  // timing
+  debounce: (fn, _how = 250) => debounce(fn, (_how ||= 0, (fn) => setTimeout(fn, _how))),
+  throttle: (fn, _how = 250) => throttle(fn, (_how ||= 0, (fn) => setTimeout(fn, _how))),
+  tick: (fn) => (e) => (queueMicrotask(() => fn(e))),
+  raf: (fn) => (e) => requestAnimationFrame(() => fn(e)),
+  once: (fn, _done, _fn) => (_fn = (e) => !_done && (_done = 1, fn(e)), _fn.once = true, _fn),
 
   // target
   window: fn => (fn.target = fn.target.ownerDocument.defaultView, fn),
@@ -84,14 +79,18 @@ Object.assign(modifier, {
   root: fn => (fn.target = fn.target.ownerDocument.documentElement, fn),
   body: fn => (fn.target = fn.target.ownerDocument.body, fn),
   parent: fn => (fn.target = fn.target.parentNode, fn),
-
-  // testers
   self: (fn) => (e) => (e.target === fn.target && fn(e)),
-
   outside: (fn) => (e, _target) => (
     _target = fn.target,
     !_target.contains(e.target) && e.target.isConnected && (_target.offsetWidth || _target.offsetHeight)
   ),
+
+  // events
+  prevent: (fn) => (e) => (e?.preventDefault(), fn(e)),
+  stop: (fn) => (e) => (e?.stopPropagation(), fn(e)),
+  immediate: (fn) => (e) => (e?.stopImmediatePropagation(), fn(e)),
+  passive: fn => (fn.passive = true, fn),
+  capture: fn => (fn.capture = true, fn),
 })
 
 // key testers
@@ -99,7 +98,8 @@ const keys = {
   ctrl: e => e.ctrlKey || e.key === "Control" || e.key === "Ctrl",
   shift: e => e.shiftKey || e.key === "Shift",
   alt: e => e.altKey || e.key === "Alt",
-  meta: e => e.metaKey || e.key === "Meta" || e.key === "Command",
+  meta: e => e.metaKey || e.key === "Meta",
+  cmd: e => e.metaKey || e.key === "Command",
   arrow: e => e.key.startsWith("Arrow"),
   enter: e => e.key === "Enter",
   esc: e => e.key.startsWith("Esc"),
@@ -112,23 +112,57 @@ const keys = {
 };
 
 // augment modifiers with key testers
-for (let k in keys) modifier[k] = (fn, ...params) => (e) => keys[k](e) && params.every(k => keys[k]?.(e) ?? e.key === k) && fn(e)
+for (let k in keys) modifier[k] = (fn, a, b) => (e) => keys[k](e) && (!a || keys[a]?.(e)) && (!b || keys[b]?.(e)) && fn(e)
+
 
 use({
-  compile: expr => {
-    return sprae.constructor(`with (arguments[0]) { ${expr} }`)
+  compile: expr => sprae.constructor(`with (arguments[0]) { ${expr} }`),
+  dir: (el, name, expr, state) => {
+    // sequences shortcut
+    if (name.includes('..')) return () => _seq(el, state, expr, name)[_dispose]
+    return name.split(':').reduce((prev, str) => {
+      let start = dir(el, str, expr, state)
+      return !prev ? start : (p, s) => (p = prev(), s = start(), () => { p(); s() })
+    }, null)
   },
-
-  // signals
-  signal, effect, computed, batch, untracked
+  ...signals
 })
 
+
 // expose for runtime config
 sprae.use = use
 sprae.store = store
 sprae.directive = directive
 sprae.modifier = modifier
-sprae.start = start
+sprae.version = pkg.version;
+
+
+/**
+ * Lifecycle hanger: spraes automatically any new nodes
+ */
+const start = sprae.start = (root = document.body, values) => {
+  const state = store(values)
+  sprae(root, state);
+  const mo = new MutationObserver(mutations => {
+    for (const m of mutations) {
+      for (const el of m.addedNodes) {
+        // el can be spraed or removed by subsprae (like within :each/:if)
+        if (el.nodeType === 1 && el[_state] === undefined && root.contains(el)) {
+          // even if element has no spraeable attrs, some of its children can have
+          root[_add](el)
+          // sprae(el, state, root);
+        }
+      }
+      // for (const el of m.removedNodes) el[Symbol.dispose]?.()
+    }
+  });
+  mo.observe(root, { childList: true, subtree: true });
+  return state
+}
+
+
+// version placeholder for bundler
+sprae.version = "[VI]{{inject}}[/VI]"
 
 export default sprae
 export { sprae, store, signal, effect, computed, batch, untracked, start, use }

package/store.js

@@ -43,7 +43,7 @@ export const store = (values, parent) => {
     },
 
     set: (_, k, v, _s) => {
-      // console.group('SET', k, v, signals, k in signals)
+      // console.group('SET', k, v)
       if (k in signals) return set(signals, k, v), 1
 
       // turn off sandbox to check if parents have the prop - we don't want to create new prop in global scope

package/directive/default.js

@@ -1,3 +0,0 @@
-import { attr, call } from "../core.js";
-
-export default (el, st, ex, name) => v => attr(el, name, call(v, el.getAttribute(name)))