AegisJSProject · shgysk8zer0 · Mar 13, 2026 · Mar 13, 2026
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.2] - 2026-03-13
+
+### Added
+- Add support for boolean attributes
+- Add `$render()` (observer & replace children of target)
+
 ## [v1.0.1] - 2026-03-11
 
 ### Added

@@ -16,6 +16,7 @@ <h1>Hello, World!</h1>
 		</header>
 		<nav id="nav"></nav>
 		<main id="main">
+			<div id="container"></div>
 			<details name="section">
 				<summary>Request</summary>
 				<pre>

@@ -1,40 +1,56 @@
-import { $text, $attr, $observe } from '@aegisjsproject/iota';
+import { $text, $attr, $render } from '@aegisjsproject/iota';
 import { createHTMLParser } from '@aegisjsproject/core/parsers/html.js';
-import { onInput, observeEvents, createCallback } from '@aegisjsproject/callback-registry';
+import { onInput, onClick, observeEvents, createCallback, signal as signalAttr, registerSignal } from '@aegisjsproject/callback-registry';
 import { sanitizer as sanitizerConfig } from '@aegisjsproject/sanitizer/config/base.js';
 // import pkg from '/package.json' with { type: 'json' }; // Wrong mime-type causes error
 import properties from '@aegisjsproject/styles/css/properties.css' with { type: 'css' };
 import theme from '@aegisjsproject/styles/css/theme.css' with { type: 'css' };
 import misc from '@aegisjsproject/styles/css/misc.css' with { type: 'css' };
 import forms from '@aegisjsproject/styles/css/forms.css' with { type: 'css' };
 import btn from '@aegisjsproject/styles/css/button.css' with { type: 'css' };
+import './reactive-element.js';
 
 // document.title = pkg.name;
 document.adoptedStyleSheets = [properties, theme, misc, forms, btn];
 
-// Need to force-allow comments for text signals
+// Need to force-allow comments for text signals until change is made in lib
 const html = createHTMLParser({
 	...sanitizerConfig,
 	comments: true,
 });
 
 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 $value = stack.use($attr('value', () => $name.get()));
+const $hidden = stack.use($attr('hidden', false));
+const $open = stack.use($attr('open', false));
+const $disabled = $attr('disabled', false);
+const $script = $text('alert(location.href)');
+const toggleOpen = createCallback(() => $open.set(! $open.get()));
+const toggleHidden = createCallback(() => $hidden.set(! $hidden.get()));
+stack.defer(() => $disabled.set(true));
 
