jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-11-03 22:59:16 +01:00
Code Packages Releases Activity

⚡ bs/lint

Browse Source
This commit is contained in:
Jan Andrle
2025-03-04 17:00:14 +01:00
parent f2ce23d9f7
commit 508d93bb1a
11 changed files with 756 additions and 737 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
docs/components/examples/debugging/dom-reactive-mark.js Normal file
View File

@@ -0,0 +1,4 @@
// Example of reactive element marker
<!--<dde:mark type=\"reactive\" source=\"...\">-->
<!-- content that updates when signal changes -->
<!--</dde:mark>-->

6
docs/components/examples/signals/debugging-console.js
View File

@@ -3,8 +3,8 @@ 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();
console.log('Computing greeting...');
return 'Hello, ' + name.get();
});
// Monitor the derived signal
@@ -17,4 +17,4 @@ name.set('Bob'); // Should trigger computation and listener
// Computing greeting...
// Greeting changed to: Hello, Alice
// Computing greeting...
// Greeting changed to: Hello, Bob
// Greeting changed to: Hello, Bob

8
docs/components/examples/ssr/start.js
View File

@@ -10,10 +10,10 @@ const { el } = await register(dom);
// Use deka-dom-el normally
dom.window.document.body.append(
el("div", { className: "container" }).append(
el("h1", "Hello, SSR World!"),
el("p", "This content was rendered on the server.")
)
el("div", { className: "container" }).append(
el("h1", "Hello, SSR World!"),
el("p", "This content was rendered on the server.")
)
);
// Wait for any async operations to complete

6
docs/global.css.js
View File

@@ -10,8 +10,10 @@ styles.css`
--secondary-dark: #4a0027;
--secondary-rgb: 112, 0, 55;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono',
SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
--body-max-width: 40rem;
--sidebar-width: 20rem;

3
docs/p04-signals.html.js
View File

@@ -103,7 +103,8 @@ export function page({ pkg, info }){
el("p", t`There are two fundamental ways to make your DOM reactive with signals:`),
el("ol").append(
el("li", t`Reactive attributes: Update properties, attributes, and styles of existing elements`),
el("li", t`Reactive elements: Dynamically create or update DOM elements based on data changes (for conditions and loops)`)
el("li").append(...T`Reactive elements: Dynamically create or update DOM elements based on data changes
(for conditions and loops)`)
),
el(example, { src: fileURL("./components/examples/signals/dom-attrs.js"), page_id }),
el("p").append(...T`

7
docs/p07-debugging.html.js
View File

@@ -36,7 +36,10 @@ export function page({ pkg, info }){
el("p").append(...T`
You can also monitor signal changes by adding a listener:
`),
el(code, { content: "// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));", page_id }),
el(code, {
content:
"// Log every time the signal changes\nS.on(signal, value => console.log('Signal changed:', value));",
page_id }),
el("h4", t`Debugging derived signals`),
el("p").append(...T`
@@ -103,7 +106,7 @@ export function page({ pkg, info }){
that are automatically updated when signal values change. These elements are wrapped in special
comment nodes for debugging (to be true they are also used internaly, so please do not edit them by hand):
`),
el(code, { content: "// Example of reactive element marker\n<!--<dde:mark type=\"reactive\" source=\"...\">-->\n<!-- content that updates when signal changes -->\n<!--</dde:mark>-->", page_id }),
el(code, { src: fileURL("./components/examples/debugging/dom-reactive-mark.js"), page_id }),
el("p").append(...T`
This is particularly useful when debugging why a reactive section isn't updating as expected.
You can inspect the elements between the comment nodes to see their current state and the

2
docs/p08-ssr.html.js
View File

@@ -1,4 +1,4 @@
import { T, t } from "./utils/index.js";
import { T, t } from "./utils/index.js";
export const info= {
title: t`Server-Side Rendering (SSR)`,
description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,