@cossackframework/renderer 0.5.2 → 0.6.0

package/dist/component-dispose.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/{cossack-html-BUi5cuB1.js → cossack-html-QsGiJk7a.js}

@@ -90,7 +90,7 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 	}
 	mount(e) {
 		this.addRenderListener((t) => {
-			t && (h(t) ? O(t, e) : O(f`${t}`, e));
+			t && (g(t) ? k(t, e) : k(m`${t}`, e));
 		}), this.requestUpdate();
 	}
 	addEventListener(e, t, n) {
@@ -133,37 +133,44 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 	constructor(e, t, n) {
 		this.items = e, this.keyFn = t, this.templateFn = n;
 	}
-}, s = (e) => new a(e), c = (e, t, n) => n === void 0 ? new o(e, (e, t) => t, t) : new o(e, t, n), l = (e) => Object.keys(e).filter((t) => e[t]).join(" "), u = (e) => Object.keys(e).filter((t) => e[t] != null).map((t) => `${t}:${e[t]}`).join(";"), d = class {
+}, s = class {
+	value;
+	template;
+	constructor(e, t) {
+		this.value = e, this.template = t;
+	}
+}, c = (e) => new a(e), l = (e, t, n) => n === void 0 ? new o(e, (e, t) => t, t) : new o(e, t, n), u = (e) => Object.keys(e).filter((t) => e[t]).join(" "), d = (e) => Object.keys(e).filter((t) => e[t] != null).map((t) => `${t}:${e[t]}`).join(";"), f = (e, t) => new s(e, t), p = class {
 	strings;
 	values;
 	_cossack_template_result = !0;
 	constructor(e, t) {
 		this.strings = e, this.values = t;
 	}
-}, f = (e, ...t) => new d(e, t), p = f, m = (e, t = {}, n) => f`${{
+}, m = (e, ...t) => new p(e, t), h = (e, t = {}, n) => m`${{
 	_type: "COMPONENT",
 	clazz: e,
 	props: t,
 	children: n
-}}`, h = (e) => typeof e == "object" && !!e && e._cossack_template_result === !0, g = class {
+}}`, g = (e) => typeof e == "object" && !!e && e._cossack_template_result === !0, _ = class {
 	value;
 	constructor(e) {
 		this.value = e;
 	}
-}, _ = (e) => new g(e), v = (e) => e instanceof g, y = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), b = (t) => {
+}, v = (e) => new _(e), y = (e) => e instanceof _, b = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), x = (t) => {
 	if (t == null || t === !1) return "";
-	if (Array.isArray(t)) return t.map(b).join("");
-	if (h(t)) return C(t);
-	if (t instanceof a) return b(t.value);
-	if (t instanceof o) return t.items.map((e, n) => b(t.templateFn(e, n))).join("");
+	if (Array.isArray(t)) return t.map(x).join("");
+	if (g(t)) return w(t);
+	if (t instanceof a) return x(t.value);
+	if (t instanceof o) return t.items.map((e, n) => x(t.templateFn(e, n))).join("");
+	if (t instanceof s) return x(t.template);
 	if (e(t)) {
 		let e = new t.clazz();
 		Object.assign(e, t.props), "props" in e && (e.props = t.props), e.children = t.children, e.__parent = i.currentRenderingInstance, e.__parent && (e._id = `${e.__parent._id}:${e.__parent._childCounter++}`), e.connectedCallback(), n(e), e.willUpdate(/* @__PURE__ */ new Map());
 		let a = e.render(), o = "";
-		return a && (o = h(a) ? C(a) : C(f`${a}`)), r(), o;
+		return a && (o = g(a) ? w(a) : w(m`${a}`)), r(), o;
 	}
-	return v(t) ? t.value : typeof t == "function" || typeof t == "object" && t && "value" in t ? "" : y(t);
-}, x = (e) => {
+	return y(t) ? t.value : typeof t == "function" || typeof t == "object" && t && "value" in t ? "" : b(t);
+}, S = (e) => {
 	let t = "";
 	if (typeof e == "object" && e) for (let [n, r] of Object.entries(e)) {
 		if (n.startsWith("@")) continue;
@@ -172,10 +179,10 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 			r && (t += ` ${n.slice(1)}`);
 			continue;
 		}
-		n.startsWith(".") && (e = n.slice(1)), typeof i == "boolean" ? i && (t += ` ${e}`) : typeof i == "function" || i != null && (t += ` ${e}="${y(i)}"`);
+		n.startsWith(".") && (e = n.slice(1)), typeof i == "boolean" ? i && (t += ` ${e}`) : typeof i == "function" || i != null && (t += ` ${e}="${b(i)}"`);
 	}
 	return t;
