sprae 11.6.0 → 12.0.1

package/signal.js

@@ -1,53 +1,54 @@
-// ulive copy, stable minimal implementation
-let current;
+// preact-signals minimal implementation
+let current, depth = 0, batched;
 
-export let signal = (v, s, obs = new Set) => (
-  s = {
+// default signals impl
+
+export const signal = (v, _s, _obs = new Set, _v = () => _s.value) => (
+  _s = {
     get value() {
-      current?.deps.push(obs.add(current));
+      current?.deps.push(_obs.add(current));
       return v
     },
     set value(val) {
       if (val === v) return
       v = val;
-      for (let sub of obs) sub(); // notify effects
+      for (let sub of _obs) batched ? batched.add(sub) : sub(); // notify effects
     },
     peek() { return v },
+    toJSON: _v, then: _v, toString: _v, valueOf: _v
+  }
+)
+
+export const effect = (fn, _teardown, _fx, _deps, __tmp) => (
+  _fx = (prev) => {
+    __tmp = _teardown;
+    _teardown = null; // we null _teardown to avoid repeated call in case of recursive update
+    __tmp?.call?.();
+    prev = current, current = _fx
+    if (depth++ > 10) throw 'Cycle detected';
+    try { _teardown = fn(); } finally { current = prev; depth-- }
   },
-  s.toJSON = s.then = s.toString = s.valueOf = () => s.value,
-  s
-),
-  effect = (fn, teardown, fx, deps) => (
-    fx = (prev) => {
-      teardown?.call?.();
-      prev = current, current = fx;
-      try { teardown = fn(); } finally { current = prev; }
-    },
-    deps = fx.deps = [],
+  _deps = _fx.deps = [],
 
-    fx(),
-    (dep) => { teardown?.call?.(); while (dep = deps.pop()) dep.delete(fx); }
-  ),
-  computed = (fn, s = signal(), c, e) => (
-    c = {
-      get value() {
-        e ||= effect(() => s.value = fn());
-        return s.value
-      },
-      peek: s.peek
+  _fx(),
+  (dep) => { _teardown?.call?.(); while (dep = _deps.pop()) dep.delete(_fx); }
+)
+
+export const computed = (fn, _s = signal(), _c, _e, _v = () => _c.value) => (
+  _c = {
+    get value() {
+      _e ||= effect(() => _s.value = fn());
+      return _s.value
     },
-    c.toJSON = c.then = c.toString = c.valueOf = () => c.value,
-    c
-  ),
-  batch = fn => fn(),
-  untracked = batch,
-  // untracked = (fn, prev, v) => (prev = current, current = null, v = fn(), current = prev, v),
+    peek: _s.peek,
+    toJSON: _v, then: _v, toString: _v, valueOf: _v
+  }
+)
+
+export const batch = (fn, _first = !batched) => {
+  batched ??= new Set;
+  try { fn(); }
+  finally { if (_first) { for (const fx of batched) fx(); batched = null } }
+}
 
-  // signals adapter - allows switching signals implementation and not depend on core
-  use = (s) => (
-    signal = s.signal,
-    effect = s.effect,
-    computed = s.computed,
-    batch = s.batch || batch,
-    untracked = s.untracked || untracked
-  )
+export const untracked = (fn, _prev, _v) => (_prev = current, current = null, _v = fn(), current = _prev, _v)

package/sprae.js

@@ -1,20 +1,129 @@
-import sprae from './core.js'
-
-// default directives
-import './directive/if.js'
-import './directive/each.js'
-import './directive/ref.js'
-import './directive/with.js'
-import './directive/text.js'
-import './directive/class.js'
-import './directive/style.js'
-import './directive/value.js'
-import './directive/fx.js'
-import './directive/default.js'
-import './directive/aria.js'
-import './directive/data.js'
-
-// default compiler (indirect new Function to avoid detector)
-sprae.use({ compile: expr => sprae.constructor(`with (arguments[0]) { return ${expr} };`) })
+import store from "./store.js";
+import { batch, computed, effect, signal, untracked } from './signal.js';
+import sprae, { use, directive, modifier, start, throttle, debounce, _add, _off, _state, _on, _dispose } from './core.js';
+
+import _if from "./directive/if.js";
+import _else from "./directive/else.js";
+import _text from "./directive/text.js";
+import _class from "./directive/class.js";
+import _style from "./directive/style.js";
+import _fx from "./directive/fx.js";
+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 _spread from "./directive/spread.js";
+
+
+Object.assign(directive, {
+  // :x="x"
+  '*': _default,
+
+  // :="{a,b,c}"
+  '': _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 }),
+
+  // event modifiers
+  // actions
+  prevent: (fn) => (e) => (e?.preventDefault(), fn(e)),
+  stop: (fn) => (e) => (e?.stopPropagation(), fn(e)),
+  immediate: (fn) => (e) => (e?.stopImmediatePropagation(), fn(e)),
+
+  // options
+  passive: fn => (fn.passive = true, fn),
+  capture: fn => (fn.capture = true, fn),
+
+  // target
+  window: fn => (fn.target = window, fn),
+  document: fn => (fn.target = document, fn),
+  parent: fn => (fn.target = fn.target.parentNode, fn),
+
+  // test
+  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)
+  ),
+})
+
+// key testers
+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",
+  arrow: e => e.key.startsWith("Arrow"),
+  enter: e => e.key === "Enter",
+  esc: e => e.key.startsWith("Esc"),
+  tab: e => e.key === "Tab",
+  space: e => e.key === " " || e.key === "Space" || e.key === " ",
+  delete: e => e.key === "Delete" || e.key === "Backspace",
+  digit: e => /^\d$/.test(e.key),
+  letter: e => /^\p{L}$/gu.test(e.key),
+  char: e => /^\S$/.test(e.key),
+};
+
+// 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)
+
+use({
+  compile: expr => {
+    return sprae.constructor(`with (arguments[0]) { ${expr} }`)
+  },
+
+  // signals
+  signal, effect, computed, batch, untracked
+})
+
+// expose for runtime config
+sprae.use = use
+sprae.store = store
+sprae.directive = directive
+sprae.modifier = modifier
+sprae.start = start
 
 export default sprae
