diff --git a/docs/components/examples/debugging/debouncing.js b/docs/components/examples/debugging/debouncing.js index 17ed6c0..9ceaae3 100644 --- a/docs/components/examples/debugging/debouncing.js +++ b/docs/components/examples/debugging/debouncing.js @@ -25,21 +25,21 @@ function createDebouncedSignal(initialValue, delay = 300) { // Create two signals: one for immediate updates, one for debounced values const immediateSignal = S(initialValue); const debouncedSignal = S(initialValue); - + // Keep track of the timeout let timeout = null; - + // Set up a listener on the immediate signal S.on(immediateSignal, value => { // Clear any existing timeout if (timeout) clearTimeout(timeout); - + // Set a new timeout to update the debounced signal timeout = setTimeout(() => { debouncedSignal.set(value); }, delay); }); - + // Return an object with both signals and a setter function return { // The raw signal that updates immediately @@ -64,4 +64,4 @@ S.on(searchInput.debounced, value => { }); // In your input handler -searchElement.addEventListener("input", e => searchInput.set(e.target.value)); \ No newline at end of file +searchElement.addEventListener("input", e => searchInput.set(e.target.value)); diff --git a/docs/p10-todomvc.html.js b/docs/p10-todomvc.html.js index 9165aa3..a4131b2 100644 --- a/docs/p10-todomvc.html.js +++ b/docs/p10-todomvc.html.js @@ -244,7 +244,7 @@ export function page({ pkg, info }){ The derived signal automatically recalculates whenever either the todos list or the current filter changes, ensuring the UI always shows the correct filtered todos. `), - + el("h4", t`2. Toggle All Functionality`), el(code, { content: ` /** @type {ddeElementAddon} */ @@ -252,7 +252,7 @@ export function page({ pkg, info }){ const checked = /** @type {HTMLInputElement} */ (event.target).checked; S.action(todosS, "completeAll", checked); }); - + // Using the toggle-all functionality in the UI el("input", { id: "toggle-all", @@ -261,9 +261,9 @@ export function page({ pkg, info }){ }, onToggleAll), el("label", { htmlFor: "toggle-all", title: "Mark all as complete" }), `, page_id }), - + 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 checked state. This is a good example of how signals and actions can be used to manage application state in a clean, declarative way.