ajo 0.1.15 → 0.1.18

package/dist/html.cjs

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

package/dist/html.js

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

package/dist/index.cjs

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

package/dist/index.js

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

package/license

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2023, Cristian Falcone
+Copyright (c) 2024, Cristian Falcone
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

package/package.json

@@ -1,8 +1,11 @@
 {
   "name": "ajo",
-  "version": "0.1.15",
+  "version": "0.1.18",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
+  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "types": "./types.ts",
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -20,10 +23,10 @@
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "^20.12.7",
-    "jsdom": "24.0.0",
-    "vite": "5.2.8",
-    "vitest": "1.5.0"
+    "@types/node": "^20.14.10",
+    "jsdom": "24.1.0",
+    "vite": "5.3.3",
+    "vitest": "2.0.1"
   },
   "keywords": [
     "ui",

package/readme.md

@@ -68,7 +68,7 @@ function* Counter() {
 
   const handleClick = () => {
     count++
-    this.refresh()
+    this.render()
   }
 
   while (true) yield (
@@ -254,7 +254,7 @@ Stateful components in Ajo are defined using generator functions. These componen
 The following example demonstrates key features of stateful components in Ajo:
 
 ```jsx
-function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments initial values.
+function* ChatComponent(props) {
 
   // Define mutable state variables.
   let message = '', connected = false
@@ -264,36 +264,33 @@ function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments ini
 
     message = event.target.value
 
-    // Render synchronously.
-    this.next()
+    this.render()
   }
 
   const send = () => {
 
     if (message) {
 
-      // Access current arguments values with 'this.$args'.
-      connection.send(JSON.stringify({ user: this.$args.user, message }))
+      connection.send(JSON.stringify({ user: props.user ?? 'Anonymous', message }))
 
       message = ''
 
-      // Render asynchronously.
-      this.refresh()
+      this.render()
     }
   }
 
   const handleConnectionOpen = () => {
     connected = true
-    this.refresh()
+    this.render()
   }
 
   const handleConnectionError = error => {
     // Throw error to be caught by the component itself or a parent component.
-    this.throw(new Error('Connection error: ' + error.message))
+    this.$throw(new Error('Connection error: ' + error.message))
   }
 
   // Setup resources.
-  const server = `ws://chat.com/${room}`
+  const server = `ws://chat.com/${props.room}`
   const connection = new WebSocket(server)
 
   connection.onopen = handleConnectionOpen
@@ -304,12 +301,12 @@ function* ChatComponent({ user = 'Anonymous', room }) { // Receive arguments ini
 
   try { // Optional try/finally block for cleanup logic.
 
-    for ({ user } of this) { // Iterates over generator, optionally receiving updated arguments.
+    while (true) {
 
       try { // Optional try/catch block for error handling.
 
         // Compute derived values.
-        const status = connected ? `You are connected as ${user}.` : "Connecting to chat..."
+        const status = connected ? `You are connected as ${props.user ?? 'Anonymous'}.` : "Connecting to chat..."
 
         // Render the component UI.
         yield (
@@ -401,7 +398,7 @@ function* ParentComponent() {
         />
 }
 
-function* ChildComponent({ data, onEvent }) {
+function* ChildComponent(props) { // props is an object containing data and onEvent
   // ...
 }
 ```
@@ -417,95 +414,76 @@ In the context of Server-Side Rendering (SSR), this features allows Ajo to grace
 
 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.
 
-### `this.refresh()`
+### `this.$next()`
 
-The `refresh` method is used to asynchronously trigger a re-render of a stateful component in Ajo. It schedules a render using `requestAnimationFrame`, ensuring that the rendering aligns with the browser's paint cycle.
+The `$next` method is used within stateful components in Ajo to advance the component's generator function to its next yield point. This method is crucial for rendering the next state of the component.
 
 #### Purpose:
 
-- **Asynchronous Rendering:** `this.refresh()` queues a render of the component in the next animation frame, making it asynchronous.
-- **Single Render:** If called multiple times before the browser paints, `this.refresh()` schedules only one render, ensuring that the component is rendered only once.
+- **Synchronous Rendering:** `this.$next()` is used to render the next state of the component. It advances the generator function to the next yield, reflecting any changes in state or props right away.
 
 #### Usage:
 
-- **For Performance Optimization:** Ideal in scenarios where multiple state updates occur in quick succession.
-- **In Event Handlers and Async Operations:** Useful in event handlers or after asynchronous operations where you need to update the UI in response to changes.
+- **In Response to State Changes:** Typically, `this.$next()` is called in scenarios where the component's state has changed and an update to the DOM is required.
 
 #### Example:
 
 ```jsx
-function* DataFetcher() {
+function* Counter() {
 
-  let data = null
+  let count = 0
 
-  const fetchData = async () => {
+  const increment = () => {
 
-    data = await fetchSomeData()
+    count++
 
-    // Queue a re-render to update the component with the fetched data:
-    this.refresh()
+    this.$next()
   }
 
   while (true) {
-    yield (
-      <div>
-        <button set:onclick={fetchData}>Fetch Data</button>
-        {data && <DisplayData data={data} />}
-      </div>
-    )
+    yield <button set:onclick={increment}>{count}</button>
   }
 }
 ```
-> 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.
-
-#### Purpose:
-
-- **Synchronous Rendering:** `this.next()` is used to immediately render the next state of the component. It advances the generator function to the next yield, reflecting any changes in state or props right away.
-
-#### Usage:
-
-- **In Response to State Changes:** Typically, `this.next()` is called in scenarios where the component's state has changed and an immediate update to the DOM is required.
-- **For Controlled Updates:** It allows for more controlled and predictable updates, as it bypasses the asynchronous rendering cycle from `this.refresh()`.
-
-#### Example:
+> In this example, `Counter` uses `this.$next()` in its `increment` function to render the updated count whenever the button is clicked.
 
 ```jsx
-function* Counter() {
+function* DataFetcher() {
 
-  let count = 0
+  let data = null
 
-  const increment = () => {
+  const fetchData = async () => {
 
-    count++
+    data = await fetchSomeData()
 
-    // Immediately render the updated count
-    this.next()
+    // Queue a re-render to update the component with the fetched data:
+    this.$next()
   }
 
   while (true) {
-    yield <button set:onclick={increment}>{count}</button>
+    yield (
+      <div>
+        <button set:onclick={fetchData}>Fetch Data</button>
+        {data && <DisplayData data={data} />}
+      </div>
+    )
   }
 }
 ```
-> 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, `DataFetcher` uses `this.$next()` to update its display after data is fetched.
 
-### `this.throw()`
-> **Note:** `this.throw()` is automatically called when an error is thrown from a component's generator function.
+### `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.
+The `$throw` method in Ajo stateful components is designed for error propagation within the component hierarchy. It allows developers to throw errors from a child component to be caught and handled by itself or a parent component, facilitating a structured approach to error management.
 
 #### Purpose:
 
-- **Error Propagation:** `this.throw()` is used to send errors from the current component up to its parents component, akin to creating an error boundary.
+- **Error Propagation:** `this.$throw()` is used to send errors from the current component up to its parents component, akin to creating an error boundary.
 
 #### Usage:
 
-- **Handling Uncaught Exceptions:** Typically used within event handlers or asynchronous operations where errors might occur. Instead of handling these errors locally within the component, `this.throw()` sends them to the parent component for a more centralized handling approach.
+- **Handling Uncaught Exceptions:** Typically used within event handlers or asynchronous operations where errors might occur. Instead of handling these errors locally within the component, `this.$throw()` sends them to the parent component for a more centralized handling approach.
 - **Creating Error Boundaries:** Useful in scenarios where a parent component is designed to handle errors from its child components, maintaining separation of concerns and cleaner code.
 
 #### Example:
@@ -522,7 +500,7 @@ function* ChildComponent() {
     } catch (err) {
 
       // Propagate error to parent component
-      this.throw(err) 
+      this.$throw(err) 
     }
   }
 
@@ -541,16 +519,16 @@ 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.
+### `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.
+The `$return` method in Ajo is used to reset and restart the generator function of a stateful component. It effectively ends the current execution of the component's generator function, and optionally re-execute it from scratch allowing for a complete reset of the component's state and behavior.
 
 #### Purpose:
 
-- **Component Reset:** `this.return()` is used to restart a component's generator function from the beginning, resetting its internal state and re-initializing it as needed.
+- **Component Reset:** `this.$return()` is used to restart a component's generator function from the beginning, resetting its internal state and re-initializing it as needed.
 
 #### Usage:
 
@@ -571,16 +549,16 @@ function* MultiStepForm({ initialData }) {
     currentStep++
 
     // Re-render with the next step
-    this.refresh()
+    this.render()
   }
 
   const handleRestart = () => {
 
     // Reset the generator function
-    this.return()
+    this.$return()
 
     // Re-render the component in its initial state
-    this.refresh()
+    this.render()
   }
 
   while (true) {
@@ -608,7 +586,7 @@ 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.$next()` is called to trigger a re-render of the component. This ensures that after the state is reset, the component's UI is also updated to reflect its initial state.
 
 ## Server-Side Rendering (SSR)
 

package/types.ts

@@ -2,21 +2,13 @@ declare module 'ajo' {
 
   type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
 
+  type Type = Tag | Function | Component
+
   type Props = Record<string, unknown>
 
-  type AjoNode<TTag = Tag> = { nodeName: TTag } & AjoProps<ElementType<TTag>> & Props
+  type AjoNode<TTag extends Type> = { nodeName: TTag } & TagProps<TTag>
 
-  type Children =
-    | null
-    | undefined
-    | boolean
-    | bigint
-    | number
-    | string
-    | symbol
-    | Node
-    | AjoNode
-    | Iterable<Children>
+  type Children = any
 
   type ElementType<TTag = Tag> = TTag extends keyof HTMLElementTagNameMap
     ? HTMLElementTagNameMap[TTag]
@@ -40,21 +32,23 @@ declare module 'ajo' {
   }
 
   type Context<TArguments = Props> = {
-    $args: TArguments
-    next: () => void
-    throw: (value?: unknown) => void
-    return: () => void
-    refresh: () => void
-    [Symbol.iterator]: () => Generator<TArguments, unknown, unknown>
+    $args: TArguments,
+    $context: { [key: symbol]: unknown },
+    render: () => void,
+    $next: () => void
+    $throw: (value?: unknown) => void
+    $return: () => void
   }
 
   type Function<TArguments = Props> = (args: TArguments) => Children
 
   type Component<TArguments = Props, TTag extends Tag = 'div'> = {
-    (this: ComponentElement<TArguments, TTag>, args: TArguments): Generator<Children, unknown, unknown>
+    (this: ElementType<TTag> & Context<TArguments>, args: TArguments): Iterator<Children, unknown, unknown>
   } & (TTag extends 'div' ? { is?: TTag } : { is: TTag })
 
-  type ComponentElement<TArguments = Props, TTag = Tag> = Context<TArguments> & ElementType<TTag>
+  type Ref<TComponent> = TComponent extends Component<infer TArguments, infer TTag>
+    ? Component<TArguments & { ref: (el: ThisParameterType<Ref<TComponent>> | null) => void }, TTag>
+    : never 
 
   type IntrinsicElements = {
     [TTag in Tag]: Partial<SetProps<TTag> & AjoProps<ElementType<TTag>>> & Props
@@ -64,9 +58,18 @@ declare module 'ajo' {
 
   type ElementChildrenAttribute = { children: Children }
 
+  type TagProps<TTag extends Type> = TTag extends Tag
+    ? IntrinsicElements[TTag] & IntrinsicAttributes
+    : TTag extends Function<infer TArguments>
+    ? TArguments
+    : TTag extends Component<infer TArguments>
+    ? TArguments
+    : never
+
   function Fragment({ children }: ElementChildrenAttribute): typeof children
-  function h<TProps = Props>(type: Tag | Function<TProps> | Component<TProps>, props?: TProps | null, ...children: Children[]): AjoNode<typeof type>
+  function h<TTag extends Tag>(tag: TTag, props?: TagProps<TTag> | null, ...children: Array<unknown>): AjoNode<TTag>
   function render(h: Children, el: Element): void
+  function context<T>(fallback?: T): { (el: ThisParameterType<Component<unknown, Tag>>, value?: T): T }
 }
 
 declare namespace JSX {