sprae 2.2.4 → 2.3.1

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.4",
+  "version": "2.3.1",
   "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,15 @@
 * [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.
@@ -179,7 +191,7 @@
     + methods provided in `init` may not have access to scope _yet_.
       ~- not reliable way to obtain scope via `this.x` - better be explicit as `state.x`
 
-## [ ] :onconnected/:ondisconnected? -> let's add
+## [x] :onconnected/:ondisconnected? -> let's move to plugins for now
 
   -> waiting for use-case
 
@@ -211,6 +223,8 @@
 * @sprae/item: `<x :item="{type:a, scope:b}"` – provide microdata
   - can be solved naturally, unless there's special meaning
 * @sprae/hcodes: `<x :hcode=""` – provide microformats
+* @sprae/with
+* @sprae/connected
 
 ## [x] Write any-attributes via :<prop>? -> yep
 
@@ -239,7 +253,7 @@
   + it has better control over serialization
   + `:onchange:oninput="e=>xyz"` is very good
 
-## [ ] Sandbox?
+## [ ] Sandbox? -> too complex for now. Waiting for use-cases
 
 1. Use subscript?
   + solves access to any internal signals on syntactic level
@@ -259,6 +273,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 +289,12 @@
   - 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
+  - possibly longer init
+
+## [ ] Better :ref
+  + :ref="`a-${1}`"
+  + :id:ref="xyz"
+  ? maybe id should have same signature

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>
 
@@ -148,9 +148,11 @@ Add event listeners.
 <input :value="text" :oninput:onchange="e => text=e.target.value">
 
 <!-- Sequence of events -->
-<button :onfocus-onblur="e => { // onfocus
+<button :onfocus-onblur="e => {
+  // onfocus
   let id = setInterval(track,200)
-  return e => { // onblur
+  return e => {
+    // onblur
     clearInterval(id)
   }
 }">
@@ -176,34 +178,15 @@ 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.
 
 ```html
 <input :data="{foo: 1, barBaz: true}" />
+<!--
+<input data-foo="1" data-bar-baz="true" />
+-->
 ```
 
 #### `:aria="values"`
@@ -211,26 +194,42 @@ Set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
 Set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes. Boolean values are stringified.
 
 ```html
-<input type="text" id="jokes" role="combobox" :aria="{
+<input role="combobox" :aria="{
   controls: 'joketypes',
   autocomplete: 'list',
   expanded: false,
   activeOption: 'item1',
   activedescendant: ''
 }" />
+<!--
+<input role="combobox" aria-controls="joketypes" aria-autocomplete="list" aria-expanded="false" aria-active-option="item1" aria-activedescendant="">
+-->
 ```
 
 #### `:ref="id"`
 
-Expose element to a subtree fragment with the `id`.
+Expose element to data scope with the `id`:
 
 ```html
-<li :ref="item">
-  <input
-    :onfocus="e => item.classList.add('editing')"
-    :onblur="e => item.classList.remove('editing')"
-  />
-</li>
+<!-- single item -->
+<textarea :ref="text" placeholder="Enter text..."></textarea>
+
+<!-- iterable items -->
+<ul>
+  <li :each="item in items" :ref="item">
+    <input
+      :onfocus-onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"
+    />
+  </li>
+</ul>
+
+<script type="module">
+  import sprae from 'sprae';
+  let state = sprae(document, {items: ['a','b','c']})
+
+  // element is in the state
+  state.text // <textarea></textarea>
+</script>
 ```
 
 <!--
@@ -257,20 +256,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 supports signal values, which can be an alternative way to control template state:
 
 ```html
 <div id="done" :text="loading ? 'loading' : result">...</div>
@@ -292,7 +278,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,11 +292,11 @@ 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">
-  <span :text="x">x</span> + <span :text="y">y</span> = <span :text="sum">z</span>
+  <span :text="x">x</span> + <span :text="y">y</span> = <span :text="z">z</span>
 </div>
 
 <script type="module">
@@ -318,17 +304,19 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
   let state = sprae(document, { x:1, y:1, get z() { return this.x + this.y } })
 
   state.x = 2, state.y = 2
+  state.z // 4
 </script>
 ```
 
 ## Examples
 
 * TODO MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.html)
