mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-21 15:39:36 +01:00
Jan Andrle
cd62782c7b
* ⚡ refact docs to make editing (now renaming observables to signal) easier * ⚡ ⚡ use signal(s) term isntead of observable(s) * ⚡ 🔤 version + typo * 🐛 customElement example (0→S) * 📺 version in package-lock.json
183 lines
79 KiB
HTML
183 lines
79 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Organizing UI into components"><title>`deka-dom-el` — Scopes and components</title><!--<dde:mark type="component" name="metaAuthor" host="this" ssr/>--><meta name="author" content="Jan Andrle"><link type="text/plain" rel="author" href="https://jaandrle.github.io/humans.txt"><meta name="generator" content="deka-dom-el"><!--<dde:mark type="component" name="metaTwitter" host="this" ssr/>--><meta name="twitter:card" content="summary_large_image"><meta name="twitter:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="twitter:title" content="deka-dom-el"><meta name="twitter:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="twitter:creator" content="@jaandrle"><!--<dde:mark type="component" name="metaFacebook" host="this" ssr/>--><meta name="og:url" content="https://github.com/jaandrle/deka-dom-el"><meta name="og:title" content="deka-dom-el"><meta name="og:description" content="A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks."><meta name="og:creator" content="@jaandrle"><script src="https://cdn.jsdelivr.net/npm/shiki@0.9" defer=""></script><script type="module" src="code.js.js"></script><script src="https://flems.io/flems.html" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" href="global.css"></head><body><!--<dde:mark type="component" name="page" host="this" ssr/>--><!--<dde:mark type="component" name="simplePage" host="this" ssr/>--><!--<dde:mark type="component" name="header" host="this" ssr/>--><header><h1>`deka-dom-el` — Scopes and components</h1><p>Organizing UI into components</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a library.">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-signals" title="Handling reactivity in UI via signals.">4. Signals and reactivity</a><a href="p05-scopes" title="Organizing UI into components" class="current">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><h2>Using functions as UI components</h2><p>For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Garbage_collection" title="Garbage collection | MDN">Garbage collection</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
|
|
import { scope, el } from "deka-dom-el";
|
|
/** @type {ddeElementAddon} */
|
|
</code></div><p>The library therefore use <em>scopes</em> to provide these functionalities.</p><h3 id="h-scopes-and-hosts"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-scopes-and-hosts" tabindex="-1">#</a> Scopes and hosts</h3><p>The <strong>host</strong> is the name for the element representing the component. This is typically element returned by function. To get reference, you can use <code>scope.host()</code> to applly addons just use <code>scope.host(...<addons>)</code>.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8meex5b3tyo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, on, scope } from "./esm-with-signals.js";
|
|
const { host }= scope;
|
|
host(
|
|
element=> console.log(
|
|
"This represents Addon/oninit for root",
|
|
element.outerHTML
|
|
)
|
|
);
|
|
console.log(
|
|
"This represents the reference to the host element of root",
|
|
host().outerHTML
|
|
);
|
|
document.body.append(
|
|
el(component)
|
|
);
|
|
function component(){
|
|
const { host }= scope;
|
|
host(
|
|
element=> console.log(
|
|
"This represents Addon/oninit for the component",
|
|
element.outerHTML
|
|
)
|
|
);
|
|
const onclick= on("click", function(ev){
|
|
console.log(
|
|
"This represents the reference to the host element of the component",
|
|
host().outerHTML
|
|
);
|
|
})
|
|
return el("div", null, onclick).append(
|
|
el("strong", "Component")
|
|
);
|
|
}
|
|
</code></div><script>Flems(document.getElementById("code-example-1-8meex5b3tyo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, on, scope } from \\\"./esm-with-signals.js\\\";\\nconst { host }= scope;\\nhost(\\n\\telement=> console.log(\\n\\t\\t\\\"This represents Addon/oninit for root\\\",\\n\\t\\telement.outerHTML\\n\\t)\\n);\\nconsole.log(\\n\\t\\\"This represents the reference to the host element of root\\\",\\n\\thost().outerHTML\\n);\\ndocument.body.append(\\n\\tel(component)\\n);\\nfunction component(){\\n\\tconst { host }= scope;\\n\\thost(\\n\\t\\telement=> console.log(\\n\\t\\t\\t\\\"This represents Addon/oninit for the component\\\",\\n\\t\\t\\telement.outerHTML\\n\\t\\t)\\n\\t);\\n\\tconst onclick= on(\\\"click\\\", function(ev){\\n\\t\\tconsole.log(\\n\\t\\t\\t\\\"This represents the reference to the host element of the component\\\",\\n\\t\\t\\thost().outerHTML\\n\\t\\t);\\n\\t})\\n\\treturn el(\\\"div\\\", null, onclick).append(\\n\\t\\tel(\\\"strong\\\", \\\"Component\\\")\\n\\t);\\n}\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>To better understanding we implement function <code>elClass</code> helping to create component as class instances.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-3-b6a1hbrxh7s" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "./esm-with-signals.js";
|
|
class Test {
|
|
constructor(params){
|
|
this._params= params;
|
|
}
|
|
render(){
|
|
return el("div").append(
|
|
this._params.textContent
|
|
);
|
|
}
|
|
}
|
|
document.body.append(
|
|
elClass(Test, { textContent: "Hello World" })
|
|
);
|
|
|
|
import { chainableAppend, scope } from "./esm-with-signals.js";
|
|
function elClass(_class, attributes, ...addons){
|
|
let element, element_host;
|
|
scope.push({
|
|
scope: _class, //just informative purposes
|
|
host: (...addons_append)=> addons_append.length
|
|
? (
|
|
!element
|
|
? addons.unshift(...addons_append)
|
|
: addons_append.forEach(c=> c(element_host))
|
|
, undefined)
|
|
: element_host
|
|
});
|
|
const instance= new _class(attributes);
|
|
element= instance.render();
|
|
const is_fragment= element instanceof DocumentFragment;
|
|
const el_mark= el.mark({ //this creates html comment `<dde:mark …/>`
|
|
type: "class-component",
|
|
name: _class.name,
|
|
host: is_fragment ? "this" : "parentElement",
|
|
});
|
|
element.prepend(el_mark);
|
|
if(is_fragment) element_host= el_mark;
|
|
|
|
chainableAppend(element);
|
|
addons.forEach(c=> c(element_host));
|
|
scope.pop();
|
|
return element;
|
|
}
|
|
</code></div><script>Flems(document.getElementById("code-example-3-b6a1hbrxh7s"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"./esm-with-signals.js\\\";\\nclass Test {\\n\\tconstructor(params){\\n\\t\\tthis._params= params;\\n\\t}\\n\\trender(){\\n\\t\\treturn el(\\\"div\\\").append(\\n\\t\\t\\tthis._params.textContent\\n\\t\\t);\\n\\t}\\n}\\ndocument.body.append(\\n\\telClass(Test, { textContent: \\\"Hello World\\\" })\\n);\\n\\nimport { chainableAppend, scope } from \\\"./esm-with-signals.js\\\";\\nfunction elClass(_class, attributes, ...addons){\\n\\tlet element, element_host;\\n\\tscope.push({\\n\\t\\tscope: _class, //just informative purposes\\n\\t\\thost: (...addons_append)=> addons_append.length\\n\\t\\t\\t? (\\n\\t\\t\\t\\t!element\\n\\t\\t\\t\\t? addons.unshift(...addons_append)\\n\\t\\t\\t\\t: addons_append.forEach(c=> c(element_host))\\n\\t\\t\\t, undefined)\\n\\t\\t\\t: element_host\\n\\t});\\n\\tconst instance= new _class(attributes);\\n\\telement= instance.render();\\n\\tconst is_fragment= element instanceof DocumentFragment;\\n\\tconst el_mark= el.mark({ //this creates html comment `<dde:mark …/>`\\n\\t\\ttype: \\\"class-component\\\",\\n\\t\\tname: _class.name,\\n\\t\\thost: is_fragment ? \\\"this\\\" : \\\"parentElement\\\",\\n\\t});\\n\\telement.prepend(el_mark);\\n\\tif(is_fragment) element_host= el_mark;\\n\\t\\n\\tchainableAppend(element);\\n\\taddons.forEach(c=> c(element_host));\\n\\tscope.pop();\\n\\treturn element;\\n}\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>As you can see, the <code>scope.host()</code> is stored temporarily and synchronously. Therefore, at least in the beginning of using library, it is the good practise to store <code>host</code> in the root of your component. As it may be changed, typically when there is asynchronous code in the component.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, scope, on, dispatchEvent } from "deka-dom-el";
|
|
document.body.append(
|
|
el(component)
|
|
);
|
|
function component(){
|
|
const { host }= scope; // good practise!
|
|
|
|
host(
|
|
console.log,
|
|
on("click", function redispatch(){
|
|
// this `host` ↘ still corresponds to the host ↖ of the component
|
|
dispatchEvent("redispatch")(host());
|
|
})
|
|
);
|
|
// this `host` ↘ still corresponds to the host ↖ of the component
|
|
setTimeout(()=> dispatchEvent("timeout")(host()), 750)
|
|
return el("p", "Clickable paragraph!");
|
|
}
|
|
</code></div><h3 id="h-scopes-signals-and-cleaning-magic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-scopes-signals-and-cleaning-magic" tabindex="-1">#</a> Scopes, signals and cleaning magic</h3><p>The <code>host</code> is internally used to register the cleaning procedure, when the component (<code>host</code> element) is removed from the DOM.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-5am55s7aitw" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el, empty, on } from "./esm-with-signals.js";
|
|
document.body.append(
|
|
el(component),
|
|
el("button", {
|
|
textContent: "Remove",
|
|
onclick: ()=> empty(document.body),
|
|
type: "button"
|
|
})
|
|
);
|
|
import { S } from "./esm-with-signals.js";
|
|
function component(){
|
|
const textContent= S("Click to change text.");
|
|
|
|
const onclickChange= on("click", function redispatch(){
|
|
textContent("Text changed! "+(new Date()).toString())
|
|
});
|
|
return el("p", textContent, onclickChange);
|
|
}
|
|
</code></div><script>Flems(document.getElementById("code-example-1-5am55s7aitw"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el, empty, on } from \\\"./esm-with-signals.js\\\";\\ndocument.body.append(\\n\\tel(component),\\n\\tel(\\\"button\\\", {\\n\\t\\ttextContent: \\\"Remove\\\",\\n\\t\\tonclick: ()=> empty(document.body),\\n\\t\\ttype: \\\"button\\\"\\n\\t})\\n);\\nimport { S } from \\\"./esm-with-signals.js\\\";\\nfunction component(){\\n\\tconst textContent= S(\\\"Click to change text.\\\");\\n\\n\\tconst onclickChange= on(\\\"click\\\", function redispatch(){\\n\\t\\ttextContent(\\\"Text changed! \\\"+(new Date()).toString())\\n\\t});\\n\\treturn el(\\\"p\\\", textContent, onclickChange);\\n}\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, y = o[x];\\n\\t\\t\\t\\tvt(l, \\\"remove\\\", \\\"slot\\\"), y && (bt(y, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(v), Reflect.deleteProperty(o, r)), t.append = i, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet i = Array.from(t.childNodes);\\n\\t\\ti.forEach((a) => a.remove()), t.append(...i);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(P(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nj.mark = function(t, e = !1) {\\n\\tt = Object.entries(t).map(([o, c]) => o + `=\\\"${c}\\\"`).join(\\\" \\\");\\n\\tlet n = e ? \\\"\\\" : \\\"/\\\", r = d.D.createComment(`<dde:mark ${t}${d.ssr}${n}>`);\\n\\treturn e && (r.end = d.D.createComment(\\\"</dde:mark>\\\")), r;\\n};\\nfunction qt(t) {\\n\\tlet e = this;\\n\\treturn function(...r) {\\n\\t\\t$ = t;\\n\\t\\tlet o = j.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction P(t, ...e) {\\n\\tif (!e.length)\\n\\t\\treturn t;\\n\\tU.set(t, rt(t, this));\\n\\tfor (let [n, r] of Object.entries(Object.assign({}, ...e)))\\n\\t\\tnt.call(this, t, n, r);\\n\\treturn U.delete(t), t;\\n}\\nfunction nt(t, e, n) {\\n\\tlet { setRemoveAttr: r, s: o } = rt(t, this), c = this;\\n\\tn = o.processReactiveAttribute(\\n\\t\\tt,\\n\\t\\te,\\n\\t\\tn,\\n\\t\\t(a, h) => nt.call(c, t, a, h)\\n\\t);\\n\\tlet [i] = e;\\n\\tif (i === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (i === \\\".\\\")\\n\\t\\treturn et(t, e.slice(1), n);\\n\\tif (/(aria|data)([A-Z])/.test(e))\\n\\t\\treturn e = e.replace(/([a-z])([A-Z])/g, \\\"$1-$2\\\").toLowerCase(), r(e, n);\\n\\tswitch (e === \\\"className\\\" && (e = \\\"class\\\"), e) {\\n\\t\\tcase \\\"xlink:href\\\":\\n\\t\\t\\treturn r(e, n, \\\"http://www.w3.org/1999/xlink\\\");\\n\\t\\tcase \\\"textContent\\\":\\n\\t\\t\\treturn tt(t, e, n);\\n\\t\\tcase \\\"style\\\":\\n\\t\\t\\tif (typeof n != \\\"object\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\tcase \\\"dataset\\\":\\n\\t\\t\\treturn I(o, n, et.bind(null, t[e]));\\n\\t\\tcase \\\"ariaset\\\":\\n\\t\\t\\treturn I(o, n, (a, h) => r(\\\"aria-\\\" + a, h));\\n\\t\\tcase \\\"classList\\\":\\n\\t\\t\\treturn gt.call(c, t, n);\\n\\t}\\n\\treturn Et(t, e) ? tt(t, e, n) : r(e, n);\\n}\\nfunction rt(t, e) {\\n\\tif (U.has(t))\\n\\t\\treturn U.get(t);\\n\\tlet r = (t instanceof d.S ? xt : mt).bind(null, t, \\\"Attribute\\\"), o = W(e);\\n\\treturn { setRemoveAttr: r, s: o };\\n}\\nfunction gt(t, e) {\\n\\tlet n = W(this);\\n\\treturn I(\\n\\t\\tn,\\n\\t\\te,\\n\\t\\t(r, o) => t.classList.toggle(r, o === -1 ? void 0 : !!o)\\n\\t), t;\\n}\\nfunction Ft(t) {\\n\\treturn Array.from(t.children).forEach((e) => e.remove()), t;\\n}\\nfunction vt(t, e, n, r) {\\n\\treturn t instanceof d.H ? t[e + \\\"Attribute\\\"](n, r) : t[e + \\\"AttributeNS\\\"](null, n, r);\\n}\\nfunction Et(t, e) {\\n\\tif (!(e in t))\\n\\t\\treturn !1;\\n\\tlet n = ot(t, e);\\n\\treturn !S(n.set);\\n}\\nfunction ot(t, e) {\\n\\tif (t = Object.getPrototypeOf(t), !t)\\n\\t\\treturn {};\\n\\tlet n = Object.getOwnPropertyDescriptor(t, e);\\n\\treturn n || ot(t, e);\\n}\\nfunction I(t, e, n) {\\n\\tif (!(typeof e != \\\"object\\\" || e === null))\\n\\t\\treturn Object.entries(e).forEach(function([o, c]) {\\n\\t\\t\\to && (c = t.processReactiveAttribute(e, o, c, n), n(o, c));\\n\\t\\t});\\n}\\nfunction ct(t) {\\n\\treturn Array.isArray(t) ? t.filter(Boolean).join(\\\" \\\") : t;\\n}\\nfunction mt(t, e, n, r) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(S(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? wt() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction wt() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (s) => function(u) {\\n\\t\\tfor (let f of u)\\n\\t\\t\\tif (f.type === \\\"childList\\\") {\\n\\t\\t\\t\\tif (l(f.addedNodes, !0)) {\\n\\t\\t\\t\\t\\ts();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && s();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(s) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(s, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(s, f));\\n\\t\\t},\\n\\t\\tonDisconnected(s, u) {\\n\\t\\t\\ti();\\n\\t\\t\\tlet f = c(s);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(s, u) {\\n\\t\\t\\tif (!t.has(s))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(s);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(s, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(s, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(s), a());\\n\\t}\\n\\tfunction c(s) {\\n\\t\\tif (t.has(s))\\n\\t\\t\\treturn t.get(s);\\n\\t\\tlet u = {\\n\\t\\t\\tconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_c: 0,\\n\\t\\t\\tdisconnected: /* @__PURE__ */ new WeakSet(),\\n\\t\\t\\tlength_d: 0\\n\\t\\t};\\n\\t\\treturn t.set(s, u), u;\\n\\t}\\n\\tfunction i() {\\n\\t\\te || (e = !0, r.observe(d.D.body, { childList: !0, subtree: !0 }));\\n\\t}\\n\\tfunction a() {\\n\\t\\t!e || t.size || (e = !1, r.disconnect());\\n\\t}\\n\\tfunction h() {\\n\\t\\treturn new Promise(function(s) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(s);\\n\\t\\t});\\n\\t}\\n\\tasync function v(s) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(s instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === s || !(f instanceof Node) || s.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s) {\\n\\t\\t\\tif (u && v(b).then(l), !t.has(b))\\n\\t\\t\\t\\tcontinue;\\n\\t\\t\\tlet N = t.get(b);\\n\\t\\t\\tN.length_c && (b.dispatchEvent(new Event(_)), N.connected = /* @__PURE__ */ new WeakSet(), N.length_c = 0, N.length_d || t.delete(b), f = !0);\\n\\t\\t}\\n\\t\\treturn f;\\n\\t}\\n\\tfunction x(s, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of s)\\n\\t\\t\\tu && v(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(y(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction y(s) {\\n\\t\\treturn () => {\\n\\t\\t\\ts.isConnected || (s.dispatchEvent(new Event(O)), t.delete(s));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = _t) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...i) => i.length ? i.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || yt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(_)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(O, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction yt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(_));\\n\\t}), J(t.prototype, \\\"disconnectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), (globalThis.queueMicrotask || setTimeout)(\\n\\t\\t\\t() => !n.isConnected && n.dispatchEvent(new Event(O))\\n\\t\\t);\\n\\t}), J(t.prototype, \\\"attributeChangedCallback\\\", function(e, n, r) {\\n\\t\\tlet [o, , c] = r;\\n\\t\\tn.dispatchEvent(new CustomEvent(M, {\\n\\t\\t\\tdetail: [o, c]\\n\\t\\t})), e.apply(n, r);\\n\\t}), t.prototype[C] = !0, t;\\n}\\nfunction J(t, e, n) {\\n\\tt[e] = new Proxy(t[e] || (() => {\\n\\t}), { apply: n });\\n}\\nfunction _t(t) {\\n\\treturn F(t, (e, n) => e.getAttribute(n));\\n}\\n\\n// src/events.js\\nfunction Qt(t, e, n) {\\n\\treturn e || (e = {}), function(o, ...c) {\\n\\t\\tn && (c.unshift(o), o = typeof n == \\\"function\\\" ? n() : n);\\n\\t\\tlet i = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(i);\\n\\t};\\n}\\nfunction w(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar it = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nw.connected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(_, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(_)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nw.disconnected = function(t, e) {\\n\\treturn e = it(e), function(r) {\\n\\t\\treturn r.addEventListener(O, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nw.disconnectedAsAbort = function(t) {\\n\\tif (Z.has(t))\\n\\t\\treturn Z.get(t);\\n\\tlet e = new AbortController();\\n\\treturn Z.set(t, e), t(w.disconnected(() => e.abort())), e;\\n};\\nvar At = /* @__PURE__ */ new WeakSet();\\nw.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(M, t, e), r[C] || At.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(i) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of i)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(M, { detail: [a, h.getAttribute(a)] })\\n\\t\\t\\t\\t);\\n\\t\\t});\\n\\t\\treturn q(e.signal, () => o.disconnect()) && o.observe(r, { attributes: !0 }), r;\\n\\t};\\n};\\n\\n// src/signals-lib.js\\nvar p = \\\"__dde_signal\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], g = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn st(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = st(!0), r = function() {\\n\\t\\tlet [o, ...c] = g.get(r);\\n\\t\\tif (g.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet i = g.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ti.has(a) || L(a, r);\\n\\t};\\n\\treturn g.set(n[p], r), g.set(r, /* @__PURE__ */ new Set([n])), r(), n;\\n}\\nE.action = function(t, e, ...n) {\\n\\tlet r = t[p], { actions: o } = r;\\n\\tif (!o || !(e in o))\\n\\t\\tthrow new Error(`'${t}' has no action with name '${e}'!`);\\n\\tif (o[e].apply(r, n), r.skip)\\n\\t\\treturn delete r.skip;\\n\\tr.listeners.forEach((c) => c(r.value));\\n};\\nE.on = function t(e, n, r = {}) {\\n\\tlet { signal: o } = r;\\n\\tif (!(o && o.aborted)) {\\n\\t\\tif (Array.isArray(e))\\n\\t\\t\\treturn e.forEach((c) => t(c, n, r));\\n\\t\\tQ(e, n), o && o.addEventListener(\\\"abort\\\", () => L(e, n));\\n\\t}\\n};\\nE.symbols = {\\n\\t//signal: mark,\\n\\tonclear: Symbol.for(\\\"Signal.onclear\\\")\\n};\\nE.clear = function(...t) {\\n\\tfor (let n of t) {\\n\\t\\tlet r = n[p];\\n\\t\\tr && (delete n.toJSON, r.onclear.forEach((o) => o.call(r)), e(n, r), delete n[p]);\\n\\t}\\n\\tfunction e(n, r) {\\n\\t\\tr.listeners.forEach((o) => {\\n\\t\\t\\tif (r.listeners.delete(o), !g.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = g.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), g.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = j.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, i = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet v = i;\\n\\t\\ti = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(v, u) ? (b = v[u], delete v[u]) : b = f(), i[u] = b, b;\\n\\t\\t});\\n\\t\\tm.pop(), Array.isArray(l) || (l = [l]);\\n\\t\\tlet x = document.createComment(\\\"\\\");\\n\\t\\tl.push(x), n.after(...l);\\n\\t\\tlet y;\\n\\t\\tfor (; (y = x.nextSibling) && y !== r; )\\n\\t\\t\\ty.remove();\\n\\t\\tx.remove(), n.isConnected && St(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction St(t) {\\n\\t!t || !t[R] || (requestIdleCallback || setTimeout)(function() {\\n\\t\\tt[R] = t[R].filter(([e, n]) => n.isConnected ? !0 : (L(...e), !1));\\n\\t});\\n}\\nvar Ct = {\\n\\t_set(t) {\\n\\t\\tthis.value = t;\\n\\t}\\n};\\nfunction Ot(t) {\\n\\treturn function(e, n) {\\n\\t\\tlet r = (...c) => c.length ? e.setAttribute(n, ...c) : K(r), o = at(r, e.getAttribute(n), Ct);\\n\\t\\treturn t[n] = o, o;\\n\\t};\\n}\\nvar G = \\\"__dde_attributes\\\";\\nE.observedAttributes = function(t) {\\n\\tlet e = t[G] = {}, n = F(t, Ot(e));\\n\\treturn w.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to signals (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, i] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", i);\\n\\t})(t), w.disconnected(function() {\\n\\t\\t/*! This removes all signals mapped to attributes (`S.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tE.clear(...Object.values(this[G]));\\n\\t})(t), n;\\n};\\nvar ut = {\\n\\tisSignal: z,\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\tif (!z(n))\\n\\t\\t\\treturn n;\\n\\t\\tlet o = (c) => {\\n\\t\\t\\tif (!t.isConnected)\\n\\t\\t\\t\\treturn L(n, o);\\n\\t\\t\\tr(e, c);\\n\\t\\t};\\n\\t\\treturn Q(n, o), ft(n, o, t, e), n();\\n\\t}\\n};\\nfunction ft(t, e, ...n) {\\n\\tlet { current: r } = m;\\n\\tr.prevent || r.host(function(o) {\\n\\t\\to[R] || (o[R] = [], w.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).\\n\\t\\t\\t\\t* You can investigate the `__dde_reactive` key of the element.\\n\\t\\t\\t\\t* */\\n\\t\\t\\t\\to[R].forEach(([[c, i]]) => L(c, i, c[p] && c[p].host && c[p].host() === o))\\n\\t\\t\\t)\\n\\t\\t)(o)), o[R].push([[t, e], ...n]);\\n\\t});\\n}\\nfunction st(t, e, n) {\\n\\tlet r = t ? () => K(r) : (...o) => o.length ? dt(r, ...o) : K(r);\\n\\treturn at(r, e, n, t);\\n}\\nvar Dt = Object.assign(/* @__PURE__ */ Object.create(null), {\\n\\tstopPropagation() {\\n\\t\\tthis.skip = !0;\\n\\t}\\n}), V = class extends Error {\\n\\tconstructor() {\\n\\t\\tsuper();\\n\\t\\tlet [e, ...n] = this.stack.split(`\\n`), r = e.slice(e.indexOf(\\\"@\\\"), e.indexOf(\\\".js:\\\") + 4);\\n\\t\\tthis.stack = n.find((o) => !o.includes(r));\\n\\t}\\n};\\nfunction at(t, e, n, r = !1) {\\n\\tlet o = [];\\n\\tX(n) !== \\\"[object Object]\\\" && (n = {});\\n\\tlet { onclear: c } = E.symbols;\\n\\tn[c] && (o.push(n[c]), delete n[c]);\\n\\tlet { host: i } = m;\\n\\treturn Reflect.defineProperty(t, p, {\\n\\t\\tvalue: {\\n\\t\\t\\tvalue: e,\\n\\t\\t\\tactions: n,\\n\\t\\t\\tonclear: o,\\n\\t\\t\\thost: i,\\n\\t\\t\\tlisteners: /* @__PURE__ */ new Set(),\\n\\t\\t\\tdefined: new V().stack,\\n\\t\\t\\treadonly: r\\n\\t\\t},\\n\\t\\tenumerable: !1,\\n\\t\\twritable: !1,\\n\\t\\tconfigurable: !0\\n\\t}), t.toJSON = () => t(), t.valueOf = () => t[p] && t[p].value, Object.setPrototypeOf(t[p], Dt), t;\\n}\\nfunction Rt() {\\n\\treturn H[H.length - 1];\\n}\\nfunction K(t) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet { value: e, listeners: n } = t[p], r = Rt();\\n\\treturn r && n.add(r), g.has(r) && g.get(r).add(t), e;\\n}\\nfunction dt(t, e, n) {\\n\\tif (!t[p])\\n\\t\\treturn;\\n\\tlet r = t[p];\\n\\tif (!(!n && r.value === e))\\n\\t\\treturn r.value = e, r.listeners.forEach((o) => o(e)), e;\\n}\\nfunction Q(t, e) {\\n\\tif (t[p])\\n\\t\\treturn t[p].listeners.add(e);\\n}\\nfunction L(t, e, n) {\\n\\tlet r = t[p];\\n\\tif (!r)\\n\\t\\treturn;\\n\\tlet o = r.listeners.delete(e);\\n\\tif (n && !r.listeners.size) {\\n\\t\\tif (E.clear(t), !g.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = g.get(r);\\n\\t\\tif (!g.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tg.get(c).forEach((i) => L(i, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// signals.js\\nB(ut);\\nexport {\\n\\tE as S,\\n\\tP as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tgt as classListDeclarative,\\n\\tj as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\tyt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tj as el,\\n\\tqt as elNS,\\n\\tvt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isSignal,\\n\\tyt as lifecyclesToEvents,\\n\\t_t as observedAttributes,\\n\\tw as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tE as signal,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>The text content of the paragraph is changing when the value of the signal <code>textContent</code> is changed. Internally, there is association between <code>textContent</code> and the paragraph similar to using <code>S.on(textContent, /* update the paragraph */)</code>.</p><p>This listener must be removed when the component is removed from the DOM. To do it, the library assign internally <code>on.disconnected(/* remove the listener */)(host())</code> to the host element.</p><p class="notice">The library DOM API and signals works ideally when used declaratively. It means, you split your app logic into three parts as it was itroduced in <a href="http://localhost:40911/docs/p04-signals#h-introducing-signals">Signals</a>.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">/* PSEUDO-CODE!!! */
|
|
import { el } from "deka-dom-el";
|
|
import { S } from "deka-dom-el/signals";
|
|
function component(){
|
|
/* prepare changeable data */
|
|
const dataA= S("data");
|
|
const dataB= S("data");
|
|
/* define data flow (can be asynchronous) */
|
|
fetchAPI().then(data_new=> dataA(data_new));
|
|
setTimeout(()=> dataB("DATA"));
|
|
/* declarative UI */
|
|
return el().append(
|
|
el("h1", {
|
|
textContent: "Example",
|
|
/* declarative attribute(s) */
|
|
classList: { declarative: dataB }
|
|
}),
|
|
el("ul").append(
|
|
/* declarative element(s) */
|
|
S.el(dataA, data=> data.map(d=> el("li", d)))
|
|
),
|
|
el("ul").append(
|
|
/* declarative component(s) */
|
|
S.el(dataA, data=> data.map(d=> el(subcomponent, d)))
|
|
)
|
|
);
|
|
}
|
|
function subcomponent({ id }){
|
|
/* prepare changeable data */
|
|
const textContent= S("…");
|
|
/* define data flow (can be asynchronous) */
|
|
fetchAPI(id).then(text=> textContent(text));
|
|
/* declarative UI */
|
|
return el("li", { textContent, dataId: id });
|
|
}
|
|
</code></div><p>Strictly speaking, the imperative way of using the library is not prohibited. Just be careful (rather avoid) mixing declarative approach (using signals) and imperative manipulation of elements.</p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">/* PSEUDO-CODE!!! */
|
|
import { el, on, scope } from "deka-dom-el";
|
|
function component(){
|
|
const { host }= scope;
|
|
const ul= el("ul");
|
|
const ac= new AbortController();
|
|
fetchAPI({ signal: ac.signal }).then(data=> {
|
|
data.forEach(d=> ul.append(el("li", d)));
|
|
});
|
|
host(
|
|
/* element was remove before data fetched */
|
|
on.disconnected(()=> ac.abort())
|
|
);
|
|
return ul;
|
|
/**
|
|
* NEVER EVER!!
|
|
* let data;
|
|
* fetchAPI().then(d=> data= O(d));
|
|
*
|
|
* OR NEVER EVER!!
|
|
* const ul= el("ul");
|
|
* fetchAPI().then(d=> {
|
|
* const data= O("data");
|
|
* ul.append(el("li", data));
|
|
* });
|
|
*
|
|
* // THE HOST IS PROBABLY DIFFERENT THAN
|
|
* // YOU EXPECT AND OBSERVABLES MAY BE
|
|
* // UNEXPECTEDLY REMOVED!!!
|
|
* */
|
|
}
|
|
</code></div><div class="notice"><!--<dde:mark type="component" name="mnemonic" host="parentElement" ssr/>--><h3 id="h-mnemonic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-mnemonic" tabindex="-1">#</a> Mnemonic</h3><ul><li><code>el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function></code> — using component represented by function</li><li><code>scope.host()</code> — get current component reference</li><li><code>scope.host(...<addons>)</code> — use addons to current component</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p04-signals" title="Handling reactivity in UI via signals."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Signals and reactivity (previous)</a><a rel="next" href="p06-customElement" title="Using custom elements in combinantion with DDE"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Custom elements</a></div></main></body></html> |