ajo 0.0.24 → 0.0.26

package/index.cjs

@@ -25,6 +25,7 @@ __export(ajo_exports, {
   useCatch: () => useCatch,
   useEffect: () => useEffect,
   useHost: () => useHost,
+  useInsert: () => useInsert,
   useLayout: () => useLayout,
   useMemo: () => useMemo,
   useReducer: () => useReducer,
@@ -88,7 +89,7 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
         const prev = stack[i][0], next = isFunction(value) ? value(prev) : value;
         if (is(prev, stack[i][0] = isFunction(fn) ? fn(prev, next) : next))
           return;
-        runMutations(host);
+        runMutation(host);
       }
     ];
   return stack[hooks[0]++];
@@ -105,7 +106,7 @@ const Fragment = ({ children }) => children, h = (nodeName, props, ...children)
     setValue(value2);
   };
   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");
+}, useHost = () => current, useState = (init) => useReducer(null, init), useRef = (current2) => useMemo(() => ({ current: current2 }), []), useCallback = (fn, deps) => useMemo(() => fn, deps), useInsert = (fn, deps) => useFx(fn, deps, "$insert"), useLayout = (fn, deps) => useFx(fn, deps, "$layout"), useEffect = (fn, deps) => useFx(fn, deps, "$effect");
 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);
@@ -160,27 +161,11 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
   if (globalThis.navigator?.scheduling?.isInputPending()) {
     idleQueue.add(host);
     host.$idle = true;
-    idleId ??= requestIdleCallback(() => {
-      idleId = null;
-      const queue = from(idleQueue);
-      for (const host2 of queue) {
-        idleQueue.delete(host2);
-        host2.$idle = false;
-        schedule(host2);
-      }
-    });
+    idleId ??= requestIdleCallback(runIdle);
     return;
   }
-  runComponent(host);
-}, runMutations = (host) => {
-  if (host.$queued)
-    return;
-  host.$queued = true;
-  microtask(() => {
-    host.$queued = false;
-    runComponent(host);
-  });
-}, runComponent = (host) => {
+  run(host);
+}, run = (host) => {
   if (host.$idle) {
     idleQueue.delete(host);
     host.$idle = false;
@@ -196,13 +181,29 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
     current = null;
     layoutQueue.add(host);
     host.$layoutQueued = true;
-    layoutId ??= task(runLayouts);
+    layoutId ??= task(runLayout);
   }
-}, runLayouts = () => {
+}, runIdle = () => {
+  idleId = null;
+  for (const host of from(idleQueue)) {
+    idleQueue.delete(host);
+    host.$idle = false;
+    schedule(host);
+  }
+}, runMutation = (host) => {
+  if (host.$runQueued)
+    return;
+  host.$runQueued = true;
+  microtask(() => {
+    host.$runQueued = false;
+    run(host);
+  });
+}, runLayout = () => {
   layoutId = null;
   for (const host of layoutQueue) {
     layoutQueue.delete(host);
     host.$layoutQueued = false;
+    runFx(host, "$insert");
     try {
       render(host.$h, host);
       host.$h = null;
@@ -212,10 +213,10 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
       runFx(host, "$layout");
       effectQueue.add(host);
       host.$effectQueued = true;
-      effectId ??= task(runEffects);
+      effectId ??= task(runEffect);
     }
   }
-}, runEffects = () => {
+}, runEffect = () => {
   effectId = null;
   for (const host of effectQueue) {
     effectQueue.delete(host);
@@ -260,7 +261,7 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
     effectQueue.delete(host);
     host.$effectQueued = false;
   }
-  for (const key of ["$layout", "$effect"])
+  for (const key of ["$insert", "$layout", "$effect"])
     if (host[key]) {
       for (const fx of host[key]) {
         host[key].delete(fx);

package/index.js

@@ -79,7 +79,7 @@ export const
 
 				if (is(prev, stack[i][0] = isFunction(fn) ? fn(prev, next) : next)) return
 
-				runMutations(host)
+				runMutation(host)
 			}
 		]
 
@@ -115,6 +115,7 @@ export const
 	useRef = current => useMemo(() => ({ current }), []),
 	useCallback = (fn, deps) => useMemo(() => fn, deps),
 
+	useInsert = (fn, deps) => useFx(fn, deps, '$insert'),
 	useLayout = (fn, deps) => useFx(fn, deps, '$layout'),
 	useEffect = (fn, deps) => useFx(fn, deps, '$effect')
 
@@ -200,38 +201,16 @@ const
 		if (host.$idle) return
 
 		if (globalThis.navigator?.scheduling?.isInputPending()) {
-
 			idleQueue.add(host)
 			host.$idle = true
-
-			idleId ??= requestIdleCallback(() => {
-				idleId = null
-				const queue = from(idleQueue)
-				for (const host of queue) {
-					idleQueue.delete(host)
-					host.$idle = false
-					schedule(host)
-				}
-			})
-
+			idleId ??= requestIdleCallback(runIdle)
 			return
 		}
 
-		runComponent(host)
-	},
-
-	runMutations = host => {
-
-		if (host.$queued) return
-
-		host.$queued = true
-		microtask(() => {
-			host.$queued = false
-			runComponent(host)
-		})
+		run(host)
 	},
 
