From 8dc3e49d980eb5bca1d470fca8ea2bbd6b566ec0 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Thu, 23 May 2024 22:18:19 +0200 Subject: [PATCH] :bug: fixed typos in docs --- docs/index.html | 2 +- docs/p03-events.html | 2 +- docs/p06-customElement.html | 2 +- docs_src/index.html.js | 2 +- docs_src/p03-events.html.js | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/index.html b/docs/index.html index d8792bd..43f5022 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1,4 +1,4 @@ -`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 (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)
    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"; +

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.") ),