sprae 2.2.3 → 2.3.0

package/examples/todomvc.html

@@ -54,7 +54,7 @@
       </ul>
     </section>
     <footer class="footer">
-      <span class="todo-count" :with="{count: todos.filter(item => !item.done).length}">
+      <span class="todo-count">
         <strong :text="count">#</strong> <span :text="plur('item', count)">items</span> left
       </span>
       <ul class="filters">
@@ -89,6 +89,7 @@
     let state = sprae(document.body, {
       plur,
       todos: JSON.parse(localStorage.getItem('todomvc.items') || '[]'),
+      get count() { return this.todos.filter(item => !item.done).length },
       hash: window.location.hash || '#/',
       save: items => localStorage.setItem('todomvc.items', JSON.stringify(items))
     })

package/package.json

@@ -1,16 +1,14 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "2.2.3",
+  "version": "2.3.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.2.2",
-    "element-props": "^2.4.2",
     "primitive-pool": "^2.0.0",
     "signal-struct": "^1.6.0",
-    "sube": "^2.2.1",
     "swapdom": "^1.1.1"
   },
   "devDependencies": {

package/plan.md

@@ -22,14 +22,16 @@
 * [x] bulk events :ona:onb
 * [x] multiprop setter :a:b="c"
 * [x] make `this` in expression an element
-  * [ ] replace :ref with :with="this as x"
+  * ~~[x] replace :ref with :with="this as x"~~
+* [x] :ref creates instance in current state, not creates a new state
+  * [x] to avoid extending signal-struct, we must collect state data before, and call updates after for extended state
+* [x] optimization: replace element-props with direct (better) setters
+  * [x] Make sure `false` gets serialized, not removes attr
+* [ ] Sandbox expressions: no global, no "scope" object name, no "arguments"
+* ~~[x] report usignal problem~~ author is not really interested
 * [ ] :oninit
-* [ ] optimization: replace element-props with direct (better) setters
-  * [ ] Make sure `false` gets serialized, not removes attr
-* [ ] report usignal problem
 * [ ] :onconnect, :ondisconnect
 * [ ] frameworks benchmark
 * [ ] examples
   * [x] todomvc
-  * [ ] wave-edit
-* [ ] Sandbox expressions: no global, no "scope" object name, no "arguments"
+  * [ ] wave-edit

package/r&d.md

@@ -97,6 +97,18 @@
 
 -> possibly we have to just subscribe via mechanism of signals-like deps, and :with just initializes subtree with extended object
 
+## [x] Get rid of :with? -> let's get rid of until really necessary
+
++ with is bad JS practice/association
++? is there a bona-fide use case?
++ the implementation is heavy/unoptimal: two assign-updates happen: for root, for children
++ it is exception blocking streamline implementation of refs
++ it shadows data which creates all sorts of nasty debugging effects / states. Isn't it better to keep data/state transparent?
+  + it even enables transparency of :each scopes, since they inherit root scope
++ it's easier to look out for data in one single place (state init), rather than in a bunch of markup locations
++?! can be replaced with sort of `<x :xyz="xyz=...calc"></x>`, no?
+  -> would need wrapping noname scope access
+
 ## [x] Should we inherit values from `init` in `sprae(el, init)`, instead of creating a snapshot of reactive values in `init`? -> nah, nice idea but too little use. Better create signals struct.
 
 + it allows passing any arbitrary scope to initialize from.
@@ -259,6 +271,13 @@
   + that "unlimits" returned struct, so that any property can be added/deleted.
   - doesn't really save from `new (()=>{}).constructor` hack: we gotta substitute objects too.
 
+2. Use sandboxed proxy
+  - tough evaluation
+  - tough implementation
+  - screwed up data
+  - no full protection
+  + does minimal catch
+
 ## [x] :onclick="direct code" ? -> no: immediately invoked.
 
   + compatible with direct `onclick=...`
@@ -268,7 +287,7 @@
   - illicit `event` object
   - conflicts with regular attrs logic: the code is immediately invoked and can assign a function.
 
-## [ ] Should getters convert to computed?
+## [x] Should getters convert to computed? -> yes, that's relatively cheap and useful
 
   + shorter and nicer syntax
   - possibly longer inti

package/readme.md

@@ -62,7 +62,7 @@ Control flow of elements.
 Multiply element. `index` value starts from 1.
 
 ```html
-<ul :with="{items: ['a','b','c']}">
+<ul>
   <li :each="item in items" :text="item">Untitled</li>
 </ul>
 
@@ -176,28 +176,6 @@ Invoked when element is connected or disconnected from DOM.
 ```
 -->
 
-#### `:with="data"`
-
-Set data for a subtree fragment scope.
-
-```html
-<!-- Inline data -->
-<x :with="{ foo: 'bar' }" :text="foo"></x>
-
-<!-- External data -->
-<y :with="data"></y>
-
-<!-- Inheritance -->
-<x :with="{ foo: 'bar' }">
-  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
-</x>
-
-<!-- Single property -->
-<li :with="this as li">
-  <input :onfocus-onblur="e => (li.classList.add('editing'), e => li.classList.remove('editing'))" />
-</li>
-```
-
 #### `:data="values"`
 
 Set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes. CamelCase is converted to dash-case.
@@ -222,15 +200,29 @@ Set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
 
 #### `:ref="id"`
 
-Expose element to a subtree fragment with the `id`.
+Expose element to a subtree fragment with the `id`, as well as to scope:
 
 ```html
-<li :ref="item">
-  <input
-    :onfocus="e => item.classList.add('editing')"
-    :onblur="e => item.classList.remove('editing')"
-  />
-</li>
+<!-- single item -->
+<textarea :id:ref="text" placeholder="Enter text..."></textarea>
+
+<!-- iterable items -->
+<ul>
+  <li :each="item in items" :ref="item">
+    <input
+      :onfocus="e => item.classList.add('editing')"
+      :onblur="e => item.classList.remove('editing')"
+    />
+  </li>
+</ul>
+
+<script type="module">
+  import sprae from 'sprae';
+  let state = sprae(document, {items: ['a','b','c']})
+
+  // exposes element in state
+  state.text // <textarea id="text"></textarea>
+</script>
 ```
 
 <!--
@@ -257,20 +249,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 
 ## Hints
 
-**1.** Attributes are initialized in order, so pay attention providing `:scope`/`:ref` attributes:
-
-```html
-<li :each="item in items" :ref="li">
-  <button :onclick="e => li.classList.add('loading')"></button>
-</li>
-
-<li :ref="li" :each="item in items">
-  <!-- Invalid: li is undefined -->
-  <button :onclick="e => li.classList.add('loading')"></button>
-</li>
-```
-
-**2.** Data allows signals values, which can be an alternative way to control template state:
+**1.** Data allows signals values, which can be an alternative way to control template state:
 
 ```html
 <div id="done" :text="loading ? 'loading' : result">...</div>
@@ -292,7 +271,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 </script>
 ```
 
-**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.
+**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.
 
 ```html
 <div :text="clicks">#</div> clicks
@@ -306,7 +285,7 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 </script>
 ```
 
-**4.** Getters turn into computed values automatically:
+**3.** Getters turn into computed values automatically:
 
 ```html
 <div id="x-plus-y">

package/sprae.js

@@ -32,16 +32,6 @@ 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;
@@ -409,30 +399,6 @@ function isObject(v2) {
   return v2 && v2.constructor === Object;
 }
 
-// node_modules/element-props/element-props.js
-var prop = (el2, k, v2) => {
-  if (k.startsWith("on"))
-    k = k.toLowerCase();
-  if (el2[k] !== v2) {
-    el2[k] = v2;
-  }
-  if (v2 == null || v2 === false)
-    el2.removeAttribute(k);
-  else if (typeof v2 !== "function")
-    el2.setAttribute(
-      dashcase(k),
-      v2 === true ? "" : typeof v2 === "number" || typeof v2 === "string" ? v2 : k === "class" ? (Array.isArray(v2) ? v2 : Object.entries(v2).map(([k2, v3]) => v3 ? k2 : "")).filter(Boolean).join(" ") : k === "style" ? Object.entries(v2).map(([k2, v3]) => `${k2}: ${v3}`).join(";") : ""
-    );
-};
-var input = (el2) => [
-  el2.type === "checkbox" ? () => el2.checked : () => el2.value,
-  el2.type === "text" || el2.type === "" ? (value) => el2.value = value == null ? "" : value : el2.type === "checkbox" ? (value) => (el2.value = value ? "on" : "", prop(el2, "checked", value)) : el2.type === "select-one" ? (value) => ([...el2.options].map((el3) => el3.removeAttribute("selected")), el2.value = value, el2.selectedOptions[0]?.setAttribute("selected", "")) : (value) => el2.value = value
-];
-var el = document.createElement("div");
-function dashcase(str) {
-  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase());
-}
-
 // node_modules/swapdom/swap-inflate.js
 var swap = (parent, a2, b2, end = null) => {
   let i2 = 0, cur, next, bi, n2 = b2.length, m = a2.length, { remove, same, insert, replace } = swap;
@@ -484,39 +450,47 @@ var primitive_pool_default = (key) => {
 };
 
 // src/directives.js
-var directives_default = (el2, expr, state, name) => {
+var directives = {};
+var directives_default = (el, expr, values, name) => {
   if (name.startsWith("on")) {
-    return directives.on(el2, `{"${name.split("-").map((n2) => n2.startsWith("on") ? n2.slice(2) : n2).join("-")}": ${expr}}`, state);
+    return directives.on(el, `{"${name.split("-").map((n2) => n2.startsWith("on") ? n2.slice(2) : n2).join("-")}": ${expr}}`, values);
   }
-  let evaluate = parseExpr(el2, expr, ":" + name, state);
-  const update = (value) => prop(el2, name, value);
-  b(() => update(evaluate(state)));
+  let evaluate = parseExpr(el, expr, ":" + name);
+  return (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, values) => {
+  let evaluate = parseExpr(el, expr, ":");
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      attr(el, dashcase(key), value[key]);
+  };
 };
-var directives = {};
 var _each = Symbol(":each");
 var _ref = Symbol(":ref");
-directives["with"] = (el2, expr, rootState) => {
-  let evaluate = parseExpr(el2, expr, "with", rootState);
-  const params = w(() => Object.assign({}, rootState, evaluate(rootState)));
-  let state = sprae(el2, params.value);
-  b((values = params.value) => h(() => Object.assign(state, values)));
-  return false;
-};
-directives["ref"] = (el2, expr, state) => {
-  if (el2.hasAttribute(":each"))
-    return el2[_ref] = expr;
-  sprae(el2, Object.assign(Object.create(state), { [expr]: el2 }));
-  return false;
+directives["ref"] = (el, expr, values) => {
+  if (el.hasAttribute(":each")) {
+    el[_ref] = expr;
+    return;
+  }
+  ;
+  values[expr] = el;
 };
-directives["if"] = (el2, expr, state) => {
-  let holder = document.createTextNode(""), clauses = [parseExpr(el2, expr, ":if", state)], els = [el2], cur = el2;
-  while (cur = el2.nextElementSibling) {
+directives["if"] = (el, expr, values) => {
+  let holder = document.createTextNode(""), clauses = [parseExpr(el, expr, ":if")], els = [el], cur = el;
+  while (cur = el.nextElementSibling) {
     if (cur.hasAttribute(":else")) {
       cur.removeAttribute(":else");
       if (expr = cur.getAttribute(":if")) {
         cur.removeAttribute(":if"), cur.remove();
         els.push(cur);
-        clauses.push(parseExpr(el2, expr, ":else :if", state));
+        clauses.push(parseExpr(el, expr, ":else :if"));
       } else {
         cur.remove();
         els.push(cur);
@@ -525,50 +499,53 @@ directives["if"] = (el2, expr, state) => {
     } else
       break;
   }
-  el2.replaceWith(cur = holder);
-  let idx = w(() => clauses.findIndex((f2) => f2(state)));
-  b((i2 = idx.value) => els[i2] != cur && ((cur[_each] || cur).replaceWith(cur = els[i2] || holder), sprae(cur, state)));
-  return -els.length;
+  el.replaceWith(cur = holder);
+  return (state) => {
+    let i2 = clauses.findIndex((f2) => f2(state));
+    if (els[i2] != cur) {
+      (cur[_each] || cur).replaceWith(cur = els[i2] || holder);
+      sprae(cur, state);
+    }
+  };
 };
-directives["each"] = (tpl, expr, state) => {
+directives["each"] = (tpl, expr, values) => {
   let each = parseForExpression(expr);
   if (!each)
     return exprError(new Error(), tpl, expr);
-  const getItems = parseExpr(tpl, each.items, ":each", state);
   const holder = tpl[_each] = document.createTextNode("");
   tpl.replaceWith(holder);
-  const items = w(() => {
-    let list = getItems(state);
-    if (!list)
-      return [];
-    if (typeof list === "number")
-      return Array.from({ length: list }, (_2, i2) => [i2, i2 + 1]);
-    if (list.constructor === Object)
-      return Object.entries(list);
-    if (Array.isArray(list))
-      return list.map((item, i2) => [i2 + 1, item]);
-    exprError(Error("Bad list value"), tpl, each.items, ":each", list);
-  });
+  const evaluate = parseExpr(tpl, each.items, ":each");
   const scopes = /* @__PURE__ */ new WeakMap();
   const itemEls = /* @__PURE__ */ new WeakMap();
   let curEls = [];
-  b((list = items.value) => {
+  return (state) => {
+    let list = evaluate(state);
+    if (!list)
+      list = [];
+    else if (typeof list === "number")
+      list = Array.from({ length: list }, (_2, i2) => [i2, i2 + 1]);
+    else if (list.constructor === Object)
+      list = Object.entries(list);
+    else if (Array.isArray(list))
+      list = list.map((item, i2) => [i2 + 1, item]);
+    else
+      exprError(Error("Bad list value"), tpl, each.items, ":each", list);
     let newEls = [], elScopes = [];
     for (let [idx, item] of list) {
       let itemKey = primitive_pool_default(item);
-      let el2 = itemEls.get(itemKey);
-      if (!el2) {
-        el2 = tpl.cloneNode(true);
-        itemEls.set(itemKey, el2);
+      let el = itemEls.get(itemKey);
+      if (!el) {
+        el = tpl.cloneNode(true);
+        itemEls.set(itemKey, el);
       }
-      newEls.push(el2);
+      newEls.push(el);
       if (!scopes.has(itemKey)) {
         let scope = Object.create(state);
         scope[each.item] = item;
         if (each.index)
           scope[each.index] = idx;
         if (tpl[_ref])
-          scope[tpl[_ref]] = el2;
+          scope[tpl[_ref]] = el;
         scopes.set(itemKey, scope);
       }
       elScopes.push(scopes.get(itemKey));
@@ -578,8 +555,7 @@ directives["each"] = (tpl, expr, state) => {
     for (let i2 = 0; i2 < newEls.length; i2++) {
       sprae(newEls[i2], elScopes[i2]);
     }
-  });
-  return -1;
+  };
 };
 function parseForExpression(expression) {
   let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
@@ -600,110 +576,122 @@ function parseForExpression(expression) {
   }
   return res;
 }
-directives["id"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":id", state);
-  const update = (v2) => el2.id = v2 || v2 === 0 ? v2 : "";
-  b(() => update(evaluate(state)));
-};
-directives[""] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":", state);
-  const update = (value) => {
-    if (!value)
-      return;
-    for (let key in value)
-      prop(el2, key, value[key]);
+directives["id"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":id");
+  const update = (v2) => el.id = v2 || v2 === 0 ? v2 : "";
+  return (state) => update(evaluate(state));
+};
+directives["class"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":class");
+  let initClassName = el.className;
+  return (state) => {
+    let v2 = evaluate(state);
+    el.className = initClassName + typeof v2 === "string" ? v2 : (Array.isArray(v2) ? v2 : Object.entries(v2).map(([k, v3]) => v3 ? k : "")).filter(Boolean).join(" ");
   };
-  b(() => update(evaluate(state)));
 };
-directives["text"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":text", state);
-  const update = (value) => {
-    el2.textContent = value == null ? "" : value;
+directives["style"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":style");
+  return (state) => {
+    let v2 = evaluate(state);
+    if (typeof v2 === "string")
+      el.setAttribute("style", v2);
+    else
+      for (let k in v2)
+        el.style[k] = v2[k];
   };
-  b(() => update(evaluate(state)));
 };
-directives["value"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":in", state);
-  let [get, set] = input(el2);
+directives["text"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":text");
   const update = (value) => {
-    prop(el2, "value", value);
-    set(value);
+    el.textContent = value == null ? "" : value;
   };
-  b(() => update(evaluate(state)));
+  return (state) => update(evaluate(state));
 };
-directives["on"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":on", state);
+directives["value"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":in");
+  let update = el.type === "text" || el.type === "" ? (value) => el.setAttribute("value", el.value = value == null ? "" : value) : el.type === "checkbox" ? (value) => (el.value = value ? "on" : "", attr(el, "checked", value)) : el.type === "select-one" ? (value) => ([...el.options].map((el2) => el2.removeAttribute("selected")), el.value = value, el.selectedOptions[0]?.setAttribute("selected", "")) : (value) => el.value = value;
+  return (state) => update(evaluate(state));
+};
+directives["on"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":on");
   let listeners = {};
-  b(() => {
+  return (state) => {
     for (let evt in listeners)
-      el2.removeEventListener(evt, listeners[evt]);
+      el.removeEventListener(evt, listeners[evt]);
     listeners = evaluate(state);
     for (let evt in listeners) {
       const evts = evt.split("-");
       if (evts.length === 1)
-        el2.addEventListener(evt, listeners[evt]);
+        el.addEventListener(evt, listeners[evt]);
       else {
+        const startFn = listeners[evt];
         const nextEvt = (fn, cur = 0) => {
-          el2.addEventListener(evts[cur], listeners[evt] = (e2) => {
+          el.addEventListener(evts[cur], listeners[evt] = (e2) => {
             fn = fn(e2);
-            el2.removeEventListener(evts[cur], listeners[evt]);
-            nextEvt(fn, (cur + 1) % evts.length);
+            el.removeEventListener(evts[cur], listeners[evt]);
+            if (++cur < evts.length && typeof fn === "function")
+              nextEvt(fn, cur);
+            else
+              nextEvt(startFn);
           });
         };
-        nextEvt(listeners[evt]);
+        nextEvt(startFn);
       }
     }
     ;
-  });
+  };
 };
-directives["data"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":data", state);
-  const value = w(() => evaluate(state));
-  b((v2 = value.value) => {
-    for (let key in v2)
-      el2.dataset[key] = v2[key];
-  });
+directives["data"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":data");
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      el.dataset[key] = value[key];
+  };
 };
-directives["aria"] = (el2, expr, state) => {
-  let evaluate = parseExpr(el2, expr, ":aria", state);
+directives["aria"] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ":aria");
   const update = (value) => {
     for (let key in value)
-      prop(el2, "aria" + key[0].toUpperCase() + key.slice(1), value[key] == null ? null : value[key] + "");
+      attr(el, "aria-" + dashcase(key), value[key] == null ? null : value[key] + "");
   };
-  b(() => update(evaluate(state)));
+  return (state) => update(evaluate(state));
 };
 var evaluatorMemo = {};
-function parseExpr(el2, expression, dir, scope) {
+function parseExpr(el, expression, dir) {
   if (evaluatorMemo[expression])
     return evaluatorMemo[expression];
   let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /^(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
   let evaluate;
   try {
-    evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el2);
+    evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el);
   } catch (e2) {
-    return exprError(e2, el2, expression, dir, scope);
+    return exprError(e2, el, expression, dir);
   }
   return evaluatorMemo[expression] = (state) => {
     let result;
     try {
       result = evaluate(state);
     } catch (e2) {
-      return exprError(e2, el2, expression, dir, scope);
+      return exprError(e2, el, expression, dir);
     }
     return result;
   };
 }
-function exprError(error, element, expression, dir, scope) {
+function exprError(error, element, expression, dir) {
   Object.assign(error, { element, expression });
-  console.warn(`\u2234sprae: ${error.message}
+  console.warn(`\u2234 ${error.message}
 
 ${dir}=${expression ? `"${expression}"
 
-` : ""}`, element, scope);
+` : ""}`, element);
   setTimeout(() => {
     throw error;
   }, 0);
 }