-}, S = class {
+}, C = class {
 	resultObj;
 	result = "";
 	stringIdx = 0;
@@ -193,17 +200,17 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 					let t = r[0], i = r[1];
 					this.result = this.result.substring(0, this.result.length - t.length);
 					let a = t.endsWith("\"") ? "\"" : t.endsWith("'") ? "'" : "", o = !0;
-					if (i === "..." ? (this.result = this.result.trimEnd(), this.result += x(n)) : i.startsWith("@") ? this.result = this.result.trimEnd() : i.startsWith("?") ? n ? (this.result = this.result.trimEnd(), this.result += ` ${i.slice(1)}`) : this.result = this.result.trimEnd() : i.startsWith(".") ? n != null && n !== !1 ? (this.result = this.result.trimEnd(), this.result += ` ${i.slice(1)}="${b(n)}"`) : this.result = this.result.trimEnd() : (this.result += t, this.result += b(n), o = !1), a && o) {
+					if (i === "..." ? (this.result = this.result.trimEnd(), this.result += S(n)) : i.startsWith("@") ? this.result = this.result.trimEnd() : i.startsWith("?") ? n ? (this.result = this.result.trimEnd(), this.result += ` ${i.slice(1)}`) : this.result = this.result.trimEnd() : i.startsWith(".") ? n != null && n !== !1 ? (this.result = this.result.trimEnd(), this.result += ` ${i.slice(1)}="${x(n)}"`) : this.result = this.result.trimEnd() : (this.result += t, this.result += x(n), o = !1), a && o) {
 						let t = e[this.stringIdx + 1];
 						t && t.startsWith(a) && (this.charIdxForNext = 1);
 					}
-				} else this.result += b(n);
+				} else this.result += x(n);
 			}
 			this.stringIdx++;
 		}
 		return this.result;
 	}
