ajo 0.1.21 → 0.1.23

package/dist/context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=Symbol.for("ajo.context"),r=(t,e=Symbol())=>function(...l){const n=this??c;return n?l.length?n[o][e]=l[0]:e in n[o]?n[o][e]:t:t};let c=null;const u=(...t)=>t.length?c=t[0]:c;exports.Context=o;exports.context=r;exports.current=u;

package/dist/context.js

@@ -0,0 +1,11 @@
+const e = Symbol.for("ajo.context"), r = (t, o = Symbol()) => function(...l) {
+  const n = this ?? c;
+  return n ? l.length ? n[e][o] = l[0] : o in n[e] ? n[e][o] : t : t;
+};
+let c = null;
+const s = (...t) => t.length ? c = t[0] : c;
+export {
+  e as Context,
+  r as context,
+  s as current
+};

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 u=require("./context.cjs"),A=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),w=new Set(["key","skip","memo","ref"]),$=new Set(["nodeName","children",...w]),j=Symbol.for("ajo.args"),l=e=>e.replace(/[&<>"']/g,r=>`&#${r.charCodeAt(0)};`),m=(e,r)=>({nodeName:"div","data-ssr":e,children:r}),y=()=>{},x=e=>[...v(e)].join(""),v=function*(e,r=()=>"",i=y){yield*g(f(e,r,i))},f=(e,r,i)=>{if(!(e==null||typeof e=="boolean")){if(typeof e=="string"||typeof e=="number")return String(e);if(Array.isArray(e)){const n=[];for(e of e.flat(1/0)){const t=f(e,r,i);t!=null&&n.push(t)}return n.length===1?n[0]:n}if(typeof e=="object"&&"nodeName"in e){if(typeof e.nodeName=="function")return k(e,r,i);const n={nodeName:e.nodeName};for(const t in e)!$.has(t)&&!t.startsWith("set:")&&(n[t]=e[t]);return"children"in e&&(n.children=f(e.children,r,i)),n}return String(e)}},k=({nodeName:e,fallback:r=e.fallback,...i},n,t)=>{if(e.src){const o=n();return t({id:o,src:e.src,h:i,done:!0}),m(o,r)}const s=e.constructor.name;if(s==="GeneratorFunction")return p(e,i,n,t);if(s==="AsyncGeneratorFunction")return G(e,r,i,n,t);if(i=e(i),i instanceof Promise){if(t===y)return r;const o=n();return i.then(a=>t({id:o,h:f(a,(d=o)=>n(d),t),done:!0})),m(o,r)}return f(i,n,t)},p=(e,r,i,n)=>{var S,b;const t={...e.attrs},s={...e.args};for(const c in r)c.startsWith("attr:")?t[c.slice(5)]=r[c]:w.has(c)||c.startsWith("set:")?t[c]=r[c]:s[c]=r[c];const o={[u.Context]:Object.assign(Object.create(null),(S=u.current())==null?void 0:S[u.Context]),[j]:s,render:y,next:y,return:y,throw:c=>{throw c}},a=e.call(o,s),d=u.current();u.current(o);try{return{...t,nodeName:e.is??"div",children:f(a.next().value,i,n)}}finally{(b=a.return)==null||b.call(a),u.current(d)}},G=(e,r,i,n,t)=>{if(t===y)return r;const s=n();return Promise.resolve().then(async()=>{var a;n=(d=s)=>n(d);const o=e(i);try{for(i=await o.next();!i.done;)t({id:s,h:f(i.value,n,t),done:!1}),i=await o.next();t({id:s,h:f(i.value,n,t),done:!0})}catch(d){t({id:s,h:f(d,n,t),done:!0})}finally{(a=o.return)==null||a.call(o)}}),m(s,r)},g=function*(e){if(typeof e=="string")yield l(e);else if(Array.isArray(e))for(e of e)yield*g(e);else if(typeof e=="object"&&"nodeName"in e){const{nodeName:r,children:i}=e;let n="";for(const t in e)$.has(t)||t.startsWith("set:")||e[t]==null||e[t]===!1||(e[t]===!0?n+=` ${t}`:n+=` ${t}="${l(String(e[t]))}"`);A.has(r)?yield`<${r}${n}>`:(yield`<${r}${n}>`,i!=null&&(yield*g(i)),yield`</${r}>`)}else yield l(String(e))};exports.html=v;exports.render=x;

package/dist/html.js

@@ -1,65 +1,90 @@
-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);
-    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}>`);
+import { Context as $, current as u } from "./context.js";
+const v = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), b = /* @__PURE__ */ new Set(["key", "skip", "memo", "ref"]), A = /* @__PURE__ */ new Set(["nodeName", "children", ...b]), j = Symbol.for("ajo.args"), l = (e) => e.replace(/[&<>"']/g, (r) => `&#${r.charCodeAt(0)};`), m = (e, r) => ({ nodeName: "div", "data-ssr": e, children: r }), y = () => {
+}, N = (e) => [...k(e)].join(""), k = function* (e, r = () => "", i = y) {
+  yield* g(f(e, r, i));
+}, f = (e, r, i) => {
+  if (!(e == null || typeof e == "boolean")) {
+    if (typeof e == "string" || typeof e == "number") return String(e);
+    if (Array.isArray(e)) {
+      const n = [];
+      for (e of e.flat(1 / 0)) {
+        const t = f(e, r, i);
+        t != null && n.push(t);
+      }
+      return n.length === 1 ? n[0] : n;
+    }
+    if (typeof e == "object" && "nodeName" in e) {
+      if (typeof e.nodeName == "function") return p(e, r, i);
+      const n = { nodeName: e.nodeName };
+      for (const t in e) !A.has(t) && !t.startsWith("set:") && (n[t] = e[t]);
+      return "children" in e && (n.children = f(e.children, r, i)), n;
+    }
+    return String(e);
+  }
+}, p = ({ nodeName: e, fallback: r = e.fallback, ...i }, n, t) => {
+  if (e.src) {
+    const o = n();
+    return t({ id: o, src: e.src, h: i, done: !0 }), m(o, r);
+  }
+  const s = e.constructor.name;
+  if (s === "GeneratorFunction") return x(e, i, n, t);
+  if (s === "AsyncGeneratorFunction") return G(e, r, i, n, t);
+  if (i = e(i), i instanceof Promise) {
+    if (t === y) return r;
+    const o = n();
+    return i.then((a) => t({ id: o, h: f(a, (d = o) => n(d), t), done: !0 })), m(o, r);
+  }
+  return f(i, n, t);
+}, x = (e, r, i, n) => {
+  var w, S;
+  const t = { ...e.attrs }, s = { ...e.args };
+  for (const c in r)
+    c.startsWith("attr:") ? t[c.slice(5)] = r[c] : b.has(c) || c.startsWith("set:") ? t[c] = r[c] : s[c] = r[c];
+  const o = {
+    [$]: Object.assign(/* @__PURE__ */ Object.create(null), (w = u()) == null ? void 0 : w[$]),
+    [j]: s,
+    render: y,
+    next: y,
+    return: y,
+    throw: (c) => {
+      throw c;
     }
-}, 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);
-            for (const a in e) {
-              const u = e[a];
-              a.startsWith("attr:") ? i[a.slice(5)] = u : r[a] = u;
-            }
-            i.nodeName = n.is ?? "div", i.children = A(n, r), yield i;
-          } else yield* c(n(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;
+  }, a = e.call(o, s), d = u();
+  u(o);
   try {
-    const n = e.call(o = {
-      $args: t,
-      $context: v((s == null ? void 0 : s.$context) ?? null),
-      render() {
-        s !== o && o.next();
-      },
-      next() {
-        const r = s;
-        s = o, l = y(n.next().value), s = r;
-      },
-      throw(r) {
-        l = y(n.throw(r).value);
-      },
-      return() {
-        n.return();
-      }
-    }, t);
-    o.next();
-  } catch (n) {
-    o.throw(n);
+    return { ...t, nodeName: e.is ?? "div", children: f(a.next().value, i, n) };
   } finally {
-    o.return();
+    (S = a.return) == null || S.call(a), u(d);
   }
-  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;
+}, G = (e, r, i, n, t) => {
+  if (t === y) return r;
+  const s = n();
+  return Promise.resolve().then(async () => {
+    var a;
+    n = (d = s) => n(d);
+    const o = e(i);
+    try {
+      for (i = await o.next(); !i.done; )
+        t({ id: s, h: f(i.value, n, t), done: !1 }), i = await o.next();
+      t({ id: s, h: f(i.value, n, t), done: !0 });
+    } catch (d) {
+      t({ id: s, h: f(d, n, t), done: !0 });
+    } finally {
+      (a = o.return) == null || a.call(o);
+    }
+  }), m(s, r);
+}, g = function* (e) {
+  if (typeof e == "string") yield l(e);
+  else if (Array.isArray(e)) for (e of e) yield* g(e);
+  else if (typeof e == "object" && "nodeName" in e) {
+    const { nodeName: r, children: i } = e;
+    let n = "";
+    for (const t in e)
+      A.has(t) || t.startsWith("set:") || e[t] == null || e[t] === !1 || (e[t] === !0 ? n += ` ${t}` : n += ` ${t}="${l(String(e[t]))}"`);
+    v.has(r) ? yield `<${r}${n}>` : (yield `<${r}${n}>`, i != null && (yield* g(i)), yield `</${r}>`);
+  } else yield l(String(e));
 };
 export {
-  O as context,
-  p as html,
-  y as render
+  k as html,
+  N 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 c=require("./context.cjs"),a=Symbol.for("ajo.key"),b=Symbol.for("ajo.memo"),y=Symbol.for("ajo.ref"),S=Symbol.for("ajo.cache"),f=Symbol.for("ajo.generator"),o=Symbol.for("ajo.iterator"),u=Symbol.for("ajo.args"),p=t=>t.children,A=(t,r,...n)=>((r??(r={})).nodeName=t,!("children"in r)&&n.length&&(r.children=n.length==1?n[0]:n),r),l=(t,r,n=r.firstChild,s)=>{for(t of m(t)){const e=C(t,r,n);e===n?n=n.nextSibling:F(r,e,n)}for(;n&&n!=s;){const e=n.nextSibling;n.nodeType==1&&j(n),r.removeChild(n),n=e}},m=function*(t,r={h:""},n=!0){if(!(t==null||typeof t=="boolean")){if(Array.isArray(t))for(t of t.flat(1/0))yield*m(t,r,!1);else typeof t=="object"&&"nodeName"in t?(r.h&&(yield r.h,r.h=""),typeof t.nodeName=="function"?yield*v(t,r):yield t):r.h+=t;n&&r.h&&(yield r.h)}},v=function*({nodeName:t,...r},n){t.constructor.name=="GeneratorFunction"?yield h(t,r):yield*m(t(r),n,!1)},h=function(t,r){const n={...t.attrs},s={...t.args};for(const e in r)e.startsWith("attr:")?n[e.slice(5)]=r[e]:e=="key"||e=="memo"||e.startsWith("set:")?n[e]=r[e]:s[e]=r[e];return{...n,nodeName:t.is??"div",skip:!0,ref:W.bind(null,t,s)}},C=(t,r,n)=>typeof t=="string"?N(t,n):O(t,r,n),N=(t,r)=>{for(;r&&r.nodeType!=3;)r=r.nextSibling;return r?r.data!=t&&(r.data=t):r=document.createTextNode(t),r},O=({nodeName:t,children:r,key:n,skip:s,memo:e,ref:g,...x},w,i)=>{for(;i&&!(i.localName==t&&(i[a]??(i[a]=n))==n);)i=i.nextSibling;return i??(i=Object.assign(document.createElementNS(x.xmlns??w.namespaceURI,t),{[a]:n})),(e==null||E(i[b],i[b]=e))&&(k(i[S]??T(i),i[S]=x,i),s||l(r,i),typeof g=="function"&&(i[y]=g)(i)),i},k=(t,r,n)=>{for(const s in{...t,...r})t[s]!==r[s]&&(s.startsWith("set:")?n[s.slice(4)]=r[s]:r[s]==null||r[s]===!1?n.removeAttribute(s):n.setAttribute(s,r[s]===!0?"":r[s]))},E=(t,r)=>Array.isArray(t)&&Array.isArray(r)?t.some((n,s)=>n!==r[s]):t!==r,T=t=>Array.from(t.attributes).reduce((r,n)=>(r[n.name]=n.value,r),{}),F=(t,r,n)=>{if(!r.contains(document.activeElement))return t.insertBefore(r,n);const s=r.nextSibling;for(;n&&n!=r;){const e=n.nextSibling;t.insertBefore(n,s),n=e}},j=t=>{var r;for(const n of t.children)j(n);(r=t[y])==null||r.call(t,null)},W=(t,{skip:r,ref:n,...s},e)=>{e&&(e[f]??(e[f]=(B(e),t)),e[y]=M.bind(null,n,e),Object.assign(e[u]??(e[u]={}),s),r||e.next())},B=t=>{var r;Object.assign(t,R),t[c.Context]=Object.create(((r=c.current())==null?void 0:r[c.Context])??null)},M=(t,r,n)=>{typeof t=="function"&&t(n),n||r.return()},R={render(){var t;(t=c.current())!=null&&t.contains(this)||this.next()},next(){var r;const t=c.current();c.current(this);try{const{value:n,done:s}=(this[o]??(this[o]=this[f].call(this,this[u]))).next();l(n,this),(r=this[y])==null||r.call(this,this),s&&this.return()}catch(n){this.throw(n)}finally{c.current(t)}},throw(t){var r;for(let n=this;n;n=n.parentNode)if(typeof((r=n[o])==null?void 0:r.throw)=="function")try{return l(n[o].throw(t).value,n)}catch(s){t=new Error(s instanceof Error?s.message:s,{cause:t})}throw t},return(){var t;try{(t=this[o])==null||t.return()}catch(r){this.throw(r)}finally{this[o]=null}}};exports.Fragment=p;exports.h=A;exports.render=l;

package/dist/index.js

@@ -1,109 +1,93 @@
-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;
-    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);
-      }
-    }
-    i === e ? e = e.nextSibling : C(n, i, e);
+import { Context as b, current as a } from "./context.js";
+const c = Symbol.for("ajo.key"), S = Symbol.for("ajo.memo"), l = Symbol.for("ajo.ref"), j = Symbol.for("ajo.cache"), f = Symbol.for("ajo.generator"), o = Symbol.for("ajo.iterator"), u = Symbol.for("ajo.args"), I = (t) => t.children, M = (t, r, ...n) => ((r ?? (r = {})).nodeName = t, !("children" in r) && n.length && (r.children = n.length == 1 ? n[0] : n), r), y = (t, r, n = r.firstChild, s) => {
+  for (t of m(t)) {
+    const e = h(t, r, n);
+    e === n ? n = n.nextSibling : T(r, e, n);
   }
-  for (; e; ) {
-    const i = e.nextSibling;
-    e.nodeType === 1 && v(e), n.removeChild(e), e = i;
+  for (; n && n != s; ) {
+    const e = n.nextSibling;
+    n.nodeType == 1 && w(n), r.removeChild(n), n = e;
   }
-}, { 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])
-    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;
-            }
-            c.nodeName = o.is ?? "div", c.skip = !0, c.ref = T.bind(null, o, a), yield c;
-          } else yield* x(o(t), n, !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 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 = {
+}, m = function* (t, r = { h: "" }, n = !0) {
+  if (!(t == null || typeof t == "boolean")) {
+    if (Array.isArray(t)) for (t of t.flat(1 / 0)) yield* m(t, r, !1);
+    else typeof t == "object" && "nodeName" in t ? (r.h && (yield r.h, r.h = ""), typeof t.nodeName == "function" ? yield* A(t, r) : yield t) : r.h += t;
+    n && r.h && (yield r.h);
+  }
+}, A = function* ({ nodeName: t, ...r }, n) {
+  t.constructor.name == "GeneratorFunction" ? yield v(t, r) : yield* m(t(r), n, !1);
+}, v = function(t, r) {
+  const n = { ...t.attrs }, s = { ...t.args };
+  for (const e in r)
+    e.startsWith("attr:") ? n[e.slice(5)] = r[e] : e == "key" || e == "memo" || e.startsWith("set:") ? n[e] = r[e] : s[e] = r[e];
+  return { ...n, nodeName: t.is ?? "div", skip: !0, ref: W.bind(null, t, s) };
+}, h = (t, r, n) => typeof t == "string" ? N(t, n) : k(t, r, n), N = (t, r) => {
+  for (; r && r.nodeType != 3; ) r = r.nextSibling;
+  return r ? r.data != t && (r.data = t) : r = document.createTextNode(t), r;
+}, k = ({ nodeName: t, children: r, key: n, skip: s, memo: e, ref: x, ...g }, p, i) => {
+  for (; i && !(i.localName == t && (i[c] ?? (i[c] = n)) == n); ) i = i.nextSibling;
+  return i ?? (i = Object.assign(document.createElementNS(g.xmlns ?? p.namespaceURI, t), { [c]: n })), (e == null || E(i[S], i[S] = e)) && (C(i[j] ?? O(i), i[j] = g, i), s || y(r, i), typeof x == "function" && (i[l] = x)(i)), i;
+}, C = (t, r, n) => {
+  for (const s in { ...t, ...r })
+    t[s] !== r[s] && (s.startsWith("set:") ? n[s.slice(4)] = r[s] : r[s] == null || r[s] === !1 ? n.removeAttribute(s) : n.setAttribute(s, r[s] === !0 ? "" : r[s]));
+}, E = (t, r) => Array.isArray(t) && Array.isArray(r) ? t.some((n, s) => n !== r[s]) : t !== r, O = (t) => Array.from(t.attributes).reduce((r, n) => (r[n.name] = n.value, r), {}), T = (t, r, n) => {
+  if (!r.contains(document.activeElement)) return t.insertBefore(r, n);
+  const s = r.nextSibling;
+  for (; n && n != r; ) {
+    const e = n.nextSibling;
+    t.insertBefore(n, s), n = e;
+  }
+}, w = (t) => {
+  var r;
+  for (const n of t.children) w(n);
+  (r = t[l]) == null || r.call(t, null);
+}, W = (t, { skip: r, ref: n, ...s }, e) => {
+  e && (e[f] ?? (e[f] = (B(e), t)), e[l] = F.bind(null, n, e), Object.assign(e[u] ?? (e[u] = {}), s), r || e.next());
+}, B = (t) => {
+  var r;
+  Object.assign(t, R), t[b] = Object.create(((r = a()) == null ? void 0 : r[b]) ?? null);
+}, F = (t, r, n) => {
+  typeof t == "function" && t(n), n || r.return();
+}, R = {
   render() {
-    r != null && r.contains(this) || this.next();
+    var t;
+    (t = a()) != null && t.contains(this) || this.next();
   },
   next() {
-    const t = r;
-    r = this;
+    var r;
+    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);
+      const { value: n, done: s } = (this[o] ?? (this[o] = this[f].call(this, this[u]))).next();
+      y(n, this), (r = this[l]) == null || r.call(this, this), s && this.return();
     } catch (n) {
       this.throw(n);
     } 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 r;
+    for (let n = this; n; n = n.parentNode) if (typeof ((r = n[o]) == null ? void 0 : r.throw) == "function") try {
+      return y(n[o].throw(t).value, n);
+    } catch (s) {
+      t = new Error(s instanceof Error ? s.message : s, { cause: t });
     }
     throw t;
   },
   return() {
     var t;
     try {
-      (t = this.$iterator) == null || t.return();
-    } catch (n) {
-      this.throw(n);
+      (t = this[o]) == null || t.return();
+    } catch (r) {
+      this.throw(r);
     } finally {
-      this.$iterator = null;
+      this[o] = 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;
 };
 export {
-  F as Fragment,
-  j as context,
-  W as h,
-  g as render
+  I as Fragment,
+  M as h,
+  y as render
 };

package/dist/stream.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./index.cjs"),d=require("./html.cjs"),h=async function*(n){const t=new Set,e=[],s=new Map,l=(i="")=>{const r=s.get(i)??(s.set(i,0),0);return s.set(i,r+1),i?`${i}:${r}`:String(r)},c=i=>{const r=Promise.resolve(`<script>window.$stream?.push(${JSON.stringify(i)})<\/script>`);t.add(r),r.then(a=>e.push(a)).finally(()=>t.delete(r))};for(n of d.html(n,l,c))yield n;for(;t.size;)for(await Promise.race(t);e.length;)yield e.shift();for(;e.length;)yield e.shift()},u=async({id:n,src:t,h:e})=>{const s=document.querySelector(`[data-ssr="${n}"]`);s&&(t?o.render(o.h((await import(t)).default,e),s):o.render(e,s))};exports.hydrate=u;exports.stream=h;

package/dist/stream.js

@@ -0,0 +1,22 @@
+import { render as n, h as d } from "./index.js";
+import { html as h } from "./html.js";
+const u = async function* (r) {
+  const e = /* @__PURE__ */ new Set(), t = [], s = /* @__PURE__ */ new Map(), l = (i = "") => {
+    const o = s.get(i) ?? (s.set(i, 0), 0);
+    return s.set(i, o + 1), i ? `${i}:${o}` : String(o);
+  }, c = (i) => {
+    const o = Promise.resolve(`<script>window.$stream?.push(${JSON.stringify(i)})<\/script>`);
+    e.add(o), o.then((a) => t.push(a)).finally(() => e.delete(o));
+  };
+  for (r of h(r, l, c)) yield r;
+  for (; e.size; )
+    for (await Promise.race(e); t.length; ) yield t.shift();
+  for (; t.length; ) yield t.shift();
+}, w = async ({ id: r, src: e, h: t }) => {
+  const s = document.querySelector(`[data-ssr="${r}"]`);
+  s && (e ? n(d((await import(e)).default, t), s) : n(t, s));
+};
+export {
+  w as hydrate,
+  u as stream
+};

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,32 +1,46 @@
 {
   "name": "ajo",
-  "version": "0.1.21",
+  "version": "0.1.23",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
-  "module": "./dist/index.js",
-  "main": "./dist/index.cjs",
-  "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"
+    },
+    "./context": {
+      "types": "./types.ts",
+      "import": "./dist/context.js",
+      "require": "./dist/context.cjs"
+    },
+    "./stream": {
+      "types": "./types.ts",
+      "import": "./dist/stream.js",
+      "require": "./dist/stream.cjs"
     }
   },
   "files": [
     "dist",
     "types.ts"
   ],
