🔤 adds debugging

docs/components/examples/debugging/consoleLog.js

@@ -0,0 +1,14 @@
+// Debugging a (derived) signal with `console.log`
+import { S } from "deka-dom-el/signals";
+const name= S("Alice");
+const greeting = S(() => {
+	// log derived signals
+	const log = "Hello, " + name.get();
+	console.log(log);
+	return log;
+});
+
+// log signals in general
+S.on(greeting, value => console.log("Greeting changed to:", value));
+
+name.set("Bob"); // Should trigger computation and listener`)

docs/components/examples/debugging/debouncing.js

@@ -0,0 +1,15 @@
+import { S } from "deka-dom-el/signals";
+// Debouncing signal updates
+function debounce(func, wait) {
+	let timeout;
+	return (...args)=> {
+		clearTimeout(timeout);
+		timeout= setTimeout(() => func(...args), wait);
+	};
+}
+
+const inputSignal= S("");
+const debouncedSet= debounce(value => inputSignal.set(value), 300);
+
+// In your input handler
+inputElement.addEventListener("input", e=> debouncedSet(e.target.value));

docs/components/examples/debugging/mutations.js

@@ -0,0 +1,15 @@
+import { S } from "deka-dom-el/signals";
+// Wrong - direct mutation doesn't trigger updates
+const todos1 = S([{ text: "Learn signals", completed: false }]);
+todos1.get().push({ text: "Debug signals", completed: false }); // Won't trigger updates!
+
+// Correct - using .set() with a new array
+todos1.set([...todos1.get(), { text: "Debug signals", completed: false }]);
+
+// Better - using actions
+const todos2 = S([], {
+	add(text) {
+		this.value.push({ text, completed: false });
+	}
+});
+S.action(todos2, "add", "Debug signals");

docs/components/examples/signals/debugging-console.js

@@ -0,0 +1,20 @@
+import { S } from "deka-dom-el/signals";
+
+// Debugging a derived signal
+const name = S('Alice');
+const greeting = S(() => {
+  console.log('Computing greeting...');
+  return 'Hello, ' + name.get();
+});
+
+// Monitor the derived signal
+S.on(greeting, value => console.log('Greeting changed to:', value));
+
+// Later update the dependency
+name.set('Bob'); // Should trigger computation and listener
+
+// Console output:
+// Computing greeting...
+// Greeting changed to: Hello, Alice
+// Computing greeting...
+// Greeting changed to: Hello, Bob

docs/components/examples/signals/debugging-dom.js

@@ -0,0 +1,35 @@
+import { el, assign } from "deka-dom-el";
+import { S } from "deka-dom-el/signals";
+
+// Create a component with reactive elements
+function ReactiveCounter() {
+  const count = S(0);
+  
+  // Elements created with el() have data-dde attribute
+  const counter = el('div', { 
+    id: 'counter',
+    // This element will have __dde_reactive property
+    textContent: count 
+  });
+  
+  const incrementBtn = el('button', {
+    textContent: 'Increment',
+    onclick: () => count.set(count.get() + 1)
+  });
+  
+  // Dynamic section with __dde_signal property
+  const counterInfo = S.el(count, value => 
+    el('p', `Current count is ${value}`)
+  );
+  
+  return el('div').append(
+    counter,
+    incrementBtn,
+    counterInfo
+  );
+}
+
+// In DevTools console:
+// document.querySelectorAll('[data-dde]'); // Find all elements created with deka-dom-el
+// const counter = document.querySelector('#counter');
+// console.log(counter.__dde_reactive); // See reactive bindings