jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00
Code Packages Releases Activity

⚡ on.host

Browse Source
This commit is contained in:
Jan Andrle
2025-03-14 13:49:01 +01:00
parent 36fab5276d
commit ba13055d7d
3 changed files with 32 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -31,7 +31,7 @@ function EmojiCounter({ initial }) {
el("p", { el("p", {
className: "output", className: "output",
textContent: S(() => textContent: S(() =>
`Hello World ${emoji.get().repeat(clicks.get())}`), `Hello World ${emoji.get().repeat(count.get())}`),
}), }),
// 🎮 Controls - Update state on events // 🎮 Controls - Update state on events
@ -39,12 +39,12 @@ function EmojiCounter({ initial }) {
on("click", () => count.set(count.get() + 1)) on("click", () => count.set(count.get() + 1))
), ),
el("select", null, el("select", null, on.host(el=> el.value= initial),
on("change", e => emoji.set(e.target.value)) on("change", e => emoji.set(e.target.value))
).append( ).append(
el(Option, "🎉", isSelected), el(Option, "🎉"),
el(Option, "🚀", isSelected), el(Option, "🚀"),
el(Option, "💖", isSelected), el(Option, "💖"),
) )
); );
} }

29
docs/components/examples/events/live-cycle.js
View File

@ -1,13 +1,28 @@
import { el, on } from "deka-dom-el"; import { el, on } from "deka-dom-el";
const paragraph= el("p", "See lifecycle events in console.", function allLifecycleEvents(){
el=> log({ type: "dde:created", detail: el }), return el("form", null,
on.connected(log), el=> log({ type: "dde:created", detail: el }),
on.disconnected(log), on.connected(log),
); on.disconnected(log),
).append(
el("select", { id: "country" }, on.host(select => {
// This runs when the host (select) is ready with all its options
select.value = "cz"; // Pre-select Czechia
log({ type: "dde:on.host", detail: select });
})).append(
el("option", { value: "au", textContent: "Australia" }),
el("option", { value: "ca", textContent: "Canada" }),
el("option", { value: "cz", textContent: "Czechia" }),
),
el("p", "See lifecycle events in console."),
);
}
document.body.append( document.body.append(
paragraph, el(allLifecycleEvents),
el("button", "Remove", on("click", ()=> paragraph.remove())) el("button", "Remove Element", on("click", function(){
this.previousSibling.remove();
}))
); );
/** @param {Partial<CustomEvent>} event */ /** @param {Partial<CustomEvent>} event */

7
docs/p03-events.html.js
View File

@ -155,8 +155,8 @@ export function page({ pkg, info }){
You can think of an Addon as an “oncreate” event handler. You can think of an Addon as an “oncreate” event handler.
`), `),
el("p").append(T` el("p").append(T`
dd<el> provides two additional lifecycle events that correspond to ${el("a", { textContent: dd<el> provides three additional lifecycle events that correspond to ${el("a", { textContent:
"custom element", ...references.mdn_customElements })} lifecycle callbacks: "custom element", ...references.mdn_customElements })} lifecycle callbacks and component patterns:
`), `),
el("div", { className: "function-table" }).append( el("div", { className: "function-table" }).append(
el("dl").append( el("dl").append(
@ -165,6 +165,9 @@ export function page({ pkg, info }){
el("dt", t`on.disconnected(callback)`), el("dt", t`on.disconnected(callback)`),
el("dd", t`Fires when the element is removed from the DOM`), el("dd", t`Fires when the element is removed from the DOM`),
el("dt", t`on.host(callback, host?)`),
el("dd", t`Fires when the host element is "ready" and allows applying properties based on the fully built template`),
) )
), ),
el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }), el(example, { src: fileURL("./components/examples/events/live-cycle.js"), page_id }),