ajo 0.0.20 → 0.0.21

package/index.cjs

@@ -33,10 +33,12 @@ __export(ajo_exports, {
   stx: () => stx
 });
 module.exports = __toCommonJS(ajo_exports);
-const Fragment = ({ children }) => children, For = ({ is, each, by, children, ref, ...props }) => h(is ?? "div", {
+const Fragment = ({ children }) => children, For = ({ is, key, block, each, by, children, ref, ...props }) => h(is ?? "div", {
   ...props,
+  key,
+  block,
   skip: true,
-  ref: (host) => iterate(host, each, by, children, ref)
+  ref: iterate.bind(null, each, by, children, ref)
 }), h = (nodeName, props, ...children) => {
   const { length } = children;
   children = length == 0 ? null : length == 1 ? children[0] : children;
@@ -66,14 +68,16 @@ const Fragment = ({ children }) => children, For = ({ is, each, by, children, re
   }
   while (child) {
     const next = child.nextSibling;
-    host.removeChild(child);
+    dispose(host.removeChild(child));
     child = next;
   }
-}, component = (setup) => ({ is, props, ref, ...params }) => h(is ?? setup.is ?? "div", {
+}, component = (setup) => ({ is, props, key, block, ref, ...params }) => h(is ?? setup.is ?? "div", {
   ...setup.props,
   ...props,
+  key,
+  block,
   skip: true,
-  ref: (host) => run(host, setup, params, ref)
+  ref: run.bind(null, setup, params, ref)
 }), refresh = (host) => {
   try {
     render((host.$render ??= host.$setup(host))(host.$params), host);
@@ -138,11 +142,14 @@ const { isArray, from } = Array, { keys, entries } = Object, isFunction = (v) =>
     }
   } else
     host.insertBefore(node, child);
-}, iterate = (host, each, by, fn, ref) => {
+}, iterate = (each, by, fn, ref, host) => {
   each = isArray(each) ? each : [];
   by = isFunction(by) ? by : (v) => v;
   fn = isFunction(fn) ? fn : noop;
-  const map2 = host.$for ??= /* @__PURE__ */ new Map(), del = (node) => map2.delete(node.$by), clr = each !== host.$each, len = (host.$each = each).length, a = from(host.childNodes), b = new Array(len);
+  const map2 = host.$for ??= /* @__PURE__ */ new Map(), del = (node) => {
+    map2.delete(node.$by);
+    dispose(node);
+  }, clr = each !== host.$each, len = (host.$each = each).length, a = from(host.childNodes), b = new Array(len);
   clr && map2.clear();
   for (let child, index = 0; index < len; index++) {
     const item = each[index], key = by(item, index);
@@ -182,22 +189,19 @@ const { isArray, from } = Array, { keys, entries } = Object, isFunction = (v) =>
       }
     }
   }
-}, run = (host, setup, params, ref) => {
-  host.$setup ??= (host.addEventListener("DOMNodeRemovedFromDocument", dispose), isFunction(setup) ? setup : noop);
+}, run = (setup, params, ref, host) => {
+  host.$setup ??= isFunction(setup) ? setup : noop;
   host.$params = { ...setup.params, ...params };
   refresh(host);
   isFunction(ref) && ref(host);
-}, dispose = ({ target }) => {
-  (globalThis.queueMicrotask ?? ((v) => v()))(() => {
-    if (document.contains(target))
-      return;
-    if ("$cleanups" in target) {
-      try {
-        for (const fn of target.$cleanups)
-          fn(target);
-      } finally {
-        target.$cleanups.clear();
-      }
+}, dispose = (host) => {
+  if (host.nodeType != 1)
+    return;
+  for (const child of host.children)
+    dispose(child);
+  if ("$cleanups" in host)
+    for (const fn of host.$cleanups) {
+      host.$cleanups.delete(fn);
+      fn(host);
     }
-  });
 };

package/index.js

@@ -1,8 +1,8 @@
 export const
 	Fragment = ({ children }) => children,
 
-	For = ({ is, each, by, children, ref, ...props }) => h(is ?? 'div', {
-		...props, skip: true, ref: host => iterate(host, each, by, children, ref)
+	For = ({ is, key, block, each, by, children, ref, ...props }) => h(is ?? 'div', {
+		...props, key, block, skip: true, ref: iterate.bind(null, each, by, children, ref)
 	}),
 
 	h = (nodeName, props, ...children) => {
@@ -45,13 +45,13 @@ export const
 
 		while (child) {
 			const next = child.nextSibling
-			host.removeChild(child)
+			dispose(host.removeChild(child))
 			child = next
 		}
 	},
 
-	component = setup => ({ is, props, ref, ...params }) => h(is ?? setup.is ?? 'div', {
-		...setup.props, ...props, skip: true, ref: host => run(host, setup, params, ref)
+	component = setup => ({ is, props, key, block, ref, ...params }) => h(is ?? setup.is ?? 'div', {
+		...setup.props, ...props, key, block, skip: true, ref: run.bind(null, setup, params, ref)
 	}),
 
 	refresh = host => {
@@ -97,7 +97,7 @@ const
 
 	create = (ns, name, key) => {
 		const node = ns ? document.createElementNS(ns, name) : document.createElement(name)
-		return node.$key = key, node
+		return ((node.$key = key), node)
 	},
 
 	proxy = { firstChild: null, insertBefore: node => proxy.firstChild ??= node }, handler = {
@@ -155,7 +155,7 @@ const
 		} else host.insertBefore(node, child)
 	},
 
-	iterate = (host, each, by, fn, ref) => {
+	iterate = (each, by, fn, ref, host) => {
 
 		each = isArray(each) ? each : []
 		by = isFunction(by) ? by : v => v
@@ -163,7 +163,10 @@ const
 
 		const
 			map = host.$for ??= new Map,
-			del = node => map.delete(node.$by),
+			del = node => {
+				map.delete(node.$by)
+				dispose(node)
+			},
 			clr = each !== host.$each,
 			len = (host.$each = each).length,
 			a = from(host.childNodes),
@@ -222,25 +225,20 @@ const
 		}
 	},
 
-	run = (host, setup, params, ref) => {
+	run = (setup, params, ref, host) => {
 
-		host.$setup ??= (host.addEventListener('DOMNodeRemovedFromDocument', dispose), isFunction(setup) ? setup : noop)
+		host.$setup ??= isFunction(setup) ? setup : noop
 		host.$params = { ...setup.params, ...params }
 
 		refresh(host)
 		isFunction(ref) && ref(host)
 	},
 
-	dispose = ({ target }) => {
-		(globalThis.queueMicrotask ?? (v => v()))(() => {
-			if (document.contains(target)) return
-
-			if ('$cleanups' in target) {
-				try {
-					for (const fn of target.$cleanups) fn(target)
-				} finally {
-					target.$cleanups.clear()
-				}
-			}
-		})
+	dispose = host => {
+		if (host.nodeType != 1) return
+		for (const child of host.children) dispose(child)
+		if ('$cleanups' in host) for (const fn of host.$cleanups) {
+			host.$cleanups.delete(fn)
+			fn(host)
+		}
 	}

package/index.min.js

@@ -1 +1 @@
-var ajo=(()=>{var y=Object.defineProperty;var j=Object.getOwnPropertyDescriptor;var B=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var F=(e,n)=>{for(var l in n)y(e,l,{get:n[l],enumerable:!0})},L=(e,n,l,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of B(n))!E.call(e,t)&&t!==l&&y(e,t,{get:()=>n[t],enumerable:!(i=j(n,t))||i.enumerable});return e};var R=e=>L(y({},"__esModule",{value:!0}),e);var re={};F(re,{For:()=>z,Fragment:()=>T,cleanup:()=>q,clx:()=>P,component:()=>D,consume:()=>O,h:()=>v,intercept:()=>V,keb:()=>Z,propagate:()=>k,provide:()=>I,refresh:()=>S,render:()=>g,stx:()=>W});const T=({children:e})=>e,z=({is:e,each:n,by:l,children:i,ref:t,...o})=>v(e??"div",{...o,skip:!0,ref:r=>ne(r,n,l,i,t)}),v=(e,n,...l)=>{const{length:i}=l;return l=i==0?null:i==1?l[0]:l,{children:l,...n,nodeName:e}},g=(e,n,l)=>{let i=n.firstChild;for(e of x(e)){let t=i;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:o=l,nodeName:r,key:s,block:c,skip:u,children:f,ref:a,...d}=e;for(;t&&!(t.localName==r&&(t.$key??=s)==s);)t=t.nextSibling;t??=U(o,r,s),(c==null||J(t.$deps,t.$deps=c))&&(h(d,t),u||g(f,t,o),p(a)&&a(t))}t==i?i=i.nextSibling:ee(n,t,i)}for(;i;){const t=i.nextSibling;n.removeChild(i),i=t}},D=e=>({is:n,props:l,ref:i,...t})=>v(n??e.is??"div",{...e.props,...l,skip:!0,ref:o=>ie(o,e,t,i)}),S=e=>{try{g((e.$render??=e.$setup(e))(e.$params),e)}catch(n){k(e,n)}},I=(e,n,l)=>(e.$provisions??=new Map).set(n,l),O=(e,n,l)=>{for(let i;e;e=e.parentNode)if((i=e.$provisions)&&i.has(n))return i.get(n);return l},V=(e,n)=>p(n)&&(e.$interceptor=n),k=(e,n)=>{for(let l;e;e=e.parentNode)if(p(l=e.$interceptor))return g(l(n),e);throw n},q=(e,n)=>p(n)&&(e.$cleanups??=new Set).add(n),P=e=>M(e).filter(n=>e[n]).join(" ")||null,W=e=>G(e).map(n=>n.join(":")).join(";")||null,Z=e=>M(e).reduce((n,l)=>(n[l.replace(Y,_).toLowerCase()]=e[l],n),{}),{isArray:$,from:A}=Array,{keys:M,entries:G}=Object,p=e=>typeof e=="function",b=()=>{},C=e=>e.reduce(H,new Map),H=(e,n,l)=>(e.set(n,l),e),J=(e,n)=>$(e)&&$(n)?e.some((l,i)=>l!==n[i]):e!==n,K=e=>A(e).reduce(Q,{}),Q=(e,{name:n,value:l})=>(e[n]=l,e),U=(e,n,l)=>{const i=e?document.createElementNS(e,n):document.createElement(n);return i.$key=l,i},m={firstChild:null,insertBefore:e=>m.firstChild??=e},X={get(e,n){const l=n=="nextSibling"?null:Reflect.get(e,n);return p(l)?l.bind(e):l},set(e,n,l){return Reflect.set(e,n,l)}},Y=/([a-z0-9])([A-Z])/g,_="$1-$2",x=function*(e,n={t:""},l=!0){let i;for(e of $(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((i=n.t)&&(n.t="",yield i),yield e):p(e.nodeName)?yield*x(e.nodeName(e),n,!1):$(e)?yield*x(e,n,!1):n.t+=e);l&&(i=n.t)&&(yield i)},h=(e,n)=>{const l=n.$props??=n.hasAttributes()?K(n.attributes):{};for(const i in{...l,...n.$props=e}){let t=e[i];t!==l[i]&&(i.startsWith("set:")?n[i.slice(4)]=t:t==null||t===!1?n.removeAttribute(i):n.setAttribute(i,t===!0?"":t))}},ee=(e,n,l)=>{if(n.contains?.(document.activeElement)){const i=n.nextSibling;for(;l&&l!=n;){const t=l.nextSibling;e.insertBefore(l,i),l=t}}else e.insertBefore(n,l)},ne=(e,n,l,i,t)=>{n=$(n)?n:[],l=p(l)?l:a=>a,i=p(i)?i:b;const o=e.$for??=new Map,r=a=>o.delete(a.$by),s=n!==e.$each,c=(e.$each=n).length,u=A(e.childNodes),f=new Array(c);s&&o.clear();for(let a,d=0;d<c;d++){const w=n[d],N=l(w,d);a=s?u[d]:o.get(N),m.firstChild=a?new Proxy(a,X):null,g(i(w,d),m),a??=m.firstChild,m.firstChild=null,o.set(a.$by=N,f[d]=a)}le(e,u,f,r),p(t)&&t(e)},le=(e,n,l,i=b)=>{const t=n.length,o=l.length;let r=0,s=0,c,u,f,a,d;for(;r!==t||s!==o;)c=n[r],u=l[s],c===null?r++:o<=s?(r++,i(e.removeChild(c))):t<=r?(s++,e.appendChild(u)):c===u?(r++,s++):(f??=C(n),a??=C(l),a.get(c)==null?(r++,i(e.removeChild(c))):(e.insertBefore(u,c),s++,(d=f.get(u))!=null&&(d>r+1&&r++,n[d]=null)))},ie=(e,n,l,i)=>{e.$setup??=(e.addEventListener("DOMNodeRemovedFromDocument",te),p(n)?n:b),e.$params={...n.params,...l},S(e),p(i)&&i(e)},te=({target:e})=>{(globalThis.queueMicrotask??(n=>n()))(()=>{if(!document.contains(e)&&"$cleanups"in e)try{for(const n of e.$cleanups)n(e)}finally{e.$cleanups.clear()}})};return R(re);})();
+var ajo=(()=>{var x=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var L=(e,n)=>{for(var l in n)x(e,l,{get:n[l],enumerable:!0})},T=(e,n,l,i)=>{if(n&&typeof n=="object"||typeof n=="function")for(let t of E(n))!F.call(e,t)&&t!==l&&x(e,t,{get:()=>n[t],enumerable:!(i=B(n,t))||i.enumerable});return e};var z=e=>T(x({},"__esModule",{value:!0}),e);var re={};L(re,{For:()=>R,Fragment:()=>I,cleanup:()=>Z,clx:()=>q,component:()=>V,consume:()=>P,h:()=>b,intercept:()=>W,keb:()=>G,propagate:()=>A,provide:()=>O,refresh:()=>k,render:()=>g,stx:()=>D});const I=({children:e})=>e,R=({is:e,key:n,block:l,each:i,by:t,children:s,ref:r,...o})=>b(e??"div",{...o,key:n,block:l,skip:!0,ref:le.bind(null,i,t,s,r)}),b=(e,n,...l)=>{const{length:i}=l;return l=i==0?null:i==1?l[0]:l,{children:l,...n,nodeName:e}},g=(e,n,l)=>{let i=n.firstChild;for(e of y(e)){let t=i;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:s=l,nodeName:r,key:o,block:c,skip:f,children:u,ref:a,...d}=e;for(;t&&!(t.localName==r&&(t.$key??=o)==o);)t=t.nextSibling;t??=X(s,r,o),(c==null||K(t.$deps,t.$deps=c))&&(ee(d,t),f||g(u,t,s),p(a)&&a(t))}t==i?i=i.nextSibling:ne(n,t,i)}for(;i;){const t=i.nextSibling;v(n.removeChild(i)),i=t}},V=e=>({is:n,props:l,key:i,block:t,ref:s,...r})=>b(n??e.is??"div",{...e.props,...l,key:i,block:t,skip:!0,ref:te.bind(null,e,r,s)}),k=e=>{try{g((e.$render??=e.$setup(e))(e.$params),e)}catch(n){A(e,n)}},O=(e,n,l)=>(e.$provisions??=new Map).set(n,l),P=(e,n,l)=>{for(let i;e;e=e.parentNode)if((i=e.$provisions)&&i.has(n))return i.get(n);return l},W=(e,n)=>p(n)&&(e.$interceptor=n),A=(e,n)=>{for(let l;e;e=e.parentNode)if(p(l=e.$interceptor))return g(l(n),e);throw n},Z=(e,n)=>p(n)&&(e.$cleanups??=new Set).add(n),q=e=>j(e).filter(n=>e[n]).join(" ")||null,D=e=>H(e).map(n=>n.join(":")).join(";")||null,G=e=>j(e).reduce((n,l)=>(n[l.replace(_,h).toLowerCase()]=e[l],n),{}),{isArray:$,from:M}=Array,{keys:j,entries:H}=Object,p=e=>typeof e=="function",w=()=>{},S=e=>e.reduce(J,new Map),J=(e,n,l)=>(e.set(n,l),e),K=(e,n)=>$(e)&&$(n)?e.some((l,i)=>l!==n[i]):e!==n,Q=e=>M(e).reduce(U,{}),U=(e,{name:n,value:l})=>(e[n]=l,e),X=(e,n,l)=>{const i=e?document.createElementNS(e,n):document.createElement(n);return i.$key=l,i},m={firstChild:null,insertBefore:e=>m.firstChild??=e},Y={get(e,n){const l=n=="nextSibling"?null:Reflect.get(e,n);return p(l)?l.bind(e):l},set(e,n,l){return Reflect.set(e,n,l)}},_=/([a-z0-9])([A-Z])/g,h="$1-$2",y=function*(e,n={t:""},l=!0){let i;for(e of $(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((i=n.t)&&(n.t="",yield i),yield e):p(e.nodeName)?yield*y(e.nodeName(e),n,!1):$(e)?yield*y(e,n,!1):n.t+=e);l&&(i=n.t)&&(yield i)},ee=(e,n)=>{const l=n.$props??=n.hasAttributes()?Q(n.attributes):{};for(const i in{...l,...n.$props=e}){let t=e[i];t!==l[i]&&(i.startsWith("set:")?n[i.slice(4)]=t:t==null||t===!1?n.removeAttribute(i):n.setAttribute(i,t===!0?"":t))}},ne=(e,n,l)=>{if(n.contains?.(document.activeElement)){const i=n.nextSibling;for(;l&&l!=n;){const t=l.nextSibling;e.insertBefore(l,i),l=t}}else e.insertBefore(n,l)},le=(e,n,l,i,t)=>{e=$(e)?e:[],n=p(n)?n:a=>a,l=p(l)?l:w;const s=t.$for??=new Map,r=a=>{s.delete(a.$by),v(a)},o=e!==t.$each,c=(t.$each=e).length,f=M(t.childNodes),u=new Array(c);o&&s.clear();for(let a,d=0;d<c;d++){const C=e[d],N=n(C,d);a=o?f[d]:s.get(N),m.firstChild=a?new Proxy(a,Y):null,g(l(C,d),m),a??=m.firstChild,m.firstChild=null,s.set(a.$by=N,u[d]=a)}ie(t,f,u,r),p(i)&&i(t)},ie=(e,n,l,i=w)=>{const t=n.length,s=l.length;let r=0,o=0,c,f,u,a,d;for(;r!==t||o!==s;)c=n[r],f=l[o],c===null?r++:s<=o?(r++,i(e.removeChild(c))):t<=r?(o++,e.appendChild(f)):c===f?(r++,o++):(u??=S(n),a??=S(l),a.get(c)==null?(r++,i(e.removeChild(c))):(e.insertBefore(f,c),o++,(d=u.get(f))!=null&&(d>r+1&&r++,n[d]=null)))},te=(e,n,l,i)=>{i.$setup??=p(e)?e:w,i.$params={...e.params,...n},k(i),p(l)&&l(i)},v=e=>{if(e.nodeType==1){for(const n of e.children)v(n);if("$cleanups"in e)for(const n of e.$cleanups)e.$cleanups.delete(n),n(e)}};return z(re);})();

package/package.json

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