mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-10-25 12:29:30 +02:00
43 lines
1.5 KiB
JavaScript
43 lines
1.5 KiB
JavaScript
import { el } from "deka-dom-el";
|
||
import { styles, common } from "./index.css.js";
|
||
import { example, css as example_css } from "./components/example.html.js";
|
||
export const css= styles()
|
||
.include(common)
|
||
.css`
|
||
.note{
|
||
font-size: .9rem;
|
||
font-style: italic;
|
||
}
|
||
`
|
||
.include(example_css);
|
||
|
||
import { header } from "./layout/head.html.js";
|
||
/** @param {import("./types.d.ts").PageAttrs} attrs */
|
||
export function page({ pkg, info, path_target, pages, registerClientFile }){
|
||
const page_id= info.id;
|
||
return el().append(
|
||
el(header, { info, pkg, path_target, pages }),
|
||
el("main").append(
|
||
el("p", "The library tries to provide pure JavaScript tool(s) to create reactive interfaces. "),
|
||
el("p", "The main goals are:"),
|
||
el("ul").append(
|
||
el("li", "provide a small wrappers/utilities around the native JavaScript DOM"),
|
||
el("li", "keep library size around 10kB at maximum (if possible)"),
|
||
el("li", "zero dependencies (if possible)"),
|
||
el("li", "prefer a declarative/functional approach"),
|
||
el("li", "unopinionated (allow alternative methods)"),
|
||
),
|
||
el("p", { className: "note" }).append(
|
||
"It is, in fact, an reimplementation of ",
|
||
el("a", {
|
||
href: "https://github.com/jaandrle/dollar_dom_component",
|
||
title: "GitHub repository of library. Motto: Functional DOM components without JSX and virtual DOM.",
|
||
textContent: "jaandrle/dollar_dom_component"
|
||
}),
|
||
".",
|
||
),
|
||
el(example, { src: new URL("./components/examples/helloWorld.js", import.meta.url), page_id, registerClientFile }),
|
||
)
|
||
);
|
||
}
|