ajo 0.1.22 → 0.1.24

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

package/dist/html.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/dist/stream.cjs

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

package/dist/stream.js

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

package/package.json

@@ -1,21 +1,31 @@
 {
   "name": "ajo",
-  "version": "0.1.22",
+  "version": "0.1.24",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
+  "types": "./types.ts",
   "module": "./dist/index.js",
   "main": "./dist/index.cjs",
-  "types": "./types.ts",
   "exports": {
     ".": {
       "types": "./types.ts",
       "import": "./dist/index.js",
       "require": "./dist/index.cjs"
     },
+    "./context": {
+      "types": "./types.ts",
+      "import": "./dist/context.js",
+      "require": "./dist/context.cjs"
+    },
     "./html": {
       "types": "./types.ts",
       "import": "./dist/html.js",
       "require": "./dist/html.cjs"
+    },
+    "./stream": {
+      "types": "./types.ts",
+      "import": "./dist/stream.js",
+      "require": "./dist/stream.cjs"
     }
   },
   "files": [
@@ -23,11 +33,11 @@
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "22.15.29",
-    "happy-dom": "17.6.1",
+    "@types/node": "24.0.0",
+    "happy-dom": "18.0.1",
     "vite": "6.3.5",
     "vite-tsconfig-paths": "5.1.4",
-    "vitest": "3.2.0"
+    "vitest": "3.2.3"
   },
   "keywords": [
     "ui",

package/readme.md

@@ -23,444 +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.
-- 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)
-
-  this.cleanup(() => clearInterval(intervalId))  // Cleanup
-
-  while (true) yield <div>Seconds: {seconds}</div>
-}
-```
-
-### Component Lifecycle
-
-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('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')
-  }
-}
-```
-
-### 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, Component.args and Component.is
-
-Use `Component.attrs` to set default attributes for a component:
-
-```jsx
-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(args) {
-  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 (
-      <>
-        <StatelessComponent />
-        <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.queueMicrotasks()`: Schedules an asynchronous re-render of the component. This is useful for batching multiple updates together for better performance.
-
-  ```javascript
-  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.requestAnimationFrame()`: Similar to `this.queueMicrotask()`, but uses `requestAnimationFrame` for smooth animations.
-
-  ```javascript
-  function* AnimatedCounter() {
-
-    let count = 0
-
-    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 data ? <div>{JSON.stringify(data)}</div> : <div>Loading...</div>
-    }
-  }
-  ```
-
-  If you want to execute an effect after each render, place it inside the main loop:
-
-  ```javascript
-  function* EffectfulComponent() {
-
-    let count = 0
-
-    while (true) {
-
-      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`)
-    }
-  }
-  ```
-
-- `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
-
-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)

package/types.ts

@@ -1,82 +1,99 @@
 declare module 'ajo' {
 
-  type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
-
-  type Type = Tag | Stateless | Stateful
-
-  type Component = Stateless | Stateful
-
-  type Props = Record<string, unknown>
-
-  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]
-    : TTag extends keyof SVGElementTagNameMap
-    ? SVGElementTagNameMap[TTag]
-    : never
-
-  type SpecialProps<TElement> = {
-    key: unknown,
-    skip: boolean,
-    memo: unknown,
-    ref: (el: TElement | null) => void,
-  } & ElementChildrenAttribute
-
-  type PropSetter<TTag = Tag> = {
-    [K in keyof ElementType<TTag> as `set:${Exclude<K, symbol>}`]: ElementType<TTag>[K]
-  }
-
-  type AttrSetter = {
-    [key: `attr:${string}`]: unknown
-  }
-
-  type Stateless<TArguments extends Props = Props> = (args: TArguments) => Children
-
-  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 StatefulProps<TArguments extends Props = Props, TTag extends Tag = 'div'> =
-    Partial<SpecialProps<StatefulElement<TArguments, TTag>> & PropSetter<TTag>> &
-    AttrSetter &
-    TArguments
-
-  type StatefulElement<TArguments extends Props = Props, TTag extends Tag = Tag> = ElementType<TTag> & {
-    [Symbol.iterator]: () => Iterator<TArguments>,
-    render: () => 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> & SpecialProps<ElementType<TTag>>> & Props
-  }
-
-  type ElementChildrenAttribute = { children: Children }
-
-  function Fragment({ children }: ElementChildrenAttribute): typeof children
-  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
+	type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
+
+	type Type = Tag | Stateless | Stateful
+
+	type Component<TProps extends Props = {}> = Stateless<TProps> | Stateful<TProps>
+
+	type Props = Record<string, unknown>
+
+	type VNode<TTag extends Type, TProps extends Props> = TProps & {
+		nodeName: TTag,
+		children?: Children,
+	}
+
+	type Children = unknown
+
+	type ElementType<TTag> = TTag extends keyof HTMLElementTagNameMap
+		? HTMLElementTagNameMap[TTag]
+		: TTag extends keyof SVGElementTagNameMap
+		? SVGElementTagNameMap[TTag]
+		: never
+
+	type SpecialProps<TElement> = {
+		key: unknown,
+		skip: boolean,
+		memo: unknown,
+		ref: (el: TElement | null) => void,
+	} & ElementChildrenAttribute
+
+	type PropSetter<TTag> = {
+		[K in keyof ElementType<TTag> as `set:${Exclude<K, symbol>}`]: ElementType<TTag>[K]
+	}
+
+	type AttrSetter = {
+		[key: `attr:${string}`]: unknown
+	}
+
+	type Stateless<TArguments extends Props = {}> = (args: TArguments) => Children
+
+	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 StatefulProps<TArguments, TTag> =
+		Partial<SpecialProps<StatefulElement<TTag>> & PropSetter<TTag>> &
+		AttrSetter &
+		TArguments
+
+	type StatefulElement<TTag> = ElementType<TTag> & {
+		render: () => void,
+		next: () => void,
+		throw: (value?: unknown) => void,
+		return: () => void,
+	}
+
+	type IntrinsicElements = {
+		[TTag in Tag]: Partial<PropSetter<TTag> & SpecialProps<ElementType<TTag>>> & Props
+	}
+
+	type ElementChildrenAttribute = { children: Children }
+
+	function Fragment({ children }: ElementChildrenAttribute): typeof children
+	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/context' {
+	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
+
+	type Patch = {
+		id: string,
+		h?: import('ajo').Children,
+		src?: string,
+		done?: boolean,
+	}
+
+	type Hooks = {
+		alloc?: (parentId: string) => string,
+		placeholder?: (id: string, children: import('ajo').Children) => unknown,
+		push?: (patch: Patch) => void,
+	}
+
+	function render(h: import('ajo').Children): string
+	function html(h: import('ajo').Children, hooks?: Hooks): IterableIterator<string>
+}
+
+declare module 'ajo/stream' {
+	function stream(h: import('ajo').Children): AsyncIterableIterator<string>
+	function hydrate(patch: import('ajo/html').Patch): Promise<void>
 }
 
 declare namespace JSX {
-  type ElementChildrenAttribute = import('ajo').ElementChildrenAttribute
-  type IntrinsicElements = import('ajo').IntrinsicElements
+	type ElementChildrenAttribute = import('ajo').ElementChildrenAttribute
+	type IntrinsicElements = import('ajo').IntrinsicElements
 }