sprae 8.1.3 → 9.0.1

package/dist/sprae.auto.min.js

@@ -1 +0,0 @@
-(()=>{function t(){throw new Error("Cycle detected")}var e=Symbol.for("preact-signals");function r(){if(l>1)l--;else{for(var t,e=!1;void 0!==a;){var r=a;for(a=void 0,u++;void 0!==r;){var i=r.o;if(r.o=void 0,r.f&=-3,!(8&r.f)&&p(r))try{r.c()}catch(r){e||(t=r,e=!0)}r=i}}if(u=0,l--,e)throw t}}function i(t){if(l>0)return t();l++;try{return t()}finally{r()}}var n=void 0,o=0;function s(t){if(o>0)return t();var e=n;n=void 0,o++;try{return t()}finally{o--,n=e}}var a=void 0,l=0,u=0,f=0;function c(t){if(void 0!==n){var e=t.n;if(void 0===e||e.t!==n)return e={i:0,S:t,p:n.s,n:void 0,t:n,e:void 0,x:void 0,r:e},void 0!==n.s&&(n.s.n=e),n.s=e,t.n=e,32&n.f&&t.S(e),e;if(-1===e.i)return e.i=0,void 0!==e.n&&(e.n.p=e.p,void 0!==e.p&&(e.p.n=e.n),e.p=n.s,e.n=void 0,n.s.n=e,n.s=e),e}}function h(t){this.v=t,this.i=0,this.n=void 0,this.t=void 0}function v(t){return new h(t)}function p(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 d(t){for(var e=t.s;void 0!==e;e=e.n){var r=e.S.n;if(void 0!==r&&(e.r=r),e.S.n=e,e.i=-1,void 0===e.n){t.s=e;break}}}function y(t){for(var e=t.s,r=void 0;void 0!==e;){var i=e.p;-1===e.i?(e.S.U(e),void 0!==i&&(i.n=e.n),void 0!==e.n&&(e.n.p=i)):r=e,e.S.n=e.r,void 0!==e.r&&(e.r=void 0),e=i}t.s=r}function m(t){h.call(this,void 0),this.x=t,this.s=void 0,this.g=f-1,this.f=4}function g(t){var e=t.u;if(t.u=void 0,"function"==typeof e){l++;var i=n;n=void 0;try{e()}catch(e){throw t.f&=-2,t.f|=8,b(t),e}finally{n=i,r()}}}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,g(t)}function A(t){if(n!==this)throw new Error("Out-of-order effect");y(this),n=t,this.f&=-2,8&this.f&&b(this),r()}function w(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 w(t);try{e.c()}catch(t){throw e.d(),t}return e.d.bind(e)}h.prototype.brand=e,h.prototype.h=function(){return!0},h.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)},h.prototype.U=function(t){if(void 0!==this.t){var e=t.e,r=t.x;void 0!==e&&(e.x=r,t.e=void 0),void 0!==r&&(r.e=e,t.x=void 0),t===this.t&&(this.t=r)}},h.prototype.subscribe=function(t){var e=this;return S((function(){var r=e.value,i=32&this.f;this.f&=-33;try{t(r)}finally{this.f|=i}}))},h.prototype.valueOf=function(){return this.value},h.prototype.toString=function(){return this.value+""},h.prototype.toJSON=function(){return this.value},h.prototype.peek=function(){return this.v},Object.defineProperty(h.prototype,"value",{get:function(){var t=c(this);return void 0!==t&&(t.i=this.i),this.v},set:function(e){if(n instanceof m&&function(){throw new Error("Computed cannot have side-effects")}(),e!==this.v){u>100&&t(),this.v=e,this.i++,f++,l++;try{for(var i=this.t;void 0!==i;i=i.x)i.t.N()}finally{r()}}}}),(m.prototype=new h).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&&!p(this))return this.f&=-2,!0;var t=n;try{d(this),n=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 n=t,y(this),this.f&=-2,!0},m.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)}h.prototype.S.call(this,t)},m.prototype.U=function(t){if(void 0!==this.t&&(h.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)}},m.prototype.N=function(){if(!(2&this.f)){this.f|=6;for(var t=this.t;void 0!==t;t=t.x)t.t.N()}},m.prototype.peek=function(){if(this.h()||t(),16&this.f)throw this.v;return this.v},Object.defineProperty(m.prototype,"value",{get:function(){1&this.f&&t();var e=c(this);if(this.h(),void 0!==e&&(e.i=this.i),16&this.f)throw this.v;return this.v}}),w.prototype.c=function(){var t=this.S();try{if(8&this.f)return;if(void 0===this.x)return;var e=this.x();"function"==typeof e&&(this.u=e)}finally{t()}},w.prototype.S=function(){1&this.f&&t(),this.f|=1,this.f&=-9,g(this),d(this),l++;var e=n;return n=this,A.bind(this,e)},w.prototype.N=function(){2&this.f||(this.f|=2,this.o=a,a=this)},w.prototype.d=function(){this.f|=8,1&this.f||b(this)};var k,x=Symbol.dispose||=Symbol("dispose"),O=Symbol("signals"),N=Symbol("length"),j={Array:Array,Object:Object,Number:Number,String:String,Boolean:Boolean,Date:Date,console:console,window:window,document:document,history:history,navigator:navigator,location:location,screen:screen,localStorage:localStorage,sessionStorage:sessionStorage,alert:alert,prompt:prompt,confirm:confirm,fetch:fetch,performance:performance,setTimeout:setTimeout,setInterval:setInterval,requestAnimationFrame:requestAnimationFrame};function E(t,e){if(t?.constructor!==Object&&!Array.isArray(t))return t;if(t[O]&&!e)return t;const r=t[O],n=Array.isArray(t),o=v(n?t.length:Object.values(t).length),a=e?Object.create((e=E(e))[O]):Array.isArray(t)?[]:{},l=a.constructor.prototype;if(e)for(let t in e)e[t];const u=new Proxy(t,{has:()=>!0,get(t,e){if(n){if("length"===e)return l[k]?o.peek():o.value;k=e}if(l[e])return l[e];if(e===O)return a;if(e===N)return o.value;const r=a[e]||f(e);return r?r.value:j[e]},set(t,e,r){if(n&&"length"===e)return i((()=>{for(let t=r,e=a.length;t<e;t++)delete u[t];o.value=a.length=t.length=r})),!0;let l=!1;const c=a[e]||f(e)||(l=!0,v()),h=c.peek();return r===h||(c._set?c._set(r):Array.isArray(r)&&Array.isArray(h)?s((()=>i((()=>{let i=0,n=r.length,o=t[e];for(;i<n;i++)h[i]=o[i]=r[i];h.length=n})))):c.value=E(t[e]=r)),n?e>=o.peek()&&(o.value=a.length=t.length=Number(e)+1):l&&o.value++,!0},deleteProperty(t,e){const r=a[e];if(r){const{_del:t}=r;delete r._del,delete a[e],t?.()}return delete t[e],n||o.value--,!0}});for(let e in t)a[e]=r?.[e]??f(e);function f(e){if(t.hasOwnProperty(e)){const i=Object.getOwnPropertyDescriptor(t,e);return i?.get?((a[e]=(r=i.get.bind(u),new m(r)))._set=i.set?.bind(u),a[e]):a[e]=i.value?.peek?i.value:v(E(i.value))}var r}return u}var _=Promise.prototype.then.bind(Promise.resolve()),$={},P={};$.if=(t,e,r)=>{let i=document.createTextNode(""),n=[L(t,e,":if")],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(L(t,e,":else :if"))):(s.remove(),o.push(s),n.push((()=>1)));t.replaceWith(s=i);const a=S((()=>{let t=n.findIndex((t=>t(r)));o[t]!=s&&((s[T]||s).replaceWith(s=o[t]||i),R(s,r))}));return()=>{for(const t of o)t[x]?.();a()}};var T=Symbol(":each");$.each=(t,e,r)=>{const n=function(t){let e=/,([^,\}\]]*)(?:,([^,\}\]]*))?$/,r=t.match(/([\s\S]*?)\s+(?:in|of)\s+([\s\S]*)/);if(!r)return;let i=r[2].trim(),n=r[1].replace(/^\s*\(|\)\s*$/g,"").trim(),o=n.match(e);return o?[n.replace(e,"").trim(),o[1].trim(),i]:[n,"",i]}(e);if(!n)return q(new Error,t,e,":each");const[o,a,l]=n,u=t[T]=document.createTextNode("");t.replaceWith(u);const f=L(t,l,":each");let c,h;return S((()=>{let n,l,v=f(r),p=c?.length||0;return v?"number"==typeof v?n=Array.from({length:v},((t,e)=>e)):Array.isArray(v)?n=v:"object"==typeof v?(l=Object.keys(v),n=Object.values(v),v[N]):q(Error("Bad items value"),t,e,":each"):n=[],s((()=>i((()=>{if(c&&c[O]){let t=n.length,e=0;for(;e<t;e++)c[e]=n[e];c.length=t}else{for(let t=0;t<p;t++)h[t]?._del();c=n,h=c[O]||[],l&&(p=0)}})))),S((()=>{let e=n.length;p!==e&&s((()=>i((()=>{for(let i=p;i<e;i++){const e=l?.[i]??i,n=t.cloneNode(!0),s=E({[o]:h[i]??c[i],[a]:e},r);u.before(n),R(n,s);const{_del:f}=h[i]||={};h[i]._del=()=>{delete c[i],f?.(),n[x](),n.remove()}}p=e}))))}))})),()=>i((()=>{for(let t of h)t?._del();h.length=0,c.length=0}))},$.with=(t,e,r)=>(R(t,E(L(t,e,":with")(r),r)),t[x]),$.ref=(t,e,r)=>{r[e]=t},P.render=(t,e,r)=>{let i=L(t,e,":render")(r);i||q(new Error("Template not found"),t,e,":render");let n=i.content.cloneNode(!0);return t.replaceChildren(n),R(t,r),t[x]},P.id=(t,e,r)=>{let i=L(t,e,":id");return S((()=>{return e=i(r),t.id=e||0===e?e:"";var e}))},P.class=(t,e,r)=>{let i=L(t,e,":class"),n=t.getAttribute("class");return S((()=>{let e=i(r),o=[n];e&&("string"==typeof e?o.push(e):Array.isArray(e)?o.push(...e):o.push(...Object.entries(e).map((([t,e])=>e?t:"")))),(o=o.filter(Boolean).join(" "))?t.setAttribute("class",o):t.removeAttribute("class")}))},P.style=(t,e,r)=>{let i=L(t,e,":style"),n=t.getAttribute("style")||"";return n.endsWith(";")||(n+="; "),S((()=>{let e=i(r);"string"==typeof e?t.setAttribute("style",n+e):s((()=>{t.setAttribute("style",n);for(let r in e)"symbol"!=typeof e[r]&&t.style.setProperty(r,e[r])}))}))},P.text=(t,e,r)=>{let i=L(t,e,":text");return S((()=>{let e=i(r);t.textContent=null==e?"":e}))},P[""]=(t,e,r)=>{let i=L(t,e,":");if(i)return S((()=>{let e=i(r);for(let r in e)F(t,r.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g,(t=>"-"+t.toLowerCase())),e[r])}))},P.value=(t,e,r)=>{let i,n,o=L(t,e,":value"),s="text"===t.type||""===t.type?e=>t.setAttribute("value",t.value=null==e?"":e):"TEXTAREA"===t.tagName||"text"===t.type||""===t.type?e=>(i=t.selectionStart,n=t.selectionEnd,t.setAttribute("value",t.value=null==e?"":e),i&&t.setSelectionRange(i,n)):"checkbox"===t.type?e=>(t.value=e?"on":"",F(t,"checked",e)):"select-one"===t.type?e=>{for(let e in t.options)e.removeAttribute("selected");t.value=e,t.selectedOptions[0]?.setAttribute("selected","")}:e=>t.value=e;return S((()=>{s(o(r))}))};var C=(t,e,r,i)=>{let n=i.startsWith("on")&&i.slice(2),o=L(t,e,":"+i);if(o){if(n){let e,i=S((()=>{e&&(e(),e=null);let i=o(r);i&&(e=W(t,n,i))}));return()=>(e?.(),i())}return S((()=>{F(t,i,o(r))}))}},W=(t,e,r)=>{if(!r)return;const i={evt:"",target:t,test:()=>!0};i.evt=(e.startsWith("on")?e.slice(2):e).replace(/\.(\w+)?-?([-\w]+)?/g,((t,e,r="")=>(i.test=D[e]?.(i,...r.split("-"))||i.test,"")));const{evt:n,target:o,test:s,defer:a,stop:l,prevent:u,...f}=i;a&&(r=a(r));const c=t=>s(t)&&(l&&t.stopPropagation(),u&&t.preventDefault(),r.call(o,t));return o.addEventListener(n,c,f),()=>o.removeEventListener(n,c,f)},D={prevent(t){t.prevent=!0},stop(t){t.stop=!0},once(t){t.once=!0},passive(t){t.passive=!0},capture(t){t.capture=!0},window(t){t.target=window},document(t){t.target=document},throttle(t,e){t.defer=t=>B(t,e?Number(e)||0:108)},debounce(t,e){t.defer=t=>K(t,e?Number(e)||0:108)},outside:t=>e=>{let r=t.target;return!(r.contains(e.target)||!1===e.target.isConnected||r.offsetWidth<1&&r.offsetHeight<1)},self:t=>e=>e.target===t.target,ctrl:(t,...e)=>t=>U.ctrl(t)&&e.every((e=>U[e]?U[e](t):t.key===e)),shift:(t,...e)=>t=>U.shift(t)&&e.every((e=>U[e]?U[e](t):t.key===e)),alt:(t,...e)=>t=>U.alt(t)&&e.every((e=>U[e]?U[e](t):t.key===e)),meta:(t,...e)=>t=>U.meta(t)&&e.every((e=>U[e]?U[e](t):t.key===e)),arrow:t=>U.arrow,enter:t=>U.enter,escape:t=>U.escape,tab:t=>U.tab,space:t=>U.space,backspace:t=>U.backspace,delete:t=>U.delete,digit:t=>U.digit,letter:t=>U.letter,character:t=>U.character},U={ctrl:t=>t.ctrlKey||"Control"===t.key||"Ctrl"===t.key,shift:t=>t.shiftKey||"Shift"===t.key,alt:t=>t.altKey||"Alt"===t.key,meta:t=>t.metaKey||"Meta"===t.key||"Command"===t.key,arrow:t=>t.key.startsWith("Arrow"),enter:t=>"Enter"===t.key,escape:t=>t.key.startsWith("Esc"),tab:t=>"Tab"===t.key,space:t=>" "===t.key||"Space"===t.key||" "===t.key,backspace:t=>"Backspace"===t.key,delete:t=>"Delete"===t.key,digit:t=>/^\d$/.test(t.key),letter:t=>/^[a-zA-Z]$/.test(t.key),character:t=>/^\S$/.test(t.key)},B=(t,e)=>{let r,i,n=o=>{r=!0,setTimeout((()=>{if(r=!1,i)return i=!1,n(o),t(o)}),e)};return e=>r?i=!0:(n(e),t(e))},K=(t,e)=>{let r;return i=>{clearTimeout(r),r=setTimeout((()=>{r=null,t(i)}),e)}},F=(t,e,r)=>{null==r||!1===r?t.removeAttribute(e):t.setAttribute(e,!0===r?"":"number"==typeof r||"string"==typeof r?r:"")},I={};function L(t,e,r){let i=I[e];if(!i)try{i=I[e]=new Function("__scope",`with (__scope) { let __; return ${e.trim()} };`)}catch(i){return q(i,t,e,r)}return n=>{let o;try{o=i.call(t,n)}catch(i){return q(i,t,e,r)}return o}}function q(t,e,r,i){Object.assign(t,{element:e,expression:r}),console.warn(`∴ ${t.message}\n\n${i}=${r?`"${r}"\n\n`:""}`,e),_((()=>{throw t}),0)}R.globals=j;var M=new WeakMap;function R(t,e){if(!t.children)return;if(M.has(t))return i((()=>Object.assign(M.get(t),e)));const r=E(e||{}),n=[],o=(t,e=t.parentNode)=>{for(let i in $){let o=":"+i;if(t.hasAttribute?.(o)){let s=t.getAttribute(o);if(t.removeAttribute(o),n.push($[i](t,s,r,i)),M.has(t))return;if(t.parentNode!==e)return!1}}if(t.attributes)for(let e=0;e<t.attributes.length;){let i=t.attributes[e],o=i.name[0];if(":"===o||"@"===o){t.removeAttribute(i.name);let e="@"===o?`${i.value.includes("await")?"async":""} event=>{${i.value}}`:i.value,s=i.name.slice(1).split(o);for(let i of s){"@"===o&&(i="on"+i);let s=P[i]||C;n.push(s(t,e,r,i))}}else e++}for(let e,r=0;e=t.children[r];r++)!1===o(e,t)&&r--};return o(t),M.has(t)||(M.set(t,r),n.length&&Object.defineProperty(t,x,{value:()=>{for(;n.length;)n.shift()?.();M.delete(t)}})),r}document.currentScript&&R(document.documentElement)})();