+  "scripts": {
+    "test": "vitest --run",
+    "build": "vite build",
+    "bump": "pnpm version patch && git push && git push --tags",
+    "release": "pnpm test && pnpm build && pnpm bump && pnpm publish"
+  },
   "devDependencies": {
-    "@types/node": "^22.2.0",
-    "jsdom": "24.1.1",
-    "vite": "5.4.0",
-    "vitest": "2.0.5"
+    "@types/node": "24.0.0",
+    "happy-dom": "18.0.1",
+    "vite": "6.3.5",
+    "vite-tsconfig-paths": "5.1.4",
+    "vitest": "3.2.3"
   },
   "keywords": [
     "ui",
@@ -39,11 +53,5 @@
   "author": "Cristian Falcone",
   "license": "ISC",
   "bugs": "https://github.com/cristianfalcone/ajo/issues",
-  "homepage": "https://github.com/cristianfalcone/ajo#readme",
-  "scripts": {
-    "test": "vitest --run",
-    "build": "vite build",
-    "bump": "pnpm version patch && git push && git push --tags",
-    "release": "pnpm test && pnpm build && pnpm bump && pnpm publish"
-  }
-}
+  "homepage": "https://github.com/cristianfalcone/ajo#readme"
+}

package/readme.md

@@ -23,374 +23,6 @@ Ajo is a lightweight and efficient JavaScript library for building dynamic user
 - Lightweight design
 - Server-Side Rendering (SSR) support
 
