sprae 2.1.1 → 2.2.0

package/examples/todomvc.html

@@ -77,7 +77,7 @@
   <script src="https://unpkg.com/todomvc-common/base.js"></script>
   <script type="importmap"> {
     "imports": {
-      "sprae": "../../sprae.js",
+      "sprae": "https://cdn.skypack.dev/sprae",
       "plur": "https://cdn.skypack.dev/plur"
     }
   }

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "2.1.1",
-  "main": "sprae.js",
+  "version": "2.2.0",
+  "main": "src/index.js",
+  "module": "src/index.js",
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.2.2",
-    "element-props": "^2.3.0",
+    "element-props": "^2.4.2",
+    "jsdom": "^20.0.3",
     "primitive-pool": "^2.0.0",
     "signal-struct": "^1.5.1",
     "sube": "^2.2.1",
@@ -14,7 +16,6 @@
   },
   "devDependencies": {
     "@preact/signals": "^1.1.2",
-    "browser-env": "^3.3.0",
     "es-module-shims": "^1.6.2",
     "esbuild": "^0.15.14",
     "hyperf": "^1.4.0",
@@ -25,7 +26,7 @@
     "wait-please": "^3.1.0"
   },
   "scripts": {
-    "test": "node -r browser-env/register test/test.js",
+    "test": "node -r ./test/register.cjs test/test.js",
     "build": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm",
     "watch": "esbuild --bundle ./src/index.js --outfile=sprae.js --format=esm --sourcemap --watch",
     "min": "terser sprae.js -o sprae.min.js --module -c passes=3 -m"

package/plan.md

@@ -18,11 +18,17 @@
 * [x] expand to any subscribables: both as state vars
 * [x] :ref
 * [x] :ref + :each
+* [x] event chains :ona-onb
+* [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"
 * [ ] optimization: replace element-props with direct (better) setters
+  * [ ] Make sure `false` gets serialized, not removes attr
 * [ ] report usignal problem
 * [ ] :onconnect, :ondisconnect
 * [ ] frameworks benchmark
 * [ ] examples
-  * [ ] todomvc
-* [ ] Sandbox expressions: no global, no "scope" object name, no "arguments"
-* [ ] `this` in expressions must refer to current element always
+  * [x] todomvc
+  * [ ] wave-edit
+* [ ] Sandbox expressions: no global, no "scope" object name, no "arguments"

package/r&d.md

@@ -1,4 +1,4 @@
-## [x] name -> sprea
+## [x] name -> sprae
 
 * rasa
 * dew
@@ -130,15 +130,16 @@
 + `:else :if` doesn't throw error in JSDOM tests
 - less resemblance with vue: who cares, we already remotely resemble it
 
-## [x] Keep className marker of directive or not?
+## [x] Keep className marker of directive or not? -> no
 
 -> No: first, there's :class directive changing the class itself;
 -> Second, there's easier way to just "evaporate" directive = not initialize twice;
 -> Third, there's too much pollution with class markers
 
-## [ ] :html?
+## [x] :html? ->  Nope: can be implemented via any prop
 
   - introduces malign hole of including sprae inside of html
+  - nah: can easily be done manually as `:html="this.innerHTML = abc"`. Just need passing context
 
 ## [x] :fx? -> nah, already works. Just return `null` in any attr, that's it.
 
@@ -146,21 +147,68 @@
   - doesn't necessarily useful, since any directive is already an effect
   + works already out of box, just creates `fx` attribute if value is returned
 
-## [x] :init? -> same as fx.
+## [x] :init? -> same as :fx="initCode".
 
   * waiting for use-case
 
-## [ ] :key.enter?
+## [x] :key.enter? -> no, can be done manually
 
   - opens gateway to generic modifiers
   - introduces a whole mental layer to learn, including combinations of modifiers all around.
-
-## [ ] :onconnected/disconnected?
+  - can be conflicting with event classes.
+  - too adhoc-y
+  - can be easily done as `:onkeypress="e => e.key === 'Enter'"`
+  -> waiting for use-case
+
+## [x] :key:boolean="abc" -> nope: can be done manually
+
+  ? do we really need typecast?
+  - it can be done manually as `:key="Boolean(abc)"`
+
+## [ ] `this` in expressions must refer to current element or scope? -> to current element
+
+  1. `this === element`
+    + Allows this.innerHTML and other customs
+      - Can be done easily via `:ref="xxx"`
+        + External handlers don't have access to refs.
+    + Existing convention
+  2. `this === scope`
+    - scope is not supposed to be extendible
+    - scope is already available
+    + 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?
+
+  -> waiting for use-case
+
+## [x] Chain of events: often useful to have shared context. -> Try `:onevent-onanotherevent`
+
+  * focus/blur, connected/disconnected, mousedown/mouseup, keydown/keyup, touchstart/touchmove/touchend, dragstart/dragover/dragend, animationstart/animationover/animationend, transitionstart/transitionend
+  ? is there a way to organize handlers for chains of events?
+    1. :onfocus:onblur="e => e => {}"
+      - :onblur looks more like a pseudo
+      + a bit better distinctive visually, less noisy
+      - combining root-level attrs them doesn't seem very intuitive for fn waterfall.
+    2. :onfocus-blur="e => e => {}"
+      - ? is there dash-events? looks like a single event
+      - ? why not :on-focus-blur
+      - ? why not :onfocus-onblur
+      + can be converted from on="{ focusBlur: event }" via dash notation
+      + less :on prefixes
+      + has better "flowy" meaning
+    * 2.1 :onfocus-onblur="e => e => {}"
+      + distinctive visually as 1
+      + flowy nature of 2
+    3. :onfocus.onblur="e => e => {}"
+      - looks like a modifier
+      - . can be used as event class onclick.x
 
 ## [ ] Plugins
 
 * @sprae/tailwind: `<x :tw="mt-1 mx-2"></x>` - separate tailwind utility classes from main ones; allow conditional setters.
 * @sprae/item: `<x :item="{type:a, scope:b}"` – provide microdata
+  - can be solved naturally, unless there's special meaning
 * @sprae/hcodes: `<x :h=""` – provide microformats
 
 ## [x] Write any-attributes via :<prop>? -> yep
@@ -188,6 +236,7 @@
   + overhead is minimal
   + react-like
   + it has better control over serialization
+  + `:onchange:oninput="e=>xyz"` is very good
 
 ## [ ] Sandbox?
 
@@ -207,11 +256,13 @@
   + Deps can be analyzed / implemented without signals
   - Screwed up debugging / stacktrace (unless errored)
   + 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.
 
-## [ ] :onclick="direct code" ?
+## [x] :onclick="direct code" ? -> no: immediately invoked.
 
   + compatible with direct `onclick=...`
   + no need for arrow/regular functions syntax in templates
     - still need that syntax for filters, maps etc
   + can be made async by default
-  - illicit `event` object
+  - illicit `event` object
+  - conflicts with regular attrs logic: the code is immediately invoked and can assign a function.

package/readme.md

@@ -108,7 +108,7 @@ Set style value from object or a string.
 <!--
 #### `:value="value"`
 
-Bind (2-way) value to input, textarea or select.
+Set value of an input, textarea or select.
 
 ```html
 <input :with="{text: ''}" :value="text" />
@@ -122,19 +122,62 @@ Bind (2-way) value to input, textarea or select.
 
 #### `:<prop>="value"`, `:="props"`
 
-Set any other prop or props value.
+Set any prop value.
 
 ```html
+<!-- Single property -->
 <label :for="name" :text="name" />
-<input :="{ id: name, name, type, value }" :onchange="e => value=e.target.value" />
+
+<!-- Multiple properties -->
+<input :id:name="name" />
+
+<!-- Bulk properties -->
+<input :="{ id: name, name, type:'text', value }" />
 ```
 
-#### `:on="events"`
+#### `:on<event>="handler"`, `:on="events"`
 
 Add event listeners.
 
 ```html
-<button :on="{ click: handler, touch: handler }">Submit</button>
+<!-- Single event -->
+<input type="checkbox" :onchange="e => isChecked=e.target.value">
+
+<!-- Multiple events -->
+<input :value="text" :oninput:onchange="e => text=e.target.value">
+
+<!-- Sequence of events -->
+<button :onfocus-onblur="e => { // onfocus
+  let id = setInterval(track,200)
+  return e => { // onblur
+    clearInterval(id)
+  }
+}">
+
+<!-- Bulk/custom events -->
+<button :on="{ click: handler, touch: handler, special: handler }">Submit</button>
+```
+
+#### `: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"`
@@ -159,28 +202,20 @@ Set [aria-role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA)
 }" />
 ```
 
-#### `:with="data"`
-
-Set data for a subtree fragment scope.
-
-```html
-<x :with="{ foo: 'bar' }">
-  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
-</x>
-```
-
+<!--
 #### `:ref="id"`
 
 Expose element to a subtree fragment with the `id`.
 
 ```html
