jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-01 19:55: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*
```js
```javascript
document.body.append(
el("h1", "Hello World 👋"),
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))
)
)
el(HelloWorldComponent)
);
function component({ textContent, className }){
const value= S("onchange");
function HelloWorldComponent(){
const clicks= S(0);
const emoji= S("🚀");
const isSelected= el=> (el.selected= el.value===emoji());
return el().append(
el("p", { textContent, className }),
el("p", { className: [ className, "second-line" ] }).append(
"…with reactivity: ", el("em", { style: { fontWeight: "bold" }, ariaset: { live: "polite" }, textContent: value }),
el("p", {
textContent: S(() => `Hello World ${emoji().repeat(clicks())}`),
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
Creating reactive elements, components and Web components using [IDL](https://developer.mozilla.org/en-US/docs/