-document.getElementById('main').prepend(html`<h1>Hello, ${$name}!</h1>
+$render(html`
+	<h1 ${$hidden}>Hello, ${$name}!</h1>
+	<script>${$script}</script>
 	<form id="container">
 		<div class="form-group">
 			<label for="name" class="input-label required">Name</label>
-			<input type="text" id="name" class="input" name="name" ${$value} placeholder="Enter your name" ${onInput}="${createCallback($name.handleEvent)}" required="" />
+			<input type="text" id="name" class="input" name="name" placeholder="Enter your name" ${onInput}="${createCallback($name.handleEvent)}"  ${signalAttr}="${signal}" ${$disabled} required="" />
 		</div>
 		<div>
-			<button type="reset" class="btn btn-warning">Reset</button>
-			<button type="button" class="btn btn-danger" command="--dispose" commandfor="root">Dispose</button>
+			<button type="reset" class="btn btn-warning" ${$disabled}>Reset</button>
+			<button type="button" class="btn btn-danger" command="--dispose" commandfor="root" ${$disabled}>Dispose</button>
 		</div>
 	</form>
-`);
+	<button type="button" class="btn btn-primary" ${onClick}="${toggleOpen}" ${signalAttr}="${signal}"  ${$disabled}>Toggle Dialog</button>
+	<button type="button" class="btn btn-warning" ${onClick}="${toggleHidden}" ${signalAttr}="${signal}"  ${$disabled}>Toggle Hidden</button>
+	<dialog ${$open}>
+		<p>Lorem Ipsum</p>
+		<button type="button" class="btn btn-danger" ${onClick}="${toggleOpen}"  ${$disabled}>Toggle</button>
+	</dialog>
+`, 'container');
 
 document.documentElement.addEventListener('command', ({ source, command }) => {
 	if (command === '--dispose') {
@@ -43,11 +59,5 @@ document.documentElement.addEventListener('command', ({ source, command }) => {
 	}
 }, { signal: controller.signal });
 
-stack.defer(() => {
-	for (const el of document.forms.container.elements) {
-		el.disabled = true;
-	}
-});
-
-$observe();
+// This is called for an external library.
 observeEvents();
@@ -3,7 +3,7 @@ export { registerSignal, getSignalFromRef, hasSignalRef, unregisterSignal } from
 export { DisposableComputed, DisposableState, $computed, $signal } from './disposable.js';
 export {
 	watchSignal, unwatchSignal, unwatchSignalCallback, observeAttrSignalRefs, observeSignalRefs,
-	observeTextSignalRefs, $watch, $unwatch, $observe,
+	observeTextSignalRefs, $watch, $unwatch, $observe, $render,
 } from './watcher.js';
 export { TextComputed, TextState, $text } from './text.js';
 export { AttrComputed, AttrState, $attr } from './attr.js';
@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/iota",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "A Signals-based reactivity library",
   "keywords": [
     "signals",

@@ -2,6 +2,8 @@ import { Signal } from '@shgysk8zer0/signals';
 import { hasSignalRef, getSignalFromRef } from './registry.js';
 import { SIGNAL_DATA_ATTR } from './attr.js';
 
+const ATTR_OWNER_KEY = Symbol('Attr:owner');
+
 const noop = () => undefined;
 /**
  * @type {boolean}
@@ -38,6 +40,13 @@ let updating = false;
  * @returns {void}
  */
 
+/**
+ * @typedef ObserverConfigObject
+ * @property {DisposableStack|AsyncDisposable} [stack]
+ * @property {AbortSignal} [signal]
+ * @property {DocumentOrShadowRoot} [base=document]
+ */
+
 /**
  * @template T
  * @type {WeakMap<AnySignal<T>, Set<SignalObserverCallback<T>>>}
@@ -137,7 +146,12 @@ export function unwatchSignalCallback(signal, callback) {
 	}
 }
 
-
+/**
+ *
+ * @param @param {DocumentOrShadowRoot|Element|DocumentFragment|string} [root=document.body]
+ * @param {ObserverConfigObject} [config]
+ * @returns {DocumentOrShadowRoot|Element|DocumentFragment}
+ */
 export function observeTextSignalRefs(root = document.body, { stack, signal, base = document } = {}) {
 	if (typeof root === 'string') {
 		return observeTextSignalRefs(base.getElementById(root), { stack, signal });
@@ -163,6 +177,12 @@ export function observeTextSignalRefs(root = document.body, { stack, signal, bas
 	}
 }
 
+/**
+ *
+ * @param {DocumentOrShadowRoot|Element|DocumentFragment|string} [root=document.body]
+ * @param {ObserverConfigObject} [config]
+ * @returns {DocumentOrShadowRoot|Element|DocumentFragment}
+ */
 export function observeAttrSignalRefs(root = document.body, { stack, signal, base = document } = {}) {
 	if (typeof root === 'string') {
 		return observeAttrSignalRefs(base.getElementById(root), { stack, signal });
@@ -175,10 +195,28 @@ export function observeAttrSignalRefs(root = document.body, { stack, signal, bas
 			if (hasSignalRef(key)) {
 				const sig = getSignalFromRef(key);
 				const attr = root.ownerDocument.createAttribute(sig.name);
-				attr.value = sig.get();
-				el.setAttributeNode(attr);
+				const val = sig.get();
+
+				if (val !== false) {
+					attr.value = sig.get();
+					el.setAttributeNode(attr);
+				}
+
+				Object.defineProperty(attr, ATTR_OWNER_KEY, { value: el, enumerable: false, writable: false, configurable: false });
 				el.removeAttribute(SIGNAL_DATA_ATTR);
-				watchSignal(sig, newVal => attr.value = newVal);
+
+				watchSignal(sig, newVal => {
+					if (typeof newVal === 'boolean') {
+						attr[ATTR_OWNER_KEY].toggleAttribute(attr.name, newVal);
+					} else {
+						attr.value = newVal;
+
+						if (! (attr.ownerElement instanceof Element)) {
+							attr[ATTR_OWNER_KEY].setAttributeNode(attr);
+						}
+					}
+				});
+
 				stack?.defer?.(sig[Symbol.dispose]?.bind?.(sig));
 				signal?.addEventListener?.('abort', sig[Symbol.dispose]?.bind?.(sig), { once: true });
 			}
@@ -188,6 +226,12 @@ export function observeAttrSignalRefs(root = document.body, { stack, signal, bas
 	return root;
 }
 
+/**
+ *
+ * @param {DocumentOrShadowRoot|Element|DocumentFragment|string} [root=document.body]
+ * @param {ObserverConfigObject} [config]
+ * @returns {DocumentOrShadowRoot}
+ */
 export function observeSignalRefs(root = document.body, { stack, signal, base = document } = {}) {
 	if (typeof root === 'string') {
 		return observeSignalRefs(base.getElementById(root), { stack, signal });
@@ -199,3 +243,26 @@ export function observeSignalRefs(root = document.body, { stack, signal, base =
 }
 
 export const $observe = observeSignalRefs;
+
+/**
+ *
+ * @param {Element|DocumentFragment} content
+ * @param {string|Element|DocumentFragment|DocumentOrShadowRoot} target
+ * @param {ObserverConfigObject} config
+ * @returns {Element|DocumentFragment}
+ */
+export function $render(content, target, { stack, signal, base = document } = {}) {
+	if (content instanceof HTMLTemplateElement) {
+		return $render(content.content.cloneNode(true), target, { stack, signal, base });
+	} else if (typeof target === 'string') {
+		return $render(content, base.getElementById(target), { stack, signal, base });
+	} else if (! (target instanceof Element || target instanceof DocumentFragment || target instanceof ShadowRoot)) {
+		throw new TypeError('Target must be an element or an ID.');
+	} else if (! (content instanceof Element || content instanceof DocumentFragment)) {
+		throw new TypeError('Content must be an Element or DocumentFragment.');
+	} else {
+		$observe(content, { stack, signal });
+		target.replaceChildren(content);
+		return content;
+	}
+}