-<li :ref="item">
+<li :with="{ item: this }">
   <input
-    :onfocus="e=> item.classList.add('editing')"
+    :onfocus="e => item.classList.add('editing')"
     :onblur="e => item.classList.remove('editing')"
   />
 </li>
 ```
+-->
 
 <!--
 
@@ -192,8 +227,7 @@ _sprae_ is built on top of [_@preact/signals_](https://ghub.io/@preact/signals).
 * Expressions support any reactive values in data (see [sube](https://github.com/dy/sube))
 * Updates happen minimally only when used values update
 * Subscription is weak and get disposed when element is disposed.
--->
-<!--
+
 Directive expressions are natively reactive, ie. data may contain any async/reactive values, such as:
 
 * _Promise_ / _Thenable_
@@ -203,32 +237,62 @@ Directive expressions are natively reactive, ie. data may contain any async/reac
 * etc., see [sube](https://github.com/dy/sube/blob/main/README.md) for the full list.
 
 This way, for example, _@preact/signals_ or _rxjs_ can be connected directly bypassing subscription or reading value.
-
-Update happens when any value changes:
 -->
-<!--
+
+## Hints
+
+**1.** Attributes are initialized in order, so pay attention providing scope 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:
+
 ```html
 <div id="done" :text="loading ? 'loading' : result">...</div>
 
