mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-21 23:39:37 +01:00
184 lines
80 KiB
HTML
184 lines
80 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-observables" title="Handling reactivity in UI via observables.">4. Observables 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-observables.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-observables.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-observables.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-observables.js\",\"content\":\"// src/observables-common.js\\nvar k = {\\n\\tisObservable(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 A(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), !!A(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\\\", y = \\\"dde:connected\\\", S = \\\"dde:disconnected\\\", P = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar _ = [{\\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 _[_.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 [..._];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn _.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn _.push(_[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (_.length !== 1)\\n\\t\\t\\treturn _.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 M(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, s;\\n\\tswitch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), 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 = M.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 && (s = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = j.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = j.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = j.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = j.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), s || (s = c), n.forEach((a) => a(s)), 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((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(s, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet g = 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 && g.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, w = o[x];\\n\\t\\t\\t\\tgt(l, \\\"remove\\\", \\\"slot\\\"), w && (bt(w, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet s = Array.from(t.childNodes);\\n\\t\\ts.forEach((a) => a.remove()), t.append(...s);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nM.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 = M.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction j(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 [s] = e;\\n\\tif (s === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (s === \\\".\\\")\\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 vt.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 vt(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 gt(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 !A(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[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!A(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? Ot() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction Ot() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (i) => 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\\ti();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && i();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(i) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f));\\n\\t\\t},\\n\\t\\tonDisconnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(i, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(i), a());\\n\\t}\\n\\tfunction c(i) {\\n\\t\\tif (t.has(i))\\n\\t\\t\\treturn t.get(i);\\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(i, u), u;\\n\\t}\\n\\tfunction s() {\\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(i) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(i);\\n\\t\\t});\\n\\t}\\n\\tasync function g(i) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(i instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === i || !(f instanceof Node) || i.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i) {\\n\\t\\t\\tif (u && g(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(y)), 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(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i)\\n\\t\\t\\tu && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction w(i) {\\n\\t\\treturn () => {\\n\\t\\t\\ti.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = yt) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...s) => s.length ? s.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || wt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction wt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(y));\\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(S))\\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(P, {\\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 yt(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 s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(s);\\n\\t};\\n}\\nfunction O(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar st = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nO.connected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nO.disconnected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nO.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(O.disconnected(() => e.abort())), e;\\n};\\nvar _t = /* @__PURE__ */ new WeakSet();\\nO.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(s) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of s)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(P, { 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/observables-lib.js\\nvar p = \\\"__dde_observable\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], v = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn it(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = it(!0), r = function() {\\n\\t\\tlet [o, ...c] = v.get(r);\\n\\t\\tif (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet s = v.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ts.has(a) || L(a, r);\\n\\t};\\n\\treturn v.set(n[p], r), v.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//observable: mark,\\n\\tonclear: Symbol.for(\\\"Observable.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), !v.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = v.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = M.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, s = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet g = s;\\n\\t\\ts = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[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 w;\\n\\t\\tfor (; (w = x.nextSibling) && w !== r; )\\n\\t\\t\\tw.remove();\\n\\t\\tx.remove(), n.isConnected && At(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction At(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 St(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, St(e));\\n\\treturn O.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to observables (`O.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, s] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", s);\\n\\t})(t), O.disconnected(function() {\\n\\t\\t/*! This removes all observables mapped to attributes (`O.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\\tisObservable: 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] = [], O.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Observables listeners added in the current scope/host (`O.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, s]]) => L(c, s, 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 it(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: s } = 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: s,\\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), v.has(r) && v.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), !v.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = v.get(r);\\n\\t\\tif (!v.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tv.get(c).forEach((s) => L(s, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// observables.js\\nB(ut);\\nexport {\\n\\tE as O,\\n\\tj as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tvt as classListDeclarative,\\n\\tM as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\twt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tM as el,\\n\\tqt as elNS,\\n\\tgt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isObservable,\\n\\twt as lifecyclesToEvents,\\n\\tE as observable,\\n\\tyt as observedAttributes,\\n\\tO as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\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-observables.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-observables.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-observables.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-observables.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-observables.js\",\"content\":\"// src/observables-common.js\\nvar k = {\\n\\tisObservable(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 A(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), !!A(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\\\", y = \\\"dde:connected\\\", S = \\\"dde:disconnected\\\", P = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar _ = [{\\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 _[_.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 [..._];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn _.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn _.push(_[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (_.length !== 1)\\n\\t\\t\\treturn _.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 M(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, s;\\n\\tswitch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), 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 = M.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 && (s = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = j.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = j.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = j.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = j.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), s || (s = c), n.forEach((a) => a(s)), 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((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(s, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet g = 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 && g.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, w = o[x];\\n\\t\\t\\t\\tgt(l, \\\"remove\\\", \\\"slot\\\"), w && (bt(w, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet s = Array.from(t.childNodes);\\n\\t\\ts.forEach((a) => a.remove()), t.append(...s);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nM.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 = M.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction j(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 [s] = e;\\n\\tif (s === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (s === \\\".\\\")\\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 vt.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 vt(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 gt(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 !A(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[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!A(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? Ot() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction Ot() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (i) => 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\\ti();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && i();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(i) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f));\\n\\t\\t},\\n\\t\\tonDisconnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(i, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(i), a());\\n\\t}\\n\\tfunction c(i) {\\n\\t\\tif (t.has(i))\\n\\t\\t\\treturn t.get(i);\\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(i, u), u;\\n\\t}\\n\\tfunction s() {\\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(i) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(i);\\n\\t\\t});\\n\\t}\\n\\tasync function g(i) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(i instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === i || !(f instanceof Node) || i.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i) {\\n\\t\\t\\tif (u && g(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(y)), 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(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i)\\n\\t\\t\\tu && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction w(i) {\\n\\t\\treturn () => {\\n\\t\\t\\ti.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = yt) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...s) => s.length ? s.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || wt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction wt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(y));\\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(S))\\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(P, {\\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 yt(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 s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(s);\\n\\t};\\n}\\nfunction O(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar st = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nO.connected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nO.disconnected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nO.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(O.disconnected(() => e.abort())), e;\\n};\\nvar _t = /* @__PURE__ */ new WeakSet();\\nO.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(s) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of s)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(P, { 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/observables-lib.js\\nvar p = \\\"__dde_observable\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], v = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn it(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = it(!0), r = function() {\\n\\t\\tlet [o, ...c] = v.get(r);\\n\\t\\tif (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet s = v.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ts.has(a) || L(a, r);\\n\\t};\\n\\treturn v.set(n[p], r), v.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//observable: mark,\\n\\tonclear: Symbol.for(\\\"Observable.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), !v.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = v.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = M.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, s = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet g = s;\\n\\t\\ts = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[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 w;\\n\\t\\tfor (; (w = x.nextSibling) && w !== r; )\\n\\t\\t\\tw.remove();\\n\\t\\tx.remove(), n.isConnected && At(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction At(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 St(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, St(e));\\n\\treturn O.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to observables (`O.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, s] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", s);\\n\\t})(t), O.disconnected(function() {\\n\\t\\t/*! This removes all observables mapped to attributes (`O.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\\tisObservable: 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] = [], O.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Observables listeners added in the current scope/host (`O.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, s]]) => L(c, s, 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 it(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: s } = 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: s,\\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), v.has(r) && v.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), !v.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = v.get(r);\\n\\t\\tif (!v.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tv.get(c).forEach((s) => L(s, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// observables.js\\nB(ut);\\nexport {\\n\\tE as O,\\n\\tj as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tvt as classListDeclarative,\\n\\tM as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\twt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tM as el,\\n\\tqt as elNS,\\n\\tgt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isObservable,\\n\\twt as lifecyclesToEvents,\\n\\tE as observable,\\n\\tyt as observedAttributes,\\n\\tO as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\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-observables-and-cleaning-magic"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-scopes-observables-and-cleaning-magic" tabindex="-1">#</a> Scopes, observables 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 } from "./esm-with-observables.js";
|
|
document.body.append(
|
|
el(component),
|
|
el("button", {
|
|
textContent: "Remove",
|
|
onclick: ()=> empty(document.body),
|
|
type: "button"
|
|
})
|
|
);
|
|
import { on } from "./esm-with-observables.js";
|
|
import { O } from "./esm-with-observables.js";
|
|
function component(){
|
|
const textContent= O("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 } from \\\"./esm-with-observables.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 { on } from \\\"./esm-with-observables.js\\\";\\nimport { O } from \\\"./esm-with-observables.js\\\";\\nfunction component(){\\n\\tconst textContent= O(\\\"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-observables.js\",\"content\":\"// src/observables-common.js\\nvar k = {\\n\\tisObservable(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 A(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), !!A(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\\\", y = \\\"dde:connected\\\", S = \\\"dde:disconnected\\\", P = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar _ = [{\\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 _[_.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 [..._];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn _.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn _.push(_[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (_.length !== 1)\\n\\t\\t\\treturn _.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 M(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, s;\\n\\tswitch ((Object(e) !== e || r.isObservable(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...g) => g.length ? (o === 1 ? n.unshift(...g) : g.forEach((l) => l(s)), void 0) : s }), 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 = M.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 && (s = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = j.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = j.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = j.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = j.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), s || (s = c), n.forEach((a) => a(s)), 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((s, a) => Reflect.set(s, a.name || r, a) && s, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(s, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet g = 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 && g.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tlet x = l.slot, w = o[x];\\n\\t\\t\\t\\tgt(l, \\\"remove\\\", \\\"slot\\\"), w && (bt(w, l, n), Reflect.deleteProperty(o, x));\\n\\t\\t\\t}\\n\\t\\t\\treturn c && (o[r].replaceWith(g), Reflect.deleteProperty(o, r)), t.append = s, t;\\n\\t\\t}\\n\\t}), t !== e) {\\n\\t\\tlet s = Array.from(t.childNodes);\\n\\t\\ts.forEach((a) => a.remove()), t.append(...s);\\n\\t}\\n\\treturn e;\\n}\\nfunction bt(t, e, n) {\\n\\tn && n(t, e);\\n\\ttry {\\n\\t\\tt.replaceWith(j(e, { className: [e.className, t.className], dataset: { ...t.dataset } }));\\n\\t} catch {\\n\\t\\tt.replaceWith(e);\\n\\t}\\n}\\nM.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 = M.call(e, ...r);\\n\\t\\treturn $ = void 0, o;\\n\\t};\\n}\\nvar U = /* @__PURE__ */ new WeakMap(), { setDeleteAttr: tt } = d;\\nfunction j(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 [s] = e;\\n\\tif (s === \\\"=\\\")\\n\\t\\treturn r(e.slice(1), n);\\n\\tif (s === \\\".\\\")\\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 vt.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 vt(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 gt(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 !A(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[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e](n, ct(r));\\n}\\nfunction xt(t, e, n, r, o = null) {\\n\\treturn t[(A(r) ? \\\"remove\\\" : \\\"set\\\") + e + \\\"NS\\\"](o, n, ct(r));\\n}\\nfunction et(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!A(n))\\n\\t\\treturn Reflect.deleteProperty(t, e);\\n}\\n\\n// src/events-observer.js\\nvar D = d.M ? Ot() : new Proxy({}, {\\n\\tget() {\\n\\t\\treturn () => {\\n\\t\\t};\\n\\t}\\n});\\nfunction Ot() {\\n\\tlet t = /* @__PURE__ */ new Map(), e = !1, n = (i) => 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\\ti();\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\tx(f.removedNodes, !0) && i();\\n\\t\\t\\t}\\n\\t}, r = new d.M(n(a));\\n\\treturn {\\n\\t\\tobserve(i) {\\n\\t\\t\\tlet u = new d.M(n(() => {\\n\\t\\t\\t}));\\n\\t\\t\\treturn u.observe(i, { childList: !0, subtree: !0 }), () => u.disconnect();\\n\\t\\t},\\n\\t\\tonConnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.connected.has(u) || (f.connected.add(u), f.length_c += 1);\\n\\t\\t},\\n\\t\\toffConnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.connected.has(u) && (f.connected.delete(u), f.length_c -= 1, o(i, f));\\n\\t\\t},\\n\\t\\tonDisconnected(i, u) {\\n\\t\\t\\ts();\\n\\t\\t\\tlet f = c(i);\\n\\t\\t\\tf.disconnected.has(u) || (f.disconnected.add(u), f.length_d += 1);\\n\\t\\t},\\n\\t\\toffDisconnected(i, u) {\\n\\t\\t\\tif (!t.has(i))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet f = t.get(i);\\n\\t\\t\\tf.disconnected.has(u) && (f.disconnected.delete(u), f.length_d -= 1, o(i, f));\\n\\t\\t}\\n\\t};\\n\\tfunction o(i, u) {\\n\\t\\tu.length_c || u.length_d || (t.delete(i), a());\\n\\t}\\n\\tfunction c(i) {\\n\\t\\tif (t.has(i))\\n\\t\\t\\treturn t.get(i);\\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(i, u), u;\\n\\t}\\n\\tfunction s() {\\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(i) {\\n\\t\\t\\t(requestIdleCallback || requestAnimationFrame)(i);\\n\\t\\t});\\n\\t}\\n\\tasync function g(i) {\\n\\t\\tt.size > 30 && await h();\\n\\t\\tlet u = [];\\n\\t\\tif (!(i instanceof Node))\\n\\t\\t\\treturn u;\\n\\t\\tfor (let f of t.keys())\\n\\t\\t\\tf === i || !(f instanceof Node) || i.contains(f) && u.push(f);\\n\\t\\treturn u;\\n\\t}\\n\\tfunction l(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i) {\\n\\t\\t\\tif (u && g(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(y)), 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(i, u) {\\n\\t\\tlet f = !1;\\n\\t\\tfor (let b of i)\\n\\t\\t\\tu && g(b).then(x), !(!t.has(b) || !t.get(b).length_d) && ((globalThis.queueMicrotask || setTimeout)(w(b)), f = !0);\\n\\t\\treturn f;\\n\\t}\\n\\tfunction w(i) {\\n\\t\\treturn () => {\\n\\t\\t\\ti.isConnected || (i.dispatchEvent(new Event(S)), t.delete(i));\\n\\t\\t};\\n\\t}\\n}\\n\\n// src/customElement.js\\nfunction Zt(t, e, n, r = yt) {\\n\\tm.push({\\n\\t\\tscope: t,\\n\\t\\thost: (...s) => s.length ? s.forEach((a) => a(t)) : t\\n\\t}), typeof r == \\\"function\\\" && (r = r.call(t, t));\\n\\tlet o = t[C];\\n\\to || wt(t);\\n\\tlet c = n.call(t, r);\\n\\treturn o || t.dispatchEvent(new Event(y)), e.nodeType === 11 && typeof e.mode == \\\"string\\\" && t.addEventListener(S, D.observe(e), { once: !0 }), m.pop(), e.append(c);\\n}\\nfunction wt(t) {\\n\\treturn J(t.prototype, \\\"connectedCallback\\\", function(e, n, r) {\\n\\t\\te.apply(n, r), n.dispatchEvent(new Event(y));\\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(S))\\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(P, {\\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 yt(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 s = c.length ? new CustomEvent(t, Object.assign({ detail: c[0] }, e)) : new Event(t, e);\\n\\t\\treturn o.dispatchEvent(s);\\n\\t};\\n}\\nfunction O(t, e, n) {\\n\\treturn function(o) {\\n\\t\\treturn o.addEventListener(t, e, n), o;\\n\\t};\\n}\\nvar st = (t) => Object.assign({}, typeof t == \\\"object\\\" ? t : null, { once: !0 });\\nO.connected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(y, t, e), r[C] ? r : r.isConnected ? (r.dispatchEvent(new Event(y)), r) : (q(e.signal, () => D.offConnected(r, t)) && D.onConnected(r, t), r);\\n\\t};\\n};\\nO.disconnected = function(t, e) {\\n\\treturn e = st(e), function(r) {\\n\\t\\treturn r.addEventListener(S, t, e), r[C] || q(e.signal, () => D.offDisconnected(r, t)) && D.onDisconnected(r, t), r;\\n\\t};\\n};\\nvar Z = /* @__PURE__ */ new WeakMap();\\nO.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(O.disconnected(() => e.abort())), e;\\n};\\nvar _t = /* @__PURE__ */ new WeakSet();\\nO.attributeChanged = function(t, e) {\\n\\treturn typeof e != \\\"object\\\" && (e = {}), function(r) {\\n\\t\\tif (r.addEventListener(P, t, e), r[C] || _t.has(r) || !d.M)\\n\\t\\t\\treturn r;\\n\\t\\tlet o = new d.M(function(s) {\\n\\t\\t\\tfor (let { attributeName: a, target: h } of s)\\n\\t\\t\\t\\th.dispatchEvent(\\n\\t\\t\\t\\t\\tnew CustomEvent(P, { 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/observables-lib.js\\nvar p = \\\"__dde_observable\\\";\\nfunction z(t) {\\n\\ttry {\\n\\t\\treturn T(t, p);\\n\\t} catch {\\n\\t\\treturn !1;\\n\\t}\\n}\\nvar H = [], v = /* @__PURE__ */ new WeakMap();\\nfunction E(t, e) {\\n\\tif (typeof t != \\\"function\\\")\\n\\t\\treturn it(!1, t, e);\\n\\tif (z(t))\\n\\t\\treturn t;\\n\\tlet n = it(!0), r = function() {\\n\\t\\tlet [o, ...c] = v.get(r);\\n\\t\\tif (v.set(r, /* @__PURE__ */ new Set([o])), H.push(r), dt(n, t()), H.pop(), !c.length)\\n\\t\\t\\treturn;\\n\\t\\tlet s = v.get(r);\\n\\t\\tfor (let a of c)\\n\\t\\t\\ts.has(a) || L(a, r);\\n\\t};\\n\\treturn v.set(n[p], r), v.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//observable: mark,\\n\\tonclear: Symbol.for(\\\"Observable.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), !v.has(o))\\n\\t\\t\\t\\treturn;\\n\\t\\t\\tlet c = v.get(o);\\n\\t\\t\\tc.delete(n), !(c.size > 1) && (n.clear(...c), v.delete(o));\\n\\t\\t});\\n\\t}\\n};\\nvar R = \\\"__dde_reactive\\\";\\nE.el = function(t, e) {\\n\\tlet n = M.mark({ type: \\\"reactive\\\" }, !0), r = n.end, o = d.D.createDocumentFragment();\\n\\to.append(n, r);\\n\\tlet { current: c } = m, s = {}, a = (h) => {\\n\\t\\tif (!n.parentNode || !r.parentNode)\\n\\t\\t\\treturn L(t, a);\\n\\t\\tlet g = s;\\n\\t\\ts = {}, m.push(c);\\n\\t\\tlet l = e(h, function(u, f) {\\n\\t\\t\\tlet b;\\n\\t\\t\\treturn T(g, u) ? (b = g[u], delete g[u]) : b = f(), s[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 w;\\n\\t\\tfor (; (w = x.nextSibling) && w !== r; )\\n\\t\\t\\tw.remove();\\n\\t\\tx.remove(), n.isConnected && At(c.host());\\n\\t};\\n\\treturn Q(t, a), ft(t, a, n, e), a(t()), o;\\n};\\nfunction At(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 St(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, St(e));\\n\\treturn O.attributeChanged(function({ detail: o }) {\\n\\t\\t/*! This maps attributes to observables (`O.observedAttributes`).\\n\\t\\t\\t* Investigate `__dde_attributes` key of the element.*/\\n\\t\\tlet [c, s] = o, a = this[G][c];\\n\\t\\tif (a)\\n\\t\\t\\treturn E.action(a, \\\"_set\\\", s);\\n\\t})(t), O.disconnected(function() {\\n\\t\\t/*! This removes all observables mapped to attributes (`O.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\\tisObservable: 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] = [], O.disconnected(\\n\\t\\t\\t() => (\\n\\t\\t\\t\\t/*!\\n\\t\\t\\t\\t* Clears all Observables listeners added in the current scope/host (`O.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, s]]) => L(c, s, 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 it(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: s } = 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: s,\\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), v.has(r) && v.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), !v.has(r))\\n\\t\\t\\treturn o;\\n\\t\\tlet c = v.get(r);\\n\\t\\tif (!v.has(c))\\n\\t\\t\\treturn o;\\n\\t\\tv.get(c).forEach((s) => L(s, c, !0));\\n\\t}\\n\\treturn o;\\n}\\n\\n// observables.js\\nB(ut);\\nexport {\\n\\tE as O,\\n\\tj as assign,\\n\\tnt as assignAttribute,\\n\\tht as chainableAppend,\\n\\tvt as classListDeclarative,\\n\\tM as createElement,\\n\\tqt as createElementNS,\\n\\tZt as customElementRender,\\n\\twt as customElementWithDDE,\\n\\tQt as dispatchEvent,\\n\\tM as el,\\n\\tqt as elNS,\\n\\tgt as elementAttribute,\\n\\tFt as empty,\\n\\tz as isObservable,\\n\\twt as lifecyclesToEvents,\\n\\tE as observable,\\n\\tyt as observedAttributes,\\n\\tO as on,\\n\\tB as registerReactivity,\\n\\tm as scope,\\n\\tWt as simulateSlots\\n};\\n\"}],\"toolbar\":false}"));</script><p>The text content of the paragraph is changing when the value of the observable <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 observables 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-observables#h-introducing-observables">Observables</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 { O } from "deka-dom-el/observables";
|
|
function component(){
|
|
/* prepare changeable data */
|
|
const dataA= O("data");
|
|
const dataB= O("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) */
|
|
O.el(dataA, data=> data.map(d=> el("li", d)))
|
|
),
|
|
el("ul").append(
|
|
/* declarative component(s) */
|
|
O.el(dataA, data=> data.map(d=> el(subcomponent, d)))
|
|
)
|
|
);
|
|
}
|
|
function subcomponent({ id }){
|
|
/* prepare changeable data */
|
|
const textContent= O("…");
|
|
/* 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 observables) 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-observables" title="Handling reactivity in UI via observables."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Observables 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> |