⚡ bs/lint

README.md

@@ -86,7 +86,10 @@ To balance these requirements, numerous compromises have been made. To summarize
 	- [dist/](dist/) (`https://cdn.jsdelivr.net/gh/jaandrle/deka-dom-el/dist/`…)
 
 ## Signals
-- [Signals — whats going on behind the scenes \| by Ryan Hoffnan \| ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
+- [Signals — whats going on behind the scenes \| by Ryan Hoffnan \|
-- [The Evolution of Signals in JavaScript - DEV Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
+	ITNEXT](https://itnext.io/signals-whats-going-on-behind-the-scenes-ec858589ea63)
-- there is also [tc39/proposal-signals: A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-signals)
+- [The Evolution of Signals in JavaScript - DEV
+	Community](https://dev.to/this-is-learning/the-evolution-of-signals-in-javascript-8ob)
+- there is also [tc39/proposal-signals:
+	A proposal to add signals to JavaScript.](https://github.com/tc39/proposal-signals)
 - [Observer pattern - Wikipedia](https://en.wikipedia.org/wiki/Observer_pattern)

docs/components/examples/debugging/dom-reactive-mark.js

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

docs/components/examples/signals/debugging-console.js

@@ -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...');
+	console.log('Computing greeting...');
-  return 'Hello, ' + name.get();
+	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

docs/components/examples/ssr/start.js

@@ -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("div", { className: "container" }).append(
-    el("h1", "Hello, SSR World!"),
+		el("h1", "Hello, SSR World!"),
-    el("p", "This content was rendered on the server.")
+		el("p", "This content was rendered on the server.")
-  )
+	)
 );
 
 // Wait for any async operations to complete

docs/global.css.js

@@ -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-main: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
-	--font-mono: 'Fira Code', 'JetBrains Mono', 'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
+		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;

docs/p04-signals.html.js

@@ -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`

docs/p07-debugging.html.js

@@ -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

docs/p08-ssr.html.js

@@ -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.`,

index.d.ts

@@ -54,7 +54,8 @@ type IsReadonly<T, K extends keyof T> =
 type ElementAttributes<T extends SupportedElement>= Partial<{
 	[K in keyof _fromElsInterfaces<T>]:
 		_fromElsInterfaces<T>[K] extends ((...p: any[])=> any)
-			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=> ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
+			? _fromElsInterfaces<T>[K] | ((...p: Parameters<_fromElsInterfaces<T>[K]>)=>
+																	ddeSignal<ReturnType<_fromElsInterfaces<T>[K]>>)
 			: (IsReadonly<_fromElsInterfaces<T>, K> extends false
 				? _fromElsInterfaces<T>[K] | ddeSignal<_fromElsInterfaces<T>[K]>
 				: ddeStringable)

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "deka-dom-el",
-	"version": "0.8.0",
+	"version": "0.9.0",
 	"description": "A low-code library that simplifies the creation of native DOM elements/components using small wrappers and tweaks.",
 	"author": "Jan Andrle <andrle.jan@centrum.cz>",
 	"license": "MIT",
@@ -92,11 +92,11 @@
 		"typescript"
 	],
 	"devDependencies": {
-		"@size-limit/preset-small-lib": "~11.0",
+		"@size-limit/preset-small-lib": "~11.2",
 		"dts-bundler": "~0.1",
 		"editorconfig-checker": "~6.0",
-		"esbuild": "~0.24",
+		"esbuild": "~0.25",
-		"jsdom": "~25.0",
+		"jsdom": "~26.0",
 		"jshint": "~2.13",
 		"nodejsscript": "^1.0.2",
 		"size-limit-node-esbuild": "~0.3"