⚡ 🐛 🔤 v0.9.4-alpha (#42)

* 🐛 fixes #41

* ⚡ adjust package size limits

* 🔤

* 📺 requestIdleCallback doesn need to be global

* 🔤 corrects irland page headers

* 📺 version

* ⚡ Signal ← SignalReadonly

* 🐛 ensures only one disconncetd listener

…for cleanup

* ⚡ 🔤 Better build and improve texting

* 🐛 logo alignemt (due to gh)

* 🔤 md enhancements

* 🔤 ⚡ products

Author: jaandrle

CONTRIBUTING.md

@@ -75,11 +75,14 @@ where everyone feels comfortable participating.
 
 …see [BS folder](./bs/README.md) for more info.
 
+## Categorizing [![git3moji](https://img.shields.io/badge/git3moji%E2%80%93v1-%E2%9A%A1%EF%B8%8F%F0%9F%90%9B%F0%9F%93%BA%F0%9F%91%AE%F0%9F%94%A4-fffad8.svg?style=flat-square)](https://robinpokorny.github.io/git3moji/) <!-- editorconfig-checker-disable-line -->
+We use [git3moji](https://git3moji.netlify.app/) for commit messages, issue titles, pull request titles and in other
+areas. To make categorizing quick and consistent.
+
 ## Commit Guidelines
 
-We use
-[![git3moji](https://img.shields.io/badge/git3moji%E2%80%93v1-%E2%9A%A1%EF%B8%8F%F0%9F%90%9B%F0%9F%93%BA%F0%9F%91%AE%F0%9F%94%A4-fffad8.svg?style=flat-square)](https://robinpokorny.github.io/git3moji/) <!-- editorconfig-checker-disable-line -->
-for commit messages. This helps keep the commit history clear and consistent.
+We use [git3moji](https://git3moji.netlify.app/) for commit messages. This helps keep the commit history clear and
+consistent.
 
 ```
 :emoji: Short summary of the change

README.md

@@ -1,47 +1,35 @@
 **Alpha**
-| [source code on GitHub](https://github.com/jaandrle/deka-dom-el)
-| [*mirrored* on Gitea](https://gitea.jaandrle.cz/jaandrle/deka-dom-el)
-| [![git3moji](https://img.shields.io/badge/git3moji%E2%80%93v1-%E2%9A%A1%EF%B8%8F%F0%9F%90%9B%F0%9F%93%BA%F0%9F%91%AE%F0%9F%94%A4-fffad8.svg?style=flat-square)](https://robinpokorny.github.io/git3moji/) <!-- editorconfig-checker-disable-line -->
-
-<p align="center">
-	<img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180">
-</p>
-
-# Deka DOM Elements (dd\<el\> or DDE)
+| [Docs](https://jaandrle.github.io/deka-dom-el "Official documentation and guide site")
+| [NPM](https://www.npmjs.com/package/deka-dom-el "Official NPM package page")
+| [GitHub](https://github.com/jaandrle/deka-dom-el "Official GitHub repository")
+([*Gitea*](https://gitea.jaandrle.cz/jaandrle/deka-dom-el "GitHub repository mirror on my own Gitea instance"))
 
 ***Vanilla for flavouring — a full-fledged feast for large projects***
 
-*…use simple DOM API by default and library tools and logic when you need them*
-
 ```javascript
 // 🌟 Reactive component with clear separation of concerns
 document.body.append(
 	el(EmojiCounter, { initial: "🚀" })
 );
 
 function EmojiCounter({ initial }) {
-	// ✨ State - Define reactive data
+	// ✨ - Define reactive data
 	const count = S(0);
 	const emoji = S(initial);
+	const textContent = S(() => `Hello World ${emoji.get().repeat(count.get())}`);
 
-	/** @param {HTMLOptionElement} el */
-	const isSelected= el=> (el.selected= el.value===initial);
-
-	// 🔄 View - UI updates automatically when signals change
+	// 🔄 - UI updates automatically when signals change
 	return el().append(
-		el("p", {
-			className: "output",
-			textContent: S(() =>
-				`Hello World ${emoji.get().repeat(count.get())}`),
-		}),
+		el("p", { textContent, className: "output" }),
 
-		// 🎮 Controls - Update state on events
+		// 🎮 - Update state on events
 		el("button", { textContent: "Add Emoji" },
-			on("click", () => count.set(count.get() + 1))
+			on("click", () => count.set(count.get() + 1)),
 		),
 
-		el("select", null, on.defer(el=> el.value= initial),
-			on("change", e => emoji.set(e.target.value))
+		el("select", null,
+			on.defer(el=> el.value= initial),
+			on("change", e => emoji.set(e.target.value)),
 		).append(
 			el(Option, "🎉"),
 			el(Option, "🚀"),
@@ -53,6 +41,13 @@ function Option({ textContent }){
 	return el("option", { value: textContent, textContent });
 }
 ```
+*…use simple DOM API by default and library tools and logic when you need them*
+
+<p align="center">
+	<img src="docs/assets/logo.svg" alt="Deka DOM Elements Logo" width="180" height="180">
+</p>
+
+# Deka DOM Elements (dd\<el\> or DDE)
 
 Creating reactive elements, components, and Web Components using the native
 [IDL](https://developer.mozilla.org/en-US/docs/Glossary/IDL)/JavaScript DOM API enhanced with
@@ -64,19 +59,21 @@ Creating reactive elements, components, and Web Components using the native
 - ☑️ **Lightweight** — ~10-15kB minified (original goal 10kB) with **zero**/minimal dependencies
 - ✅ **Declarative & functional approach** for clean, maintainable code
 - ✅ **Signals and events** for reactive UI
+- ✅ **Auto-releasing resources** for memory management but nice development experience
 - ✅ **Memoization for performance** — optimize rendering with intelligent caching
-- ✅ **Optional build-in signals** with support for custom reactive implementations (#39)
-- ✅ **Server-side rendering** support via [jsdom](https://github.com/jsdom/jsdom)
+- ☑️ **Optional build-in signals** with support for custom reactive implementations (#39)
+- ☑️ **Server-side rendering** support via [jsdom](https://github.com/jsdom/jsdom)
 - ✅ **TypeScript support**
-- ☑️ **Support for debugging with browser DevTools** without extensions
+- ✅ **Support for debugging with browser DevTools** without extensions
 - ☑️ **Enhanced Web Components** support
 
 ## Getting Started
 
-### Documentation
+### Quick Links
 
 - [**Documentation and Guide**](https://jaandrle.github.io/deka-dom-el)
 - [**Examples**](https://jaandrle.github.io/deka-dom-el/p15-examples.html)
+- [**Changelog**](https://github.com/jaandrle/deka-dom-el/releases)
 
 ### Installation
 
@@ -87,7 +84,7 @@ npm install deka-dom-el --save
 …or via CDN / Direct Script:
 
 For CDN links and various build formats (ESM/IIFE, with/without signals, minified/unminified), see the [interactive
-format selector](https://jaandrle.github.io/deka-dom-el/) on the documentation site.
+format selector](https://jaandrle.github.io/deka-dom-el/#h-getting-started) on the documentation site.
 
 ```html
 <!-- Example with IIFE build (creates a global DDE object) -->
@@ -141,9 +138,9 @@ get started, coding standards, commit guidelines, and the pull request process.
 	interfaces or HTML code.
 - [pota](https://pota.quack.uy/) — small and pluggable Reactive Web Renderer. It's compiler-less, includes an html
 	function, and a optimized babel preset in case you fancy JSX.
-- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) —
-	Functional DOM components without JSX/virtual DOM
 - [TarekRaafat/eleva](https://github.com/TarekRaafat/eleva) — A minimalist, lightweight, pure vanilla JavaScript
 	frontend runtime framework.
 - [didi/mpx](https://github.com/didi/mpx) — Mpx，一款具有优秀开发体验和深度性能优化的增强型跨端小程序框架
 - [mxjp/rvx](https://github.com/mxjp/rvx) — A signal based frontend framework
+- [jaandrle/dollar_dom_component](https://github.com/jaandrle/dollar_dom_component) —
+	Functional DOM components without JSX/virtual DOM (my old library)

bs/docs.js

@@ -2,7 +2,7 @@
 /* jshint esversion: 11,-W097, -W040, module: true, node: true, expr: true, undef: true *//* global echo, $, pipe, s, fetch, cyclicLoop */// editorconfig-checker-disable-line
 echo("Building static documentation files…");
 echo("Preparing…");
-import { path_target, pages as pages_registered, styles, dispatchEvent, t } from "../docs/ssr.js";
+import { path_target, pages as pages_registered, styles, currentPageId, dispatchEvent, t } from "../docs/ssr.js";
 import { createHTMl } from "./docs/jsdom.js";
 import { register, queue } from "../jsdom.js";
 const pkg= s.cat("package.json").xargs(JSON.parse);
@@ -28,6 +28,7 @@ for(const { id, info } of pages){
 	);
 	const { el }= await register(serverDOM.dom);
 	const { page }= await import(`../docs/${id}.html.js`);
+	currentPageId(id)
 	serverDOM.document.body.append(
 		el(page, { pkg, info }),
 	);

dist/esm-with-signals.js

@@ -41,6 +41,11 @@ function observedAttributes(instance, observedAttribute2) {
 function kebabToCamel(name) {
 	return name.replace(/-./g, (x) => x[1].toUpperCase());
 }
+function requestIdle() {
+	return new Promise(function(resolve) {
+		(globalThis.requestIdleCallback || requestAnimationFrame)(resolve);
+	});
+}
 
 // src/dom-lib/common.js
 var enviroment = {
@@ -179,11 +184,6 @@ function connectionsChangesObserverConstructor() {
 		is_observing = false;
 		observer.disconnect();
 	}
-	function requestIdle() {
-		return new Promise(function(resolve) {
-			(requestIdleCallback || requestAnimationFrame)(resolve);
-		});
-	}
 	async function collectChildren(element) {
 		if (store.size > 30)
 			await requestIdle();
@@ -696,23 +696,20 @@ var queueSignalWrite = /* @__PURE__ */ (() => {
 })();
 
 // src/signals-lib/signals-lib.js
-var Signal = oCreate(null, {
+var SignalReadOnly = oCreate(null, {
 	get: { value() {
 		return read(this);
 	} },
-	set: { value(...v) {
-		return write(this, ...v);
-	} },
 	toJSON: { value() {
 		return read(this);
 	} },
 	valueOf: { value() {
 		return this[mark] && this[mark].value;
 	} }
 });
-var SignalReadOnly = oCreate(Signal, {
-	set: { value() {
-		return;
+var Signal = oCreate(SignalReadOnly, {
+	set: { value(...v) {
+		return write(this, ...v);
 	} }
 });
 function isSignal(candidate) {
@@ -824,7 +821,7 @@ signal.el = function(s, map) {
 };
 function requestCleanUpReactives(host) {
 	if (!host || !host[key_reactive]) return;
-	(requestIdleCallback || setTimeout)(function() {
+	requestIdle().then(function() {
 		host[key_reactive] = host[key_reactive].filter(([s, el]) => el.isConnected ? true : (removeSignalListener(...s), false));
 	});
 }
@@ -889,9 +886,10 @@ var signals_config = {
 function removeSignalsFromElements(s, listener, ...notes) {
 	const { current } = scope;
 	current.host(function(element) {
-		if (!element[key_reactive]) element[key_reactive] = [];
+		const is_first = !element[key_reactive];
+		if (is_first) element[key_reactive] = [];
 		element[key_reactive].push([[s, listener], ...notes]);
-		if (current.prevent) return;
+		if (!is_first || current.prevent) return;
 		on.disconnected(
 			() => (
 				/*! Clears all Signals listeners added in the current scope/host (`S.el`, `assign`, …?).
@@ -906,7 +904,7 @@ var cleanUpRegistry = new FinalizationRegistry(function(s) {
 });
 function create(is_readonly, value, actions) {
 	const varS = oCreate(is_readonly ? SignalReadOnly : Signal);
-	const SI = toSignal(varS, value, actions, is_readonly);
+	const SI = toSignal(varS, value, actions);
 	cleanUpRegistry.register(SI, SI[mark]);
 	return SI;
 }
@@ -918,7 +916,7 @@ var protoSigal = oAssign(oCreate(), {
 		this.skip = true;
 	}
 });
-function toSignal(s, value, actions, readonly = false) {
+function toSignal(s, value, actions) {
 	const onclear = [];
 	if (typeOf(actions) !== "[object Object]")
 		actions = {};
@@ -934,8 +932,7 @@ function toSignal(s, value, actions, readonly = false) {
 			actions,
 			onclear,
 			host,
-			listeners: /* @__PURE__ */ new Set(),
-			readonly
+			listeners: /* @__PURE__ */ new Set()
 		}),
 		enumerable: false,
 		writable: false,