From f2ce23d9f72f0b3edb1a8668721321095c8409b7 Mon Sep 17 00:00:00 2001
From: Jan Andrle <andrle.jan@centrum.cz>
Date: Tue, 4 Mar 2025 16:46:00 +0100
Subject: [PATCH] :abc:
---
.../examples/signals/debugging-dom.js | 59 ++++++++++---------
docs/global.css.js | 1 +
docs/layout/head.html.js | 5 +-
3 files changed, 36 insertions(+), 29 deletions(-)
diff --git a/docs/components/examples/signals/debugging-dom.js b/docs/components/examples/signals/debugging-dom.js
index 9b7272e..ae95023 100644
--- a/docs/components/examples/signals/debugging-dom.js
+++ b/docs/components/examples/signals/debugging-dom.js
@@ -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";
// 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
- );
+ const count = S(0);
+ scope.host(on.connected(ev=>
+ console.log(ev.target.__dde_reactive)
+ ));
+
+ const counter = el('div', {
+ // This element will be added into the __dde_reactive property
+ textContent: count,
+ });
+
+ const incrementBtn = el('button', {
+ textContent: 'Increment',
+ onclick: () => count.set(count.get() + 1)
+ });
+
+ // Dynamic section will be added into __dde_signal property
+ const counterInfo = S.el(count, value =>
+ el('p', `Current count is ${value}`)
+ );
+
+ return el('div', { id: 'counter' }).append(
+ counter,
+ incrementBtn,
+ counterInfo
+ );
}
+document.body.append(
+ el(ReactiveCounter),
+);
// 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
\ No newline at end of file
+const counter = document.querySelector('#counter');
+setTimeout(()=> console.log(counter.__dde_reactive), 1000); // See reactive bindings
diff --git a/docs/global.css.js b/docs/global.css.js
index 27a5f74..d585aa4 100644
--- a/docs/global.css.js
+++ b/docs/global.css.js
@@ -133,6 +133,7 @@ body {
"sidebar"
"content";
min-height: 100vh;
+ margin: 0;
}
::selection {
diff --git a/docs/layout/head.html.js b/docs/layout/head.html.js
index b67073d..4556488 100644
--- a/docs/layout/head.html.js
+++ b/docs/layout/head.html.js
@@ -14,7 +14,10 @@ ${host} {
background-color: var(--primary);
color: white;
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 {