🐛 📺 v0.9.5-alpha (#44)

* ⚡ 📺 package (version and publint)

* 🔤 docs typos

* 🐛 this address / fixes #43

* ⚡ tiny el optimalization

* 🔤 improve docs wording

* 🔤 case-studies/products.js (AbortSignal)

* 🔤 🐛 case-studies/image-gallery.js

docs/components/examples/case-studies/image-gallery.js

@@ -82,10 +82,10 @@ export function ImageGallery(images= imagesSample) {
 				closeLightbox();
 				break;
 			case 'ArrowLeft':
-				document.querySelector('.lightbox-prev-btn').click();
+				onPrevImage(e);
 				break;
 			case 'ArrowRight':
-				document.querySelector('.lightbox-next-btn').click();
+				onNextImage(e);
 				break;
 		}
 	}
@@ -126,12 +126,12 @@ export function ImageGallery(images= imagesSample) {
 						el("div", {
 							className: "gallery-item",
 							dataTag: image.alt.toLowerCase()
-						}).append(
+						}, onImageClick(image.id)).append(
 							el("img", {
 								src: image.src,
 								alt: image.alt,
 								loading: "lazy"
-							}, onImageClick(image.id)),
+							}),
 							el("div", { className: "gallery-item-caption" }).append(
 								el("h3", image.title),
 								el("p", image.alt)
@@ -146,41 +146,41 @@ export function ImageGallery(images= imagesSample) {
 		S.el(isLightboxOpen, open => !open
 			? el()
 			: el("div", { className: "lightbox-overlay" }, on("click", closeLightbox)).append(
-					el("div", {
-						className: "lightbox-content",
-						onClick: e => e.stopPropagation() // Prevent closing when clicking inside
-					}).append(
-						el("button", {
-							className: "lightbox-close-btn",
-							"aria-label": "Close lightbox"
-						}, on("click", closeLightbox)).append("×"),
+				el("div", {
+					className: "lightbox-content",
+					onClick: e => e.stopPropagation() // Prevent closing when clicking inside
+				}).append(
+					el("button", {
+						className: "lightbox-close-btn",
+						ariaLabel: "Close lightbox",
+					}, on("click", closeLightbox)).append("×"),
 
-						el("button", {
-							className: "lightbox-prev-btn",
-							"aria-label": "Previous image"
-						}, on("click", onPrevImage)).append("❮"),
+					el("button", {
+						className: "lightbox-prev-btn",
+						ariaLabel: "Previous image",
+					}, on("click", onPrevImage)).append("❮"),
 
-						el("button", {
-							className: "lightbox-next-btn",
-							"aria-label": "Next image"
-						}, on("click", onNextImage)).append("❯"),
+					el("button", {
+						className: "lightbox-next-btn",
+						ariaLabel: "Next image",
+					}, on("click", onNextImage)).append("❯"),
 
-						S.el(selectedImage, img => !img
-							? el()
-							: el("div", { className: "lightbox-image-container" }).append(
-								el("img", {
-									src: img.src,
-									alt: img.alt,
-									className: "lightbox-image"
-								}),
-								el("div", { className: "lightbox-caption" }).append(
-									el("h2", img.title),
-									el("p", img.alt)
-								)
-							)
+					S.el(selectedImage, img => !img
+						? el()
+						: el("div", { className: "lightbox-image-container" }).append(
+							el("img", {
+								src: img.src,
+								alt: img.alt,
+								className: "lightbox-image",
+							}),
+							el("div", { className: "lightbox-caption" }).append(
+								el("h2", img.title),
+								el("p", img.alt),
+							),
 						)
-					)
-				)
+					),
+				),
+			),
 		),
 	);
 }

docs/components/examples/case-studies/products.js

