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

🔤 UI

Browse Source
This commit is contained in:
Jan Andrle 2025-03-05 10:14:09 +01:00
parent 1b0312f6bd
commit 209fa49dee
7 changed files with 95 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/components/code.html.js
View File

@ -31,7 +31,7 @@ ${host} {
overflow: auto; overflow: auto;
border-radius: var(--border-radius); border-radius: var(--border-radius);
font-family: var(--font-mono); font-family: var(--font-mono);
font-size: 0.8rem; font-size: .85rem;
line-height: 1.5; line-height: 1.5;
position: relative; position: relative;
margin-block: 1rem; margin-block: 1rem;

2
docs/components/example.html.js
View File

@ -19,7 +19,7 @@ ${host} .runtime {
.CodeMirror { .CodeMirror {
height: 100% !important; height: 100% !important;
font-family: var(--font-mono) !important; font-family: var(--font-mono) !important;
font-size: 0.8rem !important; font-size: .85rem !important;
line-height: 1.5 !important; line-height: 1.5 !important;
} }

102
docs/global.css.js
View File

@ -1,14 +1,14 @@
import { styles } from "./ssr.js"; import { styles } from "./ssr.js";
styles.css` styles.css`
:root { :root {
--primary: #b71c1c; --primary: hsl(0, 74%, 42%);
--primary-light: #f05545; --primary-light: hsl(5, 87%, 61%);
--primary-dark: #7f0000; --primary-dark: hsl(0, 100%, 25%);
--primary-rgb: 183, 28, 28; --primary-hs: 0, 74%;
--secondary: #700037; --secondary: hsl(330, 100%, 22%);
--secondary-light: #ae1357; --secondary-light: hsl(339, 80%, 38%);
--secondary-dark: #4a0027; --secondary-dark: hsl(328, 100%, 15%);
--secondary-rgb: 112, 0, 55; --secondary-hs: 330, 100%;
--font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', --font-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
@ -20,50 +20,49 @@ styles.css`
--header-height: 4rem; --header-height: 4rem;
--border-radius: 0.375rem; --border-radius: 0.375rem;
--bg: #ffffff; --bg: hsl(0, 0%, 100%);
--bg-sidebar: #fff5f5; --bg-sidebar: hsl(0, 100%, 98%);
--text: #1a1313; --text: hsl(0, 16%, 15%);
--text-light: #555050; --text-light: hsl(0, 4%, 33%);
--code-bg: #f9f2f2; --code-bg: hsl(0, 39%, 97%);
--code-text: #9a0000; --code-text: hsl(0, 100%, 30%);
--border: #d8c0c0; --border: hsl(0, 32%, 80%);
--selection: rgba(183, 28, 28, 0.15); --selection: hsl(var(--primary-hs), 90%);
--marked: #b71c1c; --marked: var(--primary);
--accent: var(--secondary); --accent: var(--secondary);
--shadow: 0 2px 6px rgba(0, 0, 0, 0.15); --shadow: 0 2px 6px hsla(0, 0%, 0%, 0.15);
--shadow-sm: 0 2px 4px hsla(0, 0%, 0%, 0.15);
--link-color: #9a0000;
--link-hover: #7f0000; --link-color: hsl(0, 100%, 30%);
--button-text: #ffffff; --link-hover: hsl(0, 100%, 25%);
--button-text: hsl(0, 0%, 100%);
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
--bg: #121212; --bg: hsl(0, 0%, 7%);
--bg-sidebar: #1a1212; --bg-sidebar: hsl(0, 9%, 9%);
--text: #ffffff; --text: hsl(0, 0%, 100%);
--text-light: #cccccc; --text-light: hsl(0, 0%, 80%);
--code-bg: #2c2020; --code-bg: hsl(0, 18%, 15%);
--code-text: #ff9e80; --code-text: hsl(20, 100%, 75%);
--border: #4d3939; --border: hsl(0, 14%, 27%);
--selection: rgba(255, 99, 71, 0.25); --selection: hsla(9, 100%, 64%, 0.25);
--primary: #b74141; --primary: hsl(0, 48%, 49%);
--primary-light: #ff867f; --primary-light: hsl(5, 100%, 75%);
--primary-dark: #c62828; --primary-dark: hsl(0, 67%, 47%);
--secondary: #f02b47; --secondary: hsl(350, 87%, 55%);
--secondary-light: #ff6090; --secondary-light: hsl(341, 100%, 69%);
--secondary-dark: #b0003a; --secondary-dark: hsl(340, 100%, 35%);
--accent: var(--secondary); --accent: var(--secondary);
--link-color: #ff5252; --link-color: hsl(0, 100%, 66%);
--link-hover: #ff867f; --link-hover: hsl(5, 100%, 75%);
--button-text: #ffffff; --button-text: hsl(0, 0%, 100%);
--nav-current-bg: #aa2222; --primary-hs: 0, 48%;
--nav-current-text: #ffffff; --secondary-hs: 350, 87%;
--primary-rgb: 255, 82, 82;
--secondary-rgb: 233, 30, 99;
} }
} }
@ -78,7 +77,7 @@ html {
/* Accessibility improvements */ /* Accessibility improvements */
:focus { :focus {
outline: 3px solid rgba(63, 81, 181, 0.5); outline: 3px solid hsl(231, 48%, 70%);
outline-offset: 2px; outline-offset: 2px;
} }
@ -87,7 +86,7 @@ html {
} }
:focus-visible { :focus-visible {
outline: 3px solid rgba(63, 81, 181, 0.5); outline: 3px solid hsl(231, 48%, 70%);
outline-offset: 2px; outline-offset: 2px;
} }
@ -127,7 +126,7 @@ body {
background-color: var(--bg); background-color: var(--bg);
color: var(--text); color: var(--text);
line-height: 1.6; line-height: 1.6;
font-size: 1rem; font-size: 1.05rem;
display: grid; display: grid;
grid-template-columns: 100%; grid-template-columns: 100%;
grid-template-areas: grid-template-areas:
@ -342,20 +341,17 @@ h3:hover .heading-anchor {
} }
.note { .note {
background-color: rgba(63, 81, 181, 0.08);
border-left: 4px solid var(--primary); border-left: 4px solid var(--primary);
border-radius: 0 var(--border-radius) var(--border-radius) 0; border-radius: 0 var(--border-radius) var(--border-radius) 0;
} }
.tip { .tip {
background-color: rgba(46, 204, 113, 0.08); border-left: 4px solid hsl(145, 63%, 49%);
border-left: 4px solid #2ecc71;
border-radius: 0 var(--border-radius) var(--border-radius) 0; border-radius: 0 var(--border-radius) var(--border-radius) 0;
} }
.warning { .warning {
background-color: rgba(241, 196, 15, 0.08); border-left: 4px solid hsl(48, 89%, 50%);
border-left: 4px solid #f1c40f;
border-radius: 0 var(--border-radius) var(--border-radius) 0; border-radius: 0 var(--border-radius) var(--border-radius) 0;
} }
@ -372,12 +368,12 @@ h3:hover .heading-anchor {
.tip::before { .tip::before {
content: "Tip"; content: "Tip";
color: #2ecc71; color: hsl(145, 63%, 49%);
} }
.warning::before { .warning::before {
content: "Warning"; content: "Warning";
color: #f1c40f; color: hsl(48, 89%, 50%);
} }
/* Prev/Next buttons */ /* Prev/Next buttons */

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

@ -37,7 +37,7 @@ ${host} h1 {
${host} .version-badge { ${host} .version-badge {
font-size: 0.75rem; font-size: 0.75rem;
background-color: rgba(150, 150, 150, 0.2); background-color: hsla(0, 0%, 59%, 0.2);
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
} }
@ -57,13 +57,13 @@ ${host} .github-link {
font-size: 0.875rem; font-size: 0.875rem;
padding: 0.375rem 0.75rem; padding: 0.375rem 0.75rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
background-color: rgba(0, 0, 0, 0.2); background-color: hsla(0, 0%, 0%, 0.2);
text-decoration: none; text-decoration: none;
transition: background-color 0.2s; transition: background-color 0.2s;
} }
${host} .github-link:hover { ${host} .github-link:hover {
background-color: rgba(0, 0, 0, 0.3); background-color: hsla(0, 0%, 0%, 0.3);
text-decoration: none; text-decoration: none;
} }
@ -85,39 +85,26 @@ ${host_nav} a {
padding: 0.625rem 0.75rem; padding: 0.625rem 0.75rem;
border-radius: var(--border-radius); border-radius: var(--border-radius);
color: var(--text); color: var(--text);
text-decoration: none; transition: background-color 0.1s ease, color 0.1s ease, transform 0.1s ease, box-shadow 0.1s ease;
transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
line-height: 1.2; line-height: 1.2;
} }
${host_nav} a:hover {
background-color: rgba(var(--primary-rgb), 0.08); /* Using CSS variables for better theming */
text-decoration: none;
transform: translateY(-1px);
color: var(--primary);
}
${host_nav} a.current, ${host_nav} a.current,
${host_nav} a[aria-current=page] { ${host_nav} a[aria-current=page] {
background-color: var(--nav-current-bg, var(--primary-dark)); background-color: hsl(var(--primary-hs), 40%);
color: var(--nav-current-text, white); color: whitesmoke;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25); box-shadow: var(--shadow);
} }
${host_nav} a.current:hover, ${host_nav} a:hover {
${host_nav} a[aria-current=page]:hover { background-color: hsl(var(--primary-hs), 45%);
background-color: var(--primary); color: whitesmoke;
color: white;
transform: translateY(-1px); transform: translateY(-1px);
} }
${host_nav} a .nav-number { ${host_nav} a .nav-number {
display: inline-block; color: rgb(from currentColor r g b / .75);
width: 1.5rem;
text-align: right;
margin-right: 0.5rem;
opacity: 0.7;
} }
${host_nav} a:first-child { ${host_nav} a:first-child {
@ -172,11 +159,6 @@ export function header({ info: { href, title, description }, pkg }){
head({ title: pageTitle, description, pkg }) head({ title: pageTitle, description, pkg })
); );
// Add theme color meta tag
document.head.append(
el("meta", { name: "theme-color", content: "#3f51b5" })
);
return el().append( return el().append(
// Header section with accessibility support // Header section with accessibility support
el("header", { role: "banner", className: header.name }).append( el("header", { role: "banner", className: header.name }).append(
@ -225,7 +207,7 @@ function nav({ href }){
el("span", { el("span", {
className: "nav-number", className: "nav-number",
"aria-hidden": "true", "aria-hidden": "true",
textContent: `${i+1}.` textContent: `${i+1}. `
}), }),
p.title p.title
); );

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

@ -48,7 +48,7 @@ export function page({ pkg, info }){
Signals provide a simple yet powerful way to create reactive applications with DDE. They handle the Signals provide a simple yet powerful way to create reactive applications with DDE. They handle the
fundamental challenge of keeping your UI in sync with changing data in a declarative, efficient way. fundamental challenge of keeping your UI in sync with changing data in a declarative, efficient way.
`), `),
el("div", { class: "dde-callout" }).append( el("div", { class: "callout" }).append(
el("h4", t`What Makes Signals Special?`), el("h4", t`What Makes Signals Special?`),
el("ul").append( el("ul").append(
el("li", t`Fine-grained reactivity without complex state management`), el("li", t`Fine-grained reactivity without complex state management`),
@ -66,7 +66,7 @@ export function page({ pkg, info }){
Signals organize your code into three distinct parts, following the Signals organize your code into three distinct parts, following the
${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}: ${el("a", { textContent: t`3PS principle`, href: "./#h-event-driven-programming--parts-separation--ps" })}:
`), `),
el("div", { class: "dde-signal-diagram" }).append( el("div", { class: "signal-diagram" }).append(
el("div", { class: "signal-part" }).append( el("div", { class: "signal-part" }).append(
el("h4", t`α: Create Signal`), el("h4", t`α: Create Signal`),
el(code, { content: "const count = S(0);", page_id }), el(code, { content: "const count = S(0);", page_id }),
@ -85,7 +85,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/signals/signals.js"), page_id }), el(example, { src: fileURL("./components/examples/signals/signals.js"), page_id }),
el("div", { class: "dde-note" }).append( el("div", { class: "note" }).append(
el("p").append(...T` el("p").append(...T`
Signals implement the ${el("a", { textContent: t`Publish–subscribe pattern`, ...references.wiki_pubsub })}, Signals implement the ${el("a", { textContent: t`Publish–subscribe pattern`, ...references.wiki_pubsub })},
a form of ${el("a", { textContent: t`Event-driven programming`, ...references.wiki_event_driven })}. a form of ${el("a", { textContent: t`Event-driven programming`, ...references.wiki_event_driven })}.
@ -95,7 +95,7 @@ export function page({ pkg, info }){
), ),
el(h3, t`Signal Essentials: Core API`), el(h3, t`Signal Essentials: Core API`),
el("div", { class: "dde-function-table" }).append( el("div", { class: "function-table" }).append(
el("dl").append( el("dl").append(
el("dt", t`Creating a Signal`), el("dt", t`Creating a Signal`),
el("dd", t`S(initialValue) → creates a signal with the given value`), el("dd", t`S(initialValue) → creates a signal with the given value`),
@ -136,7 +136,7 @@ export function page({ pkg, info }){
When working with objects, arrays, or other complex data structures, Signal Actions provide When working with objects, arrays, or other complex data structures, Signal Actions provide
a structured way to modify state while maintaining reactivity. a structured way to modify state while maintaining reactivity.
`), `),
el("div", { class: "dde-illustration" }).append( el("div", { class: "illustration" }).append(
el("h4", t`Actions vs. Direct Mutation`), el("h4", t`Actions vs. Direct Mutation`),
el("div", { class: "comparison" }).append( el("div", { class: "comparison" }).append(
el("div", { class: "bad-practice" }).append( el("div", { class: "bad-practice" }).append(
@ -177,7 +177,7 @@ S.action(todos, "add", "New todo");`, page_id })
`), `),
el(example, { src: fileURL("./components/examples/signals/actions-todos.js"), page_id }), el(example, { src: fileURL("./components/examples/signals/actions-todos.js"), page_id }),
el("div", { class: "dde-tip" }).append( el("div", { class: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "Special Action Methods")}: Signal actions can implement special lifecycle hooks: ${el("strong", "Special Action Methods")}: Signal actions can implement special lifecycle hooks:
`), `),
@ -193,7 +193,7 @@ S.action(todos, "add", "New todo");`, page_id })
Signals really shine when connected to your UI. DDE provides several ways to bind signals to DOM elements: Signals really shine when connected to your UI. DDE provides several ways to bind signals to DOM elements:
`), `),
el("div", { class: "dde-tabs" }).append( el("div", { class: "tabs" }).append(
el("div", { class: "tab", "data-tab": "attributes" }).append( el("div", { class: "tab", "data-tab": "attributes" }).append(
el("h4", t`Reactive Attributes`), el("h4", t`Reactive Attributes`),
el("p", t`Bind signal values directly to element attributes, properties, or styles:`), el("p", t`Bind signal values directly to element attributes, properties, or styles:`),
@ -263,7 +263,7 @@ S.action(items, "push", "Dragonfruit"); // List updates automatically`, page_id
`) `)
), ),
el("div", { class: "dde-troubleshooting" }).append( el("div", { class: "troubleshooting" }).append(
el("h4", t`Common Signal Pitfalls`), el("h4", t`Common Signal Pitfalls`),
el("dl").append( el("dl").append(
el("dt", t`UI not updating when array/object changes`), el("dt", t`UI not updating when array/object changes`),

24
docs/p05-scopes.html.js
View File

@ -33,7 +33,7 @@ export function page({ pkg, info }){
Scopes provide a structured way to organize your UI code into reusable components that properly Scopes provide a structured way to organize your UI code into reusable components that properly
manage their lifecycle, handle cleanup, and maintain clear boundaries between different parts of your application. manage their lifecycle, handle cleanup, and maintain clear boundaries between different parts of your application.
`), `),
el("div", { class: "dde-callout" }).append( el("div", { className: "callout" }).append(
el("h4", t`Why Use Scopes?`), el("h4", t`Why Use Scopes?`),
el("ul").append( el("ul").append(
el("li", t`Automatic resource cleanup when components are removed from DOM`), el("li", t`Automatic resource cleanup when components are removed from DOM`),
@ -46,7 +46,7 @@ export function page({ pkg, info }){
el(code, { src: fileURL("./components/examples/scopes/intro.js"), page_id }), el(code, { src: fileURL("./components/examples/scopes/intro.js"), page_id }),
el(h3, t`Understanding Host Elements and Scopes`), el(h3, t`Understanding Host Elements and Scopes`),
el("div", { class: "dde-illustration" }).append( el("div", { className: "illustration" }).append(
el("h4", t`Component Anatomy`), el("h4", t`Component Anatomy`),
el("pre").append(el("code", ` el("pre").append(el("code", `
┌─────────────────────────────────┐ ┌─────────────────────────────────┐
@ -77,7 +77,7 @@ export function page({ pkg, info }){
The ${el("strong", "host element")} is the root element of your component - typically the element returned The ${el("strong", "host element")} is the root element of your component - typically the element returned
by your component function. It serves as the identity of your component in the DOM. by your component function. It serves as the identity of your component in the DOM.
`), `),
el("div", { class: "dde-function-table" }).append( el("div", { className: "function-table" }).append(
el("h4", t`scope.host()`), el("h4", t`scope.host()`),
el("dl").append( el("dl").append(
el("dt", t`When called with no arguments`), el("dt", t`When called with no arguments`),
@ -89,7 +89,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/scopes/scopes-and-hosts.js"), page_id }), el(example, { src: fileURL("./components/examples/scopes/scopes-and-hosts.js"), page_id }),
el("div", { class: "dde-tip" }).append( el("div", { className: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "Best Practice:")} Always capture the host reference at the beginning of your component function ${el("strong", "Best Practice:")} Always capture the host reference at the beginning of your component function
using ${el("code", "const { host } = scope")} to avoid scope-related issues, especially with asynchronous code. using ${el("code", "const { host } = scope")} to avoid scope-related issues, especially with asynchronous code.
@ -111,7 +111,7 @@ export function page({ pkg, info }){
el("li", t`You need private methods and properties for your component`), el("li", t`You need private methods and properties for your component`),
el("li", t`You're transitioning from another class-based component system`) el("li", t`You're transitioning from another class-based component system`)
), ),
el("div", { class: "dde-tip" }).append( el("div", { className: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "Note:")} Even with class-based components, follow the best practice of storing the host reference ${el("strong", "Note:")} Even with class-based components, follow the best practice of storing the host reference
early in your component code. This ensures proper access to the host throughout the component's lifecycle. early in your component code. This ensures proper access to the host throughout the component's lifecycle.
@ -124,7 +124,7 @@ export function page({ pkg, info }){
One of the most powerful features of scopes is automatic cleanup when components are removed from the DOM. One of the most powerful features of scopes is automatic cleanup when components are removed from the DOM.
This prevents memory leaks and ensures resources are properly released. This prevents memory leaks and ensures resources are properly released.
`), `),
el("div", { class: "dde-illustration" }).append( el("div", { className: "illustration" }).append(
el("h4", t`Lifecycle Flow`), el("h4", t`Lifecycle Flow`),
el("pre").append(el("code", ` el("pre").append(el("code", `
1. Component created → scope established 1. Component created → scope established
@ -139,7 +139,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/scopes/cleaning.js"), page_id }), el(example, { src: fileURL("./components/examples/scopes/cleaning.js"), page_id }),
el("div", { class: "dde-note" }).append( el("div", { className: "note" }).append(
el("p").append(...T` el("p").append(...T`
In this example, when you click "Remove", the component is removed from the DOM, and all its associated In this example, when you click "Remove", the component is removed from the DOM, and all its associated
resources are automatically cleaned up, including the signal subscription that updates the text content. resources are automatically cleaned up, including the signal subscription that updates the text content.
@ -152,8 +152,8 @@ export function page({ pkg, info }){
Scopes work best with a declarative approach to UI building, especially when combined Scopes work best with a declarative approach to UI building, especially when combined
with ${el("a", { textContent: "signals", ...references.signals })} for state management. with ${el("a", { textContent: "signals", ...references.signals })} for state management.
`), `),
el("div", { class: "dde-tabs" }).append( el("div", { className: "tabs" }).append(
el("div", { class: "tab", "data-tab": "declarative" }).append( el("div", { className: "tab", "data-tab": "declarative" }).append(
el("h4", t`✅ Declarative Approach`), el("h4", t`✅ Declarative Approach`),
el("p", t`Define what your UI should look like based on state:`), el("p", t`Define what your UI should look like based on state:`),
el("pre").append(el("code", `function Counter() { el("pre").append(el("code", `function Counter() {
@ -175,7 +175,7 @@ export function page({ pkg, info }){
); );
}`)) }`))
), ),
el("div", { class: "tab", "data-tab": "imperative" }).append( el("div", { className: "tab", "data-tab": "imperative" }).append(
el("h4", t`⚠️ Imperative Approach`), el("h4", t`⚠️ Imperative Approach`),
el("p", t`Manually update the DOM in response to events:`), el("p", t`Manually update the DOM in response to events:`),
el("pre").append(el("code", `function Counter() { el("pre").append(el("code", `function Counter() {
@ -203,7 +203,7 @@ export function page({ pkg, info }){
el(code, { src: fileURL("./components/examples/scopes/declarative.js"), page_id }), el(code, { src: fileURL("./components/examples/scopes/declarative.js"), page_id }),
el("div", { class: "dde-note" }).append( el("div", { className: "note" }).append(
el("p").append(...T` el("p").append(...T`
While DDE supports both declarative and imperative approaches, the declarative style is recommended While DDE supports both declarative and imperative approaches, the declarative style is recommended
as it leads to more maintainable code with fewer opportunities for bugs. Signals handle the complexity as it leads to more maintainable code with fewer opportunities for bugs. Signals handle the complexity
@ -231,7 +231,7 @@ export function page({ pkg, info }){
`) `)
), ),
el("div", { class: "dde-troubleshooting" }).append( el("div", { className: "troubleshooting" }).append(
el("h4", t`Common Scope Pitfalls`), el("h4", t`Common Scope Pitfalls`),
el("dl").append( el("dl").append(
el("dt", t`Losing host reference in async code`), el("dt", t`Losing host reference in async code`),

24
docs/p06-customElement.html.js
View File

@ -59,7 +59,7 @@ export function page({ pkg, info }){
to create reusable, encapsulated custom elements with all the benefits of DDE's declarative DOM to create reusable, encapsulated custom elements with all the benefits of DDE's declarative DOM
construction and reactivity system. construction and reactivity system.
`), `),
el("div", { class: "dde-callout" }).append( el("div", { className: "callout" }).append(
el("h4", t`Why Combine DDE with Web Components?`), el("h4", t`Why Combine DDE with Web Components?`),
el("ul").append( el("ul").append(
el("li", t`Declarative DOM creation within your components`), el("li", t`Declarative DOM creation within your components`),
@ -92,7 +92,7 @@ export function page({ pkg, info }){
`), `),
el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }), el(code, { src: fileURL("./components/examples/customElement/native-basic.js"), page_id }),
el("div", { class: "dde-note" }).append( el("div", { className: "note" }).append(
el("p").append(...T` el("p").append(...T`
For complete information on Web Components, see the For complete information on Web Components, see the
${el("a", references.mdn_custom_elements).append(el("strong", t`MDN documentation`))}. ${el("a", references.mdn_custom_elements).append(el("strong", t`MDN documentation`))}.
@ -107,7 +107,7 @@ export function page({ pkg, info }){
Custom Elements. This is done with ${el("code", "customElementWithDDE")}, which makes your Custom Element Custom Elements. This is done with ${el("code", "customElementWithDDE")}, which makes your Custom Element
compatible with DDE's event handling. compatible with DDE's event handling.
`), `),
el("div", { class: "dde-function-table" }).append( el("div", { className: "function-table" }).append(
el("h4", t`customElementWithDDE`), el("h4", t`customElementWithDDE`),
el("dl").append( el("dl").append(
el("dt", t`Purpose`), el("dt", t`Purpose`),
@ -120,7 +120,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/customElementWithDDE.js"), page_id }),
el("div", { class: "dde-tip" }).append( el("div", { className: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "Key Point:")} The ${el("code", "customElementWithDDE")} function adds event dispatching ${el("strong", "Key Point:")} The ${el("code", "customElementWithDDE")} function adds event dispatching
to your Custom Element lifecycle methods, making them work seamlessly with DDE's event system. to your Custom Element lifecycle methods, making them work seamlessly with DDE's event system.
@ -132,7 +132,7 @@ export function page({ pkg, info }){
The next step is to use DDE's component rendering within your Custom Element. This is done with The next step is to use DDE's component rendering within your Custom Element. This is done with
${el("code", "customElementRender")}, which connects your DDE component function to the Custom Element. ${el("code", "customElementRender")}, which connects your DDE component function to the Custom Element.
`), `),
el("div", { class: "dde-function-table" }).append( el("div", { className: "function-table" }).append(
el("h4", t`customElementRender`), el("h4", t`customElementRender`),
el("dl").append( el("dl").append(
el("dt", t`Purpose`), el("dt", t`Purpose`),
@ -151,7 +151,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/dde.js"), page_id }),
el("div", { class: "dde-note" }).append( el("div", { className: "note" }).append(
el("p").append(...T` el("p").append(...T`
In this example, we're using Shadow DOM (${el("code", "this.attachShadow()")}) for encapsulation, In this example, we're using Shadow DOM (${el("code", "this.attachShadow()")}) for encapsulation,
but you can also render directly to the element with ${el("code", "customElementRender(this, ...)")}. but you can also render directly to the element with ${el("code", "customElementRender(this, ...)")}.
@ -163,7 +163,7 @@ export function page({ pkg, info }){
One of the most powerful features of integrating DDE with Web Components is connecting HTML attributes One of the most powerful features of integrating DDE with Web Components is connecting HTML attributes
to DDE's reactive signals system. This creates truly reactive custom elements. to DDE's reactive signals system. This creates truly reactive custom elements.
`), `),
el("div", { class: "dde-tip" }).append( el("div", { className: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "Two Ways to Handle Attributes:")} ${el("strong", "Two Ways to Handle Attributes:")}
`), `),
@ -182,7 +182,7 @@ export function page({ pkg, info }){
`), `),
el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/observedAttributes.js"), page_id }),
el("div", { class: "dde-callout" }).append( el("div", { className: "callout" }).append(
el("h4", t`How S.observedAttributes Works`), el("h4", t`How S.observedAttributes Works`),
el("p").append(...T` el("p").append(...T`
1. Takes each attribute listed in static observedAttributes 1. Takes each attribute listed in static observedAttributes
@ -198,7 +198,7 @@ export function page({ pkg, info }){
Shadow DOM provides encapsulation for your component's styles and markup. When using DDE with Shadow DOM, Shadow DOM provides encapsulation for your component's styles and markup. When using DDE with Shadow DOM,
you get the best of both worlds: encapsulation plus declarative DOM creation. you get the best of both worlds: encapsulation plus declarative DOM creation.
`), `),
el("div", { class: "dde-illustration" }).append( el("div", { className: "illustration" }).append(
el("h4", t`Shadow DOM Encapsulation`), el("h4", t`Shadow DOM Encapsulation`),
el("pre").append(el("code", ` el("pre").append(el("code", `
┌─────────────────────────────────┐ ┌─────────────────────────────────┐
@ -232,7 +232,7 @@ export function page({ pkg, info }){
Slots allow users of your component to insert content inside it. When using DDE, you can simulate the Slots allow users of your component to insert content inside it. When using DDE, you can simulate the
slot mechanism with the ${el("code", "simulateSlots")} function: slot mechanism with the ${el("code", "simulateSlots")} function:
`), `),
el("div", { class: "dde-function-table" }).append( el("div", { className: "function-table" }).append(
el("h4", t`simulateSlots`), el("h4", t`simulateSlots`),
el("dl").append( el("dl").append(
el("dt", t`Purpose`), el("dt", t`Purpose`),
@ -243,7 +243,7 @@ export function page({ pkg, info }){
), ),
el(example, { src: fileURL("./components/examples/customElement/simulateSlots.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/simulateSlots.js"), page_id }),
el("div", { class: "dde-tip" }).append( el("div", { className: "tip" }).append(
el("p").append(...T` el("p").append(...T`
${el("strong", "When to use simulateSlots:")} This approach is useful when you need to distribute ${el("strong", "When to use simulateSlots:")} This approach is useful when you need to distribute
content from the light DOM into specific locations in the shadow DOM, particularly in environments content from the light DOM into specific locations in the shadow DOM, particularly in environments
@ -273,7 +273,7 @@ export function page({ pkg, info }){
`) `)
), ),
el("div", { class: "dde-troubleshooting" }).append( el("div", { className: "troubleshooting" }).append(
el("h4", t`Common Issues`), el("h4", t`Common Issues`),
el("dl").append( el("dl").append(
el("dt", t`Events not firing properly`), el("dt", t`Events not firing properly`),