-<script>
+<script type="module">
   import sprae from 'sprae';
   import { signals } from '@preact/signals';
 
   // <div id="done">...</div>
 
   const loading = signal(true), result = signal(false);
-
   sprae(done, { loading, result })
+  setTimeout(() => (loading.value = true, result.value = 'done'), 1000)
 
   // <div id="done">loading</div>
 
-  setTimeout(() => (loading.value = true, result.value = 'done'), 1000)
-
   // ... 1s after
   // <div id="done">done</div>
 </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.
+
+```html
+<div :text="clicks">#</div> clicks
+
+<script type="module">
+  import sprae from 'sprae';
+  import { fromEvent, scan } from 'rxjs';
+  sprae(document, {
+    clicks: fromEvent(document, 'click').pipe(scan((count) => count + 1, 0))
+  });
+</script>
+```
+
+## Examples
+
+* TODO MVC: [demo](https://dy.github.io/sprae/examples/todomvc), [code](https://github.com/dy/sprae/blob/main/examples/todomvc.html)
 
 ## Justification
 

package/sprae.js

@@ -415,7 +415,7 @@ var prop = (el2, k, v2) => {
   if (el2[k] !== v2) {
     el2[k] = v2;
   }
-  if (v2 === false || v2 == null)
+  if (v2 == null || v2 === false)
     el2.removeAttribute(k);
   else if (typeof v2 !== "function")
     el2.setAttribute(
@@ -428,12 +428,9 @@ var input = (el2) => [
   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");
-var dashcase = (str) => {
-  el.dataset[str] = "";
-  let dashStr = el.attributes[0].name.slice(5);
-  delete el.dataset[str];
-  return dashStr;
-};
+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) => {
@@ -487,35 +484,38 @@ var primitive_pool_default = (key) => {
 
 // src/directives.js
 var directives_default = (el2, expr, state, name) => {
-  let evaluate = parseExpr(expr, ":" + name, state);
+  if (name.startsWith("on")) {
+    return directives.on(el2, `{"${name.split("-").map((n2) => n2.startsWith("on") ? n2.slice(2) : n2).join("-")}": ${expr}}`, state);
+  }
+  let evaluate = parseExpr(el2, expr, ":" + name, state);
   const update = (value) => prop(el2, name, value);
   b(() => update(evaluate(state)));
 };
 var directives = {};
 var _each = Symbol(":each");
 var _ref = Symbol(":ref");
-directives[":with"] = (el2, expr, rootState) => {
-  let evaluate = parseExpr(expr, "with", rootState);
+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) => {
+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[":if"] = (el2, expr, state) => {
-  let holder = document.createTextNode(""), clauses = [parseExpr(expr, ":if", state)], els = [el2], cur = el2;
+directives["if"] = (el2, expr, state) => {
+  let holder = document.createTextNode(""), clauses = [parseExpr(el2, expr, ":if", state)], els = [el2], cur = el2;
   while (cur = el2.nextElementSibling) {
     if (cur.hasAttribute(":else")) {
       cur.removeAttribute(":else");
       if (expr = cur.getAttribute(":if")) {
         cur.removeAttribute(":if"), cur.remove();
         els.push(cur);
-        clauses.push(parseExpr(expr, ":else :if", state));
+        clauses.push(parseExpr(el2, expr, ":else :if", state));
       } else {
         cur.remove();
         els.push(cur);
@@ -527,13 +527,13 @@ directives[":if"] = (el2, expr, state) => {
   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 false;
+  return -els.length;
 };
-directives[":each"] = (tpl, expr, state) => {
+directives["each"] = (tpl, expr, state) => {
   let each = parseForExpression(expr);
   if (!each)
-    return exprError(new Error(), expr);
-  const getItems = parseExpr(each.items, ":each", state);
+    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(() => {
@@ -546,7 +546,7 @@ directives[":each"] = (tpl, expr, state) => {
       return Object.entries(list);
     if (Array.isArray(list))
       return list.map((item, i2) => [i2 + 1, item]);
-    exprError(Error("Bad list value"), each.items, ":each", list);
+    exprError(Error("Bad list value"), tpl, each.items, ":each", list);
   });
   const scopes = /* @__PURE__ */ new WeakMap();
   const itemEls = /* @__PURE__ */ new WeakMap();
@@ -578,7 +578,7 @@ directives[":each"] = (tpl, expr, state) => {
       sprae(newEls[i2], elScopes[i2]);
     }
   });
-  return false;
+  return -1;
 };
 function parseForExpression(expression) {
   let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/;
@@ -599,13 +599,13 @@ function parseForExpression(expression) {
   }
   return res;
 }
-directives[":id"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":id", state);
+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(expr, ":", state);
+directives[""] = (el2, expr, state) => {
+  let evaluate = parseExpr(el2, expr, ":", state);
   const update = (value) => {
     if (!value)
       return;
@@ -614,15 +614,15 @@ directives[":"] = (el2, expr, state) => {
   };
   b(() => update(evaluate(state)));
 };
-directives[":text"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":text", state);
+directives["text"] = (el2, expr, state) => {
+  let evaluate = parseExpr(el2, expr, ":text", state);
   const update = (value) => {
     el2.textContent = value == null ? "" : value;
   };
   b(() => update(evaluate(state)));
 };
-directives[":value"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":in", state);
+directives["value"] = (el2, expr, state) => {
+  let evaluate = parseExpr(el2, expr, ":in", state);
   let [get, set] = input(el2);
   const update = (value) => {
     prop(el2, "value", value);
@@ -630,28 +630,41 @@ directives[":value"] = (el2, expr, state) => {
   };
   b(() => update(evaluate(state)));
 };
-directives[":on"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":on", state);
-  let listeners = w(() => evaluate(state));
-  let prevListeners;
-  b((values = listeners.value) => {
-    for (let evt in prevListeners)
-      el2.removeEventListener(evt, prevListeners[evt]);
-    prevListeners = values;
-    for (let evt in prevListeners)
-      el2.addEventListener(evt, prevListeners[evt]);
+directives["on"] = (el2, expr, state) => {
+  let evaluate = parseExpr(el2, expr, ":on", state);
+  let listeners = {};
+  b(() => {
+    for (let evt in listeners)
+      el2.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]);
+      else {
+        const nextEvt = (fn, cur = 0) => {
+          el2.addEventListener(evts[cur], listeners[evt] = (e2) => {
+            fn = fn(e2);
+            el2.removeEventListener(evts[cur], listeners[evt]);
+            nextEvt(fn, (cur + 1) % evts.length);
+          });
+        };
+        nextEvt(listeners[evt]);
+      }
+    }
+    ;
   });
 };
-directives[":data"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":data", 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[":aria"] = (el2, expr, state) => {
-  let evaluate = parseExpr(expr, ":aria", state);
+directives["aria"] = (el2, expr, state) => {
+  let evaluate = parseExpr(el2, expr, ":aria", state);
   const update = (value) => {
     for (let key in value)
       prop(el2, "aria" + key[0].toUpperCase() + key.slice(1), value[key] == null ? null : value[key] + "");
@@ -659,33 +672,33 @@ directives[":aria"] = (el2, expr, state) => {
   b(() => update(evaluate(state)));
 };
 var evaluatorMemo = {};
-function parseExpr(expression, dir, scope) {
+function parseExpr(el2, expression, dir, scope) {
   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;`);
+    evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el2);
   } catch (e2) {
-    return exprError(e2, expression, dir, scope);
+    return exprError(e2, el2, expression, dir, scope);
   }
   return evaluatorMemo[expression] = (state) => {
     let result;
     try {
       result = evaluate(state);
     } catch (e2) {
-      return exprError(e2, expression, dir, scope);
+      return exprError(e2, el2, expression, dir, scope);
     }
     return result;
   };
 }
-function exprError(error, expression, dir, scope) {
-  Object.assign(error, { expression });
+function exprError(error, element, expression, dir, scope) {
+  Object.assign(error, { element, expression });
   console.warn(`\u2234sprae: ${error.message}
 
 ${dir}=${expression ? `"${expression}"
 
-` : ""}`, scope);
+` : ""}`, element, scope);
   setTimeout(() => {
     throw error;
   }, 0);
@@ -701,28 +714,27 @@ function sprae(container, values) {
   values ||= {};
   const state = SignalStruct(values);
   const init = (el2) => {
-    let dir, attr;
     if (el2.attributes) {
-      for (let name in directives) {
-        if (attr = el2.attributes[name]) {
-          dir = directives[name];
-          el2.removeAttribute(name);
-          if (dir(el2, attr.value, state) === false)
-            return;
-        }
-      }
       for (let i2 = 0; i2 < el2.attributes.length; ) {
-        let attr2 = el2.attributes[i2];
-        if (attr2.name[0] === ":") {
-          el2.removeAttribute(attr2.name);
-          if (directives_default(el2, attr2.value, state, attr2.name.slice(1)) === false)
-            return;
-        } else
+        let attr = el2.attributes[i2];
+        if (attr.name[0] !== ":") {
           i2++;
+          continue;
+        }
+        el2.removeAttribute(attr.name);
+        let expr = attr.value;
+        let attrNames = attr.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;
+        }
       }
     }
-    for (let child of el2.children)
-      init(child);
+    for (let i2 = 0, child; child = el2.children[i2]; i2++) {
+      let res = init(child) || 0;
+      i2 += res;
+    }
   };
   init(container);
   memo.set(container, 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 v(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function c(t){f.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function d(t){return new c(t)}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,b(t),e}finally{i=o,e()}}}function b(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");v(this),i=t,this.f&=-2,8&this.f&&b(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()}}}}),(c.prototype=new f).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!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,v(this),this.f&=-2,!0},c.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}f.prototype.S.call(this,t)},c.prototype.U=function(t){if(f.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},c.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},c.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(c.prototype,"value",{get:function(){1&this.f&&t();var e=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,p(this),h(this),n++;var e=i;return i=this,y.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||b(this)},Symbol.observable||=Symbol("observable");var S=new FinalizationRegistry((t=>t.call?.())),x=t=>t&&t.peek,w=Symbol("signal-struct");function A(t){if((e=t)&&e[w])return t;var e;let i,r;if(j(t)){i={},r={};for(let e in t)r[e]=O(i,e,t[e]);return Object.defineProperty(i,w,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>A(t))):t}function O(t,e,i){let r,n=x(i)?i:j(i)||Array.isArray(i)?u(A(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,v;return r&&(a=t=>n.value=t,(s=i)&&(v=(s[Symbol.observable]?.()||s).subscribe?.(a,f,undefined),h=v&&(()=>v.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:!x(i)&&j(i)?t=>t?Object.assign(n.value,t):n.value=A(t):t=>n.value=A(t),enumerable:!0,configurable:!1}),n}function j(t){return t&&t.constructor===Object}var k=(t,e,i)=>{e.startsWith("on")&&(e=e.toLowerCase()),t[e]!==i&&(t[e]=i),!1===i||null==i?t.removeAttribute(e):"function"!=typeof i&&t.setAttribute($(e),!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(";"):"")},N=document.createElement("div"),$=t=>{N.dataset[t]="";let e=N.attributes[0].name.slice(5);return delete N.dataset[t],e},E=(t,e,i,r=null)=>{let n,o,s,a=0,f=i.length,u=e.length,{remove:l,same:h,insert:v,replace:c}=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;)v(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)?(c(n,s,t),n=o):v(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 U=E,W={},C={},B={},P=(t,e,i,r)=>{let n=I(e,":"+r,i);g((()=>{return e=n(i),k(t,r,e);var e}))},L={},M=Symbol(":each"),T=Symbol(":ref");L[":with"]=(t,i,r)=>{let o=I(i,"with",r);const s=d((()=>Object.assign({},r,o(r))));let a=q(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[T]=e:(q(t,Object.assign(Object.create(i),{[e]:t})),!1),L[":if"]=(t,e,i)=>{let r=document.createTextNode(""),n=[I(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(I(e,":else :if",i))):(s.remove(),o.push(s),n.push((()=>1)));t.replaceWith(s=r);let a=d((()=>n.findIndex((t=>t(i)))));return g(((t=a.value)=>o[t]!=s&&((s[M]||s).replaceWith(s=o[t]||r),q(s,i)))),!1},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 z(new Error,e);const n=I(r.items,":each",i),o=t[M]=document.createTextNode("");t.replaceWith(o);const s=d((()=>{let t=n(i);return t?"number"==typeof t?Array.from({length:t},((t,e)=>[e,e+1])):t.constructor===Object?Object.entries(t):Array.isArray(t)?t.map(((t,e)=>[e+1,t])):void z(Error("Bad list value"),r.items,":each",t):[]})),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)?C:void 0===h?B:"number"==typeof h||h instanceof Number?W[h]||(W[h]=new Number(h)):"string"==typeof h||h instanceof String?W[h]||(W[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?W[h]||(W[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[T]&&(n[t[T]]=u),a.set(e,n)}l.push(a.get(e))}var h;U(o.parentNode,u,n,o),u=n;for(let t=0;t<n.length;t++)q(n[t],l[t])})),!1},L[":id"]=(t,e,i)=>{let r=I(e,":id",i);g((()=>{return e=r(i),t.id=e||0===e?e:"";var e}))},L[":"]=(t,e,i)=>{let r=I(e,":",i);g((()=>(e=>{if(e)for(let i in e)k(t,i,e[i])})(r(i))))},L[":text"]=(t,e,i)=>{let r=I(e,":text",i);g((()=>{return e=r(i),void(t.textContent=null==e?"":e);var e}))},L[":value"]=(t,e,i)=>{let r=I(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":"",k(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),k(t,"value",e),void o(e);var e}))},L[":on"]=(t,e,i)=>{let r,n=I(e,":on",i),o=d((()=>n(i)));g(((e=o.value)=>{for(let e in r)t.removeEventListener(e,r[e]);r=e;for(let e in r)t.addEventListener(e,r[e])}))},L[":data"]=(t,e,i)=>{let r=I(e,":data",i);const n=d((()=>r(i)));g(((e=n.value)=>{for(let i in e)t.dataset[i]=e[i]}))},L[":aria"]=(t,e,i)=>{let r=I(e,":aria",i);g((()=>(e=>{for(let i in e)k(t,"aria"+i[0].toUpperCase()+i.slice(1),null==e[i]?null:e[i]+"")})(r(i))))};var F={};function I(t,e,i){if(F[t])return F[t];let r,n=/^[\n\s]*if.*\(.*\)/.test(t)||/^(let|const)\s/.test(t)?`(() => { ${t} })()`:t;try{r=new Function(`let result; with (arguments[0]) { result = (${n}) }; return result;`)}catch(r){return z(r,t,e,i)}return F[t]=n=>{let o;try{o=r(n)}catch(r){return z(r,t,e,i)}return o}}function z(t,e,i,r){Object.assign(t,{expression:e}),console.warn(`∴sprae: ${t.message}\n\n${i}=${e?`"${e}"\n\n`:""}`,r),setTimeout((()=>{throw t}),0)}var R=new WeakMap;function q(t,e){if(!t.children)return;if(R.has(t))return R.get(t);e||={};const i=A(e),r=t=>{let e,n;if(t.attributes){for(let r in L)if((n=t.attributes[r])&&(e=L[r],t.removeAttribute(r),!1===e(t,n.value,i)))return;for(let e=0;e<t.attributes.length;){let r=t.attributes[e];if(":"===r.name[0]){if(t.removeAttribute(r.name),!1===P(t,r.value,i,r.name.slice(1)))return}else e++}}for(let e of t.children)r(e)};return r(t),R.set(t,i),i}var D=q;export{D 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 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 d(t){return new v(t)}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,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,p(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,p(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?.())),x=t=>t&&t.peek,w=Symbol("signal-struct");function j(t){if((e=t)&&e[w])return t;var e;let i,r;if(O(t)){i={},r={};for(let e in t)r[e]=A(i,e,t[e]);return Object.defineProperty(i,w,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>j(t))):t}function A(t,e,i){let r,n=x(i)?i:O(i)||Array.isArray(i)?u(j(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:!x(i)&&O(i)?t=>t?Object.assign(n.value,t):n.value=j(t):t=>n.value=j(t),enumerable:!0,configurable:!1}),n}function O(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=d((()=>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=d((()=>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=d((()=>{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=d((()=>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=j(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};

package/src/core.js

@@ -13,29 +13,24 @@ export default function sprae(container, values) {
 
   // init directives on element
   const init = (el) => {
-    let dir, attr
-
     if (el.attributes) {
-      // directives must be initialized in order
-      for (let name in directives) {
-        if (attr = el.attributes[name]) {
-          dir = directives[name]
-          el.removeAttribute(name)
-          if (dir(el, attr.value, state) === false) return
-        }
-      }
-
       for (let i = 0; i < el.attributes.length;) {
         let attr = el.attributes[i]
-        if (attr.name[0]===':') {
-          el.removeAttribute(attr.name)
-          if (defaultDirective(el, attr.value, state, attr.name.slice(1)) === false) return
+        if (attr.name[0] !== ':') {i++; continue}
+        el.removeAttribute(attr.name)
+        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
         }
-        else i++
       }
     }
 
-    for (let child of el.children) init(child)
+    for (let i = 0, child; child = el.children[i]; i++) {
+      let res = init(child) || 0 // reduce number of removed elements
+      i += res
+    }
   }
 
   init(container)

package/src/directives.js

@@ -9,7 +9,12 @@ import p from 'primitive-pool'
 
 // any-prop directives
 export default (el, expr, state, name) => {
-  let evaluate = parseExpr(expr, ':'+name, state)
+  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)
+  }
+  let evaluate = parseExpr(el, expr, ':'+name, state)
   const update = value => prop(el, name, value)
   effect(() => update(evaluate(state)))
 }
@@ -19,28 +24,28 @@ export const directives = {}
 
 const _each = Symbol(':each'), _ref = Symbol(':ref')
 
-directives[':with'] = (el, expr, rootState) => {
-  let evaluate = parseExpr(expr, 'with', rootState)
+directives['with'] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, 'with', rootState)
 
   // 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
+  return false // don't continue attrs init
 }
 
-directives[':ref'] = (el, expr, state) => {
+directives['ref'] = (el, expr, state) => {
   // make sure :ref is initialized after :each
   if (el.hasAttribute(':each')) return el[_ref] = expr;
 
   sprae(el, Object.assign(Object.create(state), {[expr]: el}))
-  return false
+  return false // don't continue attrs init
 }
 
-directives[':if'] = (el, expr, state) => {
+directives['if'] = (el, expr, state) => {
   let holder = document.createTextNode(''),
-      clauses = [parseExpr(expr, ':if', state)],
+      clauses = [parseExpr(el, expr, ':if', state)],
       els = [el], cur = el
 
   while (cur = el.nextElementSibling) {
@@ -48,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(expr, ':else :if', state));
+        els.push(cur); clauses.push(parseExpr(el, expr, ':else :if', state));
       }
       else {
         cur.remove(); els.push(cur); clauses.push(() => 1);
@@ -62,14 +67,15 @@ directives[':if'] = (el, expr, 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))))
 
-  return false
+  // indicate number of removed elements
+  return -els.length
 }
 
-directives[':each'] = (tpl, expr, state) => {
+directives['each'] = (tpl, expr, state) => {
   let each = parseForExpression(expr);
-  if (!each) return exprError(new Error, expr);
+  if (!each) return exprError(new Error, tpl, expr);
 
-  const getItems = parseExpr(each.items, ':each', state);
+  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
@@ -82,7 +88,7 @@ directives[':each'] = (tpl, expr, state) => {
     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'), each.items, ':each', list)
+    exprError(Error('Bad list value'), tpl, each.items, ':each', list)
   })
 
   // stores scope per data item
@@ -124,7 +130,7 @@ directives[':each'] = (tpl, expr, state) => {
     }
   })
 
-  return false
+  return -1 // count back for 1
 }
 
 // This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
@@ -151,14 +157,14 @@ function parseForExpression(expression) {
   return res
 }
 
-directives[':id'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':id', state)
+directives['id'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':id', state)
   const update = v => el.id = v || v === 0 ? v : ''
   effect(()=>update(evaluate(state)))
 }
 
-directives[':'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':', 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]);
@@ -166,8 +172,8 @@ directives[':'] = (el, expr, state) => {
   effect(()=>update(evaluate(state)))
 }
 
-directives[':text'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':text', state)
+directives['text'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':text', state)
 
   const update = (value) => {
     el.textContent = value == null ? '' : value;
@@ -177,8 +183,8 @@ directives[':text'] = (el, expr, state) => {
 }
 
 // connect expr to element value
-directives[':value'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':in', state)
+directives['value'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':in', state)
 
   let [get, set] = input(el);
 
@@ -189,27 +195,41 @@ directives[':value'] = (el, expr, state) => {
   effect(()=>update(evaluate(state)))
 }
 
-directives[':on'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':on', state)
-  let listeners = computed(() => evaluate(state))
-  let prevListeners
-  effect((values=listeners.value) => {
-    for (let evt in prevListeners) el.removeEventListener(evt, prevListeners[evt]);
-    prevListeners = values;
-    for (let evt in prevListeners) el.addEventListener(evt, prevListeners[evt]);
+directives['on'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':on', state)
+  let listeners = {}
+  effect(() => {
+    for (let evt in listeners) el.removeEventListener(evt, listeners[evt]);
+
+    listeners = evaluate(state);
+
+    for (let evt in listeners) {
+      const evts = evt.split('-')
+      if (evts.length===1) el.addEventListener(evt, listeners[evt]);
+      else {
+        const nextEvt = (fn, cur=0) => {
+          el.addEventListener(evts[cur], listeners[evt] = e => {
+            fn = fn(e)
+            el.removeEventListener(evts[cur], listeners[evt])
+            nextEvt(fn, (cur+1)%evts.length)
+          })
+        }
+        nextEvt(listeners[evt])
+      }
+    };
   })
 }
 
-directives[':data'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':data', state)
+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[':aria'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':aria', state)
+directives['aria'] = (el, expr, state) => {
+  let evaluate = parseExpr(el, expr, ':aria', state)
   const update = (value) => {
     for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key] == null ? null : value[key] + '');
   }
@@ -221,7 +241,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(expression, dir, scope) {
+function parseExpr(el, expression, dir, scope) {
   if (evaluatorMemo[expression]) return evaluatorMemo[expression]
 
   // Some expressions that are useful in Alpine are not valid as the right side of an expression.
@@ -238,22 +258,22 @@ function parseExpr(expression, dir, scope) {
   // guard static-time eval errors
   let evaluate
   try {
-    evaluate = new Function( `let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`)
+    evaluate = new Function(`let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`).bind(el)
   } catch ( e ) {
-    return exprError(e, expression, dir, scope)
+    return exprError(e, el, expression, dir, scope)
   }
 
   // guard runtime eval errors
   return evaluatorMemo[expression] = (state) => {
     let result
     try { result = evaluate(state) }
-    catch (e) { return exprError(e, expression, dir, scope) }
+    catch (e) { return exprError(e, el, expression, dir, scope) }
     return result
   }
 }
 
-export function exprError(error, expression, dir, scope) {
-  Object.assign( error, { expression } )
-  console.warn(`∴sprae: ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, scope)
+export function exprError(error, element, expression, dir, scope) {
+  Object.assign( error, { element, expression } )
+  console.warn(`∴sprae: ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, element, scope)
   setTimeout(() => { throw error }, 0)
 }

package/test/register.cjs

@@ -0,0 +1,20 @@
+// provide DOM env for node tests
+let { JSDOM } = require('jsdom')
+
+const { window } = new JSDOM(`<!DOCTYPE html>`, {
+  url: "http://localhost/",
+  storageQuota: 10000000,
+  pretendToBeVisual: true,
+  FetchExternalResources: false,
+  ProcessExternalResources: false
+})
+
+let props = Object.getOwnPropertyNames(window)
+
+props.forEach(prop => {
+  if (prop in global) return
+  Object.defineProperty(global, prop, {
+    configurable: true,
+    get: () => window[prop]
+  })
+})

package/test/test.js

@@ -63,12 +63,18 @@ test('common: class', async () => {
   is(el.outerHTML, `<x class="x"></x><y class="y w"></y><z class="b c"></z>`);
 })
 
-test('spraed props: base', 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 params = sprae(el)
   is(el.outerHTML, `<input id="0" for="1" title="2" help="3" type="4" placeholder="5" value="7">`)
 })
 
+test('props: multiprop', async () => {
+  let el = h`<input :id:name:for="0" />`
+  let params = sprae(el)
+  is(el.outerHTML, `<input id="0" name="0" for="0">`)
+})
+
 test('data: base', async () => {
   let el = h`<input :data="{a:1, fooBar:2}"/>`
   let params = sprae(el)
@@ -170,6 +176,11 @@ test('conditions: reactive values', async () => {
   is(el.innerHTML, '<span>4</span>')
 })
 
+test('conditions (#3): subsequent content is not abandoned', async () => {
+  let x = h`<x><y :if="!!y"></y><z :text="123"></z></x>`
+  sprae(x, {y: false})
+  is(x.outerHTML, `<x><z>123</z></x>`)
+})
 
 test('each: array', async () => {
   // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
@@ -336,6 +347,41 @@ test('on: base', () => {
   is(log.value, ['click','x','xx']);
 })
 
+test('on: multiple events', e => {
+  let el = h`<div :onscroll:onclick="e=>log.push(e.type)"></div>`
+  let state = sprae(el, {log:[]})
+
+  el.dispatchEvent(new window.Event('click'));
+  is(state.log, ['click'])
+  el.dispatchEvent(new window.Event('scroll'));
+  is(state.log, ['click','scroll'])
+})
+
+test('on: in-out events', e => {
+  // let el = document.createElement('x');
+  // el.setAttribute(':onmousedown-onmouseup', 'e=>(log.push(e.type),e=>log.push(e.type))')
+  let el = h`<x :onmousedown-onmouseup="e=>(log.push(e.type),e=>log.push(e.type))"></x>`
+
+  let state = sprae(el, {log:[]})
+
+  el.dispatchEvent(new window.Event('mousedown'));
+  is(state.log, ['mousedown'])
+  el.dispatchEvent(new window.Event('mouseup'));
+  is(state.log, ['mousedown','mouseup'])
+})
+
+test('on: chain of events', e => {
+  let el = h`<div :onmousedown-onmousemove-onmouseup="e=>(log.push(e.type),e=>(log.push(e.type),e=>log.push(e.type)))"></div>`
+  let state = sprae(el, {log:[]})
+
+  el.dispatchEvent(new window.Event('mousedown'));
+  is(state.log, ['mousedown'])
+  el.dispatchEvent(new window.Event('mousemove'));
+  is(state.log, ['mousedown','mousemove'])
+  el.dispatchEvent(new window.Event('mouseup'));
+  is(state.log, ['mousedown','mousemove','mouseup'])
+})
+
 test('with: inline', () => {
   let el = h`<x :with="{foo:'bar', baz}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
@@ -397,14 +443,14 @@ test('ref: base', () => {
   is(a.outerHTML, `<a>2</a>`)
 })
 
-test('ref with each', () => {
+test('ref: :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('reactive values', async () => {
+test('any: reactive values', async () => {
   let a = new Promise((ok) => setTimeout(() => ok(2), 10))
 
   let el = h`<x :text="a">1</x>`
@@ -415,8 +461,29 @@ test('reactive values', async () => {
   is(el.outerHTML, `<x>2</x>`)
 })
 
-test('scope directives must come first', async () => {
+test('any: 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 () => {
+  // NOTE: we init attributes in order of definition
   let a = h`<x :text="y" :with="{y:1}" :ref="x"></x>`
   sprae(a, {})
   is(a.outerHTML, `<x>1</x>`)
+})
+
+test.todo('getters', async () => {
+  let x = h`<x>
+    <h2 :if="doubledCount > 10">YAY!</h2>
+    <button :text="count" :on="{click:increment}"/>
+    <button :text="doubledCount" :on="{click:increment}"/>
+  </x>`
+  document.body.appendChild(x)
+  let state = sprae(x, {
+    count:0,
+    get doubledCount(){ console.log(this); return this.count * 2},
+    increment(){ this.count++ }
+  })
 })