+* Waveedit: [demo](), [code](https://github.com/dy/waveedit)
 
 ## Justification
 
 * [Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [svg attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). Also ergonomics of `attr="{{}}"` is inferior to `:attr=""` since it creates flash of uninitialized values.
-* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.
+* [Alpine](https://github.com/alpinejs/alpine) / [vue](https://github.com/vuejs/petite-vue) / [lit](https://github.com/lit/lit/tree/main/packages/lit-html) escapes native HTML quirks, but the syntax is a bit scattered: `:attr`, `v-*`,`x-*`, `@evt`, `{{}}` can be expressed with single convention. Besides, functionality is too broad and can be reduced to essence: perfection is when there's nothing to take away, not add. Also they tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223), making interop hard.
 * React/[preact](https://ghub.io/preact) does the job wiring up JS to HTML, but with an extreme of migrating HTML to JSX and enforcing SPA, which is not organic for HTML. Also it doesn't support reactive fields (needs render call).
 
 _sprae_ takes convention of _templize directives_ (_alpine_/_vue_ attrs) and builds upon [_@preact/signals_](https://ghub.io/@preact/signals).

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,54 +576,59 @@ 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]);
+            el.removeEventListener(evts[cur], listeners[evt]);
             if (++cur < evts.length && typeof fn === "function")
               nextEvt(fn, cur);
             else
@@ -658,56 +639,59 @@ directives["on"] = (el2, expr, state) => {
       }
     }
     ;
-  });
+  };
 };
-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(`__scope`, `with (__scope) { return (${rightSideSafeExpression}) };`).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();
@@ -717,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=n[e],o=(s,a=0)=>{t.addEventListener(i[a],n[e]=f=>{s=s(f),t.removeEventListener(i[a],n[e]),++a<i.length&&"function"==typeof s?o(s,a):o(r)})};o(r)}}}))},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 a(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function u(t){return new a(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){a.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)}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 m((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=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 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&&!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)}a.prototype.S.call(this,t)},v.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)}},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)?u(w(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,f,a,l,h,c;return r&&(f=t=>n.value=t,(s=i)&&(c=(s[Symbol.observable]?.()||s).subscribe?.(f,a,undefined),h=c&&(()=>c.unsubscribe?.())||s.set&&s.call?.(l,f)||(s.then?.((t=>{!l&&f(t)}),a)||(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,a=i.length,u=e.length,{remove:l,same:h,insert:c,replace:v}=j;for(;f<a&&f<u&&h(e[f],i[f]);)f++;for(;f<a&&f<u&&h(i[a-1],e[u-1]);)r=i[(--u,--a)];if(f==u)for(;f<a;)c(r,i[f++],t);else{for(n=e[f];f<a;)s=i[f++],o=n?n.nextSibling:r,h(n,s)?n=o:f<a&&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,M(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),F(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 _(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 a=[];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])):_(Error("Bad list value"),t,r.items,":each"):i=[];let u=[],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,a=f.get(i);if(a||(a=t.cloneNode(!0),f.set(i,a)),u.push(a),!s.has(i)){let f=Object.create(e);f[r.item]=o,r.index&&(f[r.index]=n),t[L]&&(f[t[L]]=a),s.set(i,f)}l.push(s.get(i))}var h;N(n.parentNode,a,u,n),a=u;for(let t=0;t<u.length;t++)F(u[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]=a=>{s=s(a),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-"+M(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("__scope",`with (__scope) { return (${n}) };`).bind(t)}catch(r){return _(r,t,e,i)}return P[e]=n=>{let o;try{o=r(n)}catch(r){return _(r,t,e,i)}return o}}function _(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 M(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var T=new WeakMap;function F(t,e){if(!t.children)return;if(T.has(t))return T.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)||(()=>{})),T.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 T.set(t,n),n}var I=F;export{I 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,51 @@
 // 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
+  // FIXME: wait for complex ref use-case
+  // parseExpr(el, `__scope[${expr}]=this`, ':ref')(values)
+  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 +53,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 +63,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 +131,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 +158,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 +235,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 +260,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.
@@ -260,22 +277,26 @@ function parseExpr(el, expression, dir, scope) {
   // guard static-time eval errors
   let evaluate
   try {
-    evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el)
+    evaluate = new Function(`__scope`,`with (__scope) { return (${rightSideSafeExpression}) };`).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, {})