sprae 2.10.0 → 2.10.2

package/package.json

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

package/r&d.md

@@ -424,9 +424,26 @@
   + allow multiple setters for same props or multiple listeners for same events
   + oldschool jquery-compatible events
 
+  * [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] Mods design -> use event modifiers, not props modifiers
 
-  * [ ] ~~Prop 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
@@ -443,23 +460,10 @@
       - 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
+    * [ ] prop.next="" - run update after other DOM updates happen
+    * [ ] prop.fx="" - run effect without changing property
+    * [ ] x.prop="xyz" - set element property, rather than attribute (following topic)
+    * [ ] x.raf="abc" - run regularly?
 
 ## [x] Writing props on elements (like ones in :each) -> nah, just use `:x="this.x=abc"`
 

package/sprae.js

@@ -71,16 +71,16 @@ function v(i2) {
     }
   }
 }
-function e2(i2) {
+function e(i2) {
   this.v = i2;
   this.i = 0;
   this.n = void 0;
   this.t = void 0;
 }
-e2.prototype.h = function() {
+e.prototype.h = function() {
   return true;
 };
-e2.prototype.S = function(i2) {
+e.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 @@ e2.prototype.S = function(i2) {
     this.t = i2;
   }
 };
-e2.prototype.U = function(i2) {
+e.prototype.U = function(i2) {
   var t2 = i2.e, h2 = i2.x;
   if (void 0 !== t2) {
     t2.x = h2;
@@ -101,7 +101,7 @@ e2.prototype.U = function(i2) {
   if (i2 === this.t)
     this.t = h2;
 };
-e2.prototype.subscribe = function(i2) {
+e.prototype.subscribe = function(i2) {
   var t2 = this;
   return b(function() {
     var h2 = t2.value, o2 = 32 & this.f;
@@ -113,16 +113,16 @@ e2.prototype.subscribe = function(i2) {
     }
   });
 };
-e2.prototype.valueOf = function() {
+e.prototype.valueOf = function() {
   return this.value;
 };
-e2.prototype.toString = function() {
+e.prototype.toString = function() {
   return this.value + "";
 };
-e2.prototype.peek = function() {
+e.prototype.peek = function() {
   return this.v;
 };
-Object.defineProperty(e2.prototype, "value", { get: function() {
+Object.defineProperty(e.prototype, "value", { get: function() {
   var i2 = v(this);
   if (void 0 !== i2)
     i2.i = this.i;
@@ -144,7 +144,7 @@ Object.defineProperty(e2.prototype, "value", { get: function() {
   }
 } });
 function u(i2) {
-  return new e2(i2);
+  return new e(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) {
-  e2.call(this, void 0);
+  e.call(this, void 0);
   this.x = i2;
   this.s = void 0;
   this.g = f - 1;
   this.f = 4;
 }
-(l.prototype = new e2()).h = function() {
+(l.prototype = new e()).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);
   }
-  e2.prototype.S.call(this, i2);
+  e.prototype.S.call(this, i2);
 };
 l.prototype.U = function(i2) {
-  e2.prototype.U.call(this, i2);
+  e.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 (e3) {
+                } catch (e2) {
                 }
               s2.value = Object.seal(signalStruct(v2));
             } else if (Array.isArray(v2))
@@ -434,37 +434,57 @@ function isObject(v2) {
   return v2 && v2.constructor === Object;
 }
 
-// node_modules/swapdom/swap-inflate.js
-var swap = (parent, a2, b2, end = null) => {
-  let i2 = 0, cur, next, bi, n2 = b2.length, m = a2.length, { remove, same, insert, replace } = swap;
-  while (i2 < n2 && i2 < m && same(a2[i2], b2[i2]))
-    i2++;
-  while (i2 < n2 && i2 < m && same(b2[n2 - 1], a2[m - 1]))
-    end = b2[--m, --n2];
-  if (i2 == m)
-    while (i2 < n2)
-      insert(end, b2[i2++], parent);
-  else {
-    cur = a2[i2];
-    while (i2 < n2) {
-      bi = b2[i2++], next = cur ? cur.nextSibling : end;
-      if (same(cur, bi))
-        cur = next;
-      else if (i2 < n2 && same(b2[i2], next))
-        replace(cur, bi, parent), cur = next;
-      else
-        insert(cur, bi, parent);
+// src/domdiff.js
+function domdiff_default(parent, a2, b2, before) {
+  const aIdx = /* @__PURE__ */ new Map();
+  const bIdx = /* @__PURE__ */ new Map();
+  let i2;
+  let j;
+  for (i2 = 0; i2 < a2.length; i2++) {
+    aIdx.set(a2[i2], i2);
+  }
+  for (i2 = 0; i2 < b2.length; i2++) {
+    bIdx.set(b2[i2], i2);
+  }
+  for (i2 = j = 0; i2 !== a2.length || j !== b2.length; ) {
+    var aElm = a2[i2], bElm = b2[j];
+    if (aElm === null) {
+      i2++;
+    } else if (b2.length <= j) {
+      parent.removeChild(a2[i2]);
+      i2++;
+    } else if (a2.length <= i2) {
+      parent.insertBefore(bElm, a2[i2] || before);
+      j++;
+    } else if (aElm === bElm) {
+      i2++;
+      j++;
+    } else {
+      var curElmInNew = bIdx.get(aElm);
+      var wantedElmInOld = aIdx.get(bElm);
+      if (curElmInNew === void 0) {
+        parent.removeChild(a2[i2]);
+        i2++;
+      } else if (wantedElmInOld === void 0) {
+        parent.insertBefore(
+          bElm,
+          a2[i2] || before
+        );
+        j++;
+      } else {
+        parent.insertBefore(
+          a2[wantedElmInOld],
+          a2[i2] || before
+        );
+        a2[wantedElmInOld] = null;
+        if (wantedElmInOld > i2 + 1)
+          i2++;
+        j++;
+      }
     }
-    while (!same(cur, end))
-      next = cur.nextSibling, remove(cur, parent), cur = next;
   }
   return b2;
-};
-swap.same = (a2, b2) => a2 == b2;
-swap.replace = (a2, b2, parent) => parent.replaceChild(b2, a2);
-swap.insert = (a2, b2, parent) => parent.insertBefore(b2, a2);
-swap.remove = (a2, parent) => parent.removeChild(a2);
-var swap_inflate_default = swap;
+}
 
 // node_modules/primitive-pool/index.js
 var cache = {};
@@ -562,7 +582,7 @@ primary["each"] = (tpl, expr) => {
         scope[each[0]] = item;
       elScopes.push(scope);
     }
-    swap_inflate_default(holder.parentNode, curEls, newEls, holder);
+    domdiff_default(holder.parentNode, curEls, newEls, holder);
     curEls = newEls;
     for (let i2 = 0; i2 < newEls.length; i2++) {
       sprae(newEls[i2], elScopes[i2]);
@@ -688,25 +708,25 @@ var directives_default = (el, expr, state, name) => {
 };
 var _stop = Symbol("stop");
 var addListener = (el, evt, startFn) => {
-  let evts = evt.split("..").map((e3) => e3.startsWith("on") ? e3.slice(2) : e3), opts = { target: el, hooks: [], fn: startFn };
+  let evts = evt.split("..").map((e2) => e2.startsWith("on") ? e2.slice(2) : e2), opts = { target: el, hooks: [], fn: startFn };
   evts[0] = evts[0].replace(/\.(\w+)?-?([\w]+)?/g, (match, mod, param) => (mods[mod]?.(opts, param), ""));
   let { target, hooks, fn, ...listenerOpts } = opts;
   if (hooks.length) {
     let _fn = fn;
-    fn = (e3) => {
+    fn = (e2) => {
       for (let hook of hooks)
-        if (hook(e3) === false)
+        if (hook(e2) === false)
           return false;
-      return _fn(e3);
+      return _fn(e2);
     };
   }
   if (evts.length == 1)
     target.addEventListener(evts[0], fn, listenerOpts);
   else {
     const nextEvt = (handler, cur = 0) => {
-      let curListener = (e3) => {
+      let curListener = (e2) => {
         target.removeEventListener(evts[cur], curListener);
-        if (typeof (handler = handler.call(target, e3)) !== "function")
+        if (typeof (handler = handler.call(target, e2)) !== "function")
           handler = () => {
           };
         if (++cur < evts.length)
@@ -725,33 +745,43 @@ var removeListener = (el, evt, fn) => {
   el.removeEventListener(evt, fn);
 };
 var mods = {
+  prevent({ hooks }) {
+    hooks.push((e2) => {
+      e2.preventDefault();
+    });
+  },
+  stop({ hooks }) {
+    hooks.push((e2) => {
+      e2.stopPropagation();
+    });
+  },
   throttle(opts, limit) {
     let { fn } = opts;
     limit = Number(limit) || 108;
-    let pause, planned, block = () => {
+    let pause, planned, block = (e2) => {
       pause = true;
       setTimeout(() => {
         pause = false;
         if (planned)
-          return planned = false, block(), fn(e);
-      });
+          return planned = false, block(), fn(e2);
+      }, limit);
     };
-    opts.fn = (e3) => {
+    opts.fn = (e2) => {
       if (pause)
         return planned = true;
-      block();
-      return fn(e3);
+      block(e2);
+      return fn(e2);
     };
   },
   debounce(opts, wait) {
     let { fn } = opts;
     wait = Number(wait) || 108;
     let timeout;
-    opts.fn = (e3) => {
+    opts.fn = (e2) => {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         timeout = null;
-        fn(e3);
+        fn(e2);
       }, wait);
     };
   },
@@ -762,28 +792,18 @@ var mods = {
     opts.target = document;
   },
   outside({ target, hooks }) {
-    hooks.push((e3) => {
-      if (target.contains(e3.target))
+    hooks.push((e2) => {
+      if (target.contains(e2.target))
         return false;
-      if (e3.target.isConnected === false)
+      if (e2.target.isConnected === false)
         return false;
       if (target.offsetWidth < 1 && target.offsetHeight < 1)
         return false;
     });
   },
-  prevent({ hooks }) {
-    hooks.push((e3) => {
-      e3.preventDefault();
-    });
-  },
-  stop({ hooks }) {
-    hooks.push((e3) => {
-      e3.stopPropagation();
-    });
-  },
   self({ target, hooks }) {
-    hooks.push((e3) => {
-      return e3.target === target;
+    hooks.push((e2) => {
+      return e2.target === target;
     });
   },
   once(opts) {
@@ -796,46 +816,46 @@ var mods = {
     opts.capture = true;
   },
   ctrl({ hooks }) {
-    hooks.push((e3) => e3.key === "Control" || e3.key === "Ctrl");
+    hooks.push((e2) => e2.key === "Control" || e2.key === "Ctrl");
   },
   shift({ hooks }) {
-    hooks.push((e3) => e3.key === "Shift");
+    hooks.push((e2) => e2.key === "Shift");
   },
   alt({ hooks }) {
-    hooks.push((e3) => e3.key === "Alt");
+    hooks.push((e2) => e2.key === "Alt");
   },
   meta({ hooks }) {
-    hooks.push((e3) => e3.key === "Meta");
+    hooks.push((e2) => e2.key === "Meta");
   },
   arrow({ hooks }) {
-    hooks.push((e3) => e3.key.startsWith("Arrow"));
+    hooks.push((e2) => e2.key.startsWith("Arrow"));
   },
   enter({ hooks }) {
-    hooks.push((e3) => e3.key === "Enter");
+    hooks.push((e2) => e2.key === "Enter");
   },
   escape({ hooks }) {
-    hooks.push((e3) => e3.key.startsWith("Esc"));
+    hooks.push((e2) => e2.key.startsWith("Esc"));
   },
   tab({ hooks }) {
-    hooks.push((e3) => e3.key === "Tab");
+    hooks.push((e2) => e2.key === "Tab");
   },
   space({ hooks }) {
-    hooks.push((e3) => e3.key === "Space" || e3.key === " ");
+    hooks.push((e2) => e2.key === "Space" || e2.key === " ");
   },
   backspace({ hooks }) {
-    hooks.push((e3) => e3.key === "Backspace");
+    hooks.push((e2) => e2.key === "Backspace");
   },
   delete({ hooks }) {
-    hooks.push((e3) => e3.key === "Delete");
+    hooks.push((e2) => e2.key === "Delete");
   },
   digit({ hooks }) {
-    hooks.push((e3) => /\d/.test(e3.key));
+    hooks.push((e2) => /\d/.test(e2.key));
   },
   letter({ hooks }) {
-    hooks.push((e3) => /[a-zA-Z]/.test(e3.key));
+    hooks.push((e2) => /[a-zA-Z]/.test(e2.key));
   },
   character({ hooks }) {
-    hooks.push((e3) => /^\S$/.test(e3.key));
+    hooks.push((e2) => /^\S$/.test(e2.key));
   }
 };
 var attr = (el, name, v2) => {
@@ -848,19 +868,19 @@ var evaluatorMemo = {};
 function parseExpr(el, expression, dir) {
   let evaluate = evaluatorMemo[expression];
   if (!evaluate) {
-    let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /^(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
+    let rightSideSafeExpression = /^[\n\s]*if.*\(.*\)/.test(expression) || /\b(let|const)\s/.test(expression) ? `(() => { ${expression} })()` : expression;
     try {
       evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { return ${rightSideSafeExpression} };`);
-    } catch (e3) {
-      return exprError(e3, el, expression, dir);
+    } catch (e2) {
+      return exprError(e2, el, expression, dir);
     }
   }
   return (state) => {
     let result;
     try {
       result = evaluate.call(el, state);
-    } catch (e3) {
-      return exprError(e3, el, expression, dir);
+    } catch (e2) {
+      return exprError(e2, el, expression, dir);
     }
     return result;
   };

package/sprae.min.js

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

package/src/directives.js

@@ -1,6 +1,6 @@
 // directives & parsing
 import sprae from './core.js'
-import swap from 'swapdom'
+import swap from './domdiff.js'
 import signalStruct from 'signal-struct'
 import p from 'primitive-pool'
 
@@ -298,24 +298,25 @@ const removeListener = (el, evt, fn) => {
 
 // event modifiers
 const mods = {
+  prevent({hooks}) { hooks.push(e => { e.preventDefault(); })},
+  stop({hooks}) { hooks.push(e => { e.stopPropagation(); })},
   throttle(opts, limit) {
     let {fn} = opts
     limit = Number(limit) || 108
-    let pause, planned, block = () => {
+    let pause, planned, block = (e) => {
       pause = true
       setTimeout(() => {
         pause = false
         // if event happened during blocked time, it schedules call by the end
         if (planned) return (planned = false, block(), fn(e))
-      })
+      }, limit)
     }
     opts.fn = e => {
       if (pause) return (planned = true)
-      block();
+      block(e);
       return fn(e);
     }
   },
-
   debounce(opts, wait) {
     let {fn} = opts
     wait = Number(wait) || 108;
@@ -326,6 +327,7 @@ const mods = {
     }
   },
 
+  // target
   window(opts) { opts.target = window },
   document(opts) { opts.target = document },
   outside({target, hooks}) {
@@ -335,9 +337,9 @@ const mods = {
       if (target.offsetWidth < 1 && target.offsetHeight < 1) return false
     })
   },
-  prevent({hooks}) { hooks.push(e => { e.preventDefault(); })},
-  stop({hooks}) { hooks.push(e => { e.stopPropagation(); })},
   self({target, hooks}) { hooks.push(e => { return e.target === target })},
+
+  // options
   once(opts) { opts.once = true; },
   passive(opts) { opts.passive = true; },
   capture(opts) { opts.capture = true; },
@@ -381,7 +383,7 @@ function parseExpr(el, expression, dir) {
       // Support expressions starting with "if" statements like: "if (...) doSomething()"
       || /^[\n\s]*if.*\(.*\)/.test(expression)
       // Support expressions starting with "let/const" like: "let foo = 'bar'"
-      || /^(let|const)\s/.test(expression)
+      || /\b(let|const)\s/.test(expression)
           ? `(() => { ${expression} })()`
           : expression;
 

package/src/domdiff.js

@@ -0,0 +1,68 @@
+// https://github.com/luwes/js-diff-benchmark/blob/master/libs/list-difference.js
+// this implementation is more persistent in terms of preserving in-between nodes
+
+// a is old list, b is the new
+export default function(parent, a, b, before) {
+  const aIdx = new Map();
+  const bIdx = new Map();
+  let i;
+  let j;
+
+  // Create a mapping from keys to their position in the old list
+  for (i = 0; i < a.length; i++) {
+    aIdx.set(a[i], i);
+  }
+
+  // Create a mapping from keys to their position in the new list
+  for (i = 0; i < b.length; i++) {
+    bIdx.set(b[i], i);
+  }
+
+  for (i = j = 0; i !== a.length || j !== b.length;) {
+    var aElm = a[i], bElm = b[j];
+    if (aElm === null) {
+      // This is a element that has been moved to earlier in the list
+      i++;
+    } else if (b.length <= j) {
+      // No more elements in new, this is a delete
+      parent.removeChild(a[i]);
+      i++;
+    } else if (a.length <= i) {
+      // No more elements in old, this is an addition
+      parent.insertBefore(bElm, a[i] || before);
+      j++;
+    } else if (aElm === bElm) {
+      // No difference, we move on
+      i++; j++;
+    } else {
+      // Look for the current element at this location in the new list
+      // This gives us the idx of where this element should be
+      var curElmInNew = bIdx.get(aElm);
+      // Look for the the wanted elment at this location in the old list
+      // This gives us the idx of where the wanted element is now
+      var wantedElmInOld = aIdx.get(bElm);
+      if (curElmInNew === undefined) {
+        // Current element is not in new list, it has been removed
+        parent.removeChild(a[i]);
+        i++;
+      } else if (wantedElmInOld === undefined) {
+        // New element is not in old list, it has been added
+        parent.insertBefore(
+          bElm,
+          a[i] || before
+        );
+        j++;
+      } else {
+        // Element is in both lists, it has been moved
+        parent.insertBefore(
+          a[wantedElmInOld],
+          a[i] || before
+        );
+        a[wantedElmInOld] = null;
+        if (wantedElmInOld > i + 1) i++;
+        j++;
+      }
+    }
+  }
+  return b;
+};

package/test/index.html

@@ -15,6 +15,8 @@
     "signal-struct" : "../node_modules/signal-struct/signal-struct.js",
     "element-props" : "../node_modules/element-props/element-props.js",
     "swapdom" : "../node_modules/swapdom/swap-inflate.js",
+    "swapdom/swap-deflate" : "../node_modules/swapdom/swap-deflate.js",
+    "swapdom/swap-inflate" : "../node_modules/swapdom/swap-inflate.js",
     "primitive-pool" : "../node_modules/primitive-pool/index.js",
     "preact": "../node_modules/preact/dist/preact.mjs",
     "preact/hooks": "../node_modules/preact/hooks/dist/hooks.mjs",

package/test/test.js

@@ -96,11 +96,22 @@ test('props: multiprop', async () => {
 
 // FIXME: this must work without return
 test.todo('props: calculation', async () => {
-  let el = h`<x :x="let a = 5; return Array.from({length:a}, (_,i)=>i).join(' ')"></x>`
-  sprae(el);
-  is(el.outerHTML, `<x x="01234"></x>`)
+  let el = h`<x :x="let a = 5; return Array.from({length: x}, (_,i)=>i).join('')"></x>`
+  let state = sprae(el, {x:3});
+  is(el.outerHTML, `<x x="012"></x>`)
+  state.x = 4
+  is(el.outerHTML, `<x x="0123"></x>`)
 })
 
+test.todo('props: semicols in expression', async () => {
+  let el = h`<x :x="0; return Array.from({length: x}, (_,i)=>i).join('')"></x>`
+  let state = sprae(el, {x:3});
+  is(el.outerHTML, `<x x="012"></x>`)
+  state.x = 4
+  is(el.outerHTML, `<x x="0123"></x>`)
+})
+
+
 test('data: base', async () => {
   let el = h`<input :data="{a:1, fooBar:2}"/>`
   let params = sprae(el)
@@ -443,6 +454,19 @@ test('each: :id and others must receive value from context', () => {
   is(el.innerHTML,`<x id="1"></x><x id="2"></x><x id="3"></x>`)
 })
 
+test('each: key-based caching is in-sync with direct elements', () => {
+  let el = h`<ul><li :each="i in x" :key="i" :id="i"></li></ul>`
+  let el2 = h`<ul><li :each="i in x" :id="i"></li></ul>`
+  let state = sprae(el, {x:2})
+  let state2 = sprae(el2, {x:2})
+  is(el.outerHTML, el2.outerHTML)
+  el.firstChild.after(el.firstChild.cloneNode(true))
+  el2.firstChild.after(el2.firstChild.cloneNode(true))
+  state.x = 3
+  state2.x = 3
+  is(el.outerHTML, el2.outerHTML)
+})
+
 test('on: base', () => {
   let el = h`<div :on="{click(e){log.push('click')},x}"></div>`
   let log = signal([])
@@ -641,6 +665,24 @@ test('on: debounce', async e => {
   is(state.log, ['x'])
 })
 
+test('on: throttle', async e => {
+  let el = h`<x :onkeydown.throttle-10="e=>log.push(e.key)"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x'])
+  await time(5)
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x'])
+  await time(10)
+  is(state.log, ['x', 'x'])
+  await time(10)
+  is(state.log, ['x', 'x'])
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, ['x', 'x', 'x'])
+})
+
+
 test('with: inline', () => {
   let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})