-}, C = (e) => new S(e).scan(), w = class t {
+}, w = (e) => new C(e).scan(), T = class t {
 	startNode;
 	endNode;
 	componentInstance = null;
@@ -212,14 +219,21 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 	_partKeys = [];
 	_cachedTemplateStrings = null;
 	_cachedParts = null;
+	_key = void 0;
+	_keySet = !1;
 	constructor(e, t) {
 		this.startNode = e, this.endNode = t;
 	}
 	update(t) {
-		this.componentInstance && (!e(t) || t.clazz !== this.componentInstance.constructor) && this.disposeComponent(), !(t instanceof o) && !Array.isArray(t) && this._childParts.length > 0 && this.clearChildParts(), e(t) ? this.updateComponent(t) : t instanceof o ? this.updateRepeat(t) : Array.isArray(t) ? this.updateArray(t) : this.updateNode(t);
+		this.componentInstance && (!e(t) || t.clazz !== this.componentInstance.constructor) && this.disposeComponent(), !(t instanceof o) && !Array.isArray(t) && this._childParts.length > 0 && this.clearChildParts(), e(t) ? this.updateComponent(t) : t instanceof o ? this.updateRepeat(t) : t instanceof s ? this.updateKey(t) : Array.isArray(t) ? this.updateArray(t) : this.updateNode(t);
+	}
+	teardownComponent(e) {
+		if (this.renderListener &&= (e.removeRenderListener(this.renderListener), null), e.disconnectedCallback(), typeof e.destroy == "function") try {
+			e.destroy();
+		} catch {}
 	}
 	disposeComponent() {
-		this.componentInstance && (this.renderListener && this.componentInstance.removeRenderListener(this.renderListener), this.componentInstance.disconnectedCallback(), this.componentInstance = null, this.renderListener = null, this._clearTemplateCache());
+		this.componentInstance && (this.teardownComponent(this.componentInstance), this.componentInstance = null, this._clearTemplateCache());
 	}
 	updateComponent(e) {
 		this.componentInstance || (this.componentInstance = new e.clazz(), this.componentInstance.__parent = i.currentRenderingInstance, this.componentInstance.__parent && (this.componentInstance._id = `${this.componentInstance.__parent._id}:${this.componentInstance.__parent._childCounter++}`), this.renderListener = (e) => {
@@ -242,6 +256,10 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 			l ? (i.delete(c), l.startNode.previousSibling !== s && this.movePart(l, s), l.update(r(e, t))) : (l = this.createChildPart(s), l.update(r(e, t))), a.push(l), s = l.endNode;
 		}), i.forEach((e) => e.dispose()), this._childParts = a, this._partKeys = o;
 	}
+	updateKey(e) {
+		let t = !this._keySet || !Object.is(this._key, e.value);
+		this._keySet = !0, this._key = e.value, t && (this.componentInstance && this.disposeComponent(), this._clearTemplateCache(), this.clear()), this.updateNode(e.template);
+	}
 	updateArray(e) {
 		this._partKeys = [];
 		let t = Math.min(e.length, this._childParts.length);
@@ -270,27 +288,27 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 		this._childParts.forEach((e) => e.dispose()), this._childParts = [], this._partKeys = [];
 	}
 	dispose() {
-		this.clear(), this._clearTemplateCache(), this.clearChildParts(), this.startNode.parentNode && this.startNode.parentNode.removeChild(this.startNode), this.endNode.parentNode && this.endNode.parentNode.removeChild(this.endNode), this.componentInstance && (this.renderListener && this.componentInstance.removeRenderListener(this.renderListener), this.componentInstance.disconnectedCallback());
+		this.clear(), this._clearTemplateCache(), this.clearChildParts(), this.startNode.parentNode && this.startNode.parentNode.removeChild(this.startNode), this.endNode.parentNode && this.endNode.parentNode.removeChild(this.endNode), this.componentInstance &&= (this.teardownComponent(this.componentInstance), null);
 	}
 	updateNode(t) {
-		if (this.startNode.parentNode) if (h(t)) if (this._cachedTemplateStrings === t.strings && this._cachedParts) this._cachedParts.forEach((e, n) => {
+		if (this.startNode.parentNode) if (g(t)) if (this._cachedTemplateStrings === t.strings && this._cachedParts) this._cachedParts.forEach((e, n) => {
 			e.update(t.values[n]);
 		});
 		else {
 			this._clearTemplateCache(), this.clear();
 			let e = document.createDocumentFragment();
-			O(t, e), this.startNode.parentNode.insertBefore(e, this.endNode);
-			let n = D.get(e.firstChild?.childNodes[0] || e);
+			k(t, e), this.startNode.parentNode.insertBefore(e, this.endNode);
+			let n = O.get(e.firstChild?.childNodes[0] || e);
 			n && (this._cachedTemplateStrings = n.strings, this._cachedParts = n.parts);
 		}
-		else if (v(t)) {
+		else if (y(t)) {
 			this._clearTemplateCache(), this.clear();
 			let e = document.createElement("template");
 			e.innerHTML = t.value, this.startNode.parentNode.insertBefore(e.content, this.endNode);
 		} else if (e(t) || typeof t == "object" && t && !(t instanceof Node) && !Array.isArray(t)) {
 			this._clearTemplateCache(), this.clear();
 			let e = document.createDocumentFragment();
-			O(f`${t}`, e), this.startNode.parentNode.insertBefore(e, this.endNode);
+			k(m`${t}`, e), this.startNode.parentNode.insertBefore(e, this.endNode);
 		} else if (t instanceof Node) this._clearTemplateCache(), this.clear(), this.startNode.parentNode.insertBefore(t, this.endNode);
 		else if (t == null || t === !1) this._clearTemplateCache(), this.clear();
 		else {
@@ -304,6 +322,7 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 		}
 	}
 	_clearTemplateCache() {
+		if (this._cachedParts) for (let e of this._cachedParts) e && typeof e.dispose == "function" && e.dispose();
 		this._cachedTemplateStrings = null, this._cachedParts = null;
 	}
 	clear() {
@@ -313,7 +332,7 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 			e.parentNode.removeChild(e), e = t;
 		}
 	}
-}, T = class {
+}, E = class {
 	element;
 	previousValues = {};
 	constructor(e) {
@@ -332,7 +351,7 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 		} else e.startsWith(".") ? this.element[e.slice(1)] = n : e.startsWith("?") ? n ? this.element.setAttribute(e.slice(1), "") : this.element.removeAttribute(e.slice(1)) : typeof n == "boolean" ? n ? this.element.setAttribute(e, "") : this.element.removeAttribute(e) : n != null && this.element.setAttribute(e, String(n));
 		this.previousValues = { ...t };
 	}
-}, E = class {
+}, D = class {
 	element;
 	name;
 	segments;
@@ -377,14 +396,15 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 			this.element.checked !== t && (this.element.checked = t), t ? this.element.setAttribute(this.name, "") : this.element.removeAttribute(this.name);
 		} else typeof e == "boolean" ? e ? this.element.setAttribute(this.name, "") : this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, this.segments[0] + String(e) + this.segments[1]);
 	}