-## Quick Start
-
-### Installation
-
-```bash
-npm install ajo
-```
-
-### Basic Usage
-
-```jsx
-/** @jsx h */
-import { h, render } from 'ajo'
-
-const Greeting = ({ name }) => <h1>Hello, {name}!</h1>
-
-function* Counter() {
-  let count = 0
-
-  const increment = () => {
-    count++
-    this.render()
-  }
-
-  while (true) {
-    yield (
-      <>
-        <p>Count: {count}</p>
-        <button set:onclick={increment}>Increment</button>
-      </>
-    )
-  }
-}
-
-function* App() {
-  while (true) {
-    yield (
-      <>
-        <Greeting name="Ajo Developer" />
-        <Counter />
-      </>
-    )
-  }
-}
-
-render(<App />, document.body)
-```
-
-## Core Concepts
-
-### HTML Attributes vs DOM Properties
-
-Ajo distinguishes between HTML attributes and DOM properties. Use regular attributes for HTML attributes, and the `set:` prefix to set DOM properties directly:
-
-```jsx
-<input
-  type="text"
-  id="username"
-  class="form-input"
-  placeholder="Enter username"
-  set:value={inputValue}
-  set:onclick={handleClick}
-  set:disabled={isDisabled}
-/>
-```
-
-In this example:
-- `type`, `id`, `class`, and `placeholder` are regular HTML attributes.
-- `set:value`, `set:onclick`, and `set:disabled` are DOM properties set directly on the element.
-
-### Special Attributes
-
-Ajo uses special attributes for optimization and control:
-- `key`: For efficient list rendering
-- `skip`: To prevent rendering of child elements
-- `memo`: For memoization of components or elements
-- `ref`: To get references to DOM nodes or component instances
-
-```jsx
-<TodoItem
-  key={todo.id}
-  memo={[todo.completed]}
-  ref={el => el ? todosRefs.add(el) : todosRefs.delete(todo.id)}
->
-  <TodoTitle>{todo.title}</TodoTitle>
-  <div set:innerHTML={marked(todo.content)} skip></div>
-</TodoItem>
-```
-
-### Stateless and Stateful Components
-
-Stateless components are simple functions:
-
-```jsx
-const Greeting = ({ name }) => <h1>Hello, {name}!</h1>
-```
-
-Stateful components use generator functions:
-
-```jsx
-function* Counter() {
-  let count = 0
-  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.
-- 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
-  }
-}
-```
-
-### 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
-
-```jsx
-function* LifecycleDemo() {
-  console.log('Initialized')
-  try {
-    while (true) {
-      console.log('Rendering')
-      yield <div>Hello, Ajo!</div>
-    }
-  } finally {
-    console.log('Cleanup')
-  }
-}
-```
-
-### attr: Attributes
-
-Use the `attr:` prefix to add HTML attributes to a component's root element:
-
-```jsx
-function* CustomButton(props) {
-  while (true) yield <>{props.children}</>
-}
-CustomButton.is = 'button'
-
-// Usage
-<CustomButton attr:class="primary" attr:id="submit-btn">
-  Click me
-</CustomButton>
-```
-
-### Component.attrs and Component.is
-
-Use `Component.attrs` to set default attributes for a component:
-
-```jsx
-function* CustomButton(props) {
-  while (true) yield <>{props.children}</>
-}
-CustomButton.attrs = { class: 'btn btn-primary' }
-```
-
-Use `Component.is` to specify the HTML element for a component:
-
-```jsx
-function* CustomInput(props) {
-  while (true) yield <>{props.children}</>
-}
-CustomInput.is = 'input'
-```
-
-## API
-
-### `ajo` module
-
-#### `h(type, props?, ...children)`
-
-Creates virtual DOM elements.
-
-```javascript
-const element = h('div', { class: 'container' }, 'Hello, Ajo!')
-```
-
-#### `render(vnode, container)`
-
-Renders a virtual DOM tree into a DOM element.
-
-```javascript
-render(h(App), document.body)
-```
-
-#### `Fragment({ children })`
-
-A component for grouping elements without adding extra nodes to the DOM.
-
-```jsx
-const List = () => (
-  <Fragment>
-    <li>Item 1</li>
-    <li>Item 2</li>
-  </Fragment>
-)
-```
-
-#### `context(defaultValue)`
-
-Creates a context with an optional default value.
-
-```javascript
-const ThemeContext = context('light')
-
-// In a stateless component:
-const StatelessComponent = () => {
-  const theme = ThemeContext()
-  return <div>Current theme: {theme}</div>
-}
-
-// In a stateful component:
-function* StatefulComponent() {
-  while (true) {
-    const theme = ThemeContext()
-    yield <div>Current theme: {theme}</div>
-  }
-}
-
-// Setting context value:
-function* App() {
-  ThemeContext('dark')
-  while (true) {
-    yield (
-      <>
-        <FunctionalComponent />
-        <StatefulComponent />
-      </>
-    )
-  }
-}
-```
-
-#### Stateful Components and Component Methods
-
-Ajo's stateful components are implemented as generator functions and have access to several special methods:
-
-```javascript
-function* StatefulComponent(props) {
-  // Component logic here
-  while (true) {
-    yield (/* JSX */)
-  }
-}
-```
-
-Component methods:
-
-- `this.render()`: Triggers a re-render of the component. It's the primary method for updating the component's UI after state changes.
-
-  ```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.
-
-  ```javascript
-  function* ErrorBoundary(props) {
-    try {
-      while (true) {
-        yield <div>{props.children}</div>
-      }
-    } catch (error) {
-      yield <div>An error occurred: {error.message}</div>
-    }
-  }
-  ```
-
-- `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.
-
-  ```javascript
-  function* ResetableComponent() {
-    let count = 0
-    const reset = () => {
-      this.return()  // Reset the generator
-      this.render()  // Re-render from the beginning
-    }
-    while (true) {
-      yield (
-        <div>
-          <p>Count: {count}</p>
-          <button set:onclick={() => { count++; this.render(); }}>Increment</button>
-          <button set:onclick={reset}>Reset</button>
-        </div>
-      )
-    }
-  }
-  ```
-
-- `this.$args`: Provides access to the current args of the component.
-
-  ```javascript
-  function* DynamicGreeting() {
-    while (true) {
-      yield <h1>Hello, {this.$args.name}!</h1>
-    }
-  }
-  ```
-
-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.
-
-### `ajo/html` module
-
-For server-side rendering:
-
-#### `render(vnode)`
-
-Renders a virtual DOM tree to an HTML string.
-
-```javascript
-import { render } from 'ajo/html'
-import { App } from './components'
-
-const html = render(<App />)
-```
-
-#### `html(vnode)`
-
-Generates an iterator of HTML strings for streaming.
-
-```javascript
-import { html } from 'ajo/html'
-import { App } from './components'
-
-for (const chunk of html(<App />)) {
-  // Send chunk to the client
-  stream.write(chunk)
-}
-```
-
 ## License
 
