mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-23 09:09:38 +01:00
37 lines
1.5 KiB
JavaScript
37 lines
1.5 KiB
JavaScript
import { simplePage } from "./layout/simplePage.html.js";
|
||
|
||
import { el } from "deka-dom-el";
|
||
import { example } from "./components/example.html.js";
|
||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||
export function page({ pkg, info }){
|
||
const page_id= info.id;
|
||
return el(simplePage, { info, pkg }).append(
|
||
el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces."),
|
||
el("p").append(
|
||
"We start with creating and modifying a static elements and end up with UI templates.",
|
||
" ",
|
||
el("i").append(
|
||
"From ", el("code", "document.createElement"), " to ", el("code", "el"), "."
|
||
),
|
||
" ",
|
||
"Then we go through the native events system and the way to include it declaratively in UI templates.",
|
||
" ",
|
||
el("i").append(
|
||
"From ", el("code", "element.addEventListener"), " to ", el("code", "on"), "."
|
||
),
|
||
),
|
||
el("p").append(
|
||
"Next step is providing interactivity not only for our UI templates.",
|
||
" ",
|
||
"We introduce observables (", el("code", "O"), ") and how them incorporate to UI templates.",
|
||
),
|
||
el("p").append(
|
||
"Now we will clarify how the observables are incorporated into our templates with regard ",
|
||
"to application performance. This is not the only reason the library uses ",
|
||
el("code", "scope"), "s. We will look at how they work in components represented ",
|
||
"in JavaScript by functions."
|
||
),
|
||
el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id }),
|
||
);
|
||
}
|