sprae 5.3.0 → 6.0.0

package/sprae.min.js

@@ -1 +1 @@
-var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,l=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},s=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console,window:window,document:document,history:history,location:location},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(r in Object.prototype||Array.isArray(t)&&r in Array.prototype&&"length"!==r)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(!Array.isArray(e)&&Object.is(e[t],r))return!0;e[t]=r;let n=i.get(e)?.[t];if(n)for(let e of n)s.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);o.set(e,r),a.set(r,e);let n=Object.getOwnPropertyDescriptors(e);for(let t in n){let l=n[t];l.get&&l.get&&(l.get=l.get.bind(r),Object.defineProperty(e,t,l))}return e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of s)e.call();s.clear(),t=!1})))},g={},d={};g.if=(e,t)=>{let r=document.createTextNode(""),n=[j(e,t,":if")],l=[e],s=e;for(;(s=e.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(t=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),l.push(s),n.push(j(e,t,":else :if"))):(s.remove(),l.push(s),n.push((()=>1)));return e.replaceWith(s=r),e=>{let t=n.findIndex((t=>t(e)));l[t]!=s&&((s[m]||s).replaceWith(s=l[t]||r),O(s,e))}};var m=Symbol(":each");g.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),l=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),s=l.match(t);return s?[l.replace(t,"").trim(),s[1].trim(),n]:[l,"",n]}(t);if(!r)return E(new Error,e,t,":each");const n=e[m]=document.createTextNode("");e.replaceWith(n);const s=j(e,r[2],":each"),i=e.getAttribute(":key"),o=i?j(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new l,c=new l;let f=[];return l=>{let i=s(l);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t+1,t])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):E(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let s,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?s=e.cloneNode(!0):(s=c.get(f))||c.set(f,s=e.cloneNode(!0)),y.push(s),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},l),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const l=new Map,s=new Map;let i,o;for(i=0;i<t.length;i++)l.set(t[i],i);for(i=0;i<r.length;i++)s.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=s.get(a),f=l.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)O(y[e],h[e])}},g.with=(e,t,r)=>{const n=j(e,t,":with")(r);O(e,p(n,r))},g.ref=(e,t,r)=>{r[t]=e},d.render=(e,t,r)=>{let n=j(e,t,":render")(r);n||E(new Error("Template not found"),e,t,":render");let l=n.content.cloneNode(!0);e.replaceChildren(l),O(e,r)},d.id=(e,t)=>{let r=j(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},d.class=(e,t)=>{let r=j(e,t,":class"),n=e.getAttribute("class");return t=>{let l=r(t),s=[n];l&&("string"==typeof l?s.push(l):Array.isArray(l)?s.push(...l):s.push(...Object.entries(l).map((([e,t])=>t?e:"")))),(s=s.filter(Boolean).join(" "))?e.setAttribute("class",s):e.removeAttribute("class")}},d.style=(e,t)=>{let r=j(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let l=r(t);if("string"==typeof l)e.setAttribute("style",n+l);else{e.setAttribute("style",n);for(let t in l)e.style.setProperty(t,l[t])}}},d.text=(e,t)=>{let r=j(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},d[""]=(e,t)=>{let r=j(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},d.value=(e,t)=>{let r,n,l=j(e,t,":value"),s="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>s(l(e))},d.on=(e,t)=>{let r=j(e,t,":on");return t=>{let n=r(t),l=[];for(let t in n)l.push(v(e,t,n[t]));return()=>{for(let e of l)e()}}};var b=(e,t,r,n)=>{let l=n.startsWith("on")&&n.slice(2),s=j(e,t,":"+n);if(s)return l?t=>{let r=s(t)||(()=>{});return v(e,l,r)}:t=>x(e,n,s(t))},v=(e,t,r)=>{if(!r)return;let n=t.split("..").map((t=>{let r={evt:"",target:e,test:()=>!0};return r.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,n="")=>(r.test=A[t]?.(r,...n.split("-"))||r.test,""))),r}));if(1==n.length)return i(r,n[0]);const l=(t,r=0)=>{let s;return s=i((i=>{r&&s();let o=t.call(e,i);"function"!=typeof o&&(o=()=>{}),r+1<n.length&&l(o,r?r+1:1)}),n[r])};let s=l(r);return()=>s();function i(e,{evt:t,target:r,test:n,defer:l,stop:s,prevent:i,...o}){l&&(e=l(e));let a=t=>n(t)&&(s&&t.stopPropagation(),i&&t.preventDefault(),e.call(r,t));return r.addEventListener(t,a,o),()=>r.removeEventListener(t,a,o)}},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},toggle(e){e.defer=(t,r)=>n=>r?(r.call?.(e.target,n),r=null):r=t()},throttle(e,t){e.defer=e=>k(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>w.ctrl(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),shift:(e,...t)=>e=>w.shift(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),alt:(e,...t)=>e=>w.alt(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),meta:(e,...t)=>e=>w.meta(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),arrow:e=>w.arrow,enter:e=>w.enter,escape:e=>w.escape,tab:e=>w.tab,space:e=>w.space,backspace:e=>w.backspace,delete:e=>w.delete,digit:e=>w.digit,letter:e=>w.letter,character:e=>w.character},w={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},k=(e,t)=>{let r,n,l=s=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,l(s),e(s)}),t)};return t=>r?n=!0:(l(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function j(e,t,r){let n=S[t];if(!n){let l=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${l.trim()} };`)}catch(n){return E(n,e,t,r)}}return l=>{let s;try{s=n.call(e,l)}catch(n){return E(n,e,t,r)}return s}}function E(e,t,n,l){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${l}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}O.globals=c;var N=new WeakMap;function O(e,t){if(!e.children)return;if(N.has(e))return Object.assign(N.get(e),t);const r=p(t||{}),n=[],l=(e,t=e.parentNode)=>{for(let l in g){let s=":"+l;if(e.hasAttribute?.(s)){let i=e.getAttribute(s);if(e.removeAttribute(s),n.push(g[l](e,i,r,l)),N.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let l=e.attributes[t];if(":"!==l.name[0]){t++;continue}e.removeAttribute(l.name);let s=l.value,i=l.name.slice(1).split(":");for(let t of i){let l=d[t]||b;n.push(l(e,s,r,t))}}for(let t,r=0;t=e.children[r];r++)!1===l(t,e)&&r--};l(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return N.set(e,r),r}var $=O;document.currentScript&&O(document.documentElement);export{$ as default};
+var e,t,r=Promise.prototype.then.bind(Promise.resolve()),n=new WeakMap,s=class extends Map{#e=new FinalizationRegistry((e=>super.delete(e)));get size(){return[...this].length}constructor(e=[]){super();for(const[t,r]of e)this.set(t,r)}get(e){return super.get(e)?.deref()}set(e,t){let r=super.get(e);return r&&this.#e.unregister(r),r=(e=>n.get(e)||(e=>{const t=new WeakRef(e);return n.set(e,t),t})(e))(t),this.#e.register(t,e,r),super.set(e,r)}},l=new Set,i=new WeakMap,o=new WeakMap,a=new WeakMap,u=Symbol("parent"),c={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console,window:window,document:document,history:history,location:location},f={has:()=>!0,get(t,r){if("symbol"==typeof r)return t[r];if(!(r in t))return t[u]?.[r];if(r in Object.prototype||Array.isArray(t)&&r in Array.prototype&&"length"!==r)return t[r];let n=t[r];if(e){let n=i.get(t);n||i.set(t,n={}),n[r]?n[r].includes(e)||n[r].push(e):n[r]=[e]}if(n&&n.constructor===Object||Array.isArray(n)){let e=o.get(n);return e||o.set(n,e=new Proxy(n,f)),e}return n},set(e,t,r){if(!(t in e)&&e[u]&&t in e[u])return e[u][t]=r;if(!Array.isArray(e)&&Object.is(e[t],r))return!0;e[t]=r;let n=i.get(e)?.[t];if(n)for(let e of n)l.add(e);return h(),!0},deleteProperty:(e,t)=>(e[t]=void 0,delete e[t],!0)},p=(e,t)=>{if(o.has(e))return o.get(e);if(a.has(e))return e;let r=new Proxy(e,f);o.set(e,r),a.set(r,e);let n=Object.getOwnPropertyDescriptors(e);for(let t in n){let s=n[t];s.get&&s.get&&(s.get=s.get.bind(r),Object.defineProperty(e,t,s))}return e[u]=t?p(t):c,r},y=t=>{const r=()=>{let n=e;e=r,t(),e=n};return r(),r},h=()=>{t||(t=!0,r((()=>{for(let e of l)e.call();l.clear(),t=!1})))},d={},g={};d.if=(e,t)=>{let r=document.createTextNode(""),n=[j(e,t,":if")],s=[e],l=e;for(;(l=e.nextElementSibling)&&l.hasAttribute(":else");)l.removeAttribute(":else"),(t=l.getAttribute(":if"))?(l.removeAttribute(":if"),l.remove(),s.push(l),n.push(j(e,t,":else :if"))):(l.remove(),s.push(l),n.push((()=>1)));return e.replaceWith(l=r),e=>{let t=n.findIndex((t=>t(e)));s[t]!=l&&((l[b]||l).replaceWith(l=s[t]||r),O(l,e))}};var b=Symbol(":each");d.each=(e,t)=>{let r=function(e){let t=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=e.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let n=r[2].trim(),s=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),l=s.match(t);return l?[s.replace(t,"").trim(),l[1].trim(),n]:[s,"",n]}(t);if(!r)return E(new Error,e,t,":each");const n=e[b]=document.createTextNode("");e.replaceWith(n);const l=j(e,r[2],":each"),i=e.getAttribute(":key"),o=i?j(null,i,":each"):null;e.removeAttribute(":key");const a=e.getAttribute(":ref"),u=new s,c=new s;let f=[];return s=>{let i=l(s);i?"number"==typeof i?i=Array.from({length:i},((e,t)=>[t+1,t])):Array.isArray(i)?i=i.map(((e,t)=>[t+1,e])):"object"==typeof i?i=Object.entries(i):E(Error("Bad list value"),e,t,":each"):i=[];let y=[],h=[];for(let[t,n]of i){let l,i,f=o?.({[r[0]]:n,[r[1]]:t});null==f?l=e.cloneNode(!0):(l=c.get(f))||c.set(f,l=e.cloneNode(!0)),y.push(l),null!=f&&(i=u.get(f))?i[r[0]]=n:(i=p({[r[0]]:n,[a||""]:null,[r[1]]:t},s),null!=f&&u.set(f,i)),h.push(i)}!function(e,t,r,n){const s=new Map,l=new Map;let i,o;for(i=0;i<t.length;i++)s.set(t[i],i);for(i=0;i<r.length;i++)l.set(r[i],i);for(i=o=0;i!==t.length||o!==r.length;){var a=t[i],u=r[o];if(null===a)i++;else if(r.length<=o)e.removeChild(t[i]),i++;else if(t.length<=i)e.insertBefore(u,t[i]||n),o++;else if(a===u)i++,o++;else{var c=l.get(a),f=s.get(u);void 0===c?(e.removeChild(t[i]),i++):void 0===f?(e.insertBefore(u,t[i]||n),o++):(e.insertBefore(t[f],t[i]||n),t[f]=null,f>i+1&&i++,o++)}}}(n.parentNode,f,y,n),f=y;for(let e=0;e<y.length;e++)O(y[e],h[e])}},d.with=(e,t,r)=>{const n=j(e,t,":with")(r);O(e,p(n,r))},d.ref=(e,t,r)=>{r[t]=e},g.render=(e,t,r)=>{let n=j(e,t,":render")(r);n||E(new Error("Template not found"),e,t,":render");let s=n.content.cloneNode(!0);e.replaceChildren(s),O(e,r)},g.id=(e,t)=>{let r=j(e,t,":id");return t=>{return n=r(t),e.id=n||0===n?n:"";var n}},g.class=(e,t)=>{let r=j(e,t,":class"),n=e.getAttribute("class");return t=>{let s=r(t),l=[n];s&&("string"==typeof s?l.push(s):Array.isArray(s)?l.push(...s):l.push(...Object.entries(s).map((([e,t])=>t?e:"")))),(l=l.filter(Boolean).join(" "))?e.setAttribute("class",l):e.removeAttribute("class")}},g.style=(e,t)=>{let r=j(e,t,":style"),n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t=>{let s=r(t);if("string"==typeof s)e.setAttribute("style",n+s);else{e.setAttribute("style",n);for(let t in s)e.style.setProperty(t,s[t])}}},g.text=(e,t)=>{let r=j(e,t,":text");return t=>{let n=r(t);e.textContent=null==n?"":n}},g[""]=(e,t)=>{let r=j(e,t,":");if(r)return t=>{let n=r(t);for(let t in n)x(e,t.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),n[t])}},g.value=(e,t)=>{let r,n,s=j(e,t,":value"),l="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(r=e.selectionStart,n=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),r&&e.setSelectionRange(r,n)):"checkbox"===e.type?t=>(e.value=t?"on":"",x(e,"checked",t)):"select-one"===e.type?t=>{for(let t in e.options)t.removeAttribute("selected");e.value=t,e.selectedOptions[0]?.setAttribute("selected","")}:t=>e.value=t;return e=>l(s(e))};var m=(e,t,r,n)=>{let s=n.startsWith("on")&&n.slice(2),l=j(e,t,":"+n);if(l)return s?t=>{let r=l(t)||(()=>{});return v(e,s,r)}:t=>x(e,n,l(t))},v=(e,t,r)=>{if(!r)return;const n={evt:"",target:e,test:()=>!0};n.evt=(t.startsWith("on")?t.slice(2):t).replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(n.test=A[t]?.(n,...r.split("-"))||n.test,"")));const{evt:s,target:l,test:i,defer:o,stop:a,prevent:u,...c}=n;o&&(r=o(r));const f=e=>i(e)&&(a&&e.stopPropagation(),u&&e.preventDefault(),r.call(l,e));return l.addEventListener(s,f,c),()=>l.removeEventListener(s,f,c)},A={prevent(e){e.prevent=!0},stop(e){e.stop=!0},once(e){e.once=!0},passive(e){e.passive=!0},capture(e){e.capture=!0},window(e){e.target=window},document(e){e.target=document},throttle(e,t){e.defer=e=>k(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>W(e,t?Number(t)||0:108)},outside:e=>t=>{let r=e.target;return!(r.contains(t.target)||!1===t.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:e=>t=>t.target===e.target,ctrl:(e,...t)=>e=>w.ctrl(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),shift:(e,...t)=>e=>w.shift(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),alt:(e,...t)=>e=>w.alt(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),meta:(e,...t)=>e=>w.meta(e)&&t.every((t=>w[t]?w[t](e):e.key===t)),arrow:e=>w.arrow,enter:e=>w.enter,escape:e=>w.escape,tab:e=>w.tab,space:e=>w.space,backspace:e=>w.backspace,delete:e=>w.delete,digit:e=>w.digit,letter:e=>w.letter,character:e=>w.character},w={ctrl:e=>e.ctrlKey||"Control"===e.key||"Ctrl"===e.key,shift:e=>e.shiftKey||"Shift"===e.key,alt:e=>e.altKey||"Alt"===e.key,meta:e=>e.metaKey||"Meta"===e.key||"Command"===e.key,arrow:e=>e.key.startsWith("Arrow"),enter:e=>"Enter"===e.key,escape:e=>e.key.startsWith("Esc"),tab:e=>"Tab"===e.key,space:e=>" "===e.key||"Space"===e.key||" "===e.key,backspace:e=>"Backspace"===e.key,delete:e=>"Delete"===e.key,digit:e=>/^\d$/.test(e.key),letter:e=>/^[a-zA-Z]$/.test(e.key),character:e=>/^\S$/.test(e.key)},k=(e,t)=>{let r,n,s=l=>{r=!0,setTimeout((()=>{if(r=!1,n)return n=!1,s(l),e(l)}),t)};return t=>r?n=!0:(s(t),e(t))},W=(e,t)=>{let r;return n=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(n)}),t)}},x=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},S={};function j(e,t,r){let n=S[t];if(!n){let s=/^[\n\s]*if.*\(.*\)/.test(t)||/\b(let|const)\s/.test(t)&&!r.startsWith(":on")?`(() => {${t}})()`:t;try{n=S[t]=new Function("__scope",`with (__scope) { return ${s.trim()} };`)}catch(n){return E(n,e,t,r)}}return s=>{let l;try{l=n.call(e,s)}catch(n){return E(n,e,t,r)}return l}}function E(e,t,n,s){Object.assign(e,{element:t,expression:n}),console.warn(`∴ ${e.message}\n\n${s}=${n?`"${n}"\n\n`:""}`,t),r((()=>{throw e}),0)}O.globals=c;var N=new WeakMap;function O(e,t){if(!e.children)return;if(N.has(e))return Object.assign(N.get(e),t);const r=p(t||{}),n=[],s=(e,t=e.parentNode)=>{for(let s in d){let l=":"+s;if(e.hasAttribute?.(l)){let i=e.getAttribute(l);if(e.removeAttribute(l),n.push(d[s](e,i,r,s)),N.has(e))return;if(e.parentNode!==t)return!1}}if(e.attributes)for(let t=0;t<e.attributes.length;){let s=e.attributes[t],l=s.name[0];if(":"===l||"@"===l){e.removeAttribute(s.name);let t="@"===l?`event=>{${s.value}}`:s.value,i=s.name.slice(1).split(l);for(let s of i){"@"===l&&(s="on"+s);let i=g[s]||m;n.push(i(e,t,r,s))}}else t++}for(let t,r=0;t=e.children[r];r++)!1===s(t,e)&&r--};s(e);for(let e of n)if(e){let t;y((()=>{"function"==typeof t&&t(),t=e(r)}))}return N.set(e,r),r}var $=O;document.currentScript&&O(document.documentElement);export{$ as default};

package/src/core.js

@@ -1,5 +1,5 @@
 import { state as createState, fx, sandbox } from './state.js';
-import defaultDirective, { primary, secondary } from './directives.js';
+import defaultDirective, { primary, secondary, on } from './directives.js';
 
 sprae.globals=sandbox
 
@@ -39,18 +39,23 @@ export default function sprae(container, values) {
     // catch other attributes as secondary
     if (el.attributes) {
       for (let i = 0; i < el.attributes.length;) {
-        let attr = el.attributes[i]
-        if (attr.name[0] !== ':') {i++; continue}
-        el.removeAttribute(attr.name)
-        let expr = attr.value
+        let attr = el.attributes[i], prefix = attr.name[0]
 
-        // multiple attributes like :id:for=""
-        let attrNames = attr.name.slice(1).split(':')
-        for (let attrName of attrNames) {
-          let dir = secondary[attrName] || defaultDirective;
-          updates.push(dir(el, expr, state, attrName));
-          // NOTE: secondary directives don't stop flow nor extend state, so no need to check
+        if (prefix === ':' || prefix === '@') {
+          el.removeAttribute(attr.name)
+          let expr = prefix === '@' ? `event=>{${attr.value}}` : attr.value,
+              names = attr.name.slice(1).split(prefix)
+
+          // multiple attributes like :id:for="" or @click@touchstart
+          for (let name of names) {
+            // @click forwards to :onclick=event=>{...inline}
+            if (prefix === '@') name = `on` + name
+            let dir = secondary[name] || defaultDirective;
+            updates.push(dir(el, expr, state, name));
+            // NOTE: secondary directives don't stop flow nor extend state, so no need to check
+          }
         }
+        else i++;
       }
     }
 

package/src/directives.js

@@ -240,18 +240,6 @@ secondary['value'] = (el, expr) => {
   return (state) => update(evaluate(state))
 }
 
-secondary['on'] = (el, expr) => {
-  let evaluate = parseExpr(el, expr, ':on')
-
-  return (state) => {
-    let listeners = evaluate(state);
-    let offs = []; for (let evt in listeners) offs.push(on(el, evt, listeners[evt]));
-    return () => {
-      for (let off of offs) off()
-    }
-  }
-}
-
 // any unknown directive
 export default (el, expr, state, name) => {
   let evt = name.startsWith('on') && name.slice(2)
@@ -268,50 +256,30 @@ export default (el, expr, state, name) => {
   return state => attr(el, name, evaluate(state))
 }
 
-// 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 };
-    // onevt.debounce-108 -> evt.debounce-108
-    ctx.evt = (e.startsWith('on') ? e.slice(2) : e).replace(/\.(\w+)?-?([-\w]+)?/g,
-      (match, mod, param='') => (ctx.test = mods[mod]?.(ctx, ...param.split('-')) || ctx.test, '')
-    );
-    return ctx;
-  });
-
-  // single event bind
-  if (ctxs.length == 1) return addListenerWithMods(origFn, ctxs[0])
-
-  // events chain cycler
-  const onFn = (fn, cur=0) => {
-    let off
-    let curListener = e => {
-      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 = addListenerWithMods(curListener, ctxs[cur])
-  }
-  let rootOff = onFn(origFn)
-  return () => rootOff()
+// bind event to a target
+export const on = (el, e, fn) => {
+  if (!fn) return
+
+  const ctx = { evt:'', target:el, test:()=>true };
+
+  // onevt.debounce-108 -> evt.debounce-108
+  ctx.evt = (e.startsWith('on') ? e.slice(2) : e).replace(/\.(\w+)?-?([-\w]+)?/g,
+    (match, mod, param='') => (ctx.test = mods[mod]?.(ctx, ...param.split('-')) || ctx.test, '')
+  );
 
   // add listener applying the context
-  function addListenerWithMods(fn, {evt, target, test, defer, stop, prevent, ...opts} ) {
-    if (defer) fn = defer(fn)
-
-    let cb = e => test(e) && (
-      stop&&e.stopPropagation(),
-      prevent&&e.preventDefault(),
-      fn.call(target, e)
-    )
-
-    target.addEventListener(evt, cb, opts)
-    return () => target.removeEventListener(evt, cb, opts)
-  };
+  const {evt, target, test, defer, stop, prevent, ...opts} = ctx;
+
+  if (defer) fn = defer(fn)
+
+  const cb = e => test(e) && (
+    stop&&e.stopPropagation(),
+    prevent&&e.preventDefault(),
+    fn.call(target, e)
+  )
+
+  target.addEventListener(evt, cb, opts)
+  return () => target.removeEventListener(evt, cb, opts)
 }
 
 // event modifiers
@@ -329,8 +297,6 @@ 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/{dom.js → attrs.js}

@@ -6,16 +6,6 @@ import sprae from '../src/index.js'
 import h from 'hyperf'
 
 
-Object.defineProperty(DocumentFragment.prototype, 'outerHTML', {
-  get() {
-    let s = ''
-    this.childNodes.forEach(n => {
-      s += n.nodeType === 3 ? n.textContent : n.outerHTML != null ? n.outerHTML : ''
-    })
-    return s
-  }
-})
-
 test.skip('autoinit', async () => {
   is(window.x.innerHTML, '1')
 })
@@ -570,318 +560,6 @@ test('each: with :with', () => {
   is(el.outerHTML, `<ul><li>0</li><li>1</li><li>2</li></ul>`)
 })
 
-test('on: base', async () => {
-  let el = h`<div :on="{click(e){log.push('click')}, x}"></div>`
-  let log = []
-  let params = sprae(el, {x(){log.push('x')}, log})
-
-  is(el.outerHTML, `<div></div>`);
-  el.dispatchEvent(new window.Event('click'));
-  is(log, ['click'])
-  el.dispatchEvent(new window.Event('x'));
-  is(log, ['click','x'])
-
-  params.x = function(){log.push('xx')}
-  await tick()
-  el.dispatchEvent(new window.Event('x'));
-  is(log, ['click','x','xx']);
-
-  console.log('make null')
-  params.x = null;
-  await tick()
-  el.dispatchEvent(new window.Event('x'));
-  is(log, ['click','x','xx']);
-})
-
-test('onevt: this context', e => {
-  let el = h`<div :onx="function(){log.push(this)}"></div>`
-  let state = sprae(el, {log: []})
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, [el])
-})
-
-test('on: this in chains refers to el', () => {
-  let el = h`<div :ona..onb="function(e){x=this; log.push(1); return () => log.push(2)}"></div>`
-  let state = sprae(el, {log:[], x:null})
-  el.dispatchEvent(new window.Event('a'));
-  is(state.log, [1])
-})
-
-test('on: multiple events', e => {
-  let el = h`<div :onscroll:onclick:onx="e=>log.push(e.type)"></div>`
-  let state = sprae(el, {log:[]})
-
-  el.dispatchEvent(new window.Event('click'));
-  is(state.log, ['click'])
-  el.dispatchEvent(new window.Event('scroll'));
-  is(state.log, ['click','scroll'])
-  el.dispatchEvent(new window.Event('x'));
-  is(state.log, ['click','scroll','x'])
-})
-
-test('on: in-out events', e => {
-  // let el = document.createElement('x');
-  // el.setAttribute(':onmousedown..onmouseup', 'e=>(log.push(e.type),e=>log.push(e.type))')
-  let el = h`<x :onmousedown..onmouseup="(e) => { x=this; log.push(e.type); return e=>log.push(e.type); }"></x>`
-
-  let state = sprae(el, {log:[],x:null})
-  el.dispatchEvent(new window.Event('mousedown'));
-  is(state.x, el);
-  is(state.log, ['mousedown'])
-  el.dispatchEvent(new window.Event('mouseup'));
-  is(state.log, ['mousedown','mouseup'])
-})
-
-test('on: in-out side-effects', e => {
-  let log = []
-
-  // 1. skip in event and do directly out
-  let el = h`<x :onin..onout="io"></x>`
-  sprae(el, { io(e) {
-    log.push(e.type)
-    return (e) => (log.push(e.type), [1,2,3])
-  } })
-
-  el.dispatchEvent(new window.Event('out'));
-  is(log, [])
-
-  // 2. Some nonsensical return is fine
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out'], 'out triggers right')
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out'])
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in','out','in'])
-  el.dispatchEvent(new window.Event('in'));
-  is(log, ['in','out','in', 'in'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','in','out','out'])
-  el.dispatchEvent(new window.Event('out'));
-  is(log, ['in','out','in','in','out','out'])
-})
-
-test('on: chain of events', e => {
-  let el = h`<div :onmousedown..onmousemove..onmouseup="e=>(log.push(e.type),e=>(log.push(e.type),e=>log.push(e.type)))"></div>`
-  let state = sprae(el, {log:[]})
-
-  el.dispatchEvent(new window.Event('mousedown'));
-  is(state.log, ['mousedown'])
-  el.dispatchEvent(new window.Event('mousemove'));
-  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', async 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')
-  el.dispatchEvent(new window.Event('x'));
-  is(log, ['x1'])
-  console.log('update fn')
-  state.fn = () => (log.push('x2'), () => log.push('y2'))
-  await tick()
-  is(log, ['x1'])
-  // console.log('xx')
-  // NOTE: state update registers new chain listener before finishing prev chain
-  // el.dispatchEvent(new window.Event('x'));
-  // el.dispatchEvent(new window.Event('x'));
-  // is(log, [1])
-  console.log('emit y, y')
-  el.dispatchEvent(new window.Event('y'));
-  el.dispatchEvent(new window.Event('y'));
-  is(log, ['x1', 'y1'])
-  console.log('emit x')
-  el.dispatchEvent(new window.Event('x'));
-  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','y1','x2','y2'])
-})
-
-test('on: once', e => {
-  // NOTE: if callback updates it's still rebound
-  let el = h`<x :onx.once="(e=>x&&log.push(this))" ></x>`
-  let log = []
-  let state = sprae(el, {log, x:1})
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-  state.x = 2
-  el.dispatchEvent(new window.Event('x'));
-  el.dispatchEvent(new window.Event('x'));
-  is(log, [el])
-})
-
-test('on: capture, stop, prevent', e => {
-  let el = h`<x :onx.capture="e=>log.push(1)"><y :onx="e=>log.push(2)"></y></x>`
-  let state = sprae(el, {log:[]})
-  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1,2])
-
-  let el2 = h`<x :onx="e=>log.push(1)"><y :onx.stop="e=>log.push(2)"></y></x>`
-  let state2 = sprae(el2, {log:[]})
-  el2.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state2.log, [2])
-})
-
-test('on: window, self', e => {
-  let el = h`<x :onx.self="e=>log.push(1)"><y :onx.window="e=>log.push(2)"></y></x>`
-  let state = sprae(el, {log:[]})
-  el.firstChild.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [])
-  el.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1])
-  window.dispatchEvent(new window.Event('x', {bubbles:true}));
-  is(state.log, [1,2])
-})
-
-test('on: keys', e => {
-  let el = h`<x :onkeydown.enter="e=>log.push(1)"></x>`
-  let state = {log:[]}
-  sprae(el, state)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[1])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  is(state.log,[1,1])
-})
-
-test('on: key combinations', e => {
-  let el = h`<x :onkeydown.ctrl-enter="e=>log.push(1)"></x>`
-  let state = {log:[]}
-  sprae(el, state)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: '' }));
-  is(state.log,[])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  is(state.log,[1])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter' }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', ctrlKey: true }));
-  is(state.log,[1,1])
-  let el2 = h`<x :onkeydown.ctrl-alt-enter="e=>log.push(1)"></x>`
-})
-
-test('on: keys with prevent', e => {
-  let el = h`<y :onkeydown="e=>log.push(e.key)"><x :ref="x" :onkeydown.enter.stop></x></y>`
-  let state = sprae(el, {log:[]})
-  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  console.log('enter')
-  state.x.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-  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('on: debounce 0', async e => {
-  let el = h`<x :onkeydown.debounce-0="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('on: throttle', async e => {
-  let el = h`<x :onkeydown.throttle-10="e=>log.push(e.key)"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x'])
-  await time(5)
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x'])
-  await time(10)
-  is(state.log, ['x', 'x'])
-  await time(10)
-  is(state.log, ['x', 'x'])
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, ['x', 'x', 'x'])
-})
-
-test('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:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  is(state.log, [])
-  await time()
-  is(state.log, ['x', 'x'])
-})
-
-test('on: modifiers chain', async e => {
-  let el = h`<x :onkeydown.letter..onkeyup.letter="e=>(log.push(e.key),(e)=>log.push(e.key))"></x>`
-  let state = sprae(el, {log:[]})
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'x', bubbles: true }));
-  el.dispatchEvent(new window.KeyboardEvent('keydown', { key: 'Enter', bubbles: true }));
-  is(state.log,['x'])
-  el.dispatchEvent(new window.KeyboardEvent('keyup', { key: 'Enter', bubbles: true }));
-  is(state.log,['x'])
-  el.dispatchEvent(new window.KeyboardEvent('keyup', { key: 'x', bubbles: true }));
-  is(state.log,['x', 'x'])
-})
-
 test('with: inline', async () => {
   let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
@@ -929,7 +607,7 @@ test.skip('with: reactive transparency', () => {
   is(el.innerHTML, `<y>13</y>`)
 })
 test('with: writes to state', async () => {
-  let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
+  let a = h`<x :with="{a:1}"><y :onx="e=>a++" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))