ajo 0.1.21 → 0.1.22

package/dist/html.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const{isArray:m,from:$}=Array,p="
",{create:v,assign:g,entries:x,prototype:{hasOwnProperty:w},hasOwn:k=(e,t)=>w.call(e,t)}=Object,c=e=>$(d(e)).join(""),d=function*(e){for(e of u(e))if(typeof e=="string")yield f(e);else{const{nodeName:t,skip:o,children:r=""}=e;let n="";for(const[l,i]of x(e))N.has(l)||l.startsWith("set:")||i==null||i===!1||(n+=i===!0?` ${l}`:` ${l}="${f(String(i))}"`);S.has(t)?yield`<${t}${n}>`:o?yield`<${t}${n}></${t}>`:(yield`<${t}${n}>`,typeof r=="string"&&r.startsWith(p)?yield r.slice(1):yield*d(r),yield`</${t}>`)}},u=function*(e,t={value:""},o=!0){for(e of m(e)?e:[e])if(!(e==null||typeof e=="boolean"))if(k(e,"nodeName")){const{value:r}=t,{nodeName:n}=e;if(r&&(yield r,t.value=""),typeof n=="function")if(n.constructor.name==="GeneratorFunction"){const l={},i=g({},n.attrs);for(const a in e){const y=e[a];a.startsWith("attr:")?i[a.slice(5)]=y:l[a]=y}i.nodeName=n.is??"div",i.children=O(n,l),yield i}else yield*u(n(e),t,!1);else yield e}else m(e)?yield*u(e,t,!1):t.value+=e;o&&t.value&&(yield t.value)},S=new Set("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(",")),N=new Set("nodeName,key,skip,memo,ref,children".split(",")),f=e=>e.replace(/[&<>"']/g,t=>`&#${t.charCodeAt(0)};`);let s=null;const O=(e,t)=>{let o,r;try{const n=e.call(o={$args:t,$context:v((s==null?void 0:s.$context)??null),render(){s!==o&&o.next()},next(){const l=s;s=o,r=c(n.next().value),s=l},throw(l){r=c(n.throw(l).value)},return(){n.return()}},t);o.next()}catch(n){o.throw(n)}finally{o.return()}return p+r},j=(e,t=Symbol())=>function(){const o=this??s;return o?arguments.length===0?t in o.$context?o.$context[t]:e:o.$context[t]=arguments[0]:e};exports.context=j;exports.html=d;exports.render=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=Symbol.for("ajo.args"),c=Symbol.for("ajo.context"),f="
",$=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),p=new Set(["key","skip","memo","ref"]),S=new Set(["nodeName","children"].concat(Array.from(p))),m=e=>Array.from(y(e)).join(""),y=function*(e){for(e of N(e))if(typeof e=="string")yield u(e);else{let t="";for(const[n,o]of Object.entries(e))S.has(n)||n.startsWith("set:")||o==null||o===!1||(t+=o===!0?` ${n}`:` ${n}="${u(String(o))}"`);$.has(e.nodeName)?yield`<${e.nodeName}${t}>`:e.skip?yield`<${e.nodeName}${t}></${e.nodeName}>`:(yield`<${e.nodeName}${t}>`,typeof e.children=="string"&&e.children.startsWith(f)?yield e.children.slice(1):yield*y(e.children),yield`</${e.nodeName}>`)}},N=function*(e,t={h:""},n=!0){for(e of Array.isArray(e)?e.flat(1/0):[e]){const o=typeof e;if(!(e==null||o==="boolean"))if(o==="object"&&"nodeName"in e)if(t.h&&(yield t.h,t.h=""),typeof e.nodeName=="function")if(e.nodeName.constructor.name==="GeneratorFunction"){const r=Object.assign({},e.nodeName.attrs),l=Object.assign({},e.nodeName.args);for(const a in e){const d=e[a];a.startsWith("attr:")?r[a.slice(5)]=d:p.has(a)||a.startsWith("set:")?r[a]=d:l[a]=d}r.nodeName=e.nodeName.is??"div",r.children=b(e.nodeName,l),yield r}else yield*N(e.nodeName(e),t,!1);else yield e;else t.h+=e}n&&t.h&&(yield t.h)},u=e=>e.replace(/[&<>"']/g,t=>`&#${t.charCodeAt(0)};`),s=()=>{};let i=null;const b=(e,t)=>{let n,o;try{const r=e.call(n={*[Symbol.iterator](){for(;;)yield t},[g]:t,[c]:Object.create((i==null?void 0:i[c])??null),render:s,queueMicrotask:s,requestAnimationFrame:s,effect:s,cleanup:s,next(){if(i===n)return;const l=i;i=n,o=m(r.next().value),i=l},throw(l){o=m(r.throw(l).value)},return(){r.return()}},t);n.next()}catch(r){n.throw(r)}finally{n.return()}return f+o},j=(e,t=Symbol())=>function(...n){const o=this??i;return o?n.length==0?t in o[c]?o[c][t]:e:o[c][t]=n[0]:e};exports.context=j;exports.html=y;exports.render=m;

package/dist/html.js

@@ -1,65 +1,72 @@
-const { isArray: d, from: $ } = Array, m = "
", { create: v, assign: x, entries: g, prototype: { hasOwnProperty: w }, hasOwn: k = (e, t) => w.call(e, t) } = Object, y = (e) => $(p(e)).join(""), p = function* (e) {
-  for (e of c(e))
-    if (typeof e == "string") yield f(e);
+const $ = Symbol.for("ajo.args"), c = Symbol.for("ajo.context"), f = "
", g = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), u = /* @__PURE__ */ new Set(["key", "skip", "memo", "ref"]), S = new Set(["nodeName", "children"].concat(Array.from(u))), m = (e) => Array.from(p(e)).join(""), p = function* (e) {
+  for (e of N(e))
+    if (typeof e == "string") yield y(e);
     else {
-      const { nodeName: t, skip: o, children: l = "" } = e;
-      let n = "";
-      for (const [r, i] of g(e))
-        S.has(r) || r.startsWith("set:") || i == null || i === !1 || (n += i === !0 ? ` ${r}` : ` ${r}="${f(String(i))}"`);
-      N.has(t) ? yield `<${t}${n}>` : o ? yield `<${t}${n}></${t}>` : (yield `<${t}${n}>`, typeof l == "string" && l.startsWith(m) ? yield l.slice(1) : yield* p(l), yield `</${t}>`);
+      let t = "";
+      for (const [n, o] of Object.entries(e))
+        S.has(n) || n.startsWith("set:") || o == null || o === !1 || (t += o === !0 ? ` ${n}` : ` ${n}="${y(String(o))}"`);
+      g.has(e.nodeName) ? yield `<${e.nodeName}${t}>` : e.skip ? yield `<${e.nodeName}${t}></${e.nodeName}>` : (yield `<${e.nodeName}${t}>`, typeof e.children == "string" && e.children.startsWith(f) ? yield e.children.slice(1) : yield* p(e.children), yield `</${e.nodeName}>`);
     }
-}, c = function* (e, t = { value: "" }, o = !0) {
-  for (e of d(e) ? e : [e])
-    if (!(e == null || typeof e == "boolean"))
-      if (k(e, "nodeName")) {
-        const { value: l } = t, { nodeName: n } = e;
-        if (l && (yield l, t.value = ""), typeof n == "function")
-          if (n.constructor.name === "GeneratorFunction") {
-            const r = {}, i = x({}, n.attrs);
+}, N = function* (e, t = { h: "" }, n = !0) {
+  for (e of Array.isArray(e) ? e.flat(1 / 0) : [e]) {
+    const o = typeof e;
+    if (!(e == null || o === "boolean"))
+      if (o === "object" && "nodeName" in e)
+        if (t.h && (yield t.h, t.h = ""), typeof e.nodeName == "function")
+          if (e.nodeName.constructor.name === "GeneratorFunction") {
+            const r = Object.assign({}, e.nodeName.attrs), l = Object.assign({}, e.nodeName.args);
             for (const a in e) {
-              const u = e[a];
-              a.startsWith("attr:") ? i[a.slice(5)] = u : r[a] = u;
+              const d = e[a];
+              a.startsWith("attr:") ? r[a.slice(5)] = d : u.has(a) || a.startsWith("set:") ? r[a] = d : l[a] = d;
             }
-            i.nodeName = n.is ?? "div", i.children = A(n, r), yield i;
-          } else yield* c(n(e), t, !1);
+            r.nodeName = e.nodeName.is ?? "div", r.children = j(e.nodeName, l), yield r;
+          } else yield* N(e.nodeName(e), t, !1);
         else yield e;
-      } else d(e) ? yield* c(e, t, !1) : t.value += e;
-  o && t.value && (yield t.value);
-}, N = new Set("area,base,br,col,command,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(",")), S = new Set("nodeName,key,skip,memo,ref,children".split(",")), f = (e) => e.replace(/[&<>"']/g, (t) => `&#${t.charCodeAt(0)};`);
-let s = null;
-const A = (e, t) => {
-  let o, l;
+      else t.h += e;
+  }
+  n && t.h && (yield t.h);
+}, y = (e) => e.replace(/[&<>"']/g, (t) => `&#${t.charCodeAt(0)};`), s = () => {
+};
+let i = null;
+const j = (e, t) => {
+  let n, o;
   try {
-    const n = e.call(o = {
-      $args: t,
-      $context: v((s == null ? void 0 : s.$context) ?? null),
-      render() {
-        s !== o && o.next();
+    const r = e.call(n = {
+      *[Symbol.iterator]() {
+        for (; ; ) yield t;
       },
+      [$]: t,
+      [c]: Object.create((i == null ? void 0 : i[c]) ?? null),
+      render: s,
+      queueMicrotask: s,
+      requestAnimationFrame: s,
+      effect: s,
+      cleanup: s,
       next() {
-        const r = s;
-        s = o, l = y(n.next().value), s = r;
+        if (i === n) return;
+        const l = i;
+        i = n, o = m(r.next().value), i = l;
       },
-      throw(r) {
-        l = y(n.throw(r).value);
+      throw(l) {
+        o = m(r.throw(l).value);
       },
       return() {
-        n.return();
+        r.return();
       }
     }, t);
-    o.next();
-  } catch (n) {
-    o.throw(n);
+    n.next();
+  } catch (r) {
+    n.throw(r);
   } finally {
-    o.return();
+    n.return();
   }
-  return m + l;
-}, O = (e, t = Symbol()) => function() {
-  const o = this ?? s;
-  return o ? arguments.length === 0 ? t in o.$context ? o.$context[t] : e : o.$context[t] = arguments[0] : e;
+  return f + o;
+}, w = (e, t = Symbol()) => function(...n) {
+  const o = this ?? i;
+  return o ? n.length == 0 ? t in o[c] ? o[c][t] : e : o[c][t] = n[0] : e;
 };
 export {
-  O as context,
+  w as context,
   p as html,
-  y as render
+  m as render
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=({children:t})=>t,N=function(t,n){return(n??(n=$(null))).nodeName=t,"children"in n||arguments.length<3||(n.children=arguments.length===3?arguments[2]:k.call(arguments,2)),n},d=(t,n)=>{let e=n.firstChild;for(t of h(t)){let o=e;if(typeof t=="string"){for(;o&&o.nodeType!=3;)o=o.nextSibling;o?o.data!=t&&(o.data=t):o=document.createTextNode(t)}else{const{nodeName:i,key:a,skip:c,memo:s,ref:f,children:w}=t;for(;o&&!(o.localName===i&&(o.$key??(o.$key=a))==a);)o=o.nextSibling;if(o??(o=m(document.createElementNS(t.xmlns??i==="svg"?O:n.namespaceURI,i),{$key:a})),s==null||F(o.$memo,o.$memo=s)){const{$props:y}=o,x={};for(const l of p(m({},y,t))){if(T.has(l))continue;const u=x[l]=t[l];u!==(y==null?void 0:y[l])&&(l.startsWith("set:")?o[l.slice(4)]=u:u==null||u===!1?o.removeAttribute(l):o.setAttribute(l,u===!0?"":u))}o.$props=x,c||d(w,o),typeof f=="function"&&(o.$ref=f)(o)}}o===e?e=e.nextSibling:C(n,o,e)}for(;e;){const o=e.nextSibling;e.nodeType===1&&v(e),n.removeChild(e),e=o}},{isArray:g,prototype:{slice:k}}=Array,{create:$,assign:m,keys:p,prototype:{hasOwnProperty:b},hasOwn:A=(t,n)=>b.call(t,n)}=Object,O="http://www.w3.org/2000/svg",T=new Set("nodeName,key,skip,memo,ref,children".split(",")),F=(t,n)=>g(t)&&g(n)?t.some((e,o)=>e!==n[o]):t!==n,h=function*(t,n={value:""},e=!0){for(t of g(t)?t:[t])if(!(t==null||typeof t=="boolean"))if(A(t,"nodeName")){const{value:o}=n,{nodeName:i}=t;if(o&&(yield o,n.value=""),typeof i=="function")if(i.constructor.name==="GeneratorFunction"){const a={},c=m({},i.attrs);for(const s of p(t)){const f=t[s];s.startsWith("attr:")?c[s.slice(5)]=f:s==="key"||s==="memo"?c[s]=f:a[s]=f}c.nodeName=i.is??"div",c.skip=!0,c.ref=j.bind(null,i,a),yield c}else yield*h(i(t),n,!1);else yield t}else g(t)?yield*h(t,n,!1):n.value+=t;e&&n.value&&(yield n.value)},j=(t,n,e)=>{if(!e)return;e.$generator??(e.$generator=(m(e,E),e.$context??(e.$context=$((r==null?void 0:r.$context)??null)),t));const{skip:o,ref:i,...a}=n;e.$ref=B.bind(null,i,e),m(e.$args??(e.$args={}),a),o||e.next()},B=(t,n,e)=>{typeof t=="function"&&t(e),e||n.return()},C=(t,n,e)=>{if(n.contains(document.activeElement)){const o=n.nextSibling;for(;e&&e!=n;){const i=e.nextSibling;t.insertBefore(e,o),e=i}}else t.insertBefore(n,e)},v=t=>{for(const e of t.children)v(e);const{$ref:n}=t;typeof n=="function"&&n(null)};let r=null;const E={render(){r!=null&&r.contains(this)||this.next()},next(){const t=r;r=this;try{d((this.$iterator??(this.$iterator=this.$generator.call(this,this.$args))).next().value,this),typeof this.$ref=="function"&&this.$ref(this)}catch(n){this.throw(n)}finally{r=t}},throw(t){var n;for(let e=this;e;e=e.parentNode)if(typeof((n=e.$iterator)==null?void 0:n.throw)=="function")try{return d(e.$iterator.throw(t).value,e)}catch{}throw t},return(){var t;try{(t=this.$iterator)==null||t.return()}catch(n){this.throw(n)}finally{this.$iterator=null}}},P=(t,n=Symbol())=>function(){const e=this??r;return e?arguments.length===0?n in e.$context?e.$context[n]:t:e.$context[n]=arguments[0]:t};exports.Fragment=S;exports.context=P;exports.h=N;exports.render=d;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=Symbol.for("ajo.key"),k=Symbol.for("ajo.memo"),p=Symbol.for("ajo.ref"),v=Symbol.for("ajo.cache"),T=new Set(["nodeName","children","key","skip","memo","ref"]),W=t=>t.children,B=(t,n,...e)=>((n??(n={})).nodeName=t,!("children"in n)&&e.length&&(n.children=e.length==1?e[0]:e),n),S=(t,n,e=n.firstChild,i)=>{for(t of O(t)){let o=e;if(typeof t=="string"){for(;o&&o.nodeType!=3;)o=o.nextSibling;o?o.data!=t&&(o.data=t):o=document.createTextNode(t)}else if(t instanceof Node)o=t;else{for(;o&&!(o.localName==t.nodeName&&(o[b]??(o[b]=t.key))==t.key);)o=o.nextSibling;if(o??(o=Object.assign(document.createElementNS(t.xmlns??n.namespaceURI,t.nodeName),{[b]:t.key})),t.memo==null||R(o[k],o[k]=t.memo)){let s,m={},w=o[v]??Array.from(o.attributes).reduce((r,N)=>(r[N.name]=N.value,r),{});for(const r of Object.keys(Object.assign({},w,t)))T.has(r)||w[r]===(s=m[r]=t[r])||(r.startsWith("set:")?o[r.slice(4)]=s:s==null||s===!1?o.removeAttribute(r):o.setAttribute(r,s===!0?"":s));o[v]=m,t.skip||S(t.children,o),typeof t.ref=="function"&&(o[p]=t.ref)(o)}}o===e?e=e.nextSibling:I(n,o,e)}for(;e&&e!=i;){const o=e.nextSibling;e.nodeType==1&&C(e),n.removeChild(e),e=o}},R=(t,n)=>Array.isArray(t)&&Array.isArray(n)?t.some((e,i)=>e!==n[i]):t!==n,O=function*(t,n={h:""},e=!0){for(t of Array.isArray(t)?t.flat(1/0):[t])if(!(t==null||typeof t=="boolean"))if(typeof t=="object"&&"nodeName"in t)if(n.h&&(yield n.h,n.h=""),typeof t.nodeName=="function")if(t.nodeName.constructor.name=="GeneratorFunction"){const i=Object.assign({},t.nodeName.attrs),o=Object.assign({},t.nodeName.args);for(const s in t){const m=t[s];s.startsWith("attr:")?i[s.slice(5)]=m:s=="key"||s=="memo"||s.startsWith("set:")?i[s]=m:o[s]=m}i.nodeName=t.nodeName.is??"div",i.skip=!0,i.ref=P.bind(null,t.nodeName,o),yield i}else yield*O(t.nodeName(t),n,!1);else yield t;else n.h+=t;e&&n.h&&(yield n.h)},I=(t,n,e)=>{if(n.contains(document.activeElement)){const i=n.nextSibling;for(;e&&e!=n;){const o=e.nextSibling;t.insertBefore(e,i),e=o}}else t.insertBefore(n,e)},C=t=>{var n;for(const e of t.children)C(e);(n=t[p])==null||n.call(t,null)},g=Symbol.for("ajo.generator"),f=Symbol.for("ajo.iterator"),l=Symbol.for("ajo.args"),d=Symbol.for("ajo.context"),y=Symbol.for("ajo.effects"),c=Symbol.for("ajo.disposers"),h=Symbol.for("ajo.cleanups"),P=(t,n,e)=>{if(!e)return;e[g]??(e[g]=(Object.assign(e,G),e[d]=Object.create((a==null?void 0:a[d])??null),t));const{skip:i,ref:o,...s}=n;e[p]=U.bind(null,o,e),Object.assign(e[l]??(e[l]={}),s),i||e.next()},U=(t,n,e)=>{typeof t=="function"&&t(e),e||n.return()},M=t=>t.isConnected&&t.render(),u=(t,n=y)=>{var e;if(n==y)for(const i of t.children)u(i,n);if((e=t[n])!=null&&e.size)for(const i of t[n]){t[n].delete(i);try{const o=i();n==y&&typeof o=="function"&&(t[c]??(t[c]=new Set)).add(o)}catch(o){t.throw(o)}}},x=(t,n)=>{for(const e of t.set)n(e);t.set.clear(),t.queued=!1},z=()=>queueMicrotask.bind(null,x.bind(null,z,M)),E=()=>requestAnimationFrame.bind(null,x.bind(null,E,M)),F=()=>{const t=new MessageChannel;return t.port1.onmessage=x.bind(null,F,u),t.port2.postMessage.bind(t.port2,null)},j=(t,n)=>{t.queued||((t.run??(t.run=t()))(),t.queued=!0);const e=t.set??(t.set=new Set);for(const i of e){if(i.contains(n))return;n.contains(i)&&e.delete(i)}e.add(n)},A=(t,n,e)=>{if(typeof e=="function")return(t[n]??(t[n]=new Set)).add(e),()=>t[n].delete(e)};let a=null;const G={*[Symbol.iterator](){for(;;)yield this[l]},render(){a!=null&&a.contains(this)||this.next()},queueMicrotask(){j(z,this)},requestAnimationFrame(){j(E,this)},effect(t){return A(this,y,t)},cleanup(t){return A(this,h,t)},next(){var n,e,i;const t=a;a=this;try{(n=this[c])!=null&&n.size&&u(this,c);const o=(this[f]??(this[f]=this[g].call(this,this[l]))).next();(e=this[y])!=null&&e.size&&j(F,this),S(o.value,this),(i=this[p])==null||i.call(this,this),o.done&&this.return()}catch(o){this.throw(o)}finally{a=t}},throw(t){var n;for(let e=this;e;e=e.parentNode)if(typeof((n=e[f])==null?void 0:n.throw)=="function")try{return S(e[f].throw(t).value,e)}catch(i){t=new Error(i instanceof Error?i.message:i,{cause:t})}throw t},return(){var t,n,e;try{(t=this[c])!=null&&t.size&&u(this,c),(n=this[h])!=null&&n.size&&u(this,h),(e=this[f])==null||e.return()}catch(i){this.throw(i)}finally{this[f]=null}}},H=(t,n=Symbol())=>function(...e){const i=this??a;return i?e.length==0?n in i[d]?i[d][n]:t:i[d][n]=e[0]:t};exports.Fragment=W;exports.context=H;exports.h=B;exports.render=S;

package/dist/index.js

@@ -1,109 +1,151 @@
-const F = ({ children: t }) => t, W = function(t, n) {
-  return (n ?? (n = h(null))).nodeName = t, "children" in n || arguments.length < 3 || (n.children = arguments.length === 3 ? arguments[2] : N.call(arguments, 2)), n;
-}, g = (t, n) => {
-  let e = n.firstChild;
-  for (t of x(t)) {
-    let i = e;
+const b = Symbol.for("ajo.key"), k = Symbol.for("ajo.memo"), S = Symbol.for("ajo.ref"), A = Symbol.for("ajo.cache"), T = /* @__PURE__ */ new Set(["nodeName", "children", "key", "skip", "memo", "ref"]), G = (t) => t.children, H = (t, e, ...n) => ((e ?? (e = {})).nodeName = t, !("children" in e) && n.length && (e.children = n.length == 1 ? n[0] : n), e), x = (t, e, n = e.firstChild, i) => {
+  for (t of O(t)) {
+    let o = n;
     if (typeof t == "string") {
-      for (; i && i.nodeType != 3; ) i = i.nextSibling;
-      i ? i.data != t && (i.data = t) : i = document.createTextNode(t);
-    } else {
-      const { nodeName: o, key: a, skip: c, memo: s, ref: f, children: w } = t;
-      for (; i && !(i.localName === o && (i.$key ?? (i.$key = a)) == a); ) i = i.nextSibling;
-      if (i ?? (i = m(document.createElementNS(t.xmlns ?? o === "svg" ? b : n.namespaceURI, o), { $key: a })), s == null || O(i.$memo, i.$memo = s)) {
-        const { $props: y } = i, $ = {};
-        for (const l of p(m({}, y, t))) {
-          if (A.has(l)) continue;
-          const u = $[l] = t[l];
-          u !== (y == null ? void 0 : y[l]) && (l.startsWith("set:") ? i[l.slice(4)] = u : u == null || u === !1 ? i.removeAttribute(l) : i.setAttribute(l, u === !0 ? "" : u));
-        }
-        i.$props = $, c || g(w, i), typeof f == "function" && (i.$ref = f)(i);
+      for (; o && o.nodeType != 3; ) o = o.nextSibling;
+      o ? o.data != t && (o.data = t) : o = document.createTextNode(t);
+    } else if (t instanceof Node)
+      o = t;
+    else {
+      for (; o && !(o.localName == t.nodeName && (o[b] ?? (o[b] = t.key)) == t.key); ) o = o.nextSibling;
+      if (o ?? (o = Object.assign(document.createElementNS(t.xmlns ?? e.namespaceURI, t.nodeName), { [b]: t.key })), t.memo == null || W(o[k], o[k] = t.memo)) {
+        let s, m = {}, w = o[A] ?? Array.from(o.attributes).reduce((r, N) => (r[N.name] = N.value, r), {});
+        for (const r of Object.keys(Object.assign({}, w, t)))
+          T.has(r) || w[r] === (s = m[r] = t[r]) || (r.startsWith("set:") ? o[r.slice(4)] = s : s == null || s === !1 ? o.removeAttribute(r) : o.setAttribute(r, s === !0 ? "" : s));
+        o[A] = m, t.skip || x(t.children, o), typeof t.ref == "function" && (o[S] = t.ref)(o);
       }
     }
-    i === e ? e = e.nextSibling : C(n, i, e);
+    o === n ? n = n.nextSibling : B(e, o, n);
   }
-  for (; e; ) {
-    const i = e.nextSibling;
-    e.nodeType === 1 && v(e), n.removeChild(e), e = i;
+  for (; n && n != i; ) {
+    const o = n.nextSibling;
+    n.nodeType == 1 && C(n), e.removeChild(n), n = o;
   }
-}, { isArray: d, prototype: { slice: N } } = Array, { create: h, assign: m, keys: p, prototype: { hasOwnProperty: S }, hasOwn: k = (t, n) => S.call(t, n) } = Object, b = "http://www.w3.org/2000/svg", A = new Set("nodeName,key,skip,memo,ref,children".split(",")), O = (t, n) => d(t) && d(n) ? t.some((e, i) => e !== n[i]) : t !== n, x = function* (t, n = { value: "" }, e = !0) {
-  for (t of d(t) ? t : [t])
+}, W = (t, e) => Array.isArray(t) && Array.isArray(e) ? t.some((n, i) => n !== e[i]) : t !== e, O = function* (t, e = { h: "" }, n = !0) {
+  for (t of Array.isArray(t) ? t.flat(1 / 0) : [t])
     if (!(t == null || typeof t == "boolean"))
-      if (k(t, "nodeName")) {
-        const { value: i } = n, { nodeName: o } = t;
-        if (i && (yield i, n.value = ""), typeof o == "function")
-          if (o.constructor.name === "GeneratorFunction") {
-            const a = {}, c = m({}, o.attrs);
-            for (const s of p(t)) {
-              const f = t[s];
-              s.startsWith("attr:") ? c[s.slice(5)] = f : s === "key" || s === "memo" ? c[s] = f : a[s] = f;
+      if (typeof t == "object" && "nodeName" in t)
+        if (e.h && (yield e.h, e.h = ""), typeof t.nodeName == "function")
+          if (t.nodeName.constructor.name == "GeneratorFunction") {
+            const i = Object.assign({}, t.nodeName.attrs), o = Object.assign({}, t.nodeName.args);
+            for (const s in t) {
+              const m = t[s];
+              s.startsWith("attr:") ? i[s.slice(5)] = m : s == "key" || s == "memo" || s.startsWith("set:") ? i[s] = m : o[s] = m;
             }
-            c.nodeName = o.is ?? "div", c.skip = !0, c.ref = T.bind(null, o, a), yield c;
-          } else yield* x(o(t), n, !1);
+            i.nodeName = t.nodeName.is ?? "div", i.skip = !0, i.ref = R.bind(null, t.nodeName, o), yield i;
+          } else yield* O(t.nodeName(t), e, !1);
         else yield t;
-      } else d(t) ? yield* x(t, n, !1) : n.value += t;
-  e && n.value && (yield n.value);
-}, T = (t, n, e) => {
-  if (!e) return;
-  e.$generator ?? (e.$generator = (m(e, E), e.$context ?? (e.$context = h((r == null ? void 0 : r.$context) ?? null)), t));
-  const { skip: i, ref: o, ...a } = n;
-  e.$ref = B.bind(null, o, e), m(e.$args ?? (e.$args = {}), a), i || e.next();
-}, B = (t, n, e) => {
-  typeof t == "function" && t(e), e || n.return();
-}, C = (t, n, e) => {
-  if (n.contains(document.activeElement)) {
-    const i = n.nextSibling;
-    for (; e && e != n; ) {
-      const o = e.nextSibling;
-      t.insertBefore(e, i), e = o;
+      else e.h += t;
+  n && e.h && (yield e.h);
+}, B = (t, e, n) => {
+  if (e.contains(document.activeElement)) {
+    const i = e.nextSibling;
+    for (; n && n != e; ) {
+      const o = n.nextSibling;
+      t.insertBefore(n, i), n = o;
+    }
+  } else t.insertBefore(e, n);
+}, C = (t) => {
+  var e;
+  for (const n of t.children) C(n);
+  (e = t[S]) == null || e.call(t, null);
+}, g = Symbol.for("ajo.generator"), f = Symbol.for("ajo.iterator"), l = Symbol.for("ajo.args"), d = Symbol.for("ajo.context"), y = Symbol.for("ajo.effects"), c = Symbol.for("ajo.disposers"), p = Symbol.for("ajo.cleanups"), R = (t, e, n) => {
+  if (!n) return;
+  n[g] ?? (n[g] = (Object.assign(n, U), n[d] = Object.create((a == null ? void 0 : a[d]) ?? null), t));
+  const { skip: i, ref: o, ...s } = e;
+  n[S] = I.bind(null, o, n), Object.assign(n[l] ?? (n[l] = {}), s), i || n.next();
+}, I = (t, e, n) => {
+  typeof t == "function" && t(n), n || e.return();
+}, z = (t) => t.isConnected && t.render(), u = (t, e = y) => {
+  var n;
+  if (e == y) for (const i of t.children) u(i, e);
+  if ((n = t[e]) != null && n.size) for (const i of t[e]) {
+    t[e].delete(i);
+    try {
+      const o = i();
+      e == y && typeof o == "function" && (t[c] ?? (t[c] = /* @__PURE__ */ new Set())).add(o);
+    } catch (o) {
+      t.throw(o);
     }
-  } else t.insertBefore(n, e);
-}, v = (t) => {
-  for (const e of t.children) v(e);
-  const { $ref: n } = t;
-  typeof n == "function" && n(null);
+  }
+}, j = (t, e) => {
+  for (const n of t.set) e(n);
+  t.set.clear(), t.queued = !1;
+}, E = () => queueMicrotask.bind(null, j.bind(null, E, z)), M = () => requestAnimationFrame.bind(null, j.bind(null, M, z)), F = () => {
+  const t = new MessageChannel();
+  return t.port1.onmessage = j.bind(null, F, u), t.port2.postMessage.bind(t.port2, null);
+}, h = (t, e) => {
+  t.queued || ((t.run ?? (t.run = t()))(), t.queued = !0);
+  const n = t.set ?? (t.set = /* @__PURE__ */ new Set());
+  for (const i of n) {
+    if (i.contains(e)) return;
+    e.contains(i) && n.delete(i);
+  }
+  n.add(e);
+}, v = (t, e, n) => {
+  if (typeof n == "function")
+    return (t[e] ?? (t[e] = /* @__PURE__ */ new Set())).add(n), () => t[e].delete(n);
 };
-let r = null;
-const E = {
+let a = null;
+const U = {
+  *[Symbol.iterator]() {
+    for (; ; ) yield this[l];
+  },
   render() {
-    r != null && r.contains(this) || this.next();
+    a != null && a.contains(this) || this.next();
+  },
+  queueMicrotask() {
+    h(E, this);
+  },
+  requestAnimationFrame() {
+    h(M, this);
+  },
+  effect(t) {
+    return v(this, y, t);
+  },
+  cleanup(t) {
+    return v(this, p, t);
   },
   next() {
-    const t = r;
-    r = this;
+    var e, n, i;
+    const t = a;
+    a = this;
     try {
-      g((this.$iterator ?? (this.$iterator = this.$generator.call(this, this.$args))).next().value, this), typeof this.$ref == "function" && this.$ref(this);
-    } catch (n) {
-      this.throw(n);
+      (e = this[c]) != null && e.size && u(this, c);
+      const o = (this[f] ?? (this[f] = this[g].call(this, this[l]))).next();
+      (n = this[y]) != null && n.size && h(F, this), x(o.value, this), (i = this[S]) == null || i.call(this, this), o.done && this.return();
+    } catch (o) {
+      this.throw(o);
     } finally {
-      r = t;
+      a = t;
     }
   },
   throw(t) {
-    var n;
-    for (let e = this; e; e = e.parentNode) if (typeof ((n = e.$iterator) == null ? void 0 : n.throw) == "function") try {
-      return g(e.$iterator.throw(t).value, e);
-    } catch {
+    var e;
+    for (let n = this; n; n = n.parentNode) if (typeof ((e = n[f]) == null ? void 0 : e.throw) == "function") try {
+      return x(n[f].throw(t).value, n);
+    } catch (i) {
+      t = new Error(i instanceof Error ? i.message : i, { cause: t });
     }
     throw t;
   },
   return() {
-    var t;
+    var t, e, n;
     try {
-      (t = this.$iterator) == null || t.return();
-    } catch (n) {
-      this.throw(n);
+      (t = this[c]) != null && t.size && u(this, c), (e = this[p]) != null && e.size && u(this, p), (n = this[f]) == null || n.return();
+    } catch (i) {
+      this.throw(i);
     } finally {
-      this.$iterator = null;
+      this[f] = null;
     }
   }
-}, j = (t, n = Symbol()) => function() {
-  const e = this ?? r;
-  return e ? arguments.length === 0 ? n in e.$context ? e.$context[n] : t : e.$context[n] = arguments[0] : t;
+}, J = (t, e = Symbol()) => function(...n) {
+  const i = this ?? a;
+  return i ? n.length == 0 ? e in i[d] ? i[d][e] : t : i[d][e] = n[0] : t;
 };
 export {
-  F as Fragment,
-  j as context,
-  W as h,
-  g as render
+  G as Fragment,
+  J as context,
+  H as h,
+  x as render
 };

package/license

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2024, Cristian Falcone
+Copyright (c) 2022-2025, Cristian Falcone
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.1.21",
+  "version": "0.1.22",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "./dist/index.js",
@@ -8,14 +8,14 @@
   "types": "./types.ts",
   "exports": {
     ".": {
+      "types": "./types.ts",
       "import": "./dist/index.js",
-      "require": "./dist/index.cjs",
-      "types": "./types.ts"
+      "require": "./dist/index.cjs"
     },
     "./html": {
+      "types": "./types.ts",
       "import": "./dist/html.js",
-      "require": "./dist/html.cjs",
-      "types": "./types.ts"
+      "require": "./dist/html.cjs"
     }
   },
   "files": [
@@ -23,10 +23,11 @@
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "^22.2.0",
-    "jsdom": "24.1.1",
-    "vite": "5.4.0",
-    "vitest": "2.0.5"
+    "@types/node": "22.15.29",
+    "happy-dom": "17.6.1",
+    "vite": "6.3.5",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.2.0"
   },
   "keywords": [
     "ui",

package/readme.md

@@ -40,6 +40,7 @@ import { h, render } from 'ajo'
 const Greeting = ({ name }) => <h1>Hello, {name}!</h1>
 
 function* Counter() {
+
   let count = 0
 
   const increment = () => {
@@ -47,25 +48,21 @@ function* Counter() {
     this.render()
   }
 
-  while (true) {
-    yield (
-      <>
-        <p>Count: {count}</p>
-        <button set:onclick={increment}>Increment</button>
-      </>
-    )
-  }
+  while (true) yield (
+    <>
+      <p>Count: {count}</p>
+      <button set:onclick={increment}>Increment</button>
+    </>
+  )
 }
 
 function* App() {
-  while (true) {
-    yield (
-      <>
-        <Greeting name="Ajo Developer" />
-        <Counter />
-      </>
-    )
-  }
+  while (true) yield (
+    <>
+      <Greeting name="Ajo Developer" />
+      <Counter />
+    </>
+  )
 }
 
 render(<App />, document.body)
@@ -124,57 +121,64 @@ Stateful components use generator functions:
 
 ```jsx
 function* Counter() {
+
   let count = 0
-  while (true) {
-    yield (
-      <button set:onclick={() => { count++; this.render(); }}>
-        {count}
-      </button>
-    )
-  }
+
+  while (true) yield (
+    <button set:onclick={() => { count++; this.render(); }}>
+      {count}
+    </button>
+  )
 }
 ```
 
 State handling in Ajo is straightforward:
 - State is managed using regular variables within the generator function.
 - The `this.render()` method triggers a re-render when state changes.
+- The `this.cleanup()` method is used to clean up resources when the component unmounts.
 - Each iteration of the generator function represents a new render cycle.
 
 ```jsx
 function* Timer() {
+
   let seconds = 0
+
   const intervalId = setInterval(() => {
     seconds++
     this.render()  // Trigger a re-render
   }, 1000)
 
-  try {
-    while (true) {
-      yield <div>Seconds: {seconds}</div>
-    }
-  } finally {
-    clearInterval(intervalId)  // Cleanup
-  }
+  this.cleanup(() => clearInterval(intervalId))  // Cleanup
+
+  while (true) yield <div>Seconds: {seconds}</div>
 }
 ```
 
 ### Component Lifecycle
 
-Stateful components have a simple lifecycle:
-- Initialization: When the generator is first called
-- Rendering: Each time the generator yields
-- Cleanup: When the generator's `finally` block is executed
+Stateful components have a simple lifecycle pattern:
+- After mount: Component's element is mounted and the generator function is called. You can initialize resources here.
+- Before render: Before component's children render
+- After render: After component's children render
+- Before re-render: Before component's children re-render
+- Before unmount: Component's element is about to be unmounted. You can clean up resources here.
 
 ```jsx
 function* LifecycleDemo() {
-  console.log('Initialized')
-  try {
-    while (true) {
-      console.log('Rendering')
-      yield <div>Hello, Ajo!</div>
-    }
-  } finally {
-    console.log('Cleanup')
+
+  console.log('After mount')
+
+  this.cleanup(() => console.log('Before unmount'))
+
+  while (true) {
+
+    console.log('Before render')
+
+    this.effect(() => console.log('After render'))
+
+    yield <div>Hello, Ajo!</div>
+
+    console.log('Before re-render')
   }
 }
 ```
@@ -195,21 +199,30 @@ CustomButton.is = 'button'
 </CustomButton>
 ```
 
-### Component.attrs and Component.is
+### Component.attrs, Component.args and Component.is
 
 Use `Component.attrs` to set default attributes for a component:
 
 ```jsx
-function* CustomButton(props) {
+function* CustomButton(args) {
   while (true) yield <>{props.children}</>
 }
 CustomButton.attrs = { class: 'btn btn-primary' }
 ```
 
+Use `Component.args` to set default arguments for a component:
+
+```jsx
+function* Greeting(args) {
+  while (true) yield <>Hello, {props.name}!</>
+}
+Greeting.args = { name: 'Guest' }
+```
+
 Use `Component.is` to specify the HTML element for a component:
 
 ```jsx
-function* CustomInput(props) {
+function* CustomInput(args) {
   while (true) yield <>{props.children}</>
 }
 CustomInput.is = 'input'
@@ -271,11 +284,13 @@ function* StatefulComponent() {
 
 // Setting context value:
 function* App() {
+
   ThemeContext('dark')
+
   while (true) {
     yield (
       <>
-        <FunctionalComponent />
+        <StatelessComponent />
         <StatefulComponent />
       </>
     )
@@ -302,65 +317,120 @@ Component methods:
 
   ```javascript
   function* Counter() {
+
     let count = 0
+
     const increment = () => {
       count++
       this.render()  // Re-render to reflect the new count
     }
+
     while (true) {
       yield <button set:onclick={increment}>{count}</button>
     }
   }
   ```
 
-- `this.next()`: Advances the generator to the next yield point. It's automatically called by `this.render()` and is rarely used directly.
-
-- `this.throw(error)`: Throws an error in the generator. Useful for error propagation and creating error boundaries. Ajo automatically calls this method when an error occurs during rendering.
+- `this.queueMicrotasks()`: Schedules an asynchronous re-render of the component. This is useful for batching multiple updates together for better performance.
 
   ```javascript
-  function* ErrorBoundary(props) {
-    try {
-      while (true) {
-        yield <div>{props.children}</div>
-      }
-    } catch (error) {
-      yield <div>An error occurred: {error.message}</div>
+  function* AsyncCounter() {
+
+    let count = 0
+
+    const increment = () => {
+      count++
+      this.queueMicrotask()  // Schedule an asynchronous re-render
+    }
+
+    while (true) {
+      yield <button set:onclick={increment}>{count}</button>
     }
   }
   ```
 
-- `this.return()`: Completes the generator execution. It's automatically called by Ajo when a component is unmounted, but can be used manually to reset a component's state.
+- `this.requestAnimationFrame()`: Similar to `this.queueMicrotask()`, but uses `requestAnimationFrame` for smooth animations.
 
   ```javascript
-  function* ResetableComponent() {
+  function* AnimatedCounter() {
+
     let count = 0
-    const reset = () => {
-      this.return()  // Reset the generator
-      this.render()  // Re-render from the beginning
+
+    const increment = () => {
+      count++
+      this.requestAnimationFrame()  // Schedule a re-render on the next animation frame
+    }
+
+    while (true) {
+      yield <button set:onclick={increment}>{count}</button>
+    }
+  }
+  ```
+
+- `this.cleanup(fn)`: Registers a callback to be executed when the component unmounts. This is useful for cleaning up resources or subscriptions.
+
+  ```javascript
+  function* TimerComponent() {
+
+    let seconds = 0
+
+    const timer = setInterval(() => {
+      seconds++
+      this.render()
+    }, 1000)
+
+    this.cleanup(() => clearInterval(timer))  // Clean up the timer when unmounting
+
+    while (true) {
+      yield <div>Seconds: {seconds}</div>
     }
+  }
+  ```
+
+- `this.effect(fn)`: Registers a callback to be run after the next render.
+
+  ```javascript
+  function* DataFetchingComponent() {
+
+    let data = null
+
+    this.effect(async () => {
+      const response = await fetch('https://api.example.com/data')
+      data = await response.json()
+      this.render()
+    })
+
     while (true) {
-      yield (
-        <div>
-          <p>Count: {count}</p>
-          <button set:onclick={() => { count++; this.render(); }}>Increment</button>
-          <button set:onclick={reset}>Reset</button>
-        </div>
-      )
+      yield data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>
     }
   }
   ```
 
-- `this.$args`: Provides access to the current args of the component.
+  If you want to execute an effect after each render, place it inside the main loop:
 
   ```javascript
-  function* DynamicGreeting() {
+  function* EffectfulComponent() {
+
+    let count = 0
+
     while (true) {
-      yield <h1>Hello, {this.$args.name}!</h1>
+
+      this.effect(() => console.log(`Count updated to ${count}`))
+
+      yield <button set:onclick={() => { count++; this.render() }}>{count}</button>
+
+      console.log(`Optionally you can clean up effect for count ${count} here`)
     }
   }
   ```
 
-These methods provide powerful control over the component's lifecycle and state management, allowing for efficient and flexible UI updates. Note that `this.throw()` and `this.return()` are often called automatically by Ajo in response to errors or component unmounting, respectively, but can also be used manually when needed.
+- `this.next()`: Advances the generator to the next yield point. It's automatically called by `this.render()` and is rarely used directly.
+
+- `this.throw(error)`: Throws an error in the generator. Useful for error propagation and creating error boundaries.
+
+- `this.return()`: Completes the generator execution. It's automatically called when a component is unmounted, but can be used manually to reset a component's state.
+
+These methods provide powerful control over the component's lifecycle, state management, and side effects, allowing for efficient and flexible UI updates. Note that `this.throw()` and `this.return()` are often called automatically by Ajo in response to errors or component unmounting, respectively, but can also be used manually when needed.
 
 ### `ajo/html` module
 
@@ -393,4 +463,4 @@ for (const chunk of html(<App />)) {
 
 ## License
 
-ISC © [Cristian Falcone](cristianfalcone.com)
+ISC © [Cristian Falcone](cristianfalcone.com)

package/types.ts

@@ -2,13 +2,17 @@ declare module 'ajo' {
 
   type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
 
-  type Type = Tag | Function | Component
+  type Type = Tag | Stateless | Stateful
 
-  type Attrs = Record<string, unknown>
+  type Component = Stateless | Stateful
 
-  type VNode<TTag extends Type> = { nodeName: TTag } & Attrs
+  type Props = Record<string, unknown>
 
-  type Children = any
+  type VNode<TTag extends Type, TProps extends Props = Props> = TProps & {
+    nodeName: TTag,
+  }
+
+  type Children = unknown
 
   type ElementType<TTag = Tag> = TTag extends keyof HTMLElementTagNameMap
     ? HTMLElementTagNameMap[TTag]
@@ -16,11 +20,11 @@ declare module 'ajo' {
     ? SVGElementTagNameMap[TTag]
     : never
 
-  type AjoAttrs<TElement> = {
-    key: unknown
-    skip: boolean
-    memo: unknown
-    ref: (el: TElement | null) => void
+  type SpecialProps<TElement> = {
+    key: unknown,
+    skip: boolean,
+    memo: unknown,
+    ref: (el: TElement | null) => void,
   } & ElementChildrenAttribute
 
   type PropSetter<TTag = Tag> = {
@@ -31,35 +35,44 @@ declare module 'ajo' {
     [key: `attr:${string}`]: unknown
   }
 
-  type Function<TArguments extends Attrs = Attrs> = (args: TArguments) => Children
+  type Stateless<TArguments extends Props = Props> = (args: TArguments) => Children
 
-  type Component<TArguments extends Attrs = Attrs, TTag extends Tag = 'div'> = {
-    (this: ComponentElement<TArguments, TTag>, args: ComponentProps<TArguments, TTag>): Iterator<Children, unknown, unknown>
-  } & (TTag extends 'div' ? { is?: TTag } : { is: TTag })
+  type Stateful<TArguments extends Props = Props, TTag extends Tag = 'div'> = {
+    (this: StatefulElement<TArguments, TTag>, args: StatefulProps<TArguments, TTag>): Iterator<Children>
+  } & (TTag extends 'div' ? { is?: TTag } : { is: TTag }) & { attrs?: Partial<PropSetter<TTag>> & Props, args?: Partial<TArguments> }
 
-  type ComponentProps<TArguments extends Attrs = Attrs, TTag extends Tag = 'div'> =
-    Partial<PropSetter<TTag> & AjoAttrs<ComponentElement<TArguments, TTag>>> &
+  type StatefulProps<TArguments extends Props = Props, TTag extends Tag = 'div'> =
+    Partial<SpecialProps<StatefulElement<TArguments, TTag>> & PropSetter<TTag>> &
     AttrSetter &
     TArguments
 
-  type ComponentElement<TArguments extends Attrs = Attrs, TTag extends Tag = Tag> = ElementType<TTag> & {
-    $args: TArguments,
-    $context: { [key: symbol]: unknown },
+  type StatefulElement<TArguments extends Props = Props, TTag extends Tag = Tag> = ElementType<TTag> & {
+    [Symbol.iterator]: () => Iterator<TArguments>,
     render: () => void,
-    next: () => void
-    throw: (value?: unknown) => void
-    return: () => void
+    queueMicrotask: () => void,
+    requestAnimationFrame: () => void,
+    effect: (fn: () => void | (() => void)) => () => void,
+    cleanup: (fn: () => void) => () => void,
+    next: () => void,
+    throw: (value?: unknown) => void,
+    return: () => void,
   }
 
   type IntrinsicElements = {
-    [TTag in Tag]: Partial<PropSetter<TTag> & AjoAttrs<ElementType<TTag>>> & Attrs
+    [TTag in Tag]: Partial<PropSetter<TTag> & SpecialProps<ElementType<TTag>>> & Props
   }
 
   type ElementChildrenAttribute = { children: Children }
 
   function Fragment({ children }: ElementChildrenAttribute): typeof children
-  function h<TTag extends Tag>(tag: TTag, props?: Attrs | null, ...children: Array<unknown>): VNode<TTag>
-  function render(h: Children, el: Element): void
+  function h(tag: Type, props?: Props | null, ...children: Children[]): VNode<Type, Props>
+  function render(h: Children, el: Element, child?: Node, ref?: Node): void
+  function context<T>(fallback?: T): (value?: T) => T
+}
+
+declare module 'ajo/html' {
+  function render(h: import('ajo').Children): string
+  function html(h: import('ajo').Children): IterableIterator<string>
   function context<T>(fallback?: T): (value?: T) => T
 }
 
@@ -67,9 +80,3 @@ declare namespace JSX {
   type ElementChildrenAttribute = import('ajo').ElementChildrenAttribute
   type IntrinsicElements = import('ajo').IntrinsicElements
 }
-
-declare namespace React {
-  const createElement: typeof import('ajo').h
-  const Fragment: typeof import('ajo').Fragment
-  type ReactNode = import('ajo').Children
-}