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

Compare commits

base: jaandrle:57a5ff2dfe04f7b2963e324d86077fe3b5b8184d
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha
...
compare: jaandrle:9a5909eb904ea0e07e8be3a06745860723597219
Branches Tags
jaandrle:main
jaandrle:v0.9.5-alpha
jaandrle:v0.9.4-alpha
jaandrle:v0.9.3-alpha

3 Commits
57a5ff2dfe ... 9a5909eb90

Author SHA1 Message Date
Jan Andrle
9a5909eb90 🔤 logos 2025-03-07 11:48:34 +01:00
Jan Andrle
e9d75a4631 🐛 npx-hint 
[Scrollable region must have keyboard access | Axe Rules | Deque University | Deque Systems](https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI)
 2025-03-07 10:57:17 +01:00
Jan Andrle
7f4787d704 🔤 UI/UX/wording 2025-03-07 10:40:57 +01:00
29 changed files with 590 additions and 365 deletions
Show Stats Expand all files Collapse all files

14
README.md
View File

@ -68,11 +68,16 @@ Creating reactive elements, components, and Web Components using the native
## Why Another Library? ## Why Another Library?
This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like [solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability. This library bridges the gap between minimal solutions like van/hyperscript and more comprehensive frameworks like
[solid-js](https://github.com/solidjs/solid), offering a balanced trade-off between size, complexity, and usability.
Following functional programming principles, Deka DOM Elements starts with pure JavaScript (DOM API) and gradually adds auxiliary functions. These range from minor improvements to advanced features for building complete declarative reactive UI templates. Following functional programming principles, Deka DOM Elements starts with pure JavaScript (DOM API) and gradually adds
auxiliary functions. These range from minor improvements to advanced features for building complete declarative
reactive UI templates.
A key advantage: any internal function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, `S`, etc.) can be used independently while also working seamlessly together. This modular approach makes it easier to integrate the library into existing projects. A key advantage: any internal function (`assign`, `classListDeclarative`, `on`, `dispatchEvent`, `S`, etc.) can be used
independently while also working seamlessly together. This modular approach makes it easier to integrate the library
into existing projects.
## Getting Started ## Getting Started
@ -112,4 +117,5 @@ Signals are the reactive backbone of Deka DOM Elements:
- [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming - [adamhaile/S](https://github.com/adamhaile/S) - Simple, clean, fast reactive programming
- [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript - [hyperhype/hyperscript](https://github.com/hyperhype/hyperscript) - Create HyperText with JavaScript
- [potch/signals](https://github.com/potch/signals) - A small reactive signals library - [potch/signals](https://github.com/potch/signals) - A small reactive signals library
- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) - Functional DOM components without JSX/virtual DOM - [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) -
Functional DOM components without JSX/virtual DOM

2
bs/docs/jsdom.js
View File

@ -1,5 +1,5 @@
import { JSDOM } from "jsdom"; import { JSDOM } from "jsdom";
const html_default= "<!doctype html><html><head><meta charset=\"utf-8\"></head><body></body></html>"; const html_default= "<!doctype html><html lang=\"en\"><head><meta charset=\"utf-8\"></head><body></body></html>";
let keys= []; let keys= [];
let dom= null; let dom= null;
import { relative } from 'node:path'; import { relative } from 'node:path';

35
dist/esm-with-signals.d.min.ts vendored
View File

@ -72,6 +72,20 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
export namespace el {
/**
* Creates a marker comment for elements
*
* @param attrs - Marker attributes
* @param [is_open=false] - Whether the marker is open-ended
* @returns Comment node marker
*/
export function mark(
attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
is_open?: boolean
): Comment;
}
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
EL extends SupportedElement | ddeDocumentFragment EL extends SupportedElement | ddeDocumentFragment
@ -251,6 +265,27 @@ export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_e
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/**
* This is used primarly for server side rendering. To be sure that all async operations
* are finished before the page is sent to the client.
* ```
* // on component
* function component(){
* …
* queue(fetch(...).then(...));
* }
*
* // building the page
* async function build(){
* const { component }= await import("./component.js");
* document.body.append(el(component));
* await queue();
* retutn document.body.innerHTML;
* }
* ```
* */
export function queue(promise?: Promise<unknown>): Promise<unknown>;
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;

35
dist/esm-with-signals.d.ts vendored
View File

@ -72,6 +72,20 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
export namespace el {
/**
* Creates a marker comment for elements
*
* @param attrs - Marker attributes
* @param [is_open=false] - Whether the marker is open-ended
* @returns Comment node marker
*/
export function mark(
attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
is_open?: boolean
): Comment;
}
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
EL extends SupportedElement | ddeDocumentFragment EL extends SupportedElement | ddeDocumentFragment
@ -251,6 +265,27 @@ export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_e
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/**
* This is used primarly for server side rendering. To be sure that all async operations
* are finished before the page is sent to the client.
* ```
* // on component
* function component(){
* …
* queue(fetch(...).then(...));
* }
*
* // building the page
* async function build(){
* const { component }= await import("./component.js");
* document.body.append(el(component));
* await queue();
* retutn document.body.innerHTML;
* }
* ```
* */
export function queue(promise?: Promise<unknown>): Promise<unknown>;
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;

35
dist/esm.d.min.ts vendored
View File

@ -72,6 +72,20 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
export namespace el {
/**
* Creates a marker comment for elements
*
* @param attrs - Marker attributes
* @param [is_open=false] - Whether the marker is open-ended
* @returns Comment node marker
*/
export function mark(
attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
is_open?: boolean
): Comment;
}
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
EL extends SupportedElement | ddeDocumentFragment EL extends SupportedElement | ddeDocumentFragment
@ -251,6 +265,27 @@ export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_e
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/**
* This is used primarly for server side rendering. To be sure that all async operations
* are finished before the page is sent to the client.
* ```
* // on component
* function component(){
* …
* queue(fetch(...).then(...));
* }
*
* // building the page
* async function build(){
* const { component }= await import("./component.js");
* document.body.append(el(component));
* await queue();
* retutn document.body.innerHTML;
* }
* ```
* */
export function queue(promise?: Promise<unknown>): Promise<unknown>;
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;

35
dist/esm.d.ts vendored
View File

@ -72,6 +72,20 @@ export function assignAttribute<El extends SupportedElement, ATT extends keyof E
): ElementAttributes<El>[ATT] ): ElementAttributes<El>[ATT]
type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap; type ExtendedHTMLElementTagNameMap= HTMLElementTagNameMap & CustomElementTagNameMap;
export namespace el {
/**
* Creates a marker comment for elements
*
* @param attrs - Marker attributes
* @param [is_open=false] - Whether the marker is open-ended
* @returns Comment node marker
*/
export function mark(
attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
is_open?: boolean
): Comment;
}
export function el< export function el<
A extends ddeComponentAttributes, A extends ddeComponentAttributes,
EL extends SupportedElement | ddeDocumentFragment EL extends SupportedElement | ddeDocumentFragment
@ -251,6 +265,27 @@ export function customElementWithDDE<EL extends (new ()=> HTMLElement)>(custom_e
export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL export function lifecyclesToEvents<EL extends (new ()=> HTMLElement)>(custom_element: EL): EL
export function observedAttributes(custom_element: HTMLElement): Record<string, string> export function observedAttributes(custom_element: HTMLElement): Record<string, string>
/**
* This is used primarly for server side rendering. To be sure that all async operations
* are finished before the page is sent to the client.
* ```
* // on component
* function component(){
* …
* queue(fetch(...).then(...));
* }
*
* // building the page
* async function build(){
* const { component }= await import("./component.js");
* document.body.append(el(component));
* await queue();
* retutn document.body.innerHTML;
* }
* ```
* */
export function queue(promise?: Promise<unknown>): Promise<unknown>;
/* TypeScript MEH */ /* TypeScript MEH */
declare global{ declare global{
type ddeAppend<el>= (...nodes: (Node | string)[])=> el; type ddeAppend<el>= (...nodes: (Node | string)[])=> el;

86
docs/assets/favicon.svg
View File

@ -1,28 +1,60 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"> <svg
<defs> width="64"
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%"> height="64"
<stop offset="0%" stop-color="#333333" /> viewBox="0 0 64 64"
<stop offset="100%" stop-color="#222222" /> version="1.1"
</linearGradient> id="svg2"
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%"> sodipodi:docname="favicon.svg"
<stop offset="0%" stop-color="#e32c2c" /> xml:space="preserve"
<stop offset="100%" stop-color="#ff5252" /> inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
</linearGradient> xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%"> xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
<feDropShadow dx="0" dy="0.5" stdDeviation="0.5" flood-color="#000" flood-opacity="0.3"/> xmlns="http://www.w3.org/2000/svg"
</filter> xmlns:svg="http://www.w3.org/2000/svg"><defs
</defs> id="defs2" /><sodipodi:namedview
id="namedview2"
<!-- Square background with rounded corners --> pagecolor="#ffffff"
<rect x="2" y="2" width="28" height="28" rx="4" ry="4" fill="url(#bgGradient)" /> bordercolor="#000000"
borderopacity="0.25"
<!-- Subtle code brackets as background element --> inkscape:showpageshadow="2"
<g opacity="0.15" fill="#fff"> inkscape:pageopacity="0.0"
<path d="M10,7.5 L6.25,16 L10,24.5" stroke="#fff" stroke-width="1" fill="none"/> inkscape:pagecheckerboard="0"
<path d="M22,7.5 L25.75,16 L22,24.5" stroke="#fff" stroke-width="1" fill="none"/> inkscape:deskcolor="#d1d1d1"
</g> inkscape:zoom="9.3249707"
inkscape:cx="38.230683"
<!-- lowercase dde letters --> inkscape:cy="28.150223"
<text x="16" y="21" text-anchor="middle" font-family="'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'SF Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" font-size="14" font-weight="bold" fill="url(#textGradient)" filter="url(#shadow)">dde</text> inkscape:window-width="1278"
</svg> inkscape:window-height="1023"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="0"
inkscape:current-layer="svg2" /><rect
x="0"
y="0"
width="64"
height="64"
rx="10"
fill="#2b2b2b"
id="rect1" /><g
transform="matrix(0.98009485,0,0,1.1964871,0.58334513,-7.2134367)"
id="g2"
style="stroke:#666666"><g
id="g3"
transform="matrix(1.0027126,0,0,0.88864615,3.8540039,4.3371297)"
style="stroke:#666666"><path
d="M 8.880742,11.550781 2.9817709,32 8.880742,52.449219"
stroke="#ff5252"
stroke-width="4.25375"
fill="none"
id="path1"
style="stroke:#666666" /><path
d="M 47.330923,11.568743 53.261141,32 47.330923,52.431257"
stroke="#ff5252"
stroke-width="4.26309"
fill="none"
id="path2"
style="stroke:#666666" /></g></g><path
d="m 11.726038,32.656946 q 0,-2.685867 0.823088,-4.721927 0.823088,-2.036061 2.166022,-3.404987 1.342933,-1.360261 3.07575,-2.053387 1.732818,-0.693128 3.552275,-0.693128 4.505325,0 6.844629,2.659875 2.339303,2.668539 2.339303,7.780349 0,0.519846 -0.01733,1.083011 -0.02599,0.563166 -0.06931,0.90973 H 17.227733 q 0,1.992739 1.646176,3.145062 1.646176,1.14366 4.245402,1.14366 1.602856,0 3.058423,-0.346564 1.446902,-0.346563 2.443272,-0.693127 l 0.736447,4.548646 q -1.386253,0.476525 -2.945789,0.797097 -1.559536,0.329235 -3.508954,0.329235 -2.599226,0 -4.652615,-0.675799 -2.062053,-0.667135 -3.508955,-1.984075 -1.455566,-1.325605 -2.235335,-3.275025 -0.779767,-1.94942 -0.779767,-4.548646 m 13.645936,-2.1227 q 0,-0.823088 -0.216602,-1.585528 -0.216602,-0.753776 -0.693127,-1.360263 -0.476525,-0.606485 -1.212973,-0.979042 -0.736447,-0.363891 -1.819457,-0.363891 -1.039691,0 -1.793467,0.346563 -0.762439,0.346564 -1.264955,0.95305 -0.493854,0.606485 -0.771105,1.386253 -0.285915,0.77977 -0.372555,1.602856 z m 26.901988,11.263311 q -0.129961,0.08664 -0.589158,0.303244 -0.450533,0.216602 -1.18698,0.459196 -0.736448,0.23393 -1.793466,0.407211 -1.065682,0.173282 -2.408616,0.173282 -3.682236,0 -5.371734,-2.192014 -1.689496,-2.18335 -1.689496,-6.385432 V 17.278193 H 33.602856 V 12.85951 h 10.960069 v 22.093419 q 0,2.079381 0.823089,2.815829 0.823088,0.736447 2.07938,0.736447 1.602856,0 2.685867,-0.433204 1.08301,-0.433205 1.429574,-0.563166 z"
id="path1-1"
style="fill:#ff5252;stroke-width:0.866409" /></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

102
docs/assets/logo.svg
View File

@ -1,33 +1,71 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?> <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="256" height="256" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"> <svg
<!-- Gradients and effects --> width="256"
<defs> height="256"
<linearGradient id="bgGradient" x1="0%" y1="0%" x2="100%" y2="100%"> viewBox="0 0 256 256"
<stop offset="0%" stop-color="#333333" /> version="1.1"
<stop offset="100%" stop-color="#222222" /> id="svg5"
</linearGradient> xml:space="preserve"
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%"> xmlns="http://www.w3.org/2000/svg"
<stop offset="0%" stop-color="#e32c2c" /> xmlns:svg="http://www.w3.org/2000/svg"><defs
<stop offset="100%" stop-color="#ff5252" /> id="defs4"><linearGradient
</linearGradient> id="bgGradient"
<filter id="shadow" x="-10%" y="-10%" width="120%" height="120%"> x1="18"
<feDropShadow dx="0" dy="2" stdDeviation="2" flood-color="#000" flood-opacity="0.3"/> y1="18"
</filter> x2="238"
<filter id="glow" x="-20%" y="-20%" width="140%" height="140%"> y2="238"
<feGaussianBlur stdDeviation="4" result="blur"/> gradientUnits="userSpaceOnUse"
<feComposite in="SourceGraphic" in2="blur" operator="over"/> gradientTransform="matrix(1.1363636,0,0,1.1363636,-17.454544,-17.454544)"><stop
</filter> offset="0"
</defs> stop-color="#3b3b3b"
id="stop1" /><stop
<!-- Square background with rounded corners --> offset="1"
<rect x="18" y="18" width="220" height="220" rx="20" ry="20" fill="url(#bgGradient)" /> stop-color="#2b2b2b"
id="stop2" /></linearGradient><filter
<!-- Subtle code brackets as background element --> id="glow"
<g opacity="0.15" fill="#fff" filter="url(#glow)"> x="-0.089563958"
<path d="M80,60 L50,128 L80,196" stroke="#fff" stroke-width="8" fill="none"/> y="-0.082460006"
<path d="M176,60 L206,128 L176,196" stroke="#fff" stroke-width="8" fill="none"/> width="1.1791279"
</g> height="1.16492"><feGaussianBlur
stdDeviation="4"
<!-- lowercase dde letters with shadow effect --> result="blur"
<text x="128" y="154" text-anchor="middle" font-family="'Fira Code', 'JetBrains Mono', 'Source Code Pro', 'SF Mono', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace" font-size="100" font-weight="bold" fill="url(#textGradient)" filter="url(#shadow)">dde</text> id="feGaussianBlur4"
</svg> in="SourceGraphic" /><feComposite
in="SourceGraphic"
in2="blur"
operator="over"
id="feComposite4"
result="composite-0" /></filter></defs><rect
x="3"
y="3"
width="250"
height="250"
fill="url(#bgGradient)"
id="rect4"
style="fill:url(#bgGradient);stroke-width:1.13636"
ry="50" /><g
id="g2"
transform="translate(-3.5569814,-1.5165883)"><g
id="g1"
transform="matrix(1.5900346,0,0,1.5900346,-121.12651,-66.626074)"><g
opacity="0.25"
fill="#ffffff"
filter="url(#glow)"
id="g5"
transform="matrix(0.55415879,0,0,0.56134669,110.90661,51.505106)"><path
d="m 80,60 -30,68 30,68"
stroke="#ffffff"
stroke-width="8"
fill="none"
id="path4" /><path
d="m 176,60 30,68 -30,68"
stroke="#ffffff"
stroke-width="8"
fill="none"
id="path5" /></g><path
d="m 152.28246,124.58038 q 0,-4.06854 1.24681,-7.15275 1.24681,-3.08421 3.28107,-5.15785 2.03427,-2.06051 4.65913,-3.11046 2.62486,-1.04994 5.38096,-1.04994 6.82464,0 10.3682,4.02916 3.54356,4.04228 3.54356,11.78562 0,0.78746 -0.0263,1.64054 -0.0394,0.85308 -0.10499,1.37805 h -20.01456 q 0,3.01859 2.49362,4.76412 2.49362,1.73241 6.43091,1.73241 2.42799,0 4.63287,-0.52497 2.19176,-0.52497 3.70106,-1.04995 l 1.11556,6.89026 q -2.09989,0.72184 -4.46226,1.20744 -2.36237,0.49872 -5.31534,0.49872 -3.93729,0 -7.04775,-1.02369 -3.12359,-1.01058 -5.31534,-3.00547 -2.20489,-2.00802 -3.38607,-4.96098 -1.18114,-2.95297 -1.18114,-6.89026 m 20.67077,-3.21546 q 0,-1.2468 -0.3281,-2.40174 -0.32811,-1.14182 -1.04995,-2.06052 -0.72183,-0.9187 -1.8374,-1.48304 -1.11557,-0.55123 -2.7561,-0.55123 -1.57492,0 -2.71673,0.52498 -1.15494,0.52497 -1.91615,1.44367 -0.74809,0.9187 -1.16806,2.09989 -0.43311,1.18119 -0.56435,2.42799 z m 40.75096,17.06159 q -0.19687,0.13125 -0.89245,0.45936 -0.68247,0.3281 -1.79803,0.69558 -1.11557,0.35436 -2.71673,0.61685 -1.61429,0.26248 -3.64856,0.26248 -5.57783,0 -8.13707,-3.32045 -2.55923,-3.30732 -2.55923,-9.67261 v -26.18298 h -8.5308 v -6.693389 h 16.60224 v 33.466969 q 0,3.14983 1.24681,4.26539 1.24681,1.11557 3.14983,1.11557 2.428,0 4.06853,-0.65621 1.64054,-0.65622 2.16551,-0.85308 z"
id="path1-3"
style="fill:#ff5252;stroke-width:1.31243" /></g><path
d="m 27.256467,130.12148 q 0,6.64555 2.489444,10.86495 2.468347,4.21939 7.953563,4.21939 1.582274,0 2.953578,-0.10548 1.371303,-0.10549 2.848092,-0.31646 v -27.00413 q -1.476789,-0.84388 -3.375517,-1.4346 -1.898728,-0.56962 -4.008427,-0.56962 -4.641336,0 -6.751034,3.69197 -2.109699,3.69198 -2.109699,10.65398 m 29.219322,23.62862 q -3.586487,1.16034 -8.755248,1.89873 -5.168761,0.7384 -10.126552,0.7384 -11.603341,0 -17.55269,-6.85651 -5.970447,-6.85652 -5.970447,-18.77632 0,-12.13076 5.021083,-19.15606 4.999985,-7.0042 14.810082,-7.0042 2.637123,0 5.168761,0.56962 2.531638,0.59072 4.430366,1.64557 V 84.235539 l 12.974645,-2.215183 z m 23.523136,-23.62862 q 0,6.64555 2.489444,10.86495 2.468344,4.21939 7.953559,4.21939 1.582268,0 2.953578,-0.10548 1.3713,-0.10549 2.84809,-0.31646 v -27.00413 q -1.47679,-0.84388 -3.37552,-1.4346 -1.89873,-0.56962 -4.008423,-0.56962 -4.64133,0 -6.75103,3.69197 -2.109698,3.69198 -2.109698,10.65398 m 29.219315,23.62862 q -3.58648,1.16034 -8.75524,1.89873 -5.168774,0.7384 -10.126562,0.7384 -11.603332,0 -17.552681,-6.85651 -5.970446,-6.85652 -5.970446,-18.77632 0,-12.13076 4.999984,-19.15606 5.021082,-7.0042 14.831178,-7.0042 2.63712,0 5.168753,0.56962 2.53164,0.59072 4.43037,1.64557 V 84.235539 l 12.974644,-2.215183 z"
id="path1"
style="fill:#ff5252;stroke-width:2.1097;fill-opacity:0.66479665" /></g></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 4.6 KiB

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

@ -194,7 +194,7 @@ export function code({ id, src, content, language= "js", className= host.slice(1
registerClientPart(page_id); registerClientPart(page_id);
dataJS= "todo"; dataJS= "todo";
} }
return el("div", { id, className, dataJS }).append( return el("div", { id, className, dataJS, tabIndex: 0 }).append(
el("code", { className: "language-"+language, textContent: content.trim() }) el("code", { className: "language-"+language, textContent: content.trim() })
); );
} }

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

@ -20,7 +20,7 @@ export function ireland({ src, exportName = "default", props = {} }) {
// relative src against the current directory // relative src against the current directory
const path= "./"+relative(dir, src.pathname); const path= "./"+relative(dir, src.pathname);
const id = "ireland-" + generateComponentId(src); const id = "ireland-" + generateComponentId(src);
const element = el.mark({ type: "ireland", name: ireland.name }); const element = el.mark({ type: "later", name: ireland.name });
queue(import(path).then(module => { queue(import(path).then(module => {
const component = module[exportName]; const component = module[exportName];
element.replaceWith(el(component, props, mark(id))); element.replaceWith(el(component, props, mark(id)));

3
docs/index.html.js
View File

@ -104,7 +104,8 @@ export function page({ pkg, info }){
el("li").append(...T`${el("strong", "Custom Elements")} — Building web components`), el("li").append(...T`${el("strong", "Custom Elements")} — Building web components`),
el("li").append(...T`${el("strong", "Debugging")} — Tools to help you build and fix your apps`), el("li").append(...T`${el("strong", "Debugging")} — Tools to help you build and fix your apps`),
el("li").append(...T`${el("strong", "Extensions")} — Integrating third-party functionalities`), el("li").append(...T`${el("strong", "Extensions")} — Integrating third-party functionalities`),
el("li").append(...T`${el("strong", "Ireland Components")} — Creating interactive demos with server-side pre-rendering`), el("li").append(...T`${el("strong", "Ireland Components")} —
Creating interactive demos with server-side pre-rendering`),
el("li").append(...T`${el("strong", "SSR")} — Server-side rendering with DDE`) el("li").append(...T`${el("strong", "SSR")} — Server-side rendering with DDE`)
), ),
el("p").append(...T` el("p").append(...T`

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

@ -55,21 +55,21 @@ export function page({ pkg, info }){
el(MyComponent); el(MyComponent);
function MyComponent() { function MyComponent() {
// 2. access the host element   // 2. access the host element
const { host } = scope;   const { host } = scope;
// 3. Add behavior to host   // 3. Add behavior to host
host(   host(
on.click(handleClick)   on.click(handleClick)
);   );
// 4. Return the host element   // 4. Return the host element
return el("div", {   return el("div", {
className: "my-component"   className: "my-component"
}).append(   }).append(
el("h2", "Title"),   el("h2", "Title"),
el("p", "Content")   el("p", "Content")
);   );
} }
`.trim())) `.trim()))
), ),
@ -118,9 +118,9 @@ function MyComponent() {
3. Component interactions happen 3. Component interactions happen
4. Component removed from DOM → disconnected event 4. Component removed from DOM → disconnected event
5. Automatic cleanup of: 5. Automatic cleanup of:
- Event listeners   - Event listeners
- Signal subscriptions   - Signal subscriptions
- Custom cleanup code   - Custom cleanup code
`)) `))
), ),
el(example, { src: fileURL("./components/examples/scopes/cleaning.js"), page_id }), el(example, { src: fileURL("./components/examples/scopes/cleaning.js"), page_id }),
@ -167,6 +167,9 @@ function MyComponent() {
el("li").append(...T` el("li").append(...T`
${el("strong", "Capture host early:")} Use ${el("code", "const { host } = scope")} at component start ${el("strong", "Capture host early:")} Use ${el("code", "const { host } = scope")} at component start
`), `),
el("li").append(...T`
${el("strong", "Define signals as constants:")} ${el("code", "const counter = S(0);")}
`),
el("li").append(...T` el("li").append(...T`
${el("strong", "Prefer declarative patterns:")} Use signals to drive UI updates rather than manual DOM manipulation ${el("strong", "Prefer declarative patterns:")} Use signals to drive UI updates rather than manual DOM manipulation
`), `),

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

@ -202,15 +202,14 @@ export function page({ pkg, info }){
el("h4", t`Shadow DOM Encapsulation`), el("h4", t`Shadow DOM Encapsulation`),
el("pre").append(el("code", ` el("pre").append(el("code", `
<my-custom-element> <my-custom-element>
  ┌─────────────────────────┐
    #shadow-root
┌─────────────────────────┐       Created with DDE:
#shadow-root     ┌──────────────────┐
      <div>
Created with DDE:        <h2>Title</h2>
┌──────────────────┐        <p>Content</p>
<div>
<h2>Title</h2>
<p>Content</p>
`)) `))
), ),
el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }), el(example, { src: fileURL("./components/examples/customElement/shadowRoot.js"), page_id }),

9
docs/p08-extensions.html.js
View File

@ -67,9 +67,6 @@ el("div", { id: "example" }, myAddon({ option: "value" }));
// Third-party library addon with proper cleanup // Third-party library addon with proper cleanup
function externalLibraryAddon(config, signal) { function externalLibraryAddon(config, signal) {
return function(element) { return function(element) {
// Get an abort signal that triggers on element disconnection
const signal = on.disconnectedAsAbort(element);
// Initialize the third-party library // Initialize the third-party library
const instance = new ExternalLibrary(element, config); const instance = new ExternalLibrary(element, config);
@ -240,10 +237,12 @@ console.log(doubled.get()); // 10`, page_id }),
el("h4", t`Common Extension Pitfalls`), el("h4", t`Common Extension Pitfalls`),
el("dl").append( el("dl").append(
el("dt", t`Leaking event listeners or resources`), el("dt", t`Leaking event listeners or resources`),
el("dd", t`Always use AbortSignal-based cleanup to automatically remove listeners when elements are disconnected`), el("dd", t`Always use AbortSignal-based cleanup to automatically remove listeners when elements
are disconnected`),
el("dt", t`Tight coupling with library internals`), 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 implementation details`), el("dd", t`Focus on standard DOM APIs and clean interfaces rather than depending on deka-dom-el
implementation details`),
el("dt", t`Mutating element prototypes`), el("dt", t`Mutating element prototypes`),
el("dd", t`Prefer compositional approaches with addons over modifying element prototypes`), el("dd", t`Prefer compositional approaches with addons over modifying element prototypes`),

9
docs/p09-ssr.html.js
View File

@ -18,10 +18,11 @@ export function page({ pkg, info }){
return el(simplePage, { info, pkg }).append( return el(simplePage, { info, pkg }).append(
el("div", { className: "warning" }).append( el("div", { className: "warning" }).append(
el("p").append(...T` el("p").append(...T`
This part of the documentation is primarily intended for technical enthusiasts and documentation This part of the documentation is primarily intended for technical enthusiasts and authors of
authors. It describes an advanced feature, not a core part of the library. Most users will not need to 3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
implement this functionality directly in their applications. This capability will hopefully be covered not need to implement this functionality directly in their applications. This capability will hopefully
by third-party libraries or frameworks that provide simpler SSR integration using deka-dom-el. be covered by third-party libraries or frameworks that provide simpler SSR integration using
deka-dom-el.
`) `)
), ),
el("p").append(...T` el("p").append(...T`

19
docs/p10-ireland.html.js
View File

@ -2,7 +2,8 @@ import { T, t } from "./utils/index.js";
export const info= { export const info= {
title: t`Ireland Components`, title: t`Ireland Components`,
fullTitle: t`Interactive Demo Components with Server-Side Pre-Rendering`, fullTitle: t`Interactive Demo Components with Server-Side Pre-Rendering`,
description: t`Creating live, interactive component examples in documentation with server-side rendering and client-side hydration.`, description: t`Creating live, interactive component examples in documentation with server-side
rendering and client-side hydration.`,
}; };
import { el } from "deka-dom-el"; import { el } from "deka-dom-el";
@ -19,10 +20,11 @@ export function page({ pkg, info }){
return el(simplePage, { info, pkg }).append( return el(simplePage, { info, pkg }).append(
el("div", { className: "warning" }).append( el("div", { className: "warning" }).append(
el("p").append(...T` el("p").append(...T`
This part of the documentation is primarily intended for technical enthusiasts and documentation This part of the documentation is primarily intended for technical enthusiasts and authors of
authors. It describes an advanced feature, not a core part of the library. Most users will not need to 3rd-party libraries. It describes an advanced feature, not a core part of the library. Most users will
implement this functionality directly in their applications. This capability will hopefully be covered not need to implement this functionality directly in their applications. This capability will hopefully
by third-party libraries or frameworks that provide simpler SSR integration using deka-dom-el. be covered by third-party libraries or frameworks that provide simpler SSR integration using
deka-dom-el.
`) `)
), ),
@ -61,7 +63,8 @@ export function page({ pkg, info }){
el(h3, t`Implementation Architecture`), el(h3, t`Implementation Architecture`),
el("p").append(...T` el("p").append(...T`
The core of the Ireland system is implemented in ${el("code", "docs/components/ireland.html.js")}. The core of the Ireland system is implemented in ${el("code", "docs/components/ireland.html.js")}.
It integrates with the SSR build process using the ${el("code", "registerClientFile")} function from ${el("code", "docs/ssr.js")}. It integrates with the SSR build process using the ${el("code", "registerClientFile")} function
from ${el("code", "docs/ssr.js")}.
`), `),
el(code, { content: ` el(code, { content: `
@ -159,7 +162,7 @@ export function ireland({ src, exportName = "default", props = {} }) {
const id = "ireland-" + generateComponentId(src); const id = "ireland-" + generateComponentId(src);
// Create placeholder element // Create placeholder element
const element = el.mark({ type: "ireland", name: ireland.name }); const element = el.mark({ type: "later", name: ireland.name });
// Import and render the component during SSR // Import and render the component during SSR
queue(import(path).then(module => { queue(import(path).then(module => {
@ -287,7 +290,7 @@ export function loadIrelands(store) {
${el("strong", "Export a function:")} Components should be exported as named or default functions ${el("strong", "Export a function:")} Components should be exported as named or default functions
`), `),
el("li").append(...T` el("li").append(...T`
${el("strong", "Return a DOM element:")} The function should return a valid DOM element created with ${el("code", "el()")}
`), `),
el("li").append(...T` el("li").append(...T`
${el("strong", "Accept props:")} Components should accept a props object, even if not using it ${el("strong", "Accept props:")} Components should accept a props object, even if not using it

11
index.d.ts vendored
View File

@ -76,11 +76,14 @@ export namespace el {
/** /**
* Creates a marker comment for elements * Creates a marker comment for elements
* *
* @param {{ type: "component"|"reactive"|"ireland"|"later", name?: string, host?: "this"|"parentElement" }} attrs - Marker attributes * @param attrs - Marker attributes
* @param {boolean} [is_open=false] - Whether the marker is open-ended * @param [is_open=false] - Whether the marker is open-ended
* @returns {Comment} Comment node marker * @returns Comment node marker
*/ */
export function mark(attrs: { type: "component"|"reactive"|"ireland"|"later", name?: string, host?: "this"|"parentElement" }, is_open?: boolean): Comment; export function mark(
attrs: { type: "component"|"reactive"|"later", name?: string, host?: "this"|"parentElement" },
is_open?: boolean
): Comment;
} }
export function el< export function el<