-	runComponent = host => {
+	run = host => {
 
 		if (host.$idle) {
 			idleQueue.delete(host)
@@ -250,11 +229,33 @@ const
 			current = null
 			layoutQueue.add(host)
 			host.$layoutQueued = true
-			layoutId ??= task(runLayouts)
+			layoutId ??= task(runLayout)
+		}
+	},
+
+	runIdle = () => {
+
+		idleId = null
+
+		for (const host of from(idleQueue)) {
+			idleQueue.delete(host)
+			host.$idle = false
+			schedule(host)
 		}
 	},
 
-	runLayouts = () => {
+	runMutation = host => {
+
+		if (host.$runQueued) return
+
+		host.$runQueued = true
+		microtask(() => {
+			host.$runQueued = false
+			run(host)
+		})
+	},
+
+	runLayout = () => {
 
 		layoutId = null
 
@@ -263,6 +264,8 @@ const
 			layoutQueue.delete(host)
 			host.$layoutQueued = false
 
+			runFx(host, '$insert')
+
 			try {
 				render(host.$h, host)
 				host.$h = null
@@ -272,12 +275,12 @@ const
 				runFx(host, '$layout')
 				effectQueue.add(host)
 				host.$effectQueued = true
-				effectId ??= task(runEffects)
+				effectId ??= task(runEffect)
 			}
 		}
 	},
 
-	runEffects = () => {
+	runEffect = () => {
 
 		effectId = null
 
@@ -333,7 +336,7 @@ const
 			host.$effectQueued = false
 		}
 
-		for (const key of ['$layout', '$effect']) if (host[key]) {
+		for (const key of ['$insert', '$layout', '$effect']) if (host[key]) {
 
 			for (const fx of host[key]) {
 

package/index.min.js

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

package/package.json

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

package/readme.md

@@ -7,7 +7,7 @@ ajo is a JavaScript view library for building user interfaces
 npm install ajo
 ```
 
-## render JSX to a DOM element
+## render a JSX element to a DOM element
 
 ```jsx
 /** @jsx h */
@@ -18,7 +18,7 @@ document.body.innerHTML = '<div>Hello World</div>'
 render(<div>Goodbye World</div>, document.body)
 ```
 
-## stateless component
+## function element (stateless)
 
 ```jsx
 /** @jsx h */
@@ -29,7 +29,7 @@ const Greet = ({ name }) => <div>Hello {name}</div>
 render(<Greet name="World" />, document.body)
 ```
 
-## stateful component
+## component element (stateful)
 
 ```jsx
 /** @jsx h */