sprae 10.10.6 → 10.11.2

package/readme.md

@@ -105,13 +105,13 @@ Set style value.
 
 ```html
 <!-- extends style -->
-<div style="foo: bar" :style="'baz-baz: qux'">
+<div style="foo: bar" :style="'bar-baz: qux'">
 
 <!-- object -->
-<div :style="{bazBaz: 'qux'}"></div>
+<div :style="{barBaz: 'qux'}"></div>
 
 <!-- CSS variable -->
-<div :style="{'--baz-baz': qux}"></div>
+<div :style="{'--bar-baz': qux}"></div>
 ```
 
 #### `:value="value"`
@@ -163,8 +163,8 @@ Expose element with `name`.
 <textarea :ref="text" placeholder="Enter text..."></textarea>
 
 <!-- iterable items -->
-<li :each="item in items" :ref="item">
-  <input :onfocus..onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
+<li :each="item in items" :ref="li">
+  <input :onfocus..onblur="e => (li.classList.add('editing'), e => li.classList.remove('editing'))"/>
 </li>
 ```
 
@@ -176,7 +176,7 @@ Run effect, not changing any attribute.
 <div :fx="a.value ? foo() : bar()" />
 
 <!-- cleanup function -->
-<div :fx="id = setInterval(tick, interval), () => clearInterval(tick)" />
+<div :fx="id = setInterval(tick, 1000), () => clearInterval(id)" />
 ```
 
 #### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
@@ -304,7 +304,7 @@ name.value = 'Dolly';
 
 Provider | Size | Feature
 :---|:---|:---
-[`ulive`](https://ghub.io/ulive) (default) | 350b | Minimal implementation, basic performance, good for small states.
+[`ulive`](https://ghub.io/ulive) | 350b | Minimal implementation, basic performance, good for small states.
 [`@webreflection/signal`](https://ghub.io/@webreflection/signal) | 531b | Class-based, better performance, good for small-medium states.
 [`usignal`](https://ghub.io/usignal) | 850b | Class-based with optimizations, good for medium states.
 [`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states, industry standard.
@@ -373,8 +373,10 @@ sprae.use({ compile })
 * Properties prefixed with `_` are untracked: `let state = sprae(el, {_x:2}); state._x++; // no effect`.
 * To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`.
 * State getters/setters work as computed effects, eg. `sprae(el, { x:1, get x2(){ return this.x * 2} })`.
-* `this` keyword is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`.
-* Async/await is not supported in attributes, it's a strong indicator you need to put these methods into state.
+* `this` is not used, to get access to current element use `<input :ref="el" :text="el.value"/>`.
+* `event` is not used, `:on*` attributes expect a function with event object as first argument `:onevt="event => handle()"`, see [#46](https://github.com/dy/sprae/issues/46).
+* `key` is not used, `:each` uses direct list mapping instead of dom diffing.
+* `await` is not supported in attributes, it’s a strong indicator you need to put these methods into state.
 
 ## Justification
 

package/signal.js

@@ -1,5 +1,59 @@
+// ulive copy, stable minimal implementation
+let current, batched;
+
+export let signal = (v, s, obs = new Set) => (
+  s = {
+    get value() {
+      current?.deps.push(obs.add(current));
+      return v
+    },
+    set value(val) {
+      if (val === v) return
+      v = val;
+      for (let sub of obs) batched ? batched.add(sub) : sub(); // notify effects
+    },
+    peek() { return v },
+  },
+  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 = [],
+
+    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
+    },
+    c.toJSON = c.then = c.toString = c.valueOf = () => c.value,
+    c
+  ),
+  batch = (fn) => {
+    let fxs = batched;
+    if (!fxs) batched = new Set;
+    try { fn(); }
+    finally {
+      if (!fxs) {
+        fxs = batched;
+        batched = null;
+        for (const fx of fxs) fx();
+      }
+    }
+  },
+  untracked = (fn, prev, v) => (prev = current, current = null, v = fn(), current = prev, v);
+
 // signals adapter - allows switching signals implementation and not depend on core
-export let signal, effect, untracked, batch, computed;
 
 export function use(s) {
   signal = s.signal

package/sprae.js

@@ -1,7 +1,5 @@
 import sprae from './core.js'
 
-import * as signals from 'ulive'
-
 // default directives
 import './directive/if.js'
 import './directive/each.js'
@@ -15,9 +13,6 @@ import './directive/value.js'
 import './directive/fx.js'
 import './directive/default.js'
 
-// default signals
-sprae.use(signals)
-
 // default compiler (indirect new Function to avoid detector)
 sprae.use({ compile: expr => sprae.constructor(`with (arguments[0]) { return ${expr} };`) })