The library tries to provide pure JavaScript tool(s) to create reactive interfaces.
We start with creating and modifying a static elements and end up with UI templates. From document.createElement to el. Then we go through the native events system and the way to include it declaratively in UI templates. From element.addEventListener to on.
Next step is providing interactivity not only for our UI templates. We introduce signals (O) and how them incorporate to UI templates.
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 scopes. We will look at how they work in components represented in JavaScript by functions.
import { el } from "./esm-with-signals.js";
+`deka-dom-el` — Introduction `deka-dom-el` — Introduction
Introducing a library.
The library tries to provide pure JavaScript tool(s) to create reactive interfaces.
We start with creating and modifying a static elements and end up with UI templates. From document.createElement to el. Then we go through the native events system and the way to include it declaratively in UI templates. From element.addEventListener to on.
Next step is providing interactivity not only for our UI templates. We introduce signals (S) and how them incorporate to UI templates.
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 scopes. We will look at how they work in components represented in JavaScript by functions.
import { el } from "./esm-with-signals.js";
import { S } from "./esm-with-signals.js";
const clicks= S(0);
document.body.append(
diff --git a/docs/p03-events.html b/docs/p03-events.html
index 83e894e..65ce2b6 100644
--- a/docs/p03-events.html
+++ b/docs/p03-events.html
@@ -67,7 +67,7 @@ document.body.append(
function log({ type, detail }){
console.log({ _this: this, type, detail });
}
-For Custom elements, we will later introduce a way to replace *Callback syntax with dde:* events. The on.* functions then listen to the appropriate Custom Elements events (see Custom element lifecycle callbacks | MDN).
But, in case of regular elemnets the MutationObserver | MDN is internaly used to track these events. Therefore, there are some drawbacks:
- To proper listener registration, you need to use
on.* not `on("dde:*", …)`! - Use sparingly! Internally, library must loop of all registered events and fires event properly. It is good practice to use the fact that if an element is removed, its children are also removed! In this spirit, we will introduce later the host syntax to register clean up procedures when the component is removed from the app.
To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that on.connected and on.disconnected are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by Vue. For using native behaviour re-(dis)connecting element, use:
- custom
MutationObserver or logic in (dis) - re-add
on.connected or on.disconnected listeners.
# Final notes
The library also provides a method to dispatch the events.
import { el, on, dispatchEvent } from "./esm-with-signals.js";
+For Custom elements, we will later introduce a way to replace *Callback syntax with dde:* events. The on.* functions then listen to the appropriate Custom Elements events (see Custom element lifecycle callbacks | MDN).
But, in case of regular elemnets the MutationObserver | MDN is internaly used to track these events. Therefore, there are some drawbacks:
- To proper listener registration, you need to use
on.* not `on("dde:*", …)`! - Use sparingly! Internally, library must loop of all registered events and fires event properly. It is good practice to use the fact that if an element is removed, its children are also removed! In this spirit, we will introduce later the host syntax to register clean up procedures when the component is removed from the app.
To provide intuitive behaviour, similar also to how the life-cycle events works in other frameworks/libraries, deka-dom-el library ensures that on.connected and on.disconnected are called only once and only when the element is (dis)connected to live DOM. The solution is inspired by Vue. For using native behaviour re-(dis)connecting element, use:
- custom
MutationObserver or logic in (dis)connectedCallback or… - re-add
on.connected or on.disconnected listeners.
# Final notes
The library also provides a method to dispatch the events.
import { el, on, dispatchEvent } from "./esm-with-signals.js";
document.body.append(
el("p", "Listenning to `test` event.", on("test", console.log)).append(
el("br"),
diff --git a/docs/p06-customElement.html b/docs/p06-customElement.html
index 810744b..f6229a7 100644
--- a/docs/p06-customElement.html
+++ b/docs/p06-customElement.html
@@ -5,7 +5,7 @@ import {
observedAttributes,
} from "deka-dom-el";
/** @type {ddePublicElementTagNameMap} */
-import { O as S } from "deka-dom-el/signals";
+import { S } from "deka-dom-el/signals";
S.observedAttributes;
// “internal” utils
diff --git a/docs_src/index.html.js b/docs_src/index.html.js
index dc98244..3aa5446 100644
--- a/docs_src/index.html.js
+++ b/docs_src/index.html.js
@@ -28,7 +28,7 @@ export function page({ pkg, info }){
el("p").append(
"Next step is providing interactivity not only for our UI templates.",
" ",
- "We introduce signals (", el("code", "O"), ") and how them incorporate to UI templates.",
+ "We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.",
),
el("p").append(
"Now we will clarify how the signals are incorporated into our templates with regard ",
diff --git a/docs_src/p03-events.html.js b/docs_src/p03-events.html.js
index 70ce51e..9611ed4 100644
--- a/docs_src/p03-events.html.js
+++ b/docs_src/p03-events.html.js
@@ -120,7 +120,7 @@ export function page({ pkg, info }){
" For using native behaviour re-(dis)connecting element, use:"
),
el("ul").append(
- el("li").append("custom ", el("code", "MutationObserver"), " or logic in (dis)", el(code, "connectedCallback"), " or…"),
+ el("li").append("custom ", el("code", "MutationObserver"), " or logic in (dis)", el("code", "connectedCallback"), " or…"),
el("li").append("re-add ", el("code", "on.connected"), " or ", el("code", "on.disconnected"), " listeners.")
),