ajo 0.0.22 → 0.0.23

package/index.cjs

@@ -48,14 +48,14 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
       node ? node.data != h2 && (node.data = h2) : node = document.createTextNode(h2);
     } else {
       const { xmlns = ns, nodeName, key, ref, memo, children, [FN]: fn, ...props } = h2;
-      while (node && !(node.localName == nodeName && (node.$key ??= key) == key))
+      while (node && !(node.localName == nodeName && is(node.$key ??= key, key)))
         node = node.nextSibling;
       node ??= create(xmlns, nodeName, key);
       if (isObject(ref)) {
         ref.current = node;
         node.$ref = ref;
       }
-      if (memo == null || some(node.$memo, node.$memo = memo)) {
+      if (memo == null || some(node.$deps, node.$deps = memo)) {
         update(props, node);
         isFunction(fn) ? fn(node) : render(children, node, xmlns);
       }
@@ -64,7 +64,8 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
   }
   while (child) {
     const next = child.nextSibling;
-    dispose(host.removeChild(child));
+    dispose(child);
+    host.removeChild(child);
     child = next;
   }
 }, component = (fn) => ({ nodeName, as, props, key, ref, memo, ...args }) => h(as ?? fn?.as ?? "c-host", {
@@ -105,8 +106,8 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
   };
   return [value, () => setValue()];
 }, useHost = () => current, useState = (init) => useReducer(null, init), useRef = (current2) => useMemo(() => ({ current: current2 }), []), useCallback = (fn, deps) => useMemo(() => fn, deps), useLayout = (fn, deps) => useFx(fn, deps, "$layout"), useEffect = (fn, deps) => useFx(fn, deps, "$effect");
