🔤

docs/components/examples/debugging/debouncing.js

@@ -1,5 +1,6 @@
 import { S } from "deka-dom-el/signals";
-// Debouncing signal updates
+
+// ===== Approach 1: Traditional debouncing with utility function =====
 function debounce(func, wait) {
 	let timeout;
 	return (...args)=> {
@@ -8,8 +9,59 @@ function debounce(func, wait) {
 	};
 }
 
-const inputSignal= S("");
-const debouncedSet= debounce(value => inputSignal.set(value), 300);
+const inputSignal = S("");
+const debouncedSet = debounce(value => inputSignal.set(value), 300);
 
 // In your input handler
-inputElement.addEventListener("input", e=> debouncedSet(e.target.value));
+inputElement.addEventListener("input", e => debouncedSet(e.target.value));
+
+// ===== Approach 2: Signal debouncing utility =====
+/**
+ * Creates a debounced signal that only updates after delay
+ * @param {any} initialValue Initial signal value
+ * @param {number} delay Debounce delay in ms
+ */
+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
+		raw: immediateSignal,
+		// The debounced signal that only updates after delay
+		debounced: debouncedSignal,
+		// Setter function to update the immediate signal
+		set: value => immediateSignal.set(value)
+	};
+}
+
+// Usage example
+const searchInput = createDebouncedSignal("", 300);
+
+// Log immediate changes for demonstration
+S.on(searchInput.raw, value => console.log("Input changed to:", value));
+
+// Only perform expensive operations on the debounced value
+S.on(searchInput.debounced, value => {
+	console.log("Performing search with:", value);
+	// Expensive operation would go here
+});
+
+// In your input handler
+searchElement.addEventListener("input", e => searchInput.set(e.target.value));

docs/components/examples/events/live-cycle.js

@@ -7,8 +7,6 @@ const paragraph= el("p", "See lifecycle events in console.",
 
 document.body.append(
 	paragraph,
-	el("button", "Update attribute", on("click", ()=> paragraph.setAttribute("test", Math.random().toString()))),
-	" ",
 	el("button", "Remove", on("click", ()=> paragraph.remove()))
 );
 

docs/components/examples/signals/actions-todos.js

@@ -7,7 +7,7 @@ const todos= S([], {
 		const removed= this.value.pop();
 		if(removed) S.clear(removed);
 	},
-	[S.symbols.onclear](){ // this covers `O.clear(todos)`
+	[S.symbols.onclear](){ // this covers `S.clear(todos)`
 		S.clear(...this.value);
 	}
 });

docs/components/mnemonic/signals-init.js

@@ -14,10 +14,6 @@ export function mnemonic(){
 			el("code", "S.on(<signal>, <listener>[, <options>])"),
 			" — listen to the signal value changes",
 		),
-		el("li").append(
-			el("code", "S.clear(...<signals>)"),
-			" — off and clear signals",
-		),
 		el("li").append(
 			el("code", "S(<value>, <actions>)"),
 			" — signal: pattern to create complex reactive objects/arrays",
@@ -29,6 +25,11 @@ export function mnemonic(){
 		el("li").append(
 			el("code", "S.el(<signal>, <function-returning-dom>)"),
 			" — render partial dom structure (template) based on the current signal value",
-		)
+		),
+		el("li").append(
+			el("code", "S.clear(...<signals>)"),
+			" — off and clear signals (most of the time it is not needed as reactive ",
+			"attributes and elements are cleared automatically)",
+		),
 	);
 }