mirror of
https://github.com/jaandrle/deka-dom-el
synced 2025-07-04 13:32:14 +02:00
🔤 adds debugging
This commit is contained in:
35
docs/components/examples/signals/debugging-dom.js
Normal file
35
docs/components/examples/signals/debugging-dom.js
Normal file
@ -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
|
Reference in New Issue
Block a user