Native JavaScript DOM elements creations
Let’s go through all patterns we would like to use and what needs to be improved for better experience.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+`deka-dom-el` — Elements `deka-dom-el` — Elements
Basic concepts of elements modifications and creations.
Native JavaScript DOM elements creations
Let’s go through all patterns we would like to use and what needs to be improved for better experience.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
import {
assign,
el, createElement,
diff --git a/docs/p03-events.html b/docs/p03-events.html
index c48c2a9..d4141a0 100644
--- a/docs/p03-events.html
+++ b/docs/p03-events.html
@@ -1,4 +1,4 @@
-`deka-dom-el` — Events and Addons `deka-dom-el` — Events and Addons
Using not only events in UI declaratively.
Listenning to the native DOM events and other Addons
We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called Addon to incorporate not only this in UI templates declaratively.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
+`deka-dom-el` — Events and Addons `deka-dom-el` — Events and Addons
Using not only events in UI declaratively.
Listenning to the native DOM events and other Addons
We quickly introduce helper to listening to the native DOM events. And library syntax/pattern so-called Addon to incorporate not only this in UI templates declaratively.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm.js
import { on, dispatchEvent } from "deka-dom-el";
/** @type {ddeElementAddon} */
diff --git a/docs/p04-observables.html b/docs/p04-observables.html
index f3fc25b..5a7d3c7 100644
--- a/docs/p04-observables.html
+++ b/docs/p04-observables.html
@@ -1,4 +1,4 @@
-`deka-dom-el` — Observables and reactivity `deka-dom-el` — Observables and reactivity
Handling reactivity in UI via observables.
Using observables to manage reactivity
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.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+`deka-dom-el` — Observables and reactivity `deka-dom-el` — Observables and reactivity
Handling reactivity in UI via observables.
Using observables to manage reactivity
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.
// 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} */
diff --git a/docs/p05-scopes.html b/docs/p05-scopes.html
index 691a79d..fe7de32 100644
--- a/docs/p05-scopes.html
+++ b/docs/p05-scopes.html
@@ -1,4 +1,4 @@
-`deka-dom-el` — Scopes and components `deka-dom-el` — Scopes and components
Organizing UI into components
Using functions as UI components
For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the Garbage collection.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+`deka-dom-el` — Scopes and components `deka-dom-el` — Scopes and components
Organizing UI into components
Using functions as UI components
For state-less components we can use functions as UI components (see “Elements” page). But in real life, we may need to handle the component live-cycle and provide JavaScript the way to properly use the Garbage collection.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
import { scope, el } from "deka-dom-el";
/** @type {ddeElementAddon} */
The library therefore use scopes to provide these functionalities.
# Scopes and hosts
The host is the name for the element representing the component. This is typically element returned by function. To get reference, you can use scope.host() to applly addons just use scope.host(...<addons>).
import { el, on, scope } from "https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js";
diff --git a/docs/p06-customElement.html b/docs/p06-customElement.html
index c231a03..c6015d4 100644
--- a/docs/p06-customElement.html
+++ b/docs/p06-customElement.html
@@ -1,4 +1,4 @@
-`deka-dom-el` — Custom elements `deka-dom-el` — Custom elements
Using custom elements in combinantion with DDE
Using custom elements in combinantion with DDE
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
+`deka-dom-el` — Custom elements `deka-dom-el` — Custom elements
Using custom elements in combinantion with DDE
Using custom elements in combinantion with DDE
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-observables.js
import {
customElementRender,
customElementWithDDE,
diff --git a/docs_src/components/code.html.js b/docs_src/components/code.html.js
index bf21428..9a81953 100644
--- a/docs_src/components/code.html.js
+++ b/docs_src/components/code.html.js
@@ -54,7 +54,7 @@ function registerClientPart(page_id){
if(is_registered[page_id]) return;
document.head.append(
- el("script", { src: "https://cdn.jsdelivr.net/npm/shiki", defer: true }),
+ el("script", { src: "https://cdn.jsdelivr.net/npm/shiki@0.9", defer: true }),
);
registerClientFile(
new URL("./code.js.js", import.meta.url),