-const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis.requestAnimationFrame ?? microtask, { isArray, from } = Array, { is } = Object, noop = () => {
-}, FN = Symbol(), isObject = (v) => v && typeof v == "object", isFunction = (v) => typeof v == "function", some = (a, b) => isArray(a) && isArray(b) ? a.some((v, i) => !is(v, b[i])) : !is(a, b), reduce = (v) => from(v).reduce(assign, {}), assign = (v, { name, value }) => (v[name] = value, v), create = (ns, name, key) => {
+const { isArray, from } = Array, { is } = Object, noop = () => {
+}, FN = Symbol(), isObject = (v) => v && typeof v == "object", isFunction = (v) => typeof v == "function", some = (a, b) => isArray(a) && isArray(b) ? a.some((v, i) => !is(v, b[i])) : !is(a, b), reduce = (v) => from(v).reduce(assign, {}), assign = (v, { name, value }) => (v[name] = value, v), microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis.requestAnimationFrame ?? microtask, create = (ns, name, key) => {
   const node = ns ? document.createElementNS(ns, name) : document.createElement(name);
   return node.$key = key, node;
 }, normalize = function* (h2, buffer = { data: "" }, root = true) {
@@ -154,11 +155,15 @@ const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis
   }
   hooks[0]++;
 }, schedule = (host) => {
-  if (host.$idle)
+  if (host.$idleId)
     return;
   if (globalThis.navigator?.scheduling?.isInputPending()) {
-    host.$idle = requestIdleCallback(() => {
-      host.$idle = null;
+    if (!host.$idle) {
+      host.$idle = true;
+      idleCount++;
+    }
+    host.$idleId = requestIdleCallback(() => {
+      host.$idleId = null;
       schedule(host);
     });
     return;
@@ -173,9 +178,11 @@ const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis
     runComponent(host);
   });
 }, runComponent = (host) => {
-  if (host.$idle) {
-    cancelIdleCallback(host.$idle);
-    host.$idle = null;
+  if (host.$idleId) {
+    cancelIdleCallback(host.$idleId);
+    host.$idleId = null;
+    host.$idle = false;
+    idleCount--;
   }
   current = host;
   if (current.$hooks)
@@ -187,6 +194,11 @@ const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis
   } finally {
     current = null;
     layoutsQueue.add(host);
+    if (host.$idle) {
+      host.$idle = false;
+      if (--idleCount)
+        return;
+    }
     layoutsId ??= task(runLayouts);
   }
 }, runLayouts = () => {
@@ -234,16 +246,23 @@ const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis
     dispose(child);
   if (host.$ref)
     host.$ref.current = null;
+  if (!host.$fn)
+    return;
   layoutsQueue.delete(host);
   effectsQueue.delete(host);
   for (const key of ["$layout", "$effect"])
     if (host[key]) {
-      for (const fx of host[key])
+      for (const fx of host[key]) {
+        host[key].delete(fx);
         try {
-          isFunction(fx[0]) && fx[0]();
-        } catch {
+          const [cleanup] = fx;
+          isFunction(cleanup) && cleanup();
+        } catch (value) {
+          propagate(value, host.parentNode);
+        } finally {
+          fx[0] = fx[1] = null;
         }
-      host[key].clear();
+      }
     }
 }, propagate = (value, host) => {
   for (let fn; host; host = host.parentNode)
@@ -251,4 +270,4 @@ const microtask = globalThis.queueMicrotask ?? ((fn) => fn()), task = globalThis
       return void fn(value);
   throw value;
 };
-let current = null, layoutsQueue = /* @__PURE__ */ new Set(), layoutsId = null, effectsQueue = /* @__PURE__ */ new Set(), effectsId = null;
+let idleCount = 0, layoutsQueue = /* @__PURE__ */ new Set(), effectsQueue = /* @__PURE__ */ new Set(), layoutsId = null, effectsId = null, current = null;

package/index.js

@@ -27,7 +27,7 @@ export const
 
 				const { xmlns = ns, nodeName, key, ref, memo, children, [FN]: fn, ...props } = h
 
-				while (node && !(node.localName == nodeName && (node.$key ??= key) == key)) node = node.nextSibling
+				while (node && !(node.localName == nodeName && is(node.$key ??= key, key))) node = node.nextSibling
 				node ??= create(xmlns, nodeName, key)
 
 				if (isObject(ref)) {
@@ -35,7 +35,7 @@ export const
 					node.$ref = ref
 				}
 
-				if (memo == null || some(node.$memo, node.$memo = memo)) {
+				if (memo == null || some(node.$deps, node.$deps = memo)) {
 					update(props, node)
 					isFunction(fn) ? fn(node) : render(children, node, xmlns)
 				}
@@ -46,7 +46,8 @@ export const
 
 		while (child) {
 			const next = child.nextSibling
-			dispose(host.removeChild(child))
+			dispose(child)
+			host.removeChild(child)
 			child = next
 		}
 	},
@@ -119,11 +120,7 @@ export const
 
 const
 
-	microtask = globalThis.queueMicrotask ?? (fn => fn()),
-
-	task = globalThis.requestAnimationFrame ?? microtask,
-
-	{ isArray, from } = Array, { is } = Object,  noop = () => { }, FN = Symbol(),
+	{ isArray, from } = Array, { is } = Object, noop = () => { }, FN = Symbol(),
 
 	isObject = v => v && typeof v == 'object', isFunction = v => typeof v == 'function',
 
@@ -131,6 +128,8 @@ const
 
 	reduce = v => from(v).reduce(assign, {}), assign = (v, { name, value }) => ((v[name] = value), v),
 
+	microtask = globalThis.queueMicrotask ?? (fn => fn()), task = globalThis.requestAnimationFrame ?? microtask,
+
 	create = (ns, name, key) => {
 		const node = ns ? document.createElementNS(ns, name) : document.createElement(name)
 		return node.$key = key, node
@@ -198,12 +197,17 @@ const
 
 	schedule = host => {
 
-		if (host.$idle) return
+		if (host.$idleId) return
 
 		if (globalThis.navigator?.scheduling?.isInputPending()) {
 
-			host.$idle = requestIdleCallback(() => {
-				host.$idle = null
+			if (!host.$idle) {
+				host.$idle = true
+				idleCount++
+			}
+
+			host.$idleId = requestIdleCallback(() => {
+				host.$idleId = null
 				schedule(host)
 			})
 
@@ -226,9 +230,11 @@ const
 
 	runComponent = host => {
 
-		if (host.$idle) {
-			cancelIdleCallback(host.$idle)
-			host.$idle = null
+		if (host.$idleId) {
+			cancelIdleCallback(host.$idleId)
+			host.$idleId = null
+			host.$idle = false
+			idleCount--
 		}
 
 		current = host
@@ -242,6 +248,12 @@ const
 		} finally {
 			current = null
 			layoutsQueue.add(host)
+
+			if (host.$idle) {
+				host.$idle = false
+				if (--idleCount) return
+			}
+
 			layoutsId ??= task(runLayouts)
 		}
 	},
@@ -305,14 +317,26 @@ const
 
 		if (host.$ref) host.$ref.current = null
 
+		if (!host.$fn) return
+
 		layoutsQueue.delete(host)
 		effectsQueue.delete(host)
 
 		for (const key of ['$layout', '$effect']) if (host[key]) {
 
-			for (const fx of host[key]) try { isFunction(fx[0]) && fx[0]() } catch { }
+			for (const fx of host[key]) {
+
+				host[key].delete(fx)
 
-			host[key].clear()
+				try {
+					const [cleanup] = fx
+					isFunction(cleanup) && cleanup()
+				} catch (value) {
+					propagate(value, host.parentNode)
+				} finally {
+					fx[0] = fx[1] = null
+				}
+			}
 		}
 	},
 
@@ -321,4 +345,10 @@ const
 		throw value
 	}
 
-let current = null, layoutsQueue = new Set, layoutsId = null, effectsQueue = new Set, effectsId = null
+let
+	idleCount = 0,
+	layoutsQueue = new Set,
+	effectsQueue = new Set,
+	layoutsId = null,
+	effectsId = null,
+	current = null

package/index.min.js

@@ -1 +1 @@
-var ajo=(()=>{var g=Object.defineProperty;var R=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var P=Object.prototype.hasOwnProperty;var V=(e,t)=>{for(var l in t)g(e,l,{get:t[l],enumerable:!0})},W=(e,t,l,r)=>{if(t&&typeof t=="object"||typeof t=="function")for(let n of z(t))!P.call(e,n)&&n!==l&&g(e,n,{get:()=>t[n],enumerable:!(r=R(t,n))||r.enumerable});return e};var D=e=>W(g({},"__esModule",{value:!0}),e);var fe={};V(fe,{Fragment:()=>G,component:()=>J,h:()=>v,render:()=>x,useCallback:()=>Y,useCatch:()=>K,useEffect:()=>_,useHost:()=>m,useLayout:()=>Z,useMemo:()=>N,useReducer:()=>b,useRef:()=>X,useState:()=>U});const G=({children:e})=>e,v=(e,t,...l)=>{const{length:r}=l;return l=r==0?null:r==1?l[0]:l,{children:l,...t,nodeName:e}},x=(e,t,l)=>{let r=t.firstChild;for(e of k(e)){let n=r;if(e instanceof Node)n=e;else if(typeof e=="string"){for(;n&&n.nodeType!=3;)n=n.nextSibling;n?n.data!=e&&(n.data=e):n=document.createTextNode(e)}else{const{xmlns:a=l,nodeName:i,key:o,ref:c,memo:C,children:O,[T]:q,...Q}=e;for(;n&&!(n.localName==i&&(n.$key??=o)==o);)n=n.nextSibling;n??=re(a,i,o),te(c)&&(c.current=n,n.$ref=c),(C==null||S(n.$memo,n.$memo=C))&&(ae(Q,n),u(q)?q(n):x(O,n,a))}n==r?r=r.nextSibling:ie(t,n,r)}for(;r;){const n=r.nextSibling;B(t.removeChild(r)),r=n}},J=e=>({nodeName:t,as:l,props:r,key:n,ref:a,memo:i,...o})=>v(l??e?.as??"c-host",{...e?.props,...r,key:n,ref:a,memo:i,[T]:c=>{c.$fn=u(e)?e:ee,c.$args={...e?.args,...o},I(c)}}),b=(e,t)=>{const l=m(),r=y(),[n,a]=r;return n==a.length&&(a[n]=[u(t)?t():t,i=>{const o=a[n][0],c=u(i)?i(o):i;p(o,a[n][0]=u(e)?e(o,c):c)||oe(l)}]),a[r[0]++]},N=(e,t)=>{const l=y(),[r,n]=l;return(r==n.length||t==null||S(t,n[r][1]))&&(n[r]=[e(),t]),n[l[0]++][0]},K=e=>{const t=m(),[l,r]=b(),n=y(),[a,i]=n;return i[n[0]++]=e,t.$catch??=o=>{u(i[a])&&i[a](o),r(o)},[l,()=>r()]},m=()=>f,U=e=>b(null,e),X=e=>N(()=>({current:e}),[]),Y=(e,t)=>N(()=>e,t),Z=(e,t)=>E(e,t,"$layout"),_=(e,t)=>E(e,t,"$effect"),A=globalThis.queueMicrotask??(e=>e()),F=globalThis.requestAnimationFrame??A,{isArray:s,from:h}=Array,{is:p}=Object,ee=()=>{},T=Symbol(),te=e=>e&&typeof e=="object",u=e=>typeof e=="function",S=(e,t)=>s(e)&&s(t)?e.some((l,r)=>!p(l,t[r])):!p(e,t),ne=e=>h(e).reduce(le,{}),le=(e,{name:t,value:l})=>(e[t]=l,e),re=(e,t,l)=>{const r=e?document.createElementNS(e,t):document.createElement(t);return r.$key=l,r},k=function*(e,t={data:""},l=!0){let r;for(e of s(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((r=t.data)&&(t.data="",yield r),yield e):u(e.nodeName)?yield*k(e.nodeName(e),t,!1):s(e)?yield*k(e,t,!1):t.data+=e);l&&(r=t.data)&&(yield r)},ae=(e,t)=>{const l=t.$props??=t.hasAttributes()?ne(t.attributes):{};for(const r in{...l,...t.$props=e}){let n=e[r];n!==l[r]&&(r.startsWith("set:")?t[r.slice(4)]=n:n==null||n===!1?t.removeAttribute(r):t.setAttribute(r,n===!0?"":n))}},ie=(e,t,l)=>{if(t.contains?.(document.activeElement)){const r=t.nextSibling;for(;l&&l!=t;){const n=l.nextSibling;e.insertBefore(l,r),l=n}}else e.insertBefore(t,l)},y=()=>f.$hooks??=[0,[]],E=(e,t,l)=>{const r=m(),n=y(),[a,i]=n;a==i.length?(r[l]??=new Set).add(i[a]=[null,e,t]):(t==null||S(t,i[a][2]))&&(i[a][1]=e,i[a][2]=t),n[0]++},I=e=>{if(!e.$idle){if(globalThis.navigator?.scheduling?.isInputPending()){e.$idle=requestIdleCallback(()=>{e.$idle=null,I(e)});return}j(e)}},oe=e=>{e.$queued||(e.$queued=!0,A(()=>{e.$queued=!1,j(e)}))},j=e=>{e.$idle&&(cancelIdleCallback(e.$idle),e.$idle=null),f=e,f.$hooks&&(f.$hooks[0]=0);try{e.$h=e.$fn(e.$args)}catch(t){w(t,e.parentNode)}finally{f=null,d.add(e),H??=F(ue)}},ue=()=>{H=null;for(const e of d){d.delete(e);try{x(e.$h,e),e.$h=null}catch(t){w(t,e)}finally{M(e,"$layout"),$.add(e),L??=F(ce)}}},ce=()=>{L=null;for(const e of $)$.delete(e),M(e,"$effect")},M=(e,t)=>{if(e[t])for(const l of e[t]){const[r,n]=l;if(u(n))try{u(r)&&r(),l[0]=n()}catch(a){l[0]=null,w(a,e.parentNode)}finally{l[1]=null}}},B=e=>{if(e.nodeType==1){for(const t of e.children)B(t);e.$ref&&(e.$ref.current=null),d.delete(e),$.delete(e);for(const t of["$layout","$effect"])if(e[t]){for(const l of e[t])try{u(l[0])&&l[0]()}catch{}e[t].clear()}}},w=(e,t)=>{for(let l;t;t=t.parentNode)if(u(l=t.$catch))return void l(e);throw e};let f=null,d=new Set,H=null,$=new Set,L=null;return D(fe);})();
+var ajo=(()=>{var k=Object.defineProperty;var z=Object.getOwnPropertyDescriptor;var P=Object.getOwnPropertyNames;var V=Object.prototype.hasOwnProperty;var W=(e,n)=>{for(var i in n)k(e,i,{get:n[i],enumerable:!0})},D=(e,n,i,l)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of P(n))!V.call(e,t)&&t!==i&&k(e,t,{get:()=>n[t],enumerable:!(l=z(n,t))||l.enumerable});return e};var G=e=>D(k({},"__esModule",{value:!0}),e);var se={};W(se,{Fragment:()=>J,component:()=>K,h:()=>q,render:()=>N,useCallback:()=>Z,useCatch:()=>U,useEffect:()=>h,useHost:()=>m,useLayout:()=>_,useMemo:()=>I,useReducer:()=>S,useRef:()=>Y,useState:()=>X});const J=({children:e})=>e,q=(e,n,...i)=>{const{length:l}=i;return i=l==0?null:l==1?i[0]:i,{children:i,...n,nodeName:e}},N=(e,n,i)=>{let l=n.firstChild;for(e of x(e)){let t=l;if(e instanceof Node)t=e;else if(typeof e=="string"){for(;t&&t.nodeType!=3;)t=t.nextSibling;t?t.data!=e&&(t.data=e):t=document.createTextNode(e)}else{const{xmlns:r=i,nodeName:a,key:u,ref:f,memo:C,children:Q,[A]:v,...R}=e;for(;t&&!(t.localName==a&&d(t.$key??=u,u));)t=t.nextSibling;t??=re(r,a,u),te(f)&&(f.current=t,t.$ref=f),(C==null||w(t.$deps,t.$deps=C))&&(ae(R,t),o(v)?v(t):N(Q,t,r))}t==l?l=l.nextSibling:ue(n,t,l)}for(;l;){const t=l.nextSibling;H(l),n.removeChild(l),l=t}},K=e=>({nodeName:n,as:i,props:l,key:t,ref:r,memo:a,...u})=>q(i??e?.as??"c-host",{...e?.props,...l,key:t,ref:r,memo:a,[A]:f=>{f.$fn=o(e)?e:ne,f.$args={...e?.args,...u},j(f)}}),S=(e,n)=>{const i=m(),l=p(),[t,r]=l;return t==r.length&&(r[t]=[o(n)?n():n,a=>{const u=r[t][0],f=o(a)?a(u):a;d(u,r[t][0]=o(e)?e(u,f):f)||oe(i)}]),r[l[0]++]},I=(e,n)=>{const i=p(),[l,t]=i;return(l==t.length||n==null||w(n,t[l][1]))&&(t[l]=[e(),n]),t[i[0]++][0]},U=e=>{const n=m(),[i,l]=S(),t=p(),[r,a]=t;return a[t[0]++]=e,n.$catch??=u=>{o(a[r])&&a[r](u),l(u)},[i,()=>l()]},m=()=>c,X=e=>S(null,e),Y=e=>I(()=>({current:e}),[]),Z=(e,n)=>I(()=>e,n),_=(e,n)=>E(e,n,"$layout"),h=(e,n)=>E(e,n,"$effect"),{isArray:s,from:ee}=Array,{is:d}=Object,ne=()=>{},A=Symbol(),te=e=>e&&typeof e=="object",o=e=>typeof e=="function",w=(e,n)=>s(e)&&s(n)?e.some((i,l)=>!d(i,n[l])):!d(e,n),le=e=>ee(e).reduce(ie,{}),ie=(e,{name:n,value:i})=>(e[n]=i,e),F=globalThis.queueMicrotask??(e=>e()),T=globalThis.requestAnimationFrame??F,re=(e,n,i)=>{const l=e?document.createElementNS(e,n):document.createElement(n);return l.$key=i,l},x=function*(e,n={data:""},i=!0){let l;for(e of s(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((l=n.data)&&(n.data="",yield l),yield e):o(e.nodeName)?yield*x(e.nodeName(e),n,!1):s(e)?yield*x(e,n,!1):n.data+=e);i&&(l=n.data)&&(yield l)},ae=(e,n)=>{const i=n.$props??=n.hasAttributes()?le(n.attributes):{};for(const l in{...i,...n.$props=e}){let t=e[l];t!==i[l]&&(l.startsWith("set:")?n[l.slice(4)]=t:t==null||t===!1?n.removeAttribute(l):n.setAttribute(l,t===!0?"":t))}},ue=(e,n,i)=>{if(n.contains?.(document.activeElement)){const l=n.nextSibling;for(;i&&i!=n;){const t=i.nextSibling;e.insertBefore(i,l),i=t}}else e.insertBefore(n,i)},p=()=>c.$hooks??=[0,[]],E=(e,n,i)=>{const l=m(),t=p(),[r,a]=t;r==a.length?(l[i]??=new Set).add(a[r]=[null,e,n]):(n==null||w(n,a[r][2]))&&(a[r][1]=e,a[r][2]=n),t[0]++},j=e=>{if(!e.$idleId){if(globalThis.navigator?.scheduling?.isInputPending()){e.$idle||(e.$idle=!0,b++),e.$idleId=requestIdleCallback(()=>{e.$idleId=null,j(e)});return}M(e)}},oe=e=>{e.$queued||(e.$queued=!0,F(()=>{e.$queued=!1,M(e)}))},M=e=>{e.$idleId&&(cancelIdleCallback(e.$idleId),e.$idleId=null,e.$idle=!1,b--),c=e,c.$hooks&&(c.$hooks[0]=0);try{e.$h=e.$fn(e.$args)}catch(n){g(n,e.parentNode)}finally{if(c=null,$.add(e),e.$idle&&(e.$idle=!1,--b))return;L??=T(fe)}},fe=()=>{L=null;for(const e of $){$.delete(e);try{N(e.$h,e),e.$h=null}catch(n){g(n,e)}finally{B(e,"$layout"),y.add(e),O??=T(ce)}}},ce=()=>{O=null;for(const e of y)y.delete(e),B(e,"$effect")},B=(e,n)=>{if(e[n])for(const i of e[n]){const[l,t]=i;if(o(t))try{o(l)&&l(),i[0]=t()}catch(r){i[0]=null,g(r,e.parentNode)}finally{i[1]=null}}},H=e=>{if(e.nodeType==1){for(const n of e.children)H(n);if(e.$ref&&(e.$ref.current=null),!!e.$fn){$.delete(e),y.delete(e);for(const n of["$layout","$effect"])if(e[n])for(const i of e[n]){e[n].delete(i);try{const[l]=i;o(l)&&l()}catch(l){g(l,e.parentNode)}finally{i[0]=i[1]=null}}}}},g=(e,n)=>{for(let i;n;n=n.parentNode)if(o(i=n.$catch))return void i(e);throw e};let b=0,$=new Set,y=new Set,L=null,O=null,c=null;return G(se);})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.0.22",
+  "version": "0.0.23",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "index.js",