+export { sprae, store, signal, effect, computed, batch, untracked, start, use }

package/store.js

@@ -1,139 +1,152 @@
 // signals-based proxy
-import { signal, computed, batch } from './signal.js'
-import { parse } from './core.js';
+import { signal, computed, batch, untracked } from './core.js'
 
+
+// _signals allows both storing signals and checking instance, which would be difficult with WeakMap
 export const _signals = Symbol('signals'),
-    _change = Symbol('change'),
-    _stash = '__',
-
-  // object store is not lazy
-  store = (values, parent) => {
-    if (!values) return values
-
-    // ignore existing state as argument or globals
-    if (values[_signals] || values[Symbol.toStringTag]) return values;
-
-    // non-objects: for array redirect to list
-    if (values.constructor !== Object) return Array.isArray(values) ? list(values) : values
-
-    // we must inherit signals to allow dynamic extend of parent state
-    let signals = Object.create(parent?.[_signals] || {}),
-    _len = signal(Object.keys(values).length),
-    stash
-
-      // proxy conducts prop access to signals
-    let state = new Proxy(signals, {
-        get: (_, k) => k === _change ? _len : k === _signals ? signals : k === _stash ? stash : k in signals ? signals[k]?.valueOf() : globalThis[k],
-        set: (_, k, v, s) => k === _stash ? (stash = v, 1) : (s = k in signals, set(signals, k, v), s || ++_len.value), // bump length for new signal
-        deleteProperty: (_, k) => (signals[k] && (signals[k][Symbol.dispose]?.(), delete signals[k], _len.value--), 1),
-        // subscribe to length when object is spread
-        ownKeys: () => (_len.value, Reflect.ownKeys(signals)),
-        has: _ => true // sandbox prevents writing to global
-      }),
+  _change = Symbol('change'),
+  _set = Symbol('set')
+
+// object store is not lazy
+// parent defines parent scope or sandbox
+export const store = (values, parent = globalThis) => {
+  if (!values) return values
+
+  // ignore globals
+  if (values[Symbol.toStringTag]) return values;
+
+  // bypass existing store
+  if (values[_signals]) return values
+
+  // non-objects: for array redirect to list
+  if (values.constructor !== Object) return Array.isArray(values) ? list(values) : values
+
+  // _change stores total number of keys to track new props
+  // NOTE: be careful
+  let keyCount = Object.keys(values).length,
+      signals = {  }
+
+  // proxy conducts prop access to signals
+  let state = new Proxy(Object.assign(signals, {[_change]: signal(keyCount), [_signals]: signals}), {
+    get: (_, k) => (k in signals ? (signals[k] ? signals[k].valueOf() : signals[k]) : parent[k]),
+    set: (_, k, v, _s) => (k in signals ? set(signals, k, v) : (create(signals, k, v), signals[_change].value = ++keyCount), 1), // bump length for new signal
+    // FIXME: try to avild calling Symbol.dispose here
+    deleteProperty: (_, k) => (k in signals && (k[0] != '_' && signals[k]?.[Symbol.dispose]?.(), delete signals[k], signals[_change].value = --keyCount), 1),
+    // subscribe to length when object is spread
+    ownKeys: () => (signals[_change].value, Reflect.ownKeys(signals)),
+    has: _ => 1 // sandbox prevents writing to global
+  }),
+
+    // init signals for values
+    descs = Object.getOwnPropertyDescriptors(values)
+
+  for (let k in values) {
+    // getter turns into computed
+    if (descs[k]?.get)
+      // stash setter
+      (signals[k] = computed(descs[k].get.bind(state)))[_set] = descs[k].set?.bind(state);
+
+    // init blank signal - make sure we don't take prototype one
+    else create(signals, k, values[k])
+  }
 
-      // init signals for values
-      descs = Object.getOwnPropertyDescriptors(values)
+  return state
+}
 
-    for (let k in values) {
-      // getter turns into computed
-      if (descs[k]?.get)
-        // stash setter
-        (signals[k] = computed(descs[k].get.bind(state)))._set = descs[k].set?.bind(state);
+const mut = ['push', 'pop', 'shift', 'unshift', 'splice']
 
-      else
-        // init blank signal - make sure we don't take prototype one
-        signals[k] = null, set(signals, k, values[k]);
-    }
+// array store - signals are lazy since arrays can be very large & expensive
+const list = (values, parent = globalThis) => {
 
-    return state
-  },
+  // gotta fill with null since proto methods like .reduce may fail
+  let signals = Array(values.length).fill(null),
 
-  // array store - signals are lazy since arrays can be very large & expensive
-  list = values => {
-    // track last accessed property to find out if .length was directly accessed from expression or via .push/etc method
-    let lastProp,
+    // if .length was accessed from mutator (.push/etc) method
+    isMut = false,
 
-      // .length signal is stored separately, since it cannot be replaced on array
-      _len = signal(values.length),
+    // since array mutator methods read .length internally only once, we disable it on the moment of call, allowing rest of operations to be reactive
+    mut = fn => function () {isMut = true; return fn.apply(this, arguments); },
 
-      // gotta fill with null since proto methods like .reduce may fail
-      signals = Array(values.length).fill(),
+    length = signal(values.length),
 
-      // proxy conducts prop access to signals
-      state = new Proxy(signals, {
+    // proxy conducts prop access to signals
+    state = new Proxy(
+      Object.assign(signals, {
+        [_change]: length,
+        [_signals]: signals,
+        push: mut(signals.push),
+        pop: mut(signals.pop),
+        shift: mut(signals.shift),
+        unshift: mut(signals.unshift),
+        splice: mut(signals.splice),
+      }),
+      {
         get(_, k) {
-          // covers Symbol.isConcatSpreadable etc.
-          if (typeof k === 'symbol') return k === _change ? _len : k === _signals ? signals : signals[k]
+          // console.log('GET', k, isMut)
 
-          // if .length is read within .push/etc - peek signal to avoid recursive subscription
-          if (k === 'length') return mut.includes(lastProp) ? _len.peek() : _len.value;
+          // if .length is read within mutators - peek signal to avoid recursive subscription
+          // we need to ignore it only once and keep for the rest of the mutator call
+          if (k === 'length') return isMut ? (isMut = false, signals.length) : length.value;
 
-          lastProp = k;
+          // non-numeric
+          if (typeof k === 'symbol' || isNaN(k)) return signals[k]?.valueOf() ?? parent[k];
 
           // create signal (lazy)
           // NOTE: if you decide to unlazy values, think about large arrays - init upfront can be costly
-          return (signals[k] ?? (signals[k] = signal(store(values[k])))).valueOf()
+          return (signals[k] ??= signal(store(values[k]))).valueOf()
         },
 
         set(_, k, v) {
+          // console.log('SET', k, v)
+
           // .length
           if (k === 'length') {
             // force cleaning up tail
             for (let i = v; i < signals.length; i++) delete state[i]
             // .length = N directly
-            _len.value = signals.length = v;
+            length.value = signals.length = v;
           }
-          else {
-            set(signals, k, v)
 
-            // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item
-            if (k >= _len.peek()) _len.value = signals.length = +k + 1
-          }
+          // force changing length, if eg. a=[]; a[1]=1 - need to come after setting the item
+          else if (k >= signals.length) create(signals, k, v), state.length = +k + 1
+
+          // existing signal
+          else signals[k] ? set(signals, k, v) : create(signals, k, v)
 
           return 1
         },
 
+        // dispose notifies any signal deps, like :each
         deleteProperty: (_, k) => (signals[k]?.[Symbol.dispose]?.(), delete signals[k], 1),
       })
 
-    return state
-  }
+  return state
+}
 
-// length changing methods
-const mut = ['push', 'pop', 'shift', 'unshift', 'splice']
+// create signal value, skip untracked
+const create = (signals, k, v) => (signals[k] = k[0] == '_' || v?.peek ? v : signal(store(v)))
 
 // set/update signal value
-const set = (signals, k, v) => {
-  let s = signals[k], cur
-
-  // untracked
-  if (k[0] === '_') signals[k] = v
-  // new property. preserve signal value as is
-  else if (!s) signals[k] = s = v?.peek ? v : signal(store(v))
+const set = (signals, k, v, _s, _v) => {
   // skip unchanged (although can be handled by last condition - we skip a few checks this way)
-  else if (v === (cur = s.peek()));
-  // stashed _set for value with getter/setter
-  else if (s._set) s._set(v)
-  // patch array
-  else if (Array.isArray(v) && Array.isArray(cur)) {
-    // if we update plain array (stored in signal) - take over value instead
-    if (cur[_change]) batch(() => {
-      for (let i = 0; i < v.length; i++) cur[i] = v[i]
-      cur.length = v.length // forces deleting tail signals
-    })
-    else s.value = v
-  }
-  // .x = y
-  else s.value = store(v)
+  return k[0] === '_' ? (signals[k] = v) :
+    (v !== (_v = (_s = signals[k]).peek())) && (
+      // stashed _set for value with getter/setter
+      _s[_set] ? _s[_set](v) :
+        // patch array
+        Array.isArray(v) && Array.isArray(_v) ?
+          // if we update plain array (stored in signal) - take over value instead
+          // since input value can be store, we have to make sure we don't subscribe to its length or values
+          // FIXME: generalize to objects
+          _change in _v ? untracked(() => batch(() => {
+            for (let i = 0; i < v.length; i++) _v[i] = v[i]
+            _v.length = v.length // forces deleting tail signals
+          })) : _s.value = v :
+          // .x = y
+          (_s.value = store(v))
+    )
 }
 
-// create expression setter, reflecting value back to state
-export const setter = (expr, set = parse(`${expr}=${_stash}`)) => (
-  (state, value) => (
-    state[_stash] = value, // save value to stash
-    set(state)
-  )
-)
 
 // make sure state contains first element of path, eg. `a` from `a.b[c]`
 // NOTE: we don't need since we force proxy sandbox

package/directive/aria.js

@@ -1,6 +0,0 @@
-import { dir } from "../core.js";
-import { attr, dashcase } from './default.js'
-
-dir('aria', (el) => value => {
-  for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '')
-})

package/directive/data.js

@@ -1,3 +0,0 @@
-import { dir } from "../core.js";
-
-dir('data', el => value => {for (let key in value) el.dataset[key] = value[key];})

package/directive/with.js

@@ -1,12 +0,0 @@
-import sprae, { dir } from "../core.js";
-import { untracked } from "../signal.js";
-import store, { _signals } from '../store.js';
-
-dir('with', (el, rootState, state) => (
-  state=null,
-  values => !state ?
-    // NOTE: we force untracked because internal directives can eval outside of effects (like ref etc) that would cause unwanted subscribe
-    // FIXME: since this can be async effect, we should create & sprae it in advance.
-    untracked(() => sprae(el, state = store(values, rootState))) :
-    sprae(el, values)
-))