jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-04-03 04:25:53 +02:00
Code Packages Releases Activity

🔤

Browse Source
This commit is contained in:
Jan Andrle 2025-03-04 16:46:00 +01:00
parent b08f75bfb0
commit f2ce23d9f7
3 changed files with 36 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
docs/components/examples/signals/debugging-dom.js
View File

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

1
docs/global.css.js
View File

@ -133,6 +133,7 @@ body {
"sidebar" "sidebar"
"content"; "content";
min-height: 100vh; min-height: 100vh;
margin: 0;
} }
::selection { ::selection {

5
docs/layout/head.html.js
View File

@ -14,7 +14,10 @@ ${host} {
background-color: var(--primary); background-color: var(--primary);
color: white; color: white;
box-shadow: var(--shadow); box-shadow: var(--shadow);
min-height: var(--header-height); min-height: calc(var(--header-height) - 1em);
--_m: .75em;
margin: var(--_m) var(--_m) 0 var(--_m);
border-radius: var(--border-radius);
} }
${host} .header-title { ${host} .header-title {