sprae 2.7.0 → 2.8.0

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "2.7.0",
+  "version": "2.8.0",
   "main": "src/index.js",
   "module": "src/index.js",
   "type": "module",
   "dependencies": {
     "@preact/signals-core": "^1.2.2",
     "primitive-pool": "^2.0.0",
-    "signal-struct": "^1.9.0",
+    "signal-struct": "^1.10.0",
     "swapdom": "^1.1.1"
   },
   "devDependencies": {

package/r&d.md

@@ -289,9 +289,9 @@
 * @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/onconnected
 * @sprae/onvisible?
+  - can be solved externally
+* @sprae/onintersects
 
 ## [x] Write any-attributes via `:<prop>? -> yep`
 
@@ -330,7 +330,7 @@
   + Provides precisely controlled sandbox
   - Some limited lang opportunities
     - need to match many syntax quirks, can be tedious
-      ~ can be fine to limit expressions to meaningful default: why Proxy, generators, awaits, global access etc.
+      ~ can be fine to limit expressions to meaningful default: no Proxy, generators, awaits, global access etc.
   - Somewhat heavy to bundle
     ~ 1-2kb is not super-heavy, besides kicks out signal-struct (with preact signals?)
   + Scope is easier to provide: no need for signal proxy
@@ -340,6 +340,7 @@
   + Deps can be analyzed / implemented without signals
   - Screwed up debugging / stacktrace (unless errored properly)
     ~+ can actually provide better trace since no internal framework stuff is shown
+    + can let means to enhance subscript's logs
   + 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.
   + allows easier handle of `:with="a=1,b=2,c=3"` - we just naturally get local variables without messup with global
@@ -349,9 +350,10 @@
 
 2. Use sandboxed proxy
   - tough evaluation
-  - tough implementation
+  - implementation hiccups
   - screwed up data
   - no full protection
+  - relatively slow
   + does minimal catch
 
 ## [x] :onclick="direct code" ? -> no: immediately invoked.
@@ -374,19 +376,23 @@
   ? maybe id should have same signature
   ? should it be very similar mechanism to `:with="a=1,b=2"`
 
-## [ ] Event modifiers :ona.once, `:ona`
+## [x] Event modifiers :ona.once, `:ona` -> let's try, there's a lot of use for both props and event
 
   - .prevent,.stop - not needed since expects a function
     ? or should we just trigger it for user?
   ? :onclick.outside
   ? :onclick.window, :onclick.document
-  ? :onclick.once
-  ? :onclick.debounce
-  ? :onclick.throttle.750ms
+    + can be needed, eg. mousedown..up can happen outside of current element (stop caret tracking in waveplay)
+  ? :onclick.once, :onclick.passive, :onclick.capture
+    + can pass props to event listener: there's no other way to do that
+  ? :onclick.debounce-330
+  ? :onclick.throttle-750
+    + ...just handy everydayers and saves tons of noise
   ? :onclick.self
+    ~ clicked on self, not the child
   ? :onspecial-event.camel, :onx-y.dot
-  ? :onclick.passive
-  ? :onkeypress.shift.enter
+    ~
+  ? :onkeypress.shift.enter, :onmousemove.shift, :onmousemove.alt
     .shift	Shift
     .enter	Enter
     .space	Space
@@ -394,15 +400,57 @@
     .cmd	Cmd
     .meta	Cmd on Mac, Windows key on Windows
     .alt	Alt
-    .up .down .left .right	Up/Down/Left/Right arrows
+    .up .down .left .right
     .escape	Escape
     .tab	Tab
     .caps-lock	Caps Lock
-    .equal	Equal, =
-    .period	Period, .
-    .slash	Foward Slash, /
+    .equal	Equal
+    .period	Period
+    .slash	Foward Slash
+    + allows separating various key handlers: atm waveplay handles separate keys in the same method `handleKey`
+    + allows tracking mouse interactions with shift hold
   - conflict with dot-separated events
+    ~not so popular nor encouraged
   - lots of ad-hoc non-standard rules, can be handled in code
+  + allow multiple setters for same props or multiple listeners for same events
+  + oldschool jquery-compatible events
+
+## [x] Mods design -> use event modifiers, not props modifiers
+
+  * [ ] ~~Prop modifiers~~
+    - overall seems code complication without much benefit
+    * [ ] value.bind? value.watch?
+      - let's wait for use-case: value can be too big to set it every time
+    * [ ] prop.reflect, prop.observe
+      - let's wait for use-case
+    * [ ] prop.boolean, .number, .string, .array, .object
+      - let's wait for use-case
+    * [ ] prop.once, prop.fx ? prop.init?
+      - doesn't seem required, let's wait for use case
+    * [ ] prop.change - run only if value changes
+      - seems like unnecessary manual optimization that must be done always automatically
+      ? are there cases where force-update is necessary?
+    * [ ] prop.throttle-xxx, prop.debounce-xxx
+      - let's wait until that's really a problem
+    * [ ] prop.class
+      ? what's the use-case
+
+  * [x] Event modifiers
+    * [x] onevt.x, onevt.y
+      + jquery-like
+      + multiple same events
+    * [x] onevt.once, onevt.passive, onevt.capture
+      + standard props passing
+    * [x] onevt.prevent, onevt.stop
+      + conventional mods
+    * [x] onevt.outside onevt.window, onevt.document, onevt.self
+      + useful handlers, conventional mods
+    * [x] onevt.throttle-xxx, onevt.debounce-xxx
+      + conventional
+    * [x] onevt.shift, onevt.cmd.shift, onevt.meta
+      + conventional
+    * [x] onkey.enter, .space, .up|.down|.left|.right, .escape, .tab, .period, .slash, .caps-lock
+      + conventional
 
 ## [x] Writing props on elements (like ones in :each) -> nah, just use `:x="this.x=abc"`
 

package/readme.md

@@ -2,9 +2,6 @@
 
 > DOM microhydration with `:` attributes
 
-A lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [templize](https://github.com/dy/templize) or JSX with better ergonomics[*](#justification).<br>
-It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), considered a [buried treasure](https://github.com/bahrus/be-restated) by web-connoisseurs.
-
 
 ## Usage
 
@@ -163,10 +160,22 @@ Add event listeners.
   }
 }">
 
+<!-- Event modifiers -->
+<button :onclick.throttle-500="handler">Not too often</button>
+
 <!-- Bulk/custom events -->
 <button :on="{ click: handler, touch: handler, special: handler }">Submit</button>
 ```
 
+##### Event modifiers
+
+* `.once`, `.passive`, `.capture` – listener [options](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#options).
+* `.prevent`, `.stop` – prevent default or stop propagation.
+* `.window`, `.document`, `.outside`, `.self` – specify event target.
+* `.throttle-108`, `.debounce-108` – define throttling or postponing callback with (optional) timeout in ms.
+* `.ctrl`, `.shift`, `.alt`, `.meta`, `.cmd`, `.down`, `.up`, `.left`, `.right`, `.end`, `.home`, `.pagedown`, `.pageup`, `.enter`, `.plus`, `.minus`, `.star`, `.slash`, `.period`, `.equal`, `.underscore`, `.esc`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
+* `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).
+
 #### `:data="values"`
 
 Set [data-*](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*) attributes. CamelCase is converted to dash-case.
@@ -334,11 +343,13 @@ This way, for example, _@preact/signals_ or _rxjs_ can be connected directly byp
 
 ## Justification
 
