balises 0.7.2 → 0.8.0

package/dist/balises.esm.js

@@ -97,6 +97,29 @@ function removeFromArray(array, item) {
 	}
 }
 /**
+* A tracking slot for .is() comparisons.
+* Self-removes from parent map when all targets are gone.
+* @internal
+*/
+var IsSlot = class {
+	targets = [];
+	#map;
+	#key;
+	constructor(map, key) {
+		this.#map = map;
+		this.#key = key;
+	}
+	deleteTarget(target) {
+		removeFromArray(this.targets, target);
+		if (!this.targets.length) this.#map.delete(this.#key);
+	}
+	/** Notify all targets that they may need to recompute */
+	notify() {
+		const copy = this.targets.slice();
+		for (let i = 0; i < copy.length; i++) copy[i].markDirty();
+	}
+};
+/**
 * A reactive value container. When the value changes, all dependent
 * computeds are marked dirty and subscribers are notified.
 *
@@ -106,6 +129,7 @@ var Signal = class {
 	#value;
 	#subs = [];
 	#targets = [];
+	#isSlots;
 	constructor(value) {
 		this.#value = value;
 	}
@@ -116,12 +140,19 @@ var Signal = class {
 	}
 	set value(v) {
 		if (Object.is(this.#value, v)) return;
+		const prev = this.#value;
 		this.#value = v;
 		const targets = this.#targets;
-		for (let i = 0; i < targets.length; i++) targets[i].markDirty();
+		const isSlots = this.#isSlots;
+		if (!isSlots) for (let i = 0; i < targets.length; i++) targets[i].markDirty();
+		else batch(() => {
+			isSlots.get(prev)?.notify();
+			isSlots.get(v)?.notify();
+			for (let i = 0; i < targets.length; i++) targets[i].markDirty();
+		});
 		if (this.#subs.length) if (isBatching()) enqueueBatchAll(this.#subs);
 		else {
-			const subs = [...this.#subs];
+			const subs = this.#subs.slice();
 			for (let i = 0; i < subs.length; i++) subs[i]();
 		}
 	}
@@ -154,6 +185,28 @@ var Signal = class {
 	peek() {
 		return this.#value;
 	}
+	/**
+	* Check if the signal's value equals the given value.
+	* Enables O(1) selection updates - only the old and new matching values
+	* trigger recomputes, not all dependents.
+	*
+	* @example
+	* ```ts
+	* const selected = signal<number | null>(null);
+	*
+	* // In each row - only 2 rows recompute when selection changes
+	* html`<tr class=${() => selected.is(row.id) ? 'danger' : ''}>...`
+	* ```
+	*/
+	is(value) {
+		if (context) {
+			const slots = this.#isSlots ?? (this.#isSlots = /* @__PURE__ */ new Map());
+			let slot = slots.get(value);
+			if (!slot) slots.set(value, slot = new IsSlot(slots, value));
+			context.trackSource(slot);
+		}
+		return Object.is(this.#value, value);
+	}
 	/** @internal */
 	get targets() {
 		return this.#targets;
@@ -190,6 +243,13 @@ var ReadonlySignal = class {
 	subscribe(fn) {
 		return this.#signal.subscribe(fn);
 	}
+	/**
+	* Check if the signal's value equals the given value.
+	* Enables O(1) selection updates.
+	*/
+	is(value) {
+		return this.#signal.is(value);
+	}
 };
 
 //#endregion
@@ -212,6 +272,7 @@ var Computed = class {
 	#targets = [];
 	#sources = [];
 	#sourceIndex = 0;
+	#isSlots;
 	constructor(fn) {
 		this.#fn = fn;
 		this.#recompute();
@@ -230,12 +291,33 @@ var Computed = class {
 	dispose() {
 		this.#fn = void 0;
 		const sources = this.#sources;
-		for (let i = 0; i < sources.length; i++) {
-			const source = sources[i];
-			if (source) source.deleteTarget(this);
-		}
+		for (let i = 0; i < sources.length; i++) sources[i]?.deleteTarget(this);
 		this.#sources = [];
 		this.#subs.length = 0;
+		this.#isSlots?.clear();
+	}
+	/**
+	* Check if the computed's value equals the given value.
+	* Enables O(1) selection updates - only the old and new matching values
+	* trigger recomputes, not all dependents.
+	*
+	* @example
+	* ```ts
+	* const selected = computed(() => items.find(i => i.active)?.id ?? null);
+	*
+	* // In each row - only 2 rows recompute when selection changes
+	* html`<tr class=${() => selected.is(row.id) ? 'danger' : ''}>...`
+	* ```
+	*/
+	is(value) {
+		if (this.#dirty) this.#recompute();
+		if (context) {
+			const slots = this.#isSlots ?? (this.#isSlots = /* @__PURE__ */ new Map());
+			let slot = slots.get(value);
+			if (!slot) slots.set(value, slot = new IsSlot(slots, value));
+			context.trackSource(slot);
+		}
+		return Object.is(this.#value, value);
 	}
 	/**
 	* Called by sources when accessed during recompute.
@@ -276,20 +358,20 @@ var Computed = class {
 				const t = targets[j];
 				if (!t.#dirty) queue.push(t);
 			}
-			if (c.#subs.length && c.#fn) toNotify.push({
-				c,
-				old: c.#value
-			});
+			if ((c.#subs.length || c.#isSlots?.size) && c.#fn) toNotify.push([c, c.#value]);
 		}
 		for (let i = 0; i < toNotify.length; i++) {
-			const { c, old } = toNotify[i];
+			const [c, old] = toNotify[i];
 			const notify = () => {
-				if (c.#fn) {
-					c.#recompute();
-					if (!Object.is(c.#value, old)) {
-						const subs = c.#subs;
-						for (let j = 0; j < subs.length; j++) subs[j]();
+				if (!c.#fn) return;
+				c.#recompute();
+				if (!Object.is(c.#value, old)) {
+					if (c.#isSlots) {
+						c.#isSlots.get(old)?.notify();
+						c.#isSlots.get(c.#value)?.notify();
 					}
+					const subs = c.#subs.slice();
+					for (let j = 0; j < subs.length; j++) subs[j]();
 				}
 			};
 			isBatching() ? enqueueBatchOne(notify) : notify();
@@ -317,10 +399,7 @@ var Computed = class {
 			const newLen = this.#sourceIndex;
 			if (newLen < prevLen) {
 				const sources = this.#sources;
-				for (let i = newLen; i < prevLen; i++) {
-					const source = sources[i];
-					if (source) source.deleteTarget(this);
-				}
+				for (let i = newLen; i < prevLen; i++) sources[i]?.deleteTarget(this);
 				sources.length = newLen;
 			}
 			this.#dirty = false;
@@ -588,15 +667,9 @@ var HTMLParser = class {
 		this.statics = [];
 		this.indexes = [];
 	}
-	isA(c) {
-		return c >= "a" && c <= "z" || c >= "A" && c <= "Z";
-	}
-	isT(c) {
-		return c >= "a" && c <= "z" || c >= "A" && c <= "Z" || c >= "0" && c <= "9" || c === "-" || c === ":";
-	}
-	isW(c) {
-		return c <= " " && c !== "";
-	}
+	isA = (c) => c >= "a" && c <= "z" || c >= "A" && c <= "Z";
+	isT = (c) => c >= "a" && c <= "z" || c >= "A" && c <= "Z" || c >= "0" && c <= "9" || c === "-" || c === ":";
+	isW = (c) => c <= " " && c !== "";
 };
 
 //#endregion
@@ -613,207 +686,237 @@ var HTMLParser = class {
 * - Arrays: ${items.map(i => html`<li>${i}</li>`)}
 *
 * Extend with plugins via html.with(...plugins) for additional interpolation types.
+*
+* Templates are cached by their static string parts - the DOM structure is built
+* once and cloned for subsequent renders, significantly improving performance.
 */
 const SVG_NS = "http://www.w3.org/2000/svg";
+/** Template cache - keyed by static string parts identity */
+const cache = /* @__PURE__ */ new WeakMap();
 /**
-* Create a computed that wraps function execution in a scope.
+* Wrap a function in a scoped computed.
 * Nested computeds/effects are automatically disposed on re-run.
-* Returns [computed, dispose] - dispose cleans up both the computed
-* and any nested reactives from the last run.
+* Registers disposal of both the computed and nested reactives.
 */
-function scopedComputed(fn) {
-	let disposeScope;
+function wrapFn(fn, d) {
+	let cleanup;
 	const c = computed(() => {
-		disposeScope?.();
-		const [result, dispose] = scope(fn);
-		disposeScope = dispose;
-		return result;
+		cleanup?.();
+		const [r, dispose] = scope(fn);
+		cleanup = dispose;
+		return r;
 	});
-	return [c, () => (c.dispose(), disposeScope?.())];
+	d.push(() => (c.dispose(), cleanup?.()));
+	return c;
 }
 /**
 * Bind a value to an update function.
-* If reactive, subscribes and returns unsubscribe. Otherwise returns null.
 * Functions are wrapped in computed() for automatic reactivity.
 * Nested computeds/effects created inside functions are automatically
 * disposed when the function re-runs or the binding is disposed.
 */
-function bind(value, update) {
-	let dispose;
-	if (typeof value === "function") [value, dispose] = scopedComputed(value);
-	if (isSignal(value)) {
-		update(value.value);
-		const unsub = value.subscribe(() => update(value.value));
-		return dispose ? () => (unsub(), dispose()) : unsub;
-	}
-	update(value);
+function bind(v, update, d) {
+	if (typeof v === "function") v = wrapFn(v, d);
+	if (isSignal(v)) {
+		update(v.value);
+		d.push(v.subscribe(() => update(v.value)));
+	} else update(v);
+}
+/**
+* Collect nodes for all bindings using a single TreeWalker pass.
+* TreeWalker with filter 129 (SHOW_ELEMENT | SHOW_COMMENT) visits nodes
+* in the same order they were created, matching our nodeIndex counter.
+* Bindings are in document order but may share nodes (multiple attrs).
+*/
+function collectBindingNodes(frag, bindings) {
+	if (!bindings.length) return [];
+	const result = new Array(bindings.length);
+	const walker = document.createTreeWalker(frag, 129);
+	let nodeIndex = -1;
+	let node = null;
+	for (let i = 0; i < bindings.length; i++) {
+		const targetIndex = bindings[i][1];
+		while (nodeIndex < targetIndex) {
+			node = walker.nextNode();
+			nodeIndex++;
+		}
+		result[i] = node;
+	}
+	return result;
 }
 /** A parsed HTML template. Call render() to create live DOM. */
-var Template = class {
+var Template = class Template {
+	#strings;
+	#values;
+	#plugins;
 	constructor(strings, values, plugins = []) {
-		this.strings = strings;
-		this.values = values;
-		this.plugins = plugins;
+		this.#strings = strings;
+		this.#values = values;
+		this.#plugins = plugins;
 	}
 	/**
 	* Parse template and create live DOM.
 	* Returns the fragment and a dispose function to clean up subscriptions.
+	*
+	* Templates are cached by their static string parts - subsequent renders
+	* clone the cached DOM structure instead of rebuilding it.
 	*/
 	render() {
-		const fragment = document.createDocumentFragment();
-		const disposers = [];
-		const stack = [fragment];
-		const parser = new HTMLParser();
-		const values = this.values;
-		const plugins = this.plugins;
-		const handleAttribute = (el, [name, statics, indexes]) => {
-			const idx0 = indexes[0];
-			if (name[0] === "@") {
-				if (idx0 != null) {
-					const handler = values[idx0];
-					el.addEventListener(name.slice(1), handler);
-					disposers.push(() => el.removeEventListener(name.slice(1), handler));
-				}
-				return;
-			}
-			if (name[0] === ".") {
-				if (idx0 != null) {
-					const unsub = bind(values[idx0], (v) => {
-						el[name.slice(1)] = v;
-					});
-					if (unsub) disposers.push(unsub);
-				}
-				return;
-			}
-			if (!indexes.length) {
-				const value = statics[0] ?? "";
-				el.setAttribute(name, value);
-				return;
-			}
-			const reactives = [];
-			for (const idx of indexes) {
-				const v = values[idx];
-				if (typeof v === "function") {
-					const [c, dispose] = scopedComputed(v);
-					values[idx] = c;
-					reactives.push(c);
-					disposers.push(dispose);
-				} else if (isSignal(v)) reactives.push(v);
-			}
-			const update = () => {
-				let result = statics[0];
-				for (let i = 0; i < indexes.length; i++) {
-					const v = values[indexes[i]];
-					const val = isSignal(v) ? v.value : v;
-					if (indexes.length === 1 && (val == null || val === false)) {
-						el.removeAttribute(name);
-						return;
-					}
-					result += (val === true ? "" : val ?? "") + statics[i + 1];
-				}
-				el.setAttribute(name, result);
-			};
-			update();
-			for (const s of reactives) disposers.push(s.subscribe(update));
-		};
-		/**
-		* Bind dynamic content at a marker position.
-		* Tries plugins first (first match wins), then falls back to default handling.
-		*/
-		const bindContent = (marker, value) => {
-			for (const plugin of plugins) {
-				const binder = plugin(value);
-				if (binder) {
-					const pluginDisposers = [];
-					binder(marker, pluginDisposers);
-					return () => pluginDisposers.forEach((d) => d());
-				}
-			}
-			let nodes = [];
-			let childDisposers = [];
-			const clear = () => {
-				childDisposers.forEach((d) => d());
-				childDisposers = [];
-				nodes.forEach((n) => n.remove());
-				nodes = [];
-			};
-			const update = (v) => {
-				clear();
-				renderContent(marker, v, nodes, childDisposers);
-			};
-			const unsub = bind(value, update);
-			return () => {
-				unsub?.();
-				clear();
-			};
-		};
-		parser.parseTemplate(this.strings, {
-			onText: (text) => {
-				stack.at(-1).append(text);
-			},
-			onOpenTag: (tag, attrs, selfClosing) => {
-				const parent = stack.at(-1);
+		let cached = cache.get(this.#strings);
+		if (!cached) cache.set(this.#strings, cached = this.#buildPrototype());
+		return this.#instantiate(cached);
+	}
+	/** Build the prototype fragment and collect binding descriptors */
+	#buildPrototype() {
+		const frag = document.createDocumentFragment();
+		const bindings = [];
+		const stack = [frag];
+		let nodeIndex = 0;
+		new HTMLParser().parseTemplate(this.#strings, {
+			onText: (t) => stack[stack.length - 1].append(t),
+			onOpenTag: (tag, attrs, selfClose) => {
+				const parent = stack[stack.length - 1];
 				const el = tag === "svg" || tag === "SVG" || parent instanceof Element && parent.namespaceURI === SVG_NS ? document.createElementNS(SVG_NS, tag) : document.createElement(tag);
-				for (const attr of attrs) handleAttribute(el, attr);
+				const elIndex = nodeIndex++;
+				for (const [name, statics, slots] of attrs) if (!slots.length) el.setAttribute(name, statics[0] ?? "");
+				else {
+					const c = name[0];
+					if (c === "@") bindings.push([
+						3,
+						elIndex,
+						name.slice(1),
+						slots[0]
+					]);
+					else if (c === ".") bindings.push([
+						2,
+						elIndex,
+						name.slice(1),
+						slots[0]
+					]);
+					else bindings.push([
+						1,
+						elIndex,
+						name,
+						statics,
+						slots
+					]);
+				}
 				parent.appendChild(el);
-				if (!selfClosing) stack.push(el);
+				if (!selfClose) stack.push(el);
 			},
 			onClose: () => {
 				if (stack.length > 1) stack.pop();
 			},
-			onSlot: (index) => {
-				const marker = document.createComment("");
-				stack.at(-1).appendChild(marker);
-				disposers.push(bindContent(marker, values[index]));
+			onSlot: (i) => {
+				stack[stack.length - 1].appendChild(document.createComment(""));
+				bindings.push([
+					0,
+					nodeIndex++,
+					i
+				]);
 			}
 		});
+		return [frag, bindings];
+	}
+	/** Clone the prototype and apply bindings with current values */
+	#instantiate([proto, bindings]) {
+		const frag = proto.cloneNode(true);
+		const disposers = [];
+		const values = this.#values;
+		const nodes = collectBindingNodes(frag, bindings);
+		for (let i = 0; i < bindings.length; i++) {
+			const b = bindings[i];
+			const node = nodes[i];
+			if (b[0] === 0) {
+				const value = values[b[2]];
+				const t = typeof value;
+				if (t === "string" || t === "number" || t === "bigint") {
+					const n = document.createTextNode(String(value));
+					node.parentNode.insertBefore(n, node);
+				} else if (value == null || t === "boolean") {} else this.#bindContent(node, value, disposers);
+			} else if (b[0] === 1) {
+				const [, , name, statics, slots] = b;
+				const resolved = slots.map((s) => {
+					const v = values[s];
+					return typeof v === "function" ? wrapFn(v, disposers) : v;
+				});
+				let prev;
+				const update = () => {
+					let result = statics[0], allNull = true;
+					for (let j = 0; j < resolved.length; j++) {
+						const val = isSignal(resolved[j]) ? resolved[j].value : resolved[j];
+						if (val != null && val !== false) allNull = false;
+						result += (val === true ? "" : val ?? "") + statics[j + 1];
+					}
+					const next = slots.length === 1 && allNull ? null : result;
+					if (next !== prev) {
+						prev = next;
+						if (next === null) node.removeAttribute(name);
+						else node.setAttribute(name, next);
+					}
+				};
+				update();
+				for (const r of resolved) if (isSignal(r)) disposers.push(r.subscribe(update));
+			} else if (b[0] === 2) {
+				const [, , name, slot] = b;
+				bind(values[slot], (v) => node[name] = v, disposers);
+			} else {
+				const [, , name, slot] = b;
+				const handler = values[slot];
+				node.addEventListener(name, handler);
+				disposers.push(() => node.removeEventListener(name, handler));
+			}
+		}
 		return {
-			fragment,
-			dispose: () => disposers.forEach((d) => d())
+			fragment: frag,
+			dispose: () => disposers.forEach((f) => f())
 		};
 	}
-};
-/**
-* Render content and insert nodes before marker.
-* Handles Templates, primitives, arrays.
-*/
-function renderContent(marker, v, nodes, childDisposers) {
-	const parent = marker.parentNode;
-	for (const item of Array.isArray(v) ? v : [v]) if (item instanceof Template) {
-		const { fragment, dispose } = item.render();
-		childDisposers.push(dispose);
-		nodes.push(...fragment.childNodes);
-		parent.insertBefore(fragment, marker);
-	} else if (item != null && typeof item !== "boolean") {
-		const node = document.createTextNode(String(item));
-		nodes.push(node);
-		parent.insertBefore(node, marker);
+	/** Bind content slot - handles plugins, templates, arrays, and reactive values */
+	#bindContent(marker, value, disposers) {
+		for (const plugin of this.#plugins) {
+			const binder = plugin(value);
+			if (binder) {
+				binder(marker, disposers);
+				return;
+			}
+		}
+		let currentNodes = [], childDisposers = [];
+		const clear = () => {
+			childDisposers.forEach((f) => f());
+			childDisposers = [];
+			currentNodes.forEach((n) => n.remove());
+			currentNodes = [];
+		};
+		const update = (v) => {
+			if (v != null && typeof v !== "boolean" && typeof v !== "object" && currentNodes.length === 1 && !childDisposers.length && currentNodes[0] instanceof Text) {
+				currentNodes[0].textContent = String(v);
+				return;
+			}
+			clear();
+			const parent = marker.parentNode;
+			const items = Array.isArray(v) ? v.flat() : [v];
+			for (const item of items) if (item instanceof Template) {
+				const { fragment, dispose } = item.render();
+				childDisposers.push(dispose);
+				currentNodes.push(...fragment.childNodes);
+				parent.insertBefore(fragment, marker);
+			} else if (item != null && typeof item !== "boolean") {
+				const n = document.createTextNode(String(item));
+				currentNodes.push(n);
+				parent.insertBefore(n, marker);
+			}
+		};
+		bind(value, update, disposers);
+		disposers.push(clear);
 	}
-}
-/**
-* Create an html tag function with the given plugins.
-*/
-function createHtmlWithPlugins(plugins) {
+};
+function createHtml(plugins) {
 	const tag = ((strings, ...values) => new Template(strings, values, plugins));
-	tag.with = (...morePlugins) => createHtmlWithPlugins([...plugins, ...morePlugins]);
+	tag.with = (...more) => createHtml([...plugins, ...more]);
 	return tag;
 }
-/**
-* Tagged template literal for creating reactive HTML templates.
-* Use .with(...plugins) to add interpolation handlers like each() or async generators.
-*
-* @example
-* ```ts
-* import { html } from "balises";
-* import eachPlugin, { each } from "balises/each";
-* import asyncPlugin from "balises/async";
-*
-* const html = baseHtml.with(eachPlugin, asyncPlugin);
-*
-* html`<div>${async function* () { ... }}</div>`.render();
-* ```
-*/
-const html = createHtmlWithPlugins([]);
+const html = createHtml([]);
 
 //#endregion
 export { batch, computed, effect, html, scope, signal, store };