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

Compare commits

base: jaandrle:5ae6bfdd3576c0ef98f351bd1c550bacc094ee53
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha
...
compare: jaandrle:0772a382ed2d34a74cee51c63a6b6ee920d2f154
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha

3 Commits
5ae6bfdd35 ... 0772a382ed

Author SHA1 Message Date
Jan Andrle
0772a382ed
Merge 513c32eb3717cff864e397231116da3f4a275bd0 into b50f8449aab6ad8445719fa3062e086c6bd83678 2024-12-10 14:43:54 +00:00
Jan Andrle
513c32eb37
🐛 🔤 Renames Option to OptionComponent 2024-12-10 15:43:15 +01:00
Jan Andrle
6f8e8c828c
🔤 Better example in README 2024-12-10 15:41:50 +01:00
1 changed files with 26 additions and 26 deletions
Show Stats 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(OptionComponent, "🎉", isSelected),
el(OptionComponent, "🚀", isSelected),
)
);
}
function OptionComponent({ 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/