mirror of
https://github.com/jaandrle/deka-dom-el
synced 2026-10-24 17:51:48 +02:00
🔤 3PS
This commit is contained in:
7 files changed
+60
-48
No files matched your search
+8
-7
@@ -1,21 +1,22 @@
|
|||||||
<!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://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` — 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-signals" title="Handling reactivity in UI via signals.">4. Signals 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 using …</p><h3 id="h-event-driven-programming--parts-separation--ps"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-event-driven-programming--parts-separation--ps" tabindex="-1">#</a> Event-driven programming (3 parts separation ≡ 3PS)</h3><p>Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as a starting point. </p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">const onchage=
|
<!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://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` — 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-signals" title="Handling reactivity in UI via signals.">4. Signals 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 using …</p><h3 id="h-event-driven-programming--parts-separation--ps"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-event-driven-programming--parts-separation--ps" tabindex="-1">#</a> Event-driven programming (3 parts separation ≡ 3PS)</h3><p>Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as a starting point. </p><div class="code" data-js="todo"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">// pseudo code!
|
||||||
|
const onchage=
|
||||||
event=>
|
event=>
|
||||||
console.log("Reacting to the:", event); // A
|
console.log("Reacting to the:", event); // A
|
||||||
input.addEventListener("change", onchange); // B
|
input.addEventListener("change", onchange); // B
|
||||||
input.dispatchEvent(new Event("change")); // C
|
input.dispatchEvent(new Event("change")); // C
|
||||||
</code></div><p>As we can see, in the code at location “A” we define how to react when the function is called with any event as an argument. At that moment, we don't care who/why/how the function was called. Similarly, at point “B”, we reference to a function to be called on the event without caring what the function will do at that time. Finally, at point “C”, we tell the application that a change has occurred, in the input, and we don't care if/how someone is listening for the event. </p><p>We start with creating and modifying a static elements and end up with UI templates. <em>From <code>document.createElement</code> to <code>el</code>.</em>. Then we go through the native events system and the way to include it declaratively in UI templates. <em>From <code>element.addEventListener</code> to <code>on</code>.</em></p><p>Next step is providing interactivity not only for our UI templates. We introduce signals (<code>S</code>) and how them incorporate to UI templates.</p><p>Now we will clarify how the signals 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-8meex5b3tyo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "./esm-with-signals.js";
|
</code></div><p>As we can see, in the code at location “A” we define <em>how to react</em> when the function is called with any event as an argument. At that moment, we <em>don't care who/why/how</em> the function was called. Similarly, at point “B”, we reference to a function to be called on the event <em>without caring</em> what the function will do at that time. Finally, at point “C”, we tell the application that a change has occurred, in the input, and we <em>don't care if/how someone</em> is listening for the event.</p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-8meex5b3tyo" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { el } from "./esm-with-signals.js";
|
||||||
import { S } from "./esm-with-signals.js";
|
import { S } from "./esm-with-signals.js";
|
||||||
const clicks= S(0);
|
const clicks= S(0); // A
|
||||||
document.body.append(
|
document.body.append(
|
||||||
el().append(
|
el().append(
|
||||||
el("p", S(()=>
|
el("p", S(()=>
|
||||||
"Hello World "+"🎉".repeat(clicks())
|
"Hello World "+"🎉".repeat(clicks()) // B
|
||||||
)),
|
)),
|
||||||
el("button", {
|
el("button", {
|
||||||
type: "button",
|
type: "button",
|
||||||
onclick: ()=> clicks(clicks()+1),
|
onclick: ()=> clicks(clicks()+1), // C
|
||||||
textContent: "Fire"
|
textContent: "Fire",
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
</code></div><script>Flems(document.getElementById("code-example-1-8meex5b3tyo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"./esm-with-signals.js\\\";\\nimport { S } from \\\"./esm-with-signals.js\\\";\\nconst clicks= S(0);\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\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-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\t\\t}\\n\\t\\t\\tLine truncated
|
</code></div><script>Flems(document.getElementById("code-example-1-8meex5b3tyo"), JSON.parse("{\"files\":[{\"name\":\".js\",\"content\":\"import { el } from \\\"./esm-with-signals.js\\\";\\nimport { S } from \\\"./esm-with-signals.js\\\";\\nconst clicks= S(0); // A\\ndocument.body.append(\\n\\tel().append(\\n\\t\\tel(\\\"p\\\", S(()=>\\n\\t\\t\\t\\\"Hello World \\\"+\\\"🎉\\\".repeat(clicks()) // B\\n\\t\\t)),\\n\\t\\tel(\\\"button\\\", {\\n\\t\\t\\ttype: \\\"button\\\",\\n\\t\\t\\tonclick: ()=> clicks(clicks()+1), // C\\n\\t\\t\\ttextContent: \\\"Fire\\\",\\n\\t\\t})\\n\\t)\\n);\\n\"},{\"name\":\"esm-with-signals.js\",\"content\":\"// src/signals-common.js\\nvar k = {\\n\\tisSignal(t) {\\n\\t\\treturn !1;\\n\\t},\\n\\tprocessReactiveAttribute(t, e, n, r) {\\n\\t\\treturn n;\\n\\t}\\n};\\nfunction B(t, e = !0) {\\n\\treturn e ? Object.assign(k, t) : (Object.setPrototypeOf(t, k), t);\\n}\\nfunction W(t) {\\n\\treturn k.isPrototypeOf(t) && t !== k ? t : k;\\n}\\n\\n// src/helpers.js\\nvar T = (...t) => Object.prototype.hasOwnProperty.call(...t);\\nfunction S(t) {\\n\\treturn typeof t > \\\"u\\\";\\n}\\nfunction X(t) {\\n\\tlet e = typeof t;\\n\\treturn e !== \\\"object\\\" ? e : t === null ? \\\"null\\\" : Object.prototype.toString.call(t);\\n}\\nfunction q(t, e) {\\n\\tif (!t || !(t instanceof AbortSignal))\\n\\t\\treturn !0;\\n\\tif (!t.aborted)\\n\\t\\treturn t.addEventListener(\\\"abort\\\", e), function() {\\n\\t\\t\\tt.removeEventListener(\\\"abort\\\", e);\\n\\t\\t};\\n}\\nfunction F(t, e) {\\n\\tlet { observedAttributes: n = [] } = t.constructor;\\n\\treturn n.reduce(function(r, o) {\\n\\t\\treturn r[pt(o)] = e(t, o), r;\\n\\t}, {});\\n}\\nfunction pt(t) {\\n\\treturn t.replace(/-./g, (e) => e[1].toUpperCase());\\n}\\n\\n// src/dom-common.js\\nvar d = {\\n\\tsetDeleteAttr: lt,\\n\\tssr: \\\"\\\",\\n\\tD: globalThis.document,\\n\\tF: globalThis.DocumentFragment,\\n\\tH: globalThis.HTMLElement,\\n\\tS: globalThis.SVGElement,\\n\\tM: globalThis.MutationObserver\\n};\\nfunction lt(t, e, n) {\\n\\tif (Reflect.set(t, e, n), !!S(n)) {\\n\\t\\tif (Reflect.deleteProperty(t, e), t instanceof d.H && t.getAttribute(e) === \\\"undefined\\\")\\n\\t\\t\\treturn t.removeAttribute(e);\\n\\t\\tif (Reflect.get(t, e) === \\\"undefined\\\")\\n\\t\\t\\treturn Reflect.set(t, e, \\\"\\\");\\n\\t}\\n}\\nvar C = \\\"__dde_lifecyclesToEvents\\\", _ = \\\"dde:connected\\\", O = \\\"dde:disconnected\\\", M = \\\"dde:attributeChanged\\\";\\n\\n// src/dom.js\\nvar A = [{\\n\\tget scope() {\\n\\t\\treturn d.D.body;\\n\\t},\\n\\thost: (t) => t ? t(d.D.body) : d.D.body,\\n\\tprevent: !0\\n}], m = {\\n\\tget current() {\\n\\t\\treturn A[A.length - 1];\\n\\t},\\n\\tget host() {\\n\\t\\treturn this.current.host;\\n\\t},\\n\\tpreventDefault() {\\n\\t\\tlet { current: t } = this;\\n\\t\\treturn t.prevent = !0, t;\\n\\t},\\n\\tget state() {\\n\\t\\treturn [...A];\\n\\t},\\n\\tpush(t = {}) {\\n\\t\\treturn A.push(Object.assign({}, this.current, { prevent: !1 }, t));\\n\\t},\\n\\tpushRoot() {\\n\\t\\treturn A.push(A[0]);\\n\\t},\\n\\tpop() {\\n\\t\\tif (A.length !== 1)\\n\\t\\t\\treturn A.pop();\\n\\t}\\n};\\nfunction Y(...t) {\\n\\treturn this.appendOriginal(...t), this;\\n}\\nfunction ht(t) {\\n\\treturn t.append === Y || (t.appendOriginal = t.append, t.append = Y), t;\\n}\\nvar $;\\nfunction j(t, e, ...n) {\\n\\tlet r = W(this), o = 0, c, i;\\n\\tswitch ((Object(e) !== e || r.isSignal(e)) && (e = { textContent: e }), !0) {\\n\\t\\tcase typeof t == \\\"function\\\": {\\n\\t\\t\\to = 1, m.push({ scope: t, host: (...v) => v.length ? (o === 1 ? n.unshift(...v) : v.forEach((l) => l(i)), void 0) : i }), c = t(e || void 0);\\n\\t\\t\\tlet a = c instanceof d.F;\\n\\t\\t\\tif (c.nodeName === \\\"#comment\\\")\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\tlet h = j.mark({\\n\\t\\t\\t\\ttype: \\\"component\\\",\\n\\t\\t\\t\\tname: t.name,\\n\\t\\t\\t\\thost: a ? \\\"this\\\" : \\\"parentElement\\\"\\n\\t\\t\\t});\\n\\t\\t\\tc.prepend(h), a && (i = h);\\n\\t\\t\\tbreak;\\n\\t\\t}\\n\\t\\tcase t === \\\"#text\\\":\\n\\t\\t\\tc = P.call(this, d.D.createTextNode(\\\"\\\"), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase (t === \\\"<>\\\" || !t):\\n\\t\\t\\tc = P.call(this, d.D.createDocumentFragment(), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !!$:\\n\\t\\t\\tc = P.call(this, d.D.createElementNS($, t), e);\\n\\t\\t\\tbreak;\\n\\t\\tcase !c:\\n\\t\\t\\tc = P.call(this, d.D.createElement(t), e);\\n\\t}\\n\\treturn ht(c), i || (i = c), n.forEach((a) => a(i)), o && m.pop(), o = 2, c;\\n}\\nfunction Wt(t, e = t, n = void 0) {\\n\\tlet r = Symbol.for(\\\"default\\\"), o = Array.from(e.querySelectorAll(\\\"slot\\\")).reduce((i, a) => Reflect.set(i, a.name || r, a) && i, {}), c = T(o, r);\\n\\tif (t.append = new Proxy(t.append, {\\n\\t\\tapply(i, a, h) {\\n\\t\\t\\tif (!h.length)\\n\\t\\t\\t\\treturn t;\\n\\t\\t\\tlet v = d.D.createDocumentFragment();\\n\\t\\t\\tfor (let l of h) {\\n\\t\\t\\t\\tif (!l || !l.slot) {\\n\\t\\t\\t\\t\\tc && v.appendChild(l);\\n\\t\\t\\t\\t\\tcontinue;\\n\\t\\t\\tLine truncated
|
||||||
@@ -4,7 +4,7 @@ S===signal
|
|||||||
/** @type {ddeSignal} */
|
/** @type {ddeSignal} */
|
||||||
/** @type {ddeAction} */
|
/** @type {ddeAction} */
|
||||||
/** @type {ddeActions} */
|
/** @type {ddeActions} */
|
||||||
</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value changes. Similarly, in a remaining part (γ), we can update the signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
|
</code></div><h3 id="h-introducing-signals"><!--<dde:mark type="component" name="h3" host="parentElement" ssr/>--><a href="#h-introducing-signals" tabindex="-1">#</a> Introducing signals</h3><p>Let’s re-introduce <a href="./#h-event-driven-programming--parts-separation--ps">3PS principle</a>.</p><p>Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant) representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value changes. Similarly, in a remaining part (γ), we can update the signal value. </p><!--<dde:mark type="component" name="example" host="this" ssr/>--><div id="code-example-1-1gy5flu0x85c" class="example"><!--<dde:mark type="component" name="code" host="parentElement" ssr/>--><code class="language-js">import { S } from "./esm-with-signals.js";
|
||||||
// α — `signal` represents a reactive value
|
// α — `signal` represents a reactive value
|
||||||
const signal= S(0);
|
const signal= S(0);
|
||||||
// β — just reacts on signal changes
|
// β — just reacts on signal changes
|
||||||
|
|||||||
@@ -1,3 +1,4 @@
|
|||||||
|
// pseudo code!
|
||||||
const onchage=
|
const onchage=
|
||||||
event=>
|
event=>
|
||||||
console.log("Reacting to the:", event); // A
|
console.log("Reacting to the:", event); // A
|
||||||
|
|||||||
@@ -1,15 +1,15 @@
|
|||||||
import { el } from "deka-dom-el";
|
import { el } from "deka-dom-el";
|
||||||
import { S } from "deka-dom-el/signals";
|
import { S } from "deka-dom-el/signals";
|
||||||
const clicks= S(0);
|
const clicks= S(0); // A
|
||||||
document.body.append(
|
document.body.append(
|
||||||
el().append(
|
el().append(
|
||||||
el("p", S(()=>
|
el("p", S(()=>
|
||||||
"Hello World "+"🎉".repeat(clicks())
|
"Hello World "+"🎉".repeat(clicks()) // B
|
||||||
)),
|
)),
|
||||||
el("button", {
|
el("button", {
|
||||||
type: "button",
|
type: "button",
|
||||||
onclick: ()=> clicks(clicks()+1),
|
onclick: ()=> clicks(clicks()+1), // C
|
||||||
textContent: "Fire"
|
textContent: "Fire",
|
||||||
})
|
})
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
+27
-21
@@ -13,6 +13,14 @@ import { code } from "./components/code.html.js";
|
|||||||
/** @param {string} url */
|
/** @param {string} url */
|
||||||
const fileURL= url=> new URL(url, import.meta.url);
|
const fileURL= url=> new URL(url, import.meta.url);
|
||||||
const references= {
|
const references= {
|
||||||
|
w_mvv:{
|
||||||
|
title: t`Wikipedia: Model–view–viewmodel`,
|
||||||
|
href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel",
|
||||||
|
},
|
||||||
|
w_mvc: {
|
||||||
|
title: t`Wikipedia: Model–view–controller`,
|
||||||
|
href: "https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller",
|
||||||
|
},
|
||||||
};
|
};
|
||||||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||||||
export function page({ pkg, info }){
|
export function page({ pkg, info }){
|
||||||
@@ -25,29 +33,27 @@ export function page({ pkg, info }){
|
|||||||
a starting point.
|
a starting point.
|
||||||
`),
|
`),
|
||||||
el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
|
el(code, { src: fileURL("./components/examples/introducing/3ps.js"), page_id }),
|
||||||
el("p").append(t`
|
|
||||||
As we can see, in the code at location “A” we define how to react when the function is called with
|
|
||||||
any event as an argument. At that moment, we don't care who/why/how the function was called. Similarly,
|
|
||||||
at point “B”, we reference to a function to be called on the event without caring what the function will
|
|
||||||
do at that time. Finally, at point “C”, we tell the application that a change has occurred, in the input,
|
|
||||||
and we don't care if/how someone is listening for the event.
|
|
||||||
`),
|
|
||||||
|
|
||||||
el("p").append(...T`
|
el("p").append(...T`
|
||||||
We start with creating and modifying a static elements and end up with UI templates.
|
As we can see, in the code at location “A” we define ${el("em", t`how to react`)} when the function
|
||||||
${el("em").append(...T`From ${el("code", "document.createElement")} to ${el("code", "el")}.`)}.
|
is called with any event as an argument. At that moment, we ${el("em", t`don't care who/why/how`)}
|
||||||
Then we go through the native events system and the way to include it declaratively in UI templates.
|
the function was called. Similarly, at point “B”, we reference to a function to be called on the event
|
||||||
${el("em").append(...T`From ${el("code", "element.addEventListener")} to ${el("code", "on")}.`)}
|
${el("em", t`without caring`)} what the function will do at that time. Finally, at point “C”, we tell
|
||||||
`),
|
the application that a change has occurred, in the input, and we ${el("em", t`don't care if/how someone`)}
|
||||||
el("p").append(...T`
|
is listening for the event.
|
||||||
Next step is providing interactivity not only for our UI templates.
|
|
||||||
We introduce signals (${el("code", "S")}) and how them incorporate to UI templates.
|
|
||||||
`),
|
|
||||||
el("p").append(...T`
|
|
||||||
Now we will clarify how the signals are incorporated into our templates with regard to application
|
|
||||||
performance. This is not the only reason the library uses ${el("code", "scope")}s. We will look at
|
|
||||||
how they work in components represented in JavaScript by functions.
|
|
||||||
`),
|
`),
|
||||||
el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
|
el(example, { src: fileURL("./components/examples/introducing/helloWorld.js"), page_id }),
|
||||||
|
el("p").append(...T`
|
||||||
|
The library introduces a new “type” of variable/constant called ${el("em", t`signal`)} allowing us to
|
||||||
|
to use introduced 3PS pattern in our applications. As you can see it in the example above.
|
||||||
|
`),
|
||||||
|
el("p").append(...T`
|
||||||
|
Also please notice that there is very similar 3PS pattern used for separate creation of UI and business logic.
|
||||||
|
`),
|
||||||
|
el("p").append(...T`
|
||||||
|
The 3PS is very simplified definition of the pattern. There are more deep/academic definitions more precisely
|
||||||
|
describe usage in specific situations, see for example ${el("a", { textContent: t`MVVM`, ...references.w_mvv })}
|
||||||
|
or ${el("a", { textContent: t`MVC`, ...references.w_mvc })}.
|
||||||
|
`),
|
||||||
|
el(h3, t`Organization of the documentation`),
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -51,6 +51,10 @@ export function page({ pkg, info }){
|
|||||||
el(code, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
|
el(code, { src: fileURL("./components/examples/signals/intro.js"), page_id }),
|
||||||
|
|
||||||
el(h3, t`Introducing signals`),
|
el(h3, t`Introducing signals`),
|
||||||
|
el("p").append(...T`
|
||||||
|
Let’s re-introduce
|
||||||
|
${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}.
|
||||||
|
`),
|
||||||
el("p").append(...T`
|
el("p").append(...T`
|
||||||
Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant)
|
Using signals, we split program logic into the three parts. Firstly (α), we create a variable (constant)
|
||||||
representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value
|
representing reactive value. Somewhere later, we can register (β) a logic reacting to the signal value
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
|
import { T, t } from "./utils/index.js";
|
||||||
export const info= {
|
export const info= {
|
||||||
title: "Custom elements",
|
title: t`Custom elements`,
|
||||||
description: "Using custom elements in combinantion with DDE",
|
description: t`Using custom elements in combinantion with DDE`,
|
||||||
};
|
};
|
||||||
|
|
||||||
import { el } from "deka-dom-el";
|
import { el } from "deka-dom-el";
|
||||||
@@ -14,12 +15,12 @@ const fileURL= url=> new URL(url, import.meta.url);
|
|||||||
const references= {
|
const references= {
|
||||||
/** Custom Elements on MDN */
|
/** Custom Elements on MDN */
|
||||||
custom_elements: {
|
custom_elements: {
|
||||||
title: "MDN documentation page for Custom Elements",
|
title: t`MDN documentation page for Custom Elements`,
|
||||||
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements",
|
href: "https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements",
|
||||||
},
|
},
|
||||||
/** Custom Elements tips from WebReflection */
|
/** Custom Elements tips from WebReflection */
|
||||||
custom_elements_tips: {
|
custom_elements_tips: {
|
||||||
title: "Ideas and tips from WebReflection",
|
title: t`Ideas and tips from WebReflection`,
|
||||||
href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
|
href: "https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4",
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@@ -27,20 +28,19 @@ const references= {
|
|||||||
export function page({ pkg, info }){
|
export function page({ pkg, info }){
|
||||||
const page_id= info.id;
|
const page_id= info.id;
|
||||||
return el(simplePage, { info, pkg }).append(
|
return el(simplePage, { info, pkg }).append(
|
||||||
el("h2", "Using custom elements in combinantion with DDE"),
|
el("h2", t`Using custom elements in combinantion with DDE`),
|
||||||
el("p").append(
|
el("p").append(...T`
|
||||||
|
`),
|
||||||
),
|
|
||||||
el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
|
el(code, { src: fileURL("./components/examples/customElement/intro.js"), page_id }),
|
||||||
|
|
||||||
el(h3, "Custom Elements Introduction"),
|
el(h3, t`Custom Elements Introduction`),
|
||||||
el("p").append(
|
el("p").append(...T`
|
||||||
el("a", { textContent: "Using custom elements", ...references.custom_elements })
|
${el("a", { textContent: t`Using custom elements`, ...references.custom_elements })}
|
||||||
),
|
`),
|
||||||
el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
|
el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
|
||||||
el("p").append(
|
el("p").append(...T`
|
||||||
el("a", { textContent: "Handy Custom Elements' Patterns", ...references.custom_elements_tips })
|
${el("a", { textContent: t`Handy Custom Elements' Patterns`, ...references.custom_elements_tips })}
|
||||||
),
|
`),
|
||||||
|
|
||||||
el(mnemonic)
|
el(mnemonic)
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in new issue
Block a user