sprae 11.0.7 → 11.1.0

package/readme.md

@@ -166,21 +166,21 @@ Run effect, not changing any attribute.
 <div :fx="id = setInterval(tick, 1000), () => clearInterval(id)" />
 ```
 
-#### `:ref="el => (...)"`
+#### `:ref="name"`, `:ref="el => (...)"`
 
-Get reference to element (instead of `this`).
+Expose element in state with `name` or get reference to element.
 
 ```html
-<!-- initialize element -->
-<textarea :ref="el => (/* onmount */, () => (/* onunmount */))" placeholder="Enter text..."></textarea>
-
-<!-- expose element in (sub)state -->
-<li :each="item in items" :with="{li:null}" :ref="el => li = el">
+<!-- expose element in state -->
+<li :each="item in items" :ref="li">
   <input :onfocus..onblur="e => (li.classList.add('editing'), e => li.classList.remove('editing'))"/>
 </li>
 
 <!-- set innerHTML -->
 <div :ref="el => el.innerHTML = '...'"></div>
+
+<!-- initialize element -->
+<textarea :ref="el => (/* onmount */, () => (/* onunmount */))" :if="show"></textarea>
 ```
 
 #### `:on<event>="handler"`, `:on<in>..on<out>="handler"`
@@ -326,7 +326,7 @@ _Sprae_ can be tailored to project needs via `sprae/core`:
 
 ```js
 // sprae.custom.js
-import sprae, { directive } from 'sprae/core'
+import sprae, { dir, parse } from 'sprae/core'
 import * as signals from '@preact/signals'
 import compile from 'subscript'
 
@@ -336,9 +336,10 @@ import 'sprae/directive/if.js'
 import 'sprae/directive/text.js'
 
 // custom directive :id="expression"
-directive.id = (el, evaluate, state) => {
-  return () => el.id = evaluate(state)
-}
+dir('id', (el, state, expr) => {
+  // ...init
+  return value => el.id = value // update
+})
 
 // configure signals
 sprae.use(signals)
@@ -368,6 +369,7 @@ Modern frontend stack is obese and unhealthy, like non-organic processed food. T
 * [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`), tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223) and not care about size/performance.
 
 _Sprae_ holds open & minimalistic philosophy:
+
 * Slim `:` API, _signals_ for reactivity.
 * Pluggable directives & configurable internals.
 * Small, safe & performant.

package/signal.js

@@ -1,5 +1,5 @@
 // ulive copy, stable minimal implementation
-let current, batched;
+let current;
 
 export let signal = (v, s, obs = new Set) => (
   s = {
@@ -10,7 +10,7 @@ export let signal = (v, s, obs = new Set) => (
     set value(val) {
       if (val === v) return
       v = val;
-      for (let sub of obs) batched ? batched.add(sub) : sub(); // notify effects
+      for (let sub of obs) sub(); // notify effects
     },
     peek() { return v },
   },
@@ -39,19 +39,8 @@ export let signal = (v, s, obs = new Set) => (
     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);
+  batch = fn => fn(),
+  untracked = batch
 
 // signals adapter - allows switching signals implementation and not depend on core
 
@@ -59,6 +48,6 @@ export function use(s) {
   signal = s.signal
   effect = s.effect
   computed = s.computed
-  batch = s.batch || (fn => fn())
+  batch = s.batch || batch
   untracked = s.untracked || batch
 }

package/store.js

@@ -1,7 +1,7 @@
 // signals-based proxy
 import { signal, computed, batch, untracked } from './signal.js'
 
-export const _signals = Symbol('signals'), _change = Symbol('length');
+export const _signals = Symbol('signals'), _change = Symbol('change');
 
 // object store is not lazy
 export default function store(values, parent) {
@@ -127,13 +127,13 @@ function set(signals, key, v) {
   else if (Array.isArray(v) && Array.isArray(s.peek())) {
     const cur = s.peek()
     // if we update plain array (stored in signal) - take over value instead
-    if (cur[_change]) untracked(() => {
+    if (cur[_change]) {
       batch(() => {
         let i = 0, l = v.length;
         for (; i < l; i++) cur[i] = v[i]
         cur.length = l // forces deleting tail signals
       })
-    })
+    }
     else {
       s.value = v
     }