ajo 0.1.9 → 0.1.10

package/dist/html.cjs

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

package/dist/html.js

@@ -1,13 +1,13 @@
-const { entries: $, hasOwn: g } = Object, f = (e) => typeof e != "string" && typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", u = (e) => [...p(e)].join(""), p = function* (e) {
+const { entries: p, hasOwn: g } = Object, f = (e) => typeof e != "string" && typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", u = (e) => [...$(e)].join(""), $ = function* (e) {
   for (e of y(e))
     if (typeof e == "string")
       yield m(e);
     else {
       const { nodeName: t, key: r, skip: l, memo: n, ref: a, children: o, ...c } = e;
       let i = "";
-      for (const [s, d] of $(c))
+      for (const [s, d] of p(c))
         s.startsWith("set:") || d == null || d === !1 || (i += d === !0 ? `${i} ${s}` : `${i} ${s}="${m(String(d))}"`);
-      k.has(t) ? yield `<${t}${i}>` : l ? yield `<${t}${i}></${t}>` : typeof o == "string" ? yield `<${t}${i}>${o}</${t}>` : (yield `<${t}${i}>`, yield* p(o), yield `</${t}>`);
+      k.has(t) ? yield `<${t}${i}>` : l ? yield `<${t}${i}></${t}>` : typeof o == "string" ? yield `<${t}${i}>${o}</${t}>` : (yield `<${t}${i}>`, yield* $(o), yield `</${t}>`);
     }
 }, y = function* (e, t = { value: "" }, r = !0) {
   for (e of f(e) ? e : [e])
@@ -17,7 +17,7 @@ const { entries: $, hasOwn: g } = Object, f = (e) => typeof e != "string" && typ
         if (l && (yield l, t.value = ""), a === "function")
           if (n.constructor.name === "GeneratorFunction") {
             const o = {}, c = {};
-            for (const [i, s] of $(e))
+            for (const [i, s] of p(e))
               i !== "is" && (i === "children" ? c.children = s : i.startsWith("arg:") ? c[i.slice(4)] = s : o[i] = s);
             o.nodeName = e.is ?? n.is ?? "div", o.children = v(n, c), yield o;
           } else
@@ -31,7 +31,7 @@ const { entries: $, hasOwn: g } = Object, f = (e) => typeof e != "string" && typ
   let r, l;
   try {
     const n = e.call(r = {
-      args: t,
+      $args: t,
       *[Symbol.iterator]() {
         for (; ; )
           yield t;
@@ -57,6 +57,6 @@ const { entries: $, hasOwn: g } = Object, f = (e) => typeof e != "string" && typ
   return l;
 };
 export {
-  p as html,
+  $ as html,
   u as render
 };

package/dist/index.cjs

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

package/dist/index.js

@@ -1,103 +1,110 @@
-const { isArray: N, prototype: { slice: E } } = Array, { assign: p, setPrototypeOf: S, hasOwn: T } = Object, v = (e) => typeof e != "string" && typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", B = ({ children: e }) => e, H = function(e, t) {
+const { isArray: w, prototype: { slice: b } } = Array, { assign: $, setPrototypeOf: x, hasOwn: A, keys: E } = Object, h = (e) => typeof e != "string" && typeof (e == null ? void 0 : e[Symbol.iterator]) == "function", H = ({ children: e }) => e, L = function(e, n) {
   const { length: i } = arguments;
-  return (t ?? (t = {})).nodeName = e, "children" in t || i < 3 || (t.children = i === 3 ? arguments[2] : E.call(arguments, 2)), t;
-}, w = (e, t, i = t.namespaceURI) => {
-  let o = t.firstChild;
-  for (e of x(e)) {
-    let n = o;
+  return (n ?? (n = {})).nodeName = e, "children" in n || i < 3 || (n.children = i === 3 ? arguments[2] : b.call(arguments, 2)), n;
+}, m = (e, n) => {
+  let i = n.firstChild;
+  for (e of d(e)) {
+    let t = i;
     if (typeof e == "string") {
-      for (; n && n.nodeType != 3; )
-        n = n.nextSibling;
-      n ? n.data != e && (n.data = e) : n = document.createTextNode(e);
+      for (; t && t.nodeType != 3; )
+        t = t.nextSibling;
+      t ? t.data != e && (t.data = e) : t = document.createTextNode(e);
     } else if (e instanceof Node)
-      n = e;
+      t = e;
     else {
-      const { nodeName: c, xmlns: u = c === "svg" ? "http://www.w3.org/2000/svg" : i, key: a, skip: r, memo: d, ref: m, children: g } = e;
-      for (; n && !(n.localName === c && (n.$key ?? (n.$key = a)) == a); )
-        n = n.nextSibling;
-      if (n ?? (n = p(document.createElementNS(u, c), { $key: a })), d == null || C(n.$memo, n.$memo = d)) {
-        const { $attrs: y } = n, $ = {}, h = {};
-        for (const s in p({}, y, e)) {
+      const { nodeName: o, key: c, skip: a, memo: f, ref: y, children: k } = e;
+      for (; t && !(t.localName === o && (t.$key ?? (t.$key = c)) == c); )
+        t = t.nextSibling;
+      if (t ?? (t = $(document.createElementNS(e.xmlns ?? o === "svg" ? "http://www.w3.org/2000/svg" : n.namespaceURI, o), { $key: c })), f == null || q(t.$memo, t.$memo = f)) {
+        const { $props: u } = t, g = {}, p = {};
+        for (const s in $({}, u, e)) {
+          if (F.has(s))
+            continue;
           if (s.startsWith("arg:")) {
-            h[s.slice(4)] = e[s];
+            p[s.slice(4)] = e[s];
             continue;
           }
-          if (q.has(s))
-            continue;
-          const f = $[s] = e[s];
-          f !== (y == null ? void 0 : y[s]) && (s.startsWith("set:") ? n[s.slice(4)] = f : f == null || f === !1 ? n.removeAttribute(s) : n.setAttribute(s, f === !0 ? "" : f));
+          const l = g[s] = e[s];
+          l !== (u == null ? void 0 : u[s]) && (s.startsWith("set:") ? t[s.slice(4)] = l : l == null || l === !1 ? t.removeAttribute(s) : t.setAttribute(s, l === !0 ? "" : l));
         }
-        n.$attrs = $, r || w(g, n, u), typeof m == "function" && (n.$ref = m)(n, h);
+        t.$props = g, a || m(k, t), typeof y == "function" && (t.$ref = y)(t, p);
       }
     }
-    n === o ? o = o.nextSibling : F(t, n, o);
+    t === i ? i = i.nextSibling : I(n, t, i);
   }
-  for (; o; ) {
-    const n = o.nextSibling;
-    o.nodeType === 1 && b(o), t.removeChild(o), o = n;
+  for (; i; ) {
+    const t = i.nextSibling;
+    i.nodeType === 1 && v(i), n.removeChild(i), i = t;
   }
-}, x = function* (e, t = { value: "" }, i = !0) {
-  for (e of v(e) ? e : [e])
+}, d = function* (e, n = { value: "" }, i = !0) {
+  for (e of h(e) ? e : [e])
     if (!(e == null || typeof e == "boolean"))
-      if (T(e, "nodeName")) {
-        const { value: o } = t, { nodeName: n } = e, c = typeof n;
-        if (o && (yield o, t.value = ""), c === "function")
-          if (n.constructor.name === "GeneratorFunction") {
-            const { is: u = n.is ?? "div", ref: a } = e;
-            e.ref = (r, d) => r && (r.$gen ?? (r.$gen = (new I(r, u), n)), p(r, { $ref: (m, g) => (m ?? r.return(), typeof a == "function" && a(m, g)), $args: d }).next()), e.skip = !0, e.nodeName = u, delete e.is, "children" in e && (e["arg:children"] = e.children, delete e.children), yield e;
+      if (A(e, "nodeName")) {
+        const { value: t } = n, { nodeName: o } = e, c = typeof o;
+        if (t && (yield t, n.value = ""), c === "function")
+          if (o.constructor.name === "GeneratorFunction") {
+            const { is: a = o.is ?? "div", ref: f } = e;
+            e.nodeName = a, delete e.is, e.skip = !0, e.ref = T.bind(null, o, a, f), "children" in e && (e["arg:children"] = e.children, delete e.children), yield e;
           } else
-            delete e.nodeName, yield* x(n(e), t, !1);
+            delete e.nodeName, yield* d(o(e), n, !1);
         else
           c === "string" && (yield e);
       } else
-        v(e) ? yield* x(e, t, !1) : t.value += e;
-  i && t.value && (yield t.value);
-}, C = (e, t) => N(e) && N(t) ? e.some((i, o) => i !== t[o]) : e !== t, q = new Set("nodeName,xmlns,key,skip,memo,ref,children".split(",")), F = (e, t, i) => {
-  if (t.contains(document.activeElement)) {
-    const o = t.nextSibling;
-    for (; i && i != t; ) {
-      const n = i.nextSibling;
-      e.insertBefore(i, o), i = n;
+        h(e) ? yield* d(e, n, !1) : n.value += e;
+  i && n.value && (yield n.value);
+}, T = (e, n, i, t, o) => {
+  t && (t.$gen ?? (t.$gen = (new M(t, n), e)), t.$ref = C.bind(null, t, i), t.$args = o, t.next());
+}, C = (e, n, i, t) => {
+  i || e.return(), typeof n == "function" && n(i, t);
+}, q = (e, n) => w(e) && w(n) ? e.some((i, t) => i !== n[t]) : e !== n, F = new Set("nodeName,key,skip,memo,ref,children".split(",")), I = (e, n, i) => {
+  if (n.contains(document.activeElement)) {
+    const t = n.nextSibling;
+    for (; i && i != n; ) {
+      const o = i.nextSibling;
+      e.insertBefore(i, t), i = o;
     }
   } else
-    e.insertBefore(t, i);
-}, b = ({ children: e, $ref: t }) => {
-  for (const i of e)
-    b(i);
-  typeof t == "function" && t(null);
+    e.insertBefore(n, i);
+}, v = (e) => {
+  for (const i of e.children)
+    v(i);
+  const { $ref: n } = e;
+  typeof n == "function" && n(null);
+  for (const i of E(e))
+    e[i] = null;
 };
-class I {
-  constructor(t, i) {
-    return S(t, S(this.constructor.prototype, M(i, t.namespaceURI).prototype));
+class M {
+  constructor(n, i) {
+    return x(n, x(this.constructor.prototype, O(n, i).prototype));
   }
   *[Symbol.iterator]() {
     for (; ; )
       yield this.$args;
   }
   refresh() {
-    O(this);
+    U(this);
   }
   next() {
     try {
-      w((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);
+      m((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);
     }
   }
-  throw(t) {
+  throw(n) {
     var i;
-    for (let o = this; o; o = o.parentNode)
-      if (typeof ((i = o.$it) == null ? void 0 : i.throw) == "function")
+    for (let t = this; t; t = t.parentNode)
+      if (typeof ((i = t.$it) == null ? void 0 : i.throw) == "function")
         try {
-          return w(o.$it.throw(t).value, o);
+          return m(t.$it.throw(n).value, t);
         } catch {
         }
-    throw t;
+    throw n;
   }
   return() {
-    var t;
+    var n;
     try {
-      (t = this.$it) == null || t.return();
+      (n = this.$it) == null || n.return();
     } catch (i) {
       this.throw(i);
     } finally {
@@ -105,25 +112,25 @@ class I {
     }
   }
 }
-let k, l, A;
-const M = (e, t) => {
-  let i = (k ?? (k = /* @__PURE__ */ new Map())).get(e);
-  return i || ({ constructor: i } = document.createElementNS(t, e), k.set(e, i === HTMLUnknownElement ? i = HTMLElement : i)), i;
-}, O = (e) => {
-  (l ?? (l = /* @__PURE__ */ new Set())).has(e) && l.delete(e);
-  for (const t of l) {
-    if (t.contains(e))
+let N, r, S;
+const O = (e, n) => {
+  let i = (N ?? (N = /* @__PURE__ */ new Map())).get(n);
+  return i || ({ constructor: i } = document.createElementNS(e.namespaceURI, n), N.set(n, i === HTMLUnknownElement ? i = HTMLElement : i)), i;
+}, U = (e) => {
+  (r ?? (r = /* @__PURE__ */ new Set())).has(e) && r.delete(e);
+  for (const n of r) {
+    if (n.contains(e))
       return;
-    e.contains(t) && l.delete(t);
+    e.contains(n) && r.delete(n);
   }
-  l.add(e), A ?? (A = requestAnimationFrame(U));
-}, U = () => {
-  for (const e of l)
+  r.add(e), S ?? (S = requestAnimationFrame(B));
+}, B = () => {
+  for (const e of r)
     e.isConnected && e.next();
-  l.clear(), A = null;
+  r.clear(), S = null;
 };
 export {
-  B as Fragment,
-  H as h,
-  w as render
+  H as Fragment,
+  L as h,
+  m as render
 };

package/package.json

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

package/readme.md

@@ -83,19 +83,18 @@ render(<Counter />, document.body)
 
 ## API
 
-### render(vnode, element, [namespace])
+### render(h, el)
 
-Renders a virtual DOM node (`vnode`) created by the `h` function into the actual DOM `element`. It is the primary method used for updating the DOM with new content.
+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 the parent `element` with the new content, adding, updating, or removing DOM nodes as needed.
+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:
 
-- **vnode** (Any): The virtual DOM node (created by `h`) to render. This can be any value, a simple string, a JSX element, or a more complex component.
-- **element** (HTMLElement): The DOM element into which the `vnode` should be rendered. This is typically a container element in your application.
-- **namespace** (String, optional): An optional XML namespace URI. If specified, it allows for the creation of elements within a certain XML namespace, useful for SVG elements and other XML-based documents.
+- **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:
 
@@ -113,21 +112,21 @@ const App = () => <div>Hello, World!</div>
 // Render the App component into the #root element
 render(<App />, document.getElementById('root'))
 ```
-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`.
+> 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(name, [attributes], [...children])
+### h(type, [props], [...children])
 
-Creates a virtual DOM element (vnode) 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 node representing the UI component. This object can then be rendered to the actual DOM using the `render` function.
+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.
 
 #### Parameters:
 
-- **name** (String | Function | Generator Function): The name of the tag for the DOM node 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.
-- **attributes** (Object, optional): An object containing the attributes you want to set on the element.
-- **children** (Any, optional): Child nodes. Can be a nested array of children, a string, or any other renderable JSX elements. Booleans, null, and undefined children will be ignored, which is useful for conditional rendering.
+- **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 node (vnode).
+- **Object**: A virtual DOM tree.
 
 #### Example Usage:
 
@@ -135,13 +134,13 @@ Creates a virtual DOM element (vnode) for rendering. It's the core function for
 /** @jsx h */
 import { h } from 'ajo'
 
-// Creating a simple vnode
+// Creating a simple virtual element
 const myElement = h('div', { id: 'my-div' }, 'Hello World')
 
 // or using JSX syntax
 const myElementJSX = <div id="my-div">Hello World</div>
 
-// Creating a vnode for a stateless component with children
+// Creating a virtual tree for a stateless component with children
 const MyComponent = ({ class: className }) => h('div', { class: className },
   h('h1', null, 'Header'),
   'Text Content',
@@ -169,7 +168,7 @@ render(h(MyApp), document.body)
 // or using JSX syntax
 render(<MyAppJSX />, document.body)
 ```
-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.
+> 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 })`
 
@@ -202,11 +201,11 @@ const MyComponentJSX = () => (
 
 ### `set:`
 
-The `set:` prefix in Ajo allows you to directly set properties on DOM element nodes 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.
+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.
 
 #### Purpose:
 
-- **Direct DOM Property Manipulation:** The `set:` prefix is used for directly setting properties on DOM nodes. 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.
+- **Direct DOM Property Manipulation:** 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.
 
 #### Usage:
 
@@ -222,16 +221,16 @@ function* MyComponent() {
   yield <div set:textContent={text} skip></div>
 }
 ```
-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.
+> 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:**
+**Setting Inner HTML:**
 ```jsx
 function* MyComponent() {
   const html = "<p>Hello, Ajo!</p>"
   yield <div set:innerHTML={html} skip></div>
 }
 ```
-In this case, `set:innerHTML` is used to set the `innerHTML` property of the `div`'s DOM node. `skip` is used to prevent Ajo from overriding the `div`'s children.
+> 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.
 
 **Event Handlers (e.g., onclick):**
 ```jsx
@@ -240,7 +239,7 @@ function* MyComponent() {
   yield <button set:onclick={handleClick}>Click Me</button>
 }
 ```
-`set:onclick` assigns the `handleClick` function as the click event listener for the button.
+> `set:onclick` assigns the `handleClick` function as the click event listener for the button.
 
 ### Special Attributes in Ajo
 
@@ -257,93 +256,85 @@ In Ajo, there are several special attributes (`key`, `skip`, `memo`, and `ref`)
 - **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 memorization. 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 and child nodes. For stateful components, this also prevents the component from re-rendering.
-- **Example:** `h(div, { memo: [dependency1, dependency2] })` - the element (and all its child nodes) will re-render only if `dependency1` or `dependency2` change.
+- **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 node or component element instance.
-- **Behavior:** When an element is mounted or updated, the `ref` callback is called with the DOM node or component instance 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: node => (this.inputNode = node) })` - stores a reference to the input node.
-
-These special attributes in Ajo offer powerful ways to manage rendering performance and interact with DOM elements and components elements directly. They provide developers with finer control over the update behavior and lifecycle of components in their applications.
+- **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 all the key features of stateful components in Ajo:
+The following example demonstrates key features of stateful components in Ajo:
 
 ```jsx
-function* ChatComponent({ userName = 'Anonymous', chatRoom }) { // Receive arguments initial values.
-  
-  // Define mutable state variables.
-  let messageToSend = '', isConnected = false
+function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments initial values.
 
-  // WebSocket connection setup.
-  const chatServerURL = `ws://chatserver.com/${chatRoom}`
-  const chatConnection = new WebSocket(chatServerURL)
+  // Define mutable state variables.
+  let message = '', connected = false
 
   // Define event handlers.
   const handleMessageChange = event => {
 
-    messageToSend = event.target.value
+    message = event.target.value
 
-    // Render the updated messageToSend (synchronously)
+    // Render synchronously.
     this.next()
   }
 
-  const sendMessage = () => {
+  const send = () => {
 
-    // Logic to send a message.
-    if (messageToSend) {
+    if (message) {
 
-      chatConnection.send(JSON.stringify({ user: this.$args.userName, message: messageToSend }))
+      connection.send(JSON.stringify({ user: this.$args.user, message }))
 
-      // Reset message input after sending.
-      messageToSend = ''
+      message = ''
 
-      // Refresh to clear input field (asynchronously).
+      // Render asynchronously.
       this.refresh()
     }
   }
 
   const handleConnectionOpen = () => {
-
-    isConnected = true
-
-     // Refresh to update connection status.
+    connected = true
     this.refresh()
   }
 
   const handleConnectionError = error => {
+    // Throw error to be caught by the component itself or a parent component.
     this.throw(new Error('Connection error: ' + error.message))
   }
 
-  // Attach WebSocket event listeners.
-  chatConnection.onopen = handleConnectionOpen
-  chatConnection.onerror = handleConnectionError
+  // Setup resources.
+  const server = `ws://chat.com/${room}`
+  const connection = new WebSocket(server)
 
-  // 'this' is a DOM element, so we can add a class to it.
+  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.
 
-    for ({ userName } of this) { // Iterates over generator, optionally receiving updated arguments.
+    for ({ user } of this) { // Iterates over generator, optionally receiving updated arguments.
 
       try { // Optional try/catch block for error handling.
 
         // Compute derived values.
-        const statusMessage = isConnected ? `You are connected as ${userName}.` : "Connecting to chat..."
+        const status = connected ? `You are connected as ${user}.` : "Connecting to chat..."
 
-        // Render the chat component UI.
-        // Use set: prefix to set properties on DOM nodes, like event handlers.
+        // Render the component UI.
         yield (
           <>
-            <div class="status-message">{statusMessage}</div>
-            <div class="connection-status">{isConnected ? 'Connected' : 'Connecting...'}</div>
-            <input type="text" value={messageToSend} set:onchange={handleMessageChange} />
-            <button set:onclick={sendMessage}>Send</button>
+            <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) {
@@ -352,8 +343,8 @@ function* ChatComponent({ userName = 'Anonymous', chatRoom }) { // Receive argum
       }
     }
   } finally {
-    // Cleanup logic: close WebSocket connection.
-    chatConnection.close()
+    // Cleanup logic: release resources, close connections, etc.
+    connection.close()
   }
 }
 ```
@@ -401,9 +392,10 @@ function* DataFetcher() {
   }
 }
 ```
-In this example, `DataFetcher` uses `this.refresh()` to update its display after data is fetched. The use of `this.refresh()` ensures that the rendering is efficient and aligned with the browser's rendering cycle.
+> In this example, `DataFetcher` uses `this.refresh()` to update its display after data is fetched. The use of `this.refresh()` ensures that the rendering is efficient and aligned with the browser's rendering cycle.
 
 ### `this.next()`
+> **Note:** `this.next()` is called asynchronously when calling `this.refresh()`.
 
 The `next` method is used within stateful components in Ajo to manually advance the component's generator function to its next yield point. This method is crucial for synchronously rendering the next state of the component.
 
@@ -436,9 +428,10 @@ function* Counter() {
   }
 }
 ```
-In this example, `Counter` uses `this.next()` in its `increment` function to immediately render the updated count whenever the button is clicked.
+> In this example, `Counter` uses `this.next()` in its `increment` function to immediately render the updated count whenever the button is clicked.
 
 ### `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.
 
@@ -484,10 +477,10 @@ function* ParentComponent() {
   }
 }
 ```
-
-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.
+> 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.
 
@@ -521,11 +514,11 @@ function* MultiStepForm({ initialData }) {
 
     // Reset the generator function
     this.return()
-    
+
     // Re-render the component in its initial state
     this.refresh()
   }
-    
+
   while (true) {
     switch(currentStep) {
       case 0:
@@ -551,19 +544,19 @@ function* MultiStepForm({ initialData }) {
   }
 }
 ```
-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.refresh()` 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.
+> 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.refresh()` 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.
 
 ### `arg:`
 
 - **Purpose:** The `arg:` prefix is used in Ajo to explicitly pass arguments to generator functions. This prefix distinguishes component arguments from regular HTML attributes and other special properties.
 
 - **Behavior:**
-  - When a stateful component is rendered in Ajo, any attribute on it that starts with `arg:` is treated as an argument to be passed to the component's generator function.
+  - When a stateful component is rendered in Ajo, any property on it that starts with `arg:` is treated as an argument to be passed to the component's generator function.
   - This mechanism ensures that the arguments are clearly identified and separated from other attributes or DOM properties.
 
 - **Usage:** 
   - Use `arg:` prefixed attributes when you need to pass data or event handlers to a component's generator function.
-  - This approach is particularly useful in maintaining a clear separation between component-specific props and other attributes that might be used for styling or DOM manipulation.
+  - This approach is particularly useful in maintaining a clear separation between component-specific arguments and other attributes that might be used for styling or DOM manipulation.
 
 - **Example:**
 ```jsx
@@ -572,14 +565,18 @@ function* ParentComponent() {
   const someData = { /* ... */ }
   const handleEvent = () => { /* ... */ }
 
-  yield <ChildComponent arg:data={someData} arg:onEvent={handleEvent} class="my-class" />
+  yield <ChildComponent
+          class="my-class"
+          arg:data={someData}
+          arg:onEvent={handleEvent}
+        />
 }
 
 function* ChildComponent({ data, onEvent }) {
   // ...
 }
 ```
-In this example, `ParentComponent` renders `ChildComponent`, passing `someData` and `handleEvent` as arguments using the `arg:` prefix. `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.
+> In this example, `ParentComponent` renders `ChildComponent`, passing `someData` and `handleEvent` as arguments using the `arg:` prefix. `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 `arg:` prefixed attribute system in Ajo enhances the clarity and readability of component composition. It makes the intent of passing down arguments more explicit, reducing confusion between HTML attributes, and other special properties. This is especially beneficial in complex applications where components have multiple responsibilities and interact with both their children and the DOM.