Update toString() on signals to avoid need for hydration step

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.4] - 2026-03-15
+
+### Changed
+- Update `toString()` on signals to avoid need for hydration step
+
 ## [v1.0.3] - 2026-03-14
 
 ### Added

attr.js

@@ -1,7 +1,6 @@
+import { escapeHTML } from '@aegisjsproject/escape/html.js';
 import { DisposableComputed, DisposableState } from './disposable.js';
-
-export const SIGNAL_DATA_ATTR = 'data-attr-signal';
-export const SIGNAL_DATA_ATTR_SELECTOR = `[${SIGNAL_DATA_ATTR}]`;
+import { SIGNAL_DATA_ATTR } from './consts.js';
 
 export class AttrState extends DisposableState {
 	#name;
@@ -25,7 +24,15 @@ export class AttrState extends DisposableState {
 	}
 
 	toString() {
-		return `${SIGNAL_DATA_ATTR}="${this.ref}"`;
+		const val = this.get();
+
+		if (Array.isArray(val)) {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}" ${this.#name}="${escapeHTML(val.join(' '))}"`;
+		} else if (val === false) {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}"`;
+		} else {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}" ${this.#name}="${escapeHTML(val)}"`;
+		}
 	}
 }
 
@@ -50,7 +57,15 @@ export class AttrComputed extends DisposableComputed {
 	}
 
 	toString() {
-		return `${SIGNAL_DATA_ATTR}="${this.ref}"`;
+		const val = this.get();
+
+		if (Array.isArray(val)) {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}" ${this.#name}="${escapeHTML(val.join(' '))}"`;
+		} else if (val === false) {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}"`;
+		} else {
+			return `${SIGNAL_DATA_ATTR}="${this.ref}" ${this.#name}="${escapeHTML(val)}"`;
+		}
 	}
 }
 

consts.js

@@ -0,0 +1,4 @@
+export const NOOP = () => undefined;
+export const ZERO_WIDTH_SPACE = '\u200B';
+export const SIGNAL_DATA_ATTR = 'data-attr-signal';
+export const SIGNAL_DATA_ATTR_SELECTOR = `[${SIGNAL_DATA_ATTR}]`;

index.js

@@ -15,7 +15,7 @@ document.adoptedStyleSheets = [properties, theme, misc, forms, btn];
 const stack = new DisposableStack();
 const controller = stack.adopt(new AbortController(), controller => controller.abort());
 const signal = registerSignal(controller.signal);
-const $name = stack.use($text('Silly person'));
+const $name = stack.use($text('Silly person <script>alert("1")</script>'));
 const $nameAttr = stack.use($data('user-name', () => $name.get()));
 const $isHidden = stack.use($hidden(false));
 const $desc = stack.use($aria('description', () => `Description for ${$name.get()}.`));

list.js

@@ -0,0 +1,53 @@
+import { DisposableState, DisposableComputed } from './disposable.js';
+
+const ZERO_WIDTH_SPACE = '\u200B';
+
+export class ListComputed extends DisposableComputed {
+	static REF_PREFIX = '__list_signal';
+
+	constructor(callback, config) {
+		super(() => {
+			const value = callback();
+
+			if (Array.isArray(value)) {
+				return value;
+			} else if (typeof value[Symbol.iterator] === 'function') {
+				return Array.from(value);
+			} else {
+				return [value];
+			}
+		}, config);
+	}
+
+	map(cb) {
+		return new ListComputed(cb);
+	}
+
+	toString() {
+		return `${ZERO_WIDTH_SPACE}<!--${this.ref}-->`;
+	}
+}
+
+export class ListState extends DisposableState {
+	constructor(value, config) {
+		if (Array.isArray(value)) {
+			super(value, config);
+		} else if (typeof value[Symbol.iterator] === 'function') {
+			super(Array.from(value), config);
+		} else {
+			super([value], config);
+		}
+	}
+
+	map(cb) {
+		return new ListComputed(cb);
+	}
+
+	toString() {
+		return `${ZERO_WIDTH_SPACE}<!--${this.ref}-->`;
+	}
+}
+
+export const $list = (val, config) => typeof val === 'function'
+	? new ListComputed(val, config)
+	: new ListState(val, config);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/iota",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "A Signals-based reactivity library",
   "keywords": [
     "signals",
@@ -76,6 +76,7 @@
   },
   "homepage": "https://github.com/AegisJSProject/iota#readme",
   "dependencies": {
+    "@aegisjsproject/escape": "^1.0.4",
     "@shgysk8zer0/signals": "^0.0.3"
   },
   "devDependencies": {
@@ -84,7 +85,7 @@
     "@rollup/plugin-terser": "^1.0.0",
     "@shgysk8zer0/eslint-config": "^1.0.7",
     "@shgysk8zer0/http-server": "^1.1.1",
-    "@shgysk8zer0/importmap": "^1.8.2",
+    "@shgysk8zer0/importmap": "^1.8.3",
     "eslint": "^10.0.3",
     "rollup": "^4.59.0"
   }