ajo 0.1.12 → 0.1.13

package/dist/html.cjs

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

package/dist/html.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "module": "./dist/index.js",
@@ -20,8 +20,8 @@
   ],
   "devDependencies": {
     "jsdom": "^23.0.1",
-    "vite": "^5.0.4",
-    "vitest": "^0.34.6"
+    "vite": "^5.0.10",
+    "vitest": "^1.0.4"
   },
   "keywords": [
     "ui",

package/readme.md

@@ -15,7 +15,7 @@
 
 # Ajo
 
-Ajo is a cutting-edge 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.
+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:
 
@@ -23,7 +23,7 @@ Key features:
 - **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 full suite of lifecycle methods for stateful components, facilitating precise control over component behaviors during their lifecycle.
+- **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.
 
 ## Install
@@ -137,9 +137,6 @@ import { h } from 'ajo'
 // 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 virtual tree for a stateless component with children
 const MyComponent = ({ class: className }) => h('div', { class: className },
   h('h1', null, 'Header'),
@@ -147,26 +144,11 @@ const MyComponent = ({ class: className }) => h('div', { class: className },
   h('p', null, 'Paragraph'),
 )
 
-// or using JSX syntax
-const MyComponentJSX = ({ class: className }) => (
-  <div class={className}>
-    <h1>Header</h1>
-    Text Content
-    <p>Paragraph</p>
-  </div>
-)
-
 // Composing
 const MyApp = () => h(MyComponent, { class: 'my-class' })
 
-// or using JSX syntax
-const MyAppJSX = () => <MyComponent class="my-class" />
-
 // Render into a DOM element
 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.
 
@@ -183,6 +165,7 @@ In JSX, fragments are typically represented with empty tags (`<>...</>`), but th
 //* @jsxFrag Fragment */
 import { h, Fragment } from 'ajo'
 
+// Using the h function
 const MyComponent = () => {
   return h(Fragment, null,
     h('h1', null, 'Hello'),
@@ -201,16 +184,15 @@ const MyComponentJSX = () => (
 
 ### `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.
+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:
 
-- **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.
+- 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:
 
-- **Versatile Property Assignment:** 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 data properties, and more.
-- **JavaScript-centric DOM Interaction:** Ideal for situations where setting a DOM property is more appropriate or efficient than setting an HTML attribute.
+- 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:
 
@@ -290,6 +272,7 @@ function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments ini
 
     if (message) {
 
+      // Access current arguments values with 'this.$args'.
       connection.send(JSON.stringify({ user: this.$args.user, message }))
 
       message = ''
@@ -377,11 +360,58 @@ MyCustomRow.is = 'tr'
 ```
 > 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.
 
-#### SSR and Hydration
+### Wrapper Element Default Attributes
+
+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`.
+
+To specify default attributes for a component, set the `attrs` property on the Generator Function of your component. For example:
+
+```javascript
+function* MyComponent() {
+  // ...
+}
+
+MyComponent.attrs = { class: 'my-class' }
+```
+> This code will instruct Ajo to set the `class` attribute to `my-class` on all instances of `MyComponent`.
+
+### `attr:`
+
+- **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({ data, onEvent }) {
+  // ...
+}
+```
+> 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.
 
-In the context of Server-Side Rendering (SSR), this feature allows Ajo to gracefully hydrate existing SSR-generated DOM elements. It means that Ajo can extend the functionality of built-in browser DOM elements without relying on Web Components or standards like Declarative Shadow DOM.
+### SSR and Hydration
 
-This approach provides a streamlined, efficient method for enhancing and manipulating built-in elements, offering a more practical solution compared to the complexities of Web Components.
+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.
 
 ## Lifecycle methods
 
@@ -557,22 +587,22 @@ function* MultiStepForm({ initialData }) {
     switch(currentStep) {
       case 0:
         yield <StepOne
-                arg:data={formData}
-                arg:onNext={handleNextStep}
-                arg:onRestart={handleRestart}
+                data={formData}
+                onNext={handleNextStep}
+                onRestart={handleRestart}
               />
         break
       case 1:
         yield <StepTwo
-                arg:data={formData}
-                arg:onNext={handleNextStep}
-                arg:onRestart={handleRestart}
+                data={formData}
+                onNext={handleNextStep}
+                onRestart={handleRestart}
               />
         break
       default:
         yield <FinalStep
-                arg:data={formData}
-                arg:onRestart={handleRestart}
+                data={formData}
+                onRestart={handleRestart}
               />
     }
   }
@@ -580,40 +610,6 @@ 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.
 
-### `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 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 arguments and other attributes that might be used for styling or DOM manipulation.
-
-- **Example:**
-```jsx
-function* ParentComponent() {
-
-  const someData = { /* ... */ }
-  const handleEvent = () => { /* ... */ }
-
-  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.
-
-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.
-
 ## 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.