ajo 0.1.11 → 0.1.13

package/dist/html.cjs

@@ -1 +1 @@
-"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;
+"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: 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))
+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 m(e);
+      yield u(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}="${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* $(o), yield `</${t}>`);
+      const { nodeName: t, skip: o, children: i = "" } = e;
+      let n = "";
+      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}>`);
     }
-}, y = function* (e, t = { value: "" }, r = !0) {
-  for (e of f(e) ? e : [e])
+}, c = function* (e, t = { value: "" }, o = !0) {
+  for (e of y(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 = v(n, c), yield o;
+        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 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* y(n(e), t, !1);
+            delete e.nodeName, yield* c(n(e), t, !1);
         else
-          a === "string" && (yield e);
+          l === "string" && (yield e);
       } else
-        f(e) ? yield* y(e, t, !1) : t.value += e;
-  r && 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(",")), m = (e) => e.replace(/[&<>"']/g, (t) => `&#${t.charCodeAt(0)};`), v = (e, t) => {
-  let r, l;
+        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 (; ; )
@@ -39,24 +41,24 @@ const { entries: p, hasOwn: g } = Object, f = (e) => typeof e != "string" && typ
       refresh() {
       },
       next() {
-        l = u(n.next().value);
+        i = f(n.next().value);
       },
-      throw(a) {
-        l = u(n.throw(a).value);
+      throw(l) {
+        i = f(n.throw(l).value);
       },
       return() {
         n.return();
       }
     }, t);
-    r.next();
+    o.next();
   } catch (n) {
-    r.throw(n);
+    o.throw(n);
   } finally {
-    r.return();
+    o.return();
   }
-  return l;
+  return i;
 };
 export {
-  $ as html,
-  u as render
+  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.11",
+  "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:
 
@@ -265,7 +247,7 @@ In Ajo, there are several special attributes (`key`, `skip`, `memo`, and `ref`)
 - **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
 
 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.
 
@@ -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 = ''
@@ -349,6 +332,87 @@ function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments ini
 }
 ```
 
+### 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. 
+
+For example:
+
+```javascript
+function* MyComponent() {
+  // The 'this' variable here refers to the default 'div' wrapper element
+}
+```
+> 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
+
+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.
+
+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
+}
+
+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.
+
+### 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.
+
+### 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.
+
 ## Lifecycle methods
 
 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.
@@ -523,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}
               />
     }
   }
@@ -546,39 +610,114 @@ 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:`
+## Server-Side Rendering (SSR)
 
-- **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.
+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.
 
-- **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.
+### SSR Implementation with `ajo/html`
 
-- **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.
+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.
 
-- **Example:**
-```jsx
-function* ParentComponent() {
+### Client-Side Hydration
 
-  const someData = { /* ... */ }
-  const handleEvent = () => { /* ... */ }
+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.
 
-  yield <ChildComponent
-          class="my-class"
-          arg:data={someData}
-          arg:onEvent={handleEvent}
-        />
-}
+### Example Usage
 
-function* ChildComponent({ data, onEvent }) {
-  // ...
-}
+Server-side:
+
+```javascript
+import express from 'express'
+import { render } from 'ajo/html'
+import { App } from './components'
+
+const app = express()
+
+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
+
+### `render(h: Any): String`
+
+Renders a virtual DOM tree (`h`) into a complete HTML string.
+
+#### Parameters:
+
+- **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.
+
+#### Returns:
+
+- A string representation of the rendered HTML.
+
+#### Example Usage:
+
+```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
 ```
-> 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.
+### `html(h: Any): Generator`
+
+A generator function that iterates through a virtual DOM tree, yielding HTML strings.
+
+#### 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:
+
+```javascript
+import { html } from 'ajo/html'
+import { App } from './components'
+
+for (const chunk of html(<App />)) {
+  stream.push(chunk)
+}
+```
 
 ## Acknowledgments
 Ajo takes heavy inspiration from [Incremental DOM](https://github.com/google/incremental-dom) and [Crank.js](https://github.com/bikeshaving/crank)