mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-01 04:12:14 +02:00
⚡ dde and docs improvements (#27)
* ⚡ 🎉 * ⚡ wip * 🔤 * ⚡ wip * ⚡ wip * ⚡ Refatc signals to .get/.set syntax #26 * 🐛 Better types for on* * 🔤 * 🔤 * 🐛 coumputed signal * 🔤 ⚡ Docs UI/UX * ⚡ 🔤 UI enhancements * ⚡ (bs) (un)min * 🔤 adds debugging * 🔤 ssr * 🔤 * ⚡ bs/lint * 🔤 * 🔤 UI * 🔤 updates texts * 🔤UI * ⚡ dispatch * 🔤 events * 🔤 elements * 🔤 intro * 🐛 fixes completitions for el with components * 🐛 wrong file(s) in git * 🔤 logo * 🐛 🔤 types 3ps * 🔤 ui/ux * 🔤 * 🔤 * 🔤 scopes * 🔤 * 🔤 ui/ux * 🔤 * ⚡ issignal * 🔤 improvemens * ⚡ irelands * 🔤 UI/UX/wording * 🐛 npx-hint [Scrollable region must have keyboard access | Axe Rules | Deque University | Deque Systems](https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI) * 🔤 logos * ⚡ better? dts builds * Update README.md
This commit is contained in:
15
docs/components/examples/debugging/consoleLog.js
Normal file
15
docs/components/examples/debugging/consoleLog.js
Normal file
@ -0,0 +1,15 @@
|
||||
// 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);
|
||||
console.log(name.valueOf());
|
||||
return log;
|
||||
});
|
||||
|
||||
// log signals in general
|
||||
S.on(greeting, value => console.log("Greeting changed to:", value));
|
||||
|
||||
name.set("Bob"); // Should trigger computation and listener`)
|
15
docs/components/examples/debugging/debouncing.js
Normal file
15
docs/components/examples/debugging/debouncing.js
Normal file
@ -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));
|
4
docs/components/examples/debugging/dom-reactive-mark.js
Normal file
4
docs/components/examples/debugging/dom-reactive-mark.js
Normal file
@ -0,0 +1,4 @@
|
||||
// Example of reactive element marker
|
||||
<!--<dde:mark type=\"reactive\" source=\"...\">-->
|
||||
<!-- content that updates when signal changes -->
|
||||
<!--</dde:mark>-->
|
15
docs/components/examples/debugging/mutations.js
Normal file
15
docs/components/examples/debugging/mutations.js
Normal file
@ -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");
|
Reference in New Issue
Block a user