ajo 0.1.18 → 0.1.20

package/dist/html.cjs

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

package/dist/html.js

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

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=({children:i})=>i,b=function(i,e){const{length:t}=arguments;return(e??(e=v(null))).nodeName=i,"children"in e||t<3||(e.children=t===3?arguments[2]:O.call(arguments,2)),e},y=(i,e)=>{let t=e.firstChild;for(i of g(i)){let n=t;if(typeof i=="string"){for(;n&&n.nodeType!=3;)n=n.nextSibling;n?n.data!=i&&(n.data=i):n=document.createTextNode(i)}else{const{nodeName:o,key:a,skip:c,memo:s,ref:f,children:N}=i;for(;n&&!(n.localName===o&&(n.$key??(n.$key=a))==a);)n=n.nextSibling;if(n??(n=d(document.createElementNS(i.xmlns??o==="svg"?T:e.namespaceURI,o),{$key:a})),s==null||F(n.$memo,n.$memo=s)){const{$props:m}=n,x={};for(const l of w(d({},m,i))){if(C.has(l))continue;const u=x[l]=i[l];u!==(m==null?void 0:m[l])&&(l.startsWith("set:")?n[l.slice(4)]=u:u==null||u===!1?n.removeAttribute(l):n.setAttribute(l,u===!0?"":u))}n.$props=x,c||y(N,n),typeof f=="function"&&(n.$ref=f)(n)}}n===t?t=t.nextSibling:B(e,n,t)}for(;t;){const n=t.nextSibling;t.nodeType===1&&S(t),e.removeChild(t),t=n}},{isArray:$,prototype:{slice:O}}=Array,{create:v,keys:w,assign:d,hasOwn:A,setPrototypeOf:p,getPrototypeOf:h}=Object,T="http://www.w3.org/2000/svg",C=new Set("nodeName,key,skip,memo,ref,children".split(",")),F=(i,e)=>$(i)&&$(e)?i.some((t,n)=>t!==e[n]):i!==e,g=function*(i,e={value:""},t=!0){for(i of $(i)?i:[i])if(!(i==null||typeof i=="boolean"))if(A(i,"nodeName")){const{value:n}=e,{nodeName:o}=i;if(n&&(yield n,e.value=""),typeof o=="function")if(o.constructor.name==="GeneratorFunction"){const a={},c=d({},o.attrs);for(const s of w(i)){const f=i[s];s.startsWith("attr:")?c[s.slice(5)]=f:s==="key"||s==="memo"?c[s]=f:a[s]=f}c.nodeName=o.is??"div",c.skip=!0,c.ref=P.bind(null,o,a),yield c}else yield*g(o(i),e,!1);else yield i}else $(i)?yield*g(i,e,!1):e.value+=i;t&&e.value&&(yield e.value)},P=(i,e,t)=>{if(!t)return;t.$gen??(t.$gen=(new E(t),i)),t.$ref=j.bind(null,t);const{skip:n,...o}=e;d(t.$args??(t.$args={}),o),n||t.$next()},j=(i,e)=>e??i.$return(),B=(i,e,t)=>{if(e.contains(document.activeElement)){const n=e.nextSibling;for(;t&&t!=e;){const o=t.nextSibling;i.insertBefore(t,n),t=o}}else i.insertBefore(e,t)},S=i=>{for(const t of i.children)S(t);const{$ref:e}=i;typeof e=="function"&&e(null)};let r=null;class E{constructor(e){p(e,p(h(this),h(e))),e.$context=v((r==null?void 0:r.$context)??null)}render(){r!=null&&r.contains(this)||this.$next()}$next(){const e=r;r=this;try{y((this.$it??(this.$it=this.$gen.call(this,this.$args))).next().value,this),typeof this.$ref=="function"&&this.$ref(this)}catch(t){this.$throw(t)}finally{r=e}}$throw(e){var t;for(let n=this;n;n=n.parentNode)if(typeof((t=n.$it)==null?void 0:t.throw)=="function")try{return y(n.$it.throw(e).value,n)}catch{}throw e}$return(){var e;try{(e=this.$it)==null||e.return()}catch(t){this.$throw(t)}finally{this.$it=null}}}const W=(i,e=Symbol())=>function(t,n){return arguments.length===1?e in t.$context?t.$context[e]:i:t.$context[e]=n};exports.Fragment=k;exports.context=W;exports.h=b;exports.render=y;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=({children:t})=>t,N=function(t,n){const{length:e}=arguments;return(n??(n=h(null))).nodeName=t,"children"in n||e<3||(n.children=e===3?arguments[2]:b.call(arguments,2)),n},d=(t,n)=>{let e=n.firstChild;for(t of g(t)){let i=e;if(typeof t=="string"){for(;i&&i.nodeType!=3;)i=i.nextSibling;i?i.data!=t&&(i.data=t):i=document.createTextNode(t)}else{const{nodeName:o,key:l,skip:c,memo:r,ref:f,children:w}=t;for(;i&&!(i.localName===o&&(i.$key??(i.$key=l))==l);)i=i.nextSibling;if(i??(i=m(document.createElementNS(t.xmlns??o==="svg"?O:n.namespaceURI,o),{$key:l})),r==null||F(i.$memo,i.$memo=r)){const{$props:$}=i,x={};for(const a of p(m({},$,t))){if(T.has(a))continue;const u=x[a]=t[a];u!==($==null?void 0:$[a])&&(a.startsWith("set:")?i[a.slice(4)]=u:u==null||u===!1?i.removeAttribute(a):i.setAttribute(a,u===!0?"":u))}i.$props=x,c||d(w,i),typeof f=="function"&&(i.$ref=f)(i)}}i===e?e=e.nextSibling:C(n,i,e)}for(;e;){const i=e.nextSibling;e.nodeType===1&&v(e),n.removeChild(e),e=i}},{isArray:y,prototype:{slice:b}}=Array,{create:h,assign:m,keys:p,prototype:{hasOwnProperty:k},hasOwn:A=(t,n)=>k.call(t,n)}=Object,O="http://www.w3.org/2000/svg",T=new Set("nodeName,key,skip,memo,ref,children".split(",")),F=(t,n)=>y(t)&&y(n)?t.some((e,i)=>e!==n[i]):t!==n,g=function*(t,n={value:""},e=!0){for(t of y(t)?t:[t])if(!(t==null||typeof t=="boolean"))if(A(t,"nodeName")){const{value:i}=n,{nodeName:o}=t;if(i&&(yield i,n.value=""),typeof o=="function")if(o.constructor.name==="GeneratorFunction"){const l={},c=m({},o.attrs);for(const r of p(t)){const f=t[r];r.startsWith("attr:")?c[r.slice(5)]=f:r==="key"||r==="memo"?c[r]=f:l[r]=f}c.nodeName=o.is??"div",c.skip=!0,c.ref=j.bind(null,o,l),yield c}else yield*g(o(t),n,!1);else yield t}else y(t)?yield*g(t,n,!1):n.value+=t;e&&n.value&&(yield n.value)},j=(t,n,e)=>{if(!e)return;e.$gen??(e.$gen=(m(e,E),e.$context??(e.$context=h((s==null?void 0:s.$context)??null)),t)),e.$ref=B.bind(null,e);const{skip:i,...o}=n;m(e.$args??(e.$args={}),o),i||e.$next()},B=(t,n)=>n??t.$return(),C=(t,n,e)=>{if(n.contains(document.activeElement)){const i=n.nextSibling;for(;e&&e!=n;){const o=e.nextSibling;t.insertBefore(e,i),e=o}}else t.insertBefore(n,e)},v=t=>{for(const e of t.children)v(e);const{$ref:n}=t;typeof n=="function"&&n(null)};let s=null;const E={render(){s!=null&&s.contains(this)||this.$next()},$next(){const t=s;s=this;try{d((this.$it??(this.$it=this.$gen.call(this,this.$args))).next().value,this),typeof this.$ref=="function"&&this.$ref(this)}catch(n){this.$throw(n)}finally{s=t}},$throw(t){var n;for(let e=this;e;e=e.parentNode)if(typeof((n=e.$it)==null?void 0:n.throw)=="function")try{return d(e.$it.throw(t).value,e)}catch{}throw t},$return(){var t;try{(t=this.$it)==null||t.return()}catch(n){this.$throw(n)}finally{this.$it=null}}},P=(t,n=Symbol())=>function(e,i){return arguments.length===0?s&&n in s.$context?s.$context[n]:t:arguments.length===1?n in e.$context?e.$context[n]:t:e.$context[n]=i};exports.Fragment=S;exports.context=P;exports.h=N;exports.render=d;

