mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-24 17:39:36 +01:00
16 lines
27 KiB
HTML
16 lines
27 KiB
HTML
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="Introducing a library."><title>`deka-dom-el` — Introduction</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://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` — Introduction</h1><p>Introducing a library.</p></header><nav><a href="https://github.com/jaandrle/deka-dom-el"><svg class="icon" viewBox="0 0 32 32"><!--<dde:mark type="component" name="iconGitHub" host="parentElement" ssr/>--><path d="M 16,0.395c -8.836,0 -16,7.163 -16,16c 0,7.069 4.585,13.067 10.942,15.182c 0.8,0.148 1.094,-0.347 1.094,-0.77c 0,-0.381 -0.015,-1.642 -0.022,-2.979c -4.452,0.968 -5.391,-1.888 -5.391,-1.888c -0.728,-1.849 -1.776,-2.341 -1.776,-2.341c -1.452,-0.993 0.11,-0.973 0.11,-0.973c 1.606,0.113 2.452,1.649 2.452,1.649c 1.427,2.446 3.743,1.739 4.656,1.33c 0.143,-1.034 0.558,-1.74 1.016,-2.14c -3.554,-0.404 -7.29,-1.777 -7.29,-7.907c 0,-1.747 0.625,-3.174 1.649,-4.295c -0.166,-0.403 -0.714,-2.03 0.155,-4.234c 0,0 1.344,-0.43 4.401,1.64c 1.276,-0.355 2.645,-0.532 4.005,-0.539c 1.359,0.006 2.729,0.184 4.008,0.539c 3.054,-2.07 4.395,-1.64 4.395,-1.64c 0.871,2.204 0.323,3.831 0.157,4.234c 1.026,1.12 1.647,2.548 1.647,4.295c 0,6.145 -3.743,7.498 -7.306,7.895c 0.574,0.497 1.085,1.47 1.085,2.963c 0,2.141 -0.019,3.864 -0.019,4.391c 0,0.426 0.288,0.925 1.099,0.768c 6.354,-2.118 10.933,-8.113 10.933,-15.18c 0,-8.837 -7.164,-16 -16,-16Z"></path></svg>GitHub</a><a href="./" title="Introducing a library." class="current">1. Introduction</a><a href="p02-elements" title="Basic concepts of elements modifications and creations.">2. Elements</a><a href="p03-events" title="Using not only events in UI declaratively.">3. Events and Addons</a><a href="p04-observables" title="Handling reactivity in UI via observables.">4. Observables and reactivity</a><a href="p05-scopes" title="Organizing UI into components">5. Scopes and components</a><a href="p06-customElement" title="Using custom elements in combinantion with DDE">6. Custom elements</a></nav><main><p>The library tries to provide pure JavaScript tool(s) to create reactive interfaces.</p><p>We start with creating and modifying a static elements and end up with UI templates. <i>From <code>document.createElement</code> to <code>el</code>.</i> Then we go through the native events system and the way to include it declaratively in UI templates. <i>From <code>element.addEventListener</code> to <code>on</code>.</i></p><p>Next step is providing interactivity not only for our UI templates. We introduce observables (<code>O</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the observables are incorporated into our templates with regard to application performance. This is not the only reason the library uses <code>scope</code>s. We will look at how they work in components represented in JavaScript by functions.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-exquzbx4inc" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "./esm-with-observables.js";
|
|
import { O } from "./esm-with-observables.js";
|
|
const clicks= O(0);
|
|
document.body.append(
|
|
el().append(
|
|
el("p", O(()=>
|
|
"Hello World "+"🎉".repeat(clicks())
|
|
)),
|
|
el("button", {
|
|
type: "button",
|
|
onclick: ()=> clicks(clicks()+1),
|
|
textContent: "Fire"
|
|
})
|
|
)
|
|
);
|
|
</code></div><script>Flems(document.getElementById("code-example-1-exquzbx4inc"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"./esm-with-observables.js\\\";\\nimport { O } from \\\"./esm-with-observables.js\\\";\\nconst clicks= O(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", O(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks())\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1),\\n\\t\\t\\ttextContent: \\\"Fire\\\"\\n\\t\\t})\\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><div class="prevNext"><!--<dde:mark type="component" name="prevNext" host="parentElement" ssr/>--><!--<dde:mark type="component" name="pageLink" host="this" ssr/>--><a rel="next" href="p02-elements" title="Basic concepts of elements modifications and creations."><!--<dde:mark type="component" name="pageLink" host="parentElement" ssr/>-->(next) Elements</a></div></main></body></html> |