ajo 0.0.25 → 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);
@@ -180,7 +181,7 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
     current = null;
     layoutQueue.add(host);
     host.$layoutQueued = true;
-    layoutId ??= task(runLayouts);
+    layoutId ??= task(runLayout);
   }
 }, runIdle = () => {
   idleId = null;
@@ -189,7 +190,7 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
     host.$idle = false;
     schedule(host);
   }
-}, runMutations = (host) => {
+}, runMutation = (host) => {
   if (host.$runQueued)
     return;
   host.$runQueued = true;
@@ -197,11 +198,12 @@ const { isArray, from } = Array, { is } = Object, noop = () => {
     host.$runQueued = false;
     run(host);
   });
-}, runLayouts = () => {
+}, 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;
@@ -211,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);
@@ -259,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')
 
@@ -228,7 +229,7 @@ const
 			current = null
 			layoutQueue.add(host)
 			host.$layoutQueued = true
-			layoutId ??= task(runLayouts)
+			layoutId ??= task(runLayout)
 		}
 	},
 
@@ -243,7 +244,7 @@ const
 		}
 	},
 
-	runMutations = host => {
+	runMutation = host => {
 
 		if (host.$runQueued) return
 
@@ -254,7 +255,7 @@ const
 		})
 	},
 
-	runLayouts = () => {
+	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 u in t)x(e,u,{get:t[u],enumerable:!0})},J=(e,t,u,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let l of W(t))!D.call(e,l)&&l!==u&&x(e,l,{get:()=>t[l],enumerable:!(n=V(t,l))||n.enumerable});return e};var K=e=>J(x({},"__esModule",{value:!0}),e);var $e={};G($e,{Fragment:()=>U,component:()=>X,h:()=>F,render:()=>N,useCallback:()=>h,useCatch:()=>Y,useEffect:()=>te,useHost:()=>p,useLayout:()=>ee,useMemo:()=>S,useReducer:()=>Q,useRef:()=>_,useState:()=>Z});const U=({children:e})=>e,F=(e,t,...u)=>{const{length:n}=u;return u=n==0?null:n==1?u[0]:u,{children:u,...t,nodeName:e}},N=(e,t,u)=>{let n=t.firstChild;for(e of b(e)){let l=n;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=u,nodeName:r,key:i,ref:o,memo:v,children:z,[T]:A,...P}=e;for(;l&&!(l.localName==r&&$(l.$key??=i,i));)l=l.nextSibling;l??=re(a,r,i),ne(o)&&(o.current=l,l.$ref=o),(v==null||w(l.$deps,l.$deps=v))&&(ie(P,l),f(A)?A(l):N(z,l,a))}l==n?n=n.nextSibling:fe(t,l,n)}for(;n;){const l=n.nextSibling;H(n),t.removeChild(n),n=l}},X=e=>({nodeName:t,as:u,props:n,key:l,ref:a,memo:r,...i})=>F(u??e?.as??"c-host",{...e?.props,...n,key:l,ref:a,memo:r,[T]:o=>{o.$fn=f(e)?e:le,o.$args={...e?.args,...i},q(o)}}),Q=(e,t)=>{const u=p(),n=g(),[l,a]=n;return l==a.length&&(a[l]=[f(t)?t():t,r=>{const i=a[l][0],o=f(r)?r(i):r;$(i,a[l][0]=f(e)?e(i,o):o)||ce(u)}]),a[n[0]++]},S=(e,t)=>{const u=g(),[n,l]=u;return(n==l.length||t==null||w(t,l[n][1]))&&(l[n]=[e(),t]),l[u[0]++][0]},Y=e=>{const t=p(),[u,n]=Q(),l=g(),[a,r]=l;return r[l[0]++]=e,t.$catch??=i=>{f(r[a])&&r[a](i),n(i)},[u,()=>n()]},p=()=>c,Z=e=>Q(null,e),_=e=>S(()=>({current:e}),[]),h=(e,t)=>S(()=>e,t),ee=(e,t)=>j(e,t,"$layout"),te=(e,t)=>j(e,t,"$effect"),{isArray:s,from:I}=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((u,n)=>!$(u,t[n])):!$(e,t),ue=e=>I(e).reduce(ae,{}),ae=(e,{name:t,value:u})=>(e[t]=u,e),C=globalThis.queueMicrotask??(e=>e()),E=globalThis.requestAnimationFrame??C,re=(e,t,u)=>{const n=e?document.createElementNS(e,t):document.createElement(t);return n.$key=u,n},b=function*(e,t={data:""},u=!0){let n;for(e of s(e)?e:[e])e==null||typeof e=="boolean"||(typeof e.nodeName=="string"?((n=t.data)&&(t.data="",yield n),yield e):f(e.nodeName)?yield*b(e.nodeName(e),t,!1):s(e)?yield*b(e,t,!1):t.data+=e);u&&(n=t.data)&&(yield n)},ie=(e,t)=>{const u=t.$props??=t.hasAttributes()?ue(t.attributes):{};for(const n in{...u,...t.$props=e}){let l=e[n];l!==u[n]&&(n.startsWith("set:")?t[n.slice(4)]=l:l==null||l===!1?t.removeAttribute(n):t.setAttribute(n,l===!0?"":l))}},fe=(e,t,u)=>{if(t.contains?.(document.activeElement)){const n=t.nextSibling;for(;u&&u!=t;){const l=u.nextSibling;e.insertBefore(u,n),u=l}}else e.insertBefore(t,u)},g=()=>c.$hooks??=[0,[]],j=(e,t,u)=>{const n=p(),l=g(),[a,r]=l;a==r.length?(n[u]??=new Set).add(r[a]=[null,e,t]):(t==null||w(t,r[a][2]))&&(r[a][1]=e,r[a][2]=t),l[0]++},q=e=>{if(!e.$idle){if(globalThis.navigator?.scheduling?.isInputPending()){d.add(e),e.$idle=!0,R??=requestIdleCallback(oe);return}M(e)}},M=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??=E(de)}},oe=()=>{R=null;for(const e of I(d))d.delete(e),e.$idle=!1,q(e)},ce=e=>{e.$runQueued||(e.$runQueued=!0,C(()=>{e.$runQueued=!1,M(e)}))},de=()=>{L=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{B(e,"$layout"),m.add(e),e.$effectQueued=!0,O??=E(se)}}},se=()=>{O=null;for(const e of m)m.delete(e),e.$effectQueued=!1,B(e,"$effect")},B=(e,t)=>{if(e[t])for(const u of e[t]){const[n,l]=u;if(f(l))try{f(n)&&n(),u[0]=l()}catch(a){u[0]=null,k(a,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["$layout","$effect"])if(e[t])for(const u of e[t]){e[t].delete(u);try{const[n]=u;f(n)&&n()}catch(n){k(n,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($e);})();
+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.25",
+  "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 */