jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-03 04:25:53 +02:00
Code Packages Releases Activity

🔤 Better example in README

Browse Source
This commit is contained in:
Jan Andrle 2024-12-10 15:41:50 +01:00
parent 35466c201d
commit 6f8e8c828c
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
1 changed files with 26 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
README.md
View File

@ -6,38 +6,38 @@
*…use simple DOM API by default and library tools and logic when you need them* *…use simple DOM API by default and library tools and logic when you need them*
```js ```javascript
document.body.append( document.body.append(
el("h1", "Hello World 👋"), el(HelloWorldComponent)
el("p", "See some syntax examples here:"),
el("ul").append(
el("li").append(
el("a", { textContent: "Link to the library repo",
title: "Deka DOM El — GitHub",
href: "https://github.com/jaandrle/deka-dom-el" })
),
el("li").append(
"Use extended Vanilla JavaScript DOM/IDL API: ",
el("span", { textContent: "» this is a span with class=cN and data-a=A, data-b=B «",
className: "cN", dataset: { a: "A", b: "B" } })
),
el("li").append(
el(component, { textContent: "A component", className: "example" }, on("change", console.log))
)
)
); );
function component({ textContent, className }){ function HelloWorldComponent(){
const value= S("onchange"); const clicks= S(0);
const emoji= S("🚀");
const isSelected= el=> (el.selected= el.value===emoji());
return el().append( return el().append(
el("p", { textContent, className }), el("p", {
el("p", { className: [ className, "second-line" ] }).append( textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
"…with reactivity: ", el("em", { style: { fontWeight: "bold" }, ariaset: { live: "polite" }, textContent: value }), className: "example",
ariaLive: "polite", //OR ariaset: { live: "polite" },
dataset: { example: "Example" }, //OR dataExample: "Example",
}),
el("button",
{ textContent: "Fire", type: "button" },
on("click", ()=> clicks(clicks() + 1)),
on("keyup", ()=> clicks(clicks() - 2)),
), ),
el("input", { type: "text", value: value() }, on("change", event=> value(event.target.value))) el("select", {
onchange: event=> emoji(event.target.value),
}).append(
el(Option, "🎉", isSelected),
el(Option, "🚀", isSelected),
)
); );
} }
function Option({ textContent }){
return el("option", { value: textContent, textContent })
}
``` ```
# Deka DOM Elements # Deka DOM Elements
Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/ Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/