ajo 0.1.22 → 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 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 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,72 +1,90 @@
-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 $, 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;
     }
-}, 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;
+}, 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;
+    }
+  }, a = e.call(o, s), d = u();
+  u(o);
   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 { ...t, nodeName: e.is ?? "div", children: f(a.next().value, i, n) };
   } finally {
-    n.return();
+    (S = a.return) == null || S.call(a), u(d);
   }
-  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;
+}, 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 {
-  w as context,
-  p as html,
-  m as render
+  k as html,
+  N 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"),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,151 +1,93 @@
-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);
+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 (; n && n != i; ) {
-    const o = n.nextSibling;
-    n.nodeType == 1 && C(n), e.removeChild(n), n = o;
+  for (; n && n != s; ) {
+    const e = n.nextSibling;
+    n.nodeType == 1 && w(n), r.removeChild(n), n = e;
   }
-}, 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);
-    }
+}, 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);
   }
-}, 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 = 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;
   }
-  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];
-  },
+}, 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() {
-    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 = a()) != null && t.contains(this) || this.next();
   },
   next() {
-    var e, n, i;
-    const t = a;
-    a = this;
+    var r;
+    const t = a();
+    a(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: 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 {
-      a = t;
+      a(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 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, 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;
 };
 export {
-  G as Fragment,
-  J as context,
-  H as h,
-  x 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/package.json

@@ -1,11 +1,8 @@
 {
   "name": "ajo",
-  "version": "0.1.22",
+  "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",
@@ -16,18 +13,34 @@
       "types": "./types.ts",
       "import": "./dist/html.js",
       "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.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",
@@ -40,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,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

@@ -4,17 +4,18 @@ declare module 'ajo' {
 
   type Type = Tag | Stateless | Stateful
 
-  type Component = Stateless | Stateful
+  type Component<TProps extends Props = {}> = Stateless<TProps> | Stateful<TProps>
 
   type Props = Record<string, unknown>
 
-  type VNode<TTag extends Type, TProps extends Props = Props> = TProps & {
+  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]
@@ -27,7 +28,7 @@ declare module 'ajo' {
     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]
   }
 
@@ -35,24 +36,19 @@ declare module 'ajo' {
     [key: `attr:${string}`]: unknown
   }
 
-  type Stateless<TArguments extends Props = Props> = (args: TArguments) => Children
+  type Stateless<TArguments extends Props = {}> = (args: TArguments) => Children
 
-  type Stateful<TArguments extends Props = Props, TTag extends Tag = 'div'> = {
-    (this: StatefulElement<TArguments, TTag>, args: StatefulProps<TArguments, TTag>): Iterator<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 extends Props = Props, TTag extends Tag = 'div'> =
-    Partial<SpecialProps<StatefulElement<TArguments, TTag>> & PropSetter<TTag>> &
+  type StatefulProps<TArguments, TTag> =
+    Partial<SpecialProps<StatefulElement<TTag>> & PropSetter<TTag>> &
     AttrSetter &
     TArguments
 
-  type StatefulElement<TArguments extends Props = Props, TTag extends Tag = Tag> = ElementType<TTag> & {
-    [Symbol.iterator]: () => Iterator<TArguments>,
+  type StatefulElement<TTag> = ElementType<TTag> & {
     render: () => void,
-    queueMicrotask: () => void,
-    requestAnimationFrame: () => void,
-    effect: (fn: () => void | (() => void)) => () => void,
-    cleanup: (fn: () => void) => () => void,
     next: () => void,
     throw: (value?: unknown) => void,
     return: () => void,
@@ -67,12 +63,22 @@ declare module 'ajo' {
   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
 }
 
 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): IterableIterator<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
 }