-}, D = /* @__PURE__ */ new WeakMap(), O = (e, t) => {
-	let n = D.get(t);
+}, O = /* @__PURE__ */ new WeakMap(), k = (e, t) => {
+	let n = O.get(t);
 	if (n && n.strings === e.strings) {
 		n.parts.forEach((t, n) => {
 			t.update(e.values[n]);
 		});
 		return;
 	}
+	if (n) for (let e of n.parts) e && typeof e.dispose == "function" && e.dispose();
 	let r = [], i = e.values, a = "", o = !1, s = null, c = /(\.\.\.|[.@?]?[a-zA-Z0-9_-]+)=["']?$/;
 	for (let t = 0; t < e.strings.length - 1; t++) {
 		let n = e.strings[t];
@@ -410,7 +430,7 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 			let t = e.nodeValue?.match(/CRP_(\d+)/);
 			if (t) {
 				let n = parseInt(t[1]), i = document.createComment("/CRP");
-				e.parentNode.insertBefore(i, e.nextSibling), r[n] = new w(e, i);
+				e.parentNode.insertBefore(i, e.nextSibling), r[n] = new T(e, i);
 			}
 		} else if (e.nodeType === Node.ELEMENT_NODE) {
 			let t = e;
@@ -419,14 +439,14 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 				if (n.length === 0) return;
 				if (n.length === 1) {
 					let i = parseInt(n[0][1]);
-					r[i] || (e.name === "..." ? (r[i] = new T(t), t.removeAttribute("...")) : r[i] = new E(t, e.name, e.value));
+					r[i] || (e.name === "..." ? (r[i] = new E(t), t.removeAttribute("...")) : r[i] = new D(t, e.name, e.value));
 					return;
 				}
 				if (e.name === "...") return;
 				let i = n.map((e) => parseInt(e[1])), a = Array(n.length).fill(void 0);
 				for (let n = 0; n < i.length; n++) {
 					let o = i[n];
-					r[o] || (r[o] = new E(t, e.name, e.value, {
+					r[o] || (r[o] = new D(t, e.name, e.value, {
 						currentValues: a,
 						position: n
 					}));
@@ -440,10 +460,10 @@ var e = (e) => typeof e == "object" && !!e && e._type === "COMPONENT", t = [], n
 		for (; t.firstChild;) t.removeChild(t.firstChild);
 		t.appendChild(d);
 	}
-	D.set(t, {
+	O.set(t, {
 		strings: e.strings,
 		parts: r
 	});
 };
 //#endregion
-export { e as S, u as _, f as a, r as b, O as c, _ as d, a as f, c as g, s as h, y as i, C as l, l as m, g as n, h as o, o as p, m as r, v as s, d as t, p as u, i as v, n as x, t as y };
+export { e as C, n as S, l as _, m as a, t as b, k as c, s as d, a as f, c as g, f as h, b as i, w as l, u as m, _ as n, g as o, o as p, h as r, y as s, p as t, v as u, d as v, r as x, i as y };

package/dist/cossack-html.d.ts

@@ -7,7 +7,6 @@ export declare class TemplateResult {
     constructor(strings: TemplateStringsArray, values: unknown[]);
 }
 export declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
-export declare const svg: (strings: TemplateStringsArray, ...values: unknown[]) => TemplateResult;
 export declare const component: <T extends CossackElement>(clazz: new () => T, props?: Record<string, unknown>, children?: unknown) => TemplateResult;
 export declare const isTemplateResult: (value: unknown) => value is TemplateResult;
 export declare class UnsafeHTMLResult {

package/dist/directives.d.ts

@@ -8,6 +8,11 @@ export declare class RepeatResult {
     readonly templateFn: (item: any, index: number) => unknown;
     constructor(items: unknown[], keyFn: (item: any, index: number) => unknown, templateFn: (item: any, index: number) => unknown);
 }
+export declare class KeyResult {
+    readonly value: unknown;
+    readonly template: unknown;
+    constructor(value: unknown, template: unknown);
+}
 /**
  * Checks against the DOM value instead of the previous rendered value.
  * Usage: <input .value=${live(x)}>
@@ -28,4 +33,10 @@ export declare const classMap: (classInfo: Record<string, string | boolean | num
  * Usage: style="${styleMap({ color: 'red' })}"
  */
 export declare const styleMap: (styleInfo: Record<string, string | undefined | null>) => string;
+/**
+ * Forces its subtree to be recreated when `value` changes.
+ * Useful for re-triggering CSS animations and forcing remounts.
+ * Usage: html`${key(id, html`<child></child>`)}`
+ */
+export declare const key: (value: unknown, template: unknown) => KeyResult;
 export type RefCallback = (el: Element | undefined) => void;

package/dist/index.js

@@ -1,10 +1,10 @@
-import { S as e, _ as t, a as n, b as r, c as i, d as a, f as o, g as s, h as c, i as l, l as u, m as d, n as f, o as p, p as m, r as h, s as g, t as _, u as v, v as y, x as b, y as x } from "./cossack-html-BUi5cuB1.js";
+import { C as e, S as t, _ as n, a as r, b as i, c as a, d as o, f as s, g as c, h as l, i as u, l as d, m as f, n as p, o as m, p as h, r as g, s as _, t as v, u as y, v as b, x, y as S } from "./cossack-html-QsGiJk7a.js";
 //#region src/context.ts
-function S(e) {
+function C(e) {
 	return {
 		id: Math.random().toString(36).slice(2),
 		defaultValue: e
 	};
 }
 //#endregion
-export { y as CossackElement, o as LiveResult, m as RepeatResult, _ as TemplateResult, f as UnsafeHTMLResult, d as classMap, h as component, S as createContext, l as escapeHtml, n as html, x as instanceStack, e as isComponentResult, p as isTemplateResult, g as isUnsafeHTML, c as live, r as popCurrentInstance, b as pushCurrentInstance, i as render, u as renderToString, s as repeat, t as styleMap, v as svg, a as unsafeHTML };
+export { S as CossackElement, o as KeyResult, s as LiveResult, h as RepeatResult, v as TemplateResult, p as UnsafeHTMLResult, f as classMap, g as component, C as createContext, u as escapeHtml, r as html, i as instanceStack, e as isComponentResult, m as isTemplateResult, _ as isUnsafeHTML, l as key, c as live, x as popCurrentInstance, t as pushCurrentInstance, a as render, d as renderToString, n as repeat, b as styleMap, y as unsafeHTML };

package/dist/server.js

@@ -1,4 +1,4 @@
-import { i as e, l as t } from "./cossack-html-BUi5cuB1.js";
+import { i as e, l as t } from "./cossack-html-QsGiJk7a.js";
 //#region src/minify-html.ts
 var n = /<(script|style|pre|textarea)\b[^>]*>[\s\S]*?<\/\1>/gi, r = RegExp(`<(${[.../* @__PURE__ */ new Set([
 	"area",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cossackframework/renderer",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "type": "module",
   "description": "Light DOM rendering engine for the Cossack Framework",
   "license": "MIT",
@@ -28,8 +28,6 @@
     "access": "public"
   },
   "devDependencies": {
-    "htmlparser2": "^10.0.0",
-    "magic-string": "^0.30.21",
     "oxlint": "^1.41.0",
     "vite": "^8.1.0",
     "vite-plugin-dts": "^3.9.1",