The library tries to provide pure JavaScript tool(s) to create reactive interfaces using …
# Event-driven programming (3 parts separation ≡ 3PS)
Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as a starting point.
// pseudo code!
+`deka-dom-el` — Introduction `deka-dom-el` — Introduction
Introducing a library.
The library tries to provide pure JavaScript tool(s) to create reactive interfaces using …
# Event-driven programming (3 parts separation ≡ 3PS)
Let's introduce the basic principle on which the library is built. We'll use the JavaScript listener as a starting point.
// pseudo code!
const onchage=
event=>
console.log("Reacting to the:", event); // A
diff --git a/docs/p02-elements.html b/docs/p02-elements.html
index 412eb2d..0109f67 100644
--- a/docs/p02-elements.html
+++ b/docs/p02-elements.html
@@ -1,4 +1,4 @@
-`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
+`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 7d3bdec..3d13d08 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-signals.html b/docs/p04-signals.html
index 24ced16..8548737 100644
--- a/docs/p04-signals.html
+++ b/docs/p04-signals.html
@@ -1,4 +1,4 @@
-`deka-dom-el` — Signals and reactivity `deka-dom-el` — Signals and reactivity
Handling reactivity in UI via signals.
Using signals 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, signals may be a viable approach.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
+`deka-dom-el` — Signals and reactivity `deka-dom-el` — Signals and reactivity
Handling reactivity in UI via signals.
Using signals 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, signals may be a viable approach.
// use NPM or for example https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/esm-with-signals.js
import { S, signal } from "deka-dom-el/signals";
S===signal
/** @type {ddeSignal} */
diff --git a/docs/p05-scopes.html b/docs/p05-scopes.html
index 598ef0c..843559c 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-signals.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-signals.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 "./esm-with-signals.js";
@@ -180,4 +180,4 @@ function component(){
* // UNEXPECTEDLY REMOVED!!!
* */
}
-# Mnemonic
el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function> — using component represented by functionscope.host() — get current component referencescope.host(...<addons>) — use addons to current component
# Mnemonic
el(<function>, <function-argument(s)>)[.append(...)]: <element-returned-by-function> — using component represented by functionscope.host() — get current component referencescope.host(...<addons>) — use addons to current component