sprae 3.0.0 → 3.1.0

package/package.json

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

package/readme.md

@@ -254,11 +254,11 @@ Expose element to data scope with the `id`:
 
 ## Sandbox
 
-Expressions are sandboxed, ie. have no access to global or window.
+Expressions are sandboxed, ie. have no access to global or window (since sprae can be run in server environment).
 
 Default sandbox provides: _Array_, _Object_, _Number_, _String_, _Boolean_, _Date_, _console_.
 
-Sandbox can be extended via `Object.assign(sprae.sandbox, { BigInt, window, document })` etc.
+Sandbox can be extended via `Object.assign(sprae.globals, { BigInt, window, document })` etc.
 
 ## Examples
 

package/sprae.js

@@ -1,6 +1,7 @@
 // src/state.js
 var currentFx;
-var currentBatch;
+var batch = /* @__PURE__ */ new Set();
+var pendingUpdate;
 var targetFxs = /* @__PURE__ */ new WeakMap();
 var targetProxy = /* @__PURE__ */ new WeakMap();
 var proxyTarget = /* @__PURE__ */ new WeakMap();
@@ -55,7 +56,8 @@ var handler = {
     let propFxs = targetFxs.get(target)?.[prop];
     if (propFxs)
       for (let fx2 of propFxs)
-        currentBatch ? currentBatch.add(fx2) : fx2.call();
+        batch.add(fx2);
+    planUpdate();
     return true;
   },
   deleteProperty(target, prop) {
@@ -85,14 +87,16 @@ var fx = (fn) => {
   call();
   return call;
 };
-var batch = (fn) => {
-  let prevBatch = currentBatch;
-  currentBatch = /* @__PURE__ */ new Set();
-  fn();
-  for (let fx2 of currentBatch)
-    fx2.call();
-  currentBatch.clear();
-  currentBatch = prevBatch;
+var planUpdate = () => {
+  if (!pendingUpdate) {
+    pendingUpdate = true;
+    queueMicrotask(() => {
+      for (let fx2 of batch)
+        fx2.call();
+      batch.clear();
+      pendingUpdate = false;
+    });
+  }
 };
 
 // src/domdiff.js
@@ -564,16 +568,13 @@ function dashcase(str) {
 }
 
 // src/core.js
-sprae.sandbox = sandbox;
+sprae.globals = sandbox;
 var memo = /* @__PURE__ */ new WeakMap();
 function sprae(container, values) {
   if (!container.children)
     return;
-  if (memo.has(container)) {
-    let state3 = memo.get(container);
-    batch(() => Object.assign(state3, values));
-    return state3;
-  }
+  if (memo.has(container))
+    return Object.assign(memo.get(container), values);
   const state2 = state(values || {});
   const updates = [];
   const init = (el, parent = el.parentNode) => {

package/sprae.min.js

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

package/src/core.js

@@ -1,17 +1,13 @@
-import { state as createState, fx, batch, sandbox } from './state.js';
+import { state as createState, fx, sandbox } from './state.js';
 import defaultDirective, { primary, secondary } from './directives.js';
 
-sprae.sandbox=sandbox
+sprae.globals=sandbox
 
 // sprae element: apply directives
 const memo = new WeakMap
 export default function sprae(container, values) {
   if (!container.children) return
-  if (memo.has(container)) {
-    let state = memo.get(container)
-    batch(() => Object.assign(state, values))
-    return state
-  }
+  if (memo.has(container)) return Object.assign( memo.get(container), values)
 
   // subscribe to reactives
   // for (let prop in values) {

package/src/state.js

@@ -1,5 +1,5 @@
 // currentFx stack of listeners
-let currentFx, currentBatch
+let currentFx, batch = new Set, pendingUpdate
 
 const targetFxs = new WeakMap
 const targetProxy = new WeakMap
@@ -60,7 +60,8 @@ const handler = {
     // whenever target prop is set, call all dependent fxs
     let propFxs = targetFxs.get(target)?.[prop]
 
-    if (propFxs) for (let fx of propFxs) currentBatch ? currentBatch.add(fx) : fx.call()
+    if (propFxs) for (let fx of propFxs) batch.add(fx)
+    planUpdate()
 
     // FIXME: unsubscribe / delete effects by setting null/undefined
     // if (value == null) targetFxs.delete(prev)
@@ -103,11 +104,13 @@ export const fx = (fn) => {
   return call
 }
 
-export const batch = fn => {
-  let prevBatch = currentBatch
-  currentBatch = new Set
-  fn()
-  for (let fx of currentBatch) fx.call()
-  currentBatch.clear()
-  currentBatch = prevBatch
-}
+export const planUpdate = () => {
+  if (!pendingUpdate) {
+    pendingUpdate = true
+    queueMicrotask(() => {
+      for (let fx of batch) fx.call()
+      batch.clear()
+      pendingUpdate = false
+    })
+  }
+}

package/test/dom.js

@@ -25,6 +25,7 @@ test('hidden: core', async () => {
   let params = sprae(el, {hidden:true})
   is(el.outerHTML, `<div hidden=""></div>`)
   params.hidden = false
+  await tick()
   is(el.outerHTML, `<div></div>`)
 })
 
@@ -42,6 +43,7 @@ test('common: reactive', async () => {
   let params = sprae(el, {name:'text', url:'//google.com'})
   is(el.outerHTML, `<label for="text">text</label><input id="text" name="text" type="text"><a href="//google.com"></a><img src="//google.com">`)
   params.name = 'email'
+  await tick()
   is(el.outerHTML, `<label for="email">email</label><input id="email" name="email" type="email"><a href="//google.com"></a><img src="//google.com">`)
 })
 
@@ -76,17 +78,22 @@ test('style', async () => {
   let el = h`<x style="left: 1px" :style="style"></x>`
   let params = sprae(el, {style: "top: 1px"})
   is(el.outerHTML, `<x style="left: 1px; top: 1px"></x>`)
+
   params.style = {top: '2px'}
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 2px;"></x>`)
 
   params.style = {'--x': 123}
+  await tick()
   is(el.style.getPropertyValue('--x'), '123')
 
   params.style = {top:'1px', bottom:'2px'}
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 1px; bottom: 2px;"></x>`)
 
   params.style = {top:'2px', bottom: null}
   // FIXME
+  await tick()
   is(el.outerHTML, `<x style="left: 1px; top: 2px;"></x>`)
 })
 
@@ -96,6 +103,7 @@ test('class', async () => {
   let params = sprae(el, {a:'x', b:'y', c, d:false});
   is(el.outerHTML, `<x class="base x"></x><y class="y z"></y><z class="b"></z>`);
   params.d = true;
+  await tick()
   is(el.outerHTML, `<x class="base x"></x><y class="y z"></y><z class="b c"></z>`);
   // c.value = 'w'
   // is(el.outerHTML, `<x class="base x"></x><y class="y w"></y><z class="b c"></z>`);
@@ -126,6 +134,7 @@ test('props: calculation', async () => {
   let state = sprae(el, {x:3});
   is(el.outerHTML, `<x x="012"></x>`)
   state.x = 4
+  await tick()
   is(el.outerHTML, `<x x="0123"></x>`)
 })
 
@@ -156,6 +165,7 @@ test('value: direct', async () => {
   is(el.value, '1')
   is(el.outerHTML, `<input value="1">`)
   state.a = 2
+  await tick()
   is(el.value, '2')
   is(el.outerHTML, `<input value="2">`)
 
@@ -182,6 +192,7 @@ test('text: core', async () => {
   let params = sprae(el, {text:'abc'})
   is(el.outerHTML, `<div>abc</div>`)
   params.text = null
+  await tick()
   is(el.outerHTML, `<div></div>`)
 })
 
@@ -196,10 +207,13 @@ test('if: base', async () => {
 
   is(el.innerHTML, '<span>a</span>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<span>b</span>')
   params.a = 3
+  await tick()
   is(el.innerHTML, '<span>c</span>')
   params.a = null
+  await tick()
   is(el.innerHTML, '<span>c</span>')
 })
 
@@ -214,15 +228,20 @@ test('if: short with insertions', async () => {
 
   is(el.innerHTML, '<span>1:1</span>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<span>2:2</span>')
   params.a = 3
+  await tick()
   is(el.innerHTML, '<span>3</span>')
   params.a = 4
+  await tick()
   is(el.innerHTML, '<span>4</span>')
 
   params.a = 1
+  await tick()
   is(el.innerHTML, '<span>1:1</span>')
   params.a = 4
+  await tick()
   is(el.innerHTML, '<span>4</span>')
 
   params.a = null
@@ -258,11 +277,12 @@ test('if: (#3) subsequent content is not abandoned', async () => {
   is(x.outerHTML, `<x><z>123</z></x>`)
 })
 
-test('if: + :with doesnt prevent secondary effects from happening', () => {
+test('if: + :with doesnt prevent secondary effects from happening', async () => {
   let el = h`<div><x :if="x" :with="{}" :text="x"></x></div>`
   let state = sprae(el, {x:''})
   is(el.innerHTML, ``)
   state.x = '123'
+  await tick()
   is(el.innerHTML, `<x>123</x>`)
 
   // NOTE: we ignore this case
@@ -284,10 +304,13 @@ test('each: array', async () => {
   is(el.innerHTML, '')
   console.log('set 1,2')
   params.b = [1,2]
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = []
+  await tick()
   is(el.innerHTML, '')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -302,10 +325,13 @@ test('each: object', async () => {
   is(el.innerHTML, '')
   console.log('set 1,2')
   params.b = { x:1, y:2 }
+  await tick()
   is(el.innerHTML, '<span>x,1</span><span>y,2</span>')
   params.b = []
+  await tick()
   is(el.innerHTML, '')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -318,12 +344,15 @@ test('each: loop within loop', async () => {
 
   is(el.innerHTML, '<x><y>1</y><y>2</y></x><x><y>3</y><y>4</y></x>')
   params.c = [[5,6], [3,4]]
+  await tick()
   is(el.innerHTML, '<x><y>5</y><y>6</y></x><x><y>3</y><y>4</y></x>')
   // params.c[1] = [7,8]
   params.c = [params.c[0], [7,8]]
+  await tick()
   is(el.innerHTML, '<x><y>5</y><y>6</y></x><x><y>7</y><y>8</y></x>')
   // is(el.innerHTML, '<span>1</span><span>2</span>')
   params.c = []
+  await tick()
   is(el.innerHTML, '')
   // params.b = null
   // is(el.innerHTML, '')
@@ -358,10 +387,13 @@ test('each: loop with condition', async () => {
 
   is(el.innerHTML, '')
   params.c = true
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = [1]
+  await tick()
   is(el.innerHTML, '<span>1</span>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -375,13 +407,17 @@ test('each: condition with loop', async () => {
 
   is(el.innerHTML, '<span>false</span>')
   params.c = true
+  await tick()
   is(el.innerHTML, '<span>1</span><span>2</span>')
   params.b = [1]
+  await tick()
   is(el.innerHTML, '<span>1</span>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
   console.log('c=false')
   params.c = false
+  await tick()
   is(el.innerHTML, '<span>false</span>')
 })
 
@@ -395,8 +431,10 @@ test('each: loop within condition', async () => {
 
   is(el.innerHTML, '<x><y>1</y></x>')
   params.a = 2
+  await tick()
   is(el.innerHTML, '<x><y>-1</y><y>-2</y></x>')
   params.a = 0
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -413,8 +451,10 @@ test('each: condition within loop', async () => {
 
   is(el.innerHTML, '<x><y>1:1</y></x><x><y>2:2</y></x><x><y>3</y></x>')
   params.b = [2]
+  await tick()
   is(el.innerHTML, '<x><y>2:2</y></x>')
   params.b = null
+  await tick()
   is(el.innerHTML, '')
 })
 
@@ -433,9 +473,11 @@ test('each: unkeyed', async () => {
   is(el.textContent, '123')
   // let first = el.firstChild
   state.xs = [1,3,2]
+  await tick()
   // is(el.firstChild, first)
   is(el.textContent, '132')
   state.xs = [3,3,3]
+  await tick()
   is(el.textContent, '333')
   // is(el.firstChild, first)
 })
@@ -448,9 +490,11 @@ test('each: keyed', async () => {
   is(el.textContent, '123')
   let first = el.firstChild
   state.xs = [1,3,2]
+  await tick()
   is(el.firstChild, first)
   is(el.textContent, '132')
   state.xs = [3,3,3]
+  await tick()
   is(el.textContent, '3')
   // is(el.firstChild, first)
 })
@@ -465,18 +509,21 @@ test('each: unmounted elements remove listeners', async () => {
   // let's hope they get removed without memory leaks :')
 })
 
-test('each: internal children get updated by state update, also: update by running again', () => {
+test('each: internal children get updated by state update, also: update by running again', async () => {
   let el = h`<><x :each="item, idx in items" :text="item" :key="idx"></x></>`
   let state = sprae(el, { items: [1,2,3] })
   is(el.textContent, '123')
   state.items = [2, 2, 3]
+  await tick()
   is(el.textContent, '223')
   state = sprae(el, { items: [0,2,3] })
+  await tick()
   is(el.textContent, '023')
   // NOTE: this doesn't update items, since they're new array
   console.log('set items')
   state.items[0] = 1
-  state.items = [...state.items]
+  // state.items = [...state.items]
+  await tick()
   is(el.textContent, '123')
 })
 
@@ -499,7 +546,7 @@ test('each: key-based caching is in-sync with direct elements', () => {
   is(el.outerHTML, el2.outerHTML)
 })
 
-test('on: base', () => {
+test('on: base', async () => {
   let el = h`<div :on="{click(e){log.push('click')}, x}"></div>`
   let log = []
   let params = sprae(el, {x(){log.push('x')}, log})
@@ -511,11 +558,13 @@ test('on: base', () => {
   is(log, ['click','x'])
 
   params.x = function(){log.push('xx')}
+  await tick()
   el.dispatchEvent(new window.Event('x'));
   is(log, ['click','x','xx']);
 
   console.log('make null')
   params.x = null;
+  await tick()
   el.dispatchEvent(new window.Event('x'));
   is(log, ['click','x','xx']);
 })
@@ -632,7 +681,7 @@ test('on: parallel chains', e => {
   is(state.log, ['x','x','y','y','z','z','x']);
 })
 
-test('on: state changes between chain of events', e => {
+test('on: state changes between chain of events', async e => {
   let el = h`<x :on="{'x..y':fn}"></x>`
   let log = []
   let state = sprae(el, {log, fn: () => (log.push('x1'), ()=>log.push('y1'))})
@@ -641,6 +690,7 @@ test('on: state changes between chain of events', e => {
   is(log, ['x1'])
   console.log('update fn')
   state.fn = () => (log.push('x2'), () => log.push('y2'))
+  await tick()
   is(log, ['x1'])
   // console.log('xx')
   // NOTE: state update registers new chain listener before finishing prev chain
@@ -808,12 +858,13 @@ test('on: modifiers chain', async e => {
   is(state.log,['x', 'x'])
 })
 
-test('with: inline', () => {
+test('with: inline', async () => {
   let el = h`<x :with="{foo:'bar'}"><y :text="foo + baz"></y></x>`
   let state = sprae(el, {baz: 'qux'})
   // FIXME: this doesn't inherit root scope baz property and instead uses hard-initialized one
   is(el.innerHTML, `<y>barqux</y>`)
   state.baz = 'quux'
+  await tick()
   is(el.innerHTML, `<y>barquux</y>`)
 })
 test.skip('with: inline reactive', () => {
@@ -825,22 +876,24 @@ test.skip('with: inline reactive', () => {
   baz.value = 'quux'
   is(el.innerHTML, `<y>barquux</y>`)
 })
-test('with: data', () => {
+test('with: data', async () => {
   let el = h`<x :with="x"><y :text="foo"></y></x>`
   let state = sprae(el, {x: {foo:'bar'}})
   is(el.innerHTML, `<y>bar</y>`)
   console.log('update', state.x)
   state.x.foo = 'baz'
+  await tick()
   // Object.assign(state, {x:{foo:'baz'}})
   is(el.innerHTML, `<y>baz</y>`)
 })
-test('with: transparency', () => {
+test('with: transparency', async () => {
   // NOTE: y:text initializes through directive, not through parent
   // therefore by default :text uses parent's state, not defined by element itself
   let el = h`<x :with="{foo:'foo'}"><y :with="b" :text="foo+bar"></y></x>`
   let params = sprae(el, {b:{bar:'bar'}})
   is(el.innerHTML, `<y>foobar</y>`)
   params.b.bar = 'baz'
+  await tick()
   is(el.innerHTML, `<y>foobaz</y>`)
 })
 test.skip('with: reactive transparency', () => {
@@ -851,22 +904,25 @@ test.skip('with: reactive transparency', () => {
   bar.value = '3'
   is(el.innerHTML, `<y>13</y>`)
 })
-test('with: writes to state', () => {
+test('with: writes to state', async () => {
   let a = h`<x :with="{a:1}"><y :on="{x(){a++}}" :text="a"></y></x>`
   sprae(a)
   is(a.innerHTML, `<y>1</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))
+  await tick()
   is(a.innerHTML, `<y>2</y>`)
   a.firstChild.dispatchEvent(new window.Event('x'))
+  await tick()
   is(a.innerHTML, `<y>3</y>`)
 })
 
-test('ref: base', () => {
+test('ref: base', async () => {
   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
+  await tick()
   is(a.outerHTML, `<a>2</a>`)
   is(state.a, a, 'Exposes to the state');
 })
@@ -929,7 +985,7 @@ test('sandbox', async () => {
   is(log, ['undefined', 'object', 'undefined', 'undefined'])
 
   log.splice(0)
-  Object.assign(sprae.sandbox, { window })
+  Object.assign(sprae.globals, { window })
   sprae(el.cloneNode(), {log})
   is(log, ['object', 'object', 'undefined', 'undefined'])
 })

package/test/state.js

@@ -1,9 +1,10 @@
-import {state, fx, batch} from '../src/state.js'
+import {state, fx} from '../src/state.js'
 import t, {is, ok} from 'tst'
 import signalStruct from 'signal-struct'
 import { effect } from '@preact/signals-core'
+import {tick} from 'wait-please'
 
-t('state: basic', t => {
+t('state: basic', async t => {
   let s = state({x:0, y:1})
 
   let xy; fx(() => xy = s.x + s.y)
@@ -12,12 +13,14 @@ t('state: basic', t => {
   s.x = 2
   console.log('set 3')
   s.y = 3
+  await tick()
   is(xy, 5, 'Eq')
   s.y = 4
+  await tick()
   is(xy, 6, 'Eq')
 })
 
-t('state: signal-struct basics', t => {
+t('state: signal-struct basics', async t => {
   let s = state({
     x: 0,
     y: 1,
@@ -39,8 +42,10 @@ t('state: signal-struct basics', t => {
   is(xy, 1)
   s.x = 2
   s.y = 3
+  await tick()
   is(xy, 5)
   s.y = 4
+  await tick()
   is(xy, 6)
 
   // getters are computed
@@ -51,7 +56,7 @@ t('state: signal-struct basics', t => {
   is(s.xy, 6)
 })
 
-t('state: deep props', () => {
+t('state: deep props', async () => {
   let s = state({
     z: { r: 2, i: 3 }
   })
@@ -60,17 +65,20 @@ t('state: deep props', () => {
   let len; fx(() => (len = (s.z.r**2 + s.z.i**2)**0.5))
   s.z.r = 3
   s.z.i = 4
+  await tick()
   is(len, 5)
   s.z.r = 4
   s.z.i = 3
+  await tick()
   is(len, 5)
 
   // updating internal objects/arrays turns them into signals too
   s.z = { r: 5, i: 12}
+  await tick()
   is(len, 13)
 })
 
-t('state: array', () => {
+t('state: array', async () => {
   let s = state({
     w: [1,2]
   })
@@ -79,23 +87,27 @@ t('state: array', () => {
   let mult; fx(() => mult = s.w?.[0] * s.w?.[1] || 0)
   is(mult, 2)
   s.w = [3,4]
+  await tick()
   is(mult,12)
 
   // nullifying is fine
   s.w = null
+  await tick()
   is(mult, 0)
 
   // delete is fine
   delete s.w
 
+  await tick()
   is(mult, 0)
 
   console.log('set w')
   s.w = [1,2]
+  await tick()
   is(mult, 2)
 })
 
-t('state: bulk-update', () => {
+t('state: bulk-update', async () => {
   let s = state({
     x: 0,
     y: 1,
@@ -114,6 +126,7 @@ t('state: bulk-update', () => {
   // let [signals, update] = s
   // update({ x: 1, y: 1, z: { r: 3, i: 4 } })
   Object.assign(s, { x: 1, y: 1, z: { r: 3, i: 4 } })
+  await tick()
   is(xy, 2)
   is(len, 5, 'len after update')
 })
@@ -178,31 +191,37 @@ t('state: inheritance', () => {
   // })
 })
 
-t('state: inheritance: updating values in chain', () => {
+t('state: inheritance: updating values in chain', async () => {
   let s1 = {x:1}
   let s = state(s1, {y:2})
-  console.group('fx')
+  // console.group('fx')
   let xy = 0; fx(() => xy = s.x + s.y);
-  console.groupEnd('fx')
+  // console.groupEnd('fx')
+  await tick()
   is(xy, 3)
   s.x++
+  await tick()
   is(xy, 4)
   console.log('y++')
   s.y++
+  await tick()
   is(xy, 5)
 })
 
-t('state: array items', () => {
+t('state: array items', async () => {
   // arrays get each item converted to signal struct
   let s5 = state({list: [{x:1}, {x:2}]})
   let sum; fx(()=> sum = s5.list.reduce((sum, item)=>item.x + sum, 0))
   is(sum, 3)
   s5.list[0].x = 2
+  await tick()
   is(sum, 4)
   console.log('set array value')
   s5.list = [{x:3}, {x:3}]
+  await tick()
   is(sum, 6)
   s5.list = [{x:3}, {x:3}, {x:4}]
+  await tick()
   is(sum, 10)
 })
 
@@ -214,14 +233,16 @@ t('state: arrays retain reference', () => {
   is(list,[1,4,3])
 })
 
-t('state: direct list', () => {
+t('state: direct list', async () => {
   // works with arrays as well
   let list = state([{x:1}, {x:2}])
   let sum; fx(()=> sum = list.reduce((sum, item)=>item.x + sum, 0))
   is(sum, 3)
   list[0].x = 2
+  await tick()
   is(sum, 4)
   list.splice(0, 2, {x:3}, {x:3})
+  await tick()
   console.log(list)
   is(sum, 6)
 })
@@ -240,7 +261,7 @@ t('state: circular?', () => {
   is (a, [1, 2])
 })
 
-t('state: batch', () => {
+t.skip('state: batch', () => {
   let s = state({x:1, y:2})
   let log = []; fx(() => log.push(s.x + s.y))
   is(log, [3])