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

🐛 lint

Browse Source
This commit is contained in:
Jan Andrle 2025-03-13 16:24:47 +01:00
parent 9251e70015
commit 3c6cad5648
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
2 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
docs/components/examples/debugging/debouncing.js
View File

@ -25,21 +25,21 @@ function createDebouncedSignal(initialValue, delay = 300) {
// Create two signals: one for immediate updates, one for debounced values // Create two signals: one for immediate updates, one for debounced values
const immediateSignal = S(initialValue); const immediateSignal = S(initialValue);
const debouncedSignal = S(initialValue); const debouncedSignal = S(initialValue);
// Keep track of the timeout // Keep track of the timeout
let timeout = null; let timeout = null;
// Set up a listener on the immediate signal // Set up a listener on the immediate signal
S.on(immediateSignal, value => { S.on(immediateSignal, value => {
// Clear any existing timeout // Clear any existing timeout
if (timeout) clearTimeout(timeout); if (timeout) clearTimeout(timeout);
// Set a new timeout to update the debounced signal // Set a new timeout to update the debounced signal
timeout = setTimeout(() => { timeout = setTimeout(() => {
debouncedSignal.set(value); debouncedSignal.set(value);
}, delay); }, delay);
}); });
// Return an object with both signals and a setter function // Return an object with both signals and a setter function
return { return {
// The raw signal that updates immediately // The raw signal that updates immediately
@ -64,4 +64,4 @@ S.on(searchInput.debounced, value => {
}); });
// In your input handler // In your input handler
searchElement.addEventListener("input", e => searchInput.set(e.target.value)); searchElement.addEventListener("input", e => searchInput.set(e.target.value));

8
docs/p10-todomvc.html.js
View File

@ -244,7 +244,7 @@ export function page({ pkg, info }){
The derived signal automatically recalculates whenever either the todos list or the current filter changes, The derived signal automatically recalculates whenever either the todos list or the current filter changes,
ensuring the UI always shows the correct filtered todos. ensuring the UI always shows the correct filtered todos.
`), `),
el("h4", t`2. Toggle All Functionality`), el("h4", t`2. Toggle All Functionality`),
el(code, { content: ` el(code, { content: `
/** @type {ddeElementAddon<HTMLInputElement>} */ /** @type {ddeElementAddon<HTMLInputElement>} */
@ -252,7 +252,7 @@ export function page({ pkg, info }){
const checked = /** @type {HTMLInputElement} */ (event.target).checked; const checked = /** @type {HTMLInputElement} */ (event.target).checked;
S.action(todosS, "completeAll", checked); S.action(todosS, "completeAll", checked);
}); });
// Using the toggle-all functionality in the UI // Using the toggle-all functionality in the UI
el("input", { el("input", {
id: "toggle-all", id: "toggle-all",
@ -261,9 +261,9 @@ export function page({ pkg, info }){
}, onToggleAll), }, onToggleAll),
el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }), el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }),
`, page_id }), `, page_id }),
el("p").append(T` el("p").append(T`
The "toggle all" checkbox allows users to mark all todos as completed or active. When the checkbox The "toggle all" checkbox allows users to mark all todos as completed or active. When the checkbox
is toggled, it calls the ${el("code", "completeAll")} action on the todos signal, passing the current is toggled, it calls the ${el("code", "completeAll")} action on the todos signal, passing the current
checked state. This is a good example of how signals and actions can be used to manage application checked state. This is a good example of how signals and actions can be used to manage application
state in a clean, declarative way. state in a clean, declarative way.