@@ -1,9 +1,13 @@
-import { el, on } from "deka-dom-el";
+import { el, on, scope } from "deka-dom-el";
 import { S } from "deka-dom-el/signals";
 
 export function ProductCatalog() {
+	const { signal }= scope;
+
 	const itemsPerPage = 5;
-	const products = asyncSignal(S, fetchProducts, { initial: [], keepLast: true });
+	const products = asyncSignal(S,
+		fetchProducts,
+		{ initial: [], keepLast: true, signal });
 	const searchTerm = S("");
 	const handleSearch = (e) => searchTerm.set(e.target.value);
 	const sortOrder = S("default");
@@ -220,10 +224,14 @@ function simulateNetworkDelay(min = 300, max = 1200) {
  * @template T
  * @param {typeof S} S - Signal constructor
  * @param {(params: { signal: AbortSignal }) => Promise<T>} invoker - Async function to execute
- * @param {{ initial?: T, keepLast?: boolean }} options - Configuration options
+ * @param {{ initial?: T, keepLast?: boolean, signal?: AbortSignal }} options - Configuration options
  * @returns {Object} Status signals and control methods
  */
-export function asyncSignal(S, invoker, { initial, keepLast } = {}) {
+export function asyncSignal(S, invoker, { initial, keepLast, signal } = {}) {
+	/** @type {(s: AbortSignal) => AbortSignal} */
+	const anySignal = !signal || !AbortSignal.any // TODO: make better
+		? s=> s
+		: s=> AbortSignal.any([s, signal]);
 	// Status tracking signals
 	const status = S("pending");
 	const result = S(initial);
@@ -242,7 +250,7 @@ export function asyncSignal(S, invoker, { initial, keepLast } = {}) {
 
 		try {
 			const data = await invoker({
-				signal: controller.signal,
+				signal: anySignal(controller.signal),
 			});
 			if (!controller.signal.aborted) {
 				status.set("resolved");

docs/components/pageUtils.html.js

@@ -74,13 +74,11 @@ export function h3({ textContent, id }){
 		if(!id) id= "h-"+textContent.toLowerCase().replaceAll(/\s/g, "-").replaceAll(/[^a-z-]/g, "");
 		return el("h3", { id }).append(
 				el("a", {
-						className: "heading-anchor",
-						href: "#"+id,
-						textContent: "#",
-						title: `Link to this section: ${textContent}`,
-						"aria-label": `Link to section ${textContent}`
+					className: "heading-anchor",
+					href: "#"+id,
+					title: `Link to this section: ${textContent}`,
 				}),
-				" ",
+				"# ",
 				textContent,
 		);
 }

docs/index.html.js

@@ -41,7 +41,12 @@ export function page({ pkg, info }){
 			el("h4", t`Key Benefits of dd<el>`),
 			el("ul").append(
 				el("li", t`No build step required — use directly in the browser`),
-				el("li", t`Lightweight core (~10–15kB minified) without unnecessary dependencies (0 at now 😇)`),
+				el("li", t`Minimalized footprint:`),
+				el("ul").append(
+					el("li", t`lightweight core (~10–15kB minified)`),
+					el("li", t`…without unnecessary dependencies (0 at now 😇)`),
+					el("li", t`auto-releasing resources with focus on performance and development experience`),
+				),
 				el("li", t`Natural DOM API — work with real DOM nodes, not abstractions`),
 				el("li", t`Built-in (but optional) reactivity with simplified but powerful signals system`),
 				el("li", t`Clean code organization with the 3PS pattern`)

docs/layout/head.html.js

@@ -151,7 +151,7 @@ export function header({ info: { href, title, description }, pkg }){
 				),
 				el("span", {
 					className: "version-badge",
-					"aria-label": "Version",
+					ariaLabel: "Version",
 					textContent: pkg.version || ""
 				})
 			),
@@ -165,13 +165,13 @@ export function header({ info: { href, title, description }, pkg }){
 function nav({ href, pkg }){
 	return el("nav", {
 		role: "navigation",
-		"aria-label": "Main navigation",
+		ariaLabel: "Main navigation",
 		className: nav.name
 	}).append(
 		el("a", {
 			href: pkg.homepage,
 			className: "github-link",
-			"aria-label": "View on GitHub",
+			ariaLabel: "View on GitHub",
 			target: "_blank",
 			rel: "noopener noreferrer",
 		}).append(
@@ -185,11 +185,11 @@ function nav({ href, pkg }){
 			return el("a", {
 				href: isIndex ? "./" : p.href,
 				title: p.description || `Go to ${p.title}`,
-				"aria-current": isCurrent ? "page" : null,
+				ariaCurrent: isCurrent ? "page" : null,
 			}).append(
 				el("span", {
 					className: "nav-number",
-					"aria-hidden": "true",
+					ariaHidden: "true",
 					textContent: `${i+1}. `
 				}),
 				p.title

docs/p07-debugging.html.js

@@ -168,6 +168,22 @@ export function page({ pkg, info }){
 			el("li", t`name - The name of the component function`),
 			el("li", t`host - Indicates whether the host is "this" (for DocumentFragments) or "parentElement"`),
 		),
+		el("div", { className: "warning" }).append(
+			el("p").append(T`
+				There are edge case when the mark can be missing. For example, the (utility) components with reactive
+				keys such as ${el("code", ".textContent")}, ${el("code", ".innerText")} or ${el("code", ".innerHTML")}.
+				As they change the content of the host element.
+			`),
+			el(code, { content: `
+				function Counter() {
+					const count = S(0);
+					return el("button",
+						{ textContent: count, type: "button" },
+						on("click", () => count.set(count.get() + 1)),
+					);
+				}
+			`, language: "js" }),
+		),
 
 		el("h4", t`Identifying reactive elements in the DOM`),
 		el("p").append(T`