sprae 9.1.1 → 10.0.0

package/dist/sprae.min.js

@@ -1 +1 @@
-var e,t,r,l,a,s=Object.defineProperty,n=Symbol.dispose||=Symbol("dispose"),o={},c=new WeakMap;function i(e,r){if(!e.children)return;if(c.has(e)){const[t,l]=c.get(e);for(let e in r)t[e]=r[e];a((()=>{for(let e of l)e()}))}const l=r||{},s=[],i=(e,r=e.parentNode)=>{if(e.attributes)for(let a=0;a<e.attributes.length;){let i=e.attributes[a];if(":"===i.name[0]){e.removeAttribute(i.name);let a=i.name.slice(1).split(":");for(let r of a){let a=o[r]||o.default,c=a(e,(a.parse||d)(i.value,d),l,r);c&&(c[n]=t(c),s.push(c))}if(c.has(e))return;if(e.parentNode!==r)return!1}else a++}for(let t,r=0;t=e.children[r];r++)!1===i(t,e)&&r--};return i(e),c.has(e)||(c.set(e,[l,s]),e.classList?.add("∴"),e[n]=()=>{for(;s.length;)s.pop()[n]();e.classList.remove("∴"),c.delete(e);let t=e.getElementsByClassName("∴");for(;t.length;)t[0][n]?.()}),l}var u,p,f={},d=(e,t,r)=>{if(r=f[e=e.trim()])return r;try{r=u(e)}catch(r){throw Object.assign(r,{message:`∴ ${r.message}\n\n${t}${e?`="${e}"\n\n`:""}`,expr:e})}return r.expr=e,f[e]=r};i.use=s=>{s.signal&&(e=s.signal,t=s.effect,l=s.computed,r=s.batch||(e=>e()),a=s.untracked||r),s.swap&&(p=s.swap),s.compile&&(u=s.compile)};var v,y={};((e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0})})(y,{batch:()=>g,computed:()=>b,effect:()=>h,signal:()=>m,untracked:()=>k});var m=(e,t,r=new Set)=>((t={get value(){return v?.deps.push(r.add(v)),e},set value(t){if(t!==e){e=t;for(let e of r)e(t)}},peek:()=>e}).toJSON=t.then=t.toString=t.valueOf=()=>t.value,t),h=(e,t,r,l)=>(l=(r=l=>{t?.call?.(),l=v,v=r;try{t=e()}finally{v=l}}).deps=[],r(),e=>{for(t?.call?.();e=l.pop();)e.delete(r)}),b=(e,t=m(),r,l)=>((r={get value(){return l||=h((()=>t.value=e())),t.value},peek:t.peek}).toJSON=r.then=r.toString=r.valueOf=()=>r.value,r),g=e=>e(),k=(e,t,r)=>(t=v,v=null,r=e(),v=t,r),w=(e,t,r,l=null,{remove:a,insert:s}=w)=>{let n,o,c,i=0,u=new Set(r);for(;c=t[i++];)u.has(c)?n=n||c:a(c,e);for(n=n||l,i=0;c=r[i++];)o=n?n.nextSibling:l,n===c?n=o:(r[i]===o&&(n=o),s(c,n,e));return r};w.insert=(e,t,r)=>r.insertBefore(e,t),w.remove=(e,t)=>t.removeChild(e);var O=w,A=Symbol(":each"),S={},N=Symbol("key");(o.each=(e,[t,r,l],a)=>{const s=e[A]=document.createTextNode(""),n=e.parentNode;e.replaceWith(s);const o=new WeakMap,c=new WeakMap;let u=[];const{insert:f,replace:d}=p,v={remove:e=>{e.remove(),e[Symbol.dispose]?.(),e[N]&&(o.delete(e[N]),c.delete(e[N]))},insert:f,replace:d};return()=>{let f=l(a)?.valueOf(),d=[];"number"==typeof f&&(f=Array.from({length:f},((e,t)=>t)));const y=new WeakMap;for(let l in f){let s,n=f[l],u=n?.key??n?.id??n??l;u=Object(u)!==u?S[u]||=Object(u):n,null==u||y.has(u)||e.content?s=(e.content||e).cloneNode(!0):(y.set(u,1),(s=o.get(u)||(o.set(u,e.cloneNode(!0)),o.get(u)))[N]=u);let p=c.get(u)||(c.set(u,Object.create(a,{[r]:{value:l}})),c.get(u));p[t]=n,i(s,p),11===s.nodeType?d.push(...s.childNodes):d.push(s)}p(n,u,u=d,s,v)}}).parse=(e,t)=>{let[r,l]=e.split(/\s+in\s+/),[a,s="$"]=r.split(/\s*,\s*/);return[a,s,t(l)]};var x=Symbol("if");o.if=(e,t,r)=>{let l,a,s,n=e.parentNode,o=e.nextElementSibling,c=document.createTextNode(""),u=[];return e.after(c),e.content?(l=u,e.remove(),a=[...e.content.childNodes]):a=l=[e],o?.hasAttribute(":else")?(o.removeAttribute(":else"),o.hasAttribute(":if")?s=u:(o.remove(),s=o.content?[...o.content.childNodes]:[o])):s=u,()=>{const f=t(r)?.valueOf()?a:e[x]?u:s;if(o&&(o[x]=f===a),l!=f){l[0]?.[A]&&(l=[l[0][A]]),p(n,l,l=f,c);for(let e of l)i(e,r)}}},o.default=(e,t,r,l)=>{let a=l.startsWith("on")&&l.slice(2);if(a){let l;return()=>(l?.(),l=W(e,a,t(r)?.valueOf()))}return()=>{let a=t(r)?.valueOf();if(l)T(e,l,D(a,r));else for(let t in a)T(e,j(t),D(a[t],r))}};var W=(e,t,r=(()=>{}))=>{const l={evt:"",target:e,test:()=>!0};l.evt=t.replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(l.test=C[t]?.(l,...r.split("-"))||l.test,"")));const{evt:a,target:s,test:n,defer:o,stop:c,prevent:i,...u}=l;o&&(r=o(r));const p=e=>n(e)&&(c&&e.stopPropagation(),i&&e.preventDefault(),r.call(s,e));return s.addEventListener(a,p,u),()=>s.removeEventListener(a,p,u)},C={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=>$(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>L(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=>E.ctrl(e)&&t.every((t=>E[t]?E[t](e):e.key===t)),shift:(e,...t)=>e=>E.shift(e)&&t.every((t=>E[t]?E[t](e):e.key===t)),alt:(e,...t)=>e=>E.alt(e)&&t.every((t=>E[t]?E[t](e):e.key===t)),meta:(e,...t)=>e=>E.meta(e)&&t.every((t=>E[t]?E[t](e):e.key===t)),arrow:()=>E.arrow,enter:()=>E.enter,escape:()=>E.escape,tab:()=>E.tab,space:()=>E.space,backspace:()=>E.backspace,delete:()=>E.delete,digit:()=>E.digit,letter:()=>E.letter,character:()=>E.character},E={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)},T=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},$=(e,t)=>{let r,l,a=s=>{r=!0,setTimeout((()=>{if(r=!1,l)return l=!1,a(s),e(s)}),t)};return t=>r?l=!0:(a(t),e(t))},L=(e,t)=>{let r;return l=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(l)}),t)}},j=e=>e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),D=(e,t)=>e?.replace?e.replace(/\$<([^>]+)>/g,((e,r)=>t[r]?.valueOf?.()??"")):e;(o.ref=(e,t,r)=>{let l;return()=>{l&&delete r[l],r[l=D(t,r)]=e}}).parse=e=>e,o.scope=(e,t,r)=>()=>{i(e,{...r,...t(r)?.valueOf?.()||{}})},o.html=(e,t,r)=>{let l=t(r);if(!l)return;let a=(l.content||l).cloneNode(!0);e.replaceChildren(a),i(e,r)},o.text=(e,t,r)=>(e.content&&e.replaceWith(e=document.createTextNode("")),()=>{let l=t(r)?.valueOf();e.textContent=null==l?"":l}),o.class=(e,t,r)=>{let l=new Set;return()=>{let a=t(r),s=new Set;a&&("string"==typeof a?D(a?.valueOf?.(),r).split(" ").map((e=>s.add(e))):Array.isArray(a)?a.map((e=>(e=D(e?.valueOf?.(),r))&&s.add(e))):Object.entries(a).map((([e,t])=>t?.valueOf?.()&&s.add(e))));for(let t of l)s.has(t)?s.delete(t):e.classList.remove(t);for(let t of l=s)e.classList.add(t)}},o.style=(e,t,r)=>{let l=e.getAttribute("style")||"";return l.endsWith(";")||(l+="; "),()=>{let a=t(r)?.valueOf();if("string"==typeof a)e.setAttribute("style",l+D(a,r));else{e.setAttribute("style",l);for(let t in a)e.style.setProperty(t,D(a[t],r))}}},o.value=(e,t,r)=>{let l,a,s="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(l=e.selectionStart,a=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),l&&e.setSelectionRange(l,a)):"checkbox"===e.type?t=>(e.checked=t,T(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()=>s(t(r)?.valueOf?.())},o.fx=(e,t,r)=>()=>t(r),i.use(y),i.use({compile:e=>i.constructor("__scope",`with (__scope) { return ${e} };`)}),i.use({swap:O});var M=i;export{r as batch,u as compile,l as computed,M as default,o as directive,t as effect,e as signal,p as swap,a as untracked};
+var e,t,r,l,n,s=Object.defineProperty,a=Symbol("signals"),o=Symbol("length");function i(t,r){if(!t)return t;if(t[a]&&!r)return t;if(Array.isArray(t))return function(t){let r;if(t[a])return t;let l=e(t.length),n=Array(t.length).fill(null);const s=new Proxy(n,{get:(s,c)=>c===o?l:c===a?n:"length"===c?Array.prototype[r]?l.peek():l.value:(r=c,n[c]?n[c].valueOf():c<n.length?(n[c]=e(i(t[c]))).value:void 0),set(e,t,r){if("length"===t){for(let e=r,t=n.length;e<t;e++)delete s[e];return l.value=n.length=r,!0}return c(n,t,r),t>=l.peek()&&(l.value=n.length=Number(t)+1),!0},deleteProperty:(e,t)=>(u(n,t),!0)});return s}(t);if(t.constructor!==Object)return t;let l=e(Object.values(t).length);r||={};const s=new Proxy(r,{get:(e,t)=>t===o?l:t===a?r:r[t]?.valueOf(),set:(e,t,n,s)=>(s=r[t],c(r,t,n),s||++l.value),deleteProperty:(e,t)=>u(r,t)&&l.value--,ownKeys:()=>(l.value,Reflect.ownKeys(r))});if(t[a])for(let e in t)r[e]=t[a][e];else for(let e in t){const l=Object.getOwnPropertyDescriptor(t,e);l?.get?(r[e]=n(l.get.bind(s)))._set=l.set?.bind(s):(r[e]=null,c(r,e,t[e]))}return s}function c(t,n,s){let a=t[n];if(a)if(s===a.peek());else if(a._set)a._set(s);else if(Array.isArray(s)&&Array.isArray(a.peek())){const e=a.peek();e[o]?r((()=>{l((()=>{let t=0,r=s.length;for(;t<r;t++)e[t]=s[t];e.length=r}))})):a.value=s}else a.value=i(s);else t[n]=a=s?.peek?s:e(i(s))}function u(e,t){const r=e[t];if(r){const l=r[Symbol.dispose];return l&&delete r[Symbol.dispose],delete e[t],l?.(),!0}}var f=Symbol.dispose||=Symbol("dispose"),p={},d=new WeakMap;function y(e,t){let r;e?.[Symbol.iterator]||(e=[e]);for(let l of e)l?.children&&(d.has(l)?Object.assign(d.get(l),t):(r||=i(t||{}),v(l,r),d.has(l)||d.set(l,r)));return r}function v(e,t,r=e.parentNode,l=[]){if(e.attributes)for(let n=0;n<e.attributes.length;){let s=e.attributes[n];if(":"===s.name[0]){e.removeAttribute(s.name);let n=s.name.slice(1).split(":");for(let r of n){let n=p[r]||p.default,a=(n.parse||g)(s.value,g),o=n(e,a,t,r);o&&l.push(o)}if(d.has(e))return;if(e.parentNode!==r)return}else n++}for(let r of[...e.children])v(r,t,e);e.classList?.add("∴"),e[f]=()=>{for(;l.length;)l.pop()();e.classList.remove("∴"),d.delete(e);let t=e.getElementsByClassName("∴");for(;t.length;)t[0][f]?.()}}var h,m={},g=(e,t,r)=>{if(r=m[e=e.trim()])return r;try{r=h(e)}catch(r){throw Object.assign(r,{message:`∴ ${r.message}\n\n${t}${e?`="${e}"\n\n`:""}`,expr:e})}return m[e]=r};y.use=s=>{s.signal&&function(s){e=s.signal,t=s.effect,n=s.computed,l=s.batch||(e=>e()),r=s.untracked||l}(s),s.compile&&(h=s.compile)};var b,k,A={};((e,t)=>{for(var r in t)s(e,r,{get:t[r],enumerable:!0})})(A,{batch:()=>N,computed:()=>O,effect:()=>w,signal:()=>S,untracked:()=>x});var S=(e,t,r=new Set)=>((t={get value(){return b?.deps.push(r.add(b)),e},set value(t){if(t!==e){e=t;for(let e of r)k?k.add(e):e()}},peek:()=>e}).toJSON=t.then=t.toString=t.valueOf=()=>t.value,t),w=(e,t,r,l)=>(l=(r=l=>{t?.call?.(),l=b,b=r;try{t=e()}finally{b=l}}).deps=[],r(),e=>{for(t?.call?.();e=l.pop();)e.delete(r)}),O=(e,t=S(),r,l)=>((r={get value(){return l||=w((()=>t.value=e())),t.value},peek:t.peek}).toJSON=r.then=r.toString=r.valueOf=()=>r.value,r),N=e=>{let t=k;t||(k=new Set);try{e()}finally{if(!t){t=k,k=null;for(const e of t)e()}}},x=(e,t,r)=>(t=b,b=null,r=e(),b=t,r),j=(e,t,r,l=null,{remove:n,insert:s}=j)=>{let a,o,i,c=0,u=new Set(r);for(;i=t[c++];)u.has(i)?a=a||i:n(i,e);for(a=a||l,c=0;i=r[c++];)o=a?a.nextSibling:l,a===i?a=o:(r[c]===o&&(a=o),s(i,a,e));return r};j.insert=(e,t,r)=>r.insertBefore(e,t),j.remove=(e,t)=>t.removeChild(e);var C=j,E=Symbol(":each");p.each=(e,[l,s,i],c)=>{const u=e[E]=document.createTextNode("");e.replaceWith(u);let f,p,d=0;const v=n((()=>{p=null;let e=i(c);return"number"==typeof e&&(e=Array.from({length:e},((e,t)=>t+1))),e?.constructor===Object&&(p=Object.keys(e),e=Object.values(e)),e||[]})),h=()=>{r((()=>{let t=0,r=v.value,n=r.length;if(f&&!f[o]){for(let e of f[a]||[])e[Symbol.dispose]();f=null,d=0}if(n<d)f.length=n;else{if(f)for(;t<d;t++)f[t]=r[t];else f=r;for(;t<n;t++){f[t]=r[t];let n=t,o=Object.create(c,{[l]:{get:()=>f[n]},[s]:{value:p?p[n]:n}}),i=(e.content||e).cloneNode(!0),d=e.content?[...i.childNodes]:[i];u.before(i),y(d,o),((f[a]||=[])[t]||={})[Symbol.dispose]=()=>{for(let e of d)e[Symbol.dispose](),e.remove()}}}d=n}))};let m=0;return t((()=>{f||v.value[o]?.value,m?m++:(h(),queueMicrotask((()=>(m&&h(),m=0))))}))},p.each.parse=(e,t)=>{let[r,l]=e.split(/\s+in\s+/),[n,s="$"]=r.split(/\s*,\s*/);return[n,s,t(l)]};var $=Symbol("if");p.if=(e,r,l)=>{let n,s,a,o=e.parentNode,i=e.nextElementSibling,c=document.createTextNode(""),u=[];return e.after(c),e.content?(n=u,e.remove(),s=[...e.content.childNodes]):s=n=[e],i?.hasAttribute(":else")?(i.removeAttribute(":else"),i.hasAttribute(":if")?a=u:(i.remove(),a=i.content?[...i.content.childNodes]:[i])):a=u,t((()=>{const t=r(l)?s:e[$]?u:a;if(i&&(i[$]=t===s),n!=t){n[0]?.[E]&&(n=[n[0][E]]);for(let e of n)e.remove();n=t;for(let e of n)o.insertBefore(e,c),y(e,l)}}))},p.default=(e,r,l,n)=>{let s,a=n.startsWith("on")&&n.slice(2);return t(a?()=>(s?.(),s=P(e,a,r(l))):()=>{let t=r(l);if(n)L(e,n,B(t,l));else for(let r in t)L(e,K(r),B(t[r],l))})};var P=(e,t,r=(()=>{}))=>{const l={evt:"",target:e,test:()=>!0};l.evt=t.replace(/\.(\w+)?-?([-\w]+)?/g,((e,t,r="")=>(l.test=T[t]?.(l,...r.split("-"))||l.test,"")));const{evt:n,target:s,test:a,defer:o,stop:i,prevent:c,...u}=l;o&&(r=o(r));const f=e=>a(e)&&(i&&e.stopPropagation(),c&&e.preventDefault(),r.call(s,e));return s.addEventListener(n,f,u),()=>s.removeEventListener(n,f,u)},T={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=>_(e,t?Number(t)||0:108)},debounce(e,t){e.defer=e=>D(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:()=>W.arrow,enter:()=>W.enter,escape:()=>W.escape,tab:()=>W.tab,space:()=>W.space,backspace:()=>W.backspace,delete:()=>W.delete,digit:()=>W.digit,letter:()=>W.letter,character:()=>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)},L=(e,t,r)=>{null==r||!1===r?e.removeAttribute(t):e.setAttribute(t,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},_=(e,t)=>{let r,l,n=s=>{r=!0,setTimeout((()=>{if(r=!1,l)return l=!1,n(s),e(s)}),t)};return t=>r?l=!0:(n(t),e(t))},D=(e,t)=>{let r;return l=>{clearTimeout(r),r=setTimeout((()=>{r=null,e(l)}),t)}},K=e=>e.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(e=>"-"+e.toLowerCase())),B=(e,t)=>e?.replace?e.replace(/\$<([^>]+)>/g,((e,r)=>t[r]??"")):e;p.ref=(e,t,r)=>{Object.defineProperty(r,B(t,r),{value:e})},p.ref.parse=e=>e,p.with=(e,r,l)=>{let n,s;return t((()=>{s=r(l),Object.assign(n||=y(e,i(s,Object.create(l[a]))),s)}))},p.html=(e,t,r)=>{let l=t(r);if(!l)return;let n=(l.content||l).cloneNode(!0);e.replaceChildren(n),y(e,r)},p.text=(e,r,l)=>(e.content&&e.replaceWith(e=document.createTextNode("")),t((()=>{let t=r(l);e.textContent=null==t?"":t}))),p.class=(e,r,l)=>{let n=new Set;return t((()=>{let t=r(l),s=new Set;t&&("string"==typeof t?B(t,l).split(" ").map((e=>s.add(e))):Array.isArray(t)?t.map((e=>(e=B(e,l))&&s.add(e))):Object.entries(t).map((([e,t])=>t&&s.add(e))));for(let t of n)s.has(t)?s.delete(t):e.classList.remove(t);for(let t of n=s)e.classList.add(t)}))},p.style=(e,r,l)=>{let n=e.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),t((()=>{let t=r(l);if("string"==typeof t)e.setAttribute("style",n+B(t,l));else{e.setAttribute("style",n);for(let r in t)e.style.setProperty(r,B(t[r],l))}}))},p.value=(e,r,l)=>{let n,s,a="text"===e.type||""===e.type?t=>e.setAttribute("value",e.value=null==t?"":t):"TEXTAREA"===e.tagName||"text"===e.type||""===e.type?t=>(n=e.selectionStart,s=e.selectionEnd,e.setAttribute("value",e.value=null==t?"":t),n&&e.setSelectionRange(n,s)):"checkbox"===e.type?t=>(e.checked=t,L(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 t((()=>a(r(l))))},p.fx=(e,r,l)=>t((()=>r(l))),y.use(A),y.use({compile:e=>y.constructor("__scope",`with (__scope) { return ${e} };`)}),y.use({swap:C});var M=y;export{M as default};

package/package.json

@@ -1,19 +1,20 @@
 {
   "name": "sprae",
   "description": "DOM microhydration.",
-  "version": "9.1.1",
+  "version": "10.0.0",
   "main": "./sprae.js",
   "module": "./sprae.js",
   "type": "module",
   "files": [
     "core.js",
     "sprae.js",
+    "store.js",
     "signal.js",
     "directive",
     "dist"
   ],
   "dependencies": {
-    "swapdom": "^1.2.1"
+    "ulive": "^1.0.2"
   },
   "devDependencies": {
     "@preact/signals": "^1.1.3",
@@ -22,10 +23,10 @@
     "esbuild": "^0.15.14",
     "hyperf": "^1.6.2",
     "jsdom": "^21.1.0",
-    "subscript": "^8.3.4",
+    "signal-polyfill": "^0.1.1",
+    "subscript": "^8.3.5",
     "terser": "^5.15.1",
     "tst": "^7.1.1",
-    "ulive": "^1.0.1",
     "usignal": "^0.9.0",
     "wait-please": "^3.1.0"
   },

package/readme.md

@@ -2,8 +2,7 @@
 
 > DOM tree microhydration
 
-_Sprae_ is a compact & ergonomic progressive enhancement framework.<br/>
-It provides `:`-attributes for inline markup logic with signals reactivity.<br/>
+_Sprae_ is open & minimalistic progressive enhancement framework.<br/>
 Perfect for small-scale websites, static pages, landings, prototypes, or lightweight UI.<br/>
 
 
@@ -15,17 +14,17 @@ Perfect for small-scale websites, static pages, landings, prototypes, or lightwe
 </div>
 
 <script type="module">
-  import sprae, { signal } from 'sprae'
+  import sprae from 'sprae'
 
-  const name = signal('Kitty')
-  sprae(container, { user: { name } }) // init
+  // init
+  const state = sprae(container, { user: { name: 'Kitty' } })
 
-  name.value = 'Dolly' // update
+  // update
+  state.user.name = 'Dolly'
 </script>
 ```
 
-Sprae evaluates `:`-directives and evaporates them, attaching state to html.
-
+Sprae evaluates `:`-directives and evaporates them, returning reactive state.
 
 ## Directives
 
@@ -43,21 +42,17 @@ Control flow of elements.
 ```
 
 
-#### `:each="item, index in items"`
+#### `:each="item, index? in items"`
 
-Multiply element. Item is identified either by `item.id`, `item.key` or `item` itself.
+Multiply element.
 
 ```html
 <ul><li :each="item in items" :text="item"/></ul>
 
 <!-- cases -->
-<li :each="item, idx in list" />
-<li :each="val, key in obj" />
-<li :each="idx in number" />
-
-<!-- by condition -->
-<li :if="items" :each="item in items" :text="item" />
-<li :else>Empty list</li>
+<li :each="item, idx in array" />
+<li :each="value, key in object" />
+<li :each="count, idx in number" />
 
 <!-- fragment -->
 <template :each="item in items">
@@ -82,22 +77,28 @@ Welcome, <template :text="user.name" />.
 
 #### `:class="value"`
 
-Set class value, extends existing `class`.
+Set class value.
 
 ```html
-<!-- string with interpolation -->
+<!-- appends class -->
+<div class="foo" :class="bar"></div>
+
+<!-- interpolation -->
 <div :class="'foo $<bar>'"></div>
 
-<!-- array/object a-la clsx -->
+<!-- array/object, a-la clsx -->
 <div :class="[foo && 'foo', {bar: bar}]"></div>
 ```
 
 #### `:style="value"`
 
-Set style value, extends existing `style`.
+Set style value.
 
 ```html
-<!-- string with interpolation -->
+<!-- extends style -->
+<div style="foo: bar" :style="'baz: qux'">
+
+<!-- interpolation -->
 <div :style="'foo: $<bar>'"></div>
 
 <!-- object -->
@@ -109,16 +110,19 @@ Set style value, extends existing `style`.
 
 #### `:value="value"`
 
-Set value of an input, textarea or select. Takes handle of `checked` and `selected` attributes.
+Set value of an input, textarea or select.
 
 ```html
 <input :value="value" />
 <textarea :value="value" />
 
-<!-- selects right option -->
+<!-- selects right option & handles selected attr -->
 <select :value="selected">
   <option :each="i in 5" :value="i" :text="i"></option>
 </select>
+
+<!-- handles checked attr -->
+<input type="checkbox" :value="checked" />
 ```
 
 #### `:[prop]="value"`, `:="values"`
@@ -135,33 +139,32 @@ Set any attribute(s).
 <input :="{ id: name, name, type: 'text', value }" />
 ```
 
-#### `:scope="data"`
+#### `:with="values"`
 
-Define or extend data scope for a subtree.
+Define values for a subtree.
 
 ```html
-<x :scope="{ foo: signal('bar') }">
-  <!-- extends parent scope -->
-  <y :scope="{ baz: 'qux' }" :text="foo + baz"></y>
+<x :with="{ foo: signal('bar') }">
+  <y :with="{ baz: 'qux' }" :text="foo + baz"></y>
 </x>
 ```
 
 #### `:ref="name"`
 
-Expose element to current scope with `name`.
+Expose element with `name`.
 
 ```html
 <textarea :ref="text" placeholder="Enter text..."></textarea>
 
 <!-- iterable items -->
 <li :each="item in items" :ref="item">
-  <input :onfocus..onblur=="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
+  <input :onfocus..onblur="e => (item.classList.add('editing'), e => item.classList.remove('editing'))"/>
 </li>
 ```
 
 #### `:fx="code"`
 
-Run effect, not changing any attribute.<br/>Optional cleanup is called in-between effect calls or on disposal.
+Run effect, not changing any attribute.
 
 ```html
 <div :fx="a.value ? foo() : bar()" />
@@ -172,7 +175,7 @@ Run effect, not changing any attribute.<br/>Optional cleanup is called in-betwee
 
 #### `:on[event]="handler"`
 
-Attach event(s) listener with possible modifiers.
+Attach event(s) listener with optional modifiers.
 
 ```html
 <input type="checkbox" :onchange="e => isChecked = e.target.value">
@@ -183,7 +186,7 @@ Attach event(s) listener with possible modifiers.
 <!-- events sequence -->
 <button :onfocus..onblur="e => ( handleFocus(), e => handleBlur())">
 
-<!-- event modifiers -->
+<!-- modifiers -->
 <button :onclick.throttle-500="handler">Not too often</button>
 ```
 
@@ -211,7 +214,7 @@ Hello, <template :html="user.name">Guest</template>.
 
 <!-- instantiate template -->
 <template :ref="tpl"><span :text="foo"></span></template>
-<div :html="tpl" :scope="{foo:'bar'}">...inserted here...</div>
+<div :html="tpl" :with="{foo:'bar'}">...inserted here...</div>
 ```
 
 #### `:data="values"` 🔌
@@ -267,29 +270,37 @@ Trigger when element is connected / disconnected from DOM.
 
 ## Signals
 
-Sprae uses signals for reactivity (see [_sprae/signal.js_](./signal.js)). It can be switched to any alternative preact-flavored signals for compatibility or performance:
+Sprae can take signal values. Signals provider can be switched to any preact-flavored implementation:
 
 ```js
-import sprae, { signal, computed, effect, batch, untracked } from 'sprae';
+import sprae from 'sprae';
+import { signal, computed, effect, batch, untracked } from 'sprae/signal';
 import * as signals from '@preact/signals-core';
 
+// switch provider to @preact/signals-core
 sprae.use(signals);
 
-sprae(el, { name: signal('Kitty') });
+// use signal as state value
+const name = signal('Kitty')
+sprae(el, { name });
+
+// update state
+name.value = 'Dolly';
 ```
 
 Provider | Size | Feature
 :---|:---|:---
-[`ulive`](https://ghub.io/ulive) | 350b | Minimal implementation, basic performance, good for small states
-[`@webreflection/signal`](https://ghib.io/@webreflection/signal) | 531b | Class-based, better performance, good for small-medium states
-[`usignal`](https://ghib.io/usignal) | 850b | Class-based with optimizations, good for medium states
-[`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states
-[`signal-polyfill`](https://github.com/tc39/proposal-signals) | 2.5kb | Standard signals, slowest performance. Use via [adapter](https://gist.github.com/dy/bbac687464ccf5322ab0e2fd0680dc4d).
+[`ulive`](https://ghub.io/ulive) (default) | 350b | Minimal implementation, basic performance, good for small states.
+[`@webreflection/signal`](https://ghib.io/@webreflection/signal) | 531b | Class-based, better performance, good for small-medium states.
+[`usignal`](https://ghib.io/usignal) | 850b | Class-based with optimizations, good for medium states.
+[`@preact/signals-core`](https://ghub.io/@preact/signals-core) | 1.47kb | Best performance, good for any states, industry standard.
+[`signal-polyfill`](https://github.com/tc39/proposal-signals) | 2.5kb | Proposal signals. Use via [adapter](https://gist.github.com/dy/bbac687464ccf5322ab0e2fd0680dc4d).
 
 
 ## Evaluator
 
-Expressions use _new Function_ as default evaluator, which is fast & compact way, but violates "unsafe-eval" CSP. To make eval stricter & safer, as well as sandbox expressions, an alternative evaluator can be configured, eg. _justin_:
+Expressions use _new Function_ as default evaluator, which is fast & compact way, but violates "unsafe-eval" CSP.
+To make eval stricter & safer, as well as sandbox expressions, an alternative evaluator can be used, eg. _justin_:
 
 ```js
 import sprae from 'sprae'
@@ -298,7 +309,7 @@ import justin from 'subscript/justin'
 sprae.use({compile: justin}) // set up justin as default compiler
 ```
 
-[_Justin_](https://github.com/dy/subscript?tab=readme-ov-file#justin) is minimal JS subset. It avoids "unsafe-eval" CSP and provides sandboxing.
+[_Justin_](https://github.com/dy/subscript?tab=readme-ov-file#justin) is minimal JS subset that avoids "unsafe-eval" CSP and provides sandboxing.
 
 ###### Operators:
 
@@ -313,84 +324,43 @@ sprae.use({compile: justin}) // set up justin as default compiler
 `true false null undefined NaN`
 
 
-## Directives
+## Custom Build
 
-Custom directives can be added as:
-
-```js
-import sprae, { directive } from 'sprae/core.js'
-
-// define custom directive
-directive.id = (el, evaluate, state) => {
-  return () => el.id = evaluate(state)  // return update function
-}
-```
-
-## Custom build
-
-_Sprae_ can be tailored to project needs via `sprae/core` for performance, size or compatibility purposes:
+_Sprae_ can be tailored to project needs via `sprae/core`:
 
 ```js
 // sprae.custom.js
-import sprae, { directive } from 'sprae/core.js'
+import sprae, { directive } from 'sprae/core'
+import { effect } from 'sprae/signal'
 import * as signals from '@preact/signals'
 import compile from 'subscript'
-import diff from 'udomdiff
 
 // include directives
 import 'sprae/directive/if.js'
 import 'sprae/directive/text.js'
 
+// custom directive :id="expression"
+directive.id = (el, evaluate, state) => {
+  effect(() => el.id = evaluate(state))
+}
+
 // configure signals
 sprae.use(signals)
 
 // configure compiler
 sprae.use({ compile })
-
-// configure dom differ
-sprae.use({ swap: (parent, from, to, before) => udomdiff(parent, from, to, node=>node, before) })
-```
-
-<!--
-### DOM diffing
-
-DOM diffing uses [swapdom](https://github.com/dy/swapdom), but can be reconfigured to [list-difference](https://github.com/paldepind/list-difference/), [udomdiff](https://github.com/WebReflection/udomdiff), [domdiff](https://github.com/WebReflection/domdiff), or any other ([benchmark](https://github.com/luwes/js-diff-benchmark)):
-
-```js
-import sprae from 'sprae';
-import domdiff from 'list-difference';
-
-// swap(parentNode, prevEls, newEls, endNode?)
-sprae.use({ swap: domdiff });
 ```
--->
-
 
 <!-- ## Dispose
 
 To destroy state and detach sprae handlers, call `element[Symbol.dispose]()`. -->
 
 
-<!--
-## v9 changes
-
-* No autoinit → use manual init via `import sprae from 'sprae'; sprae(document.body, state)`.
-* No default globals (`console`, `setTimeout` etc) - pass to state if required.
-* ``:class="`abc ${def}`"`` → `:class="'abc $<def>'"` (_justin_)
-* `:with={x:'x'}` -> `:scope={x:'x'}`
-* No reactive store → use signals for reactive values.
-* `:render="tpl"` → `:html="tpl"`
-* `@click="event.target"` → `:onclick="event => event.target"`
-* Async props / events are not supported, pass async functions via state.
-* Directives order matters, eg. `<a :if :each :scope />` !== `<a :scope :each :if />`
-* Only one directive per `<template>`, eg. `<template :each />`, not `<template :if :each/>`
- -->
-
 ## Justification
 
-[Template-parts](https://github.com/dy/template-parts) / [templize](https://github.com/dy/templize) is progressive, but is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`) and tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223).
+[Template-parts](https://github.com/dy/template-parts) is stuck with native HTML quirks ([parsing table](https://github.com/github/template-parts/issues/24), [SVG attributes](https://github.com/github/template-parts/issues/25), [liquid syntax](https://shopify.github.io/liquid/tags/template/#raw) conflict etc). [Alpine](https://github.com/alpinejs/alpine) / [petite-vue](https://github.com/vuejs/petite-vue) / [lucia](https://github.com/aidenyabi/lucia) escape native HTML quirks, but have excessive API (`:`, `x-`, `{}`, `@`, `$`) and tend to [self-encapsulate](https://github.com/alpinejs/alpine/discussions/3223).
 
-_Sprae_ holds open & minimalistic philosophy, combining _`:`-directives_ with _signals_.
+_Sprae_ holds open & minimalistic philosophy, combining _`:`-directives_ with emerging _signals_.
 
 <!--
 |                       | [AlpineJS](https://github.com/alpinejs/alpine)          | [Petite-Vue](https://github.com/vuejs/petite-vue)        | Sprae            |

package/signal.js

@@ -1,43 +1,10 @@
-// ulive minimal signal impl (decoupled from ulive to keep internal dep adjustable easily)
-let current
+// signals adapter - allows switching signals implementation and not depend on core
+export let signal, effect, untracked, batch, computed;
 
-export const signal = (v, s, obs = new Set) => (
-  s = {
-    get value() {
-      current?.deps.push(obs.add(current));
-      return v
-    },
-    set value(val) {
-      if (val === v) return
-      v = val;
-      for (let sub of obs) sub(val); // notify effects
-    },
-    peek() { return v },
-  },
-  s.toJSON = s.then = s.toString = s.valueOf = () => s.value,
-  s
-),
-  effect = (fn, teardown, run, deps) => (
-    run = (prev) => {
-      teardown?.call?.();
-      prev = current, current = run;
-      try { teardown = fn(); } finally { current = prev; }
-    },
-    deps = run.deps = [],
-
-    run(),
-    (dep) => { teardown?.call?.(); while (dep = deps.pop()) dep.delete(run); }
-  ),
-  computed = (fn, s = signal(), c, e) => (
-    c = {
-      get value() {
-        e ||= effect(() => s.value = fn());
-        return s.value
-      },
-      peek: s.peek
-    },
-    c.toJSON = c.then = c.toString = c.valueOf = () => c.value,
-    c
-  ),
-  batch = (fn) => fn(),
-  untracked = (fn, prev, v) => (prev = current, current = null, v = fn(), current = prev, v);
+export function use(s) {
+  signal = s.signal
+  effect = s.effect
+  computed = s.computed
+  batch = s.batch || (fn => fn())
+  untracked = s.untracked || batch
+}

package/sprae.js

@@ -1,13 +1,13 @@
 import sprae from './core.js'
 
-import * as signals from './signal.js'
+import * as signals from 'ulive'
 import swap from 'swapdom/deflate'
 
 // default directives
 import './directive/if.js'
 import './directive/each.js'
 import './directive/ref.js'
-import './directive/scope.js'
+import './directive/with.js'
 import './directive/html.js'
 import './directive/text.js'
 import './directive/class.js'
@@ -26,4 +26,3 @@ sprae.use({ compile: expr => sprae.constructor(`__scope`, `with (__scope) { retu
 sprae.use({ swap })
 
 export default sprae
-export * from './core.js'