From 8318915d7440cbcb2bd9a8e07624927a2a6684c6 Mon Sep 17 00:00:00 2001 From: Jan Andrle Date: Wed, 31 Jan 2024 15:41:43 +0100 Subject: [PATCH] :bug: docs: use 0.9.* version of Shiky as v1 is in beta --- docs/p02-elements.html | 2 +- docs/p03-events.html | 2 +- docs/p04-observables.html | 2 +- docs/p05-scopes.html | 2 +- docs/p06-customElement.html | 2 +- docs_src/components/code.html.js | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/p02-elements.html b/docs/p02-elements.html index 661212c..c77ac98 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 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),