sprae 2.8.3 → 2.10.0

package/package.json

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

package/readme.md

@@ -176,7 +176,7 @@ Add event listeners.
 * `.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`, `.arrow`, `.alnum`, `.digit`, `.letter` – filter by [`event.key`](https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values).
+* `.ctrl`, `.shift`, `.alt`, `.meta`, `.arrow`, `.enter`, `.escape`, `.tab`, `.space`, `.backspace`, `.delete`, `.digit`, `.letter`, `.character` – 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"`

package/sprae.js

@@ -688,31 +688,35 @@ 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 = {};
-  evts[0] = evts[0].replace(
-    /\.(\w+)?-?([\w]+)?/g,
-    (match, mod, param) => {
-      (mod = mods[mod]) ? ([el, startFn] = mod(el, startFn, opts, param), "") : "";
-      return "";
-    }
-  );
+  let evts = evt.split("..").map((e3) => e3.startsWith("on") ? e3.slice(2) : e3), 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) => {
+      for (let hook of hooks)
+        if (hook(e3) === false)
+          return false;
+      return _fn(e3);
+    };
+  }
   if (evts.length == 1)
-    el.addEventListener(evts[0], startFn, opts);
+    target.addEventListener(evts[0], fn, listenerOpts);
   else {
-    const nextEvt = (fn, cur = 0) => {
+    const nextEvt = (handler, cur = 0) => {
       let curListener = (e3) => {
-        el.removeEventListener(evts[cur], curListener);
-        if (typeof (fn = fn.call(el, e3)) !== "function")
-          fn = () => {
+        target.removeEventListener(evts[cur], curListener);
+        if (typeof (handler = handler.call(target, e3)) !== "function")
+          handler = () => {
           };
         if (++cur < evts.length)
-          nextEvt(fn, cur);
-        else if (!startFn[_stop])
-          nextEvt(startFn);
+          nextEvt(handler, cur);
+        else if (!fn[_stop])
+          nextEvt(fn);
       };
-      el.addEventListener(evts[cur], curListener, opts);
+      target.addEventListener(evts[cur], curListener, listenerOpts);
     };
-    nextEvt(startFn);
+    nextEvt(fn);
   }
 };
 var removeListener = (el, evt, fn) => {
@@ -721,122 +725,119 @@ var removeListener = (el, evt, fn) => {
   el.removeEventListener(evt, fn);
 };
 var mods = {
-  throttle(el, cb, opts, limit) {
+  throttle(opts, limit) {
+    let { fn } = opts;
     limit = Number(limit) || 108;
     let pause, planned, block = () => {
       pause = true;
       setTimeout(() => {
         pause = false;
         if (planned)
-          cb(e), planned = false, block();
+          return planned = false, block(), fn(e);
       });
     };
-    return [el, (e3) => {
+    opts.fn = (e3) => {
       if (pause)
-        return planned = true, _stop;
-      cb(e3);
+        return planned = true;
       block();
-    }];
+      return fn(e3);
+    };
   },
-  debounce(el, cb, opts, wait) {
+  debounce(opts, wait) {
+    let { fn } = opts;
     wait = Number(wait) || 108;
-    let timeout, later = () => {
-      timeout = null;
-      cb(e);
-    };
-    return [el, (e3) => {
+    let timeout;
+    opts.fn = (e3) => {
       clearTimeout(timeout);
-      timeout = setTimeout(later, wait);
-    }];
+      timeout = setTimeout(() => {
+        timeout = null;
+        fn(e3);
+      }, wait);
+    };
   },
-  window(el, cb) {
-    return [window, cb];
+  window(opts) {
+    opts.target = window;
   },
-  document(el, cb) {
-    return [document, cb];
+  document(opts) {
+    opts.target = document;
   },
-  outside(el, cb) {
-    return [el, (e3) => {
-      if (el.contains(e3.target))
-        return _stop;
+  outside({ target, hooks }) {
+    hooks.push((e3) => {
+      if (target.contains(e3.target))
+        return false;
       if (e3.target.isConnected === false)
-        return _stop;
-      if (el.offsetWidth < 1 && el.offsetHeight < 1)
-        return _stop;
-      cb(e3);
-    }];
+        return false;
+      if (target.offsetWidth < 1 && target.offsetHeight < 1)
+        return false;
+    });
   },
-  prevent(el, cb) {
-    return [el, (e3) => {
-      if (cb(e3) !== _stop)
-        e3.preventDefault();
-    }];
+  prevent({ hooks }) {
+    hooks.push((e3) => {
+      e3.preventDefault();
+    });
   },
-  stop(el, cb) {
-    return [el, (e3) => {
-      if (cb(e3) !== _stop)
-        e3.stopPropagation();
-    }];
+  stop({ hooks }) {
+    hooks.push((e3) => {
+      e3.stopPropagation();
+    });
   },
-  self(el, cb) {
-    return [el, (e3) => {
-      e3.target === el && cb(e3);
-    }];
+  self({ target, hooks }) {
+    hooks.push((e3) => {
+      return e3.target === target;
+    });
   },
-  once(el, cb, opts) {
+  once(opts) {
     opts.once = true;
-    return [el, cb];
   },
-  passive(el, cb, opts) {
+  passive(opts) {
     opts.passive = true;
-    return [el, cb];
   },
-  capture(el, cb, opts) {
+  capture(opts) {
     opts.capture = true;
-    return [el, cb];
+  },
+  ctrl({ hooks }) {
+    hooks.push((e3) => e3.key === "Control" || e3.key === "Ctrl");
+  },
+  shift({ hooks }) {
+    hooks.push((e3) => e3.key === "Shift");
+  },
+  alt({ hooks }) {
+    hooks.push((e3) => e3.key === "Alt");
+  },
+  meta({ hooks }) {
+    hooks.push((e3) => e3.key === "Meta");
+  },
+  arrow({ hooks }) {
+    hooks.push((e3) => e3.key.startsWith("Arrow"));
+  },
+  enter({ hooks }) {
+    hooks.push((e3) => e3.key === "Enter");
+  },
+  escape({ hooks }) {
+    hooks.push((e3) => e3.key.startsWith("Esc"));
+  },
+  tab({ hooks }) {
+    hooks.push((e3) => e3.key === "Tab");
+  },
+  space({ hooks }) {
+    hooks.push((e3) => e3.key === "Space" || e3.key === " ");
+  },
+  backspace({ hooks }) {
+    hooks.push((e3) => e3.key === "Backspace");
+  },
+  delete({ hooks }) {
+    hooks.push((e3) => e3.key === "Delete");
+  },
+  digit({ hooks }) {
+    hooks.push((e3) => /\d/.test(e3.key));
+  },
+  letter({ hooks }) {
+    hooks.push((e3) => /[a-zA-Z]/.test(e3.key));
+  },
+  character({ hooks }) {
+    hooks.push((e3) => /^\S$/.test(e3.key));
   }
 };
-var 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",
-  esc: "Escape",
-  escape: "Escape",
-  tab: "Tab",
-  backspace: "Backspace",
-  delete: "Delete",
-  space: / /,
-  plus: /\+/,
-  minus: /\-/,
-  star: /\*/,
-  slash: /\//,
-  period: /\./,
-  equal: /\=/,
-  underscore: /\_/,
-  alnum: /\w/,
-  letter: /[a-zA-Z]/,
-  digit: /\d/
-};
-keys.arrow = keys.down + keys.up + keys.left + keys.right;
-for (let keyAttr in keys) {
-  let keyName = keys[keyAttr];
-  mods[keyAttr] = (el, cb, opts, extraKey) => [el, (e3) => {
-    if (!e3.key || (e3.key.length > 2 ? !keyName.includes?.(e3.key) : !keyName.test?.(e3.key)))
-      return _stop;
-    cb(e3);
-  }];
-}
 var attr = (el, name, v2) => {
   if (v2 == null || v2 === false)
     el.removeAttribute(name);

package/sprae.min.js

@@ -1 +1 @@
-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={},T={};C.if=(t,e)=>{let r=document.createTextNode(""),i=[F(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(F(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[D]||o).replaceWith(o=n[e]||r),q(o,t))}},C.with=(t,e,r)=>{q(t,x(F(t,e,"with")(r),r))};var D=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 H(new Error,t,e);const i=t[D]=document.createTextNode("");t.replaceWith(i);const n=F(t,r[2],":each"),o=t.getAttribute(":key"),s=o?F(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):H(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++)q(c[t],h[t])}},T.ref=(t,e,r)=>{r[e]=t},T.id=(t,e)=>{let r=F(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},T.class=(t,e)=>{let r=F(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(" ")}},T.style=(t,e)=>{let r=F(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]}},T.text=(t,e)=>{let r=F(t,e,":text");return e=>{let i=r(e);t.textContent=null==i?"":i}},T.data=(t,e)=>{let r=F(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},T.aria=(t,e)=>{let r=F(t,e,":aria");return e=>(e=>{for(let r in e)R(t,"aria-"+I(r),null==e[r]?null:e[r]+"")})(r(e))},T[""]=(t,e)=>{let r=F(t,e,":");if(r)return e=>{let i=r(e);for(let e in i)R(t,I(e),i[e])}},T.value=(t,e)=>{let r,i,n=F(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":"",R(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))},T.on=(t,e)=>{let r=F(t,e,":on");return e=>{let i=r(e);for(let e in i)B(t,e,i[e]);return()=>{for(let e in i)L(t,e,i[e])}}};var U=(t,e,r,i)=>{let n=i.startsWith("on")&&i.slice(2),o=F(t,e,":"+i);if(o)return n?e=>{let r=o(e)||(()=>{});return B(t,n,r),()=>L(t,n,r)}:e=>R(t,i,o(e))},$=Symbol("stop"),B=(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)}},L=(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?$:void e(r)],prevent:(t,e)=>[t,t=>{e(t)!==$&&t.preventDefault()}],stop:(t,e)=>[t,t=>{e(t)!==$&&t.stopPropagation()}],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])},_={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",esc:"Escape",escape:"Escape",tab:"Tab",backspace:"Backspace",delete:"Delete",space:/ /,plus:/\+/,minus:/\-/,star:/\*/,slash:/\//,period:/\./,equal:/\=/,underscore:/\_/,alnum:/\w/,letter:/[a-zA-Z]/,digit:/\d/};_.arrow=_.down+_.up+_.left+_.right;for(let t in _){let e=_[t];M[t]=(t,r,i,n)=>[t,t=>{if(!t.key||(t.key.length>2?!e.includes?.(t.key):!e.test?.(t.key)))return $;r(t)}]}var R=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},z={};function F(t,e,r){let i=z[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/^(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=z[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(i){return H(i,t,e,r)}}return n=>{let o;try{o=i.call(t,n)}catch(i){return H(i,t,e,r)}return o}}function H(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 q(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),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,l=o.name.slice(1).split(":");for(let r of l){let o=T[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 X=q;export{X as default};
+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};

package/src/directives.js

@@ -266,29 +266,29 @@ const _stop = Symbol('stop')
 const addListener = (el, evt, startFn) => {
   // ona..onb
   let evts = evt.split('..').map(e => e.startsWith('on') ? e.slice(2) : e),
-      opts = {}
+      opts = {target: el, hooks: [], fn: startFn}
 
   // onevt.debounce-108
-  evts[0] = evts[0].replace(
-    /\.(\w+)?-?([\w]+)?/g,
-    (match, mod, param) => {
-      (mod=mods[mod]) ? ([el, startFn] = mod(el, startFn, opts, param), '') : ''
-      return ''
-    }
-  );
+  evts[0] = evts[0].replace(/\.(\w+)?-?([\w]+)?/g, (match, mod, param) => (mods[mod]?.(opts, param), ''));
+  // we collect condition hooks into a sigle callback to check before throttles
+  let {target, hooks, fn, ...listenerOpts} = opts
+  if (hooks.length) {
+    let _fn = fn
+    fn = (e) => { for (let hook of hooks) if (hook(e) === false) return false; return _fn(e) }
+  }
 
-  if (evts.length == 1) el.addEventListener(evts[0], startFn, opts);
+  if (evts.length == 1) target.addEventListener(evts[0], fn, listenerOpts);
   else {
-    const nextEvt = (fn, cur=0) => {
+    const nextEvt = (handler, cur=0) => {
       let curListener = e => {
-        el.removeEventListener(evts[cur], curListener)
-        if (typeof (fn = fn.call(el,e)) !== 'function') fn = ()=>{}
-        if (++cur < evts.length) nextEvt(fn, cur);
-        else if (!startFn[_stop]) nextEvt(startFn); // update only if chain isn't stopped
+        target.removeEventListener(evts[cur], curListener)
+        if (typeof (handler = handler.call(target,e)) !== 'function') handler = ()=>{}
+        if (++cur < evts.length) nextEvt(handler, cur);
+        else if (!fn[_stop]) nextEvt(fn); // update only if chain isn't stopped
       }
-      el.addEventListener(evts[cur], curListener, opts)
+      target.addEventListener(evts[cur], curListener, listenerOpts)
     }
-    nextEvt(startFn)
+    nextEvt(fn)
   }
 }
 const removeListener = (el, evt, fn) => {
@@ -298,73 +298,66 @@ const removeListener = (el, evt, fn) => {
 
 // event modifiers
 const mods = {
-  throttle(el, cb, opts, limit) {
+  throttle(opts, limit) {
+    let {fn} = opts
     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();
+        if (planned) return (planned = false, block(), fn(e))
       })
     }
-    return [el, e => {
-      if (pause) return (planned = true, _stop)
-      cb(e); block();
-    }]
+    opts.fn = e => {
+      if (pause) return (planned = true)
+      block();
+      return fn(e);
+    }
   },
 
-  debounce(el, cb, opts, wait) {
+  debounce(opts, wait) {
+    let {fn} = opts
     wait = Number(wait) || 108;
-    let timeout, later = () => { timeout = null; cb(e) }
-    return [el, (e) => {
+    let timeout
+    opts.fn = (e) => {
       clearTimeout(timeout)
-      timeout = setTimeout(later, wait)
-    }]
+      timeout = setTimeout(() => {timeout = null; fn(e)}, 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 _stop
-      if (e.target.isConnected === false) return _stop
-      if (el.offsetWidth < 1 && el.offsetHeight < 1) return _stop
-      cb(e)
-    }]
+  window(opts) { opts.target = window },
+  document(opts) { opts.target = document },
+  outside({target, hooks}) {
+    hooks.push((e) => {
+      if (target.contains(e.target)) return false
+      if (e.target.isConnected === false) return false
+      if (target.offsetWidth < 1 && target.offsetHeight < 1) return false
+    })
   },
-  prevent(el, cb) { return [el, e => { if (cb(e) !== _stop) e.preventDefault(); } ]},
-  stop(el, cb) { return [el, e => { if (cb(e) !== _stop) e.stopPropagation(); } ]},
-  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] },
+  prevent({hooks}) { hooks.push(e => { e.preventDefault(); })},
+  stop({hooks}) { hooks.push(e => { e.stopPropagation(); })},
+  self({target, hooks}) { hooks.push(e => { return e.target === target })},
+  once(opts) { opts.once = true; },
+  passive(opts) { opts.passive = true; },
+  capture(opts) { opts.capture = true; },
+
+  // keyboard
+  ctrl({hooks}) { hooks.push(e => e.key === 'Control' || e.key === 'Ctrl')},
+  shift({hooks}) { hooks.push(e => e.key === 'Shift')},
+  alt({hooks}) { hooks.push(e => e.key === 'Alt')},
+  meta({hooks}) { hooks.push(e => e.key === 'Meta')},
+  arrow({hooks}) { hooks.push(e => e.key.startsWith('Arrow'))},
+  enter({hooks}) { hooks.push(e => e.key === 'Enter')},
+  escape({hooks}) { hooks.push(e => e.key.startsWith('Esc'))},
+  tab({hooks}) { hooks.push(e => e.key === 'Tab')},
+  space({hooks}) { hooks.push(e => e.key === 'Space' || e.key === ' ')},
+  backspace({hooks}) { hooks.push(e => e.key === 'Backspace') },
+  delete({hooks}) { hooks.push(e => e.key === 'Delete') },
+  digit({hooks}) { hooks.push(e => /\d/.test(e.key)) },
+  letter({hooks}) { hooks.push(e => /[a-zA-Z]/.test(e.key)) },
+  character({hooks}) { hooks.push(e => /^\S$/.test(e.key) ) },
 };
-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',
-  esc:'Escape',escape:'Escape',tab:'Tab',
-  backspace:'Backspace', delete:'Delete',
-  space:/ /,
-  plus:/\+/,minus:/\-/,star:/\*/,slash:/\//,period:/\./,equal:/\=/,underscore:/\_/,
-  alnum: /\w/,
-  letter: /[a-zA-Z]/,
-  digit: /\d/
-}
-keys.arrow = keys.down + keys.up + keys.left + keys.right
-for (let keyAttr in keys) {
-  let keyName = keys[keyAttr]
-  mods[keyAttr] = (el, cb, opts, extraKey) => [el, e => {
-    // _stop indicates skip subsequent modifiers
-    if (!e.key || (e.key.length > 2 ? !keyName.includes?.(e.key) : !keyName.test?.(e.key))) return _stop
-    cb(e)
-  }]
-}
 
 // set attr
 const attr = (el, name, v) => {

package/test/test.js

@@ -632,6 +632,15 @@ test('on: keys with prevent', e => {
   is(state.log,['x'])
 })
 
+test('on: debounce', async e => {
+  let el = h`<x :onkeydown.debounce-1="e=>log.push(e.key)"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
+  is(state.log, [])
+  await time(2)
+  is(state.log, ['x'])
+})
+
 test('with: inline', () => {
   let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})