ajo 0.1.28 → 0.1.29

package/dist/context.js

@@ -1,4 +1,4 @@
-const e = Symbol.for("ajo.context"), r = (t, o = Symbol()) => function(...l) {
+const e = /* @__PURE__ */ Symbol.for("ajo.context"), r = (t, o = /* @__PURE__ */ 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;
 };

package/dist/html.cjs

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

package/dist/html.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.1.28",
+  "version": "0.1.29",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "types": "./types.ts",
@@ -33,11 +33,11 @@
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "24.10.1",
-    "happy-dom": "20.0.11",
-    "vite": "7.2.4",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "4.0.14"
+    "@types/node": "25.0.9",
+    "happy-dom": "20.3.1",
+    "vite": "7.3.1",
+    "vite-tsconfig-paths": "6.0.4",
+    "vitest": "4.0.17"
   },
   "keywords": [
     "ui",

package/readme.md

@@ -15,324 +15,433 @@
 
 A modern JavaScript library for building user interfaces with generator-based state management, efficient DOM updates, and streaming server-side rendering.
 
-## Features
-
-- **Generator-Based Components**: Use JavaScript generator functions (`function*`) for stateful components with built-in lifecycle management
-- **Efficient DOM Updates**: In-place DOM reconciliation minimizes DOM manipulation and maximizes performance
-- **Declarative JSX**: Write components using familiar JSX syntax with full TypeScript support
-- **Performance Optimization**: Built-in `memo` attribute for fine-grained performance optimization
-- **Context API**: Share state across component trees without prop drilling
-- **Server-Side Rendering**: Complete SSR solution with streaming and hydration support
-- **Islands Architecture**: Selective hydration for maximum performance with minimal client-side JavaScript
+- **Generator-Based Components**: Use `function*` for stateful components with built-in lifecycle
+- **Efficient DOM Updates**: In-place reconciliation minimizes DOM manipulation
+- **Streaming SSR**: Progressive rendering with selective hydration (islands)
 
 ## Quick Start
 
-Install Ajo using your preferred package manager:
-
 ```bash
 npm install ajo
 ```
 
-Create your first component:
-
 ```javascript
 import { render } from 'ajo'
 
-// Stateless component
-const Greeting = ({ name }) => <p>Hello, {name}!</p>
-
-// Stateful component
 function* Counter() {
-
   let count = 0
 
-  const increment = () => this.next(() => count++)
-
   while (true) yield (
-    <button set:onclick={increment}>
+    <button set:onclick={() => this.next(() => count++)}>
       Count: {count}
     </button>
   )
 }
 
-// Render to DOM
 render(<Counter />, document.body)
 ```
 
-## Core Concepts
+### Build Configuration
 
-### Component Types
+Configure your build tool to use Ajo's JSX factory:
 
-**Stateless Components** are pure functions:
-```javascript
-const UserCard = ({ user }) => (
-  <div class="user-card">
-    <h3>{user.name}</h3>
-    <p>{user.email}</p>
-  </div>
-);
+**Vite:**
+```typescript
+// vite.config.ts
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+    jsxInject: `import { h, Fragment } from 'ajo'`,
+  },
+})
 ```
 
-**Stateful Components** use generator functions with automatic wrapper elements:
-```javascript
-function* TodoList() {
-
-  let todos = []
-  
-  const addTodo = text => this.next(() => todos.push({ id: Date.now(), text }))
-
-  while (true) yield (
-    <>
-      <input set:onkeydown={e => e.key === 'Enter' && addTodo(e.target.value)} />
-      <ul>
-        {todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
-      </ul>
-    </>
-  )
+**TypeScript:**
+```json
+{
+  "compilerOptions": {
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment"
+  }
 }
 ```
 
-### State Management Pattern
+**Other build tools:** Set `jsxFactory: 'h'`, `jsxFragment: 'Fragment'`, and auto-import `{ h, Fragment }` from `'ajo'`.
 
-The generator structure provides a natural mental model:
-- **Before the loop**: Persistent state, handlers, and utilities  
-- **Inside the loop**: Re-executed on each render for derived values
+## Core Concepts
+
+### Stateless Components
+
+Pure functions that receive props and return JSX:
 
 ```javascript
-function* ShoppingCart(args) {
+const Greeting = ({ name }) => <p>Hello, {name}!</p>
+```
 
-  // Persistent state (like useState)
-  let items = []
+### Stateful Components
 
-  // Persistent handlers (like useCallback)
-  const addItem = product => this.next(() => items.push(product))
+Generator functions with automatic wrapper elements. The structure provides a natural mental model:
 
-  // Main render loop
-  while (true) {
+- **Before the loop**: Persistent state and handlers (survives re-renders)
+- **Inside the loop**: Derived values (computed fresh each render)
+
+```javascript
+function* TodoList() {
+  let todos = []
+  let text = ''
 
-    // Derived values computed fresh each render
-    const total = items.reduce((sum, item) => sum + item.price, 0)
-    const itemCount = items.length
+  const add = () => this.next(() => {
+    if (text.trim()) {
+      todos.push({ id: Date.now(), text })
+      text = ''
+    }
+  })
+
+  while (true) {
+    const count = todos.length
 
     yield (
       <>
-        <h2>Cart ({itemCount} items)</h2>
-        <p>Total: ${total}</p>
-        {/* ... */}
+        <input
+          set:value={text}
+          set:oninput={e => text = e.target.value}
+          set:onkeydown={e => e.key === 'Enter' && add()}
+        />
+        <button set:onclick={add}>Add ({count})</button>
+        <ul>
+          {todos.map(t => <li key={t.id}>{t.text}</li>)}
+        </ul>
       </>
     )
   }
 }
 ```
 
-### Special Attributes
+### Re-rendering with `this.next()`
 
-- **`key`**: List reconciliation
-- **`ref`**: DOM element access
-- **`memo`**: Performance optimization 
-- **`skip`**: Third-party DOM management
-- **`set:`**: Direct property setting
-- **`attr:`**: Force HTML attributes
+Call `this.next()` to trigger a re-render. The optional callback receives current props, useful when props may have changed:
 
 ```javascript
-function* MapComponent(args) {
+function* Stepper(args) {
+  let count = 0
 
-  let mapRef = null
+  // Access current props in callback
+  const inc = () => this.next(({ step = 1 }) => count += step)
 
   while (true) yield (
-    <div 
-      ref={el => {
-        if (el && !mapRef) {
-          mapRef = el
-          // Third-party map library controls this DOM
-          new GoogleMap(el, args.config)
-        }
-      }}
-      skip
-    >
-      {/* Google Maps API manages children elements */}
-    </div>
+    <button set:onclick={inc}>Count: {count} (+{args.step})</button>
   )
 }
 ```
 
-## Server-Side Rendering
+**Never destructure args in the generator signature** - it locks values to initial props:
 
-### Static SSR
 ```javascript
-import { render } from 'ajo/html'
+// DON'T - values frozen at mount
+function* Bad({ step }) { let count = step }
 
-const html = render(<App />)
+// DO - use args directly, or destructure inside the loop
+function* Good(args) {
+  while (true) {
+    const { step } = args  // fresh each render
+    yield ...
+  }
+}
 ```
 
-### Streaming SSR
-```javascript
-import { stream } from 'ajo/stream'
+### Lifecycle and Cleanup
+
+Use `try...finally` for cleanup when the component unmounts:
 
-for await (const chunk of stream(<App />)) response.write(chunk)
+```javascript
+function* Clock() {
+  let time = new Date()
+  const interval = setInterval(() => this.next(() => time = new Date()), 1000)
+
+  try {
+    while (true) yield <p>{time.toLocaleTimeString()}</p>
+  } finally {
+    clearInterval(interval)
+  }
+}
 ```
 
-## Best Practices
+### Error Boundaries
 
-1. **Use fragments in stateful components** to avoid unnecessary DOM nesting
-2. **Don't destructure props in function signatures** - use `args` parameter or destructure inside the render loop
-3. **Leverage the generator structure** for natural state and lifecycle management
-4. **Use TypeScript** for enhanced developer experience
+Use `try...catch` **inside** the loop to catch errors and recover:
 
-## API Reference
+```javascript
+function* ErrorBoundary(args) {
+  while (true) {
+    try {
+      yield args.children
+    } catch (error) {
+      yield (
+        <>
+          <p>Error: {error.message}</p>
+          <button set:onclick={() => this.next()}>Retry</button>
+        </>
+      )
+    }
+  }
+}
+```
+
+## Special Attributes
 
-### Core Module (`ajo`)
+| Attribute | Description |
+|-----------|-------------|
+| `key` | Unique identifier for list reconciliation |
+| `ref` | Callback receiving DOM element (or `null` on unmount) |
+| `memo` | Skip reconciliation: `memo={[deps]}`, `memo={value}`, or `memo` (render once) |
+| `skip` | Exclude children from reconciliation (required with `set:innerHTML`) |
+| `set:*` | Set DOM properties instead of HTML attributes |
+| `attr:*` | Force HTML attributes on stateful component wrappers |
 
-#### `render(children: Children, container: Element, child?: ChildNode, ref?: ChildNode): void`
-Renders JSX into a DOM container element. When `child` and `ref` are provided, only nodes between them (inclusive of `child`, exclusive of `ref`) are reconciled, leaving the rest of the container untouched.
+### `set:` - DOM Properties vs HTML Attributes
 
 ```javascript
-import { render } from 'ajo'
+// Events (always use set:)
+<button set:onclick={handleClick}>Click</button>
 
-render(<App />, document.getElementById('root'))
+// Dynamic values that need to sync with state
+<input set:value={text} />              // DOM property (syncs)
+<input value="initial" />                // HTML attribute (initial only)
 
-// Update only the <main> region without touching header/footer
-const container = document.body
-render(<main>Updated</main>, container, container.querySelector('main'), container.querySelector('footer'))
-```
+<input type="checkbox" set:checked={bool} />
+<video set:currentTime={0} set:muted />
 
-#### `h(type: Type, props?: Props, ...children: Children[]): VNode`
-JSX factory function (rarely used directly).
+// innerHTML requires skip
+<div set:innerHTML={html} skip />
+```
 
-#### `Fragment({ children }: { children: Children }): Children`
-JSX fragment component for rendering multiple elements without a wrapper.
+### `ref` - DOM Access
 
 ```javascript
-const List = () => (
-  <>
-    <li>Item 1</li>
-    <li>Item 2</li>
-  </>
-)
-```
+function* AutoFocus() {
+  let input = null
 
-### Stateful Component Instance Methods
+  while (true) yield (
+    <>
+      <input ref={el => el?.focus()} />
+      <button set:onclick={() => input?.select()}>Select</button>
+    </>
+  )
+}
 
-Stateful components have access to several instance methods through `this`:
+// Ref to stateful component includes control methods
+let timer = null
+<Clock ref={el => timer = el} />
+timer?.next()  // trigger re-render from outside
+```
 
-#### `this.next(callback?: (args: ComponentArgs) => void): void`
-Triggers a re-render of the component by advancing to the next yield point. Optionally accepts a callback function that receives the component's current props/args as the first parameter.
+### `memo` - Performance Optimization
 
 ```javascript
-function* Counter(args) {
-
-  let count = 0
+<div memo={[user.id]}>...</div>   // re-render when user.id changes
+<div memo={count}>...</div>        // re-render when count changes
+<footer memo>Static content</footer>  // render once, never update
+```
 
-  const increment = () => {
-    // Simple re-render
-    this.next(() => count++)
-  }
+### `skip` - Third-Party DOM
 
-  const incrementByStep = () => {
-    // Access current props in callback
-    this.next(({ step }) => count += step)
-  }
+```javascript
+function* Chart(args) {
+  let chart = null
 
-  // ... rest of component
+  while (true) yield (
+    <div skip ref={el => el && (chart ??= new ChartLib(el, args.data))} />
+  )
 }
 ```
 
-#### `this.throw(error: unknown): void`
-Throws an error that can be caught by parent error boundaries.
+### `attr:` - Wrapper Attributes
 
-#### `this.return(): void`
-Terminates the generator and triggers cleanup (rarely used directly).
+```javascript
+<Counter
+  initial={0}                    // → args
+  attr:id="main"                 // → wrapper HTML attribute
+  attr:class="widget"            // → wrapper HTML attribute
+  set:onclick={fn}               // → wrapper DOM property
+/>
+```
 
-### Context Module (`ajo/context`)
+## Context API
 
-#### `context<T>(fallback?: T): ContextFunction<T>`
-Creates a context for sharing data across component trees.
+Share data across component trees without prop drilling:
 
 ```javascript
 import { context } from 'ajo/context'
 
 const ThemeContext = context('light')
-
-// Set value
-ThemeContext('dark')
-
-// Get value
-const theme = ThemeContext() // 'dark'
 ```
 
-### HTML Module (`ajo/html`)
-
-#### `render(children: Children): string`
-Renders JSX to an HTML string for static site generation.
+**Stateless**: read only.
+**Stateful**: read/write. Write inside the loop to update each render, or outside for a one-time set.
 
 ```javascript
-import { render } from 'ajo/html'
+// Stateless - read only
+const Card = ({ title }) => {
+  const theme = ThemeContext()
+  return <div class={`card theme-${theme}`}>{title}</div>
+}
+
+// Stateful - write inside loop (updates each render)
+function* ThemeProvider(args) {
+  let theme = 'light'
 
-const html = render(<HomePage title="Welcome" />)
+  while (true) {
+    ThemeContext(theme)
+    yield (
+      <>
+        <button set:onclick={() => this.next(() => theme = theme === 'light' ? 'dark' : 'light')}>
+          {theme}
+        </button>
+        {args.children}
+      </>
+    )
+  }
+}
+
+// Stateful - write outside loop (one-time set)
+function* FixedTheme(args) {
+  ThemeContext('dark')  // set once at mount
+  while (true) yield args.children
+}
 ```
 
-#### `html(children: Children, hooks?: Hooks): IterableIterator<string>`
-Low-level HTML streaming function with custom hooks.
+## Async Operations
+
+```javascript
+function* UserProfile(args) {
+  let data = null, error = null, loading = true
 
-### Stream Module (`ajo/stream`)
+  fetch(`/api/users/${args.id}`)
+    .then(r => r.json())
+    .then(d => this.next(() => { data = d; loading = false }))
+    .catch(e => this.next(() => { error = e; loading = false }))
 
-#### `stream(children: Children): AsyncIterableIterator<string>`
-Renders components to an async stream for progressive SSR.
+  while (true) {
+    if (loading) yield <p>Loading...</p>
+    else if (error) yield <p>Error: {error.message}</p>
+    else yield <h1>{data.name}</h1>
+  }
+}
+```
+
+## Server-Side Rendering
 
 ```javascript
+// Static
+import { render } from 'ajo/html'
+const html = render(<App />)
+
+// Streaming
 import { stream } from 'ajo/stream'
+for await (const chunk of stream(<App />)) res.write(chunk)
 
-for await (const chunk of stream(<App />)) response.write(chunk)
+// Hydration (client-side)
+import { hydrate } from 'ajo/stream'
+window.$stream = { push: hydrate }
 ```
 
-#### `hydrate(patch: Patch): Promise<void>`
-Client-side function for applying streamed patches during hydration.
+### Islands Architecture
 
 ```javascript
-import { hydrate } from 'ajo/stream'
+function* Interactive() {
+  let count = 0
+  while (true) yield (
+    <button set:onclick={() => this.next(() => count++)}>
+      {count}
+    </button>
+  )
+}
 
-window.$stream = { push: hydrate }
+Interactive.src = '/islands/interactive.js'  // hydrate on client
+
+const Page = () => (
+  <html>
+    <body>
+      <p>Static content</p>
+      <Interactive fallback={<button>0</button>} />
+    </body>
+  </html>
+)
 ```
 
-### TypeScript Support
+## TypeScript
 
 ```typescript
-// Component types
-type Stateless<Props = {}> = (props: Props) => Children
-type Stateful<Props = {}, Tag = 'div'> = {
-  (this: StatefulElement<Tag>, props: Props): Iterator<Children>
-  is?: Tag
-  attrs?: Record<string, unknown>
-  args?: Partial<Props>
+import type { Stateless, Stateful, WithChildren } from 'ajo'
+
+// Stateless
+type CardProps = WithChildren<{ title: string }>
+const Card: Stateless<CardProps> = ({ title, children }) => (
+  <div class="card"><h3>{title}</h3>{children}</div>
+)
+
+// Stateful with custom wrapper element
+type CounterProps = { initial: number; step?: number }
+
+const Counter: Stateful<CounterProps, 'section'> = function* (args) {
+  let count = args.initial
+
+  while (true) {
+    const { step = 1 } = args
+    yield <button set:onclick={() => this.next(() => count += step)}>+{step}</button>
+  }
 }
 
-// Stateful component instance
-type StatefulElement<Tag> = HTMLElement & {
-  next: (callback?: (args: ComponentArgs) => void) => void
-  throw: (error: unknown) => void
-  return: () => void
-};
-
-// Element types
-type Children = unknown
-type VNode<Type, Props> = Props & {
-  nodeName: Type
-  children?: Children
-};
-
-// Special attributes
-type SpecialAttributes = {
-  key?: unknown
-  ref?: (element: Element | null) => void
-  memo?: unknown[]
-  skip?: boolean
-};
+Counter.is = 'section'               // wrapper element (default: 'div')
+Counter.attrs = { class: 'counter' } // default wrapper attributes
+Counter.args = { step: 1 }           // default args
+
+// Ref typing
+let ref: ThisParameterType<typeof Counter> | null = null
+<Counter ref={el => ref = el} initial={0} />
 ```
 
-## Documentation
+## API Reference
+
+### `ajo`
+| Export | Description |
+|--------|-------------|
+| `render(children, container, start?, end?)` | Render to DOM. Optional `start`/`end` for targeted updates. |
+| `h`, `Fragment` | JSX factory and fragment |
+
+### `ajo/context`
+| Export | Description |
+|--------|-------------|
+| `context<T>(fallback?)` | Create context. Call with value to write, without to read. |
+
+### `ajo/html`
+| Export | Description |
+|--------|-------------|
+| `render(children)` | Render to HTML string |
+
+### `ajo/stream`
+| Export | Description |
+|--------|-------------|
+| `stream(children)` | Async iterator for streaming SSR |
+| `hydrate(patch)` | Apply streamed patch on client |
+
+### Stateful `this`
+| Method | Description |
+|--------|-------------|
+| `this.next(fn?)` | Re-render. Callback receives current args. |
+| `this.throw(error)` | Throw to parent boundary |
+| `this.return()` | Terminate generator |
+
+`this` is also the wrapper element (`this.addEventListener()`, etc).
+
+## For AI Assistants
 
-For comprehensive guides, advanced patterns, and detailed examples, see [documentation.md](./documentation.md).
+See [LLMs.md](./LLMs.md) for a condensed reference.
 
 ## License
 
-ISC © [Cristian Falcone](cristianfalcone.com)
+ISC © [Cristian Falcone](https://cristianfalcone.com)

package/types.ts

@@ -2,13 +2,13 @@ declare module 'ajo' {
 
 	type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
 
-	type Type<TArguments extends Props = {}, TTag extends Tag = 'div'> = Tag | Stateless<TArguments> | Stateful<TArguments, TTag>
+	type Type<TArguments extends Args = {}, TTag extends Tag = 'div'> = Tag | Stateless<TArguments> | Stateful<TArguments, TTag>
 
-	type Component<TArguments extends Props = {}> = Stateless<TArguments> | Stateful<TArguments>
+	type Component<TArguments extends Args = {}> = Stateless<TArguments> | Stateful<TArguments>
 
-	type Props = Record<string, unknown>
+	type Args = Record<string, unknown>
 
-	type VNode<TTag extends Type, TProps extends Props> = TProps & {
+	type VNode<TTag extends Type, TArgs extends Args> = TArgs & {
 		nodeName: TTag,
 		children?: Children,
 	}
@@ -21,7 +21,7 @@ declare module 'ajo' {
 		? SVGElementTagNameMap[TTag]
 		: never
 
-	type SpecialProps<TElement> = {
+	type SpecialAttrs<TElement> = {
 		key: unknown,
 		skip: boolean,
 		memo: unknown,
@@ -36,37 +36,47 @@ declare module 'ajo' {
 		[key: `attr:${string}`]: unknown
 	}
 
-	type Stateless<TArguments extends Props = {}> = (args: TArguments) => Children
+	type Stateless<TArguments extends Args = {}> = (args: TArguments) => Children
 
-	type Stateful<TArguments extends 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 Stateful<TArguments extends Args = {}, TTag extends Tag = 'div'> = {
+		(this: StatefulElement<TArguments, TTag>, args: StatefulArgs<TArguments, TTag>): Iterator<Children>
+	} & (TTag extends 'div' ? { is?: TTag } : { is: TTag }) & {
+		attrs?: Partial<PropSetter<TTag>> & Args,
+		args?: Partial<TArguments>,
+		src?: string,
+		fallback?: Children,
+	}
 
-	type StatefulProps<TArguments, TTag> =
-		Partial<SpecialProps<StatefulElement<TArguments, TTag>> & PropSetter<TTag>> &
+	type StatefulArgs<TArguments, TTag> =
+		Partial<SpecialAttrs<StatefulElement<TArguments, TTag>> & PropSetter<TTag>> &
 		AttrSetter &
 		TArguments
 
 	type StatefulElement<TArguments, TTag> = ElementType<TTag> & {
-		next: (fn?: (this: StatefulElement<TArguments, TTag>, args: StatefulProps<TArguments, TTag>) => void) => void,
+		next: (fn?: (this: StatefulElement<TArguments, TTag>, args: StatefulArgs<TArguments, TTag>) => void) => void,
 		throw: (value?: unknown) => void,
 		return: () => void,
 	}
 
 	type IntrinsicElements = {
-		[TTag in Tag]: Partial<PropSetter<TTag> & SpecialProps<ElementType<TTag>>> & Props
+		[TTag in Tag]: Partial<PropSetter<TTag> & SpecialAttrs<ElementType<TTag>>> & Args
 	}
 
 	type ElementChildrenAttribute = { children: Children }
 
+	type WithChildren<T extends Args = {}> = T & Partial<ElementChildrenAttribute>
+
 	function Fragment({ children }: ElementChildrenAttribute): typeof children
-	function h(tag: Type, props?: Props | null, ...children: Children[]): VNode<Type, Props>
+	function h(tag: Type, attrs?: Args | null, ...children: Children[]): VNode<Type, Args>
 	function render(h: Children, el: ParentNode, child?: ChildNode, ref?: ChildNode): void
 }
 
 declare module 'ajo/context' {
-	function context<T>(fallback?: T): (value?: T) => T
-	function current(): import('ajo').Stateful | null
+	function context<T>(fallback?: T): {
+		(): T
+		<V extends T>(value: V): V
+	}
+	function current(): import('ajo').StatefulElement<any, any> | null
 }
 
 declare module 'ajo/html' {