+_Sprae_ is lightweight essential alternative to [alpine](https://github.com/alpinejs/alpine), [petite-vue](https://github.com/vuejs/petite-vue), [templize](https://github.com/dy/templize) or JSX with better ergonomics[*](#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: 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).
+_Sprae_ takes convention of _templize directives_ (_alpine_/_vue_ attrs) and builds upon [_@preact/signals_](https://ghub.io/@preact/signals).
 
 * It doesn't break static html markup.
 * It falls back to element content if uninitialized.
@@ -349,4 +360,8 @@ _sprae_ takes convention of _templize directives_ (_alpine_/_vue_ attrs) and bui
 * Input data may contain [signals](https://ghub.io/@preact/signals) or [reactive values](https://ghub.io/sube).
 * Elements / data API is open and enable easy interop.
 
+
+It is reminiscent of [XSLT](https://www.w3schools.com/xml/xsl_intro.asp), considered a [buried treasure](https://github.com/bahrus/be-restated) by web-connoisseurs.
+
+
 <p align="center"><a href="https://github.com/krsnzd/license/">🕉</a></p>

package/sprae.js

@@ -71,16 +71,16 @@ function v(i2) {
     }
   }
 }
-function e(i2) {
+function e2(i2) {
   this.v = i2;
   this.i = 0;
   this.n = void 0;
   this.t = void 0;
 }
-e.prototype.h = function() {
+e2.prototype.h = function() {
   return true;
 };
-e.prototype.S = function(i2) {
+e2.prototype.S = function(i2) {
   if (this.t !== i2 && void 0 === i2.e) {
     i2.x = this.t;
     if (void 0 !== this.t)
@@ -88,7 +88,7 @@ e.prototype.S = function(i2) {
     this.t = i2;
   }
 };
-e.prototype.U = function(i2) {
+e2.prototype.U = function(i2) {
   var t2 = i2.e, h2 = i2.x;
   if (void 0 !== t2) {
     t2.x = h2;
@@ -101,7 +101,7 @@ e.prototype.U = function(i2) {
   if (i2 === this.t)
     this.t = h2;
 };
-e.prototype.subscribe = function(i2) {
+e2.prototype.subscribe = function(i2) {
   var t2 = this;
   return b(function() {
     var h2 = t2.value, o2 = 32 & this.f;
@@ -113,16 +113,16 @@ e.prototype.subscribe = function(i2) {
     }
   });
 };
-e.prototype.valueOf = function() {
+e2.prototype.valueOf = function() {
   return this.value;
 };
-e.prototype.toString = function() {
+e2.prototype.toString = function() {
   return this.value + "";
 };
-e.prototype.peek = function() {
+e2.prototype.peek = function() {
   return this.v;
 };
-Object.defineProperty(e.prototype, "value", { get: function() {
+Object.defineProperty(e2.prototype, "value", { get: function() {
   var i2 = v(this);
   if (void 0 !== i2)
     i2.i = this.i;
@@ -144,7 +144,7 @@ Object.defineProperty(e.prototype, "value", { get: function() {
   }
 } });
 function u(i2) {
-  return new e(i2);
+  return new e2(i2);
 }
 function d(i2) {
   for (var t2 = i2.s; void 0 !== t2; t2 = t2.n)
@@ -183,13 +183,13 @@ function a(i2) {
   i2.s = h2;
 }
 function l(i2) {
-  e.call(this, void 0);
+  e2.call(this, void 0);
   this.x = i2;
   this.s = void 0;
   this.g = f - 1;
   this.f = 4;
 }
-(l.prototype = new e()).h = function() {
+(l.prototype = new e2()).h = function() {
   this.f &= -3;
   if (1 & this.f)
     return false;
@@ -230,10 +230,10 @@ l.prototype.S = function(i2) {
     for (var t2 = this.s; void 0 !== t2; t2 = t2.n)
       t2.S.S(t2);
   }
-  e.prototype.S.call(this, i2);
+  e2.prototype.S.call(this, i2);
 };
 l.prototype.U = function(i2) {
-  e.prototype.U.call(this, i2);
+  e2.prototype.U.call(this, i2);
   if (void 0 === this.t) {
     this.f &= -33;
     for (var t2 = this.s; void 0 !== t2; t2 = t2.n)
@@ -408,7 +408,7 @@ function signalStruct(values, proto) {
                 try {
                   Object.assign(s2.value, v2);
                   return;
-                } catch (e2) {
+                } catch (e3) {
                 }
               s2.value = Object.seal(signalStruct(v2));
             } else if (Array.isArray(v2))
@@ -425,7 +425,8 @@ function signalStruct(values, proto) {
     return state;
   }
   if (Array.isArray(values) && !isStruct(values[0])) {
-    return values.map((v2) => signalStruct(v2));
+    for (let i2 = 0; i2 < values.length; i2++)
+      values[i2] = signalStruct(values[i2]);
   }
   return values;
 }
@@ -486,10 +487,6 @@ var primitive_pool_default = (key) => {
 // src/directives.js
 var primary = {};
 var secondary = {};
-primary["with"] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, "with");
-  sprae(el, signalStruct(evaluate(rootState), rootState));
-};
 primary["if"] = (el, expr) => {
   let holder = document.createTextNode(""), clauses = [parseExpr(el, expr, ":if")], els = [el], cur = el;
   while (cur = el.nextElementSibling) {
@@ -511,11 +508,16 @@ primary["if"] = (el, expr) => {
   return (state) => {
     let i2 = clauses.findIndex((f2) => f2(state));
     if (els[i2] != cur) {
+      ;
       (cur[_each] || cur).replaceWith(cur = els[i2] || holder);
       sprae(cur, state);
     }
   };
 };
+primary["with"] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, "with");
+  sprae(el, signalStruct(evaluate(rootState), rootState));
+};
 var _each = Symbol(":each");
 primary["each"] = (tpl, expr) => {
   let each = parseForExpression(expr);
@@ -622,6 +624,31 @@ secondary["text"] = (el, expr) => {
     el.textContent = value == null ? "" : value;
   };
 };
+secondary["data"] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ":data");
+  return (state) => {
+    let value = evaluate(state);
+    for (let key in value)
+      el.dataset[key] = value[key];
+  };
+};
+secondary["aria"] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ":aria");
+  const update = (value) => {
+    for (let key in value)
+      attr(el, "aria-" + dashcase(key), value[key] == null ? null : value[key] + "");
+  };
+  return (state) => update(evaluate(state));
+};
+secondary[""] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ":");
+  if (evaluate)
+    return (state) => {
+      let value = evaluate(state);
+      for (let key in value)
+        attr(el, dashcase(key), value[key]);
+    };
+};
 secondary["value"] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ":value");
   let from, to;
@@ -645,16 +672,35 @@ secondary["on"] = (el, expr) => {
     };
   };
 };
+var directives_default = (el, expr, state, name) => {
+  let evt = name.startsWith("on") && name.slice(2);
+  let evaluate = parseExpr(el, expr, ":" + name);
+  if (!evaluate)
+    return;
+  if (evt)
+    return (state2) => {
+      let value = evaluate(state2);
+      if (value) {
+        addListener(el, evt, value);
+        return () => removeListener(el, evt, value);
+      }
+    };
+  return (state2) => attr(el, name, evaluate(state2));
+};
 var _stop = Symbol("stop");
 var addListener = (el, evt, startFn) => {
-  if (evt.indexOf("..") < 0)
-    el.addEventListener(evt, startFn);
+  let evts = evt.split("..").map((e3) => e3.startsWith("on") ? e3.slice(2) : e3), opts = {};
+  evts[0] = evts[0].replace(
+    /\.(\w+)?-?([\w]+)?/g,
+    (match, mod, param) => (mod = mods[mod]) ? ([el, startFn] = mod(el, startFn, opts, param), "") : ""
+  );
+  if (evts.length == 1)
+    el.addEventListener(evts[0], startFn, opts);
   else {
-    const evts = evt.split("..").map((e2) => e2.startsWith("on") ? e2.slice(2) : e2);
     const nextEvt = (fn, cur = 0) => {
-      let curListener = (e2) => {
+      let curListener = (e3) => {
         el.removeEventListener(evts[cur], curListener);
-        if (typeof (fn = fn.call(el, e2)) !== "function")
+        if (typeof (fn = fn.call(el, e3)) !== "function")
           fn = () => {
           };
         if (++cur < evts.length)
@@ -662,7 +708,7 @@ var addListener = (el, evt, startFn) => {
         else if (!startFn[_stop])
           nextEvt(startFn);
       };
-      el.addEventListener(evts[cur], curListener);
+      el.addEventListener(evts[cur], curListener, opts);
     };
     nextEvt(startFn);
   }
@@ -672,43 +718,123 @@ var removeListener = (el, evt, fn) => {
     fn[_stop] = true;
   el.removeEventListener(evt, fn);
 };
-secondary["data"] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":data");
-  return (state) => {
-    let value = evaluate(state);
-    for (let key in value)
-      el.dataset[key] = value[key];
-  };
-};
-secondary["aria"] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":aria");
-  const update = (value) => {
-    for (let key in value)
-      attr(el, "aria-" + dashcase(key), value[key] == null ? null : value[key] + "");
-  };
-  return (state) => update(evaluate(state));
-};
-secondary[""] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ":");
-  if (evaluate)
-    return (state) => {
-      let value = evaluate(state);
-      for (let key in value)
-        attr(el, dashcase(key), value[key]);
+var mods = {
+  throttle(el, cb, opts, limit) {
+    limit = Number(limit) || 108;
+    let pause, planned, block = () => {
+      pause = true;
+      setTimeout(() => {
+        pause = false;
+        if (planned)
+          cb(e), planned = false, block();
+      });
     };
+    return [el, (e3) => {
+      if (pause)
+        return planned = true;
+      cb(e3);
+      block();
+    }];
+  },
+  debounce(el, cb, opts, wait) {
+    wait = Number(wait) || 108;
+    let timeout, later = () => {
+      timeout = null;
+      cb(e);
+    };
+    return [el, (e3) => {
+      clearTimeout(timeout);
+      timeout = setTimeout(later, wait);
+    }];
+  },
+  window(el, cb) {
+    return [window, cb];
+  },
+  document(el, cb) {
+    return [document, cb];
+  },
+  outside(el, cb) {
+    return [el, (e3) => {
+      if (el.contains(e3.target))
+        return;
+      if (e3.target.isConnected === false)
+        return;
+      if (el.offsetWidth < 1 && el.offsetHeight < 1)
+        return;
+      cb(e3);
+    }];
+  },
+  prevent(el, cb) {
+    return [el, (e3) => {
+      e3.preventDefault();
+      cb(e3);
+    }];
+  },
+  stop(el, cb) {
+    return [el, (e3) => {
+      e3.stopPropagation();
+      cb(e3);
+    }];
+  },
+  self(el, cb) {
+    return [el, (e3) => {
+      e3.target === el && cb(e3);
+    }];
+  },
+  once(el, cb, opts) {
+    opts.once = true;
+    return [el, cb];
+  },
+  passive(el, cb, opts) {
+    opts.passive = true;
+    return [el, cb];
+  },
+  capture(el, cb, opts) {
+    opts.capture = true;
+    return [el, cb];
+  }
 };
-var directives_default = (el, expr, values, name) => {
-  let evt = name.startsWith("on") && name.slice(2);
-  let evaluate = parseExpr(el, expr, ":" + name);
-  if (evaluate)
-    return evt ? (state) => {
-      let value = evaluate(state);
-      if (value) {
-        addListener(el, evt, value);
-        return () => removeListener(el, evt, value);
-      }
-    } : (state) => attr(el, name, evaluate(state));
-};
+var keys = {
+  ctrl: "Control Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  meta: "Meta",
+  cmd: "Meta",
+  down: "ArrowDown",
+  up: "ArrowUp",
+  left: "ArrowLeft",
+  right: "ArrowRight",
+  arrowdown: "ArrowDown",
+  arrowup: "ArrowUp",
+  arrowleft: "ArrowLeft",
+  arrowright: "ArrowRight",
+  end: "End",
+  home: "Home",
+  pagedown: "PageDown",
+  pageup: "PageUp",
+  enter: "Enter",
+  plus: "+",
+  minus: "-",
+  star: "*",
+  slash: "/",
+  period: ".",
+  equal: "=",
+  underscore: "_",
+  esc: "Escape",
+  escape: "Escape",
+  tab: "Tab",
+  space: " ",
+  backspace: "Backspace",
+  delete: "Delete"
+};
+for (let keyAttr in keys) {
+  let keyName = keys[keyAttr];
+  mods[keyAttr] = (el, cb, opts, extraKey) => [el, (e3) => {
+    if (!e3.key || !keyName.includes(e3.key))
+      return;
+    cb(e3);
+  }];
+}
 var attr = (el, name, v2) => {
   if (v2 == null || v2 === false)
     el.removeAttribute(name);
@@ -722,16 +848,16 @@ function parseExpr(el, expression, dir) {
     let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /^(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
     try {
       evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { return ${rightSideSafeExpression} };`);
-    } catch (e2) {
-      return exprError(e2, el, expression, dir);
+    } catch (e3) {
+      return exprError(e3, el, expression, dir);
     }
   }
   return (state) => {
     let result;
     try {
       result = evaluate.call(el, state);
-    } catch (e2) {
-      return exprError(e2, el, expression, dir);
+    } catch (e3) {
+      return exprError(e3, el, expression, dir);
     }
     return result;
   };

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)&&u(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function l(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function f(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function u(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function a(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function h(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function c(t){f.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function v(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,p(t),e}finally{i=o,e()}}}function p(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,v(t)}function d(t){if(i!==this)throw new Error("Out-of-order effect");h(this),i=t,this.f&=-2,8&this.f&&p(this),e()}function y(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function b(t){var e=new y(t);return e.c(),e.d.bind(e)}f.prototype.h=function(){return!0},f.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},f.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},f.prototype.subscribe=function(t){var e=this;return b((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},f.prototype.valueOf=function(){return this.value},f.prototype.toString=function(){return this.value+""},f.prototype.peek=function(){return this.v},Object.defineProperty(f.prototype,"value",{get:function(){var t=l(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(c.prototype=new f).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!u(this))return this.f&=-2,!0;var t=i;try{a(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,h(this),this.f&=-2,!0},c.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}f.prototype.S.call(this,t)},c.prototype.U=function(t){if(f.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},c.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},c.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(c.prototype,"value",{get:function(){1&this.f&&t();var e=l(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),y.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},y.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,v(this),a(this),n++;var e=i;return i=this,d.bind(this,e)},y.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},y.prototype.d=function(){this.f|=8,1&this.f||p(this)},Symbol.observable||=Symbol("observable");var m=new FinalizationRegistry((t=>t.call?.())),g=(t,e,i,r,n,o)=>{return t&&(s=(t[Symbol.observable]?.()||t).subscribe?.(e,i,r),o=s&&(()=>s.unsubscribe?.())||t.set&&t.call?.(n,e)||(t.then?.((t=>(!n&&e(t),r?.())),i)||(async o=>{try{for await(o of t){if(n)return;e(o)}r?.()}catch(t){i?.(t)}})())&&(t=>n=1),m.register(t,o),o);var s},S=t=>t&&t[A],A=Symbol("signal-struct");function w(t,e){if(S(t)&&!e)return t;if(x(t)){const n=Object.create(e||Object.getPrototypeOf(t)),o={},s=Object.getOwnPropertyDescriptors(t);for(let t in s){let e=s[t];if(e.get){let i=o[t]=new c(e.get.bind(n));Object.defineProperty(n,t,{get:()=>i.value,set:e.set?.bind(n),configurable:!1,enumerable:!0})}else{let s=e.value,l=(r=s)&&!!(r[Symbol.observable]||r[Symbol.asyncIterator]||r.call&&r.set||r.subscribe||r.then),u=o[t]=(i=s)&&i.peek?s:new f(l?void 0:x(s)?Object.seal(w(s)):Array.isArray(s)?w(s):s);l&&g(s,(t=>u.value=t)),Object.defineProperty(n,t,{get:()=>u.value,set(t){if(x(t)){if(x(u.value))try{return void Object.assign(u.value,t)}catch(t){}u.value=Object.seal(w(t))}else Array.isArray(t)?u.value=w(t):u.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,A,{configurable:!1,enumerable:!1,value:!0}),n}var i,r;return Array.isArray(t)&&!S(t[0])?t.map((t=>w(t))):t}function x(t){return t&&t.constructor===Object}w.isStruct=S;var O=(t,e,i,r=null)=>{let n,o,s,l=0,f=i.length,u=e.length,{remove:a,same:h,insert:c,replace:v}=O;for(;l<f&&l<u&&h(e[l],i[l]);)l++;for(;l<f&&l<u&&h(i[f-1],e[u-1]);)r=i[(--u,--f)];if(l==u)for(;l<f;)c(r,i[l++],t);else{for(n=e[l];l<f;)s=i[l++],o=n?n.nextSibling:r,h(n,s)?n=o:l<f&&h(i[l],o)?(v(n,s,t),n=o):c(n,s,t);for(;!h(n,r);)o=n.nextSibling,a(n,t),n=o}return i};O.same=(t,e)=>t==e,O.replace=(t,e,i)=>i.replaceChild(e,t),O.insert=(t,e,i)=>i.insertBefore(e,t),O.remove=(t,e)=>e.removeChild(t);var j=O,N={},E={},k={},W=t=>null===t?E:void 0===t?k:"number"==typeof t||t instanceof Number?N[t]||(N[t]=new Number(t)):"string"==typeof t||t instanceof String?N[t]||(N[t]=new String(t)):"boolean"==typeof t||t instanceof Boolean?N[t]||(N[t]=new Boolean(t)):t,$={},P={};$.with=(t,e,i)=>{z(t,w(M(t,e,"with")(i),i))},$.if=(t,e)=>{let i=document.createTextNode(""),r=[M(t,e,":if")],n=[t],o=t;for(;(o=t.nextElementSibling)&&o.hasAttribute(":else");)o.removeAttribute(":else"),(e=o.getAttribute(":if"))?(o.removeAttribute(":if"),o.remove(),n.push(o),r.push(M(t,e,":else :if"))):(o.remove(),n.push(o),r.push((()=>1)));return t.replaceWith(o=i),t=>{let e=r.findIndex((e=>e(t)));n[e]!=o&&((o[C]||o).replaceWith(o=n[e]||i),z(o,t))}};var C=Symbol(":each");$.each=(t,e)=>{let i=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r=i[2].trim(),n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?[n.replace(e,"").trim(),o[1].trim(),r]:[n,"",r]}(e);if(!i)return R(new Error,t,e);const r=t[C]=document.createTextNode("");t.replaceWith(r);const n=M(t,i[2],":each"),o=t.getAttribute(":key"),s=o?M(null,o):null;t.removeAttribute(":key");const l=new WeakMap,f=new WeakMap;let u=[];return o=>{let a=n(o);a?"number"==typeof a?a=Array.from({length:a},((t,e)=>[e,e+1])):Array.isArray(a)?a=a.map(((t,e)=>[e+1,t])):"object"==typeof a?a=Object.entries(a):R(Error("Bad list value"),t,e,":each"):a=[];let h=[],c=[];for(let[e,r]of a){let n,u,a=s?.({[i[0]]:r,[i[1]]:e});("string"==typeof(v=a)||"boolean"==typeof v||"number"==typeof v)&&(a=W(a)),null==a?n=t.cloneNode(!0):(n=f.get(a))||f.set(a,n=t.cloneNode(!0)),h.push(n),null!=a&&(u=l.get(a))?u[i[0]]=r:(u=w({[i[0]]:r,[i[1]]:e},o),null!=a&&l.set(a,u)),c.push(u)}var v;j(r.parentNode,u,h,r),u=h;for(let t=0;t<h.length;t++)z(h[t],c[t])}},P.ref=(t,e,i)=>{i[e]=t},P.id=(t,e)=>{let i=M(t,e,":id");return e=>{return r=i(e),t.id=r||0===r?r:"";var r}},P.class=(t,e)=>{let i=M(t,e,":class"),r=t.className;return e=>{let n=i(e);t.className=r+typeof n=="string"?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},P.style=(t,e)=>{let i=M(t,e,":style"),r=t.getAttribute("style")||"";return r.endsWith(";")||(r+="; "),e=>{let n=i(e);if("string"==typeof n)t.setAttribute("style",r+n);else for(let e in n)t.style[e]=n[e]}},P.text=(t,e)=>{let i=M(t,e,":text");return e=>{let r=i(e);t.textContent=null==r?"":r}},P.value=(t,e)=>{let i,r,n=M(t,e,":value"),o="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"TEXTAREA"===t.tagName||"text"===t.type||""===t.type?e=>(i=t.selectionStart,r=t.selectionEnd,t.setAttribute("value",t.value=null==e?"":e),i&&t.setSelectionRange(i,r)):"checkbox"===t.type?e=>(t.value=e?"on":"",D(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>o(n(t))},P.on=(t,e)=>{let i=M(t,e,":on");return e=>{let r=i(e);for(let e in r)B(t,e,r[e]);return()=>{for(let e in r)L(t,e,r[e])}}};var U=Symbol("stop"),B=(t,e,i)=>{if(e.indexOf("..")<0)t.addEventListener(e,i);else{const r=e.split("..").map((t=>t.startsWith("on")?t.slice(2):t)),n=(e,o=0)=>{let s=l=>{t.removeEventListener(r[o],s),"function"!=typeof(e=e.call(t,l))&&(e=()=>{}),++o<r.length?n(e,o):i[U]||n(i)};t.addEventListener(r[o],s)};n(i)}},L=(t,e,i)=>{e.indexOf("..")>=0&&(i[U]=!0),t.removeEventListener(e,i)};P.data=(t,e)=>{let i=M(t,e,":data");return e=>{let r=i(e);for(let e in r)t.dataset[e]=r[e]}},P.aria=(t,e)=>{let i=M(t,e,":aria");return e=>(e=>{for(let i in e)D(t,"aria-"+F(i),null==e[i]?null:e[i]+"")})(i(e))},P[""]=(t,e)=>{let i=M(t,e,":");if(i)return e=>{let r=i(e);for(let e in r)D(t,F(e),r[e])}};var T=(t,e,i,r)=>{let n=r.startsWith("on")&&r.slice(2),o=M(t,e,":"+r);if(o)return n?e=>{let i=o(e);if(i)return B(t,n,i),()=>L(t,n,i)}:e=>D(t,r,o(e))},D=(t,e,i)=>{null==i||!1===i?t.removeAttribute(e):t.setAttribute(e,!0===i?"":"number"==typeof i||"string"==typeof i?i:"")},_={};function M(t,e,i){let r=_[e];if(!r){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{r=_[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(r){return R(r,t,e,i)}}return n=>{let o;try{o=r.call(t,n)}catch(r){return R(r,t,e,i)}return o}}function R(t,e,i,r){Object.assign(t,{element:e,expression:i}),console.warn(`∴ ${t.message}\n\n${r}=${i?`"${i}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function F(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var I=new WeakMap;function z(t,i){if(!t.children)return;if(I.has(t)){let r=I.get(t);return function(t){if(n>0)return t();n++;try{t()}finally{e()}}((()=>Object.assign(r,i))),r}const r=w(i||{}),o=[],s=(t,e=t.parentNode)=>{for(let i in $){let n=":"+i;if(t.hasAttribute?.(n)){let s=t.getAttribute(n);if(t.removeAttribute(n),!s)continue;if(o.push($[i](t,s,r,i)),I.has(t)||t.parentNode!==e)return!1}}if(t.attributes)for(let i=0;i<t.attributes.length;){let n=t.attributes[i];if(":"!==n.name[0]){i++;continue}t.removeAttribute(n.name);let s=n.value;if(!s)continue;let l=n.name.slice(1).split(":");for(let i of l){let n=P[i]||T;if(o.push(n(t,s,r,i)),I.has(t)||t.parentNode!==e)return!1}}for(let e,i=0;e=t.children[i];i++)!1===s(e,t)&&i--};s(t);for(let t of o)if(t){let e;b((()=>{"function"==typeof e&&e(),e=t(r)}))}return Object.seal(r),I.set(t,r),r}var X=z;export{X as default};
+function t(){throw new Error("Cycle detected")}function r(){if(o>1)o--;else{for(var t,e=!1;void 0!==n;){var r=n;for(n=void 0,s++;void 0!==r;){var i=r.o;if(r.o=void 0,r.f&=-3,!(8&r.f)&&f(r))try{r.c()}catch(r){e||(t=r,e=!0)}r=i}}if(s=0,o--,e)throw t}}var i=void 0,n=void 0,o=0,s=0,l=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 u(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function f(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function c(t){for(var e=t.s;void 0!==e;e=e.n){var r=e.S.n;void 0!==r&&(e.r=r),e.S.n=e,e.i=-1}}function h(t){for(var e=t.s,r=void 0;void 0!==e;){var i=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==r&&(r.p=e),e.p=void 0,e.n=r,r=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=i}t.s=r}function v(t){u.call(this,void 0),this.x=t,this.s=void 0,this.g=l-1,this.f=4}function p(t){var e=t.u;if(t.u=void 0,"function"==typeof e){o++;var n=i;i=void 0;try{e()}catch(e){throw t.f&=-2,t.f|=8,d(t),e}finally{i=n,r()}}}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");h(this),i=t,this.f&=-2,8&this.f&&d(this),r()}function b(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function m(t){var e=new b(t);return e.c(),e.d.bind(e)}u.prototype.h=function(){return!0},u.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},u.prototype.U=function(t){var e=t.e,r=t.x;void 0!==e&&(e.x=r,t.e=void 0),void 0!==r&&(r.e=e,t.x=void 0),t===this.t&&(this.t=r)},u.prototype.subscribe=function(t){var e=this;return m((function(){var r=e.value,i=32&this.f;this.f&=-33;try{t(r)}finally{this.f|=i}}))},u.prototype.valueOf=function(){return this.value},u.prototype.toString=function(){return this.value+""},u.prototype.peek=function(){return this.v},Object.defineProperty(u.prototype,"value",{get:function(){var t=a(this);return void 0!==t&&(t.i=this.i),this.v},set:function(e){if(e!==this.v){s>100&&t(),this.v=e,this.i++,l++,o++;try{for(var i=this.t;void 0!==i;i=i.x)i.t.N()}finally{r()}}}}),(v.prototype=new u).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===l)return!0;if(this.g=l,this.f|=1,this.i>0&&!f(this))return this.f&=-2,!0;var t=i;try{c(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,h(this),this.f&=-2,!0},v.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}u.prototype.S.call(this,t)},v.prototype.U=function(t){if(u.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},v.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},v.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(v.prototype,"value",{get:function(){1&this.f&&t();var e=a(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),c(this),o++;var e=i;return i=this,y.bind(this,e)},b.prototype.N=function(){2&this.f||(this.f|=2,this.o=n,n=this)},b.prototype.d=function(){this.f|=8,1&this.f||d(this)},Symbol.observable||=Symbol("observable");var g=new FinalizationRegistry((t=>t.call?.())),w=(t,e,r,i,n,o)=>{return t&&(s=(t[Symbol.observable]?.()||t).subscribe?.(e,r,i),o=s&&(()=>s.unsubscribe?.())||t.set&&t.call?.(n,e)||(t.then?.((t=>(!n&&e(t),i?.())),r)||(async o=>{try{for await(o of t){if(n)return;e(o)}i?.()}catch(t){r?.(t)}})())&&(t=>n=1),g.register(t,o),o);var s},A=t=>t&&t[S],S=Symbol("signal-struct");function x(t,e){if(A(t)&&!e)return t;if(O(t)){const n=Object.create(e||Object.getPrototypeOf(t)),o={},s=Object.getOwnPropertyDescriptors(t);for(let t in s){let e=s[t];if(e.get){let r=o[t]=new v(e.get.bind(n));Object.defineProperty(n,t,{get:()=>r.value,set:e.set?.bind(n),configurable:!1,enumerable:!0})}else{let s=e.value,l=(i=s)&&!!(i[Symbol.observable]||i[Symbol.asyncIterator]||i.call&&i.set||i.subscribe||i.then),a=o[t]=(r=s)&&r.peek?s:new u(l?void 0:O(s)?Object.seal(x(s)):Array.isArray(s)?x(s):s);l&&w(s,(t=>a.value=t)),Object.defineProperty(n,t,{get:()=>a.value,set(t){if(O(t)){if(O(a.value))try{return void Object.assign(a.value,t)}catch(t){}a.value=Object.seal(x(t))}else Array.isArray(t)?a.value=x(t):a.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,S,{configurable:!1,enumerable:!1,value:!0}),n}var r,i;if(Array.isArray(t)&&!A(t[0]))for(let e=0;e<t.length;e++)t[e]=x(t[e]);return t}function O(t){return t&&t.constructor===Object}x.isStruct=A;var j=(t,e,r,i=null)=>{let n,o,s,l=0,a=r.length,u=e.length,{remove:f,same:c,insert:h,replace:v}=j;for(;l<a&&l<u&&c(e[l],r[l]);)l++;for(;l<a&&l<u&&c(r[a-1],e[u-1]);)i=r[(--u,--a)];if(l==u)for(;l<a;)h(i,r[l++],t);else{for(n=e[l];l<a;)s=r[l++],o=n?n.nextSibling:i,c(n,s)?n=o:l<a&&c(r[l],o)?(v(n,s,t),n=o):h(n,s,t);for(;!c(n,i);)o=n.nextSibling,f(n,t),n=o}return r};j.same=(t,e)=>t==e,j.replace=(t,e,r)=>r.replaceChild(e,t),j.insert=(t,e,r)=>r.insertBefore(e,t),j.remove=(t,e)=>e.removeChild(t);var N=j,E={},k={},P={},W=t=>null===t?k:void 0===t?P:"number"==typeof t||t instanceof Number?E[t]||(E[t]=new Number(t)):"string"==typeof t||t instanceof String?E[t]||(E[t]=new String(t)):"boolean"==typeof t||t instanceof Boolean?E[t]||(E[t]=new Boolean(t)):t,C={},D={};C.if=(t,e)=>{let r=document.createTextNode(""),i=[H(t,e,":if")],n=[t],o=t;for(;(o=t.nextElementSibling)&&o.hasAttribute(":else");)o.removeAttribute(":else"),(e=o.getAttribute(":if"))?(o.removeAttribute(":if"),o.remove(),n.push(o),i.push(H(t,e,":else :if"))):(o.remove(),n.push(o),i.push((()=>1)));return t.replaceWith(o=r),t=>{let e=i.findIndex((e=>e(t)));n[e]!=o&&((o[T]||o).replaceWith(o=n[e]||r),X(o,t))}},C.with=(t,e,r)=>{X(t,x(H(t,e,"with")(r),r))};var T=Symbol(":each");C.each=(t,e)=>{let r=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let i=r[2].trim(),n=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?[n.replace(e,"").trim(),o[1].trim(),i]:[n,"",i]}(e);if(!r)return I(new Error,t,e);const i=t[T]=document.createTextNode("");t.replaceWith(i);const n=H(t,r[2],":each"),o=t.getAttribute(":key"),s=o?H(null,o):null;t.removeAttribute(":key");const l=new WeakMap,a=new WeakMap;let u=[];return o=>{let f=n(o);f?"number"==typeof f?f=Array.from({length:f},((t,e)=>[e,e+1])):Array.isArray(f)?f=f.map(((t,e)=>[e+1,t])):"object"==typeof f?f=Object.entries(f):I(Error("Bad list value"),t,e,":each"):f=[];let c=[],h=[];for(let[e,i]of f){let n,u,f=s?.({[r[0]]:i,[r[1]]:e});("string"==typeof(v=f)||"boolean"==typeof v||"number"==typeof v)&&(f=W(f)),null==f?n=t.cloneNode(!0):(n=a.get(f))||a.set(f,n=t.cloneNode(!0)),c.push(n),null!=f&&(u=l.get(f))?u[r[0]]=i:(u=x({[r[0]]:i,[r[1]]:e},o),null!=f&&l.set(f,u)),h.push(u)}var v;N(i.parentNode,u,c,i),u=c;for(let t=0;t<c.length;t++)X(c[t],h[t])}},D.ref=(t,e,r)=>{r[e]=t},D.id=(t,e)=>{let r=H(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},D.class=(t,e)=>{let r=H(t,e,":class"),i=t.className;return e=>{let n=r(e);t.className=i+typeof n=="string"?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ")}},D.style=(t,e)=>{let r=H(t,e,":style"),i=t.getAttribute("style")||"";return i.endsWith(";")||(i+="; "),e=>{let n=r(e);if("string"==typeof n)t.setAttribute("style",i+n);else for(let e in n)t.style[e]=n[e]}},D.text=(t,e)=>{let r=H(t,e,":text");return e=>{let i=r(e);t.textContent=null==i?"":i}},D.data=(t,e)=>{let r=H(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},D.aria=(t,e)=>{let r=H(t,e,":aria");return e=>(e=>{for(let r in e)_(t,"aria-"+q(r),null==e[r]?null:e[r]+"")})(r(e))},D[""]=(t,e)=>{let r=H(t,e,":");if(r)return e=>{let i=r(e);for(let e in i)_(t,q(e),i[e])}},D.value=(t,e)=>{let r,i,n=H(t,e,":value"),o="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"TEXTAREA"===t.tagName||"text"===t.type||""===t.type?e=>(r=t.selectionStart,i=t.selectionEnd,t.setAttribute("value",t.value=null==e?"":e),r&&t.setSelectionRange(r,i)):"checkbox"===t.type?e=>(t.value=e?"on":"",_(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return t=>o(n(t))},D.on=(t,e)=>{let r=H(t,e,":on");return e=>{let i=r(e);for(let e in i)L(t,e,i[e]);return()=>{for(let e in i)B(t,e,i[e])}}};var U=(t,e,r,i)=>{let n=i.startsWith("on")&&i.slice(2),o=H(t,e,":"+i);if(o)return n?e=>{let r=o(e);if(r)return L(t,n,r),()=>B(t,n,r)}:e=>_(t,i,o(e))},$=Symbol("stop"),L=(t,e,r)=>{let i=e.split("..").map((t=>t.startsWith("on")?t.slice(2):t)),n={};if(i[0]=i[0].replace(/\.(\w+)?-?([\w]+)?/g,((e,i,o)=>(i=M[i])?([t,r]=i(t,r,n,o),""):"")),1==i.length)t.addEventListener(i[0],r,n);else{const e=(o,s=0)=>{let l=n=>{t.removeEventListener(i[s],l),"function"!=typeof(o=o.call(t,n))&&(o=()=>{}),++s<i.length?e(o,s):r[$]||e(r)};t.addEventListener(i[s],l,n)};e(r)}},B=(t,e,r)=>{e.indexOf("..")>=0&&(r[$]=!0),t.removeEventListener(e,r)},M={throttle(t,r,i,n){n=Number(n)||108;let o,s,l=()=>{o=!0,setTimeout((()=>{o=!1,s&&(r(e),s=!1,l())}))};return[t,t=>{if(o)return s=!0;r(t),l()}]},debounce(t,r,i,n){n=Number(n)||108;let o,s=()=>{o=null,r(e)};return[t,t=>{clearTimeout(o),o=setTimeout(s,n)}]},window:(t,e)=>[window,e],document:(t,e)=>[document,e],outside:(t,e)=>[t,r=>{t.contains(r.target)||!1!==r.target.isConnected&&(t.offsetWidth<1&&t.offsetHeight<1||e(r))}],prevent:(t,e)=>[t,t=>{t.preventDefault(),e(t)}],stop:(t,e)=>[t,t=>{t.stopPropagation(),e(t)}],self:(t,e)=>[t,r=>{r.target===t&&e(r)}],once:(t,e,r)=>(r.once=!0,[t,e]),passive:(t,e,r)=>(r.passive=!0,[t,e]),capture:(t,e,r)=>(r.capture=!0,[t,e])},R={ctrl:"Control Ctrl",shift:"Shift",alt:"Alt",meta:"Meta",cmd:"Meta",down:"ArrowDown",up:"ArrowUp",left:"ArrowLeft",right:"ArrowRight",arrowdown:"ArrowDown",arrowup:"ArrowUp",arrowleft:"ArrowLeft",arrowright:"ArrowRight",end:"End",home:"Home",pagedown:"PageDown",pageup:"PageUp",enter:"Enter",plus:"+",minus:"-",star:"*",slash:"/",period:".",equal:"=",underscore:"_",esc:"Escape",escape:"Escape",tab:"Tab",space:" ",backspace:"Backspace",delete:"Delete"};for(let t in R){let e=R[t];M[t]=(t,r,i,n)=>[t,t=>{t.key&&e.includes(t.key)&&r(t)}]}var _=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},F={};function H(t,e,r){let i=F[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=F[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(i){return I(i,t,e,r)}}return n=>{let o;try{o=i.call(t,n)}catch(i){return I(i,t,e,r)}return o}}function I(t,e,r,i){Object.assign(t,{element:e,expression:r}),console.warn(`∴ ${t.message}\n\n${i}=${r?`"${r}"\n\n`:""}`,e),setTimeout((()=>{throw t}),0)}function q(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var z=new WeakMap;function X(t,e){if(!t.children)return;if(z.has(t)){let i=z.get(t);return function(t){if(o>0)return t();o++;try{t()}finally{r()}}((()=>Object.assign(i,e))),i}const i=x(e||{}),n=[],s=(t,e=t.parentNode)=>{for(let r in C){let o=":"+r;if(t.hasAttribute?.(o)){let s=t.getAttribute(o);if(t.removeAttribute(o),!s)continue;if(n.push(C[r](t,s,i,r)),z.has(t)||t.parentNode!==e)return!1}}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;if(!s)continue;let l=o.name.slice(1).split(":");for(let r of l){let o=D[r]||U;if(n.push(o(t,s,i,r)),z.has(t)||t.parentNode!==e)return!1}}for(let e,r=0;e=t.children[r];r++)!1===s(e,t)&&r--};s(t);for(let t of n)if(t){let e;m((()=>{"function"==typeof e&&e(),e=t(i)}))}return Object.seal(i),z.set(t,i),i}var Z=X;export{Z as default};

package/src/directives.js

@@ -9,13 +9,9 @@ import p from 'primitive-pool'
 export const primary = {}, secondary = {}
 
 
-// :with must come before :if or :each or anyone else
-primary['with'] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, 'with')
-  sprae(el, signalStruct(evaluate(rootState), rootState));
-}
-
 // :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
+// as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
+// we consider :with={x} :if={x} case insignificant
 primary['if'] = (el, expr) => {
   let holder = document.createTextNode(''),
       clauses = [parseExpr(el, expr, ':if')],
@@ -40,13 +36,20 @@ primary['if'] = (el, expr) => {
   return (state) => {
     let i = clauses.findIndex(f => f(state))
     if (els[i] != cur) {
-      (cur[_each] || cur).replaceWith(cur = els[i] || holder);
+      ;(cur[_each] || cur).replaceWith(cur = els[i] || holder);
       // NOTE: it lazily initializes elements on insertion, it's safe to sprae multiple times
+      // but :if must come first to avoid preliminary caching
       sprae(cur, state);
     }
   }
 }
 
+// :with must come before :each, but :if has primary importance
+primary['with'] = (el, expr, rootState) => {
+  let evaluate = parseExpr(el, expr, 'with')
+  sprae(el, signalStruct(evaluate(rootState), rootState));
+}
+
 const _each = Symbol(':each')
 
 // :each must init before :ref, :id or any others, since it defines scope
@@ -179,6 +182,32 @@ secondary['text'] = (el, expr) => {
   }
 }
 
+secondary['data'] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ':data')
+
+  return ((state) => {
+    let value = evaluate(state)
+    for (let key in value) el.dataset[key] = value[key];
+  })
+}
+
+secondary['aria'] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ':aria')
+  const update = (value) => {
+    for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
+  }
+  return ((state) => update(evaluate(state)))
+}
+
+// set props in-bulk or run effect
+secondary[''] = (el, expr) => {
+  let evaluate = parseExpr(el, expr, ':')
+  if (evaluate) return (state) => {
+    let value = evaluate(state)
+    for (let key in value) attr(el, dashcase(key), value[key]);
+  }
+}
+
 // connect expr to element value
 secondary['value'] = (el, expr) => {
   let evaluate = parseExpr(el, expr, ':value')
@@ -216,13 +245,38 @@ secondary['on'] = (el, expr) => {
   }
 }
 
+// any unknown directive
+export default (el, expr, state, name) => {
+  let evt = name.startsWith('on') && name.slice(2)
+  let evaluate = parseExpr(el, expr, ':'+name)
+
+  if (!evaluate) return
+
+  if (evt) return state => {
+    let value = evaluate(state)
+    if (value) {
+      addListener(el, evt, value)
+      return () => removeListener(el, evt, value)
+    }
+  }
+
+  return state => attr(el, name, evaluate(state))
+}
+
 const _stop = Symbol('stop')
 const addListener = (el, evt, startFn) => {
-  if (evt.indexOf('..')<0) el.addEventListener(evt, startFn);
+  // ona..onb
+  let evts = evt.split('..').map(e => e.startsWith('on') ? e.slice(2) : e),
+      opts = {}
 
-  // sequences like `a..b`: fn
+  // onevt.debounce-108
+  evts[0] = evts[0].replace(
+    /\.(\w+)?-?([\w]+)?/g,
+    (match, mod, param) => (mod=mods[mod]) ? ([el, startFn] = mod(el, startFn, opts, param), '') : ''
+  );
+
+  if (evts.length == 1) el.addEventListener(evts[0], startFn, opts);
   else {
-    const evts = evt.split('..').map(e => e.startsWith('on') ? e.slice(2) : e)
     const nextEvt = (fn, cur=0) => {
       let curListener = e => {
         el.removeEventListener(evts[cur], curListener)
@@ -230,7 +284,7 @@ const addListener = (el, evt, startFn) => {
         if (++cur < evts.length) nextEvt(fn, cur);
         else if (!startFn[_stop]) nextEvt(startFn); // update only if chain isn't stopped
       }
-      el.addEventListener(evts[cur],curListener)
+      el.addEventListener(evts[cur], curListener, opts)
     }
     nextEvt(startFn)
   }
@@ -240,44 +294,67 @@ const removeListener = (el, evt, fn) => {
   el.removeEventListener(evt, fn);
 }
 
-secondary['data'] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':data')
-
-  return ((state) => {
-    let value = evaluate(state)
-    for (let key in value) el.dataset[key] = value[key];
-  })
-}
-
-secondary['aria'] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':aria')
-  const update = (value) => {
-    for (let key in value) attr(el, 'aria-' + dashcase(key), value[key] == null ? null : value[key] + '');
-  }
-  return ((state) => update(evaluate(state)))
-}
-
-// set props in-bulk or run effect
-secondary[''] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':')
-  if (evaluate) return (state) => {
-    let value = evaluate(state)
-    for (let key in value) attr(el, dashcase(key), value[key]);
-  }
-}
-
-// any other prop directive
-export default (el, expr, values, name) => {
-  let evt = name.startsWith('on') && name.slice(2)
-  let evaluate = parseExpr(el, expr, ':'+name)
-  if (evaluate) return evt ? state => {
-    let value = evaluate(state)
-    if (value) {
-      addListener(el, evt, value)
-      return () => removeListener(el, evt, value)
+// event modifiers
+const mods = {
+  throttle(el, cb, opts, limit) {
+    limit = Number(limit) || 108
+    let pause, planned, block = () => {
+      pause = true
+      setTimeout(() => {
+        pause = false
+        // if event happened during blocked time, it schedules call by the end
+        if (planned) cb(e), planned = false, block();
+      })
     }
-  }
-  : state => attr(el, name, evaluate(state))
+    return [el, e => {
+      if (pause) return planned = true
+      cb(e); block();
+    }]
+  },
+
+  debounce(el, cb, opts, wait) {
+    wait = Number(wait) || 108;
+    let timeout, later = () => { timeout = null; cb(e) }
+    return [el, (e) => {
+      clearTimeout(timeout)
+      timeout = setTimeout(later, wait)
+    }]
+  },
+
+  window(el, cb) { return [window, cb] },
+  document(el, cb) { return [document, cb] },
+  outside(el, cb) {
+    return [el, (e) => {
+      if (el.contains(e.target)) return
+      if (e.target.isConnected === false) return
+      if (el.offsetWidth < 1 && el.offsetHeight < 1) return
+      cb(e)
+    }]
+  },
+  prevent(el, cb) { return [el, e => { e.preventDefault(); cb(e) } ]},
+  stop(el, cb) { return [el, e => { e.stopPropagation(); cb(e) } ]},
+  self(el, cb) { return [el, e => { e.target === el && cb(e) } ]},
+  once(el, cb, opts) { opts.once = true; return [el, cb] },
+  passive(el, cb, opts) { opts.passive = true; return [el, cb] },
+  capture(el, cb, opts) { opts.capture = true; return [el, cb] },
+};
+let keys = {
+  ctrl:'Control Ctrl',
+  shift:'Shift',
+  alt:'Alt',
+  meta:'Meta',cmd:'Meta',
+  down:'ArrowDown',up:'ArrowUp',left:'ArrowLeft',right:'ArrowRight',
+  end:'End',home:'Home',pagedown:'PageDown',pageup:'PageUp',
+  enter:'Enter',plus:'+',minus:'-',star:'*',slash:'/',period:'.',equal:'=',underscore:'_',
+  esc:'Escape',escape:'Escape',tab:'Tab',space:' ',
+  backspace:'Backspace', delete:'Delete'
+}
+for (let keyAttr in keys) {
+  let keyName = keys[keyAttr]
+  mods[keyAttr] = (el, cb, opts, extraKey) => [el, e => {
+    if (!e.key || !keyName.includes(e.key)) return
+    cb(e)
+  }]
 }
 
 // set attr
@@ -286,7 +363,6 @@ const attr = (el, name, v) => {
   else el.setAttribute(name, v === true ? '' : (typeof v === 'number' || typeof v === 'string') ? v : '')
 }
 
-
 let evaluatorMemo = {}
 
 // borrowed from alpine: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
@@ -323,7 +399,7 @@ function parseExpr(el, expression, dir) {
   }
 }
 
-export function exprError(error, element, expression, dir) {
+function exprError(error, element, expression, dir) {
   Object.assign( error, { element, expression } )
   console.warn(`∴ ${error.message}\n\n${dir}=${ expression ? `"${expression}"\n\n` : '' }`, element)
   setTimeout(() => { throw error }, 0)

package/test/test.js

@@ -148,7 +148,7 @@ test('text: core', async () => {
   is(el.outerHTML, `<div></div>`)
 })
 
-test('conditions: base', async () => {
+test('if: base', async () => {
   let el = h`<p>
     <span :if="a==1">a</span>
     <span :else :if="a==2">b</span>
@@ -166,7 +166,7 @@ test('conditions: base', async () => {
   is(el.innerHTML, '<span>c</span>')
 })
 
-test('conditions: short with insertions', async () => {
+test('if: short with insertions', async () => {
   let el = h`<p>
     <span :if="a==1" :text="'1:'+a"></span>
     <span :else :if="a==2" :text="'2:'+a"></span>
@@ -191,7 +191,7 @@ test('conditions: short with insertions', async () => {
   params.a = null
 })
 
-test('conditions: reactive values', async () => {
+test('if: reactive values', async () => {
   let el = h`<p>
     <span :if="a==1" :text="'1:'+a"></span>
     <span :else :if="a==2" :text="'2:'+a"></span>
@@ -215,12 +215,27 @@ test('conditions: reactive values', async () => {
   is(el.innerHTML, '<span>4</span>')
 })
 
-test('conditions (#3): subsequent content is not abandoned', async () => {
+test('if: (#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('if: + :with doesnt prevent secondary effects from happening', () => {
+  let el = h`<div><x :if="x" :with="{}" :text="x"></x></div>`
+  let state = sprae(el, {x:''})
+  is(el.innerHTML, ``)
+  state.x = '123'
+  is(el.innerHTML, `<x>123</x>`)
+
+  // NOTE: we ignore this case
+  // let el2 = h`<div><x :if="x" :with="{x:cond}" :text="x"></x></div>`
+  // let state2 = sprae(el, {cond:''})
+  // is(el2.innerHTML, ``)
+  // state2.cond = '123'
+  // is(el2.innerHTML, `<x>123</x>`)
+})
+
 test('each: array', async () => {
   // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
   let el = h`<p>
@@ -409,12 +424,16 @@ test.todo('each: unmounted elements remove listeners', async () => {
 
 test('each: internal children get updated by state update, also: update by running again', () => {
   let el = h`<><x :each="item, idx in items" :text="item" :key="idx"></x></>`
-  sprae(el, { items: [1,2,3] })
+  let state = sprae(el, { items: [1,2,3] })
   is(el.textContent, '123')
-  let state = sprae(el, { items: [0,2,3] })
+  state.items = [2, 2, 3]
+  is(el.textContent, '223')
+  state = sprae(el, { items: [0,2,3] })
   is(el.textContent, '023')
+  // NOTE: this doesn't update items, since they're new array
+  console.log('set items')
   state.items[0] = 1
-  state.items = state.items
+  state.items = [...state.items]
   is(el.textContent, '123')
 })
 
@@ -554,6 +573,57 @@ test('on: state changes between chain of events', e => {
   is(log, [1, 1.1, 2])
 })
 
+test('on: once', e => {
+  // NOTE: if callback updates it's still rebound
+  let el = h`<x :onx.once="(e=>x&&log.push(this))" ></x>`
+  let log = []
+  let state = sprae(el, {log, x:1})
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+  state.x = 2
+  el.dispatchEvent(new window.Event('x'));
+  el.dispatchEvent(new window.Event('x'));
+  is(log, [el])
+})
+
+test('on: capture, stop, prevent', e => {
+  let el = h`<x :onx.capture="e=>log.push(1)"><y :onx="e=>log.push(2)"></y></x>`
+  let state = sprae(el, {log:[]})
+  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1,2])
+
+  let el2 = h`<x :onx="e=>log.push(1)"><y :onx.stop="e=>log.push(2)"></y></x>`
+  let state2 = sprae(el2, {log:[]})
+  el2.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state2.log, [2])
+})
+
+test('on: window, self', e => {
+  let el = h`<x :onx.self="e=>log.push(1)"><y :onx.window="e=>log.push(2)"></y></x>`
+  let state = sprae(el, {log:[]})
+  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [])
+  el.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1])
+  window.dispatchEvent(new window.Event('x', {bubbles:true}));
+  is(state.log, [1,2])
+})
+
+test('on: keys', e => {
+  let el = h`<x :onkeydown.enter="e=>log.push(1)"></x>`
+  let state = {log:[]}
+  sprae(el, state)
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
+  is(state.log,[1])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
+  is(state.log,[1,1])
+})
+
 test('with: inline', () => {
   let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})

package/todo.md

@@ -39,4 +39,7 @@
 * [ ] frameworks benchmark
 * [ ] examples
   * [x] todomvc
-  * [x] waveplay
+  * [x] waveplay
+* [x] evt modifiers
+  * [x] once, capture, passive
+  * [x] ...rest