ajo 0.1.26 → 0.1.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/html.cjs +1 -1
- package/dist/html.js +47 -48
- package/dist/index.cjs +1 -1
- package/dist/index.js +68 -70
- package/package.json +1 -1
- package/readme.md +77 -91
package/dist/html.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./context.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./context.cjs"),g=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),m=Symbol.for("ajo.args"),y=e=>e.replace(/[&<>"']/g,r=>`&#${r.charCodeAt(0)};`),o=()=>{},b=e=>[...f(e)].join(""),f=function*(e,{alloc:r=o,push:t=o,placeholder:n=o}={}){for(e of d(e,{alloc:r,push:t,placeholder:n}))typeof e=="string"?yield y(e):yield*$(e,{alloc:r,push:t,placeholder:n})},$=function*({nodeName:e,children:r,...t},n){let l="";for(const i in t)i.startsWith("set:")||t[i]==null||t[i]===!1||(t[i]===!0?l+=` ${i}`:l+=` ${i}="${y(String(t[i]))}"`);g.has(e)?yield`<${e}${l}>`:(yield`<${e}${l}>`,r!=null&&(yield*f(r,n)),yield`</${e}>`)},d=function*(e,r){if(e==null)return;const t=typeof e;if(t!="boolean")if(t=="string")yield e;else if(t=="number"||t=="bigint")yield String(e);else if(Symbol.iterator in e)for(e of e)yield*d(e,r);else"nodeName"in e?typeof e.nodeName=="function"?yield*v(e,r):yield u(e,r):yield String(e)},v=function*({nodeName:e,fallback:r=e.fallback,...t},n){const l=e.constructor.name;e.src?yield w(e.src,t,n):l=="GeneratorFunction"?yield S(e,t,n):l=="AsyncGeneratorFunction"?yield x(e,r,t,n):(t=e(t),typeof t?.then=="function"?yield A(r,t,n):yield*d(t,n))},w=(e,r,t)=>{const n=t.alloc();return t.push({id:n,src:e,h:u(r,t),done:!0}),t.placeholder(n)},S=(e,r,t)=>{const n={...e.attrs},l={...e.args};for(const c in r)c.startsWith("attr:")?n[c.slice(5)]=r[c]:c=="key"||c=="skip"||c=="memo"||c=="ref"||c.startsWith("set:")?n[c]=r[c]:l[c]=r[c];const i={[a.Context]:Object.create(a.current()?.[a.Context]??null),[m]:l,next:o,return:o,throw:c=>{throw c}},s=e.call(i,l),p=a.current();a.current(i);try{const c=[...d(s.next().value,t)];return{...n,nodeName:e.is??"div",children:c.length==1?c[0]:c}}finally{s.return?.(),a.current(p)}},x=(e,r,t,n)=>{const l=n.alloc();return Promise.resolve().then(async()=>{const i=e(t);n={...n,alloc:(s=l)=>n.alloc(s)};try{for(t=await i.next();!t.done;)n.push({id:l,h:u(t.value,n),done:!1}),t=await i.next();n.push({id:l,h:u(t.value,n),done:!0})}catch(s){n.push({id:l,h:u(s,n),done:!0})}finally{i.return?.()}}),n.placeholder(l,r)},A=(e,r,t)=>{const n=t.alloc();return r.then(l=>t.push({id:n,h:u(l,{...t,alloc:(i=n)=>t.alloc(i)}),done:!0})),t.placeholder(n,e)},u=({key:e,skip:r,memo:t,ref:n,...l},i)=>{if("children"in l){const s=[...d(l.children,i)];s.length?l.children=s.length==1?s[0]:s:delete l.children}return l};exports.html=f;exports.render=b;
|
package/dist/html.js
CHANGED
|
@@ -1,74 +1,73 @@
|
|
|
1
|
-
import { Context as
|
|
2
|
-
const
|
|
3
|
-
},
|
|
4
|
-
for (e of
|
|
5
|
-
typeof e == "string" ? yield
|
|
6
|
-
}, $ = function* (e, r) {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
}, u = function* (e, r) {
|
|
1
|
+
import { Context as y, current as f } from "./context.js";
|
|
2
|
+
const m = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), b = Symbol.for("ajo.args"), d = (e) => e.replace(/[&<>"']/g, (r) => `&#${r.charCodeAt(0)};`), u = () => {
|
|
3
|
+
}, j = (e) => [...p(e)].join(""), p = function* (e, { alloc: r = u, push: t = u, placeholder: n = u } = {}) {
|
|
4
|
+
for (e of o(e, { alloc: r, push: t, placeholder: n }))
|
|
5
|
+
typeof e == "string" ? yield d(e) : yield* $(e, { alloc: r, push: t, placeholder: n });
|
|
6
|
+
}, $ = function* ({ nodeName: e, children: r, ...t }, n) {
|
|
7
|
+
let l = "";
|
|
8
|
+
for (const i in t)
|
|
9
|
+
i.startsWith("set:") || t[i] == null || t[i] === !1 || (t[i] === !0 ? l += ` ${i}` : l += ` ${i}="${d(String(t[i]))}"`);
|
|
10
|
+
m.has(e) ? yield `<${e}${l}>` : (yield `<${e}${l}>`, r != null && (yield* p(r, n)), yield `</${e}>`);
|
|
11
|
+
}, o = function* (e, r) {
|
|
13
12
|
if (e == null) return;
|
|
14
13
|
const t = typeof e;
|
|
15
14
|
if (t != "boolean")
|
|
16
15
|
if (t == "string") yield e;
|
|
17
16
|
else if (t == "number" || t == "bigint") yield String(e);
|
|
18
|
-
else if (Symbol.iterator in e) for (e of e) yield*
|
|
19
|
-
else "nodeName" in e ? typeof e.nodeName == "function" ? yield*
|
|
20
|
-
},
|
|
21
|
-
const
|
|
22
|
-
e.src ? yield
|
|
23
|
-
},
|
|
17
|
+
else if (Symbol.iterator in e) for (e of e) yield* o(e, r);
|
|
18
|
+
else "nodeName" in e ? typeof e.nodeName == "function" ? yield* w(e, r) : yield a(e, r) : yield String(e);
|
|
19
|
+
}, w = function* ({ nodeName: e, fallback: r = e.fallback, ...t }, n) {
|
|
20
|
+
const l = e.constructor.name;
|
|
21
|
+
e.src ? yield v(e.src, t, n) : l == "GeneratorFunction" ? yield x(e, t, n) : l == "AsyncGeneratorFunction" ? yield S(e, r, t, n) : (t = e(t), typeof t?.then == "function" ? yield A(r, t, n) : yield* o(t, n));
|
|
22
|
+
}, v = (e, r, t) => {
|
|
24
23
|
const n = t.alloc();
|
|
25
24
|
return t.push({ id: n, src: e, h: a(r, t), done: !0 }), t.placeholder(n);
|
|
26
|
-
},
|
|
27
|
-
const n = { ...e.attrs },
|
|
25
|
+
}, x = (e, r, t) => {
|
|
26
|
+
const n = { ...e.attrs }, l = { ...e.args };
|
|
28
27
|
for (const c in r)
|
|
29
|
-
c.startsWith("attr:") ? n[c.slice(5)] = r[c] :
|
|
30
|
-
const
|
|
31
|
-
[
|
|
32
|
-
[
|
|
33
|
-
next:
|
|
34
|
-
return:
|
|
28
|
+
c.startsWith("attr:") ? n[c.slice(5)] = r[c] : c == "key" || c == "skip" || c == "memo" || c == "ref" || c.startsWith("set:") ? n[c] = r[c] : l[c] = r[c];
|
|
29
|
+
const i = {
|
|
30
|
+
[y]: Object.create(f()?.[y] ?? null),
|
|
31
|
+
[b]: l,
|
|
32
|
+
next: u,
|
|
33
|
+
return: u,
|
|
35
34
|
throw: (c) => {
|
|
36
35
|
throw c;
|
|
37
36
|
}
|
|
38
|
-
}, s = e.call(
|
|
39
|
-
|
|
37
|
+
}, s = e.call(i, l), g = f();
|
|
38
|
+
f(i);
|
|
40
39
|
try {
|
|
41
|
-
const c = [...
|
|
40
|
+
const c = [...o(s.next().value, t)];
|
|
42
41
|
return { ...n, nodeName: e.is ?? "div", children: c.length == 1 ? c[0] : c };
|
|
43
42
|
} finally {
|
|
44
|
-
s.return?.(),
|
|
43
|
+
s.return?.(), f(g);
|
|
45
44
|
}
|
|
46
|
-
},
|
|
47
|
-
const
|
|
45
|
+
}, S = (e, r, t, n) => {
|
|
46
|
+
const l = n.alloc();
|
|
48
47
|
return Promise.resolve().then(async () => {
|
|
49
|
-
const
|
|
50
|
-
n = { ...n, alloc: (s =
|
|
48
|
+
const i = e(t);
|
|
49
|
+
n = { ...n, alloc: (s = l) => n.alloc(s) };
|
|
51
50
|
try {
|
|
52
|
-
for (t = await
|
|
53
|
-
n.push({ id:
|
|
54
|
-
n.push({ id:
|
|
51
|
+
for (t = await i.next(); !t.done; )
|
|
52
|
+
n.push({ id: l, h: a(t.value, n), done: !1 }), t = await i.next();
|
|
53
|
+
n.push({ id: l, h: a(t.value, n), done: !0 });
|
|
55
54
|
} catch (s) {
|
|
56
|
-
n.push({ id:
|
|
55
|
+
n.push({ id: l, h: a(s, n), done: !0 });
|
|
57
56
|
} finally {
|
|
58
|
-
|
|
57
|
+
i.return?.();
|
|
59
58
|
}
|
|
60
|
-
}), n.placeholder(
|
|
61
|
-
},
|
|
59
|
+
}), n.placeholder(l, r);
|
|
60
|
+
}, A = (e, r, t) => {
|
|
62
61
|
const n = t.alloc();
|
|
63
|
-
return r.then((
|
|
64
|
-
}, a = ({ key: e, skip: r, memo: t, ref: n, ...
|
|
65
|
-
if ("children" in
|
|
66
|
-
const s = [...
|
|
67
|
-
s.length ?
|
|
62
|
+
return r.then((l) => t.push({ id: n, h: a(l, { ...t, alloc: (i = n) => t.alloc(i) }), done: !0 })), t.placeholder(n, e);
|
|
63
|
+
}, a = ({ key: e, skip: r, memo: t, ref: n, ...l }, i) => {
|
|
64
|
+
if ("children" in l) {
|
|
65
|
+
const s = [...o(l.children, i)];
|
|
66
|
+
s.length ? l.children = s.length == 1 ? s[0] : s : delete l.children;
|
|
68
67
|
}
|
|
69
|
-
return
|
|
68
|
+
return l;
|
|
70
69
|
};
|
|
71
70
|
export {
|
|
72
71
|
p as html,
|
|
73
|
-
|
|
72
|
+
j as render
|
|
74
73
|
};
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./context.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./context.cjs"),y=Symbol.for("ajo.key"),h=Symbol.for("ajo.memo"),b=Symbol.for("ajo.ref"),p=Symbol.for("ajo.cache"),c=Symbol.for("ajo.generator"),l=Symbol.for("ajo.iterator"),m=Symbol.for("ajo.render"),a=Symbol.for("ajo.args"),v=t=>t.children,C=(t,e,...r)=>((e??={}).nodeName=t,!("children"in e)&&r.length&&(e.children=r.length==1?r[0]:r),e),f=(t,e)=>{let r=e.firstChild;for(t of g(t)){const n=E(t,e,r);r==null?e.appendChild(n):n==r?r=n.nextSibling:n==r.nextSibling?(e.appendChild(r),r=n.nextSibling):W(e,n,r)}for(;r;){const n=r.nextSibling;r.nodeType==1&&w(r),e.removeChild(r),r=n}},g=function*(t){if(t==null)return;const e=typeof t;if(e!="boolean")if(e=="string")yield t;else if(e=="number"||e=="bigint")yield String(t);else if(Symbol.iterator in t)for(t of t)yield*g(t);else"nodeName"in t?typeof t.nodeName=="function"?yield*N(t):yield t:yield String(t)},N=function*({nodeName:t,...e}){t.constructor.name=="GeneratorFunction"?yield k(t,e):yield*g(t(e))},k=function(t,e){const r={...t.attrs},n={...t.args};for(const s in e)s.startsWith("attr:")?r[s.slice(5)]=e[s]:s=="key"||s=="skip"||s=="memo"||s=="ref"||s.startsWith("set:")?r[s]=e[s]:n[s]=e[s];return{...r,nodeName:t.is??"div",[c]:t,[a]:n}},E=(t,e,r)=>typeof t=="string"?O(t,r):T(t,e,r),O=(t,e)=>{for(;e&&e.nodeType!=3;)e=e.nextSibling;return e?e.data!=t&&(e.data=t):e=document.createTextNode(t),e},T=({nodeName:t,children:e,key:r,skip:n,memo:s,ref:S,[c]:u,[a]:j,...x},A,i)=>{for(;i&&(i.localName!=t||i[y]!=null&&i[y]!=r||i[c]&&i[c]!=u);)i=i.nextSibling;return i??=document.createElementNS(x.xmlns??A.namespaceURI,t),r!=null&&(i[y]=r),(s==null||G(i[h],i[h]=s))&&(F(i[p]??R(i),i[p]=x,i),n||(u?B(u,j,i):f(e,i)),typeof S=="function"&&(i[b]=S)(i)),i},F=(t,e,r)=>{for(const n in{...t,...e})t[n]!==e[n]&&(n.startsWith("set:")?r[n.slice(4)]=e[n]:e[n]==null||e[n]===!1?r.removeAttribute(n):r.setAttribute(n,e[n]===!0?"":e[n]))},G=(t,e)=>Array.isArray(t)&&Array.isArray(e)?t.some((r,n)=>r!==e[n]):t!==e,R=t=>Array.from(t.attributes).reduce((e,r)=>(e[r.name]=r.value,e),{}),W=(t,e,r)=>{if(e.contains(document.activeElement)){const n=e.nextSibling;for(;r&&r!=e;){const s=r.nextSibling;t.insertBefore(r,n),r=s}}else t.insertBefore(e,r)},w=t=>{for(const e of t.children)w(e);typeof t.return=="function"&&t.return(),t[b]?.(null)},B=(t,e,r)=>{r[c]??=(I(r),t),Object.assign(r[a]??={},e),r[m]()},I=t=>{Object.assign(t,M),t[o.Context]=Object.create(o.current()?.[o.Context]??null)},M={[m](){const t=o.current();o.current(this);try{const{value:e,done:r}=(this[l]??=this[c].call(this,this[a])).next();f(e,this),this[b]?.(this),r&&this.return()}catch(e){this.throw(e)}finally{o.current(t)}},next(t){if(typeof t=="function")try{t.call(this,this[a])}catch(e){this.throw(e)}o.current()?.contains(this)||this[m]()},throw(t){for(let e=this;e;e=e.parentNode)if(typeof e[l]?.throw=="function")try{return f(e[l].throw(t).value,e)}catch(r){t=new Error(r instanceof Error?r.message:r,{cause:t})}throw t},return(){try{this[l]?.return()}catch(t){this.throw(t)}finally{this[l]=null}}};exports.Fragment=v;exports.h=C;exports.render=f;
|
package/dist/index.js
CHANGED
|
@@ -1,96 +1,94 @@
|
|
|
1
|
-
import { Context as
|
|
2
|
-
const
|
|
3
|
-
let r =
|
|
4
|
-
for (
|
|
5
|
-
const i =
|
|
6
|
-
r == null ?
|
|
1
|
+
import { Context as h, current as l } from "./context.js";
|
|
2
|
+
const u = Symbol.for("ajo.key"), p = Symbol.for("ajo.memo"), b = Symbol.for("ajo.ref"), w = Symbol.for("ajo.cache"), o = Symbol.for("ajo.generator"), c = Symbol.for("ajo.iterator"), y = Symbol.for("ajo.render"), a = Symbol.for("ajo.args"), M = (t) => t.children, U = (t, e, ...r) => ((e ??= {}).nodeName = t, !("children" in e) && r.length && (e.children = r.length == 1 ? r[0] : r), e), m = (t, e) => {
|
|
3
|
+
let r = e.firstChild;
|
|
4
|
+
for (t of g(t)) {
|
|
5
|
+
const i = k(t, e, r);
|
|
6
|
+
r == null ? e.appendChild(i) : i == r ? r = i.nextSibling : i == r.nextSibling ? (e.appendChild(r), r = i.nextSibling) : W(e, i, r);
|
|
7
7
|
}
|
|
8
8
|
for (; r; ) {
|
|
9
9
|
const i = r.nextSibling;
|
|
10
|
-
r.nodeType == 1 &&
|
|
10
|
+
r.nodeType == 1 && j(r), e.removeChild(r), r = i;
|
|
11
11
|
}
|
|
12
|
-
},
|
|
13
|
-
if (
|
|
14
|
-
const
|
|
15
|
-
if (
|
|
16
|
-
if (
|
|
17
|
-
else if (
|
|
18
|
-
else if (Symbol.iterator in
|
|
19
|
-
else "nodeName" in
|
|
20
|
-
},
|
|
21
|
-
|
|
22
|
-
},
|
|
23
|
-
const r = { ...
|
|
24
|
-
for (const
|
|
25
|
-
|
|
26
|
-
return { ...r, nodeName:
|
|
27
|
-
},
|
|
28
|
-
for (;
|
|
29
|
-
return
|
|
30
|
-
},
|
|
31
|
-
for (
|
|
32
|
-
return
|
|
33
|
-
},
|
|
34
|
-
for (const i in { ...
|
|
35
|
-
|
|
36
|
-
},
|
|
37
|
-
if (
|
|
38
|
-
const i =
|
|
39
|
-
for (; r && r !=
|
|
40
|
-
const
|
|
41
|
-
|
|
12
|
+
}, g = function* (t) {
|
|
13
|
+
if (t == null) return;
|
|
14
|
+
const e = typeof t;
|
|
15
|
+
if (e != "boolean")
|
|
16
|
+
if (e == "string") yield t;
|
|
17
|
+
else if (e == "number" || e == "bigint") yield String(t);
|
|
18
|
+
else if (Symbol.iterator in t) for (t of t) yield* g(t);
|
|
19
|
+
else "nodeName" in t ? typeof t.nodeName == "function" ? yield* C(t) : yield t : yield String(t);
|
|
20
|
+
}, C = function* ({ nodeName: t, ...e }) {
|
|
21
|
+
t.constructor.name == "GeneratorFunction" ? yield N(t, e) : yield* g(t(e));
|
|
22
|
+
}, N = function(t, e) {
|
|
23
|
+
const r = { ...t.attrs }, i = { ...t.args };
|
|
24
|
+
for (const s in e)
|
|
25
|
+
s.startsWith("attr:") ? r[s.slice(5)] = e[s] : s == "key" || s == "skip" || s == "memo" || s == "ref" || s.startsWith("set:") ? r[s] = e[s] : i[s] = e[s];
|
|
26
|
+
return { ...r, nodeName: t.is ?? "div", [o]: t, [a]: i };
|
|
27
|
+
}, k = (t, e, r) => typeof t == "string" ? E(t, r) : G(t, e, r), E = (t, e) => {
|
|
28
|
+
for (; e && e.nodeType != 3; ) e = e.nextSibling;
|
|
29
|
+
return e ? e.data != t && (e.data = t) : e = document.createTextNode(t), e;
|
|
30
|
+
}, G = ({ nodeName: t, children: e, key: r, skip: i, memo: s, ref: S, [o]: f, [a]: A, ...x }, v, n) => {
|
|
31
|
+
for (; n && (n.localName != t || n[u] != null && n[u] != r || n[o] && n[o] != f); ) n = n.nextSibling;
|
|
32
|
+
return n ??= document.createElementNS(x.xmlns ?? v.namespaceURI, t), r != null && (n[u] = r), (s == null || R(n[p], n[p] = s)) && (O(n[w] ?? T(n), n[w] = x, n), i || (f ? B(f, A, n) : m(e, n)), typeof S == "function" && (n[b] = S)(n)), n;
|
|
33
|
+
}, O = (t, e, r) => {
|
|
34
|
+
for (const i in { ...t, ...e })
|
|
35
|
+
t[i] !== e[i] && (i.startsWith("set:") ? r[i.slice(4)] = e[i] : e[i] == null || e[i] === !1 ? r.removeAttribute(i) : r.setAttribute(i, e[i] === !0 ? "" : e[i]));
|
|
36
|
+
}, R = (t, e) => Array.isArray(t) && Array.isArray(e) ? t.some((r, i) => r !== e[i]) : t !== e, T = (t) => Array.from(t.attributes).reduce((e, r) => (e[r.name] = r.value, e), {}), W = (t, e, r) => {
|
|
37
|
+
if (e.contains(document.activeElement)) {
|
|
38
|
+
const i = e.nextSibling;
|
|
39
|
+
for (; r && r != e; ) {
|
|
40
|
+
const s = r.nextSibling;
|
|
41
|
+
t.insertBefore(r, i), r = s;
|
|
42
42
|
}
|
|
43
|
-
} else
|
|
44
|
-
},
|
|
45
|
-
for (const
|
|
46
|
-
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
},
|
|
50
|
-
Object.assign(
|
|
51
|
-
}, F = (e, t, r) => {
|
|
52
|
-
typeof e == "function" && e(r), r || t.return();
|
|
43
|
+
} else t.insertBefore(e, r);
|
|
44
|
+
}, j = (t) => {
|
|
45
|
+
for (const e of t.children) j(e);
|
|
46
|
+
typeof t.return == "function" && t.return(), t[b]?.(null);
|
|
47
|
+
}, B = (t, e, r) => {
|
|
48
|
+
r[o] ??= (F(r), t), Object.assign(r[a] ??= {}, e), r[y]();
|
|
49
|
+
}, F = (t) => {
|
|
50
|
+
Object.assign(t, I), t[h] = Object.create(l()?.[h] ?? null);
|
|
53
51
|
}, I = {
|
|
54
52
|
[y]() {
|
|
55
|
-
const
|
|
56
|
-
|
|
53
|
+
const t = l();
|
|
54
|
+
l(this);
|
|
57
55
|
try {
|
|
58
|
-
const { value:
|
|
59
|
-
|
|
60
|
-
} catch (
|
|
61
|
-
this.throw(
|
|
56
|
+
const { value: e, done: r } = (this[c] ??= this[o].call(this, this[a])).next();
|
|
57
|
+
m(e, this), this[b]?.(this), r && this.return();
|
|
58
|
+
} catch (e) {
|
|
59
|
+
this.throw(e);
|
|
62
60
|
} finally {
|
|
63
|
-
|
|
61
|
+
l(t);
|
|
64
62
|
}
|
|
65
63
|
},
|
|
66
|
-
next(
|
|
67
|
-
if (typeof
|
|
68
|
-
|
|
69
|
-
} catch (
|
|
70
|
-
this.throw(
|
|
64
|
+
next(t) {
|
|
65
|
+
if (typeof t == "function") try {
|
|
66
|
+
t.call(this, this[a]);
|
|
67
|
+
} catch (e) {
|
|
68
|
+
this.throw(e);
|
|
71
69
|
}
|
|
72
|
-
|
|
70
|
+
l()?.contains(this) || this[y]();
|
|
73
71
|
},
|
|
74
|
-
throw(
|
|
75
|
-
for (let
|
|
76
|
-
return
|
|
72
|
+
throw(t) {
|
|
73
|
+
for (let e = this; e; e = e.parentNode) if (typeof e[c]?.throw == "function") try {
|
|
74
|
+
return m(e[c].throw(t).value, e);
|
|
77
75
|
} catch (r) {
|
|
78
|
-
|
|
76
|
+
t = new Error(r instanceof Error ? r.message : r, { cause: t });
|
|
79
77
|
}
|
|
80
|
-
throw
|
|
78
|
+
throw t;
|
|
81
79
|
},
|
|
82
80
|
return() {
|
|
83
81
|
try {
|
|
84
|
-
this[
|
|
85
|
-
} catch (
|
|
86
|
-
this.throw(
|
|
82
|
+
this[c]?.return();
|
|
83
|
+
} catch (t) {
|
|
84
|
+
this.throw(t);
|
|
87
85
|
} finally {
|
|
88
|
-
this[
|
|
86
|
+
this[c] = null;
|
|
89
87
|
}
|
|
90
88
|
}
|
|
91
89
|
};
|
|
92
90
|
export {
|
|
93
91
|
M as Fragment,
|
|
94
92
|
U as h,
|
|
95
|
-
|
|
93
|
+
m as render
|
|
96
94
|
};
|
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -36,24 +36,23 @@ npm install ajo
|
|
|
36
36
|
Create your first component:
|
|
37
37
|
|
|
38
38
|
```javascript
|
|
39
|
-
import { render } from 'ajo'
|
|
39
|
+
import { render } from 'ajo'
|
|
40
40
|
|
|
41
41
|
// Stateless component
|
|
42
42
|
const Greeting = ({ name }) => <p>Hello, {name}!</p>
|
|
43
43
|
|
|
44
44
|
// Stateful component
|
|
45
45
|
function* Counter() {
|
|
46
|
+
|
|
46
47
|
let count = 0
|
|
47
48
|
|
|
48
49
|
const increment = () => this.next(() => count++)
|
|
49
50
|
|
|
50
|
-
while (true)
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
);
|
|
56
|
-
}
|
|
51
|
+
while (true) yield (
|
|
52
|
+
<button set:onclick={increment}>
|
|
53
|
+
Count: {count}
|
|
54
|
+
</button>
|
|
55
|
+
)
|
|
57
56
|
}
|
|
58
57
|
|
|
59
58
|
// Render to DOM
|
|
@@ -77,26 +76,19 @@ const UserCard = ({ user }) => (
|
|
|
77
76
|
**Stateful Components** use generator functions with automatic wrapper elements:
|
|
78
77
|
```javascript
|
|
79
78
|
function* TodoList() {
|
|
79
|
+
|
|
80
80
|
let todos = []
|
|
81
81
|
|
|
82
|
-
const addTodo = (
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
<ul>
|
|
93
|
-
{todos.map(todo => (
|
|
94
|
-
<li key={todo.id}>{todo.text}</li>
|
|
95
|
-
))}
|
|
96
|
-
</ul>
|
|
97
|
-
</>
|
|
98
|
-
);
|
|
99
|
-
}
|
|
82
|
+
const addTodo = text => this.next(() => todos.push({ id: Date.now(), text }))
|
|
83
|
+
|
|
84
|
+
while (true) yield (
|
|
85
|
+
<>
|
|
86
|
+
<input set:onkeydown={e => e.key === 'Enter' && addTodo(e.target.value)} />
|
|
87
|
+
<ul>
|
|
88
|
+
{todos.map(todo => <li key={todo.id}>{todo.text}</li>)}
|
|
89
|
+
</ul>
|
|
90
|
+
</>
|
|
91
|
+
)
|
|
100
92
|
}
|
|
101
93
|
```
|
|
102
94
|
|
|
@@ -108,27 +100,27 @@ The generator structure provides a natural mental model:
|
|
|
108
100
|
|
|
109
101
|
```javascript
|
|
110
102
|
function* ShoppingCart(args) {
|
|
103
|
+
|
|
111
104
|
// Persistent state (like useState)
|
|
112
105
|
let items = []
|
|
113
|
-
|
|
106
|
+
|
|
114
107
|
// Persistent handlers (like useCallback)
|
|
115
|
-
const addItem = (
|
|
116
|
-
this.next(() => items.push(product))
|
|
117
|
-
};
|
|
108
|
+
const addItem = product => this.next(() => items.push(product))
|
|
118
109
|
|
|
119
110
|
// Main render loop
|
|
120
111
|
while (true) {
|
|
112
|
+
|
|
121
113
|
// Derived values computed fresh each render
|
|
122
114
|
const total = items.reduce((sum, item) => sum + item.price, 0)
|
|
123
115
|
const itemCount = items.length
|
|
124
|
-
|
|
116
|
+
|
|
125
117
|
yield (
|
|
126
118
|
<>
|
|
127
119
|
<h2>Cart ({itemCount} items)</h2>
|
|
128
120
|
<p>Total: ${total}</p>
|
|
129
121
|
{/* ... */}
|
|
130
122
|
</>
|
|
131
|
-
)
|
|
123
|
+
)
|
|
132
124
|
}
|
|
133
125
|
}
|
|
134
126
|
```
|
|
@@ -144,26 +136,23 @@ function* ShoppingCart(args) {
|
|
|
144
136
|
|
|
145
137
|
```javascript
|
|
146
138
|
function* MapComponent(args) {
|
|
139
|
+
|
|
147
140
|
let mapRef = null
|
|
148
|
-
|
|
149
|
-
while (true)
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<div class="map-markers"></div>
|
|
164
|
-
</div>
|
|
165
|
-
);
|
|
166
|
-
}
|
|
141
|
+
|
|
142
|
+
while (true) yield (
|
|
143
|
+
<div
|
|
144
|
+
ref={el => {
|
|
145
|
+
if (el && !mapRef) {
|
|
146
|
+
mapRef = el
|
|
147
|
+
// Third-party map library controls this DOM
|
|
148
|
+
new GoogleMap(el, args.config)
|
|
149
|
+
}
|
|
150
|
+
}}
|
|
151
|
+
skip={true}
|
|
152
|
+
>
|
|
153
|
+
{/* Google Maps API manages children elements */}
|
|
154
|
+
</div>
|
|
155
|
+
)
|
|
167
156
|
}
|
|
168
157
|
```
|
|
169
158
|
|
|
@@ -178,11 +167,9 @@ const html = render(<App />)
|
|
|
178
167
|
|
|
179
168
|
### Streaming SSR
|
|
180
169
|
```javascript
|
|
181
|
-
import { stream } from 'ajo/stream'
|
|
170
|
+
import { stream } from 'ajo/stream'
|
|
182
171
|
|
|
183
|
-
for await (const chunk of stream(<App />))
|
|
184
|
-
response.write(chunk);
|
|
185
|
-
}
|
|
172
|
+
for await (const chunk of stream(<App />)) response.write(chunk)
|
|
186
173
|
```
|
|
187
174
|
|
|
188
175
|
## Best Practices
|
|
@@ -200,9 +187,9 @@ for await (const chunk of stream(<App />)) {
|
|
|
200
187
|
Renders JSX into a DOM container element.
|
|
201
188
|
|
|
202
189
|
```javascript
|
|
203
|
-
import { render } from 'ajo'
|
|
190
|
+
import { render } from 'ajo'
|
|
204
191
|
|
|
205
|
-
render(<App />, document.getElementById('root'))
|
|
192
|
+
render(<App />, document.getElementById('root'))
|
|
206
193
|
```
|
|
207
194
|
|
|
208
195
|
#### `h(type: Type, props?: Props, ...children: Children[]): VNode`
|
|
@@ -217,7 +204,7 @@ const List = () => (
|
|
|
217
204
|
<li>Item 1</li>
|
|
218
205
|
<li>Item 2</li>
|
|
219
206
|
</>
|
|
220
|
-
)
|
|
207
|
+
)
|
|
221
208
|
```
|
|
222
209
|
|
|
223
210
|
### Stateful Component Instance Methods
|
|
@@ -229,17 +216,18 @@ Triggers a re-render of the component by advancing to the next yield point. Opti
|
|
|
229
216
|
|
|
230
217
|
```javascript
|
|
231
218
|
function* Counter(args) {
|
|
232
|
-
|
|
219
|
+
|
|
220
|
+
let count = 0
|
|
233
221
|
|
|
234
222
|
const increment = () => {
|
|
235
223
|
// Simple re-render
|
|
236
|
-
this.next(() => count++)
|
|
237
|
-
}
|
|
224
|
+
this.next(() => count++)
|
|
225
|
+
}
|
|
238
226
|
|
|
239
227
|
const incrementByStep = () => {
|
|
240
228
|
// Access current props in callback
|
|
241
|
-
this.next(({ step }) => count += step)
|
|
242
|
-
}
|
|
229
|
+
this.next(({ step }) => count += step)
|
|
230
|
+
}
|
|
243
231
|
|
|
244
232
|
// ... rest of component
|
|
245
233
|
}
|
|
@@ -257,15 +245,15 @@ Terminates the generator and triggers cleanup (rarely used directly).
|
|
|
257
245
|
Creates a context for sharing data across component trees.
|
|
258
246
|
|
|
259
247
|
```javascript
|
|
260
|
-
import { context } from 'ajo/context'
|
|
248
|
+
import { context } from 'ajo/context'
|
|
261
249
|
|
|
262
|
-
const ThemeContext = context('light')
|
|
250
|
+
const ThemeContext = context('light')
|
|
263
251
|
|
|
264
252
|
// Set value
|
|
265
|
-
ThemeContext('dark')
|
|
253
|
+
ThemeContext('dark')
|
|
266
254
|
|
|
267
255
|
// Get value
|
|
268
|
-
const theme = ThemeContext()
|
|
256
|
+
const theme = ThemeContext() // 'dark'
|
|
269
257
|
```
|
|
270
258
|
|
|
271
259
|
### HTML Module (`ajo/html`)
|
|
@@ -274,9 +262,9 @@ const theme = ThemeContext(); // 'dark'
|
|
|
274
262
|
Renders JSX to an HTML string for static site generation.
|
|
275
263
|
|
|
276
264
|
```javascript
|
|
277
|
-
import { render } from 'ajo/html'
|
|
265
|
+
import { render } from 'ajo/html'
|
|
278
266
|
|
|
279
|
-
const html = render(<HomePage title="Welcome" />)
|
|
267
|
+
const html = render(<HomePage title="Welcome" />)
|
|
280
268
|
```
|
|
281
269
|
|
|
282
270
|
#### `html(children: Children, hooks?: Hooks): IterableIterator<string>`
|
|
@@ -288,54 +276,52 @@ Low-level HTML streaming function with custom hooks.
|
|
|
288
276
|
Renders components to an async stream for progressive SSR.
|
|
289
277
|
|
|
290
278
|
```javascript
|
|
291
|
-
import { stream } from 'ajo/stream'
|
|
279
|
+
import { stream } from 'ajo/stream'
|
|
292
280
|
|
|
293
|
-
for await (const chunk of stream(<App />))
|
|
294
|
-
response.write(chunk);
|
|
295
|
-
}
|
|
281
|
+
for await (const chunk of stream(<App />)) response.write(chunk)
|
|
296
282
|
```
|
|
297
283
|
|
|
298
284
|
#### `hydrate(patch: Patch): Promise<void>`
|
|
299
285
|
Client-side function for applying streamed patches during hydration.
|
|
300
286
|
|
|
301
287
|
```javascript
|
|
302
|
-
import { hydrate } from 'ajo/stream'
|
|
288
|
+
import { hydrate } from 'ajo/stream'
|
|
303
289
|
|
|
304
|
-
window.$stream = { push: hydrate }
|
|
290
|
+
window.$stream = { push: hydrate }
|
|
305
291
|
```
|
|
306
292
|
|
|
307
293
|
### TypeScript Support
|
|
308
294
|
|
|
309
295
|
```typescript
|
|
310
296
|
// Component types
|
|
311
|
-
type Stateless<Props = {}> = (props: Props) => Children
|
|
297
|
+
type Stateless<Props = {}> = (props: Props) => Children
|
|
312
298
|
type Stateful<Props = {}, Tag = 'div'> = {
|
|
313
|
-
(this: StatefulElement<Tag>, props: Props): Iterator<Children
|
|
314
|
-
is?: Tag
|
|
315
|
-
attrs?: Record<string, unknown
|
|
316
|
-
args?: Partial<Props
|
|
317
|
-
}
|
|
299
|
+
(this: StatefulElement<Tag>, props: Props): Iterator<Children>
|
|
300
|
+
is?: Tag
|
|
301
|
+
attrs?: Record<string, unknown>
|
|
302
|
+
args?: Partial<Props>
|
|
303
|
+
}
|
|
318
304
|
|
|
319
305
|
// Stateful component instance
|
|
320
306
|
type StatefulElement<Tag> = HTMLElement & {
|
|
321
|
-
next: (callback?: (args: ComponentArgs) => void) => void
|
|
322
|
-
throw: (error: unknown) => void
|
|
323
|
-
return: () => void
|
|
307
|
+
next: (callback?: (args: ComponentArgs) => void) => void
|
|
308
|
+
throw: (error: unknown) => void
|
|
309
|
+
return: () => void
|
|
324
310
|
};
|
|
325
311
|
|
|
326
312
|
// Element types
|
|
327
|
-
type Children = unknown
|
|
313
|
+
type Children = unknown
|
|
328
314
|
type VNode<Type, Props> = Props & {
|
|
329
|
-
nodeName: Type
|
|
330
|
-
children?: Children
|
|
315
|
+
nodeName: Type
|
|
316
|
+
children?: Children
|
|
331
317
|
};
|
|
332
318
|
|
|
333
319
|
// Special attributes
|
|
334
320
|
type SpecialAttributes = {
|
|
335
|
-
key?: unknown
|
|
336
|
-
ref?: (element: Element | null) => void
|
|
337
|
-
memo?: unknown[]
|
|
338
|
-
skip?: boolean
|
|
321
|
+
key?: unknown
|
|
322
|
+
ref?: (element: Element | null) => void
|
|
323
|
+
memo?: unknown[]
|
|
324
|
+
skip?: boolean
|
|
339
325
|
};
|
|
340
326
|
```
|
|
341
327
|
|