sprae 2.6.0 → 2.7.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",

package/readme.md

@@ -261,7 +261,21 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 
 ## Hints
 
-**1.** Data supports signal values, which can be an alternative way to control template state:
+**1.** To batch-update state (avoid multiple DOM changes), rerun sprae with new state:
+
+```html
+<li :each="item, id in items" :key="id" :text="item"></li>
+
+<script type="module">
+  sprae(el, {items: ['foo', 'bar', 'baz']})
+  // <li>foo</li><li>bar</li><li>baz</li>
+
+  sprae(el, {items: ['foo', 'qux']})
+  // <li>foo</li><li>qux</li>
+</script>
+```
+
+**2.** Data supports signal values, which can be an alternative way to control template state:
 
 ```html
 <div id="done" :text="loading ? 'loading' : result">...</div>
@@ -283,7 +297,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 </script>
 ```
 
-**2.** Data recognizes reactive values as inputs as well: _Promise_ / _Thenable_, _Observable_ / _Subscribable_, _AsyncIterable_ (etc., see [sube](https://github.com/dy/sube/blob/main/README.md)). This way, for example, _rxjs_ can be connected to template directly.
+**3.** Data recognizes reactive values as inputs as well: _Promise_ / _Thenable_, _Observable_ / _Subscribable_, _AsyncIterable_ (etc., see [sube](https://github.com/dy/sube/blob/main/README.md)). This way, for example, _rxjs_ can be connected to template directly.
 
 ```html
 <div :text="clicks">#</div> clicks
@@ -297,7 +311,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 </script>
 ```
 
-**3.** Getters turn into computed values automatically:
+**4.** Getters turn into computed values automatically (setters remain as is):
 
 ```html
 <div id="x-plus-y">

package/sprae.js

@@ -6,23 +6,23 @@ function t() {
   if (!(n > 1)) {
     var i2, t2 = false;
     while (void 0 !== r) {
-      var h = r;
+      var h2 = r;
       r = void 0;
       s++;
-      while (void 0 !== h) {
-        var o2 = h.o;
-        h.o = void 0;
-        h.f &= -3;
-        if (!(8 & h.f) && d(h))
+      while (void 0 !== h2) {
+        var o2 = h2.o;
+        h2.o = void 0;
+        h2.f &= -3;
+        if (!(8 & h2.f) && d(h2))
           try {
-            h.c();
-          } catch (h2) {
+            h2.c();
+          } catch (h3) {
             if (!t2) {
-              i2 = h2;
+              i2 = h3;
               t2 = true;
             }
           }
-        h = o2;
+        h2 = o2;
       }
     }
     s = 0;
@@ -32,6 +32,16 @@ function t() {
   } else
     n--;
 }
+function h(i2) {
+  if (n > 0)
+    return i2();
+  n++;
+  try {
+    return i2();
+  } finally {
+    t();
+  }
+}
 var o = void 0;
 var r = void 0;
 var n = 0;
@@ -79,25 +89,25 @@ e.prototype.S = function(i2) {
   }
 };
 e.prototype.U = function(i2) {
-  var t2 = i2.e, h = i2.x;
+  var t2 = i2.e, h2 = i2.x;
   if (void 0 !== t2) {
-    t2.x = h;
+    t2.x = h2;
     i2.e = void 0;
   }
-  if (void 0 !== h) {
-    h.e = t2;
+  if (void 0 !== h2) {
+    h2.e = t2;
     i2.x = void 0;
   }
   if (i2 === this.t)
-    this.t = h;
+    this.t = h2;
 };
 e.prototype.subscribe = function(i2) {
   var t2 = this;
   return b(function() {
-    var h = t2.value, o2 = 32 & this.f;
+    var h2 = t2.value, o2 = 32 & this.f;
     this.f &= -33;
     try {
-      i2(h);
+      i2(h2);
     } finally {
       this.f |= o2;
     }
@@ -117,11 +127,11 @@ Object.defineProperty(e.prototype, "value", { get: function() {
   if (void 0 !== i2)
     i2.i = this.i;
   return this.v;
-}, set: function(h) {
-  if (h !== this.v) {
+}, set: function(h2) {
+  if (h2 !== this.v) {
     if (s > 100)
       i();
-    this.v = h;
+    this.v = h2;
     this.i++;
     f++;
     n++;
@@ -144,33 +154,33 @@ function d(i2) {
 }
 function c(i2) {
   for (var t2 = i2.s; void 0 !== t2; t2 = t2.n) {
-    var h = t2.S.n;
-    if (void 0 !== h)
-      t2.r = h;
+    var h2 = t2.S.n;
+    if (void 0 !== h2)
+      t2.r = h2;
     t2.S.n = t2;
     t2.i = -1;
   }
 }
 function a(i2) {
-  var t2 = i2.s, h = void 0;
+  var t2 = i2.s, h2 = void 0;
   while (void 0 !== t2) {
     var o2 = t2.n;
     if (-1 === t2.i) {
       t2.S.U(t2);
       t2.n = void 0;
     } else {
-      if (void 0 !== h)
-        h.p = t2;
+      if (void 0 !== h2)
+        h2.p = t2;
       t2.p = void 0;
-      t2.n = h;
-      h = t2;
+      t2.n = h2;
+      h2 = t2;
     }
     t2.S.n = t2.r;
     if (void 0 !== t2.r)
       t2.r = void 0;
     t2 = o2;
   }
-  i2.s = h;
+  i2.s = h2;
 }
 function l(i2) {
   e.call(this, void 0);
@@ -259,14 +269,14 @@ function w(i2) {
   return new l(i2);
 }
 function y(i2) {
-  var h = i2.u;
+  var h2 = i2.u;
   i2.u = void 0;
-  if ("function" == typeof h) {
+  if ("function" == typeof h2) {
     n++;
     var r2 = o;
     o = void 0;
     try {
-      h();
+      h2();
     } catch (t2) {
       i2.f &= -2;
       i2.f |= 8;
@@ -474,39 +484,13 @@ var primitive_pool_default = (key) => {
 };
 
 // src/directives.js
-var directives = {};
-var directives_default = (el, expr, values, name) => {
-  let evt = name.startsWith("on") && name.slice(2);
-  let evaluate = parseExpr(el, expr, ":" + name);
-  if (evaluate)
-    return evt ? (state) => {
-      let value = evaluate(state);
-      if (value) {
-        addListener(el, evt, value);
-        return () => removeListener(el, evt, value);
-      }
-    } : (state) => attr(el, name, evaluate(state));
-};
-var attr = (el, name, v2) => {
-  if (v2 == null || v2 === false)
-    el.removeAttribute(name);
-  else
-    el.setAttribute(name, v2 === true ? "" : typeof v2 === "number" || typeof v2 === "string" ? v2 : "");
-};
-directives[""] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":");
-  if (evaluate)
-    return (state) => {
-      let value = evaluate(state);
-      for (let key in value)
-        attr(el, dashcase(key), value[key]);
-    };
-};
-directives["with"] = (el, expr, rootState) => {
+var primary = {};
+var secondary = {};
+primary["with"] = (el, expr, rootState) => {
   let evaluate = parseExpr(el, expr, "with");
   sprae(el, signalStruct(evaluate(rootState), rootState));
 };
-directives["if"] = (el, expr) => {
+primary["if"] = (el, expr) => {
   let holder = document.createTextNode(""), clauses = [parseExpr(el, expr, ":if")], els = [el], cur = el;
   while (cur = el.nextElementSibling) {
     if (cur.hasAttribute(":else")) {
@@ -533,31 +517,14 @@ directives["if"] = (el, expr) => {
   };
 };
 var _each = Symbol(":each");
-var _ref = Symbol(":ref");
-var _key = Symbol(":key");
-directives["ref"] = (el, expr, state) => {
-  if (el.hasAttribute(":each")) {
-    el[_ref] = expr;
-    return;
-  }
-  ;
-  state[expr] = el;
-};
-directives["key"] = (el, expr, state) => {
-  if (el.hasAttribute(":each")) {
-    el[_key] = expr;
-    return;
-  }
-  ;
-};
-directives["each"] = (tpl, expr) => {
+primary["each"] = (tpl, expr) => {
   let each = parseForExpression(expr);
   if (!each)
     return exprError(new Error(), tpl, expr);
   const holder = tpl[_each] = document.createTextNode("");
   tpl.replaceWith(holder);
-  const evaluate = parseExpr(tpl, each.items, ":each");
-  const keyExpr = tpl[_key] || tpl.getAttribute(":key");
+  const evaluate = parseExpr(tpl, each[2], ":each");
+  const keyExpr = tpl.getAttribute(":key");
   const itemKey = keyExpr ? parseExpr(null, keyExpr) : null;
   tpl.removeAttribute(":key");
   const scopes = /* @__PURE__ */ new WeakMap();
@@ -577,7 +544,7 @@ directives["each"] = (tpl, expr) => {
       exprError(Error("Bad list value"), tpl, expr, ":each", list);
     let newEls = [], elScopes = [];
     for (let [idx, item] of list) {
-      let el, scope, key = itemKey?.({ [each.item]: item });
+      let el, scope, key = itemKey?.({ [each[0]]: item, [each[1]]: idx });
       if (isPrimitive(key))
         key = primitive_pool_default(key);
       if (key == null)
@@ -586,15 +553,11 @@ directives["each"] = (tpl, expr) => {
         (el = itemEls.get(key)) || itemEls.set(key, el = tpl.cloneNode(true));
       newEls.push(el);
       if (key == null || !(scope = scopes.get(key))) {
-        scope = Object.create(state);
-        scope[each.item] = item;
-        if (each.index)
-          scope[each.index] = idx;
-        if (tpl[_ref])
-          scope[tpl[_ref]] = el;
+        scope = signalStruct({ [each[0]]: item, [each[1]]: idx }, state);
         if (key != null)
           scopes.set(key, scope);
-      }
+      } else
+        scope[each[0]] = item;
       elScopes.push(scope);
     }
     swap_inflate_default(holder.parentNode, curEls, newEls, holder);
@@ -611,24 +574,26 @@ function parseForExpression(expression) {
   let inMatch = expression.match(forAliasRE);
   if (!inMatch)
     return;
-  let res = {};
-  res.items = inMatch[2].trim();
+  let items = inMatch[2].trim();
   let item = inMatch[1].replace(stripParensRE, "").trim();
   let iteratorMatch = item.match(forIteratorRE);
-  if (iteratorMatch) {
-    res.item = item.replace(forIteratorRE, "").trim();
-    res.index = iteratorMatch[1].trim();
-  } else {
-    res.item = item;
-  }
-  return res;
+  if (iteratorMatch)
+    return [
+      item.replace(forIteratorRE, "").trim(),
+      iteratorMatch[1].trim(),
+      items
+    ];
+  return [item, "", items];
 }
-directives["id"] = (el, expr) => {
+secondary["ref"] = (el, expr, state) => {
+  state[expr] = el;
+};
+secondary["id"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":id");
   const update = (v2) => el.id = v2 || v2 === 0 ? v2 : "";
   return (state) => update(evaluate(state));
 };
-directives["class"] = (el, expr) => {
+secondary["class"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":class");
   let initClassName = el.className;
   return (state) => {
@@ -636,7 +601,7 @@ directives["class"] = (el, expr) => {
     el.className = initClassName + typeof v2 === "string" ? v2 : (Array.isArray(v2) ? v2 : Object.entries(v2).map(([k, v3]) => v3 ? k : "")).filter(Boolean).join(" ");
   };
 };
-directives["style"] = (el, expr) => {
+secondary["style"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":style");
   let initStyle = el.getAttribute("style") || "";
   if (!initStyle.endsWith(";"))
@@ -650,14 +615,14 @@ directives["style"] = (el, expr) => {
         el.style[k] = v2[k];
   };
 };
-directives["text"] = (el, expr) => {
+secondary["text"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":text");
   return (state) => {
     let value = evaluate(state);
     el.textContent = value == null ? "" : value;
   };
 };
-directives["value"] = (el, expr) => {
+secondary["value"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":value");
   let from, to;
   let 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 = el.selectionStart, to = el.selectionEnd, el.setAttribute("value", el.value = value == null ? "" : value), from && el.setSelectionRange(from, to)) : el.type === "checkbox" ? (value) => (el.value = value ? "on" : "", attr(el, "checked", value)) : el.type === "select-one" ? (value) => {
@@ -668,7 +633,7 @@ directives["value"] = (el, expr) => {
   } : (value) => el.value = value;
   return (state) => update(evaluate(state));
 };
-directives["on"] = (el, expr) => {
+secondary["on"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":on");
   return (state) => {
     let listeners = evaluate(state);
@@ -707,7 +672,7 @@ var removeListener = (el, evt, fn) => {
     fn[_stop] = true;
   el.removeEventListener(evt, fn);
 };
-directives["data"] = (el, expr) => {
+secondary["data"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":data");
   return (state) => {
     let value = evaluate(state);
@@ -715,7 +680,7 @@ directives["data"] = (el, expr) => {
       el.dataset[key] = value[key];
   };
 };
-directives["aria"] = (el, expr) => {
+secondary["aria"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":aria");
   const update = (value) => {
     for (let key in value)
@@ -723,6 +688,33 @@ directives["aria"] = (el, expr) => {
   };
   return (state) => update(evaluate(state));
 };
+secondary[""] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ":");
+  if (evaluate)
+    return (state) => {
+      let value = evaluate(state);
+      for (let key in value)
+        attr(el, dashcase(key), value[key]);
+    };
+};
+var directives_default = (el, expr, values, name) => {
+  let evt = name.startsWith("on") && name.slice(2);
+  let evaluate = parseExpr(el, expr, ":" + name);
+  if (evaluate)
+    return evt ? (state) => {
+      let value = evaluate(state);
+      if (value) {
+        addListener(el, evt, value);
+        return () => removeListener(el, evt, value);
+      }
+    } : (state) => attr(el, name, evaluate(state));
+};
+var attr = (el, name, v2) => {
+  if (v2 == null || v2 === false)
+    el.removeAttribute(name);
+  else
+    el.setAttribute(name, v2 === true ? "" : typeof v2 === "number" || typeof v2 === "string" ? v2 : "");
+};
 var evaluatorMemo = {};
 function parseExpr(el, expression, dir) {
   let evaluate = evaluatorMemo[expression];
@@ -767,11 +759,26 @@ var memo = /* @__PURE__ */ new WeakMap();
 function sprae(container, values) {
   if (!container.children)
     return;
-  if (memo.has(container))
-    return memo.get(container);
+  if (memo.has(container)) {
+    let state2 = memo.get(container);
+    h(() => Object.assign(state2, values));
+    return state2;
+  }
   const state = signalStruct(values || {});
   const updates = [];
   const init = (el, parent = el.parentNode) => {
+    for (let name in primary) {
+      let attrName = ":" + name;
+      if (el.hasAttribute?.(attrName)) {
+        let expr = el.getAttribute(attrName);
+        el.removeAttribute(attrName);
+        if (!expr)
+          continue;
+        updates.push(primary[name](el, expr, state, name));
+        if (memo.has(el) || el.parentNode !== parent)
+          return false;
+      }
+    }
     if (el.attributes) {
       for (let i2 = 0; i2 < el.attributes.length; ) {
         let attr2 = el.attributes[i2];
@@ -785,9 +792,8 @@ function sprae(container, values) {
           continue;
         let attrNames = attr2.name.slice(1).split(":");
         for (let attrName of attrNames) {
-          let dir = directives[attrName] || directives_default;
-          updates.push(dir(el, expr, state, attrName) || (() => {
-          }));
+          let dir = secondary[attrName] || directives_default;
+          updates.push(dir(el, expr, state, attrName));
           if (memo.has(el) || el.parentNode !== parent)
             return false;
         }
@@ -799,14 +805,15 @@ function sprae(container, values) {
     }
   };
   init(container);
-  for (let update of updates) {
-    let teardown;
-    b(() => {
-      if (typeof teardown === "function")
-        teardown();
-      teardown = update(state);
-    });
-  }
+  for (let update of updates)
+    if (update) {
+      let teardown;
+      b(() => {
+        if (typeof teardown === "function")
+          teardown();
+        teardown = update(state);
+      });
+    }
   Object.seal(state);
   memo.set(container, state);
   return state;

package/sprae.min.js

@@ -1 +1 @@
-function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==r;){var i=r;for(r=void 0,o++;void 0!==i;){var s=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&f(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function l(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function a(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function f(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function u(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function h(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function c(t){a.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function v(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,p(t),e}finally{i=o,e()}}}function p(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,v(t)}function d(t){if(i!==this)throw new Error("Out-of-order effect");h(this),i=t,this.f&=-2,8&this.f&&p(this),e()}function y(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function b(t){var e=new y(t);return e.c(),e.d.bind(e)}a.prototype.h=function(){return!0},a.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},a.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},a.prototype.subscribe=function(t){var e=this;return b((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},a.prototype.valueOf=function(){return this.value},a.prototype.toString=function(){return this.value+""},a.prototype.peek=function(){return this.v},Object.defineProperty(a.prototype,"value",{get:function(){var t=l(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(c.prototype=new a).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!f(this))return this.f&=-2,!0;var t=i;try{u(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,h(this),this.f&=-2,!0},c.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}a.prototype.S.call(this,t)},c.prototype.U=function(t){if(a.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},c.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},c.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(c.prototype,"value",{get:function(){1&this.f&&t();var e=l(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),y.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},y.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,v(this),u(this),n++;var e=i;return i=this,d.bind(this,e)},y.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},y.prototype.d=function(){this.f|=8,1&this.f||p(this)},Symbol.observable||=Symbol("observable");var m=new FinalizationRegistry((t=>t.call?.())),g=(t,e,i,r,n,o)=>{return t&&(s=(t[Symbol.observable]?.()||t).subscribe?.(e,i,r),o=s&&(()=>s.unsubscribe?.())||t.set&&t.call?.(n,e)||(t.then?.((t=>(!n&&e(t),r?.())),i)||(async o=>{try{for await(o of t){if(n)return;e(o)}r?.()}catch(t){i?.(t)}})())&&(t=>n=1),m.register(t,o),o);var s},S=t=>t&&t[x],x=Symbol("signal-struct");function A(t,e){if(S(t)&&!e)return t;if(w(t)){const n=Object.create(e||Object.getPrototypeOf(t)),o={},s=Object.getOwnPropertyDescriptors(t);for(let t in s){let e=s[t];if(e.get){let i=o[t]=new c(e.get.bind(n));Object.defineProperty(n,t,{get:()=>i.value,set:e.set?.bind(n),configurable:!1,enumerable:!0})}else{let s=e.value,l=(r=s)&&!!(r[Symbol.observable]||r[Symbol.asyncIterator]||r.call&&r.set||r.subscribe||r.then),f=o[t]=(i=s)&&i.peek?s:new a(l?void 0:w(s)?Object.seal(A(s)):Array.isArray(s)?A(s):s);l&&g(s,(t=>f.value=t)),Object.defineProperty(n,t,{get:()=>f.value,set(t){if(w(t)){if(w(f.value))try{return void Object.assign(f.value,t)}catch(t){}f.value=Object.seal(A(t))}else Array.isArray(t)?f.value=A(t):f.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,x,{configurable:!1,enumerable:!1,value:!0}),n}var i,r;return Array.isArray(t)&&!S(t[0])?t.map((t=>A(t))):t}function w(t){return t&&t.constructor===Object}A.isStruct=S;var O=(t,e,i,r=null)=>{let n,o,s,l=0,a=i.length,f=e.length,{remove:u,same:h,insert:c,replace:v}=O;for(;l<a&&l<f&&h(e[l],i[l]);)l++;for(;l<a&&l<f&&h(i[a-1],e[f-1]);)r=i[(--f,--a)];if(l==f)for(;l<a;)c(r,i[l++],t);else{for(n=e[l];l<a;)s=i[l++],o=n?n.nextSibling:r,h(n,s)?n=o:l<a&&h(i[l],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,u(n,t),n=o}return i};O.same=(t,e)=>t==e,O.replace=(t,e,i)=>i.replaceChild(e,t),O.insert=(t,e,i)=>i.insertBefore(e,t),O.remove=(t,e)=>e.removeChild(t);var j=O,N={},E={},k={},W=t=>null===t?E:void 0===t?k:"number"==typeof t||t instanceof Number?N[t]||(N[t]=new Number(t)):"string"==typeof t||t instanceof String?N[t]||(N[t]=new String(t)):"boolean"==typeof t||t instanceof Boolean?N[t]||(N[t]=new Boolean(t)):t,$={},P=(t,e,i,r)=>{let n=r.startsWith("on")&&r.slice(2),o=R(t,e,":"+r);if(o)return n?e=>{let i=o(e);if(i)return D(t,n,i),()=>_(t,n,i)}:e=>C(t,r,o(e))},C=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")};$[""]=(t,e)=>{let i=R(t,e,":");if(i)return e=>{let r=i(e);for(let e in r)C(t,I(e),r[e])}},$.with=(t,e,i)=>{X(t,A(R(t,e,"with")(i),i))},$.if=(t,e)=>{let i=document.createTextNode(""),r=[R(t,e,":if")],n=[t],o=t;for(;(o=t.nextElementSibling)&&o.hasAttribute(":else");)o.removeAttribute(":else"),(e=o.getAttribute(":if"))?(o.removeAttribute(":if"),o.remove(),n.push(o),r.push(R(t,e,":else :if"))):(o.remove(),n.push(o),r.push((()=>1)));return t.replaceWith(o=i),t=>{let e=r.findIndex((e=>e(t)));n[e]!=o&&((o[U]||o).replaceWith(o=n[e]||i),X(o,t))}};var U=Symbol(":each"),B=Symbol(":ref"),L=Symbol(":key");$.ref=(t,e,i)=>{t.hasAttribute(":each")?t[B]=e:i[e]=t},$.key=(t,e,i)=>{t.hasAttribute(":each")&&(t[L]=e)},$.each=(t,e)=>{let i=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r={};r.items=i[2].trim();let n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?(r.item=n.replace(e,"").trim(),r.index=o[1].trim()):r.item=n,r}(e);if(!i)return F(new Error,t,e);const r=t[U]=document.createTextNode("");t.replaceWith(r);const n=R(t,i.items,":each"),o=t[L]||t.getAttribute(":key"),s=o?R(null,o):null;t.removeAttribute(":key");const l=new WeakMap,a=new WeakMap;let f=[];return o=>{let u=n(o);u?"number"==typeof u?u=Array.from({length:u},((t,e)=>[e,e+1])):Array.isArray(u)?u=u.map(((t,e)=>[e+1,t])):"object"==typeof u?u=Object.entries(u):F(Error("Bad list value"),t,e,":each"):u=[];let h=[],c=[];for(let[e,r]of u){let n,f,u=s?.({[i.item]:r});("string"==typeof(v=u)||"boolean"==typeof v||"number"==typeof v)&&(u=W(u)),null==u?n=t.cloneNode(!0):(n=a.get(u))||a.set(u,n=t.cloneNode(!0)),h.push(n),null!=u&&(f=l.get(u))||(f=Object.create(o),f[i.item]=r,i.index&&(f[i.index]=e),t[B]&&(f[t[B]]=n),null!=u&&l.set(u,f)),c.push(f)}var v;j(r.parentNode,f,h,r),f=h;for(let t=0;t<h.length;t++)X(h[t],c[t])}},$.id=(t,e)=>{let i=R(t,e,":id");return e=>{return r=i(e),t.id=r||0===r?r:"";var r}},$.class=(t,e)=>{let i=R(t,e,":class"),r=t.className;return e=>{let n=i(e);t.className=r+typeof n=="string"?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},$.style=(t,e)=>{let i=R(t,e,":style"),r=t.getAttribute("style")||"";return r.endsWith(";")||(r+="; "),e=>{let n=i(e);if("string"==typeof n)t.setAttribute("style",r+n);else for(let e in n)t.style[e]=n[e]}},$.text=(t,e)=>{let i=R(t,e,":text");return e=>{let r=i(e);t.textContent=null==r?"":r}},$.value=(t,e)=>{let i,r,n=R(t,e,":value"),o="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"TEXTAREA"===t.tagName||"text"===t.type||""===t.type?e=>(i=t.selectionStart,r=t.selectionEnd,t.setAttribute("value",t.value=null==e?"":e),i&&t.setSelectionRange(i,r)):"checkbox"===t.type?e=>(t.value=e?"on":"",C(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>o(n(t))},$.on=(t,e)=>{let i=R(t,e,":on");return e=>{let r=i(e);for(let e in r)D(t,e,r[e]);return()=>{for(let e in r)_(t,e,r[e])}}};var T=Symbol("stop"),D=(t,e,i)=>{if(e.indexOf("..")<0)t.addEventListener(e,i);else{const r=e.split("..").map((t=>t.startsWith("on")?t.slice(2):t)),n=(e,o=0)=>{let s=l=>{t.removeEventListener(r[o],s),"function"!=typeof(e=e.call(t,l))&&(e=()=>{}),++o<r.length?n(e,o):i[T]||n(i)};t.addEventListener(r[o],s)};n(i)}},_=(t,e,i)=>{e.indexOf("..")>=0&&(i[T]=!0),t.removeEventListener(e,i)};$.data=(t,e)=>{let i=R(t,e,":data");return e=>{let r=i(e);for(let e in r)t.dataset[e]=r[e]}},$.aria=(t,e)=>{let i=R(t,e,":aria");return e=>(e=>{for(let i in e)C(t,"aria-"+I(i),null==e[i]?null:e[i]+"")})(i(e))};var M={};function R(t,e,i){let r=M[e];if(!r){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=M[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(r){return F(r,t,e,i)}}return n=>{let o;try{o=r.call(t,n)}catch(r){return F(r,t,e,i)}return o}}function F(t,e,i,r){Object.assign(t,{element:e,expression:i}),console.warn(`∴ ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function I(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var z=new WeakMap;function X(t,e){if(!t.children)return;if(z.has(t))return z.get(t);const i=A(e||{}),r=[],n=(t,e=t.parentNode)=>{if(t.attributes)for(let n=0;n<t.attributes.length;){let o=t.attributes[n];if(":"!==o.name[0]){n++;continue}t.removeAttribute(o.name);let s=o.value;if(!s)continue;let l=o.name.slice(1).split(":");for(let n of l){let o=$[n]||P;if(r.push(o(t,s,i,n)||(()=>{})),z.has(t)||t.parentNode!==e)return!1}}for(let e,i=0;e=t.children[i];i++)!1===n(e,t)&&i--};n(t);for(let t of r){let e;b((()=>{"function"==typeof e&&e(),e=t(i)}))}return Object.seal(i),z.set(t,i),i}var Z=X;export{Z as default};
+function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==r;){var i=r;for(r=void 0,o++;void 0!==i;){var s=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&u(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function l(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function f(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function u(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function a(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function h(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function c(t){f.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function v(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,p(t),e}finally{i=o,e()}}}function p(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,v(t)}function d(t){if(i!==this)throw new Error("Out-of-order effect");h(this),i=t,this.f&=-2,8&this.f&&p(this),e()}function y(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function b(t){var e=new y(t);return e.c(),e.d.bind(e)}f.prototype.h=function(){return!0},f.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},f.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},f.prototype.subscribe=function(t){var e=this;return b((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},f.prototype.valueOf=function(){return this.value},f.prototype.toString=function(){return this.value+""},f.prototype.peek=function(){return this.v},Object.defineProperty(f.prototype,"value",{get:function(){var t=l(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(c.prototype=new f).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!u(this))return this.f&=-2,!0;var t=i;try{a(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,h(this),this.f&=-2,!0},c.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}f.prototype.S.call(this,t)},c.prototype.U=function(t){if(f.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},c.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},c.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(c.prototype,"value",{get:function(){1&this.f&&t();var e=l(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),y.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},y.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,v(this),a(this),n++;var e=i;return i=this,d.bind(this,e)},y.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},y.prototype.d=function(){this.f|=8,1&this.f||p(this)},Symbol.observable||=Symbol("observable");var m=new FinalizationRegistry((t=>t.call?.())),g=(t,e,i,r,n,o)=>{return t&&(s=(t[Symbol.observable]?.()||t).subscribe?.(e,i,r),o=s&&(()=>s.unsubscribe?.())||t.set&&t.call?.(n,e)||(t.then?.((t=>(!n&&e(t),r?.())),i)||(async o=>{try{for await(o of t){if(n)return;e(o)}r?.()}catch(t){i?.(t)}})())&&(t=>n=1),m.register(t,o),o);var s},S=t=>t&&t[A],A=Symbol("signal-struct");function w(t,e){if(S(t)&&!e)return t;if(x(t)){const n=Object.create(e||Object.getPrototypeOf(t)),o={},s=Object.getOwnPropertyDescriptors(t);for(let t in s){let e=s[t];if(e.get){let i=o[t]=new c(e.get.bind(n));Object.defineProperty(n,t,{get:()=>i.value,set:e.set?.bind(n),configurable:!1,enumerable:!0})}else{let s=e.value,l=(r=s)&&!!(r[Symbol.observable]||r[Symbol.asyncIterator]||r.call&&r.set||r.subscribe||r.then),u=o[t]=(i=s)&&i.peek?s:new f(l?void 0:x(s)?Object.seal(w(s)):Array.isArray(s)?w(s):s);l&&g(s,(t=>u.value=t)),Object.defineProperty(n,t,{get:()=>u.value,set(t){if(x(t)){if(x(u.value))try{return void Object.assign(u.value,t)}catch(t){}u.value=Object.seal(w(t))}else Array.isArray(t)?u.value=w(t):u.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,A,{configurable:!1,enumerable:!1,value:!0}),n}var i,r;return Array.isArray(t)&&!S(t[0])?t.map((t=>w(t))):t}function x(t){return t&&t.constructor===Object}w.isStruct=S;var O=(t,e,i,r=null)=>{let n,o,s,l=0,f=i.length,u=e.length,{remove:a,same:h,insert:c,replace:v}=O;for(;l<f&&l<u&&h(e[l],i[l]);)l++;for(;l<f&&l<u&&h(i[f-1],e[u-1]);)r=i[(--u,--f)];if(l==u)for(;l<f;)c(r,i[l++],t);else{for(n=e[l];l<f;)s=i[l++],o=n?n.nextSibling:r,h(n,s)?n=o:l<f&&h(i[l],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,a(n,t),n=o}return i};O.same=(t,e)=>t==e,O.replace=(t,e,i)=>i.replaceChild(e,t),O.insert=(t,e,i)=>i.insertBefore(e,t),O.remove=(t,e)=>e.removeChild(t);var j=O,N={},E={},k={},W=t=>null===t?E:void 0===t?k:"number"==typeof t||t instanceof Number?N[t]||(N[t]=new Number(t)):"string"==typeof t||t instanceof String?N[t]||(N[t]=new String(t)):"boolean"==typeof t||t instanceof Boolean?N[t]||(N[t]=new Boolean(t)):t,$={},P={};$.with=(t,e,i)=>{z(t,w(M(t,e,"with")(i),i))},$.if=(t,e)=>{let i=document.createTextNode(""),r=[M(t,e,":if")],n=[t],o=t;for(;(o=t.nextElementSibling)&&o.hasAttribute(":else");)o.removeAttribute(":else"),(e=o.getAttribute(":if"))?(o.removeAttribute(":if"),o.remove(),n.push(o),r.push(M(t,e,":else :if"))):(o.remove(),n.push(o),r.push((()=>1)));return t.replaceWith(o=i),t=>{let e=r.findIndex((e=>e(t)));n[e]!=o&&((o[C]||o).replaceWith(o=n[e]||i),z(o,t))}};var C=Symbol(":each");$.each=(t,e)=>{let i=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r=i[2].trim(),n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?[n.replace(e,"").trim(),o[1].trim(),r]:[n,"",r]}(e);if(!i)return R(new Error,t,e);const r=t[C]=document.createTextNode("");t.replaceWith(r);const n=M(t,i[2],":each"),o=t.getAttribute(":key"),s=o?M(null,o):null;t.removeAttribute(":key");const l=new WeakMap,f=new WeakMap;let u=[];return o=>{let a=n(o);a?"number"==typeof a?a=Array.from({length:a},((t,e)=>[e,e+1])):Array.isArray(a)?a=a.map(((t,e)=>[e+1,t])):"object"==typeof a?a=Object.entries(a):R(Error("Bad list value"),t,e,":each"):a=[];let h=[],c=[];for(let[e,r]of a){let n,u,a=s?.({[i[0]]:r,[i[1]]:e});("string"==typeof(v=a)||"boolean"==typeof v||"number"==typeof v)&&(a=W(a)),null==a?n=t.cloneNode(!0):(n=f.get(a))||f.set(a,n=t.cloneNode(!0)),h.push(n),null!=a&&(u=l.get(a))?u[i[0]]=r:(u=w({[i[0]]:r,[i[1]]:e},o),null!=a&&l.set(a,u)),c.push(u)}var v;j(r.parentNode,u,h,r),u=h;for(let t=0;t<h.length;t++)z(h[t],c[t])}},P.ref=(t,e,i)=>{i[e]=t},P.id=(t,e)=>{let i=M(t,e,":id");return e=>{return r=i(e),t.id=r||0===r?r:"";var r}},P.class=(t,e)=>{let i=M(t,e,":class"),r=t.className;return e=>{let n=i(e);t.className=r+typeof n=="string"?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},P.style=(t,e)=>{let i=M(t,e,":style"),r=t.getAttribute("style")||"";return r.endsWith(";")||(r+="; "),e=>{let n=i(e);if("string"==typeof n)t.setAttribute("style",r+n);else for(let e in n)t.style[e]=n[e]}},P.text=(t,e)=>{let i=M(t,e,":text");return e=>{let r=i(e);t.textContent=null==r?"":r}},P.value=(t,e)=>{let i,r,n=M(t,e,":value"),o="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"TEXTAREA"===t.tagName||"text"===t.type||""===t.type?e=>(i=t.selectionStart,r=t.selectionEnd,t.setAttribute("value",t.value=null==e?"":e),i&&t.setSelectionRange(i,r)):"checkbox"===t.type?e=>(t.value=e?"on":"",D(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>o(n(t))},P.on=(t,e)=>{let i=M(t,e,":on");return e=>{let r=i(e);for(let e in r)B(t,e,r[e]);return()=>{for(let e in r)L(t,e,r[e])}}};var U=Symbol("stop"),B=(t,e,i)=>{if(e.indexOf("..")<0)t.addEventListener(e,i);else{const r=e.split("..").map((t=>t.startsWith("on")?t.slice(2):t)),n=(e,o=0)=>{let s=l=>{t.removeEventListener(r[o],s),"function"!=typeof(e=e.call(t,l))&&(e=()=>{}),++o<r.length?n(e,o):i[U]||n(i)};t.addEventListener(r[o],s)};n(i)}},L=(t,e,i)=>{e.indexOf("..")>=0&&(i[U]=!0),t.removeEventListener(e,i)};P.data=(t,e)=>{let i=M(t,e,":data");return e=>{let r=i(e);for(let e in r)t.dataset[e]=r[e]}},P.aria=(t,e)=>{let i=M(t,e,":aria");return e=>(e=>{for(let i in e)D(t,"aria-"+F(i),null==e[i]?null:e[i]+"")})(i(e))},P[""]=(t,e)=>{let i=M(t,e,":");if(i)return e=>{let r=i(e);for(let e in r)D(t,F(e),r[e])}};var T=(t,e,i,r)=>{let n=r.startsWith("on")&&r.slice(2),o=M(t,e,":"+r);if(o)return n?e=>{let i=o(e);if(i)return B(t,n,i),()=>L(t,n,i)}:e=>D(t,r,o(e))},D=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")},_={};function M(t,e,i){let r=_[e];if(!r){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=_[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(r){return R(r,t,e,i)}}return n=>{let o;try{o=r.call(t,n)}catch(r){return R(r,t,e,i)}return o}}function R(t,e,i,r){Object.assign(t,{element:e,expression:i}),console.warn(`∴ ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function F(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var I=new WeakMap;function z(t,i){if(!t.children)return;if(I.has(t)){let r=I.get(t);return function(t){if(n>0)return t();n++;try{t()}finally{e()}}((()=>Object.assign(r,i))),r}const r=w(i||{}),o=[],s=(t,e=t.parentNode)=>{for(let i in $){let n=":"+i;if(t.hasAttribute?.(n)){let s=t.getAttribute(n);if(t.removeAttribute(n),!s)continue;if(o.push($[i](t,s,r,i)),I.has(t)||t.parentNode!==e)return!1}}if(t.attributes)for(let i=0;i<t.attributes.length;){let n=t.attributes[i];if(":"!==n.name[0]){i++;continue}t.removeAttribute(n.name);let s=n.value;if(!s)continue;let l=n.name.slice(1).split(":");for(let i of l){let n=P[i]||T;if(o.push(n(t,s,r,i)),I.has(t)||t.parentNode!==e)return!1}}for(let e,i=0;e=t.children[i];i++)!1===s(e,t)&&i--};s(t);for(let t of o)if(t){let e;b((()=>{"function"==typeof e&&e(),e=t(r)}))}return Object.seal(r),I.set(t,r),r}var X=z;export{X as default};

package/src/core.js

@@ -1,12 +1,16 @@
 import signalStruct from 'signal-struct';
-import defaultDirective, { directives } from './directives.js';
-import { effect } from '@preact/signals-core'
+import defaultDirective, { primary, secondary } from './directives.js';
+import { effect, batch } from '@preact/signals-core'
 
 // sprae element: apply directives
 const memo = new WeakMap
 export default function sprae(container, values) {
   if (!container.children) return
-  if (memo.has(container)) return memo.get(container)
+  if (memo.has(container)) {
+    let state = memo.get(container)
+    batch(() => Object.assign(state, values))
+    return state
+  }
 
   // signalStruct returns values if it's signalStruct already
   const state = signalStruct(values || {});
@@ -14,6 +18,21 @@ export default function sprae(container, values) {
 
   // init directives on element
   const init = (el, parent=el.parentNode) => {
+    // init primary attributes first
+    for (let name in primary) {
+      let attrName = ':' + name
+      if (el.hasAttribute?.(attrName)) {
+        let expr = el.getAttribute(attrName)
+        el.removeAttribute(attrName)
+        if (!expr) continue
+        updates.push(primary[name](el, expr, state, name))
+
+        // stop if element was spraed by directive or skipped (detached)
+        if (memo.has(el) || el.parentNode !== parent) return false
+      }
+    }
+
+    // catch other attributes as secondary
     if (el.attributes) {
       for (let i = 0; i < el.attributes.length;) {
         let attr = el.attributes[i]
@@ -21,12 +40,13 @@ export default function sprae(container, values) {
         el.removeAttribute(attr.name)
         let expr = attr.value
         if (!expr) continue
+        // multiple attributes like :id:for=""
         let attrNames = attr.name.slice(1).split(':')
         for (let attrName of attrNames) {
-          let dir = directives[attrName] || defaultDirective;
-          updates.push(dir(el, expr, state, attrName) || (()=>{}));
+          let dir = secondary[attrName] || defaultDirective;
+          updates.push(dir(el, expr, state, attrName));
 
-          // stop if element was spraed by directive or skipped
+          // stop if element was spraed by directive or skipped (detached)
           if (memo.has(el) || el.parentNode !== parent) return false
         }
       }
@@ -42,7 +62,7 @@ export default function sprae(container, values) {
 
   // call updates: subscribes directives to state;
   // state is created after inits because directives can extend init values (expose refs etc)
-  for (let update of updates) {
+  for (let update of updates) if (update) {
     let teardown
     effect(() => {
       if (typeof teardown === 'function') teardown()

package/src/directives.js

@@ -5,42 +5,18 @@ import signalStruct from 'signal-struct'
 import p from 'primitive-pool'
 
 // reserved directives - order matters!
-export const directives = {}
+// primary initialized first by selector, secondary initialized by iterating attributes
+export const primary = {}, secondary = {}
 
-// any-prop directives
-export default (el, expr, values, name) => {
-  let evt = name.startsWith('on') && name.slice(2)
-  let evaluate = parseExpr(el, expr, ':'+name)
-  if (evaluate) return evt ? state => {
-    let value = evaluate(state)
-    if (value) {
-      addListener(el, evt, value)
-      return () => removeListener(el, evt, value)
-    }
-  }
-  : state => attr(el, name, evaluate(state))
-}
-
-// set attr
-const attr = (el, name, v) => {
-  if (v == null || v === false) el.removeAttribute(name)
-  else el.setAttribute(name, v === true ? '' : (typeof v === 'number' || typeof v === 'string') ? v : '')
-}
 
-directives[''] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':')
-  if (evaluate) return (state) => {
-    let value = evaluate(state)
-    for (let key in value) attr(el, dashcase(key), value[key]);
-  }
-}
-
-directives['with'] = (el, expr, rootState) => {
+// :with must come before :if or :each or anyone else
+primary['with'] = (el, expr, rootState) => {
   let evaluate = parseExpr(el, expr, 'with')
   sprae(el, signalStruct(evaluate(rootState), rootState));
 }
 
-directives['if'] = (el, expr) => {
+// :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
+primary['if'] = (el, expr) => {
   let holder = document.createTextNode(''),
       clauses = [parseExpr(el, expr, ':if')],
       els = [el], cur = el
@@ -71,23 +47,10 @@ directives['if'] = (el, expr) => {
   }
 }
 
-const _each = Symbol(':each'), _ref = Symbol(':ref'), _key = Symbol(':key')
-
-directives['ref'] = (el, expr, state) => {
-  // make sure :ref is initialized after :each (return to avoid initializing as signal)
-  if (el.hasAttribute(':each')) {el[_ref] = expr; return};
+const _each = Symbol(':each')
 
-  // FIXME: wait for complex ref use-case
-  // parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
-  state[expr] = el;
-}
-
-directives['key'] = (el, expr, state) => {
-  // make sure :ref is initialized after :each (return to avoid initializing as signal)
-  if (el.hasAttribute(':each')) {el[_key] = expr; return};
-}
-
-directives['each'] = (tpl, expr) => {
+// :each must init before :ref, :id or any others, since it defines scope
+primary['each'] = (tpl, expr) => {
   let each = parseForExpression(expr);
   if (!each) return exprError(new Error, tpl, expr);
 
@@ -96,9 +59,9 @@ directives['each'] = (tpl, expr) => {
   const holder = tpl[_each] = document.createTextNode('')
   tpl.replaceWith(holder)
 
-  const evaluate = parseExpr(tpl, each.items, ':each');
+  const evaluate = parseExpr(tpl, each[2], ':each');
 
-  const keyExpr = tpl[_key] || tpl.getAttribute(':key');
+  const keyExpr = tpl.getAttribute(':key');
   const itemKey = keyExpr ? parseExpr(null, keyExpr) : null;
   tpl.removeAttribute(':key')
 
@@ -121,7 +84,7 @@ directives['each'] = (tpl, expr) => {
     let newEls = [], elScopes = []
 
     for (let [idx, item] of list) {
-      let el, scope, key = itemKey?.({[each.item]: item})
+      let el, scope, key = itemKey?.({[each[0]]: item, [each[1]]: idx})
       if (isPrimitive(key)) key = p(key); // singletonize key
 
       // we consider if data items are primitive, then nodes needn't be cached
@@ -132,13 +95,12 @@ directives['each'] = (tpl, expr) => {
       newEls.push(el)
 
       if (key == null || !(scope = scopes.get(key))) {
-        scope = Object.create(state)
-        scope[each.item] = item
-        if (each.index) scope[each.index] = idx;
-        // provide ref, if indicated
-        if (tpl[_ref]) scope[tpl[_ref]] = el
+        scope = signalStruct({[each[0]]: item, [each[1]]:idx}, state)
         if (key != null) scopes.set(key, scope)
       }
+      // need to explicitly set item to update existing children's values
+      else scope[each[0]] = item
+
       elScopes.push(scope)
     }
 
@@ -162,28 +124,33 @@ function parseForExpression(expression) {
 
   if (!inMatch) return
 
-  let res = {}
-  res.items = inMatch[2].trim()
+  let items = inMatch[2].trim()
   let item = inMatch[1].replace(stripParensRE, '').trim()
   let iteratorMatch = item.match(forIteratorRE)
 
-  if (iteratorMatch) {
-      res.item = item.replace(forIteratorRE, '').trim()
-      res.index = iteratorMatch[1].trim()
-  } else {
-      res.item = item
-  }
+  if (iteratorMatch) return [
+    item.replace(forIteratorRE, '').trim(),
+    iteratorMatch[1].trim(),
+    items
+  ]
 
-  return res
+  return [item, '', items]
 }
 
-directives['id'] = (el, expr) => {
+
+secondary['ref'] = (el, expr, state) => {
+  // FIXME: wait for complex ref use-case
+  // parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
+  state[expr] = el;
+}
+
+secondary['id'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':id')
   const update = v => el.id = v || v === 0 ? v : ''
   return (state) => update(evaluate(state))
 }
 
-directives['class'] = (el, expr) => {
+secondary['class'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':class')
   let initClassName = el.className
   return (state) => {
@@ -192,7 +159,7 @@ directives['class'] = (el, expr) => {
   }
 }
 
-directives['style'] = (el, expr) => {
+secondary['style'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':style')
   let initStyle = el.getAttribute('style') || ''
   if (!initStyle.endsWith(';')) initStyle += '; '
@@ -203,7 +170,7 @@ directives['style'] = (el, expr) => {
   }
 }
 
-directives['text'] = (el, expr) => {
+secondary['text'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':text')
 
   return (state) => {
@@ -213,7 +180,7 @@ directives['text'] = (el, expr) => {
 }
 
 // connect expr to element value
-directives['value'] = (el, expr) => {
+secondary['value'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':value')
 
   let from, to
@@ -237,7 +204,7 @@ directives['value'] = (el, expr) => {
   return (state) => update(evaluate(state))
 }
 
-directives['on'] = (el, expr) => {
+secondary['on'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':on')
 
   return (state) => {
@@ -273,7 +240,7 @@ const removeListener = (el, evt, fn) => {
   el.removeEventListener(evt, fn);
 }
 
-directives['data'] = (el, expr) => {
+secondary['data'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':data')
 
   return ((state) => {
@@ -282,7 +249,7 @@ directives['data'] = (el, expr) => {
   })
 }
 
-directives['aria'] = (el, expr) => {
+secondary['aria'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':aria')
   const update = (value) => {
     for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
@@ -290,6 +257,35 @@ directives['aria'] = (el, expr) => {
   return ((state) => update(evaluate(state)))
 }
 
+// set props in-bulk or run effect
+secondary[''] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ':')
+  if (evaluate) return (state) => {
+    let value = evaluate(state)
+    for (let key in value) attr(el, dashcase(key), value[key]);
+  }
+}
+
+// any other prop directive
+export default (el, expr, values, name) => {
+  let evt = name.startsWith('on') && name.slice(2)
+  let evaluate = parseExpr(el, expr, ':'+name)
+  if (evaluate) return evt ? state => {
+    let value = evaluate(state)
+    if (value) {
+      addListener(el, evt, value)
+      return () => removeListener(el, evt, value)
+    }
+  }
+  : state => attr(el, name, evaluate(state))
+}
+
+// set attr
+const attr = (el, name, v) => {
+  if (v == null || v === false) el.removeAttribute(name)
+  else el.setAttribute(name, v === true ? '' : (typeof v === 'number' || typeof v === 'string') ? v : '')
+}
+
 
 let evaluatorMemo = {}
 

package/test/test.js

@@ -404,7 +404,24 @@ test('each: keyed', async () => {
 })
 
 test.todo('each: unmounted elements remove listeners', async () => {
+  // let's hope they get removed without memory leaks :')
+})
+
+test('each: internal children get updated by state update, also: update by running again', () => {
+  let el = h`<><x :each="item, idx in items" :text="item" :key="idx"></x></>`
+  sprae(el, { items: [1,2,3] })
+  is(el.textContent, '123')
+  let state = sprae(el, { items: [0,2,3] })
+  is(el.textContent, '023')
+  state.items[0] = 1
+  state.items = state.items
+  is(el.textContent, '123')
+})
 
+test('each: :id and others must receive value from context', () => {
+  let el = h`<div><x :id="idx" :each="item, idx in items"></x></div>`
+  sprae(el, {items:[1,2,3]})
+  is(el.innerHTML,`<x id="1"></x><x id="2"></x><x id="3"></x>`)
 })
 
 test('on: base', () => {

package/todo.md

@@ -34,8 +34,8 @@
 * [x] implement :with
 * [x] update :value without losing focus / position
 * ~~[x] run tiredown if element got removed from condition or loop (free memory)~~ no need just make sure no refs to elements stored
-* [ ] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives
-* [ ] :if :ref, :if :with -> context setters must come first always
+* [x] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives
+* [x] :if :ref, :if :with -> context setters must come first always
 * [ ] frameworks benchmark
 * [ ] examples
   * [x] todomvc