-ISC © [Cristian Falcone](cristianfalcone.com)
+ISC © [Cristian Falcone](cristianfalcone.com)

package/types.ts

@@ -2,28 +2,33 @@ 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<TProps extends Props = {}> = Stateless<TProps> | Stateful<TProps>
 
-  type VNode<TTag extends Type> = { nodeName: TTag } & Attrs
+  type Props = Record<string, unknown>
 
-  type Children = any
+  type VNode<TTag extends Type, TProps extends Props> = TProps & {
+    nodeName: TTag,
+    children?: Children,
+  }
+
+  type Children = unknown
 
-  type ElementType<TTag = Tag> = TTag extends keyof HTMLElementTagNameMap
+  type ElementType<TTag> = TTag extends keyof HTMLElementTagNameMap
     ? HTMLElementTagNameMap[TTag]
     : TTag extends keyof SVGElementTagNameMap
     ? 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> = {
+  type PropSetter<TTag> = {
     [K in keyof ElementType<TTag> as `set:${Exclude<K, symbol>}`]: ElementType<TTag>[K]
   }
 
@@ -31,35 +36,49 @@ declare module 'ajo' {
     [key: `attr:${string}`]: unknown
   }
 
-  type Function<TArguments extends Attrs = Attrs> = (args: TArguments) => Children
+  type Stateless<TArguments extends 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 = {}, TTag extends Tag = 'div'> = {
+    (this: StatefulElement<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, TTag> =
+    Partial<SpecialProps<StatefulElement<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<TTag> = ElementType<TTag> & {
     render: () => void,
-    next: () => void
-    throw: (value?: unknown) => void
-    return: () => 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
+}
+
+declare module 'ajo/html' {
+
+  type Patch = { id: string, h?: import('ajo').Children, src?: string, done?: boolean }
+
+  function render(h: import('ajo').Children): string
+  function html(h: import('ajo').Children, alloc?: (parentId: string) => string, push?: (patch: Patch) => void): IterableIterator<string>
+}
+
+declare module 'ajo/stream' {
+  function stream(h: import('ajo').Children): AsyncIterableIterator<string>
+  function hydrate(patch: import('ajo/html').Patch): Promise<void>
+}
+
+declare module 'ajo/context' {
   function context<T>(fallback?: T): (value?: T) => T
 }
 
@@ -67,9 +86,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
-}