+function dashcase(str) {
+  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => "-" + match.toLowerCase());
+}
 
 // src/core.js
 var memo = /* @__PURE__ */ new WeakMap();
@@ -713,31 +701,36 @@ function sprae(container, values) {
   if (memo.has(container))
     return memo.get(container);
   values ||= {};
-  const state = SignalStruct(values);
-  const init = (el2) => {
-    if (el2.attributes) {
-      for (let i2 = 0; i2 < el2.attributes.length; ) {
-        let attr = el2.attributes[i2];
-        if (attr.name[0] !== ":") {
+  const updates = [];
+  const init = (el, parent = el.parentNode) => {
+    if (el.attributes) {
+      for (let i2 = 0; i2 < el.attributes.length; ) {
+        let attr2 = el.attributes[i2];
+        if (attr2.name[0] !== ":") {
           i2++;
           continue;
         }
-        el2.removeAttribute(attr.name);
-        let expr = attr.value;
-        let attrNames = attr.name.slice(1).split(":");
+        el.removeAttribute(attr2.name);
+        let expr = attr2.value;
+        let attrNames = attr2.name.slice(1).split(":");
         for (let attrName of attrNames) {
-          let dir = directives[attrName] || directives_default, res;
-          if ((res = dir(el2, expr, state, attrName)) <= 0)
-            return res;
+          let dir = directives[attrName] || directives_default;
+          updates.push(dir(el, expr, values, attrName) || (() => {
+          }));
+          if (memo.has(el) || el.parentNode !== parent)
+            return false;
         }
       }
     }
-    for (let i2 = 0, child; child = el2.children[i2]; i2++) {
-      let res = init(child) || 0;
-      i2 += res;
+    for (let i2 = 0, child; child = el.children[i2]; i2++) {
+      if (init(child, el) === false)
+        i2--;
     }
   };
   init(container);
+  const state = SignalStruct(values);
+  for (let update of updates)
+    b(() => update(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)&&l(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 a(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){return new f(t)}function l(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 h(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 c(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 v(t){f.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function p(t){return new v(t)}function d(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,y(t),e}finally{i=o,e()}}}function y(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,d(t)}function b(t){if(i!==this)throw new Error("Out-of-order effect");c(this),i=t,this.f&=-2,8&this.f&&y(this),e()}function m(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function g(t){var e=new m(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 g((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=a(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()}}}}),(v.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&&!l(this))return this.f&=-2,!0;var t=i;try{h(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,c(this),this.f&=-2,!0},v.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)},v.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)}},v.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},v.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(v.prototype,"value",{get:function(){1&this.f&&t();var e=a(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),m.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},m.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,d(this),h(this),n++;var e=i;return i=this,b.bind(this,e)},m.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},m.prototype.d=function(){this.f|=8,1&this.f||y(this)},Symbol.observable||=Symbol("observable");var S=new FinalizationRegistry((t=>t.call?.())),w=t=>t&&t.peek,x=Symbol("signal-struct");function O(t){if((e=t)&&e[x])return t;var e;let i,r;if(A(t)){i={},r={};let e=Object.getOwnPropertyDescriptors(t);for(let t in e)r[t]=j(i,t,e[t].get?p(e[t].get.bind(i)):e[t].value);return Object.defineProperty(i,x,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>O(t))):t}function j(t,e,i){let r,n=w(i)?i:A(i)||Array.isArray(i)?u(O(i)):u((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,a,f,l,h,c;return r&&(a=t=>n.value=t,(s=i)&&(c=(s[Symbol.observable]?.()||s).subscribe?.(a,f,undefined),h=c&&(()=>c.unsubscribe?.())||s.set&&s.call?.(l,a)||(s.then?.((t=>{!l&&a(t)}),f)||(async t=>{try{for await(t of s){if(l)return;a(t)}}catch(t){}})())&&(t=>l=1),S.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:!w(i)&&A(i)?t=>t?Object.assign(n.value,t):n.value=O(t):t=>n.value=O(t),enumerable:!0,configurable:!1}),n}function A(t){return t&&t.constructor===Object}var $=(t,e,i)=>{e.startsWith("on")&&(e=e.toLowerCase()),t[e]!==i&&(t[e]=i),null==i||!1===i?t.removeAttribute(e):"function"!=typeof i&&t.setAttribute(e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase())),!0===i?"":"number"==typeof i||"string"==typeof i?i:"class"===e?(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" "):"style"===e?Object.entries(i).map((([t,e])=>`${t}: ${e}`)).join(";"):"")};document.createElement("div");var E=(t,e,i,r=null)=>{let n,o,s,a=0,f=i.length,u=e.length,{remove:l,same:h,insert:c,replace:v}=E;for(;a<f&&a<u&&h(e[a],i[a]);)a++;for(;a<f&&a<u&&h(i[f-1],e[u-1]);)r=i[(--u,--f)];if(a==u)for(;a<f;)c(r,i[a++],t);else{for(n=e[a];a<f;)s=i[a++],o=n?n.nextSibling:r,h(n,s)?n=o:a<f&&h(i[a],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,l(n,t),n=o}return i};E.same=(t,e)=>t==e,E.replace=(t,e,i)=>i.replaceChild(e,t),E.insert=(t,e,i)=>i.insertBefore(e,t),E.remove=(t,e)=>e.removeChild(t);var k=E,N={},W={},C={},U=(t,e,i,r)=>{if(r.startsWith("on"))return L.on(t,`{"${r.split("-").map((t=>t.startsWith("on")?t.slice(2):t)).join("-")}": ${e}}`,i);let n=M(t,e,":"+r,i);g((()=>{return e=n(i),$(t,r,e);var e}))},L={},B=Symbol(":each"),P=Symbol(":ref");L.with=(t,i,r)=>{let o=M(t,i,"with",r);const s=p((()=>Object.assign({},r,o(r))));let a=I(t,s.value);return g(((t=s.value)=>function(t){if(n>0)return t();n++;try{return t()}finally{e()}}((()=>Object.assign(a,t))))),!1},L.ref=(t,e,i)=>t.hasAttribute(":each")?t[P]=e:(I(t,Object.assign(Object.create(i),{[e]:t})),!1),L.if=(t,e,i)=>{let r=document.createTextNode(""),n=[M(t,e,":if",i)],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(M(t,e,":else :if",i))):(s.remove(),o.push(s),n.push((()=>1)));t.replaceWith(s=r);let a=p((()=>n.findIndex((t=>t(i)))));return g(((t=a.value)=>o[t]!=s&&((s[B]||s).replaceWith(s=o[t]||r),I(s,i)))),-o.length},L.each=(t,e,i)=>{let r=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(!r)return T(new Error,t,e);const n=M(t,r.items,":each",i),o=t[B]=document.createTextNode("");t.replaceWith(o);const s=p((()=>{let e=n(i);return e?"number"==typeof e?Array.from({length:e},((t,e)=>[e,e+1])):e.constructor===Object?Object.entries(e):Array.isArray(e)?e.map(((t,e)=>[e+1,t])):void T(Error("Bad list value"),t,r.items,":each",e):[]})),a=new WeakMap,f=new WeakMap;let u=[];return g(((e=s.value)=>{let n=[],l=[];for(let[o,s]of e){let e=null===(h=s)?W:void 0===h?C:"number"==typeof h||h instanceof Number?N[h]||(N[h]=new Number(h)):"string"==typeof h||h instanceof String?N[h]||(N[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?N[h]||(N[h]=new Boolean(h)):h,u=f.get(e);if(u||(u=t.cloneNode(!0),f.set(e,u)),n.push(u),!a.has(e)){let n=Object.create(i);n[r.item]=s,r.index&&(n[r.index]=o),t[P]&&(n[t[P]]=u),a.set(e,n)}l.push(a.get(e))}var h;k(o.parentNode,u,n,o),u=n;for(let t=0;t<n.length;t++)I(n[t],l[t])})),-1},L.id=(t,e,i)=>{let r=M(t,e,":id",i);g((()=>{return e=r(i),t.id=e||0===e?e:"";var e}))},L[""]=(t,e,i)=>{let r=M(t,e,":",i);g((()=>(e=>{if(e)for(let i in e)$(t,i,e[i])})(r(i))))},L.text=(t,e,i)=>{let r=M(t,e,":text",i);g((()=>{return e=r(i),void(t.textContent=null==e?"":e);var e}))},L.value=(t,e,i)=>{let r=M(t,e,":in",i),[n,o]=(t=>["checkbox"===t.type?()=>t.checked:()=>t.value,"text"===t.type||""===t.type?e=>t.value=null==e?"":e:"checkbox"===t.type?e=>(t.value=e?"on":"",$(t,"checked",e)):"select-one"===t.type?e=>([...t.options].map((t=>t.removeAttribute("selected"))),t.value=e,t.selectedOptions[0]?.setAttribute("selected","")):e=>t.value=e])(t);g((()=>{return e=r(i),$(t,"value",e),void o(e);var e}))},L.on=(t,e,i)=>{let r=M(t,e,":on",i),n={};g((()=>{for(let e in n)t.removeEventListener(e,n[e]);n=r(i);for(let e in n){const i=e.split("-");if(1===i.length)t.addEventListener(e,n[e]);else{const r=(o,s=0)=>{t.addEventListener(i[s],n[e]=a=>{o=o(a),t.removeEventListener(i[s],n[e]),r(o,(s+1)%i.length)})};r(n[e])}}}))},L.data=(t,e,i)=>{let r=M(t,e,":data",i);const n=p((()=>r(i)));g(((e=n.value)=>{for(let i in e)t.dataset[i]=e[i]}))},L.aria=(t,e,i)=>{let r=M(t,e,":aria",i);g((()=>(e=>{for(let i in e)$(t,"aria"+i[0].toUpperCase()+i.slice(1),null==e[i]?null:e[i]+"")})(r(i))))};var D={};function M(t,e,i,r){if(D[e])return D[e];let n,o=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{n=new Function(`let result; with (arguments[0]) { result = (${o}) }; return result;`).bind(t)}catch(n){return T(n,t,e,i,r)}return D[e]=o=>{let s;try{s=n(o)}catch(n){return T(n,t,e,i,r)}return s}}function T(t,e,i,r,n){Object.assign(t,{element:e,expression:i}),console.warn(`∴sprae: ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e,n),setTimeout((()=>{throw t}),0)}var F=new WeakMap;function I(t,e){if(!t.children)return;if(F.has(t))return F.get(t);e||={};const i=O(e),r=t=>{if(t.attributes)for(let e=0;e<t.attributes.length;){let r=t.attributes[e];if(":"!==r.name[0]){e++;continue}t.removeAttribute(r.name);let n=r.value,o=r.name.slice(1).split(":");for(let e of o){let r;if((r=(L[e]||U)(t,n,i,e))<=0)return r}}for(let e,i=0;e=t.children[i];i++)i+=r(e)||0};return r(t),F.set(t,i),i}var z=I;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)&&l(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 f(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 u(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function a(t){return new u(t)}function l(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 h(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 c(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 v(t){u.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function p(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,d(t),e}finally{i=o,e()}}}function d(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,p(t)}function y(t){if(i!==this)throw new Error("Out-of-order effect");c(this),i=t,this.f&=-2,8&this.f&&d(this),e()}function b(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function m(t){var e=new b(t);return e.c(),e.d.bind(e)}u.prototype.h=function(){return!0},u.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)},u.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)},u.prototype.subscribe=function(t){var e=this;return m((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},u.prototype.valueOf=function(){return this.value},u.prototype.toString=function(){return this.value+""},u.prototype.peek=function(){return this.v},Object.defineProperty(u.prototype,"value",{get:function(){var t=f(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()}}}}),(v.prototype=new u).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&&!l(this))return this.f&=-2,!0;var t=i;try{h(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,c(this),this.f&=-2,!0},v.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)}u.prototype.S.call(this,t)},v.prototype.U=function(t){if(u.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)}},v.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},v.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(v.prototype,"value",{get:function(){1&this.f&&t();var e=f(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),b.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},b.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,p(this),h(this),n++;var e=i;return i=this,y.bind(this,e)},b.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},b.prototype.d=function(){this.f|=8,1&this.f||d(this)},Symbol.observable||=Symbol("observable");var g=new FinalizationRegistry((t=>t.call?.())),S=t=>t&&t.peek,x=Symbol("signal-struct");function w(t){if((e=t)&&e[x])return t;var e;let i,r;if(O(t)){i={},r={};let e=Object.getOwnPropertyDescriptors(t);for(let t in e)r[t]=A(i,t,e[t].get?new v(e[t].get.bind(i)):e[t].value);return Object.defineProperty(i,x,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>w(t))):t}function A(t,e,i){let r,n=S(i)?i:O(i)||Array.isArray(i)?a(w(i)):a((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,f,u,l,h,c;return r&&(f=t=>n.value=t,(s=i)&&(c=(s[Symbol.observable]?.()||s).subscribe?.(f,u,undefined),h=c&&(()=>c.unsubscribe?.())||s.set&&s.call?.(l,f)||(s.then?.((t=>{!l&&f(t)}),u)||(async t=>{try{for await(t of s){if(l)return;f(t)}}catch(t){}})())&&(t=>l=1),g.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:!S(i)&&O(i)?t=>t?Object.assign(n.value,t):n.value=w(t):t=>n.value=w(t),enumerable:!0,configurable:!1}),n}function O(t){return t&&t.constructor===Object}var j=(t,e,i,r=null)=>{let n,o,s,f=0,u=i.length,a=e.length,{remove:l,same:h,insert:c,replace:v}=j;for(;f<u&&f<a&&h(e[f],i[f]);)f++;for(;f<u&&f<a&&h(i[u-1],e[a-1]);)r=i[(--a,--u)];if(f==a)for(;f<u;)c(r,i[f++],t);else{for(n=e[f];f<u;)s=i[f++],o=n?n.nextSibling:r,h(n,s)?n=o:f<u&&h(i[f],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,l(n,t),n=o}return i};j.same=(t,e)=>t==e,j.replace=(t,e,i)=>i.replaceChild(e,t),j.insert=(t,e,i)=>i.insertBefore(e,t),j.remove=(t,e)=>e.removeChild(t);var N=j,E={},$={},k={},W={},C=(t,e,i,r)=>{if(r.startsWith("on"))return W.on(t,`{"${r.split("-").map((t=>t.startsWith("on")?t.slice(2):t)).join("-")}": ${e}}`,i);let n=D(t,e,":"+r);return e=>U(t,r,n(e))},U=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")};W[""]=(t,e,i)=>{let r=D(t,e,":");return e=>{let i=r(e);for(let e in i)U(t,T(e),i[e])}};var B=Symbol(":each"),L=Symbol(":ref");W.ref=(t,e,i)=>{t.hasAttribute(":each")?t[L]=e:i[e]=t},W.if=(t,e,i)=>{let r=document.createTextNode(""),n=[D(t,e,":if")],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(D(t,e,":else :if"))):(s.remove(),o.push(s),n.push((()=>1)));return t.replaceWith(s=r),t=>{let e=n.findIndex((e=>e(t)));o[e]!=s&&((s[B]||s).replaceWith(s=o[e]||r),I(s,t))}},W.each=(t,e,i)=>{let r=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(!r)return M(new Error,t,e);const n=t[B]=document.createTextNode("");t.replaceWith(n);const o=D(t,r.items,":each"),s=new WeakMap,f=new WeakMap;let u=[];return e=>{let i=o(e);i?"number"==typeof i?i=Array.from({length:i},((t,e)=>[e,e+1])):i.constructor===Object?i=Object.entries(i):Array.isArray(i)?i=i.map(((t,e)=>[e+1,t])):M(Error("Bad list value"),t,r.items,":each"):i=[];let a=[],l=[];for(let[n,o]of i){let i=null===(h=o)?$:void 0===h?k:"number"==typeof h||h instanceof Number?E[h]||(E[h]=new Number(h)):"string"==typeof h||h instanceof String?E[h]||(E[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?E[h]||(E[h]=new Boolean(h)):h,u=f.get(i);if(u||(u=t.cloneNode(!0),f.set(i,u)),a.push(u),!s.has(i)){let f=Object.create(e);f[r.item]=o,r.index&&(f[r.index]=n),t[L]&&(f[t[L]]=u),s.set(i,f)}l.push(s.get(i))}var h;N(n.parentNode,u,a,n),u=a;for(let t=0;t<a.length;t++)I(a[t],l[t])}},W.id=(t,e,i)=>{let r=D(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},W.class=(t,e,i)=>{let r=D(t,e,":class"),n=t.className;return e=>{let i=r(e);t.className=n+typeof i=="string"?i:(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},W.style=(t,e,i)=>{let r=D(t,e,":style");return e=>{let i=r(e);if("string"==typeof i)t.setAttribute("style",i);else for(let e in i)t.style[e]=i[e]}},W.text=(t,e,i)=>{let r=D(t,e,":text");return e=>{return i=r(e),void(t.textContent=null==i?"":i);var i}},W.value=(t,e,i)=>{let r=D(t,e,":in"),n="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"checkbox"===t.type?e=>(t.value=e?"on":"",U(t,"checked",e)):"select-one"===t.type?e=>([...t.options].map((t=>t.removeAttribute("selected"))),t.value=e,t.selectedOptions[0]?.setAttribute("selected","")):e=>t.value=e;return t=>n(r(t))},W.on=(t,e,i)=>{let r=D(t,e,":on"),n={};return e=>{for(let e in n)t.removeEventListener(e,n[e]);n=r(e);for(let e in n){const i=e.split("-");if(1===i.length)t.addEventListener(e,n[e]);else{const r=n[e],o=(s,f=0)=>{t.addEventListener(i[f],n[e]=u=>{s=s(u),t.removeEventListener(i[f],n[e]),++f<i.length&&"function"==typeof s?o(s,f):o(r)})};o(r)}}}},W.data=(t,e,i)=>{let r=D(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},W.aria=(t,e,i)=>{let r=D(t,e,":aria");return e=>(e=>{for(let i in e)U(t,"aria-"+T(i),null==e[i]?null:e[i]+"")})(r(e))};var P={};function D(t,e,i){if(P[e])return P[e];let r,n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=new Function(`let result; with (arguments[0]) { result = (${n}) }; return result;`).bind(t)}catch(r){return M(r,t,e,i)}return P[e]=n=>{let o;try{o=r(n)}catch(r){return M(r,t,e,i)}return o}}function M(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 T(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var F=new WeakMap;function I(t,e){if(!t.children)return;if(F.has(t))return F.get(t);e||={};const i=[],r=(t,n=t.parentNode)=>{if(t.attributes)for(let r=0;r<t.attributes.length;){let o=t.attributes[r];if(":"!==o.name[0]){r++;continue}t.removeAttribute(o.name);let s=o.value,f=o.name.slice(1).split(":");for(let r of f){let o=W[r]||C;if(i.push(o(t,s,e,r)||(()=>{})),F.has(t)||t.parentNode!==n)return!1}}for(let e,i=0;e=t.children[i];i++)!1===r(e,t)&&i--};r(t);const n=w(e);for(let t of i)m((()=>t(n)));return F.set(t,n),n}var z=I;export{z as default};

package/src/core.js

@@ -1,5 +1,6 @@
 import signalStruct from 'signal-struct';
 import defaultDirective, { directives } from './directives.js';
+import { effect, computed, batch } from '@preact/signals-core'
 
 // sprae element: apply directives
 const memo = new WeakMap
@@ -9,10 +10,10 @@ export default function sprae(container, values) {
 
   values ||= {};
 
-  const state = signalStruct(values);
+  const updates = []
 
   // init directives on element
-  const init = (el) => {
+  const init = (el, parent=el.parentNode) => {
     if (el.attributes) {
       for (let i = 0; i < el.attributes.length;) {
         let attr = el.attributes[i]
@@ -21,19 +22,27 @@ export default function sprae(container, values) {
         let expr = attr.value
         let attrNames = attr.name.slice(1).split(':')
         for (let attrName of attrNames) {
-          let dir = directives[attrName] || defaultDirective, res
-          if ((res = dir(el, expr, state, attrName)) <= 0) return res
+          let dir = directives[attrName] || defaultDirective;
+          updates.push(dir(el, expr, values, attrName) || (()=>{}));
+
+          // stop if element was spraed by directive or skipped
+          if (memo.has(el) || el.parentNode !== parent) return false
         }
       }
     }
 
     for (let i = 0, child; child = el.children[i]; i++) {
-      let res = init(child) || 0 // reduce number of removed elements
-      i += res
+      // if element was removed from parent (skipped) - reduce index
+      if (init(child, el) === false) i--
     }
   }
 
-  init(container)
+  init(container);
+
+  // call updates: subscribes directives to state;
+  // state is created after inits because directives can extend init values (expose refs etc)
+  const state = signalStruct(values);
+  for (let update of updates) effect(() => update(state));
 
   memo.set(container, state);
 

package/src/directives.js

@@ -1,51 +1,49 @@
 // directives & parsing
 import sprae from './core.js'
-import { prop, input } from 'element-props'
-// import { effect, computed, batch } from 'usignal/sync'
-import { effect, computed, batch } from '@preact/signals-core'
 import swap from 'swapdom'
 import p from 'primitive-pool'
 
+// reserved directives - order matters!
+export const directives = {}
 
 // any-prop directives
-export default (el, expr, state, name) => {
+export default (el, expr, values, name) => {
   if (name.startsWith('on')) {
     // :ona:onb=x -> :on={a:x,b:x}
     // :ona-onb=x -> :on={aB:x}
-    return directives.on(el, `{"${name.split('-').map(n=>n.startsWith('on')?n.slice(2):n).join('-')}": ${expr}}`, state)
+    return directives.on(el, `{"${name.split('-').map(n=>n.startsWith('on')?n.slice(2):n).join('-')}": ${expr}}`, values)
   }
-  let evaluate = parseExpr(el, expr, ':'+name, state)
-  const update = value => prop(el, name, value)
-  effect(() => update(evaluate(state)))
-}
+  let evaluate = parseExpr(el, expr, ':'+name)
 
-// reserved directives - order matters!
-export const directives = {}
-
-const _each = Symbol(':each'), _ref = Symbol(':ref')
+  return (state) => attr(el, name, evaluate(state))
+}
 
-directives['with'] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, 'with', rootState)
+// 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 : '')
+}
 
-  // Instead of extending signals (which is a bit hard since signal-struct internals is not uniform)
-  // we bind updating
-  const params = computed(() => Object.assign({}, rootState, evaluate(rootState)))
-  let state = sprae(el, params.value)
-  effect((values=params.value) => batch(() => Object.assign(state, values)))
-  return false // don't continue attrs init
+directives[''] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':')
+  return (state) => {
+    let value = evaluate(state)
+    for (let key in value) attr(el, dashcase(key), value[key]);
+  }
 }
 
-directives['ref'] = (el, expr, state) => {
-  // make sure :ref is initialized after :each
-  if (el.hasAttribute(':each')) return el[_ref] = expr;
+const _each = Symbol(':each'), _ref = Symbol(':ref')
+
+directives['ref'] = (el, expr, values) => {
+  // make sure :ref is initialized after :each (return to avoid initializing as signal)
+  if (el.hasAttribute(':each')) {el[_ref] = expr; return};
 
-  sprae(el, Object.assign(Object.create(state), {[expr]: el}))
-  return false // don't continue attrs init
+  values[expr] = el;
 }
 
-directives['if'] = (el, expr, state) => {
+directives['if'] = (el, expr, values) => {
   let holder = document.createTextNode(''),
-      clauses = [parseExpr(el, expr, ':if', state)],
+      clauses = [parseExpr(el, expr, ':if')],
       els = [el], cur = el
 
   while (cur = el.nextElementSibling) {
@@ -53,7 +51,7 @@ directives['if'] = (el, expr, state) => {
       cur.removeAttribute(':else');
       if (expr = cur.getAttribute(':if')) {
         cur.removeAttribute(':if'), cur.remove();
-        els.push(cur); clauses.push(parseExpr(el, expr, ':else :if', state));
+        els.push(cur); clauses.push(parseExpr(el, expr, ':else :if'));
       }
       else {
         cur.remove(); els.push(cur); clauses.push(() => 1);
@@ -63,40 +61,43 @@ directives['if'] = (el, expr, state) => {
   }
 
   el.replaceWith(cur = holder)
-  let idx = computed(() => clauses.findIndex(f => f(state)))
-  // NOTE: it lazily initializes elements on insertion, it's safe to sprae multiple times
-  effect((i=idx.value) => (els[i] != cur && ((cur[_each]||cur).replaceWith(cur = els[i] || holder), sprae(cur, state))))
 
-  // indicate number of removed elements
-  return -els.length
+  return (state) => {
+    let i = clauses.findIndex(f => f(state))
+    if (els[i] != cur) {
+      (cur[_each] || cur).replaceWith(cur = els[i] || holder);
+      // NOTE: it lazily initializes elements on insertion, it's safe to sprae multiple times
+      sprae(cur, state);
+    }
+  }
 }
 
-directives['each'] = (tpl, expr, state) => {
+directives['each'] = (tpl, expr, values) => {
   let each = parseForExpression(expr);
   if (!each) return exprError(new Error, tpl, expr);
 
-  const getItems = parseExpr(tpl, each.items, ':each', state);
-
   // FIXME: make sure no memory leak here
   // we need :if to be able to replace holder instead of tpl for :if :each case
   const holder = tpl[_each] = document.createTextNode('')
   tpl.replaceWith(holder)
 
-  const items = computed(()=>{
-    let list = getItems(state)
-    if (!list) return []
-    if (typeof list === 'number') return Array.from({length: list}, (_, i)=>[i, i+1])
-    if (list.constructor === Object) return Object.entries(list)
-    if (Array.isArray(list)) return list.map((item,i) => [i+1, item])
-    exprError(Error('Bad list value'), tpl, each.items, ':each', list)
-  })
+  const evaluate = parseExpr(tpl, each.items, ':each');
 
   // stores scope per data item
   const scopes = new WeakMap()
   // element per data item
   const itemEls = new WeakMap()
   let curEls = []
-  effect((list=items.value) => {
+
+  return (state) => {
+    // get items
+    let list = evaluate(state)
+    if (!list) list = []
+    else if (typeof list === 'number') list = Array.from({length: list}, (_, i)=>[i, i+1])
+    else if (list.constructor === Object) list = Object.entries(list)
+    else if (Array.isArray(list)) list = list.map((item,i) => [i+1, item])
+    else exprError(Error('Bad list value'), tpl, each.items, ':each', list)
+
     // collect elements/scopes for items
     let newEls = [], elScopes = []
 
@@ -128,9 +129,7 @@ directives['each'] = (tpl, expr, state) => {
     for (let i = 0; i < newEls.length; i++) {
       sprae(newEls[i], elScopes[i])
     }
-  })
-
-  return -1 // count back for 1
+  }
 }
 
 // This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
@@ -157,48 +156,63 @@ function parseForExpression(expression) {
   return res
 }
 
-directives['id'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':id', state)
+directives['id'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':id')
   const update = v => el.id = v || v === 0 ? v : ''
-  effect(()=>update(evaluate(state)))
+  return (state) => update(evaluate(state))
 }
 
-directives[''] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':', state)
-  const update = (value) => {
-    if (!value) return
-    for (let key in value) prop(el, key, value[key]);
+directives['class'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':class')
+  let initClassName = el.className
+  return (state) => {
+    let v = evaluate(state)
+    el.className = initClassName + typeof v === 'string' ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k,v])=>v?k:'')).filter(Boolean).join(' ')
   }
-  effect(()=>update(evaluate(state)))
 }
 
-directives['text'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':text', state)
+directives['style'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':style')
+  return (state) => {
+    let v = evaluate(state)
+    if (typeof v === 'string') el.setAttribute('style', v)
+    else for (let k in v) el.style[k] = v[k]
+  }
+}
+
+directives['text'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':text')
 
   const update = (value) => {
     el.textContent = value == null ? '' : value;
   }
 
-  effect(()=>update(evaluate(state)))
+  return (state) => update(evaluate(state))
 }
 
 // connect expr to element value
-directives['value'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':in', state)
-
-  let [get, set] = input(el);
-
-  const update = (value) => {
-    prop(el, 'value', value)
-    set(value);
-  }
-  effect(()=>update(evaluate(state)))
+directives['value'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':in')
+
+  let update = (
+    el.type === 'text' || el.type === '' ? value => el.setAttribute('value', el.value = value == null ? '' : value) :
+    el.type === 'checkbox' ? value => (el.value = value ? 'on' : '', attr(el, 'checked', value)) :
+    el.type === 'select-one' ? value => (
+      [...el.options].map(el => el.removeAttribute('selected')),
+      el.value = value,
+      el.selectedOptions[0]?.setAttribute('selected', '')
+    ) :
+    value => el.value = value
+  )
+
+  return (state) => update(evaluate(state))
 }
 
-directives['on'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':on', state)
+directives['on'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':on')
   let listeners = {}
-  effect(() => {
+
+  return (state) => {
     for (let evt in listeners) el.removeEventListener(evt, listeners[evt]);
 
     listeners = evaluate(state);
@@ -219,23 +233,24 @@ directives['on'] = (el, expr, state) => {
         nextEvt(startFn)
       }
     };
-  })
+  }
 }
 
-directives['data'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':data', state)
-  const value = computed(() => evaluate(state))
-  effect((v=value.value) => {
-    for (let key in v) el.dataset[key] = v[key];
+directives['data'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':data')
+
+  return ((state) => {
+    let value = evaluate(state)
+    for (let key in value) el.dataset[key] = value[key];
   })
 }
 
-directives['aria'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':aria', state)
+directives['aria'] = (el, expr, values) => {
+  let evaluate = parseExpr(el, expr, ':aria')
   const update = (value) => {
-    for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key] == null ? null : value[key] + '');
+    for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
   }
-  effect(() => update(evaluate(state)))
+  return ((state) => update(evaluate(state)))
 }
 
 
@@ -243,7 +258,7 @@ let evaluatorMemo = {}
 
 // borrowed from alpine: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
 // it seems to be more robust than subscript
-function parseExpr(el, expression, dir, scope) {
+function parseExpr(el, expression, dir) {
   if (evaluatorMemo[expression]) return evaluatorMemo[expression]
 
   // Some expressions that are useful in Alpine are not valid as the right side of an expression.
@@ -262,20 +277,24 @@ function parseExpr(el, expression, dir, scope) {
   try {
     evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el)
   } catch ( e ) {
-    return exprError(e, el, expression, dir, scope)
+    return exprError(e, el, expression, dir)
   }
 
   // guard runtime eval errors
   return evaluatorMemo[expression] = (state) => {
     let result
     try { result = evaluate(state) }
-    catch (e) { return exprError(e, el, expression, dir, scope) }
+    catch (e) { return exprError(e, el, expression, dir) }
     return result
   }
 }
 
-export function exprError(error, element, expression, dir, scope) {
+export function exprError(error, element, expression, dir) {
   Object.assign( error, { element, expression } )
-  console.warn(`∴sprae: ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, element, scope)
+  console.warn(`∴ ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, element)
   setTimeout(() => { throw error }, 0)
 }
+
+function dashcase(str) {
+	return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
+};

package/test/test.js

@@ -49,7 +49,7 @@ test('common: style', async () => {
   let params = sprae(el, {style: "top: 1px"})
   is(el.outerHTML, `<x style="top: 1px"></x>`)
   params.style = {top: '2px'}
-  is(el.outerHTML, `<x style="top: 2px"></x>`)
+  is(el.outerHTML, `<x style="top: 2px;"></x>`)
 })
 
 test('common: class', async () => {
@@ -64,9 +64,9 @@ test('common: class', async () => {
 })
 
 test('props: base', async () => {
-  let el = h`<input :id="0" :="{for:1, title:2, help:3, type:4, placeholder: 5, value: 6}" :value="7"/>`
+  let el = h`<input :id="0" :="{for:1, title:2, help:3, type:4, placeholder: 5, value: 6, aB: 8}" :value="7"/>`
   let params = sprae(el)
-  is(el.outerHTML, `<input id="0" for="1" title="2" help="3" type="4" placeholder="5" value="7">`)
+  is(el.outerHTML, `<input id="0" for="1" title="2" help="3" type="4" placeholder="5" value="7" a-b="8">`)
 })
 
 test('props: multiprop', async () => {
@@ -412,7 +412,7 @@ test('on: chain of events', e => {
   is(state.log, ['mousedown','mousemove','mouseup'])
 })
 
-test('with: inline', () => {
+test.skip('with: inline', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
@@ -420,7 +420,7 @@ test('with: inline', () => {
   state.baz = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test('with: inline reactive', () => {
+test.skip('with: inline reactive', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let baz = signal('qux')
   let state = sprae(el, {baz})
@@ -429,7 +429,7 @@ test('with: inline reactive', () => {
   baz.value = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test('with: data', () => {
+test.skip('with: data', () => {
   let el = h`<x :with="x"><y :text="foo"></y></x>`
   let state = sprae(el, {x:{foo:'bar'}})
   is(el.innerHTML, `<y>bar</y>`)
@@ -437,7 +437,7 @@ test('with: data', () => {
   Object.assign(state, {x:{foo:'baz'}})
   is(el.innerHTML, `<y>baz</y>`)
 })
-test('with: transparency', () => {
+test.skip('with: transparency', () => {
   // NOTE: y:text initializes through directive, not through parent
   // therefore by default :text uses parent's state, not defined by element itself
   let el = h`<x :with="{foo:'foo'}"><y :with="b" :text="foo+bar"></y></x>`
@@ -446,7 +446,7 @@ test('with: transparency', () => {
   params.b.bar = 'baz'
   is(el.innerHTML, `<y>foobaz</y>`)
 })
-test('with: reactive transparency', () => {
+test.skip('with: reactive transparency', () => {
   let el = h`<x :with="{foo:1}"><y :with="b.c" :text="foo+bar"></y></x>`
   const bar = signal('2')
   sprae(el, {b:{c:{bar}}})
@@ -454,7 +454,7 @@ test('with: reactive transparency', () => {
   bar.value = '3'
   is(el.innerHTML, `<y>13</y>`)
 })
-test('with: writes to state', () => {
+test.skip('with: writes to state', () => {
   let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
@@ -471,16 +471,17 @@ test('ref: base', () => {
   is(a.outerHTML, `<a>1</a>`)
   state.b = 2
   is(a.outerHTML, `<a>2</a>`)
+  is(state.a, a, 'Exposes to the state');
 })
 
-test('ref: :ref with :each', () => {
+test('ref: with :each', () => {
   let a = h`<y><x :ref="x" :each="item in items" :text="log.push(x), item"/></y>`
   let state = sprae(a, {log: [], items: [1,2]})
   is(a.innerHTML, `<x>1</x><x>2</x>`)
   is(state.log, [...a.children])
 })
 
-test('any: reactive values', async () => {
+test(':: reactive values', async () => {
   let a = new Promise((ok) => setTimeout(() => ok(2), 10))
 
   let el = h`<x :text="a">1</x>`
@@ -491,13 +492,13 @@ test('any: reactive values', async () => {
   is(el.outerHTML, `<x>2</x>`)
 })
 
-test('any: scope refers to current element', async () => {
+test(':: scope refers to current element', async () => {
   let el = h`<x :text="log.push(this)"></x>`
   let state = sprae(el, {log:[]})
   is(state.log, [el])
 })
 
-test.skip('any: scope directives must come first', async () => {
+test.skip(':: scope directives must come first', async () => {
   // NOTE: we init attributes in order of definition
   let a = h`<x :text="y" :with="{y:1}" :ref="x"></x>`
   sprae(a, {})