package/dist/index.js

@@ -1,110 +1,106 @@
-const P = ({ children: i }) => i, W = function(i, e) {
-  const { length: t } = arguments;
-  return (e ?? (e = v(null))).nodeName = i, "children" in e || t < 3 || (e.children = t === 3 ? arguments[2] : S.call(arguments, 2)), e;
-}, d = (i, e) => {
-  let t = e.firstChild;
-  for (i of g(i)) {
-    let n = t;
-    if (typeof i == "string") {
-      for (; n && n.nodeType != 3; ) n = n.nextSibling;
-      n ? n.data != i && (n.data = i) : n = document.createTextNode(i);
+const F = ({ children: t }) => t, W = function(t, n) {
+  const { length: e } = arguments;
+  return (n ?? (n = h(null))).nodeName = t, "children" in n || e < 3 || (n.children = e === 3 ? arguments[2] : N.call(arguments, 2)), n;
+}, d = (t, n) => {
+  let e = n.firstChild;
+  for (t of g(t)) {
+    let i = e;
+    if (typeof t == "string") {
+      for (; i && i.nodeType != 3; ) i = i.nextSibling;
+      i ? i.data != t && (i.data = t) : i = document.createTextNode(t);
     } else {
-      const { nodeName: o, key: a, skip: c, memo: s, ref: f, children: k } = i;
-      for (; n && !(n.localName === o && (n.$key ?? (n.$key = a)) == a); ) n = n.nextSibling;
-      if (n ?? (n = $(document.createElementNS(i.xmlns ?? o === "svg" ? A : e.namespaceURI, o), { $key: a })), s == null || C(n.$memo, n.$memo = s)) {
-        const { $props: m } = n, x = {};
-        for (const l of w($({}, m, i))) {
-          if (O.has(l)) continue;
-          const u = x[l] = i[l];
-          u !== (m == null ? void 0 : m[l]) && (l.startsWith("set:") ? n[l.slice(4)] = u : u == null || u === !1 ? n.removeAttribute(l) : n.setAttribute(l, u === !0 ? "" : u));
+      const { nodeName: o, key: l, skip: c, memo: r, ref: f, children: w } = t;
+      for (; i && !(i.localName === o && (i.$key ?? (i.$key = l)) == l); ) i = i.nextSibling;
+      if (i ?? (i = m(document.createElementNS(t.xmlns ?? o === "svg" ? b : n.namespaceURI, o), { $key: l })), r == null || O(i.$memo, i.$memo = r)) {
+        const { $props: $ } = i, x = {};
+        for (const a of p(m({}, $, t))) {
+          if (A.has(a)) continue;
+          const u = x[a] = t[a];
+          u !== ($ == null ? void 0 : $[a]) && (a.startsWith("set:") ? i[a.slice(4)] = u : u == null || u === !1 ? i.removeAttribute(a) : i.setAttribute(a, u === !0 ? "" : u));
         }
-        n.$props = x, c || d(k, n), typeof f == "function" && (n.$ref = f)(n);
+        i.$props = x, c || d(w, i), typeof f == "function" && (i.$ref = f)(i);
       }
     }
-    n === t ? t = t.nextSibling : E(e, n, t);
+    i === e ? e = e.nextSibling : C(n, i, e);
   }
-  for (; t; ) {
-    const n = t.nextSibling;
-    t.nodeType === 1 && N(t), e.removeChild(t), t = n;
+  for (; e; ) {
+    const i = e.nextSibling;
+    e.nodeType === 1 && v(e), n.removeChild(e), e = i;
   }
-}, { isArray: y, prototype: { slice: S } } = Array, { create: v, keys: w, assign: $, hasOwn: b, setPrototypeOf: p, getPrototypeOf: h } = Object, A = "http://www.w3.org/2000/svg", O = new Set("nodeName,key,skip,memo,ref,children".split(",")), C = (i, e) => y(i) && y(e) ? i.some((t, n) => t !== e[n]) : i !== e, g = function* (i, e = { value: "" }, t = !0) {
-  for (i of y(i) ? i : [i])
-    if (!(i == null || typeof i == "boolean"))
-      if (b(i, "nodeName")) {
-        const { value: n } = e, { nodeName: o } = i;
-        if (n && (yield n, e.value = ""), typeof o == "function")
+}, { isArray: y, prototype: { slice: N } } = Array, { create: h, assign: m, keys: p, prototype: { hasOwnProperty: S }, hasOwn: k = (t, n) => S.call(t, n) } = Object, b = "http://www.w3.org/2000/svg", A = new Set("nodeName,key,skip,memo,ref,children".split(",")), O = (t, n) => y(t) && y(n) ? t.some((e, i) => e !== n[i]) : t !== n, g = function* (t, n = { value: "" }, e = !0) {
+  for (t of y(t) ? t : [t])
+    if (!(t == null || typeof t == "boolean"))
+      if (k(t, "nodeName")) {
+        const { value: i } = n, { nodeName: o } = t;
+        if (i && (yield i, n.value = ""), typeof o == "function")
           if (o.constructor.name === "GeneratorFunction") {
-            const a = {}, c = $({}, o.attrs);
-            for (const s of w(i)) {
-              const f = i[s];
-              s.startsWith("attr:") ? c[s.slice(5)] = f : s === "key" || s === "memo" ? c[s] = f : a[s] = f;
+            const l = {}, c = m({}, o.attrs);
+            for (const r of p(t)) {
+              const f = t[r];
+              r.startsWith("attr:") ? c[r.slice(5)] = f : r === "key" || r === "memo" ? c[r] = f : l[r] = f;
             }
-            c.nodeName = o.is ?? "div", c.skip = !0, c.ref = T.bind(null, o, a), yield c;
-          } else yield* g(o(i), e, !1);
-        else yield i;
-      } else y(i) ? yield* g(i, e, !1) : e.value += i;
-  t && e.value && (yield e.value);
-}, T = (i, e, t) => {
-  if (!t) return;
-  t.$gen ?? (t.$gen = (new F(t), i)), t.$ref = B.bind(null, t);
-  const { skip: n, ...o } = e;
-  $(t.$args ?? (t.$args = {}), o), n || t.$next();
-}, B = (i, e) => e ?? i.$return(), E = (i, e, t) => {
-  if (e.contains(document.activeElement)) {
-    const n = e.nextSibling;
-    for (; t && t != e; ) {
-      const o = t.nextSibling;
-      i.insertBefore(t, n), t = o;
+            c.nodeName = o.is ?? "div", c.skip = !0, c.ref = T.bind(null, o, l), yield c;
+          } else yield* g(o(t), n, !1);
+        else yield t;
+      } else y(t) ? yield* g(t, n, !1) : n.value += t;
+  e && n.value && (yield n.value);
+}, T = (t, n, e) => {
+  if (!e) return;
+  e.$gen ?? (e.$gen = (m(e, E), e.$context ?? (e.$context = h((s == null ? void 0 : s.$context) ?? null)), t)), e.$ref = B.bind(null, e);
+  const { skip: i, ...o } = n;
+  m(e.$args ?? (e.$args = {}), o), i || e.$next();
+}, B = (t, n) => n ?? t.$return(), C = (t, n, e) => {
+  if (n.contains(document.activeElement)) {
+    const i = n.nextSibling;
+    for (; e && e != n; ) {
+      const o = e.nextSibling;
+      t.insertBefore(e, i), e = o;
     }
-  } else i.insertBefore(e, t);
-}, N = (i) => {
-  for (const t of i.children) N(t);
-  const { $ref: e } = i;
-  typeof e == "function" && e(null);
+  } else t.insertBefore(n, e);
+}, v = (t) => {
+  for (const e of t.children) v(e);
+  const { $ref: n } = t;
+  typeof n == "function" && n(null);
 };
-let r = null;
-class F {
-  constructor(e) {
-    p(e, p(h(this), h(e))), e.$context = v((r == null ? void 0 : r.$context) ?? null);
-  }
+let s = null;
+const E = {
   render() {
-    r != null && r.contains(this) || this.$next();
-  }
+    s != null && s.contains(this) || this.$next();
+  },
   $next() {
-    const e = r;
-    r = this;
+    const t = s;
+    s = this;
     try {
       d((this.$it ?? (this.$it = this.$gen.call(this, this.$args))).next().value, this), typeof this.$ref == "function" && this.$ref(this);
-    } catch (t) {
-      this.$throw(t);
+    } catch (n) {
+      this.$throw(n);
     } finally {
-      r = e;
+      s = t;
     }
-  }
-  $throw(e) {
-    var t;
-    for (let n = this; n; n = n.parentNode) if (typeof ((t = n.$it) == null ? void 0 : t.throw) == "function") try {
-      return d(n.$it.throw(e).value, n);
+  },
+  $throw(t) {
+    var n;
+    for (let e = this; e; e = e.parentNode) if (typeof ((n = e.$it) == null ? void 0 : n.throw) == "function") try {
+      return d(e.$it.throw(t).value, e);
     } catch {
     }
-    throw e;
-  }
+    throw t;
+  },
   $return() {
-    var e;
+    var t;
     try {
-      (e = this.$it) == null || e.return();
-    } catch (t) {
-      this.$throw(t);
+      (t = this.$it) == null || t.return();
+    } catch (n) {
+      this.$throw(n);
     } finally {
       this.$it = null;
     }
   }
-}
-const j = (i, e = Symbol()) => function(t, n) {
-  return arguments.length === 1 ? e in t.$context ? t.$context[e] : i : t.$context[e] = n;
+}, j = (t, n = Symbol()) => function(e, i) {
+  return arguments.length === 0 ? s && n in s.$context ? s.$context[n] : t : arguments.length === 1 ? n in e.$context ? e.$context[n] : t : e.$context[n] = i;
 };
 export {
-  P as Fragment,
+  F as Fragment,
   j as context,
   W as h,
   d as render

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.1.18",
+  "version": "0.1.20",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "./dist/index.js",

package/readme.md

@@ -1,9 +1,9 @@
+# Ajo
+
 <div align="center">
   <img src="https://github.com/cristianfalcone/ajo/raw/main/ajo.png" alt="ajo" width="372" />
 </div>
 
-<br />
-
 <div align="center">
   <a href="https://npmjs.org/package/ajo">
     <img src="https://badgen.now.sh/npm/v/ajo" alt="version" />
@@ -13,693 +13,384 @@
   </a>
 </div>
 
-# Ajo
+Ajo is a lightweight and efficient JavaScript library for building dynamic user interfaces. It combines the best ideas from Incremental DOM and Crank.js to offer a unique approach to UI development.
 
-Ajo is a library designed for building dynamic UI components using JSX. Integrating ideas from Incremental DOM and Crank.js, Ajo offers a unique approach in the landscape of UI libraries.
+## Key Features
 
-Key features:
+- Efficient in-place DOM updates
+- Generator-based state management
+- JSX syntax support
+- Lightweight design
+- Server-Side Rendering (SSR) support
 
-- **Efficient In-Place DOM Updating**: Ajo executes in-place DOM updates, directly applying the generated vDOM tree to the DOM. This approach avoids the need to store and diff a previous vDOM tree, leading to a reduced memory footprint.
-- **Generator-Based State Management**: Leverages JavaScript Generators for managing component states and effects, offering developers a robust tool for controlling UI lifecycle events.
-- **Minimalistic Rendering Approach**: Ajo’s rendering system is optimized for minimal overhead, enhancing the speed of DOM updates and overall application performance.
-- **JSX Syntax for Intuitive Development**: Supports JSX, making it easy for developers familiar with React or similar libraries to adopt and use Ajo effectively.
-- **Lifecycle Management for Components**: Provides a suite of lifecycle methods for stateful components, facilitating precise control over component behaviors during their lifecycle.
-- **Flexibility and Lightweight Design**: Ajo is designed to be both adaptable for various use cases and lightweight, ensuring minimal impact on project size.
+## Quick Start
 
-## Install
+### Installation
 
-```sh
+```bash
 npm install ajo
 ```
 
-## Usage
-
-Render JSX into DOM element:
+### Basic Usage
 
 ```jsx
 /** @jsx h */
 import { h, render } from 'ajo'
 
-document.body.innerHTML = '<div>Hello World</div>'
-
-render(<div>Goodbye World</div>, document.body)
-```
-
-Stateless component:
-
-```jsx
-/** @jsx h */
-import { h, render } from 'ajo'
-
-const Greet = ({ name }) => <div>Hello {name}</div>
-
-render(<Greet name="World" />, document.body)
-```
-
-Stateful component:
-
-```jsx
-/** @jsx h */
-import { h, render } from 'ajo'
+const Greeting = ({ name }) => <h1>Hello, {name}!</h1>
 
 function* Counter() {
-
   let count = 0
 
-  const handleClick = () => {
+  const increment = () => {
     count++
     this.render()
   }
 
-  while (true) yield (
-    <button set:onclick={handleClick}>
-      Current: {count}
-    </button>
-  )
+  while (true) {
+    yield (
+      <>
+        <p>Count: {count}</p>
+        <button set:onclick={increment}>Increment</button>
+      </>
+    )
+  }
 }
 
-render(<Counter />, document.body)
-```
-
-## API
-
-### render(h, el)
-
-Renders a virtual DOM tree into the actual DOM element. It is the primary method used for updating the DOM with new content.
-
-When called, it efficiently updates `el` with the new content, adding, updating, or removing DOM nodes as needed.
-
-This function enables the declarative description of the UI to be transformed into actual UI elements in the browser. It's designed to be efficient, minimizing updates to the actual DOM to improve performance and user experience.
-
-#### Parameters:
-
-- **h** (Any): The virtual DOM tree to render. This can be any value, a simple string, a virtual DOM tree created by the `h` function, etc.
-- **el** (HTMLElement): The DOM element into which the `h` should be rendered. This is typically a container element in your application.
-
-#### Returns:
-
-- There is no return value for this function as its primary purpose is side-effect (DOM manipulation).
-
-#### Example Usage:
-
-```jsx
-/** @jsx h */
-import { h, render } from 'ajo'
-
-// Create a simple, stateless component
-const App = () => <div>Hello, World!</div>
+function* App() {
+  while (true) {
+    yield (
+      <>
+        <Greeting name="Ajo Developer" />
+        <Counter />
+      </>
+    )
+  }
+}
 
-// Render the App component into the #root element
-render(<App />, document.getElementById('root'))
+render(<App />, document.body)
 ```
-> In this example, the `App` component is a simple function returning a `div` with text content. The `render` function then mounts this component into the DOM element with the ID `root`.
-
-### h(type, [props], [...children])
 
-Creates a virtual DOM tree for rendering. It's the core function for defining UI components in JSX syntax. The `h` function is a hyperscript function that returns a virtual DOM tree representing the UI component. This object can then be rendered to an actual DOM using the `render` function.
+## Core Concepts
 
-#### Parameters:
+### HTML Attributes vs DOM Properties
 
-- **type** (String | Function | Generator Function): The name of the tag for the DOM element you want to create. If it's a function, it's treated as a stateless component, and if it's a generator function, it's treated as a stateful component.
-- **props** (Object, optional): An object containing properties you want to set on the virtual DOM element.
-- **children** (Any, optional): Child virtual nodes. Can be a nested array of child nodes, a string, or any other renderable JSX elements. Booleans, null, and undefined child nodes will be ignored, which is useful for conditional rendering.
-
-#### Returns:
-
-- **Object**: A virtual DOM tree.
-
-#### Example Usage:
+Ajo distinguishes between HTML attributes and DOM properties. Use regular attributes for HTML attributes, and the `set:` prefix to set DOM properties directly:
 
 ```jsx
-/** @jsx h */
-import { h } from 'ajo'
-
-// Creating a simple virtual element
-const myElement = h('div', { id: 'my-div' }, 'Hello World')
-
-// Creating a virtual tree for a stateless component with children
-const MyComponent = ({ class: className }) => h('div', { class: className },
-  h('h1', null, 'Header'),
-  'Text Content',
-  h('p', null, 'Paragraph'),
-)
-
-// Composing
-const MyApp = () => h(MyComponent, { class: 'my-class' })
-
-// Render into a DOM element
-render(h(MyApp), document.body)
+<input
+  type="text"
+  id="username"
+  class="form-input"
+  placeholder="Enter username"
+  set:value={inputValue}
+  set:onclick={handleClick}
+  set:disabled={isDisabled}
+/>
 ```
-> You won't typically use the `h` function, it's automatically used when you write JSX code. The previous examples demonstrate how to use the `h` function directly if you need to.
-
-### `Fragment({ children })`
 
-A utility component for grouping multiple elements without adding extra nodes to the DOM. It's particularly useful for returning multiple elements from components.
+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.
 
-In JSX, fragments are typically represented with empty tags (`<>...</>`), but this function provides an alternative way to create them, especially useful in environments where the shorthand syntax might not be supported.
+### Special Attributes
 
-#### Example Usage:
+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
-//* @jsx h */
-//* @jsxFrag Fragment */
-import { h, Fragment } from 'ajo'
-
-// Using the h function
-const MyComponent = () => {
-  return h(Fragment, null,
-    h('h1', null, 'Hello'),
-    h('h2', null, 'World')
-  )
-}
-
-// Or using JSX syntax
-const MyComponentJSX = () => (
-  <>
-    <h1>Hello</h1>
-    <h2>World</h2>
-  </>
-)
+<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>
 ```
 
-### `set:`
-
-The `set:` prefix in Ajo allows you to directly set properties on DOM elements from within your JSX. This is distinct from simply setting attributes, as it interacts with the properties of the DOM elements, much like how you would in plain JavaScript. Ideal for situations where setting a DOM property is more appropriate or efficient than setting an HTML attribute.
-
-#### Purpose:
+### Stateless and Stateful Components
 
-- The `set:` prefix is used for directly setting properties on DOM elements. This is crucial for cases where you need to interact with the DOM API, or when a property does not have a direct attribute equivalent.
+Stateless components are simple functions:
 
-#### Usage:
-
-- Use `set:` to assign various types of properties to DOM elements, including but not limited to event handlers. It can be used for properties like `textContent`, `scrollTop`, custom properties, and more.
-
-#### Examples:
-
-**Assigning Text Content:**
 ```jsx
-function* MyComponent() {
-  const text = "Hello, Ajo!"
-  while (true) yield <div set:textContent={text} skip></div>
-}
+const Greeting = ({ name }) => <h1>Hello, {name}!</h1>
 ```
-> Here, `set:textContent` directly sets the `textContent` property of the `div`'s DOM node. `skip` is used to prevent Ajo from overriding the `div`'s children.
 
-**Setting Inner HTML:**
-```jsx
-function* MyComponent() {
-  const html = "<p>Hello, Ajo!</p>"
-  while (true) yield <div set:innerHTML={html} skip></div>
-}
-```
-> In this case, `set:innerHTML` is used to set the `innerHTML` property of the `div`'s DOM element. `skip` is used to prevent Ajo from overriding the `div`'s children.
+Stateful components use generator functions:
 
-**Event Handlers (e.g., onclick):**
 ```jsx
-function* MyComponent() {
-  const handleClick = () => console.log('Clicked')
-  while (true) yield <button set:onclick={handleClick}>Click Me</button>
+function* Counter() {
+  let count = 0
+  while (true) {
+    yield (
+      <button set:onclick={() => { count++; this.render(); }}>
+        {count}
+      </button>
+    )
+  }
 }
 ```
-> `set:onclick` assigns the `handleClick` function as the click event listener for the button.
-
-### Special Attributes in Ajo
-
-In Ajo, there are several special attributes (`key`, `skip`, `memo`, and `ref`) that have specific purposes and behaviors. Understanding these attributes is crucial for optimizing rendering and managing component lifecycle and references in your applications.
-
-#### `key` Attribute:
-- **Purpose:** The `key` attribute is used to track the identity of elements in lists or sequences. It's crucial for optimizing the rendering process, especially when dealing with dynamic lists where items can be added, removed, or reordered.
-- **Behavior:** When a list of elements is rendered, Ajo uses the `key` attribute to efficiently update the DOM. It identifies which elements have changed, need to be added, or can be reused. This minimizes DOM manipulations, leading to better performance.
-- **Example:** In a list of items rendered by a map function, each item should have a unique `key` prop, like `h('li', { key: item.id }, item.text)`.
-
-#### `skip` Attribute:
-- **Purpose:** The `skip` attribute is used to instruct Ajo to skip rendering for a specific element child nodes. It's useful for preventing certain parts of the DOM from being updated, like when using a third-party library that manipulates the DOM directly.
-- **Behavior:** When `skip` is set to `true` on an element, Ajo will not render or update that element's child nodes.
-- **Example:** `h('div', { skip: shouldSkip })` - here, if `shouldSkip` is `true`, Ajo will not render or update the `div`'s child nodes.
-
-#### `memo` Attribute:
-- **Purpose:** The `memo` attribute is used for memoization. It's a performance optimization technique to prevent unnecessary renders.
-- **Behavior:** When the `memo` attribute is provided, Ajo will shallow compare the memoized values with the new ones. If they are the same, Ajo will skip rendering the element attributes, properties and child nodes. For stateful components, this also prevents the component from re-rendering.
-- **Example:** `h(div, { memo: [dependency1, dependency2] })` - the element will re-render only if `dependency1` or `dependency2` change.
-
-#### `ref` Attribute:
-- **Purpose:** The `ref` attribute provides a way to access the underlying DOM element.
-- **Behavior:** When an element is mounted or updated, the `ref` callback is called with the DOM element as an argument. This allows you to store a reference to it for later use, such as focusing an input or measuring dimensions.
-- **Example:** `h('input', { ref: el => (this.inputNode = el) })` - stores a reference to the input element.
 
-## Stateful Components
-
-Stateful components in Ajo are defined using generator functions. These components are designed with a minimalistic API for controlling rendering and state updates. They are equipped with several lifecycle methods that allow for advanced control over component behavior, error handling, and rendering processes.
-
-The following example demonstrates key features of stateful components in Ajo:
+State handling in Ajo is straightforward:
+- State is managed using regular variables within the generator function.
+- The `this.render()` method triggers a re-render when state changes.
+- Each iteration of the generator function represents a new render cycle.
 
 ```jsx
-function* ChatComponent(props) {
-
-  // Define mutable state variables.
-  let message = '', connected = false
-
-  // Define event handlers.
-  const handleMessageChange = event => {
-
-    message = event.target.value
-
-    this.render()
-  }
-
-  const send = () => {
-
-    if (message) {
-
-      connection.send(JSON.stringify({ user: props.user ?? 'Anonymous', message }))
-
-      message = ''
-
-      this.render()
-    }
-  }
-
-  const handleConnectionOpen = () => {
-    connected = true
-    this.render()
-  }
-
-  const handleConnectionError = error => {
-    // Throw error to be caught by the component itself or a parent component.
-    this.$throw(new Error('Connection error: ' + error.message))
-  }
-
-  // Setup resources.
-  const server = `ws://chat.com/${props.room}`
-  const connection = new WebSocket(server)
-
-  connection.onopen = handleConnectionOpen
-  connection.onerror = handleConnectionError
-
-  // 'this' is a DOM element, so we can use DOM APIs on it.
-  this.classList.add('chat-component')
-
-  try { // Optional try/finally block for cleanup logic.
-
+function* Timer() {
+  let seconds = 0
+  const intervalId = setInterval(() => {
+    seconds++
+    this.render()  // Trigger a re-render
+  }, 1000)
+
+  try {
     while (true) {
-
-      try { // Optional try/catch block for error handling.
-
-        // Compute derived values.
-        const status = connected ? `You are connected as ${props.user ?? 'Anonymous'}.` : "Connecting to chat..."
-
-        // Render the component UI.
-        yield (
-          <>
-            <div class="status-message">{status}</div>
-            <div class="connection-status">{connected ? 'Connected' : 'Connecting...'}</div>
-            <input type="text" value={message} set:onchange={handleMessageChange} />
-            <button set:onclick={send}>Send</button>
-          </>
-        )
-      } catch (e) {
-        // Handle any errors that occur during rendering or state updates.
-        yield <pre>Error: {e.message}</pre>
-      }
+      yield <div>Seconds: {seconds}</div>
     }
   } finally {
-    // Cleanup logic: release resources, close connections, etc.
-    connection.close()
+    clearInterval(intervalId)  // Cleanup
   }
 }
 ```
 
-### Default Rendering Behavior
-
-By default, when a stateful component is rendered in Ajo, it wraps its yielded content within a `<div>` element. This `<div>` becomes the context of the component's generator function, referred to as `this` within the function. 
+### Component Lifecycle
 
-For example:
+Stateful components have a simple lifecycle:
+- Initialization: When the generator is first called
+- Rendering: Each time the generator yields
+- Cleanup: When the generator's `finally` block is executed
 
-```javascript
-function* MyComponent() {
-  // The 'this' variable here refers to the default 'div' wrapper element
+```jsx
+function* LifecycleDemo() {
+  console.log('Initialized')
+  try {
+    while (true) {
+      console.log('Rendering')
+      yield <div>Hello, Ajo!</div>
+    }
+  } finally {
+    console.log('Cleanup')
+  }
 }
 ```
-> This default behavior ensures a consistent and predictable wrapper for your component's content, making it easier to manage and style.
 
-### Customizing the Wrapper Element
+### attr: Attributes
 
-While the default wrapper is a `<div>`, Ajo provides the flexibility to change this to any other HTML element type. This is particularly useful for semantic correctness or when integrating with existing HTML structures, especially in SSR scenarios.
+Use the `attr:` prefix to add HTML attributes to a component's root element:
 
-To specify a different element type for the wrapper, set the `is` property on the Generator Function of your component. For example:
-
-```javascript
-function* MyCustomRow() {
-  // The 'this' variable here refers to the default 'tr' wrapper element
+```jsx
+function* CustomButton(props) {
+  while (true) yield <>{props.children}</>
 }
+CustomButton.is = 'button'
 
-MyCustomRow.is = 'tr'
+// Usage
+<CustomButton attr:class="primary" attr:id="submit-btn">
+  Click me
+</CustomButton>
 ```
-> This code will instruct Ajo to render a `<tr>` element instead of the default `<div>`. This capability is crucial for rendering and hydrating any type of HTML element when using stateful components.
 
-### Wrapper Element Default Attributes
+### Component.attrs and Component.is
 
-When a stateful component is rendered in Ajo, you can specify default attributes for all components instances of that type. This is useful for setting default attributes that are common to all instances of a component, such as `class` or `style`.
+Use `Component.attrs` to set default attributes for a component:
 
-To specify default attributes for a component, set the `attrs` property on the Generator Function of your component. For example:
-
-```javascript
-function* MyComponent() {
-  // ...
+```jsx
+function* CustomButton(props) {
+  while (true) yield <>{props.children}</>
 }
-
-MyComponent.attrs = { class: 'my-class' }
+CustomButton.attrs = { class: 'btn btn-primary' }
 ```
-> This code will instruct Ajo to set the `class` attribute to `my-class` on all instances of `MyComponent`.
 
-### `attr:`
+Use `Component.is` to specify the HTML element for a component:
 
-- **Purpose:** The `attr:` prefix is used in Ajo to explicitly set attributes to the underlying DOM element of a stateful component.
-This prefix distinguishes regular HTML attributes from component arguments, making it easier to identify and manage them.
-
-- **Behavior:**
-  - When a stateful component is rendered in Ajo, any property on it that starts with `attr:` is treated as a regular HTML attribute and is applied to the component's underlying DOM element.
-  - This mechanism ensures that the arguments are clearly identified and separated from the HTML attributes.
-
-- **Usage:** 
-  - Use `attr:` prefixed attributes when you need to pass attributes to a component's underlying DOM element.
-
-- **Example:**
 ```jsx
-function* ParentComponent() {
-
-  const someData = { /* ... */ }
-  const handleEvent = () => { /* ... */ }
-
-  yield <ChildComponent
-          attr:class="my-class"
-          data={someData}
-          onEvent={handleEvent}
-        />
-}
-
-function* ChildComponent(props) { // props is an object containing data and onEvent
-  // ...
+function* CustomInput(props) {
+  while (true) yield <>{props.children}</>
 }
+CustomInput.is = 'input'
 ```
-> In this example, `ParentComponent` renders `ChildComponent`, passing `someData` and `handleEvent` as arguments. `attr:class` is a regular HTML attribute and is not passed to the component's generator function, it is applied to the DOM element associated with the component.
-
-This `attr:` prefixed attribute system in Ajo enhances the clarity and readability of component composition. It makes the intent of passing DOM attributes more explicit, reducing confusion between function arguments and HTML attributes.
 
-### SSR and Hydration
-
-In the context of Server-Side Rendering (SSR), this features allows Ajo to gracefully hydrate existing SSR-generated DOM elements. Ajo can extend the functionality of built-in browser DOM elements without relying on Web Components or standards like Declarative Shadow DOM. It provides a streamlined, efficient method for enhancing and manipulating built-in elements, offering a more practical solution compared to the complexities of Web Components.
+## API
 
-## Lifecycle methods
+### `ajo` module
 
-Stateful components in Ajo are equipped with several methods that allow for advanced control over component behavior, error handling, and rendering processes. These methods are called lifecycle methods and are invoked at different stages of the component's lifecycle.
+#### `h(type, props?, ...children)`
 
-### `this.$next()`
+Creates virtual DOM elements.
 
-The `$next` method is used within stateful components in Ajo to advance the component's generator function to its next yield point. This method is crucial for rendering the next state of the component.
+```javascript
+const element = h('div', { class: 'container' }, 'Hello, Ajo!')
+```
 
-#### Purpose:
+#### `render(vnode, container)`
 
-- **Synchronous Rendering:** `this.$next()` is used to render the next state of the component. It advances the generator function to the next yield, reflecting any changes in state or props right away.
+Renders a virtual DOM tree into a DOM element.
 
-#### Usage:
+```javascript
+render(h(App), document.body)
+```
 
-- **In Response to State Changes:** Typically, `this.$next()` is called in scenarios where the component's state has changed and an update to the DOM is required.
+#### `Fragment({ children })`
 
-#### Example:
+A component for grouping elements without adding extra nodes to the DOM.
 
 ```jsx
-function* Counter() {
+const List = () => (
+  <Fragment>
+    <li>Item 1</li>
+    <li>Item 2</li>
+  </Fragment>
+)
+```
 
-  let count = 0
+#### `context(defaultValue)`
 
-  const increment = () => {
+Creates a context with an optional default value.
 
-    count++
+```javascript
+const ThemeContext = context('light')
 
-    this.$next()
-  }
+// In a stateless component:
+const StatelessComponent = () => {
+  const theme = ThemeContext()
+  return <div>Current theme: {theme}</div>
+}
 
+// In a stateful component:
+function* StatefulComponent() {
   while (true) {
-    yield <button set:onclick={increment}>{count}</button>
+    const theme = ThemeContext(this)
+    yield <div>Current theme: {theme}</div>
   }
 }
-```
-> In this example, `Counter` uses `this.$next()` in its `increment` function to render the updated count whenever the button is clicked.
-
-```jsx
-function* DataFetcher() {
-
-  let data = null
-
-  const fetchData = async () => {
-
-    data = await fetchSomeData()
-
-    // Queue a re-render to update the component with the fetched data:
-    this.$next()
-  }
 
+// Setting context value:
+function* App() {
+  ThemeContext(this, 'dark')
   while (true) {
     yield (
-      <div>
-        <button set:onclick={fetchData}>Fetch Data</button>
-        {data && <DisplayData data={data} />}
-      </div>
+      <>
+        <FunctionalComponent />
+        <StatefulComponent />
+      </>
     )
   }
 }
 ```
-> In this example, `DataFetcher` uses `this.$next()` to update its display after data is fetched.
-
-### `this.$throw()`
-> **Note:** `this.$throw()` is automatically called when an error is thrown from a component's generator function.
-
-The `$throw` method in Ajo stateful components is designed for error propagation within the component hierarchy. It allows developers to throw errors from a child component to be caught and handled by itself or a parent component, facilitating a structured approach to error management.
-
-#### Purpose:
-
-- **Error Propagation:** `this.$throw()` is used to send errors from the current component up to its parents component, akin to creating an error boundary.
-
-#### Usage:
-
-- **Handling Uncaught Exceptions:** Typically used within event handlers or asynchronous operations where errors might occur. Instead of handling these errors locally within the component, `this.$throw()` sends them to the parent component for a more centralized handling approach.
-- **Creating Error Boundaries:** Useful in scenarios where a parent component is designed to handle errors from its child components, maintaining separation of concerns and cleaner code.
-
-#### Example:
-
-```jsx
-function* ChildComponent() {
-
-  const handleErrorProneOperation = async () => {
-    try {
-
-      // operation that might throw an error
-      await doSomething()
 
-    } catch (err) {
-
-      // Propagate error to parent component
-      this.$throw(err) 
-    }
-  }
+#### Stateful Components and Component Methods
 
-  while (true) {
-    yield <button set:onclick={handleErrorProneOperation}>Click Me</button>
-  }
-}
+Ajo's stateful components are implemented as generator functions and have access to several special methods:
 
-function* ParentComponent() {
+```javascript
+function* StatefulComponent(props) {
+  // Component logic here
   while (true) {
-    try {
-      yield <ChildComponent />
-    } catch (err) {
-      yield <div>Error: {err.message}</div>
-    }
+    yield (/* JSX */)
   }
 }
 ```
-> In this example, `ChildComponent` uses `this.$throw()` within an event handler to propagate errors upwards to its parent component, `ParentComponent`. The parent component then catches the error and renders it to the DOM.
-
-### `this.$return()`
-> **Note:** `this.$return()` is automatically called when a stateful component is unmounted.
-
-The `$return` method in Ajo is used to reset and restart the generator function of a stateful component. It effectively ends the current execution of the component's generator function, and optionally re-execute it from scratch allowing for a complete reset of the component's state and behavior.
-
-#### Purpose:
-
-- **Component Reset:** `this.$return()` is used to restart a component's generator function from the beginning, resetting its internal state and re-initializing it as needed.
 
-#### Usage:
+Component methods:
 
-- **Re-initializing Components:** Ideal for use cases where the component needs to reset its state completely, such as in response to significant prop changes or to reinitialize after certain user interactions.
-- **Refreshing Component State:** Helps in scenarios where the existing state and logic of a component need to be discarded and started afresh.
+- `this.render()`: Triggers a re-render of the component. It's the primary method for updating the component's UI after state changes.
 
-#### Example:
-
-```jsx
-function* MultiStepForm({ initialData }) {
-
-  let currentStep = 0
-  let formData = { ...initialData }
-
-  const handleNextStep = () => {
-
-    // Logic to move to the next step
-    currentStep++
-
-    // Re-render with the next step
-    this.render()
+  ```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>
+    }
   }
+  ```
 
-  const handleRestart = () => {
+- `this.$next()`: Advances the generator to the next yield point. It's automatically called by `this.render()` and is rarely used directly.
 
-    // Reset the generator function
-    this.$return()
+- `this.$throw(error)`: Throws an error in the generator. Useful for error propagation and creating error boundaries. Ajo automatically calls this method when an error occurs during rendering.
 
-    // Re-render the component in its initial state
-    this.render()
-  }
-
-  while (true) {
-    switch(currentStep) {
-      case 0:
-        yield <StepOne
-                data={formData}
-                onNext={handleNextStep}
-                onRestart={handleRestart}
-              />
-        break
-      case 1:
-        yield <StepTwo
-                data={formData}
-                onNext={handleNextStep}
-                onRestart={handleRestart}
-              />
-        break
-      default:
-        yield <FinalStep
-                data={formData}
-                onRestart={handleRestart}
-              />
+  ```javascript
+  function* ErrorBoundary(props) {
+    try {
+      while (true) {
+        yield <div>{props.children}</div>
+      }
+    } catch (error) {
+      yield <div>An error occurred: {error.message}</div>
     }
   }
-}
-```
-> In `handleRestart`, `this.$return()` is first called to reset the generator function. This effectively ends the current execution of the component's generator function and prepares it to start from the beginning. Immediately after, `this.$next()` is called to trigger a re-render of the component. This ensures that after the state is reset, the component's UI is also updated to reflect its initial state.
-
-## Server-Side Rendering (SSR)
-
-Ajo supports Server-Side Rendering (SSR), enabling components to be rendered to HTML in server-side JavaScript environments. This feature enhances the capabilities of Ajo for projects requiring SEO-friendly pages and faster initial page loads.
-
-### SSR Implementation with `ajo/html`
-
-For SSR in Ajo, use the `render` and `html` functions from the `ajo/html` module. These functions are designed to convert a virtual DOM tree into an HTML string or HTML chunks for streaming, suitable for server-side environments.
-
-### Client-Side Hydration
-
-Once HTML is rendered on the server, it can be hydrated on the client-side by Ajo to become interactive. The client-side `render` function can render into the root element containing the SSR-generated DOM.
-
-### Example Usage
-
-Server-side:
-
-```javascript
-import express from 'express'
-import { render } from 'ajo/html'
-import { App } from './components'
+  ```
 
-const app = express()
+- `this.$return()`: Completes the generator execution. It's automatically called by Ajo when a component is unmounted, but can be used manually to reset a component's state.
 
-app.get('/', (req, res) => {
-
-  const html = render(<App />)
-
-  res.send(`
-    <!DOCTYPE html>
-    <html>
-      <head>
-        <title>My App</title>
-      </head>
-      <body>
-        <div id="root">${html}</div>
-      </body>
-    </html>`)
-})
-
-app.listen(3000)
-```
-
-Client-side:
-
-```javascript
-import { render } from 'ajo'
-import { App } from './components'
-
-// Hydrate the #root element with the server-rendered DOM
-render(<App />, document.getElementById('root'))
-```
-
-### Streaming HTML Chunks
-
-The `html` function is designed to be used with various streaming technologies. Its output can be seamlessly integrated into different streaming environments, offering developers the flexibility to choose the streaming solution that best fits their project requirements.
-
-This streaming capability is useful for progressively rendering content, enhancing Time to First Paint (TTFP) and user experience. It allows browsers to begin rendering content as soon as the initial chunks arrive.
-
-## SSR API
+  ```javascript
+  function* ResetableComponent() {
+    let count = 0
+    const reset = () => {
+      this.$return()  // Reset the generator
+      this.render()   // Re-render from the beginning
+    }
+    while (true) {
+      yield (
+        <div>
+          <p>Count: {count}</p>
+          <button set:onclick={() => { count++; this.render(); }}>Increment</button>
+          <button set:onclick={reset}>Reset</button>
+        </div>
+      )
+    }
+  }
+  ```
 
-### `render(h: Any): String`
+- `this.$args`: Provides access to the current args of the component.
 
-Renders a virtual DOM tree (`h`) into a complete HTML string.
+  ```javascript
+  function* DynamicGreeting() {
+    while (true) {
+      yield <h1>Hello, {this.$args.name}!</h1>
+    }
+  }
+  ```
 
-#### Parameters:
+These methods provide powerful control over the component's lifecycle and state management, allowing for efficient and flexible UI updates. Note that `this.$throw()` and `this.$return()` are often called automatically by Ajo in response to errors or component unmounting, respectively, but can also be used manually when needed.
 
-- **h** (Any): The virtual DOM tree to render. This can be any value, a simple string, or a virtual DOM tree created by the `h` function.
+### `ajo/html` module
 
-#### Returns:
+For server-side rendering:
 
-- A string representation of the rendered HTML.
+#### `render(vnode)`
 
-#### Example Usage:
+Renders a virtual DOM tree to an HTML string.
 
 ```javascript
 import { render } from 'ajo/html'
 import { App } from './components'
 
 const html = render(<App />)
-// The `html` can be sent as part of an HTTP response
 ```
 
-### `html(h: Any): Generator`
-
-A generator function that iterates through a virtual DOM tree, yielding HTML strings.
+#### `html(vnode)`
 
-#### Parameters:
-
-- **h** (Any): The virtual DOM tree to iterate through.
-
-#### Yield:
-
-- Yields HTML strings corresponding to each node in the virtual DOM.
-
-#### Usage:
-
-- Suitable for streaming HTML chunks to the client, compatible with any streaming technology.
-
-#### Example Usage:
+Generates an iterator of HTML strings for streaming.
 
 ```javascript
 import { html } from 'ajo/html'
 import { App } from './components'
 
 for (const chunk of html(<App />)) {
-  stream.push(chunk)
+  // Send chunk to the client
+  stream.write(chunk)
 }
 ```
 
-## Acknowledgments
-Ajo takes heavy inspiration from [Incremental DOM](https://github.com/google/incremental-dom) and [Crank.js](https://github.com/bikeshaving/crank)
-
 ## License
 
-ISC © [Cristian Falcone](cristianfalcone.com)
+ISC © [Cristian Falcone](cristianfalcone.com)

package/types.ts

@@ -6,7 +6,7 @@ declare module 'ajo' {
 
   type Props = Record<string, unknown>
 
-  type AjoNode<TTag extends Type> = { nodeName: TTag } & TagProps<TTag>
+  type VNode<TTag extends Type> = { nodeName: TTag } & TagProps<TTag>
 
   type Children = any
 
@@ -31,7 +31,7 @@ declare module 'ajo' {
     [K in keyof TAttribute as `attr:${Exclude<K, symbol>}`]: TAttribute[K]
   }
 
-  type Context<TArguments = Props> = {
+  type ComponentThis<TArguments = Props> = {
     $args: TArguments,
     $context: { [key: symbol]: unknown },
     render: () => void,
@@ -43,7 +43,7 @@ declare module 'ajo' {
   type Function<TArguments = Props> = (args: TArguments) => Children
 
   type Component<TArguments = Props, TTag extends Tag = 'div'> = {
-    (this: ElementType<TTag> & Context<TArguments>, args: TArguments): Iterator<Children, unknown, unknown>
+    (this: ElementType<TTag> & ComponentThis<TArguments>, args: TArguments): Iterator<Children, unknown, unknown>
   } & (TTag extends 'div' ? { is?: TTag } : { is: TTag })
 
   type Ref<TComponent> = TComponent extends Component<infer TArguments, infer TTag>
@@ -67,9 +67,9 @@ declare module 'ajo' {
     : never
 
   function Fragment({ children }: ElementChildrenAttribute): typeof children
-  function h<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null, ...children: Array<unknown>): AjoNode<TTag>
+  function h<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null, ...children: Array<unknown>): VNode<TTag>
   function render(h: Children, el: Element): void
-  function context<T>(fallback?: T): { (el: ThisParameterType<Component<unknown, Tag>>, value?: T): T }
+  function context<T>(fallback?: T): (el?: ThisParameterType<Component<unknown, Tag>>, value?: T) => T
 }
 
 declare namespace JSX {