sprae 2.11.0 → 2.11.2

package/package.json

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

package/readme.md

@@ -109,6 +109,7 @@ Set style value from object or a string. Extends existing `style` attribute, if
 ```html
 <div :style="foo: bar"></div>
 <div :style="{foo: 'bar'}"></div>
+<div :style="{'--baz': qux}"></div>
 ```
 
 #### `:value="value"`

package/sprae.js

@@ -634,7 +634,7 @@ secondary["style"] = (el, expr) => {
       el.setAttribute("style", initStyle + v2);
     else
       for (let k in v2)
-        el.style[k] = v2[k];
+        el.style.setProperty(k, v2[k]);
   };
 };
 secondary["text"] = (el, expr) => {
@@ -715,9 +715,6 @@ var on = (target, evt, origFn) => {
     );
     return ctx;
   });
-  if (!origFn)
-    origFn = () => {
-    };
   if (ctxs.length == 1)
     return addListener(origFn, ctxs[0]);
   let off;
@@ -736,13 +733,16 @@ var on = (target, evt, origFn) => {
   };
   nextEvt(origFn);
   return () => off();
-};
-var addListener = (fn, { evt, target, test, delayed, stop, prevent, ...opts }) => {
-  if (delayed)
-    fn = delayed(fn);
-  let wrappedFn = (e2) => test(e2) && (stop && e2.stopPropagation(), prevent && e2.preventDefault(), fn.call(target, e2));
-  target.addEventListener(evt, wrappedFn, opts);
-  return () => target.removeEventListener(evt, wrappedFn, opts);
+  function addListener(fn, { evt: evt2, target: target2, test, throttle, debounce, stop, prevent, ...opts }) {
+    if (throttle)
+      fn = throttled(fn, throttle);
+    else if (debounce)
+      fn = debounced(fn, debounce);
+    let cb = (e2) => test(e2) && (stop && e2.stopPropagation(), prevent && e2.preventDefault(), fn.call(target2, e2));
+    target2.addEventListener(evt2, cb, opts);
+    return () => target2.removeEventListener(evt2, cb, opts);
+  }
+  ;
 };
 var mods = {
   prevent(ctx) {
@@ -767,10 +767,10 @@ var mods = {
     ctx.target = document;
   },
   throttle(ctx, limit) {
-    ctx.delayed = (fn) => throttle(fn, Number(limit) || 108);
+    ctx.throttle = Number(limit) || 108;
   },
   debounce(ctx, wait) {
-    ctx.delayed = (fn) => debounce(fn, Number(wait) || 108);
+    ctx.debounce = Number(wait) || 108;
   },
   outside: (ctx) => (e2) => {
     let target = ctx.target;
@@ -783,22 +783,22 @@ var mods = {
     return true;
   },
   self: (ctx) => (e2) => e2.target === ctx.target,
-  ctrl: () => (e2) => e2.key === "Control" || e2.key === "Ctrl",
-  shift: () => (e2) => e2.key === "Shift",
-  alt: () => (e2) => e2.key === "Alt",
-  meta: () => (e2) => e2.key === "Meta",
-  arrow: () => (e2) => e2.key.startsWith("Arrow"),
-  enter: () => (e2) => e2.key === "Enter",
-  escape: () => (e2) => e2.key.startsWith("Esc"),
-  tab: () => (e2) => e2.key === "Tab",
-  space: () => (e2) => e2.key === "Space" || e2.key === " ",
-  backspace: () => (e2) => e2.key === "Backspace",
-  delete: () => (e2) => e2.key === "Delete",
-  digit: () => (e2) => /^\d$/.test(e2.key),
-  letter: () => (e2) => /^[a-zA-Z]$/.test(e2.key),
-  character: () => (e2) => /^\S$/.test(e2.key)
-};
-var throttle = (fn, limit) => {
+  ctrl: (ctx) => (e2) => e2.key === "Control" || e2.key === "Ctrl",
+  shift: (ctx) => (e2) => e2.key === "Shift",
+  alt: (ctx) => (e2) => e2.key === "Alt",
+  meta: (ctx) => (e2) => e2.key === "Meta",
+  arrow: (ctx) => (e2) => e2.key.startsWith("Arrow"),
+  enter: (ctx) => (e2) => e2.key === "Enter",
+  escape: (ctx) => (e2) => e2.key.startsWith("Esc"),
+  tab: (ctx) => (e2) => e2.key === "Tab",
+  space: (ctx) => (e2) => e2.key === "Space" || e2.key === " ",
+  backspace: (ctx) => (e2) => e2.key === "Backspace",
+  delete: (ctx) => (e2) => e2.key === "Delete",
+  digit: (ctx) => (e2) => /^\d$/.test(e2.key),
+  letter: (ctx) => (e2) => /^[a-zA-Z]$/.test(e2.key),
+  character: (ctx) => (e2) => /^\S$/.test(e2.key)
+};
+var throttled = (fn, limit) => {
   let pause, planned, block = (e2) => {
     pause = true;
     setTimeout(() => {
@@ -814,7 +814,7 @@ var throttle = (fn, limit) => {
     return fn(e2);
   };
 };
-var debounce = (fn, wait) => {
+var debounced = (fn, wait) => {
   let timeout;
   return (e2) => {
     clearTimeout(timeout);

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)&&u(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 u(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function f(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 d(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 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)}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&&!u(this))return this.f&=-2,!0;var t=r;try{f(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}}),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),n++;var e=r;return r=this,d.bind(this,e)},y.prototype.N=function(){2&this.f||(this.f|=2,this.o=i,i=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,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[S],S=Symbol("signal-struct");function A(t,e){if(w(t)&&!e)return t;if(k(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),u=o[t]=(r=s)&&r.peek?s:new a(l?void 0:k(s)?Object.seal(A(s)):Array.isArray(s)?A(s):s);l&&m(s,(t=>u.value=t)),Object.defineProperty(n,t,{get:()=>u.value,set(t){if(k(t)){if(k(u.value))try{return void Object.assign(u.value,t)}catch(t){}u.value=Object.seal(A(t))}else Array.isArray(t)?u.value=A(t):u.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)&&!w(t[0]))for(let e=0;e<t.length;e++)t[e]=A(t[e]);return t}function k(t){return t&&t.constructor===Object}A.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=[L(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(L(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),I(o,t))}},E.with=(t,e,r)=>{I(t,A(L(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 R(new Error,t,e);const i=t[$]=document.createTextNode("");t.replaceWith(i);const n=L(t,r[2],":each"),o=t.getAttribute(":key"),s=o?L(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):R(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=N(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=A({[r[0]]:i,[r[1]]:e},o),null!=f&&l.set(f,u)),h.push(u)}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],u=r[l];if(null===a)s++;else if(r.length<=l)t.removeChild(e[s]),s++;else if(e.length<=s)t.insertBefore(u,e[s]||i),l++;else if(a===u)s++,l++;else{var f=o.get(a),c=n.get(u);void 0===f?(t.removeChild(e[s]),s++):void 0===c?(t.insertBefore(u,e[s]||i),l++):(t.insertBefore(e[c],e[s]||i),e[c]=null,c>s+1&&s++,l++)}}}(i.parentNode,u,c,i),u=c;for(let t=0;t<c.length;t++)I(c[t],h[t])}},W.ref=(t,e,r)=>{r[e]=t},W.id=(t,e)=>{let r=L(t,e,":id");return e=>{return i=r(e),t.id=i||0===i?i:"";var i}},W.class=(t,e)=>{let r=L(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(" ")}},W.style=(t,e)=>{let r=L(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]}},W.text=(t,e)=>{let r=L(t,e,":text");return e=>{let i=r(e);t.textContent=null==i?"":i}},W.data=(t,e)=>{let r=L(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=L(t,e,":aria");return e=>(e=>{for(let r in e)U(t,"aria-"+z(r),null==e[r]?null:e[r]+"")})(r(e))},W[""]=(t,e)=>{let r=L(t,e,":");if(r)return e=>{let i=r(e);for(let e in i)U(t,z(e),i[e])}},W.value=(t,e)=>{let r,i,n=L(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=L(t,e,":on");return e=>{let i=r(e),n=[];for(let e in i)n.push(T(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=L(t,e,":"+i);if(o)return n?e=>{let r=o(e)||(()=>{});return T(t,n,r)}:e=>U(t,i,o(e))},T=(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=P[e]?.(r,i)||r.test,""))),r}));if(r||(r=()=>{}),1==n.length)return B(r,n[0]);const o=(e,s=0)=>i=B((l=>{i(),"function"!=typeof(e=e.call(t,l))&&(e=()=>{}),++s<n.length?o(e,s):o(r)}),n[s]);return o(r),()=>i()},B=(t,{evt:e,target:r,test:i,delayed: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},throttle(t,e){t.delayed=t=>D(t,Number(e)||108)},debounce(t,e){t.delayed=t=>M(t,Number(e)||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=>"Control"===t.key||"Ctrl"===t.key,shift:()=>t=>"Shift"===t.key,alt:()=>t=>"Alt"===t.key,meta:()=>t=>"Meta"===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=>"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:"")},_={};function L(t,e,r){let i=_[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/\b(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=_[e]=new Function("__scope",`with (__scope) { return ${n} };`)}catch(i){return R(i,t,e,r)}}return n=>{let o;try{o=i.call(t,n)}catch(i){return R(i,t,e,r)}return o}}function R(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 z(t){return t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase()))}var F=new WeakMap;function I(t,r){if(!t.children)return;if(F.has(t)){let i=F.get(t);return function(t){if(n>0)return t();n++;try{t()}finally{e()}}((()=>Object.assign(i,r))),i}const i=A(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)),F.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)),F.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),F.set(t,i),i}var Z=I;export{Z 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)&&u(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 u(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function f(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 d(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 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)}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&&!u(this))return this.f&=-2,!0;var t=r;try{f(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}}),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),n++;var e=r;return r=this,d.bind(this,e)},y.prototype.N=function(){2&this.f||(this.f|=2,this.o=i,i=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,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[S],S=Symbol("signal-struct");function A(t,e){if(w(t)&&!e)return t;if(k(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),u=o[t]=(r=s)&&r.peek?s:new a(l?void 0:k(s)?Object.seal(A(s)):Array.isArray(s)?A(s):s);l&&m(s,(t=>u.value=t)),Object.defineProperty(n,t,{get:()=>u.value,set(t){if(k(t)){if(k(u.value))try{return void Object.assign(u.value,t)}catch(t){}u.value=Object.seal(A(t))}else Array.isArray(t)?u.value=A(t):u.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)&&!w(t[0]))for(let e=0;e<t.length;e++)t[e]=A(t[e]);return t}function k(t){return t&&t.constructor===Object}A.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,A(_(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 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):L(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=N(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=A({[r[0]]:i,[r[1]]:e},o),null!=f&&l.set(f,u)),h.push(u)}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],u=r[l];if(null===a)s++;else if(r.length<=l)t.removeChild(e[s]),s++;else if(e.length<=s)t.insertBefore(u,e[s]||i),l++;else if(a===u)s++,l++;else{var f=o.get(a),c=n.get(u);void 0===f?(t.removeChild(e[s]),s++):void 0===c?(t.insertBefore(u,e[s]||i),l++):(t.insertBefore(e[c],e[s]||i),e[c]=null,c>s+1&&s++,l++)}}}(i.parentNode,u,c,i),u=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);t.className=i+typeof n=="string"?n:(Array.isArray(n)?n:Object.entries(n).map((([t,e])=>e?t:""))).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 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)M(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)M(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":"",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=>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=>M(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)||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,throttle:n,debounce:o,stop:s,prevent:l,...a}){n?t=B(t,n):o&&(t=D(t,o));let u=e=>i(e)&&(s&&e.stopPropagation(),l&&e.preventDefault(),t.call(r,e));return r.addEventListener(e,u,a),()=>r.removeEventListener(e,u,a)}},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.throttle=Number(e)||108},debounce(t,e){t.debounce=Number(e)||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=>t=>"Control"===t.key||"Ctrl"===t.key,shift:t=>t=>"Shift"===t.key,alt:t=>t=>"Alt"===t.key,meta:t=>t=>"Meta"===t.key,arrow:t=>t=>t.key.startsWith("Arrow"),enter:t=>t=>"Enter"===t.key,escape:t=>t=>t.key.startsWith("Esc"),tab:t=>t=>"Tab"===t.key,space:t=>t=>"Space"===t.key||" "===t.key,backspace:t=>t=>"Backspace"===t.key,delete:t=>t=>"Delete"===t.key,digit:t=>t=>/^\d$/.test(t.key),letter:t=>t=>/^[a-zA-Z]$/.test(t.key),character:t=>t=>/^\S$/.test(t.key)},B=(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))},D=(t,e)=>{let r;return i=>{clearTimeout(r),r=setTimeout((()=>{r=null,t(i)}),e)}},M=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},U={};function _(t,e,r){let i=U[e];if(!i){let n=/^[\n\s]*if.*\(.*\)/.test(e)||/\b(let|const)\s/.test(e)?`(() => { ${e} })()`:e;try{i=U[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=A(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

@@ -169,7 +169,7 @@ secondary['style'] = (el, expr) => {
   return (state) => {
     let v = evaluate(state)
     if (typeof v === 'string') el.setAttribute('style', initStyle + v)
-    else for (let k in v) el.style[k] = v[k]
+    else for (let k in v) el.style.setProperty(k, v[k])
   }
 }
 
@@ -273,9 +273,6 @@ const on = (target, evt, origFn) => {
     return ctx;
   });
 
-  // FIXME: must be in throttles
-  if (!origFn) origFn = () => {}
-
   // single event bind
   if (ctxs.length == 1) return addListener(origFn, ctxs[0])
 
@@ -291,22 +288,23 @@ const on = (target, evt, origFn) => {
     return off = addListener(curListener, ctxs[cur])
   }
   nextEvt(origFn)
-
   return () => off()
-}
-// add listener applying the context
-const addListener = (fn, {evt, target, test, delayed, stop, prevent, ...opts} ) => {
-  if (delayed) fn = delayed(fn)
-  let wrappedFn = e => (
-    test(e) && (
+
+  // add listener applying the context
+  function addListener(fn, {evt, target, test, throttle, debounce, stop, prevent, ...opts} ) {
+    if (throttle) fn = throttled(fn, throttle)
+    else if (debounce) fn = debounced(fn, debounce)
+
+    let cb = e => test(e) && (
       stop&&e.stopPropagation(),
       prevent&&e.preventDefault(),
       fn.call(target, e)
     )
-  )
-  target.addEventListener(evt, wrappedFn, opts)
-  return () => target.removeEventListener(evt, wrappedFn, opts)
-};
+
+    target.addEventListener(evt, cb, opts)
+    return () => target.removeEventListener(evt, cb, opts)
+  };
+}
 
 // event modifiers
 const mods = {
@@ -324,8 +322,8 @@ const mods = {
   document(ctx) { ctx.target = document },
 
   // FIXME: test looks very similar to test, mb it can be optimized
-  throttle(ctx, limit) { ctx.delayed = fn => throttle(fn, Number(limit) || 108)},
-  debounce(ctx, wait) { ctx.delayed = fn => debounce(fn, Number(wait) || 108) },
+  throttle(ctx, limit) { ctx.throttle = Number(limit) || 108 },
+  debounce(ctx, wait) { ctx.debounce = Number(wait) || 108 },
 
   // test
   outside: ctx => e => {
@@ -355,7 +353,7 @@ const mods = {
 };
 
 // create delayed fns
-const throttle = (fn, limit) => {
+const throttled = (fn, limit) => {
   let pause, planned, block = (e) => {
     pause = true
     setTimeout(() => {
@@ -370,7 +368,7 @@ const throttle = (fn, limit) => {
     return fn(e);
   }
 }
-const debounce = (fn, wait) => {
+const debounced = (fn, wait) => {
   let timeout
   return (e) => {
     clearTimeout(timeout)

package/test/test.js

@@ -62,6 +62,9 @@ test('style', async () => {
   is(el.outerHTML, `<x style="left: 1px; top: 1px"></x>`)
   params.style = {top: '2px'}
   is(el.outerHTML, `<x style="left: 1px; top: 2px;"></x>`)
+
+  params.style = {'--x': 123}
+  is(el.style.getPropertyValue('--x'), '123')
 })
 
 test('class', async () => {

package/todo.md

@@ -36,6 +36,8 @@
 * ~~[x] run tiredown if element got removed from condition or loop (free memory)~~ no need just make sure no refs to elements stored
 * [x] `sprae(el, newState)` can update element's state directly (as batch!?) -> must be tested against repeats in directives
 * [x] :if :ref, :if :with -> context setters must come first always
+* [ ] :style="{'--x':value}"
+* [ ] debounce state updates to next tick? Ie. state is updated straight away but rerendered after?
 * [ ] frameworks benchmark
 * [ ] examples
   * [x] todomvc