package/src/core.js

@@ -1,82 +0,0 @@
-import createState, { batch, sandbox, _dispose } from './state.signals-proxy.js';
-import defaultDirective, { primary, secondary } from './directives.js';
-
-
-// default root sandbox
-sprae.globals = sandbox
-
-// sprae element: apply directives
-const memo = new WeakMap
-export default function sprae(container, values) {
-  if (!container.children) return // ignore what?
-
-  if (memo.has(container)) return batch(() => Object.assign(memo.get(container), values))
-
-  // take over existing state instead of creating clone
-  const state = createState(values || {});
-  const disposes = []
-
-  // init directives on element
-  const init = (el, parent = el.parentNode) => {
-    // init primary attributes first
-    for (let name in primary) {
-      let attrName = ':' + name
-      if (el.hasAttribute?.(attrName)) {
-        let expr = el.getAttribute(attrName)
-        el.removeAttribute(attrName)
-
-        disposes.push(primary[name](el, expr, state, name))
-
-        // stop if element was spraed by directive or skipped (detached) like in case of :if or :each
-        if (memo.has(el)) return
-        if (el.parentNode !== parent) return false
-      }
-    }
-
-    // catch other attributes as secondary
-    if (el.attributes) {
-      for (let i = 0; i < el.attributes.length;) {
-        let attr = el.attributes[i], prefix = attr.name[0]
-
-        if (prefix === ':' || prefix === '@') {
-          el.removeAttribute(attr.name)
-          let expr = prefix === '@' ? `${attr.value.includes('await') ? 'async' : ''} 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;
-            disposes.push(dir(el, expr, state, name));
-            // NOTE: secondary directives don't stop flow nor extend state, so no need to check
-          }
-        }
-        else i++;
-      }
-    }
-
-    for (let i = 0, child; child = el.children[i]; i++) {
-      // if element was removed from parent (skipped) - reduce index
-      if (init(child, el) === false) i--
-    }
-  }
-
-  init(container);
-
-  // if element was spraed by :with or :each instruction - skip
-  if (memo.has(container)) return state //memo.get(container)
-
-  // save
-  memo.set(container, state);
-
-  // expose dispose
-  if (disposes.length) Object.defineProperty(container, _dispose, {
-    value: () => {
-      while (disposes.length) disposes.shift()?.();
-      memo.delete(container);
-    }
-  });
-
-  return state;
-}

package/src/directives.js

@@ -1,447 +0,0 @@
-// directives & parsing
-import sprae from './core.js'
-import createState, { effect, computed, untracked, batch, _dispose, _signals, _change } from './state.signals-proxy.js'
-import { getFirstProperty, queueMicrotask } from './util.js'
-
-// reserved directives - order matters!
-// primary initialized first by selector, secondary initialized by iterating attributes
-export const primary = {}, secondary = {}
-
-// :if is interchangeable with :each depending on order, :if :each or :each :if have different meanings
-// as for :if :with - :if must init first, since it is lazy, to avoid initializing component ahead of time by :with
-// we consider :with={x} :if={x} case insignificant
-primary['if'] = (el, expr, state) => {
-  let holder = document.createTextNode(''),
-    clauses = [parseExpr(el, expr, ':if')],
-    els = [el], cur = el
-
-  // consume all following siblings with :else, :if into a single group
-  while (cur = el.nextElementSibling) {
-    if (cur.hasAttribute(':else')) {
-      cur.removeAttribute(':else');
-      if (expr = cur.getAttribute(':if')) {
-        cur.removeAttribute(':if'), cur.remove();
-        els.push(cur); clauses.push(parseExpr(el, expr, ':else :if'));
-      }
-      else {
-        cur.remove(); els.push(cur); clauses.push(() => 1);
-      }
-    }
-    else break;
-  }
-
-  el.replaceWith(cur = holder)
-
-  const dispose = effect(() => {
-    // find matched clause (re-evaluates any time any clause updates)
-    let i = clauses.findIndex(f => f(state))
-    if (els[i] != cur) {
-      ; (cur[_each] || cur).replaceWith(cur = els[i] || holder);
-      // NOTE: it lazily initializes elements on insertion, it's safe to sprae multiple times
-      // but :if must come first to avoid preliminary caching
-      sprae(cur, state);
-    }
-  })
-
-  return () => {
-    for (const el of els) el[_dispose]?.() // dispose all internal spraes
-    dispose() // dispose subscription
-  }
-}
-
-const _each = Symbol(':each')
-
-// :each must init before :ref, :id or any others, since it defines scope
-primary['each'] = (tpl, expr, state) => {
-  const each = parseForExpression(expr);
-  if (!each) return exprError(new Error, tpl, expr, ':each');
-
-  const [itemVar, idxVar, itemsExpr] = each;
-
-  // we have to handle item :ref separately if don't create substates
-  // const refName = tpl.getAttribute(':ref') || ''
-  // if (refName) tpl.removeAttribute(':ref')
-
-  // 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 evaluate = parseExpr(tpl, itemsExpr, ':each');
-
-  // we re-create items any time new items are produced
-  let curItems, signals
-  effect(() => {
-    let srcItems = evaluate(state), newItems, keys
-    let prevl = curItems?.length || 0
-
-    // convert items to array
-    if (!srcItems) newItems = []
-    else if (typeof srcItems === 'number') newItems = Array.from({ length: srcItems }, (_, i) => i)
-    else if (Array.isArray(srcItems)) newItems = srcItems;
-    else if (typeof srcItems === 'object') {
-      keys = Object.keys(srcItems);
-      newItems = Object.values(srcItems);
-      srcItems[_change]; // subscribe to object new props changes
-    }
-    else {
-      exprError(Error('Bad items value'), tpl, expr, ':each', srcItems)
-    }
-
-    untracked(() => batch(() => {
-      // (re)init items (if plain array/obj passed instead of proxy-state)
-      if (!curItems || !curItems[_signals]) {
-        // manual dispose for plain (non-state) arrays - signals here is just holder for destructors
-        for (let i = 0; i < prevl; i++) signals[i]?._del()
-        // NOTE: new items are initialized in length effect below;
-        curItems = newItems, signals = curItems[_signals] || []
-        if (keys) prevl = 0 // NOTE: objects regenerate full list each time instead of subscription
-      }
-      // patch existing items and insert new items - init happens in length effect
-      else {
-        let newl = newItems.length, i = 0
-        for (; i < newl; i++) curItems[i] = newItems[i]
-        curItems.length = newl // dispose tail (done internally in state)
-      }
-    }))
-
-    // length change effect
-    return effect(() => {
-      let newl = newItems.length; // indicate that we track length
-      if (prevl !== newl) untracked(() => batch(() => {
-        // init new items
-        for (let i = prevl; i < newl; i++) {
-          const idx = keys?.[i] ?? i
-          const el = tpl.cloneNode(true),
-            // inherited object instead of substate (less memory & faster)
-            // scope = Object.create(state, {
-            //   [itemVar]: { get() { return curItems[i] } },
-            //   [idxVar]: { value: idx },
-            //   [refName]: { value: el },
-            // })
-            scope = createState({
-              [itemVar]: signals[i] ?? curItems[i],
-              [idxVar]: idx
-            }, state)
-          holder.before(el)
-          sprae(el, scope)
-          const { _del } = (signals[i] ||= {});
-          signals[i]._del = () => { delete curItems[i]; _del?.(); el[_dispose](), el.remove() }
-        }
-        prevl = newl
-      }))
-    })
-  })
-
-  return () => batch(() => {
-    for (let _i of signals) _i?._del()
-    signals.length = 0
-    curItems.length = 0
-  })
-}
-
-// `:each` can redefine scope as `:each="a in {myScope}"`,
-// same time per-item scope as `:each="..." :with="{collapsed:true}"` is useful
-primary['with'] = (el, expr, rootState) => {
-  let evaluate = parseExpr(el, expr, ':with')
-  const localState = evaluate(rootState)
-  let state = createState(localState, rootState)
-  sprae(el, state)
-  return el[_dispose];
-}
-
-// ref must be last within primaries, since that must be skipped by :each, but before secondaries
-primary['ref'] = (el, expr, state) => {
-  state[expr] = el;
-}
-
-
-// This was taken AlpineJS, former VueJS 2.* core. Thanks Alpine & Vue!
-// takes instruction like `item in list`, returns ['item', '', 'list']
-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 items = inMatch[2].trim()
-  let item = inMatch[1].replace(stripParensRE, '').trim()
-  let iteratorMatch = item.match(forIteratorRE)
-
-  if (iteratorMatch) return [
-    item.replace(forIteratorRE, '').trim(),
-    iteratorMatch[1].trim(),
-    items
-  ]
-
-  return [item, '', items]
-}
-
-secondary['render'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':render'),
-    tpl = evaluate(state)
-
-  if (!tpl) exprError(new Error('Template not found'), el, expr, ':render');
-
-  let content = tpl.content.cloneNode(true);
-  el.replaceChildren(content)
-  sprae(el, state)
-  return el[_dispose]
-}
-
-secondary['id'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':id')
-  const update = v => el.id = v || v === 0 ? v : ''
-  return effect(() => update(evaluate(state)))
-}
-
-secondary['class'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':class')
-  let initClassName = el.getAttribute('class')
-  return effect(() => {
-    let v = evaluate(state)
-    let className = [initClassName]
-    if (v) {
-      if (typeof v === 'string') className.push(v)
-      else if (Array.isArray(v)) className.push(...v)
-      else className.push(...Object.entries(v).map(([k, v]) => v ? k : ''))
-    }
-    if (className = className.filter(Boolean).join(' ')) el.setAttribute('class', className);
-    else el.removeAttribute('class')
-  })
-}
-
-secondary['style'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':style')
-  let initStyle = el.getAttribute('style') || ''
-  if (!initStyle.endsWith(';')) initStyle += '; '
-  return effect(() => {
-    let v = evaluate(state)
-    if (typeof v === 'string') el.setAttribute('style', initStyle + v)
-    else {
-      untracked(() => {
-        el.setAttribute('style', initStyle)
-        for (let k in v) if (typeof v[k] !== 'symbol') el.style.setProperty(k, v[k])
-      })
-    }
-  })
-}
-
-secondary['text'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':text')
-  return effect(() => {
-    let value = evaluate(state)
-    el.textContent = value == null ? '' : value;
-  })
-}
-
-// set props in-bulk or run effect
-secondary[''] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':')
-  if (evaluate) return effect(() => {
-    let value = evaluate(state)
-    for (let key in value) attr(el, dashcase(key), value[key]);
-  })
-}
-
-// connect expr to element value
-secondary['value'] = (el, expr, state) => {
-  let evaluate = parseExpr(el, expr, ':value')
-
-  let from, to
-  let update = (
-    el.type === 'text' || el.type === '' ? value => el.setAttribute('value', el.value = value == null ? '' : value) :
-      el.tagName === 'TEXTAREA' || el.type === 'text' || el.type === '' ? value => (
-        // we retain selection in input
-        from = el.selectionStart, to = el.selectionEnd,
-        el.setAttribute('value', el.value = value == null ? '' : value),
-        from && el.setSelectionRange(from, to)
-      ) :
-        el.type === 'checkbox' ? value => (el.value = value ? 'on' : '', attr(el, 'checked', value)) :
-          el.type === 'select-one' ? value => {
-            for (let option in el.options) option.removeAttribute('selected')
-            el.value = value;
-            el.selectedOptions[0]?.setAttribute('selected', '')
-          } :
-            value => el.value = value
-  )
-
-  return effect(() => { update(evaluate(state)) })
-}
-
-// any unknown directive
-export default (el, expr, state, name) => {
-  let evt = name.startsWith('on') && name.slice(2)
-  let evaluate = parseExpr(el, expr, ':' + name)
-
-  if (!evaluate) return
-
-  if (evt) {
-    let off, dispose = effect(() => {
-      if (off) off(), off = null
-      // we need anonymous callback to enable modifiers like prevent
-      let value = evaluate(state)
-      if (value) off = on(el, evt, value)
-    })
-    return () => (off?.(), dispose())
-  }
-
-  return effect(() => { attr(el, name, evaluate(state)) })
-}
-
-// bind event to a target
-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
-  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 off
-  return () => (target.removeEventListener(evt, cb, opts))
-}
-
-// event modifiers
-const mods = {
-  // actions
-  prevent(ctx) { ctx.prevent = true },
-  stop(ctx) { ctx.stop = true },
-
-  // options
-  once(ctx) { ctx.once = true; },
-  passive(ctx) { ctx.passive = true; },
-  capture(ctx) { ctx.capture = true; },
-
-  // target
-  window(ctx) { ctx.target = window },
-  document(ctx) { ctx.target = document },
-
-  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) },
-
-  // test
-  outside: ctx => e => {
-    let target = ctx.target
-    if (target.contains(e.target)) return false
-    if (e.target.isConnected === false) return false
-    if (target.offsetWidth < 1 && target.offsetHeight < 1) return false
-    return true
-  },
-  self: ctx => e => e.target === ctx.target,
-
-  // keyboard
-  ctrl: (ctx, ...param) => e => keys.ctrl(e) && param.every(p => keys[p] ? keys[p](e) : e.key === p),
-  shift: (ctx, ...param) => e => keys.shift(e) && param.every(p => keys[p] ? keys[p](e) : e.key === p),
-  alt: (ctx, ...param) => e => keys.alt(e) && param.every(p => keys[p] ? keys[p](e) : e.key === p),
-  meta: (ctx, ...param) => e => keys.meta(e) && param.every(p => keys[p] ? keys[p](e) : e.key === p),
-  arrow: ctx => keys.arrow,
-  enter: ctx => keys.enter,
-  escape: ctx => keys.escape,
-  tab: ctx => keys.tab,
-  space: ctx => keys.space,
-  backspace: ctx => keys.backspace,
-  delete: ctx => keys.delete,
-  digit: ctx => keys.digit,
-  letter: ctx => keys.letter,
-  character: ctx => keys.character,
-};
-
-// key testers
-const keys = {
-  ctrl: e => e.ctrlKey || e.key === 'Control' || e.key === 'Ctrl',
-  shift: e => e.shiftKey || e.key === 'Shift',
-  alt: e => e.altKey || e.key === 'Alt',
-  meta: e => e.metaKey || e.key === 'Meta' || e.key === 'Command',
-  arrow: e => e.key.startsWith('Arrow'),
-  enter: e => e.key === 'Enter',
-  escape: e => e.key.startsWith('Esc'),
-  tab: e => e.key === 'Tab',
-  space: e => e.key === ' ' || e.key === 'Space' || e.key === ' ',
-  backspace: e => e.key === 'Backspace',
-  delete: e => e.key === 'Delete',
-  digit: e => /^\d$/.test(e.key),
-  letter: e => /^[a-zA-Z]$/.test(e.key),
-  character: e => /^\S$/.test(e.key)
-}
-
-// create delayed fns
-const throttle = (fn, limit) => {
-  let pause, planned, block = (e) => {
-    pause = true
-    setTimeout(() => {
-      pause = false
-      // if event happened during blocked time, it schedules call by the end
-      if (planned) return (planned = false, block(e), fn(e))
-    }, limit)
-  }
-  return (e) => {
-    if (pause) return (planned = true)
-    block(e);
-    return fn(e);
-  }
-}
-const debounce = (fn, wait) => {
-  let timeout
-  return (e) => {
-    clearTimeout(timeout)
-    timeout = setTimeout(() => { timeout = null; fn(e) }, wait)
-  }
-}
-
-// set attr
-const attr = (el, name, v) => {
-  if (v == null || v === false) el.removeAttribute(name)
-  else el.setAttribute(name, v === true ? '' : (typeof v === 'number' || typeof v === 'string') ? v : '')
-}
-
-
-// borrowed from alpine with improvements https://github.com/alpinejs/alpine/blob/main/packages/alpinejs/src/evaluator.js#L61
-// it seems to be more robust than subscript
-let evaluatorMemo = {}
-function parseExpr(el, expression, dir) {
-  // guard static-time eval errors
-  let evaluate = evaluatorMemo[expression]
-
-  if (!evaluate) {
-    try {
-      evaluate = evaluatorMemo[expression] = new Function(`__scope`, `with (__scope) { let __; return ${expression.trim()} };`)
-    } catch (e) {
-      return exprError(e, el, expression, dir)
-    }
-  }
-
-  // guard runtime eval errors
-  return (state) => {
-    let result
-    try { result = evaluate.call(el, state); }
-    catch (e) { return exprError(e, el, expression, dir) }
-    return result
-  }
-}
-
-function exprError(error, element, expression, directive) {
-  Object.assign(error, { element, expression })
-  console.warn(`∴ ${error.message}\n\n${directive}=${expression ? `"${expression}"\n\n` : ''}`, element)
-  queueMicrotask(() => { throw error }, 0)
-}
-
-function dashcase(str) {
-  return str.replace(/[A-Z\u00C0-\u00D6\u00D8-\u00DE]/g, (match) => '-' + match.toLowerCase());
-};

package/src/domdiff.js

@@ -1,71 +0,0 @@
-// https://github.com/luwes/js-diff-benchmark/blob/master/libs/list-difference.js
-// this implementation is more persistent in terms of preserving in-between nodes
-// also it handles _dispose
-
-// a is old list, b is the new
-export default function (parent, a, b, before) {
-  const aIdx = new Map();
-  const bIdx = new Map();
-  let i;
-  let j;
-
-  // Create a mapping from keys to their position in the new list
-  for (i = 0; i < b.length; i++) {
-    bIdx.set(b[i], i);
-  }
-
-  // Create a mapping from keys to their position in the old list
-  for (i = 0; i < a.length; i++) {
-    aIdx.set(a[i], i);
-    // dispose a[i] if is going to disappear
-    if (!bIdx.has(a[i])) a[i][Symbol.dispose]?.()
-  }
-
-  for (i = j = 0; i !== a.length || j !== b.length;) {
-    var aElm = a[i], bElm = b[j];
-    if (aElm === null) {
-      // This is a element that has been moved to earlier in the list
-      i++;
-    } else if (b.length <= j) {
-      // No more elements in new, this is a delete
-      parent.removeChild(a[i]);
-      i++;
-    } else if (a.length <= i) {
-      // No more elements in old, this is an addition
-      parent.insertBefore(bElm, a[i] || before);
-      j++;
-    } else if (aElm === bElm) {
-      // No difference, we move on
-      i++; j++;
-    } else {
-      // Look for the current element at this location in the new list
-      // This gives us the idx of where this element should be
-      var curElmInNew = bIdx.get(aElm);
-      // Look for the the wanted elment at this location in the old list
-      // This gives us the idx of where the wanted element is now
-      var wantedElmInOld = aIdx.get(bElm);
-      if (curElmInNew === undefined) {
-        // Current element is not in new list, it has been removed
-        parent.removeChild(a[i]);
-        i++;
-      } else if (wantedElmInOld === undefined) {
-        // New element is not in old list, it has been added
-        parent.insertBefore(
-          bElm,
-          a[i] || before
-        );
-        j++;
-      } else {
-        // Element is in both lists, it has been moved
-        parent.insertBefore(
-          a[wantedElmInOld],
-          a[i] || before
-        );
-        a[wantedElmInOld] = null;
-        if (wantedElmInOld > i + 1) i++;
-        j++;
-      }
-    }
-  }
-  return b;
-};

package/src/index.js

@@ -1,6 +0,0 @@
-import sprae from './core.js';
-import './directives.js';
-export default sprae;
-
-// autoinit
-if (document.currentScript) sprae(document.documentElement)