Add $html tagged template

CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [v1.0.8] - 2026-03-18
+
+### Added
+- Add `$html` tagged template (uses `@aegisjsproject/core/parsers/html.js`)
+
 ## [v1.0.7] - 2026-03-17
 
 ### Added

html.js

@@ -0,0 +1,4 @@
+import { html } from '@aegisjsproject/core/parsers/html.js';
+import { $observe } from './watcher.js';
+
+export const $html = (strings, ...values) => $observe(html(strings, ...values));

index.js

@@ -1,13 +1,13 @@
-import { $text, $render, $disabled, $open, $hidden, $classList, $data, $aria, $log } from '@aegisjsproject/iota';
-import { html } from '@aegisjsproject/core/parsers/html.js';
+import { $text, $disabled, $open, $hidden, $classList, $data, $aria, $log, $html } from '@aegisjsproject/iota';
+// import { html } from '@aegisjsproject/core/parsers/html.js';
 import { onInput, onClick, observeEvents, createCallback, signal as signalAttr, registerSignal } from '@aegisjsproject/callback-registry';
 // 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';
+import './iota-element.js';
 
 // document.title = pkg.name;
 document.adoptedStyleSheets = [properties, theme, misc, forms, btn];
@@ -29,7 +29,7 @@ const toggleHidden = createCallback(() => $isHidden.set(! $isHidden.get()));
 stack.defer(() => $isDisabled.set(true));
 $log($name, $isHidden, $isDisabled);
 
-$render(html`
+document.getElementById('container').append($html`
 	<h1 ${$isHidden} data-test="works">Hello, ${$name}!</h1>
 	<script>${$script}</script>
 	<form id="container" ${$class}>
@@ -50,7 +50,7 @@ $render(html`
 		<p ${$desc}>The current name is <q>${$name}</q>
 		<button type="button" class="btn btn-danger" ${onClick}="${toggleOpen}"  ${$isDisabled}>Toggle</button>
 	</dialog>
-`, 'container');
+`);
 
 document.documentElement.addEventListener('command', ({ source, command }) => {
 	if (command === '--dispose') {

iota.js

@@ -11,3 +11,4 @@ export {
 	$open, $readOnly, $requried, $selected, $value, $data, $aria,
 } from './attr.js';
 export { IotaElement } from './iota-element.js';
+export { $html } from './html.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aegisjsproject/iota",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "description": "A Signals-based reactivity library",
   "keywords": [
     "signals",

watcher.js

@@ -256,7 +256,7 @@ export const $observe = observeSignalRefs;
  * @param {ObserverConfigObject} config
  * @returns {Element|DocumentFragment}
  */
-export function $render(content, target, { stack, signal, base = document } = {}) {
+export function $render(content, target = document.body, { stack, signal, base = document } = {}) {
 	if (content instanceof HTMLTemplateElement) {
 		return $render(content.content.cloneNode(true), target, { stack, signal, base });
 	} else if (typeof target === 'string') {