2024-05-22 21:43:49 +02:00
|
|
|
|
export const info= {
|
|
|
|
|
href: "./",
|
|
|
|
|
title: "Introduction",
|
|
|
|
|
description: "Introducing a library.",
|
|
|
|
|
};
|
2023-11-06 20:20:32 +01:00
|
|
|
|
|
2023-11-24 16:16:08 +01:00
|
|
|
|
import { el } from "deka-dom-el";
|
2024-05-22 21:43:49 +02:00
|
|
|
|
import { simplePage } from "./layout/simplePage.html.js";
|
2023-11-21 14:37:57 +01:00
|
|
|
|
import { example } from "./components/example.html.js";
|
2023-11-07 15:10:55 +01:00
|
|
|
|
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
2023-11-10 17:15:59 +01:00
|
|
|
|
export function page({ pkg, info }){
|
2023-11-07 15:10:55 +01:00
|
|
|
|
const page_id= info.id;
|
2023-11-24 16:16:08 +01:00
|
|
|
|
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"), "."
|
2023-11-17 16:15:26 +01:00
|
|
|
|
),
|
2023-11-24 16:16:08 +01:00
|
|
|
|
" ",
|
|
|
|
|
"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"), "."
|
2023-11-17 16:15:26 +01:00
|
|
|
|
),
|
2023-11-24 16:16:08 +01:00
|
|
|
|
),
|
|
|
|
|
el("p").append(
|
|
|
|
|
"Next step is providing interactivity not only for our UI templates.",
|
|
|
|
|
" ",
|
2024-05-23 22:18:19 +02:00
|
|
|
|
"We introduce signals (", el("code", "S"), ") and how them incorporate to UI templates.",
|
2023-11-24 16:16:08 +01:00
|
|
|
|
),
|
|
|
|
|
el("p").append(
|
2024-05-22 21:43:49 +02:00
|
|
|
|
"Now we will clarify how the signals are incorporated into our templates with regard ",
|
2023-11-24 16:16:08 +01:00
|
|
|
|
"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 }),
|
2023-09-26 16:02:10 +02:00
|
|
|
|
);
|
|
|
|
|
}
|