sprae 2.12.4 → 2.14.0

package/package.json

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

package/readme.md

@@ -177,6 +177,7 @@ Add event listeners.
 * `.prevent`, `.stop` – prevent default or stop propagation.
 * `.window`, `.document`, `.outside`, `.self` – specify event target.
 * `.throttle-<ms>`, `.debounce-<ms>` – defer function call with one of the methods.
+* `.toggle` – run function and its result in turn.
 * `.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).
 * `.ctrl-<key>, .alt-<key>, .meta-<key>, .shift-<key>` – key combinations, eg. `.ctrl-alt-delete` or `.meta-x`.
 * `.*` – any other modifier has no effect, but allows binding multiple handlers to same event (like jQuery event classes).

package/sprae.js

@@ -621,7 +621,7 @@ secondary["class"] = (el, expr) => {
   return (state) => {
     let v2 = evaluate(state);
     let className = typeof v2 === "string" ? v2 : (Array.isArray(v2) ? v2 : Object.entries(v2).map(([k, v3]) => v3 ? k : "")).filter(Boolean).join(" ");
-    el.className = (initClassName ? initClassName + " " : "") + className;
+    el.className = [initClassName, className].filter(Boolean).join(" ");
   };
 };
 secondary["style"] = (el, expr) => {
@@ -635,7 +635,6 @@ secondary["style"] = (el, expr) => {
       el.setAttribute("style", initStyle + v2);
     else {
       el.setAttribute("style", initStyle);
-      console.log(v2);
       for (let k in v2)
         el.style.setProperty(k, v2[k]);
     }
@@ -711,6 +710,8 @@ var directives_default = (el, expr, state, name) => {
   return (state2) => attr(el, name, evaluate(state2));
 };
 var on = (target, evt, origFn) => {
+  if (!origFn)
+    return;
   let ctxs = evt.split("..").map((e2) => {
     let ctx = { evt: "", target, test: () => true };
     ctx.evt = (e2.startsWith("on") ? e2.slice(2) : e2).replace(
@@ -720,24 +721,24 @@ var on = (target, evt, origFn) => {
     return ctx;
   });
   if (ctxs.length == 1)
-    return addListener(origFn, ctxs[0]);
-  let off;
-  const nextEvt = (fn, cur = 0) => {
+    return addListenerWithMods(origFn, ctxs[0]);
+  const onFn = (fn, cur = 0) => {
+    let off;
     let curListener = (e2) => {
-      off();
-      if (typeof (fn = fn.call(target, e2)) !== "function")
-        fn = () => {
+      if (cur)
+        off();
+      let nextFn = fn.call(target, e2);
+      if (typeof nextFn !== "function")
+        nextFn = () => {
         };
-      if (++cur < ctxs.length)
-        nextEvt(fn, cur);
-      else
-        nextEvt(origFn);
+      if (cur + 1 < ctxs.length)
+        onFn(nextFn, !cur ? 1 : cur + 1);
     };
-    return off = addListener(curListener, ctxs[cur]);
+    return off = addListenerWithMods(curListener, ctxs[cur]);
   };
-  nextEvt(origFn);
-  return () => off();
-  function addListener(fn, { evt: evt2, target: target2, test, defer, stop, prevent, ...opts }) {
+  let rootOff = onFn(origFn);
+  return () => rootOff();
+  function addListenerWithMods(fn, { evt: evt2, target: target2, test, defer, stop, prevent, ...opts }) {
     if (defer)
       fn = defer(fn);
     let cb = (e2) => test(e2) && (stop && e2.stopPropagation(), prevent && e2.preventDefault(), fn.call(target2, e2));
@@ -768,6 +769,9 @@ var mods = {
   document(ctx) {
     ctx.target = document;
   },
+  toggle(ctx) {
+    ctx.defer = (fn, out) => (e2) => out ? (out.call?.(ctx.target, e2), out = null) : out = fn();
+  },
   throttle(ctx, limit) {
     ctx.defer = (fn) => throttle(fn, limit ? Number(limit) || 0 : 108);
   },

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!==i;){var r=i;for(i=void 0,o++;void 0!==r;){var s=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=s}}if(o=0,n--,e)throw t}}var r=void 0,i=void 0,n=0,o=0,s=0;function l(t){if(void 0!==r){var e=t.n;if(void 0===e||e.t!==r)return r.s=e={i:0,S:t,p:void 0,n:r.s,t:r,e:void 0,x:void 0,r:e},t.n=e,32&r.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=r.s,r.s.p=e,r.s=e),e}}function a(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 u(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 h(t){a.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function v(t){var i=t.u;if(t.u=void 0,"function"==typeof i){n++;var o=r;r=void 0;try{i()}catch(e){throw t.f&=-2,t.f|=8,p(t),e}finally{r=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 y(t){if(r!==this)throw new Error("Out-of-order effect");c(this),r=t,this.f&=-2,8&this.f&&p(this),e()}function d(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 d(t);return e.c(),e.d.bind(e)}a.prototype.h=function(){return!0},a.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},a.prototype.U=function(t){var e=t.e,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)},a.prototype.subscribe=function(t){var e=this;return b((function(){var r=e.value,i=32&this.f;this.f&=-33;try{t(r)}finally{this.f|=i}}))},a.prototype.valueOf=function(){return this.value},a.prototype.toString=function(){return this.value+""},a.prototype.peek=function(){return this.v},Object.defineProperty(a.prototype,"value",{get:function(){var t=l(this);return void 0!==t&&(t.i=this.i),this.v},set:function(r){if(r!==this.v){o>100&&t(),this.v=r,this.i++,s++,n++;try{for(var i=this.t;void 0!==i;i=i.x)i.t.N()}finally{e()}}}}),(h.prototype=new a).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!f(this))return this.f&=-2,!0;var t=r;try{u(this),r=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 r=t,c(this),this.f&=-2,!0},h.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}a.prototype.S.call(this,t)},h.prototype.U=function(t){if(a.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},h.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},h.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(h.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}}),d.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},d.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,v(this),u(this),n++;var e=r;return r=this,y.bind(this,e)},d.prototype.N=function(){2&this.f||(this.f|=2,this.o=i,i=this)},d.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,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},w=t=>t&&t[k],k=Symbol("signal-struct");function S(t,e){if(w(t)&&!e)return t;if(A(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 h(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),f=o[t]=(r=s)&&r.peek?s:new a(l?void 0:A(s)?Object.seal(S(s)):Array.isArray(s)?S(s):s);l&&m(s,(t=>f.value=t)),Object.defineProperty(n,t,{get:()=>f.value,set(t){if(A(t)){if(A(f.value)&&Object.keys(f.value).join(" ")===Object.keys(t).join(" "))try{return void Object.assign(f.value,t)}catch(t){}f.value=Object.seal(S(t))}else Array.isArray(t)?f.value=S(t):f.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,k,{configurable:!1,enumerable:!1,value:!0}),n}var r,i;if(Array.isArray(t)&&!w(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=w;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 r=document.createTextNode(""),i=[_(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(_(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[$]||o).replaceWith(o=n[e]||r),F(o,t))}},E.with=(t,e,r)=>{F(t,S(_(t,e,"with")(r),r))};var $=Symbol(":each");E.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 L(new Error,t,e);const i=t[$]=document.createTextNode("");t.replaceWith(i);const n=_(t,r[2],":each"),o=t.getAttribute(":key"),s=o?_(null,o):null;t.removeAttribute(":key");const l=new WeakMap,a=new WeakMap;let f=[];return o=>{let u=n(o);u?"number"==typeof u?u=Array.from({length:u},((t,e)=>[e,e+1])):Array.isArray(u)?u=u.map(((t,e)=>[e+1,t])):"object"==typeof u?u=Object.entries(u):L(Error("Bad list value"),t,e,":each"):u=[];let c=[],h=[];for(let[e,i]of u){let n,f,u=s?.({[r[0]]:i,[r[1]]:e});("string"==typeof(v=u)||"boolean"==typeof v||"number"==typeof v)&&(u=N(u)),null==u?n=t.cloneNode(!0):(n=a.get(u))||a.set(u,n=t.cloneNode(!0)),c.push(n),null!=u&&(f=l.get(u))?f[r[0]]=i:(f=S({[r[0]]:i,[r[1]]:e},o),null!=u&&l.set(u,f)),h.push(f)}var v;!function(t,e,r,i){const n=new Map,o=new Map;let s,l;for(s=0;s<e.length;s++)n.set(e[s],s);for(s=0;s<r.length;s++)o.set(r[s],s);for(s=l=0;s!==e.length||l!==r.length;){var a=e[s],f=r[l];if(null===a)s++;else if(r.length<=l)t.removeChild(e[s]),s++;else if(e.length<=s)t.insertBefore(f,e[s]||i),l++;else if(a===f)s++,l++;else{var u=o.get(a),c=n.get(f);void 0===u?(t.removeChild(e[s]),s++):void 0===c?(t.insertBefore(f,e[s]||i),l++):(t.insertBefore(e[c],e[s]||i),e[c]=null,c>s+1&&s++,l++)}}}(i.parentNode,f,c,i),f=c;for(let t=0;t<c.length;t++)F(c[t],h[t])}},W.ref=(t,e,r)=>{r[e]=t},W.id=(t,e)=>{let r=_(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},W.class=(t,e)=>{let r=_(t,e,":class"),i=t.className;return e=>{let n=r(e),o="string"==typeof n?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ");t.className=(i?i+" ":"")+o}},W.style=(t,e)=>{let r=_(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{t.setAttribute("style",i),console.log(n);for(let e in n)t.style.setProperty(e,n[e])}}},W.text=(t,e)=>{let r=_(t,e,":text");return e=>{let i=r(e);t.textContent=null==i?"":i}},W.data=(t,e)=>{let r=_(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},W.aria=(t,e)=>{let r=_(t,e,":aria");return e=>(e=>{for(let r in e)U(t,"aria-"+R(r),null==e[r]?null:e[r]+"")})(r(e))},W[""]=(t,e)=>{let r=_(t,e,":");if(r)return e=>{let i=r(e);for(let e in i)U(t,R(e),i[e])}},W.value=(t,e)=>{let r,i,n=_(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":"",U(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))},W.on=(t,e)=>{let r=_(t,e,":on");return e=>{let i=r(e),n=[];for(let e in i)n.push(P(t,e,i[e]));return()=>{for(let t of n)t()}}};var C=(t,e,r,i)=>{let n=i.startsWith("on")&&i.slice(2),o=_(t,e,":"+i);if(o)return n?e=>{let r=o(e)||(()=>{});return P(t,n,r)}:e=>U(t,i,o(e))},P=(t,e,r)=>{let i,n=e.split("..").map((e=>{let r={evt:"",target:t,test:()=>!0};return r.evt=(e.startsWith("on")?e.slice(2):e).replace(/\.(\w+)?-?([-\w]+)?/g,((t,e,i="")=>(r.test=T[e]?.(r,...i.split("-"))||r.test,""))),r}));if(1==n.length)return s(r,n[0]);const o=(e,l=0)=>i=s((s=>{i(),"function"!=typeof(e=e.call(t,s))&&(e=()=>{}),++l<n.length?o(e,l):o(r)}),n[l]);return o(r),()=>i();function s(t,{evt:e,target:r,test:i,defer:n,stop:o,prevent:s,...l}){n&&(t=n(t));let a=e=>i(e)&&(o&&e.stopPropagation(),s&&e.preventDefault(),t.call(r,e));return r.addEventListener(e,a,l),()=>r.removeEventListener(e,a,l)}},T={prevent(t){t.prevent=!0},stop(t){t.stop=!0},once(t){t.once=!0},passive(t){t.passive=!0},capture(t){t.capture=!0},window(t){t.target=window},document(t){t.target=document},throttle(t,e){t.defer=t=>D(t,e?Number(e)||0:108)},debounce(t,e){t.defer=t=>M(t,e?Number(e)||0:108)},outside:t=>e=>{let r=t.target;return!(r.contains(e.target)||!1===e.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:t=>e=>e.target===t.target,ctrl:(t,...e)=>t=>B.ctrl(t)&&e.every((e=>B[e]?B[e](t):t.key===e)),shift:(t,...e)=>t=>B.shift(t)&&e.every((e=>B[e]?B[e](t):t.key===e)),alt:(t,...e)=>t=>B.alt(t)&&e.every((e=>B[e]?B[e](t):t.key===e)),meta:(t,...e)=>t=>B.meta(t)&&e.every((e=>B[e]?B[e](t):t.key===e)),arrow:t=>B.arrow,enter:t=>B.enter,escape:t=>B.escape,tab:t=>B.tab,space:t=>B.space,backspace:t=>B.backspace,delete:t=>B.delete,digit:t=>B.digit,letter:t=>B.letter,character:t=>B.character},B={ctrl:t=>t.ctrlKey||"Control"===t.key||"Ctrl"===t.key,shift:t=>t.shiftKey||"Shift"===t.key,alt:t=>t.altKey||"Alt"===t.key,meta:t=>t.metaKey||"Meta"===t.key||"Command"===t.key,arrow:t=>t.key.startsWith("Arrow"),enter:t=>"Enter"===t.key,escape:t=>t.key.startsWith("Esc"),tab:t=>"Tab"===t.key,space:t=>" "===t.key||"Space"===t.key||" "===t.key,backspace:t=>"Backspace"===t.key,delete:t=>"Delete"===t.key,digit:t=>/^\d$/.test(t.key),letter:t=>/^[a-zA-Z]$/.test(t.key),character:t=>/^\S$/.test(t.key)},D=(t,e)=>{let r,i,n=o=>{r=!0,setTimeout((()=>{if(r=!1,i)return i=!1,n(o),t(o)}),e)};return e=>r?i=!0:(n(e),t(e))},M=(t,e)=>{let r;return i=>{clearTimeout(r),r=setTimeout((()=>{r=null,t(i)}),e)}},U=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},K={};function _(t,e,r){let i=K[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/\b(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=K[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(i){return L(i,t,e,r)}}return n=>{let o;try{o=i.call(t,n)}catch(i){return L(i,t,e,r)}return o}}function L(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 R(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var z=new WeakMap;function F(t,r){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{e()}}((()=>Object.assign(i,r))),i}const i=S(r||{}),o=[],s=(t,e=t.parentNode)=>{for(let r in E){let n=":"+r;if(t.hasAttribute?.(n)){let s=t.getAttribute(n);if(t.removeAttribute(n),o.push(E[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=W[r]||C;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;b((()=>{"function"==typeof e&&e(),e=t(i)}))}return Object.seal(i),z.set(t,i),i}var I=F;export{I as default};
+function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==i;){var r=i;for(i=void 0,o++;void 0!==r;){var s=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=s}}if(o=0,n--,e)throw t}}var r=void 0,i=void 0,n=0,o=0,s=0;function l(t){if(void 0!==r){var e=t.n;if(void 0===e||e.t!==r)return r.s=e={i:0,S:t,p:void 0,n:r.s,t:r,e:void 0,x:void 0,r:e},t.n=e,32&r.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=r.s,r.s.p=e,r.s=e),e}}function a(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 u(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 h(t){a.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function v(t){var i=t.u;if(t.u=void 0,"function"==typeof i){n++;var o=r;r=void 0;try{i()}catch(e){throw t.f&=-2,t.f|=8,p(t),e}finally{r=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 y(t){if(r!==this)throw new Error("Out-of-order effect");c(this),r=t,this.f&=-2,8&this.f&&p(this),e()}function d(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 d(t);return e.c(),e.d.bind(e)}a.prototype.h=function(){return!0},a.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},a.prototype.U=function(t){var e=t.e,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)},a.prototype.subscribe=function(t){var e=this;return b((function(){var r=e.value,i=32&this.f;this.f&=-33;try{t(r)}finally{this.f|=i}}))},a.prototype.valueOf=function(){return this.value},a.prototype.toString=function(){return this.value+""},a.prototype.peek=function(){return this.v},Object.defineProperty(a.prototype,"value",{get:function(){var t=l(this);return void 0!==t&&(t.i=this.i),this.v},set:function(r){if(r!==this.v){o>100&&t(),this.v=r,this.i++,s++,n++;try{for(var i=this.t;void 0!==i;i=i.x)i.t.N()}finally{e()}}}}),(h.prototype=new a).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===s)return!0;if(this.g=s,this.f|=1,this.i>0&&!f(this))return this.f&=-2,!0;var t=r;try{u(this),r=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 r=t,c(this),this.f&=-2,!0},h.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}a.prototype.S.call(this,t)},h.prototype.U=function(t){if(a.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},h.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},h.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(h.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}}),d.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},d.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,v(this),u(this),n++;var e=r;return r=this,y.bind(this,e)},d.prototype.N=function(){2&this.f||(this.f|=2,this.o=i,i=this)},d.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,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},w=t=>t&&t[k],k=Symbol("signal-struct");function S(t,e){if(w(t)&&!e)return t;if(A(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 h(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),f=o[t]=(r=s)&&r.peek?s:new a(l?void 0:A(s)?Object.seal(S(s)):Array.isArray(s)?S(s):s);l&&m(s,(t=>f.value=t)),Object.defineProperty(n,t,{get:()=>f.value,set(t){if(A(t)){if(A(f.value)&&Object.keys(f.value).join(" ")===Object.keys(t).join(" "))try{return void Object.assign(f.value,t)}catch(t){}f.value=Object.seal(S(t))}else Array.isArray(t)?f.value=S(t):f.value=t},enumerable:!0,configurable:!1})}}return Object.defineProperty(n,k,{configurable:!1,enumerable:!1,value:!0}),n}var r,i;if(Array.isArray(t)&&!w(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=w;var x={},j={},O={},N=t=>null===t?j:void 0===t?O:"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 r=document.createTextNode(""),i=[_(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(_(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[$]||o).replaceWith(o=n[e]||r),F(o,t))}},E.with=(t,e,r)=>{F(t,S(_(t,e,"with")(r),r))};var $=Symbol(":each");E.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 L(new Error,t,e);const i=t[$]=document.createTextNode("");t.replaceWith(i);const n=_(t,r[2],":each"),o=t.getAttribute(":key"),s=o?_(null,o):null;t.removeAttribute(":key");const l=new WeakMap,a=new WeakMap;let f=[];return o=>{let u=n(o);u?"number"==typeof u?u=Array.from({length:u},((t,e)=>[e,e+1])):Array.isArray(u)?u=u.map(((t,e)=>[e+1,t])):"object"==typeof u?u=Object.entries(u):L(Error("Bad list value"),t,e,":each"):u=[];let c=[],h=[];for(let[e,i]of u){let n,f,u=s?.({[r[0]]:i,[r[1]]:e});("string"==typeof(v=u)||"boolean"==typeof v||"number"==typeof v)&&(u=N(u)),null==u?n=t.cloneNode(!0):(n=a.get(u))||a.set(u,n=t.cloneNode(!0)),c.push(n),null!=u&&(f=l.get(u))?f[r[0]]=i:(f=S({[r[0]]:i,[r[1]]:e},o),null!=u&&l.set(u,f)),h.push(f)}var v;!function(t,e,r,i){const n=new Map,o=new Map;let s,l;for(s=0;s<e.length;s++)n.set(e[s],s);for(s=0;s<r.length;s++)o.set(r[s],s);for(s=l=0;s!==e.length||l!==r.length;){var a=e[s],f=r[l];if(null===a)s++;else if(r.length<=l)t.removeChild(e[s]),s++;else if(e.length<=s)t.insertBefore(f,e[s]||i),l++;else if(a===f)s++,l++;else{var u=o.get(a),c=n.get(f);void 0===u?(t.removeChild(e[s]),s++):void 0===c?(t.insertBefore(f,e[s]||i),l++):(t.insertBefore(e[c],e[s]||i),e[c]=null,c>s+1&&s++,l++)}}}(i.parentNode,f,c,i),f=c;for(let t=0;t<c.length;t++)F(c[t],h[t])}},W.ref=(t,e,r)=>{r[e]=t},W.id=(t,e)=>{let r=_(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},W.class=(t,e)=>{let r=_(t,e,":class"),i=t.className;return e=>{let n=r(e),o="string"==typeof n?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).filter(Boolean).join(" ");t.className=[i,o].filter(Boolean).join(" ")}},W.style=(t,e)=>{let r=_(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{t.setAttribute("style",i);for(let e in n)t.style.setProperty(e,n[e])}}},W.text=(t,e)=>{let r=_(t,e,":text");return e=>{let i=r(e);t.textContent=null==i?"":i}},W.data=(t,e)=>{let r=_(t,e,":data");return e=>{let i=r(e);for(let e in i)t.dataset[e]=i[e]}},W.aria=(t,e)=>{let r=_(t,e,":aria");return e=>(e=>{for(let r in e)U(t,"aria-"+R(r),null==e[r]?null:e[r]+"")})(r(e))},W[""]=(t,e)=>{let r=_(t,e,":");if(r)return e=>{let i=r(e);for(let e in i)U(t,R(e),i[e])}},W.value=(t,e)=>{let r,i,n=_(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":"",U(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))},W.on=(t,e)=>{let r=_(t,e,":on");return e=>{let i=r(e),n=[];for(let e in i)n.push(B(t,e,i[e]));return()=>{for(let t of n)t()}}};var C=(t,e,r,i)=>{let n=i.startsWith("on")&&i.slice(2),o=_(t,e,":"+i);if(o)return n?e=>{let r=o(e)||(()=>{});return B(t,n,r)}:e=>U(t,i,o(e))},B=(t,e,r)=>{if(!r)return;let i=e.split("..").map((e=>{let r={evt:"",target:t,test:()=>!0};return r.evt=(e.startsWith("on")?e.slice(2):e).replace(/\.(\w+)?-?([-\w]+)?/g,((t,e,i="")=>(r.test=P[e]?.(r,...i.split("-"))||r.test,""))),r}));if(1==i.length)return s(r,i[0]);const n=(e,r=0)=>{let o;return o=s((s=>{r&&o();let l=e.call(t,s);"function"!=typeof l&&(l=()=>{}),r+1<i.length&&n(l,r?r+1:1)}),i[r])};let o=n(r);return()=>o();function s(t,{evt:e,target:r,test:i,defer:n,stop:o,prevent:s,...l}){n&&(t=n(t));let a=e=>i(e)&&(o&&e.stopPropagation(),s&&e.preventDefault(),t.call(r,e));return r.addEventListener(e,a,l),()=>r.removeEventListener(e,a,l)}},P={prevent(t){t.prevent=!0},stop(t){t.stop=!0},once(t){t.once=!0},passive(t){t.passive=!0},capture(t){t.capture=!0},window(t){t.target=window},document(t){t.target=document},toggle(t){t.defer=(e,r)=>i=>r?(r.call?.(t.target,i),r=null):r=e()},throttle(t,e){t.defer=t=>D(t,e?Number(e)||0:108)},debounce(t,e){t.defer=t=>M(t,e?Number(e)||0:108)},outside:t=>e=>{let r=t.target;return!(r.contains(e.target)||!1===e.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:t=>e=>e.target===t.target,ctrl:(t,...e)=>t=>T.ctrl(t)&&e.every((e=>T[e]?T[e](t):t.key===e)),shift:(t,...e)=>t=>T.shift(t)&&e.every((e=>T[e]?T[e](t):t.key===e)),alt:(t,...e)=>t=>T.alt(t)&&e.every((e=>T[e]?T[e](t):t.key===e)),meta:(t,...e)=>t=>T.meta(t)&&e.every((e=>T[e]?T[e](t):t.key===e)),arrow:t=>T.arrow,enter:t=>T.enter,escape:t=>T.escape,tab:t=>T.tab,space:t=>T.space,backspace:t=>T.backspace,delete:t=>T.delete,digit:t=>T.digit,letter:t=>T.letter,character:t=>T.character},T={ctrl:t=>t.ctrlKey||"Control"===t.key||"Ctrl"===t.key,shift:t=>t.shiftKey||"Shift"===t.key,alt:t=>t.altKey||"Alt"===t.key,meta:t=>t.metaKey||"Meta"===t.key||"Command"===t.key,arrow:t=>t.key.startsWith("Arrow"),enter:t=>"Enter"===t.key,escape:t=>t.key.startsWith("Esc"),tab:t=>"Tab"===t.key,space:t=>" "===t.key||"Space"===t.key||" "===t.key,backspace:t=>"Backspace"===t.key,delete:t=>"Delete"===t.key,digit:t=>/^\d$/.test(t.key),letter:t=>/^[a-zA-Z]$/.test(t.key),character:t=>/^\S$/.test(t.key)},D=(t,e)=>{let r,i,n=o=>{r=!0,setTimeout((()=>{if(r=!1,i)return i=!1,n(o),t(o)}),e)};return e=>r?i=!0:(n(e),t(e))},M=(t,e)=>{let r;return i=>{clearTimeout(r),r=setTimeout((()=>{r=null,t(i)}),e)}},U=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},K={};function _(t,e,r){let i=K[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/\b(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=K[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(i){return L(i,t,e,r)}}return n=>{let o;try{o=i.call(t,n)}catch(i){return L(i,t,e,r)}return o}}function L(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 R(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var z=new WeakMap;function F(t,r){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{e()}}((()=>Object.assign(i,r))),i}const i=S(r||{}),o=[],s=(t,e=t.parentNode)=>{for(let r in E){let n=":"+r;if(t.hasAttribute?.(n)){let s=t.getAttribute(n);if(t.removeAttribute(n),o.push(E[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=W[r]||C;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;b((()=>{"function"==typeof e&&e(),e=t(i)}))}return Object.seal(i),z.set(t,i),i}var I=F;export{I as default};

package/src/directives.js

@@ -159,7 +159,7 @@ secondary['class'] = (el, expr) => {
   return (state) => {
     let v = evaluate(state)
     let className = typeof v === 'string' ? v : (Array.isArray(v) ? v : Object.entries(v).map(([k,v])=>v?k:'')).filter(Boolean).join(' ')
-    el.className = (initClassName ? initClassName + ' ' : '') + className;
+    el.className = [initClassName, className].filter(Boolean).join(' ');
   }
 }
 
@@ -267,6 +267,8 @@ export default (el, expr, state, name) => {
 
 // bind event to target
 const on = (target, evt, origFn) => {
+  if (!origFn) return
+
   // ona..onb
   let ctxs = evt.split('..').map(e => {
     let ctx = { evt:'', target, test:()=>true };
@@ -278,24 +280,24 @@ const on = (target, evt, origFn) => {
   });
 
   // single event bind
-  if (ctxs.length == 1) return addListener(origFn, ctxs[0])
+  if (ctxs.length == 1) return addListenerWithMods(origFn, ctxs[0])
 
   // events chain cycler
-  let off
-  const nextEvt = (fn, cur=0) => {
+  const onFn = (fn, cur=0) => {
+    let off
     let curListener = e => {
-      off();
-      if (typeof (fn = fn.call(target, e)) !== 'function') fn = ()=>{}
-      if (++cur < ctxs.length) nextEvt(fn, cur);
-      else nextEvt(origFn); // back to first event only if chain isn't stopped (by update)
+      if (cur) off(); // don't remove entry listener - we must keep chain entry always open
+      let nextFn = fn.call(target, e)
+      if (typeof nextFn !== 'function') nextFn = ()=>{}
+      if (cur+1 < ctxs.length) onFn(nextFn, !cur ? 1 : cur+1);
     }
-    return off = addListener(curListener, ctxs[cur])
+    return off = addListenerWithMods(curListener, ctxs[cur])
   }
-  nextEvt(origFn)
-  return () => off()
+  let rootOff = onFn(origFn)
+  return () => rootOff()
 
   // add listener applying the context
-  function addListener(fn, {evt, target, test, defer, stop, prevent, ...opts} ) {
+  function addListenerWithMods(fn, {evt, target, test, defer, stop, prevent, ...opts} ) {
     if (defer) fn = defer(fn)
 
     let cb = e => test(e) && (
@@ -324,6 +326,8 @@ const mods = {
   window(ctx) { ctx.target = window },
   document(ctx) { ctx.target = document },
 
+  toggle(ctx) { ctx.defer = (fn, out) => (e => out ? (out.call?.(ctx.target, e), out=null) : (out = fn())) },
+
   throttle(ctx, limit) { ctx.defer = fn => throttle(fn, limit ? Number(limit) || 0 : 108) },
   debounce(ctx, wait) { ctx.defer = fn => debounce(fn, wait ? Number(wait) || 0 : 108) },
 

package/test/test.js

@@ -492,6 +492,7 @@ test('on: base', () => {
   el.dispatchEvent(new window.Event('x'));
   is(log.value, ['click','x','xx']);
 
+  console.log('make null')
   params.x = null;
   el.dispatchEvent(new window.Event('x'));
   is(log.value, ['click','x','xx']);
@@ -559,11 +560,11 @@ test('on: in-out side-effects', e => {
   el.dispatchEvent(new window.Event('in'));
   is(log, ['in','out','in'])
   el.dispatchEvent(new window.Event('in'));
-  is(log, ['in','out','in'])
+  is(log, ['in','out','in', 'in'])
   el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','out'])
+  is(log, ['in','out','in','in','out','out'])
   el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','out'])
+  is(log, ['in','out','in','in','out','out'])
 })
 
 test('on: chain of events', e => {
@@ -576,14 +577,44 @@ test('on: chain of events', e => {
   is(state.log, ['mousedown','mousemove'])
   el.dispatchEvent(new window.Event('mouseup'));
   is(state.log, ['mousedown','mousemove','mouseup'])
+  el.dispatchEvent(new window.Event('mouseup'));
+  is(state.log, ['mousedown','mousemove','mouseup'])
+  el.dispatchEvent(new window.Event('mousedown'));
+  is(state.log, ['mousedown','mousemove','mouseup','mousedown'])
+})
+
+test('on: parallel chains', e => {
+  let el = h`<div :onx..ony..onz="e=>('x',log.push(e.type),e=>('y',log.push(e.type),e=>('z',log.push(e.type))))"></div>`
+  let state = sprae(el, {log:[]})
+
+  console.log('emit x')
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, ['x'])
+  console.log('emit x')
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, ['x','x'])
+  console.log('emit y')
+  el.dispatchEvent(new window.Event('y'));
+  is(state.log, ['x','x','y','y'])
+  console.log('emit y')
+  el.dispatchEvent(new window.Event('y'));
+  is(state.log, ['x','x','y','y'])
+  console.log('emit z')
+  el.dispatchEvent(new window.Event('z'));
+  console.log('emit y')
+  el.dispatchEvent(new window.Event('y'));
+  is(state.log, ['x','x','y','y','z','z'])
+  el.dispatchEvent(new window.Event('z'));
+  is(state.log, ['x','x','y','y','z','z']);
+  el.dispatchEvent(new window.Event('x'));
+  is(state.log, ['x','x','y','y','z','z','x']);
 })
 
 test('on: state changes between chain of events', e => {
   let el = h`<x :on="{'x..y':fn}"></x>`
   let log = []
-  let state = sprae(el, {log, fn: () => (log.push('x1'),()=>log.push('y1'))})
-  console.log('emit x, x')
-  el.dispatchEvent(new window.Event('x'));
+  let state = sprae(el, {log, fn: () => (log.push('x1'), ()=>log.push('y1'))})
+  console.log('emit x')
   el.dispatchEvent(new window.Event('x'));
   is(log, ['x1'])
   console.log('update fn')
@@ -597,15 +628,14 @@ test('on: state changes between chain of events', e => {
   console.log('emit y, y')
   el.dispatchEvent(new window.Event('y'));
   el.dispatchEvent(new window.Event('y'));
-  is(log, ['x1'])
-  console.log('emit x, x')
-  el.dispatchEvent(new window.Event('x'));
+  is(log, ['x1', 'y1'])
+  console.log('emit x')
   el.dispatchEvent(new window.Event('x'));
-  is(log, ['x1','x2'])
+  is(log, ['x1','y1','x2'])
   console.log('emit y, y')
   el.dispatchEvent(new window.Event('y'));
   el.dispatchEvent(new window.Event('y'));
-  is(log, ['x1','x2','y2'])
+  is(log, ['x1','y1','x2','y2'])
 })
 
 test('on: once', e => {
@@ -721,6 +751,19 @@ test('on: throttle', async e => {
   is(state.log, ['x', 'x', 'x'])
 })
 
+test('on: toggle', async e => {
+  let el = h`<x :onx.toggle="e=>(log.push(1),e=>log.push(2))"></x>`
+  let state = sprae(el, {log:[]})
+  el.dispatchEvent(new window.KeyboardEvent('x'));
+  is(state.log, [1])
+  el.dispatchEvent(new window.KeyboardEvent('x'));
+  is(state.log, [1,2])
+  el.dispatchEvent(new window.KeyboardEvent('x'));
+  is(state.log, [1,2,1])
+  el.dispatchEvent(new window.KeyboardEvent('x'));
+  is(state.log, [1,2,1,2])
+})
+
 test.skip('on: nexttick', async e => {
   let el = h`<x :onkeydown.nexttick="e=>log.push(e.key)"></x>`
   let state = sprae(el, {log:[]})

package/todo.md

@@ -45,4 +45,5 @@
   * [x] waveplay
 * [x] evt modifiers
   * [x] once, capture, passive
-  * [x] ...rest
+  * [x] ...rest
+* [x] parallel chains