jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-25 17:49:37 +01:00
Code Packages Releases Activity
55860b99eb
deka-dom-el/docs/p04-observables.html

150 lines
147 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Handling reactivity in UI via observables."><title>`deka-dom-el` — Observables and reactivity</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` — Observables and reactivity</h1><p>Handling reactivity in UI via observables.</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&nbsp;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." class="current">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">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 observables to manage reactivity</h2><p>How a program responds to variable data or user interactions is one of the fundamental problems of programming. If we desire to solve the issue in a declarative manner, observables may be a viable approach.</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 { O, observable } from "deka-dom-el/observables";
O===observable
/** @type {ddeObservable} */
/** @type {ddeAction} */
/** @type {ddeActions} */
</code></div><h3 id="h-introducing-observables"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-observables" tabindex="-1">#</a> Introducing observables</h3><p>Using observables, we split program logic into the three parts. Firstly (α), we create a&nbsp;variable (constant) representing reactive value. Somewhere later, we can register (β) a&nbsp;logic reacting to the observable value changes. Similarly, in a&nbsp;remaining part (γ), we can update the observable value.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-v1fw44pkzuo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
// α — `observable` represents a&nbsp;reactive value
const observable= O(0);
// β — just reacts on observable changes
O.on(observable, console.log);
// γ — just updates the value
const update= ()=&gt; observable(observable()+1);
update();
const interval= 5*1000;
setTimeout(clearInterval, 10*interval,
setInterval(update, interval));
</code></div><script>Flems(document.getElementById("code-example-1-v1fw44pkzuo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\n// α — `observable` represents a reactive value\\nconst observable= O(0);\\n// β — just reacts on observable changes\\nO.on(observable, console.log);\\n// γ — just updates the value\\nconst update= ()=> observable(observable()+1);\\n\\nupdate();\\nconst interval= 5*1000;\\nsetTimeout(clearInterval, 10*interval,\\n\\tsetInterval(update, interval));\\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>All this is just an&nbsp;example of <a href="https://en.wikipedia.org/wiki/Event-driven_programming" title="Wikipedia: Event-driven programming">Event-driven programming</a> and <a href="https://en.wikipedia.org/wiki/Publish%E2%80%93subscribe_pattern" title="Wikipedia: Publish–subscribe pattern">Publish–subscribe pattern</a> (compare for example with <a href="https://www.npmjs.com/package/fpubsub" title="NPM package: fpubsub">fpubsub library</a>). All three parts can be in some manner independent and still connected to the same reactive entity.</p><p>Observables are implemented in the library as functions. To see current value of observable, just call it without any arguments <code>console.log(observable())</code>. To update the observable value, pass any argument <code>observable('a new value')</code>. For listenning the observable value changes, use <code>O.on(observable, console.log)</code>.</p><p>Similarly to the <code>on</code> function to register DOM events listener. You can use <code>AbortController</code>/<code>AbortSignal</code> to <em>off</em>/stop listenning. In example, you also found the way for representing “live” piece of code computation pattern (derived observable):</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1ti9ynadhw5c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
const observable= O(0);
// computation pattern
const double= O(()=&gt; 2*observable());
const ac= new AbortController();
O.on(observable, v=&gt; console.log("observable", v), { signal: ac.signal });
O.on(double, v=&gt; console.log("double", v), { signal: ac.signal });
observable(observable()+1);
const interval= 5 * 1000;
const id= setInterval(()=&gt; observable(observable()+1), interval);
ac.signal.addEventListener("abort",
()=&gt; setTimeout(()=&gt; clearInterval(id), 2*interval));
setTimeout(()=&gt; ac.abort(), 3*interval)
</code></div><script>Flems(document.getElementById("code-example-1-1ti9ynadhw5c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\nconst observable= O(0);\\n// computation pattern\\nconst double= O(()=> 2*observable());\\n\\nconst ac= new AbortController();\\nO.on(observable, v=> console.log(\\\"observable\\\", v), { signal: ac.signal });\\nO.on(double, v=> console.log(\\\"double\\\", v), { signal: ac.signal });\\n\\nobservable(observable()+1);\\nconst interval= 5 * 1000;\\nconst id= setInterval(()=> observable(observable()+1), interval);\\nac.signal.addEventListener(\\\"abort\\\",\\n\\t()=> setTimeout(()=> clearInterval(id), 2*interval));\\n\\nsetTimeout(()=> ac.abort(), 3*interval)\\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><h3 id="h-observables-and-actions"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-observables-and-actions" tabindex="-1">#</a> Observables and actions</h3><p><code>O(/* primitive */)</code> allows you to declare simple reactive variables, typically around <em>immutable</em> <a title="Primitive | MDN" href="https://developer.mozilla.org/en-US/docs/Glossary/Primitive">primitive types</a>. However, it may also be necessary to use reactive arrays, objects, or other complex reactive structures.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-ny81g2qun6o" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
const observable= O(0, {
increaseOnlyOdd(add){
console.info(add);
if(add%2 === 0) return this.stopPropagation();
this.value+= add;
}
});
O.on(observable, console.log);
const oninterval= ()=&gt;
O.action(observable, "increaseOnlyOdd", Math.floor(Math.random()*100));
const interval= 5*1000;
setTimeout(
clearInterval,
10*interval,
setInterval(oninterval, interval)
);
</code></div><script>Flems(document.getElementById("code-example-1-ny81g2qun6o"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\nconst observable= O(0, {\\n\\tincreaseOnlyOdd(add){\\n\\t\\tconsole.info(add);\\n\\t\\tif(add%2 === 0) return this.stopPropagation();\\n\\t\\tthis.value+= add;\\n\\t}\\n});\\nO.on(observable, console.log);\\nconst oninterval= ()=>\\n\\tO.action(observable, \\\"increaseOnlyOdd\\\", Math.floor(Math.random()*100));\\n\\nconst interval= 5*1000;\\nsetTimeout(\\n\\tclearInterval,\\n\\t10*interval,\\n\\tsetInterval(oninterval, interval)\\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>…but typical user-case is object/array (maps, sets and other mutable objects):</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-ihanc6k9v9c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
const todos= O([], {
push(item){
this.value.push(O(item));
},
pop(){
const removed= this.value.pop();
if(removed) O.clear(removed);
},
[O.symbols.onclear](){ // this covers `O.clear(todos)`
O.clear(...this.value);
}
});
import { el, on } from "./esm-with-observables.js";
/** @type {ddeElementAddon&lt;HTMLFormElement&gt;} */
const onsubmit= on("submit", function(event){
event.preventDefault();
const data= new FormData(this);
switch (data.get("op")){
case "A"/*dd*/:
O.action(todos, "push", data.get("todo"));
break;
case "E"/*dit*/: {
const last= todos().at(-1);
if(!last) break;
last(data.get("todo"));
break;
}
case "R"/*emove*/:
O.action(todos, "pop");
break;
}
});
document.body.append(
el("ul").append(
O.el(todos, todos=&gt;
todos.map(textContent=&gt; el("li", textContent)))
),
el("form", null, onsubmit).append(
el("input", { type: "text", name: "todo", placeholder: "Todo’s text" }),
el(radio, { textContent: "Add", checked: true }),
el(radio, { textContent: "Edit last" }),
el(radio, { textContent: "Remove" }),
el("button", "Submit")
)
);
document.head.append(
el("style", "form{ display: flex; flex-flow: column nowrap; }")
);
function radio({ textContent, checked= false }){
return el("label").append(
el("input", { type: "radio", name: "op", value: textContent[0], checked }),
" ",textContent
)
}
</code></div><script>Flems(document.getElementById("code-example-1-ihanc6k9v9c"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\nconst todos= O([], {\\n\\tpush(item){\\n\\t\\tthis.value.push(O(item));\\n\\t},\\n\\tpop(){\\n\\t\\tconst removed= this.value.pop();\\n\\t\\tif(removed) O.clear(removed);\\n\\t},\\n\\t[O.symbols.onclear](){ // this covers `O.clear(todos)`\\n\\t\\tO.clear(...this.value);\\n\\t}\\n});\\n\\nimport { el, on } from \\\"./esm-with-observables.js\\\";\\n/** @type {ddeElementAddon<HTMLFormElement>} */\\nconst onsubmit= on(\\\"submit\\\", function(event){\\n\\tevent.preventDefault();\\n\\tconst data= new FormData(this);\\n\\tswitch (data.get(\\\"op\\\")){\\n\\t\\tcase \\\"A\\\"/*dd*/:\\n\\t\\t\\tO.action(todos, \\\"push\\\", data.get(\\\"todo\\\"));\\n\\t\\t\\tbreak;\\n\\t\\tcase \\\"E\\\"/*dit*/: {\\n\\t\\t\\tconst last= todos().at(-1);\\n\\t\\t\\tif(!last) break;\\n\\t\\t\\tlast(data.get(\\\"todo\\\"));\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase \\\"R\\\"/*emove*/:\\n\\t\\t\\tO.action(todos, \\\"pop\\\");\\n\\t\\t\\tbreak;\\n\\t}\\n});\\ndocument.body.append(\\n\\tel(\\\"ul\\\").append(\\n\\t\\tO.el(todos, todos=>\\n\\t\\t\\ttodos.map(textContent=> el(\\\"li\\\", textContent)))\\n\\t),\\n\\tel(\\\"form\\\", null, onsubmit).append(\\n\\t\\tel(\\\"input\\\", { type: \\\"text\\\", name: \\\"todo\\\", placeholder: \\\"Todo’s text\\\" }),\\n\\t\\tel(radio, { textContent: \\\"Add\\\", checked: true }),\\n\\t\\tel(radio, { textContent: \\\"Edit last\\\" }),\\n\\t\\tel(radio, { textContent: \\\"Remove\\\" }),\\n\\t\\tel(\\\"button\\\", \\\"Submit\\\")\\n\\t)\\n);\\ndocument.head.append(\\n\\tel(\\\"style\\\", \\\"form{ display: flex; flex-flow: column nowrap; }\\\")\\n);\\nfunction radio({ textContent, checked= false }){\\n\\treturn el(\\\"label\\\").append(\\n\\t\\tel(\\\"input\\\", { type: \\\"radio\\\", name: \\\"op\\\", value: textContent[0], checked }),\\n\\t\\t\\\" \\\",textContent\\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>In some way, you can compare it with <a href="https://react.dev/reference/react/useReducer" title="useReducer hook | React docs">useReducer</a> hook from React. So, the <code>O(&lt;data&gt;, &lt;actions&gt;)</code> pattern creates a&nbsp;store “machine”. We can then invoke (dispatch) registered action by calling <code>O.action(&lt;observable&gt;, &lt;name&gt;, ...&lt;args&gt;)</code> after the action call the observable calls all its listeners. This can be stopped by calling <code>this.stopPropagation()</code> in the method representing the given action. As it can be seen in examples, the “store” value is available also in the function for given action (<code>this.value</code>).</p><h3 id="h-reactive-dom-attributes-and-elements"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-reactive-dom-attributes-and-elements" tabindex="-1">#</a> Reactive DOM attributes and elements</h3><p>There are on basic level two distinc situation to mirror dynamic value into the DOM/UI</p><ol><li>to change some attribute(s) of existing element(s)</li><li>to generate elements itself dynamically – this covers conditions and loops</li></ol><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-ehcq40v0h5k" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
const count= O(0);
import { el } from "./esm-with-observables.js";
document.body.append(
el("p", O(()=&gt; "Currently: "+count())),
el("p", { classList: { red: O(()=&gt; count()%2) }, dataset: { count }, textContent: "Attributes example" })
);
document.head.append(
el("style", ".red { color: red; }")
);
const interval= 5 * 1000;
setTimeout(clearInterval, 10*interval,
setInterval(()=&gt; count(count()+1), interval));
</code></div><script>Flems(document.getElementById("code-example-1-ehcq40v0h5k"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\nconst count= O(0);\\n\\nimport { el } from \\\"./esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tel(\\\"p\\\", O(()=> \\\"Currently: \\\"+count())),\\n\\tel(\\\"p\\\", { classList: { red: O(()=> count()%2) }, dataset: { count }, textContent: \\\"Attributes example\\\" })\\n);\\ndocument.head.append(\\n\\tel(\\\"style\\\", \\\".red { color: red; }\\\")\\n);\\n\\nconst interval= 5 * 1000;\\nsetTimeout(clearInterval, 10*interval,\\n\\tsetInterval(()=> count(count()+1), interval));\\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 derived attribute based on value of observable variable just use the observable as a&nbsp;value of the attribute (<code>assign(element, { attribute: O('value') })</code>). <code>assign</code>/<code>el</code> provides ways to glue reactive attributes/classes more granularly into the DOM. Just use dedicated build-in attributes <code>dataset</code>, <code>ariaset</code> and <code>classList</code>.</p><p>For computation, you can use the “derived observable” (see above) like <code>assign(element, { textContent: O(()=&gt; 'Hello '+WorldObservable()) })</code>. This is read-only observable its value is computed based on given function and updated when any observable used in the function changes.</p><p>To represent part of the template filled dynamically based on the observable value use <code>O.el(observable, DOMgenerator)</code>. This was already used in the todo example above or see:</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-2-8r8qappf8mo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { O } from "./esm-with-observables.js";
const count= O(0, {
add(){ this.value= this.value + Math.round(Math.random()*10); }
});
const numbers= O([ count() ], {
push(next){ this.value.push(next); }
});
import { el } from "./esm-with-observables.js";
document.body.append(
O.el(count, count=&gt; count%2
? el("p", "Last number is odd.")
: el()
),
el("p", "Lucky numbers:"),
el("ul").append(
O.el(numbers, numbers=&gt; numbers.toReversed()
.map(n=&gt; el("li", n)))
)
);
const interval= 5*1000;
setTimeout(clearInterval, 10*interval, setInterval(function(){
O.action(count, "add");
O.action(numbers, "push", count());
}, interval));
</code></div><script>Flems(document.getElementById("code-example-2-8r8qappf8mo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { O } from \\\"./esm-with-observables.js\\\";\\nconst count= O(0, {\\n\\tadd(){ this.value= this.value + Math.round(Math.random()*10); }\\n});\\nconst numbers= O([ count() ], {\\n\\tpush(next){ this.value.push(next); }\\n});\\n\\nimport { el } from \\\"./esm-with-observables.js\\\";\\ndocument.body.append(\\n\\tO.el(count, count=> count%2\\n\\t\\t? el(\\\"p\\\", \\\"Last number is odd.\\\")\\n\\t\\t: el()\\n\\t),\\n\\tel(\\\"p\\\", \\\"Lucky numbers:\\\"),\\n\\tel(\\\"ul\\\").append(\\n\\t\\tO.el(numbers, numbers=> numbers.toReversed()\\n\\t\\t\\t.map(n=> el(\\\"li\\\", n)))\\n\\t)\\n);\\n\\nconst interval= 5*1000;\\nsetTimeout(clearInterval, 10*interval, setInterval(function(){\\n\\tO.action(count, \\\"add\\\");\\n\\tO.action(numbers, \\\"push\\\", count());\\n}, interval));\\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><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>O(&lt;value&gt;)</code> — observable: reactive value</li><li><code>O(()=&gt; &lt;computation&gt;)</code> — read-only observable: reactive value dependent on calculation using other observables</li><li><code>O.on(&lt;observable&gt;, &lt;listener&gt;[, &lt;options&gt;])</code> — listen to the observable value changes</li><li><code>O.clear(...&lt;observables&gt;)</code> — off and clear observables</li><li><code>O(&lt;value&gt;, &lt;actions&gt;)</code> — observable: pattern to create complex reactive objects/arrays</li><li><code>O.action(&lt;observable&gt;, &lt;action-name&gt;, ...&lt;action-arguments&gt;)</code> — invoke an&nbsp;action for given observable</li><li><code>O.el(&lt;observable&gt;, &lt;function-returning-dom&gt;)</code> — render partial dom structure (template) based on the current observable value</li></ul></div><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><a rel="prev" href="p03-events" title="Using not only events in UI declaratively."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->Events and Addons (previous)</a><a rel="next" href="p05-scopes" title="Organizing UI into components"><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Scopes and components</a></div></main></body></html>
View Git Blame Copy Permalink