┌──────────────────┐
Title
@@ -236,9 +236,9 @@ export function page({ pkg, info }){
)
),
- el(h3, t`Best Practices for Web Components with DDE`),
+ el(h3, t`Best Practices for Web Components with dd`),
el("p").append(...T`
- When combining DDE with Web Components, follow these recommendations:
+ When combining dd with Web Components, follow these recommendations:
`),
el("ol").append(
el("li").append(...T`
diff --git a/docs/p07-debugging.html.js b/docs/p07-debugging.html.js
index c9b442e..1508c73 100644
--- a/docs/p07-debugging.html.js
+++ b/docs/p07-debugging.html.js
@@ -1,8 +1,8 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Debugging`,
- fullTitle: t`Debugging applications with deka-dom-el`,
- description: t`Techniques for debugging applications using deka-dom-el, especially signals.`,
+ fullTitle: t`Debugging applications with dd`,
+ description: t`Techniques for debugging applications using dd, especially signals.`,
};
import { el } from "deka-dom-el";
@@ -19,7 +19,7 @@ export function page({ pkg, info }){
return el(simplePage, { info, pkg }).append(
el("p").append(...T`
Debugging is an essential part of application development. This guide provides techniques
- and best practices for debugging applications built with deka-dom-el, with a focus on signals.
+ and best practices for debugging applications built with dd, with a focus on signals.
`),
el(h3, t`Debugging signals`),
@@ -87,14 +87,14 @@ console.log('Current value:', signal.valueOf());
),
el(code, { src: fileURL("./components/examples/debugging/debouncing.js"), page_id }),
- el(h3, t`Browser DevTools tips for deka-dom-el`),
+ el(h3, t`Browser DevTools tips for dd`),
el("p").append(...T`
- When debugging in the browser, deka-dom-el provides several helpful DevTools-friendly features:
+ When debugging in the browser, dd provides several helpful DevTools-friendly features:
`),
el("h4", t`Identifying components in the DOM`),
el("p").append(...T`
- deka-dom-el marks components in the DOM with special comment nodes to help you identify component boundaries.
+ dd marks components in the DOM with special comment nodes to help you identify component boundaries.
Components created with ${el("code", "el(ComponentFunction)")} are marked with comment nodes
${el("code", "")} and
includes:
@@ -107,7 +107,7 @@ console.log('Current value:', signal.valueOf());
el("h4", t`Finding reactive elements in the DOM`),
el("p").append(...T`
- When using ${el("code", "S.el()")}, deka-dom-el creates reactive elements in the DOM
+ When using ${el("code", "S.el()")}, dd creates reactive elements in the DOM
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 internally, so please do not edit them by hand):
`),
@@ -120,7 +120,7 @@ console.log('Current value:', signal.valueOf());
el("h4", t`DOM inspection properties`),
el("p").append(...T`
- Elements created with the deka-dom-el library have special properties to aid in debugging:
+ Elements created with the dd library have special properties to aid in debugging:
`),
el("p").append(...T`
${el("code", ".__dde_reactive")} - An array property on DOM elements that tracks signal-to-element
@@ -160,7 +160,7 @@ console.log('Current value:', signal.valueOf());
`),
el("ul").append(
el("li", "signal — the signal triggering the changes"),
- el("li", "listener — the listener function (this is an internal function for DDE)"),
+ el("li", "listener — the listener function (this is an internal function for dd)"),
el("li", "element — the DOM element that is bound to the signal"),
el("li", "property — the attribute or property name which is changing based on the signal"),
),
diff --git a/docs/p08-extensions.html.js b/docs/p08-extensions.html.js
index 826dd77..194e0b6 100644
--- a/docs/p08-extensions.html.js
+++ b/docs/p08-extensions.html.js
@@ -1,8 +1,8 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Extensions and 3rd Party`,
- fullTitle: t`Extending deka-dom-el with Third-Party Functionalities`,
- description: t`How to extend deka-dom-el with third-party libraries and custom functionalities.`,
+ fullTitle: t`Extending dd with Third-Party Functionalities`,
+ description: t`How to extend dd with third-party libraries and custom functionalities.`,
};
import { el } from "deka-dom-el";
@@ -17,14 +17,14 @@ export function page({ pkg, info }){
const page_id= info.id;
return el(simplePage, { info, pkg }).append(
el("p").append(...T`
- deka-dom-el is designed with extensibility in mind. This page covers how to separate
+ dd is designed with extensibility in mind. This page covers how to separate
third-party functionalities and integrate them seamlessly with the library, focusing on
proper resource cleanup and interoperability.
`),
el(h3, t`DOM Element Extensions with Addons`),
el("p").append(...T`
- The primary method for extending DOM elements in deka-dom-el is through the Addon pattern.
+ The primary method for extending DOM elements in dd is through the Addon pattern.
Addons are functions that take an element and applying some functionality to it. This pattern enables a
clean, functional approach to element enhancement.
`),
@@ -55,7 +55,7 @@ el("div", { id: "example" }, myAddon({ option: "value" }));
el("p").append(...T`
When extending elements with functionality that uses resources like event listeners, timers,
or external subscriptions, it's critical to clean up these resources when the element is removed
- from the DOM. deka-dom-el provides utilities for this through AbortSignal integration.
+ from the DOM. dd provides utilities for this through AbortSignal integration.
`),
el("div", { className: "tip" }).append(
el("p").append(...T`
@@ -111,7 +111,7 @@ function enhancementElement({ signal, ...config }) {
el("div", { className: "tab" }).append(
el("h5", t`⚠️ Library-Dependent`),
el(code, { content: `
-// Tightly coupled to deka-dom-el
+// Tightly coupled to dd
function enhancementElement(config) {
return function(element) {
// do something
@@ -127,7 +127,7 @@ function enhancementElement(config) {
el(h3, t`Signal Extensions and Future Compatibility`),
el("p").append(...T`
- Unlike DOM elements, signal functionality in deka-dom-el currently lacks a standardized
+ Unlike DOM elements, signal functionality in dd currently lacks a standardized
way to create library-independent extensions. This is because signals are implemented
differently across libraries.
`),
@@ -135,7 +135,7 @@ function enhancementElement(config) {
el("p").append(...T`
In the future, JavaScript may include built-in signals through the
${el("a", { href: "https://github.com/tc39/proposal-signals", textContent: "TC39 Signals Proposal" })}.
- deka-dom-el is designed with future compatibility in mind and will hopefully support these
+ dd is designed with future compatibility in mind and will hopefully support these
native signals without breaking changes when they become available.
`)
),
@@ -241,7 +241,7 @@ console.log(doubled.get()); // 10`, page_id }),
are disconnected`),
el("dt", t`Tight coupling with library internals`),
- el("dd", t`Focus on standard DOM APIs and clean interfaces rather than depending on deka-dom-el
+ el("dd", t`Focus on standard DOM APIs and clean interfaces rather than depending on dd
implementation details`),
el("dt", t`Mutating element prototypes`),
diff --git a/docs/p09-ssr.html.js b/docs/p09-ssr.html.js
index 4a20fb1..a420124 100644
--- a/docs/p09-ssr.html.js
+++ b/docs/p09-ssr.html.js
@@ -1,8 +1,8 @@
import { T, t } from "./utils/index.js";
export const info= {
title: t`Server-Side Rendering (SSR)`,
- fullTitle: t`Server-Side Rendering with deka-dom-el`,
- description: t`Using deka-dom-el for server-side rendering with jsdom to generate static HTML.`,
+ fullTitle: t`Server-Side Rendering with dd`,
+ description: t`Using dd for server-side rendering with jsdom to generate static HTML.`,
};
import { el } from "deka-dom-el";
@@ -22,11 +22,11 @@ export function page({ pkg, info }){
3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
not need to implement this functionality directly in their applications. This capability will hopefully
be covered by third-party libraries or frameworks that provide simpler SSR integration using
- deka-dom-el.
+ dd.
`)
),
el("p").append(...T`
- deka-dom-el isn't limited to browser environments. Thanks to its flexible architecture,
+ dd isn't limited to browser environments. Thanks to its flexible architecture,
it can be used for server-side rendering (SSR) to generate static HTML files.
This is achieved through integration with for example ${el("a", { href: "https://github.com/tmpvar/jsdom",
textContent: "jsdom" })}, a JavaScript implementation of web standards for Node.js.
@@ -47,12 +47,12 @@ export function page({ pkg, info }){
el(h3, t`How jsdom Integration Works`),
el("p").append(...T`
- The jsdom export in deka-dom-el provides the necessary tools to use the library in Node.js
+ The jsdom export in dd provides the necessary tools to use the library in Node.js
by integrating with jsdom. Here's what it does:
`),
el("ol").append(
el("li", t`Creates a virtual DOM environment in Node.js using jsdom`),
- el("li", t`Registers DOM globals like HTMLElement, document, etc. for deka-dom-el to use`),
+ el("li", t`Registers DOM globals like HTMLElement, document, etc. for dd to use`),
el("li", t`Sets an SSR flag in the environment to enable SSR-specific behaviors`),
el("li", t`Provides a promise queue system for managing async operations during rendering`),
el("li", t`Handles DOM property/attribute mapping differences between browsers and jsdom`)
@@ -61,14 +61,14 @@ export function page({ pkg, info }){
el(h3, t`Basic SSR Example`),
el("p").append(...T`
- Here's a simple example of how to use deka-dom-el for server-side rendering in a Node.js script:
+ Here's a simple example of how to use dd for server-side rendering in a Node.js script:
`),
el(code, { src: fileURL("./components/examples/ssr/basic-example.js"), page_id }),
el(h3, t`Building a Static Site Generator`),
el("p").append(...T`
- You can build a complete static site generator with deka-dom-el. In fact, this documentation site
- is built using deka-dom-el for server-side rendering! Here's how the documentation build process works:
+ You can build a complete static site generator with dd. In fact, this documentation site
+ is built using dd for server-side rendering! Here's how the documentation build process works:
`),
el(code, { src: fileURL("./components/examples/ssr/static-site-generator.js"), page_id }),
@@ -109,7 +109,7 @@ export function page({ pkg, info }){
el(h3, t`SSR Considerations and Limitations`),
el("p").append(...T`
- When using deka-dom-el for SSR, keep these considerations in mind:
+ When using dd for SSR, keep these considerations in mind:
`),
el("ul").append(
el("li", t`Browser-specific APIs like window.localStorage are not available in jsdom by default`),
@@ -124,7 +124,7 @@ export function page({ pkg, info }){
el(h3, t`Real Example: How This Documentation is Built`),
el("p").append(...T`
- This documentation site itself is built using deka-dom-el's SSR capabilities.
+ This documentation site itself is built using dd's SSR capabilities.
The build process collects all page components, renders them with jsdom, and outputs static HTML files.
`),
el(code, { src: fileURL("./components/examples/ssr/static-site-generator.js"), page_id }),
diff --git a/docs/p10-ireland.html.js b/docs/p10-ireland.html.js
index e59fc53..554d072 100644
--- a/docs/p10-ireland.html.js
+++ b/docs/p10-ireland.html.js
@@ -24,7 +24,7 @@ export function page({ pkg, info }){
3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
not need to implement this functionality directly in their applications. This capability will hopefully
be covered by third-party libraries or frameworks that provide simpler SSR integration using
- deka-dom-el.
+ dd.
`)
),
@@ -103,7 +103,7 @@ for(const { id, info } of pages) {
const serverDOM = createHTMl("");
serverDOM.registerGlobally("HTMLScriptElement");
- // Register deka-dom-el with the virtual DOM
+ // Register dd with the virtual DOM
const { el } = await register(serverDOM.dom);
// Import and render the page component
@@ -355,7 +355,7 @@ export function loadIrelands(store) {
el("p").append(...T`
This documentation site itself is built using the techniques described here,
- showcasing how deka-dom-el can be used to create both the documentation and
+ showcasing how dd can be used to create both the documentation and
the interactive examples within it. The implementation here is simplified for clarity,
while a production-ready system would need to address the considerations above.
`)
-# Deka DOM Elements
+# Deka DOM Elements (dd