sprae 2.0.0 → 2.1.1

package/sprae.min.js

@@ -1 +1 @@
-function t(){throw new Error("Cycle detected")}function e(){if(o>1)o--;else{for(var t,e=!1;void 0!==n;){var i=n;for(n=void 0,s++;void 0!==i;){var r=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&h(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=r}}if(s=0,o--,e)throw t}}var r=void 0,n=void 0,o=0,s=0,f=0;function a(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 u(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function l(t){return new u(t)}function h(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 v(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function c(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function d(t){u.call(this,void 0),this.x=t,this.s=void 0,this.g=f-1,this.f=4}function p(t){return new d(t)}function y(t){var i=t.u;if(t.u=void 0,"function"==typeof i){o++;var n=r;r=void 0;try{i()}catch(e){throw t.f&=-2,t.f|=8,b(t),e}finally{r=n,e()}}}function b(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,y(t)}function m(t){if(r!==this)throw new Error("Out-of-order effect");c(this),r=t,this.f&=-2,8&this.f&&b(this),e()}function g(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function S(t){var e=new g(t);return e.c(),e.d.bind(e)}u.prototype.h=function(){return!0},u.prototype.S=function(t){this.t!==t&&void 0===t.e&&(t.x=this.t,void 0!==this.t&&(this.t.e=t),this.t=t)},u.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},u.prototype.subscribe=function(t){var e=this;return S((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},u.prototype.valueOf=function(){return this.value},u.prototype.toString=function(){return this.value+""},u.prototype.peek=function(){return this.v},Object.defineProperty(u.prototype,"value",{get:function(){var t=a(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){s>100&&t(),this.v=i,this.i++,f++,o++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(d.prototype=new u).h=function(){if(this.f&=-3,1&this.f)return!1;if(32==(36&this.f))return!0;if(this.f&=-5,this.g===f)return!0;if(this.g=f,this.f|=1,this.i>0&&!h(this))return this.f&=-2,!0;var t=r;try{v(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},d.prototype.S=function(t){if(void 0===this.t){this.f|=36;for(var e=this.s;void 0!==e;e=e.n)e.S.S(e)}u.prototype.S.call(this,t)},d.prototype.U=function(t){if(u.prototype.U.call(this,t),void 0===this.t){this.f&=-33;for(var e=this.s;void 0!==e;e=e.n)e.S.U(e)}},d.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},d.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(d.prototype,"value",{get:function(){1&this.f&&t();var e=a(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),g.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},g.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,y(this),v(this),o++;var e=r;return r=this,m.bind(this,e)},g.prototype.N=function(){2&this.f||(this.f|=2,this.o=n,n=this)},g.prototype.d=function(){this.f|=8,1&this.f||b(this)},Symbol.observable||=Symbol("observable");var x=new FinalizationRegistry((t=>t.call?.())),w=t=>t&&t.peek,O=Symbol("signal-struct");function j(t){if(t[O])return t;let e,i;if(!k(t))throw Error("Only array or object states are supported");e={},i={};for(let r in t)i[r]=A(e,r,t[r]);return Object.defineProperty(e,O,{configurable:!1,enumerable:!1,value:!0}),Object.seal(e),e}function A(t,e,i){let r,n=w(i)?i:k(i)?l(j(i)):l((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,f,a,u,h,v;return r&&(f=t=>n.value=t,(s=i)&&(v=(s[Symbol.observable]?.()||s).subscribe?.(f,a,undefined),h=v&&(()=>v.unsubscribe?.())||s.set&&s.call?.(u,f)||(s.then?.((t=>{!u&&f(t)}),a)||(async t=>{try{for await(t of s){if(u)return;f(t)}}catch(t){}})())&&(t=>u=1),x.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:w(i)?t=>n.value=t:k(i)?t=>t?Object.assign(n.value,t):n.value=t:t=>n.value=t,enumerable:!0,configurable:!1}),n}function k(t){return t&&t.constructor===Object}var N=new WeakMap;function $(t,e){if(!t.children)return;if(N.has(t))return N.get(t);e||={};const i=j(e),r=t=>{let e,n;if(t.attributes)for(let r=0;r<t.attributes.length;){let o=t.attributes[r];if(":"===o.name[0]){if(e=E[o.name]||E.default,t.removeAttribute(o.name),n=!1===e(t,o.value,i,o.name.slice(1)))break}else r++}if(!n)for(let e of t.children)r(e)};return r(t),N.set(t,i),i}var E={},U=(t,e,i)=>{e.startsWith("on")&&(e=e.toLowerCase()),t[e]!==i&&(t[e]=i),!1===i||null==i?t.removeAttribute(e):"function"!=typeof i&&t.setAttribute(C(e),!0===i?"":"number"==typeof i||"string"==typeof i?i:"class"===e?(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" "):"style"===e?Object.entries(i).map((([t,e])=>`${t}: ${e}`)).join(";"):"")},W=document.createElement("div"),C=t=>{W.dataset[t]="";let e=W.attributes[0].name.slice(5);return delete W.dataset[t],e},B=(t,e,i,r=null)=>{let n,o,s,f=0,a=i.length,u=e.length,{remove:l,same:h,insert:v,replace:c}=B;for(;f<a&&f<u&&h(e[f],i[f]);)f++;for(;f<a&&f<u&&h(i[a-1],e[u-1]);)r=i[(--u,--a)];if(f==u)for(;f<a;)v(r,i[f++],t);else{for(n=e[f];f<a;)s=i[f++],o=n?n.nextSibling:r,h(n,s)?n=o:f<a&&h(i[f],o)?(c(n,s,t),n=o):v(n,s,t);for(;!h(n,r);)o=n.nextSibling,l(n,t),n=o}return i};B.same=(t,e)=>t==e,B.replace=(t,e,i)=>i.replaceChild(e,t),B.insert=(t,e,i)=>i.insertBefore(e,t),B.remove=(t,e)=>e.removeChild(t);var P=B,L={},M={},T={},F=t=>null===t?M:void 0===t?T:"number"==typeof t||t instanceof Number?L[t]||(L[t]=new Number(t)):"string"==typeof t||t instanceof String?L[t]||(L[t]=new String(t)):"boolean"==typeof t||t instanceof Boolean?L[t]||(L[t]=new Boolean(t)):t;E[":with"]=(t,i,r)=>{let n=R(i,"with",r);const s=p((()=>Object.assign({},r,n(r))));let f=$(t,s.value);S(((t=s.value)=>function(t){if(o>0)return t();o++;try{return t()}finally{e()}}((()=>Object.assign(f,t)))))},E[":if"]=(t,e,i)=>{let r=document.createTextNode(""),n=[R(e,":if",i)],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(R(e,":else :if",i))):(s.remove(),o.push(s),n.push((()=>1)));t.replaceWith(s=r);let f=p((()=>n.findIndex((t=>t(i)))));return S(((t=f.value)=>o[t]!=s&&((s[I]||s).replaceWith(s=o[t]||r),$(s,i)))),!1};var I=Symbol(":each");E[":each"]=(t,e,r)=>{let n=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r={};r.items=i[2].trim();let n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?(r.item=n.replace(e,"").trim(),r.index=o[1].trim()):r.item=n,r}(e);if(!n)return q(new Error,e);const o=R(n.items,":each",r),s=t[I]=document.createTextNode("");t.replaceWith(s);const f=p((()=>{let t=o(r);return"number"==typeof t?Array.from({length:t},((t,e)=>e+1)):t})),a=new WeakMap,u=new WeakMap;let l=[];return S(((e=f.value)=>{e||(e=[]);let o=[],h=[];for(let s of e){let e=F(s),f=u.get(e);if(f||(f=t.cloneNode(!0),u.set(e,f)),o.push(f),!a.has(e)){let t=Object.create(r);t[n.item]=s,n.index&&(t[n.index]=i),a.set(e,t)}h.push(a.get(e))}P(s.parentNode,l,o,s),l=o;for(let t=0;t<o.length;t++)$(o[t],h[t])})),!1},E.default=(t,e,i,r)=>{let n=R(e,":"+r,i);S((()=>{return e=n(i),U(t,r,e);var e}))},E[":aria"]=(t,e,i)=>{let r=R(e,":aria",i);S((()=>(e=>{for(let i in e)U(t,"aria"+i[0].toUpperCase()+i.slice(1),null==e[i]?null:e[i]+"")})(r(i))))},E[":data"]=(t,e,i)=>{let r=R(e,":data",i);const n=p((()=>r(i)));S(((e=n.value)=>{for(let i in e)t.dataset[i]=e[i]}))},E[":on"]=(t,e,i)=>{let r,n=R(e,":on",i),o=p((()=>n(i)));S(((e=o.value)=>{for(let e in r)t.removeEventListener(e,r[e]);r=e;for(let e in r)t.addEventListener(e,r[e])}))},E[":"]=(t,e,i)=>{let r=R(e,":",i);S((()=>(e=>{if(e)for(let i in e)U(t,i,e[i])})(r(i))))},E[":text"]=(t,e,i)=>{let r=R(e,":text",i);S((()=>{return e=r(i),void(t.textContent=null==e?"":e);var e}))},E[":value"]=(t,e,i)=>{let r=R(e,":in",i),[n,o]=(t=>["checkbox"===t.type?()=>t.checked:()=>t.value,"text"===t.type||""===t.type?e=>t.value=null==e?"":e:"checkbox"===t.type?e=>(t.value=e?"on":"",U(t,"checked",e)):"select-one"===t.type?e=>([...t.options].map((t=>t.removeAttribute("selected"))),t.value=e,t.selectedOptions[0]?.setAttribute("selected","")):e=>t.value=e])(t);S((()=>{return e=r(i),U(t,"value",e),void o(e);var e}))};var z={};function R(t,e,i){if(z[t])return z[t];let r,n=/^[\n\s]*if.*\(.*\)/.test(t)||/^(let|const)\s/.test(t)?`(() => { ${t} })()`:t;try{r=new Function(["scope"],`let result; with (scope) { result = ${n} }; return result;`)}catch(r){return q(r,t,e,i)}return z[t]=n=>{let o;try{o=r(n)}catch(r){return q(r,t,e,i)}return o}}function q(t,e,i,r){Object.assign(t,{expression:e}),console.warn(`∴sprae: ${t.message}\n\n${i}=${e?`"${e}"\n\n`:""}`,r),setTimeout((()=>{throw t}),0)}var D=$;export{D as default,E as directives};
+function t(){throw new Error("Cycle detected")}function e(){if(n>1)n--;else{for(var t,e=!1;void 0!==r;){var i=r;for(r=void 0,o++;void 0!==i;){var s=i.o;if(i.o=void 0,i.f&=-3,!(8&i.f)&&l(i))try{i.c()}catch(i){e||(t=i,e=!0)}i=s}}if(o=0,n--,e)throw t}}var i=void 0,r=void 0,n=0,o=0,s=0;function a(t){if(void 0!==i){var e=t.n;if(void 0===e||e.t!==i)return i.s=e={i:0,S:t,p:void 0,n:i.s,t:i,e:void 0,x:void 0,r:e},t.n=e,32&i.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.p&&(e.p.n=e.n,void 0!==e.n&&(e.n.p=e.p),e.p=void 0,e.n=i.s,i.s.p=e,i.s=e),e}}function f(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function u(t){return new f(t)}function l(t){for(var e=t.s;void 0!==e;e=e.n)if(e.S.i!==e.i||!e.S.h()||e.S.i!==e.i)return!0;return!1}function h(t){for(var e=t.s;void 0!==e;e=e.n){var i=e.S.n;void 0!==i&&(e.r=i),e.S.n=e,e.i=-1}}function v(t){for(var e=t.s,i=void 0;void 0!==e;){var r=e.n;-1===e.i?(e.S.U(e),e.n=void 0):(void 0!==i&&(i.p=e),e.p=void 0,e.n=i,i=e),e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=r}t.s=i}function c(t){f.call(this,void 0),this.x=t,this.s=void 0,this.g=s-1,this.f=4}function d(t){return new c(t)}function p(t){var r=t.u;if(t.u=void 0,"function"==typeof r){n++;var o=i;i=void 0;try{r()}catch(e){throw t.f&=-2,t.f|=8,b(t),e}finally{i=o,e()}}}function b(t){for(var e=t.s;void 0!==e;e=e.n)e.S.U(e);t.x=void 0,t.s=void 0,p(t)}function y(t){if(i!==this)throw new Error("Out-of-order effect");v(this),i=t,this.f&=-2,8&this.f&&b(this),e()}function m(t){this.x=t,this.u=void 0,this.s=void 0,this.o=void 0,this.f=32}function g(t){var e=new m(t);return e.c(),e.d.bind(e)}f.prototype.h=function(){return!0},f.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)},f.prototype.U=function(t){var e=t.e,i=t.x;void 0!==e&&(e.x=i,t.e=void 0),void 0!==i&&(i.e=e,t.x=void 0),t===this.t&&(this.t=i)},f.prototype.subscribe=function(t){var e=this;return g((function(){var i=e.value,r=32&this.f;this.f&=-33;try{t(i)}finally{this.f|=r}}))},f.prototype.valueOf=function(){return this.value},f.prototype.toString=function(){return this.value+""},f.prototype.peek=function(){return this.v},Object.defineProperty(f.prototype,"value",{get:function(){var t=a(this);return void 0!==t&&(t.i=this.i),this.v},set:function(i){if(i!==this.v){o>100&&t(),this.v=i,this.i++,s++,n++;try{for(var r=this.t;void 0!==r;r=r.x)r.t.N()}finally{e()}}}}),(c.prototype=new f).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&&!l(this))return this.f&=-2,!0;var t=i;try{h(this),i=this;var e=this.x();(16&this.f||this.v!==e||0===this.i)&&(this.v=e,this.f&=-17,this.i++)}catch(t){this.v=t,this.f|=16,this.i++}return i=t,v(this),this.f&=-2,!0},c.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)}f.prototype.S.call(this,t)},c.prototype.U=function(t){if(f.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)}},c.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},c.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(c.prototype,"value",{get:function(){1&this.f&&t();var e=a(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),m.prototype.c=function(){var t=this.S();try{8&this.f||void 0===this.x||(this.u=this.x())}finally{t()}},m.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,p(this),h(this),n++;var e=i;return i=this,y.bind(this,e)},m.prototype.N=function(){2&this.f||(this.f|=2,this.o=r,r=this)},m.prototype.d=function(){this.f|=8,1&this.f||b(this)},Symbol.observable||=Symbol("observable");var S=new FinalizationRegistry((t=>t.call?.())),x=t=>t&&t.peek,w=Symbol("signal-struct");function A(t){if((e=t)&&e[w])return t;var e;let i,r;if(j(t)){i={},r={};for(let e in t)r[e]=O(i,e,t[e]);return Object.defineProperty(i,w,{configurable:!1,enumerable:!1,value:!0}),Object.seal(i),i}return Array.isArray(t)?t.map((t=>A(t))):t}function O(t,e,i){let r,n=x(i)?i:j(i)||Array.isArray(i)?u(A(i)):u((r=(o=i)&&!!(o[Symbol.observable]||o[Symbol.asyncIterator]||o.call&&o.set||o.subscribe||o.then))?void 0:i);var o,s,a,f,l,h,v;return r&&(a=t=>n.value=t,(s=i)&&(v=(s[Symbol.observable]?.()||s).subscribe?.(a,f,undefined),h=v&&(()=>v.unsubscribe?.())||s.set&&s.call?.(l,a)||(s.then?.((t=>{!l&&a(t)}),f)||(async t=>{try{for await(t of s){if(l)return;a(t)}}catch(t){}})())&&(t=>l=1),S.register(s,h))),Object.defineProperty(t,e,{get:()=>n.value,set:!x(i)&&j(i)?t=>t?Object.assign(n.value,t):n.value=A(t):t=>n.value=A(t),enumerable:!0,configurable:!1}),n}function j(t){return t&&t.constructor===Object}var k=(t,e,i)=>{e.startsWith("on")&&(e=e.toLowerCase()),t[e]!==i&&(t[e]=i),!1===i||null==i?t.removeAttribute(e):"function"!=typeof i&&t.setAttribute($(e),!0===i?"":"number"==typeof i||"string"==typeof i?i:"class"===e?(Array.isArray(i)?i:Object.entries(i).map((([t,e])=>e?t:""))).filter(Boolean).join(" "):"style"===e?Object.entries(i).map((([t,e])=>`${t}: ${e}`)).join(";"):"")},N=document.createElement("div"),$=t=>{N.dataset[t]="";let e=N.attributes[0].name.slice(5);return delete N.dataset[t],e},E=(t,e,i,r=null)=>{let n,o,s,a=0,f=i.length,u=e.length,{remove:l,same:h,insert:v,replace:c}=E;for(;a<f&&a<u&&h(e[a],i[a]);)a++;for(;a<f&&a<u&&h(i[f-1],e[u-1]);)r=i[(--u,--f)];if(a==u)for(;a<f;)v(r,i[a++],t);else{for(n=e[a];a<f;)s=i[a++],o=n?n.nextSibling:r,h(n,s)?n=o:a<f&&h(i[a],o)?(c(n,s,t),n=o):v(n,s,t);for(;!h(n,r);)o=n.nextSibling,l(n,t),n=o}return i};E.same=(t,e)=>t==e,E.replace=(t,e,i)=>i.replaceChild(e,t),E.insert=(t,e,i)=>i.insertBefore(e,t),E.remove=(t,e)=>e.removeChild(t);var U=E,W={},C={},B={},P=(t,e,i,r)=>{let n=I(e,":"+r,i);g((()=>{return e=n(i),k(t,r,e);var e}))},L={},M=Symbol(":each"),T=Symbol(":ref");L[":with"]=(t,i,r)=>{let o=I(i,"with",r);const s=d((()=>Object.assign({},r,o(r))));let a=q(t,s.value);return g(((t=s.value)=>function(t){if(n>0)return t();n++;try{return t()}finally{e()}}((()=>Object.assign(a,t))))),!1},L[":ref"]=(t,e,i)=>t.hasAttribute(":each")?t[T]=e:(q(t,Object.assign(Object.create(i),{[e]:t})),!1),L[":if"]=(t,e,i)=>{let r=document.createTextNode(""),n=[I(e,":if",i)],o=[t],s=t;for(;(s=t.nextElementSibling)&&s.hasAttribute(":else");)s.removeAttribute(":else"),(e=s.getAttribute(":if"))?(s.removeAttribute(":if"),s.remove(),o.push(s),n.push(I(e,":else :if",i))):(s.remove(),o.push(s),n.push((()=>1)));t.replaceWith(s=r);let a=d((()=>n.findIndex((t=>t(i)))));return g(((t=a.value)=>o[t]!=s&&((s[M]||s).replaceWith(s=o[t]||r),q(s,i)))),!1},L[":each"]=(t,e,i)=>{let r=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,i=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!i)return;let r={};r.items=i[2].trim();let n=i[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?(r.item=n.replace(e,"").trim(),r.index=o[1].trim()):r.item=n,r}(e);if(!r)return z(new Error,e);const n=I(r.items,":each",i),o=t[M]=document.createTextNode("");t.replaceWith(o);const s=d((()=>{let t=n(i);return t?"number"==typeof t?Array.from({length:t},((t,e)=>[e,e+1])):t.constructor===Object?Object.entries(t):Array.isArray(t)?t.map(((t,e)=>[e+1,t])):void z(Error("Bad list value"),r.items,":each",t):[]})),a=new WeakMap,f=new WeakMap;let u=[];return g(((e=s.value)=>{let n=[],l=[];for(let[o,s]of e){let e=null===(h=s)?C:void 0===h?B:"number"==typeof h||h instanceof Number?W[h]||(W[h]=new Number(h)):"string"==typeof h||h instanceof String?W[h]||(W[h]=new String(h)):"boolean"==typeof h||h instanceof Boolean?W[h]||(W[h]=new Boolean(h)):h,u=f.get(e);if(u||(u=t.cloneNode(!0),f.set(e,u)),n.push(u),!a.has(e)){let n=Object.create(i);n[r.item]=s,r.index&&(n[r.index]=o),t[T]&&(n[t[T]]=u),a.set(e,n)}l.push(a.get(e))}var h;U(o.parentNode,u,n,o),u=n;for(let t=0;t<n.length;t++)q(n[t],l[t])})),!1},L[":id"]=(t,e,i)=>{let r=I(e,":id",i);g((()=>{return e=r(i),t.id=e||0===e?e:"";var e}))},L[":"]=(t,e,i)=>{let r=I(e,":",i);g((()=>(e=>{if(e)for(let i in e)k(t,i,e[i])})(r(i))))},L[":text"]=(t,e,i)=>{let r=I(e,":text",i);g((()=>{return e=r(i),void(t.textContent=null==e?"":e);var e}))},L[":value"]=(t,e,i)=>{let r=I(e,":in",i),[n,o]=(t=>["checkbox"===t.type?()=>t.checked:()=>t.value,"text"===t.type||""===t.type?e=>t.value=null==e?"":e:"checkbox"===t.type?e=>(t.value=e?"on":"",k(t,"checked",e)):"select-one"===t.type?e=>([...t.options].map((t=>t.removeAttribute("selected"))),t.value=e,t.selectedOptions[0]?.setAttribute("selected","")):e=>t.value=e])(t);g((()=>{return e=r(i),k(t,"value",e),void o(e);var e}))},L[":on"]=(t,e,i)=>{let r,n=I(e,":on",i),o=d((()=>n(i)));g(((e=o.value)=>{for(let e in r)t.removeEventListener(e,r[e]);r=e;for(let e in r)t.addEventListener(e,r[e])}))},L[":data"]=(t,e,i)=>{let r=I(e,":data",i);const n=d((()=>r(i)));g(((e=n.value)=>{for(let i in e)t.dataset[i]=e[i]}))},L[":aria"]=(t,e,i)=>{let r=I(e,":aria",i);g((()=>(e=>{for(let i in e)k(t,"aria"+i[0].toUpperCase()+i.slice(1),null==e[i]?null:e[i]+"")})(r(i))))};var F={};function I(t,e,i){if(F[t])return F[t];let r,n=/^[\n\s]*if.*\(.*\)/.test(t)||/^(let|const)\s/.test(t)?`(() => { ${t} })()`:t;try{r=new Function(`let result; with (arguments[0]) { result = (${n}) }; return result;`)}catch(r){return z(r,t,e,i)}return F[t]=n=>{let o;try{o=r(n)}catch(r){return z(r,t,e,i)}return o}}function z(t,e,i,r){Object.assign(t,{expression:e}),console.warn(`∴sprae: ${t.message}\n\n${i}=${e?`"${e}"\n\n`:""}`,r),setTimeout((()=>{throw t}),0)}var R=new WeakMap;function q(t,e){if(!t.children)return;if(R.has(t))return R.get(t);e||={};const i=A(e),r=t=>{let e,n;if(t.attributes){for(let r in L)if((n=t.attributes[r])&&(e=L[r],t.removeAttribute(r),!1===e(t,n.value,i)))return;for(let e=0;e<t.attributes.length;){let r=t.attributes[e];if(":"===r.name[0]){if(t.removeAttribute(r.name),!1===P(t,r.value,i,r.name.slice(1)))return}else e++}}for(let e of t.children)r(e)};return r(t),R.set(t,i),i}var D=q;export{D as default};

package/src/core.js

@@ -1,4 +1,5 @@
 import signalStruct from 'signal-struct';
+import defaultDirective, { directives } from './directives.js';
 
 // sprae element: apply directives
 const memo = new WeakMap
@@ -12,27 +13,34 @@ export default function sprae(container, values) {
 
   // init directives on element
   const init = (el) => {
-    let dir, stop
+    let dir, attr
+
     if (el.attributes) {
+      // directives must be initialized in order
+      for (let name in directives) {
+        if (attr = el.attributes[name]) {
+          dir = directives[name]
+          el.removeAttribute(name)
+          if (dir(el, attr.value, state) === false) return
+        }
+      }
+
       for (let i = 0; i < el.attributes.length;) {
         let attr = el.attributes[i]
         if (attr.name[0]===':') {
-          dir = directives[attr.name] || directives.default
           el.removeAttribute(attr.name)
-          if (stop = (dir(el, attr.value, state, attr.name.slice(1))===false)) break
+          if (defaultDirective(el, attr.value, state, attr.name.slice(1)) === false) return
         }
         else i++
       }
     }
-    if (!stop) for (let child of el.children) init(child)
+
+    for (let child of el.children) init(child)
   }
+
   init(container)
 
   memo.set(container, state);
 
   return state;
 }
-
-
-// dict of directives
-export const directives = {}

package/src/directives.js

@@ -1,11 +1,24 @@
 // directives & parsing
-import sprae, { directives } from './core.js'
+import sprae from './core.js'
 import { prop, input } from 'element-props'
-// import { effect, computed, batch } from 'usignal'
+// import { effect, computed, batch } from 'usignal/sync'
 import { effect, computed, batch } from '@preact/signals-core'
 import swap from 'swapdom'
 import p from 'primitive-pool'
 
+
+// any-prop directives
+export default (el, expr, state, name) => {
+  let evaluate = parseExpr(expr, ':'+name, state)
+  const update = value => prop(el, name, value)
+  effect(() => update(evaluate(state)))
+}
+
+// reserved directives - order matters!
+export const directives = {}
+
+const _each = Symbol(':each'), _ref = Symbol(':ref')
+
 directives[':with'] = (el, expr, rootState) => {
   let evaluate = parseExpr(expr, 'with', rootState)
 
@@ -13,7 +26,16 @@ directives[':with'] = (el, expr, rootState) => {
   // we bind updating
   const params = computed(() => Object.assign({}, rootState, evaluate(rootState)))
   let state = sprae(el, params.value)
-  effect((values=params.value) => batch(()=>Object.assign(state, values)))
+  effect((values=params.value) => batch(() => Object.assign(state, values)))
+  return false
+}
+
+directives[':ref'] = (el, expr, state) => {
+  // make sure :ref is initialized after :each
+  if (el.hasAttribute(':each')) return el[_ref] = expr;
+
+  sprae(el, Object.assign(Object.create(state), {[expr]: el}))
+  return false
 }
 
 directives[':if'] = (el, expr, state) => {
@@ -38,12 +60,11 @@ directives[':if'] = (el, expr, state) => {
   el.replaceWith(cur = holder)
   let idx = computed(() => clauses.findIndex(f => f(state)))
   // NOTE: it lazily initializes elements on insertion, it's safe to sprae multiple times
-  effect((i=idx.value) => (els[i] != cur && ((cur[_eachHolder]||cur).replaceWith(cur = els[i] || holder), sprae(cur, state))))
+  effect((i=idx.value) => (els[i] != cur && ((cur[_each]||cur).replaceWith(cur = els[i] || holder), sprae(cur, state))))
 
   return false
 }
 
-const _eachHolder = Symbol(':each')
 directives[':each'] = (tpl, expr, state) => {
   let each = parseForExpression(expr);
   if (!each) return exprError(new Error, expr);
@@ -51,14 +72,17 @@ directives[':each'] = (tpl, expr, state) => {
   const getItems = parseExpr(each.items, ':each', state);
 
   // FIXME: make sure no memory leak here
-  // we need holder to be able :if replace it instead of tpl for combined case
-  const holder = tpl[_eachHolder] = document.createTextNode('')
+  // we need :if to be able to replace holder instead of tpl for :if :each case
+  const holder = tpl[_each] = document.createTextNode('')
   tpl.replaceWith(holder)
 
   const items = computed(()=>{
     let list = getItems(state)
-    if (typeof list === 'number') return Array.from({length: list}, (_, i)=>i+1)
-    return list
+    if (!list) return []
+    if (typeof list === 'number') return Array.from({length: list}, (_, i)=>[i, i+1])
+    if (list.constructor === Object) return Object.entries(list)
+    if (Array.isArray(list)) return list.map((item,i) => [i+1, item])
+    exprError(Error('Bad list value'), each.items, ':each', list)
   })
 
   // stores scope per data item
@@ -67,26 +91,27 @@ directives[':each'] = (tpl, expr, state) => {
   const itemEls = new WeakMap()
   let curEls = []
   effect((list=items.value) => {
-    if (!list) list = []
     // collect elements/scopes for items
     let newEls = [], elScopes = []
 
-    for (let item of list) {
-      let key = p(item)
-      let el = itemEls.get(key)
+    for (let [idx, item] of list) {
+      let itemKey = p(item)
+      let el = itemEls.get(itemKey)
       if (!el) {
         el = tpl.cloneNode(true)
-        itemEls.set(key, el)
+        itemEls.set(itemKey, el)
       }
       newEls.push(el)
 
-      if (!scopes.has(key)) {
+      if (!scopes.has(itemKey)) {
         let scope = Object.create(state)
         scope[each.item] = item
-        if (each.index) scope[each.index] = i;
-        scopes.set(key, scope)
+        if (each.index) scope[each.index] = idx;
+        // provide ref, if indicated
+        if (tpl[_ref]) scope[tpl[_ref]] = el
+        scopes.set(itemKey, scope)
       }
-      elScopes.push(scopes.get(key))
+      elScopes.push(scopes.get(itemKey))
     }
 
     // swap is really fast & tiny
@@ -126,39 +151,10 @@ function parseForExpression(expression) {
   return res
 }
 
-
-// common-setter directives
-directives['default'] = (el, expr, state, name) => {
-  let evaluate = parseExpr(expr, ':'+name, state)
-  const update = value => prop(el, name, value)
-  effect(() => update(evaluate(state)))
-}
-
-directives[':aria'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':aria', state)
-  const update = (value) => {
-    for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key] == null ? null : value[key] + '');
-  }
-  effect(() => update(evaluate(state)))
-}
-
-directives[':data'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':data', state)
-  const value = computed(() => evaluate(state))
-  effect((v=value.value) => {
-    for (let key in v) el.dataset[key] = v[key];
-  })
-}
-
-directives[':on'] = (el, expr, state) => {
-  let evaluate = parseExpr(expr, ':on', state)
-  let listeners = computed(() => evaluate(state))
-  let prevListeners
-  effect((values=listeners.value) => {
-    for (let evt in prevListeners) el.removeEventListener(evt, prevListeners[evt]);
-    prevListeners = values;
-    for (let evt in prevListeners) el.addEventListener(evt, prevListeners[evt]);
-  })
+directives[':id'] = (el, expr, state) => {
+  let evaluate = parseExpr(expr, ':id', state)
+  const update = v => el.id = v || v === 0 ? v : ''
+  effect(()=>update(evaluate(state)))
 }
 
 directives[':'] = (el, expr, state) => {
@@ -193,6 +189,34 @@ directives[':value'] = (el, expr, state) => {
   effect(()=>update(evaluate(state)))
 }
 
+directives[':on'] = (el, expr, state) => {
+  let evaluate = parseExpr(expr, ':on', state)
+  let listeners = computed(() => evaluate(state))
+  let prevListeners
+  effect((values=listeners.value) => {
+    for (let evt in prevListeners) el.removeEventListener(evt, prevListeners[evt]);
+    prevListeners = values;
+    for (let evt in prevListeners) el.addEventListener(evt, prevListeners[evt]);
+  })
+}
+
+directives[':data'] = (el, expr, state) => {
+  let evaluate = parseExpr(expr, ':data', state)
+  const value = computed(() => evaluate(state))
+  effect((v=value.value) => {
+    for (let key in v) el.dataset[key] = v[key];
+  })
+}
+
+directives[':aria'] = (el, expr, state) => {
+  let evaluate = parseExpr(expr, ':aria', state)
+  const update = (value) => {
+    for (let key in value) prop(el, 'aria'+key[0].toUpperCase()+key.slice(1), value[key] == null ? null : value[key] + '');
+  }
+  effect(() => update(evaluate(state)))
+}
+
+
 let evaluatorMemo = {}
 
 // borrowed from alpine: https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
@@ -214,7 +238,7 @@ function parseExpr(expression, dir, scope) {
   // guard static-time eval errors
   let evaluate
   try {
-    evaluate = new Function(['scope'], `let result; with (scope) { result = ${rightSideSafeExpression} }; return result;`)
+    evaluate = new Function( `let result; with (arguments[0]) { result = (${rightSideSafeExpression}) }; return result;`)
   } catch ( e ) {
     return exprError(e, expression, dir, scope)
   }

package/src/index.js

@@ -1,8 +1,6 @@
 import sprae from './core.js';
 import './directives.js';
-
 export default sprae;
-export * from './core.js';
 
 // autoinit
 // NOTE: abandoning for now, since requires a separate non-module JS entry, until use-case appears

package/test/index.html

@@ -19,7 +19,7 @@
     "preact": "../node_modules/preact/dist/preact.mjs",
     "preact/hooks": "../node_modules/preact/hooks/dist/hooks.mjs",
     "@preact/signals-core": "../node_modules/@preact/signals-core/dist/signals-core.mjs",
-    "usignal": "../node_modules/usignal/esm/sync.js"
+    "usignal/sync": "../node_modules/usignal/esm/sync.js"
   }
 }
 </script>

package/test/test.js

@@ -1,4 +1,4 @@
-// import { signal } from 'usignal'
+// import { signal } from 'usignal/sync'
 import { signal } from '@preact/signals-core'
 import test, {is, any, throws} from 'tst'
 import {tick, time} from 'wait-please'
@@ -63,7 +63,7 @@ test('common: class', async () => {
   is(el.outerHTML, `<x class="x"></x><y class="y w"></y><z class="b c"></z>`);
 })
 
-test('spread props: base', async () => {
+test('spraed props: base', async () => {
   let el = h`<input :id="0" :="{for:1, title:2, help:3, type:4, placeholder: 5, value: 6}" :value="7"/>`
   let params = sprae(el)
   is(el.outerHTML, `<input id="0" for="1" title="2" help="3" type="4" placeholder="5" value="7">`)
@@ -171,7 +171,7 @@ test('conditions: reactive values', async () => {
 })
 
 
-test('each: base', async () => {
+test('each: array', async () => {
   // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
   let el = h`<p>
     <span :each="a in b" :text="a"></span>
@@ -189,6 +189,24 @@ test('each: base', async () => {
   is(el.innerHTML, '')
 })
 
+test('each: object', async () => {
+  // FIXME: in some conspicuous reason jsdom fails to update text nodes somehow
+  let el = h`<p>
+    <span :each="x,key in b" :text="[key,x]"></span>
+  </p>`
+
+  const params = sprae(el, { b: null })
+
+  is(el.innerHTML, '')
+  console.log('set 1,2')
+  params.b = { x:1, y:2 }
+  is(el.innerHTML, '<span>x,1</span><span>y,2</span>')
+  params.b = []
+  is(el.innerHTML, '')
+  params.b = null
+  is(el.innerHTML, '')
+})
+
 test('each: loop within loop', async () => {
   let el = h`<p>
     <x :each="b in c"><y :each="a in b" :text="a"></y></x>
@@ -197,7 +215,6 @@ test('each: loop within loop', async () => {
   const params = sprae(el, { c: [[1,2], [3,4]] })
 
   is(el.innerHTML, '<x><y>1</y><y>2</y></x><x><y>3</y><y>4</y></x>')
-  // console.log('set 1,2')
   params.c = [[5,6], [3,4]]
   is(el.innerHTML, '<x><y>5</y><y>6</y></x><x><y>3</y><y>4</y></x>')
   // params.c[1] = [7,8]
@@ -228,6 +245,9 @@ test('each: reactive values', async () => {
 })
 
 test('each: loop with condition', async () => {
+  // NOTE: there doesn't seem to be much value in exactly that
+  // also it creates confusion with :else directive
+  // prohibitin that allows in-order directives init
   let el = h`<p>
   <span :each="a in b" :text="a" :if="c"></span>
   </p>`
@@ -368,7 +388,23 @@ test('with: writes to state', () => {
   is(a.innerHTML, `<y>3</y>`)
 })
 
-test('reactives', async () => {
+test('ref: base', () => {
+  let a = h`<a :ref="a" :init="log.push(a), null" :text="b"></a>`
+  let state = sprae(a, {log:[], b:1})
+  is(state.log[0], a)
+  is(a.outerHTML, `<a>1</a>`)
+  state.b = 2
+  is(a.outerHTML, `<a>2</a>`)
+})
+
+test('ref with each', () => {
+  let a = h`<y><x :ref="x" :each="item in items" :text="log.push(x), item"/></y>`
+  let state = sprae(a, {log: [], items: [1,2]})
+  is(a.innerHTML, `<x>1</x><x>2</x>`)
+  is(state.log, [...a.children])
+})
+
+test('reactive values', async () => {
   let a = new Promise((ok) => setTimeout(() => ok(2), 10))
 
   let el = h`<x :text="a">1</x>`
@@ -377,4 +413,10 @@ test('reactives', async () => {
 
   await time(20)
   is(el.outerHTML, `<x>2</x>`)
+})
+
+test('scope directives must come first', async () => {
+  let a = h`<x :text="y" :with="{y:1}" :ref="x"></x>`
+  sprae(a, {})
+  is(a.outerHTML, `<x>1</x>`)
 })

package/src/directives/each.js

@@ -1,53 +0,0 @@
-import sprae, { directive, exprError, parseExpr } from '../core.js'
-
-directive(':each', (el, expr) => {
-  let each = parseForExpression(expr);
-  if (!each) return exprError(new Error, expr);
-
-  const getItems = parseExpr(each.items);
-
-  const holder = new Text
-  el.replaceWith(holder)
-
-  // FIXME: make sure no memory leak here
-  // FIXME: there can DOM swapper be used instead
-  let els = [];
-  return state => {
-    els.forEach(el => el.remove()); els = [];
-    let items = getItems(state);
-    if (typeof items === 'number') items = Array.from({length: items}, (item, i)=>i+1)
-    items?.forEach((item,i) => {
-      const scope = {...state};
-      scope[each.item] = item;
-      if (each.index) scope[each.index] = i;
-      let itemEl = el.cloneNode(true);
-      els.push(itemEl);
-      holder.before(itemEl);
-      sprae(itemEl, scope);
-    });
-  }
-})
-
-// This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
-function parseForExpression(expression) {
-  let forIteratorRE = /,([^,\}\]]*)(?:,([^,\}\]]*))?$/
-  let stripParensRE = /^\s*\(|\)\s*$/g
-  let forAliasRE = /([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/
-  let inMatch = expression.match(forAliasRE)
-
-  if (!inMatch) return
-
-  let res = {}
-  res.items = inMatch[2].trim()
-  let item = inMatch[1].replace(stripParensRE, '').trim()
-  let iteratorMatch = item.match(forIteratorRE)
-
-  if (iteratorMatch) {
-      res.item = item.replace(forIteratorRE, '').trim()
-      res.index = iteratorMatch[1].trim()
-  } else {
-      res.item = item
-  }
-
-  return res
-}