@cossackframework/renderer 0.8.2 → 0.8.3

package/README.md

@@ -1,12 +1,13 @@
 # Cossack Renderer Package
 
-Cossack Renderer is a Lit-compatible rendering engine designed for **Light DOM** and **SSR**. It provides a familiar API for building components but focuses on returning HTML strings directly for SSR and managing DOM updates without Shadow DOM isolation.
+Cossack Renderer is a Lit-compatible rendering engine for **Light DOM** and
+**SSR**. It returns HTML strings for SSR and updates the DOM without Shadow DOM
+isolation.
 
 ## Installation
 
-This package is included by projects created with `cossack create`, but can
-also be used standalone in any project that needs a lightweight rendering
-solution.
+Projects created with `cossack create` include this package. You can also use
+it on its own in another project.
 
 ```bash
 pnpm add @cossackframework/renderer

package/dist/cossack-html.d.ts

@@ -20,8 +20,10 @@ export type ValueSanitizer = (value: unknown) => unknown;
 export type SanitizerFactory = (node: Node, name: string, type: 'property' | 'attribute') => ValueSanitizer;
 export declare const component: <T extends CossackElement>(clazz: new () => T, props?: T['props'] & Record<string, unknown>, children?: unknown) => TemplateResult<1>;
 export declare const isTemplateResult: (value: unknown) => value is TemplateResult;
+declare const UNSAFE_HTML_BRAND: unique symbol;
 export declare class UnsafeHTMLResult {
     readonly value: string;
+    readonly [UNSAFE_HTML_BRAND] = true;
     constructor(value: string);
 }
 export declare const unsafeHTML: (value: string) => UnsafeHTMLResult;
@@ -42,3 +44,4 @@ export declare const render: (result: TemplateResult, container: Node) => void;
  * back to a full `render()` so behaviour is always correct.
  */
 export declare const hydrate: (result: TemplateResult, container: Node) => void;
+export {};

package/dist/cossack-html.js

@@ -25,39 +25,56 @@ var m = class {
 	props: n ?? {},
 	children: r,
 	parent: t.currentRenderingInstance
-}}`, y = (e) => typeof e == "object" && !!e && e._cossack_template_result === !0, b = class {
+}}`, y = (e) => typeof e == "object" && !!e && e._cossack_template_result === !0, b = Symbol.for("@cossackframework/renderer/unsafe-html"), x = class {
 	value;
+	[b] = !0;
 	constructor(e) {
 		this.value = e;
 	}
-}, x = (e) => new b(e), S = (e) => e instanceof b, C = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), w = (s, u = {}) => {
+}, S = (e) => new x(e), C = (e) => typeof e == "object" && !!e && e[b] === !0, w = (e) => String(e).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;"), T = (s, u = {}) => {
 	if (s === _ || s === "" || s == null || s === !1) return "";
-	if (Array.isArray(s)) return u.hydrate ? s.map((e) => `<!--CSA-S-->${w(e, u)}<!--CSA-E-->`).join("") : s.map((e) => w(e, u)).join("");
-	if (y(s)) return N(s, u);
-	if (s instanceof l) return w(s.value, u);
-	if (s instanceof d) return u.hydrate ? s.items.map((e, t) => `<!--CSA-S-->${w(s.templateFn(e, t), u)}<!--CSA-E-->`).join("") : s.items.map((e, t) => w(s.templateFn(e, t), u)).join("");
-	if (s instanceof c) return w(s.template, u);
-	if (s instanceof o) return w(s.factory(), u);
-	if (s instanceof a) return w(s.value, u);
-	if (s instanceof i) return w(f(s.component, s.fieldName), u);
+	if (Array.isArray(s)) return u.hydrate ? s.map((e) => `<!--CSA-S-->${T(e, u)}<!--CSA-E-->`).join("") : s.map((e) => T(e, u)).join("");
+	if (y(s)) return F(s, u);
+	if (s instanceof l) return T(s.value, u);
+	if (s instanceof d) return u.hydrate ? s.items.map((e, t) => `<!--CSA-S-->${T(s.templateFn(e, t), u)}<!--CSA-E-->`).join("") : s.items.map((e, t) => T(s.templateFn(e, t), u)).join("");
+	if (s instanceof c) return T(s.template, u);
+	if (s instanceof o) return T(s.factory(), u);
+	if (s instanceof a) return T(s.value, u);
+	if (s instanceof i) return T(f(s.component, s.fieldName), u);
 	if (e(s)) {
 		let e = new s.clazz();
 		Object.assign(e, s.props), "props" in e && (e.props = s.props), e.children = s.children, e.__parent = s.parent || t.currentRenderingInstance, s.serviceScope && typeof e._setServiceScope == "function" && e._setServiceScope(s.serviceScope), e.__parent && (e._id = `${e.__parent._id}:${e.__parent._childCounter++}`), e.connectedCallback(), r(e), e.willUpdate(/* @__PURE__ */ new Map());
 		let i = e._finalizeRenderOutput(e.render()), a = "";
-		return i && (a = y(i) ? N(i, u) : N(h`${i}`, u)), n(), a;
+		return i && (a = y(i) ? F(i, u) : F(h`${i}`, u)), n(), a;
 	}
-	return S(s) ? s.value : typeof s == "function" || typeof s == "object" && s && "value" in s ? "" : C(s);
-}, T = /* @__PURE__ */ new Set([
+	return C(s) ? s.value : typeof s == "function" || typeof s == "object" && s && "value" in s ? "" : w(s);
+}, E = /* @__PURE__ */ new Set([
+	"allowfullscreen",
+	"async",
+	"autofocus",
+	"autoplay",
 	"checked",
+	"controls",
+	"default",
+	"defer",
 	"disabled",
-	"readonly",
-	"required",
+	"formnovalidate",
 	"hidden",
-	"selected",
+	"inert",
+	"ismap",
+	"itemscope",
+	"loop",
 	"multiple",
-	"autofocus",
-	"open"
-]), E = (e, t) => {
+	"muted",
+	"nomodule",
+	"novalidate",
+	"open",
+	"playsinline",
+	"readonly",
+	"required",
+	"reversed",
+	"selected"
+]), D = (e, t) => E.has(e.toLowerCase()) ? t ? "" : null : String(t), O = (e, t) => {
 	if (!(e === _ || typeof e != "object" || !e)) for (let [n, r] of Object.entries(e)) {
 		if (n.startsWith("@")) continue;
 		let e = n, a = r;
@@ -67,37 +84,41 @@ var m = class {
 		}
 		if (n.startsWith(".")) {
 			if (e = n.slice(1), a instanceof i ? a = f(a.component, a.fieldName) : a instanceof l && (a = a.value), a === _) continue;
-			if (T.has(e)) {
+			if (E.has(e)) {
 				a && (t.result += ` ${e}`);
 				continue;
 			}
 		}
 		if ((e === "class" || e === "className") && typeof a == "string" && a) {
-			let e = D(t.result, a);
+			let e = k(t.result, a);
 			if (e !== null) {
 				t.result = e;
 				continue;
 			}
 		}
-		a !== _ && (a instanceof s ? a.value !== void 0 && (t.result += ` ${e}="${C(String(a.value))}"`) : typeof a == "boolean" ? a && (t.result += ` ${e}`) : typeof a == "function" || a != null && (t.result += ` ${e}="${C(a)}"`));
+		if (a !== _) if (a instanceof s) a.value !== void 0 && (t.result += ` ${e}="${w(String(a.value))}"`);
+		else if (typeof a == "boolean") {
+			let n = D(e, a);
+			n === "" ? t.result += ` ${e}` : n !== null && (t.result += ` ${e}="${n}"`);
+		} else typeof a == "function" || a != null && (t.result += ` ${e}="${w(a)}"`);
 	}
-}, D = (e, t) => {
+}, k = (e, t) => {
 	let n = e.lastIndexOf("<"), r = n >= 0 ? e.slice(n) : e, i = r.match(/(^|\s)class="([^"]*)"(\s|\/?>|$)/);
 	if (!i) return null;
 	let a = i[1], o = i[2], s = i[3], c = t.trim();
 	if (!c) return e;
 	let l = o ? `${o} ${c}` : c, u = r.replace(i[0], `${a}class="${l}"${s}`);
 	return e.slice(0, n) + u;
-}, O = (e) => {
+}, A = (e) => {
 	let t = [], n = !1, r = null, i = /(\.\.\.|[.@?]?[a-zA-Z0-9_:-]+)=["']?$/;
 	for (let a = 0; a < e.length - 1; a++) {
 		let o = e[a];
-		for (let e = 0; e < o.length; e++) r ? o[e] === r && (r = null) : o[e] === "\"" || o[e] === "'" ? e > 0 && o[e - 1] === "=" && (r = o[e]) : o[e] === "<" && o[e + 1] !== "!" && o[e + 1] !== "/" ? n = !0 : o[e] === ">" && (n = !1);
+		for (let e = 0; e < o.length; e++) r ? o[e] === r && (r = null) : n && (o[e] === "\"" || o[e] === "'") ? e > 0 && o[e - 1] === "=" && (r = o[e]) : o[e] === "<" && o[e + 1] !== "!" && o[e + 1] !== "/" ? n = !0 : o[e] === ">" && (n = !1);
 		let s = o.match(i);
 		t[a] = !(n && (s || r));
 	}
 	return t;
-}, k = (e) => {
+}, j = (e) => {
 	let t = 0, n;
 	do
 		n = `\uE000cossack:${t++}:`;
@@ -107,9 +128,9 @@ var m = class {
 		marker: (e) => `${n}${e}${r}`,
 		pattern: RegExp(`${n}(\\d+)${r}`, "g")
 	};
-}, A = (e, t) => {
+}, M = (e, t) => {
 	if (!t) return e;
-	let n = k(e), r = "";
+	let n = j(e), r = "";
 	for (let t = 0; t < e.length; t++) r += e[t], t < e.length - 1 && (r += n.marker(t));
 	let i = "", a = !1, o = null, s = "", c = "";
 	for (let e = 0; e < r.length;) {
@@ -138,8 +159,8 @@ var m = class {
 	let l = [], u = 0, d;
 	for (; d = n.pattern.exec(i);) l.push(i.slice(u, d.index)), u = d.index + d[0].length;
 	return l.push(i.slice(u)), l;
-}, j = (e, t) => {
-	let n = k(e), r = "";
+}, N = (e, t) => {
+	let n = j(e), r = "";
 	for (let t = 0; t < e.length; t++) r += e[t], t < e.length - 1 && (r += n.marker(t));
 	let i = /* @__PURE__ */ new Map(), a = /<(?![!/])(?:[^>"']|"[^"]*"|'[^']*')*>/g, o;
 	for (; o = a.exec(r);) {
@@ -159,7 +180,7 @@ var m = class {
 		}
 	}
 	return i;
-}, M = class {
+}, P = class {
 	resultObj;
 	opts;
 	result = "";
@@ -169,7 +190,7 @@ var m = class {
 	strings;
 	nothingAttributeGroups;
 	constructor(e, t = {}) {
-		this.resultObj = e, this.opts = t, this.strings = A(e.strings, e.__cossackScope), this.isNodePositions = O(this.strings), this.nothingAttributeGroups = j(this.strings, e.values);
+		this.resultObj = e, this.opts = t, this.strings = M(e.strings, e.__cossackScope), this.isNodePositions = A(this.strings), this.nothingAttributeGroups = N(this.strings, e.values);
 	}
 	scan() {
 		let { values: e } = this.resultObj, t = this.strings;
@@ -181,14 +202,14 @@ var m = class {
 					this.result.endsWith(a.prefix) && (this.result = this.result.slice(0, -a.prefix.length)), this.stringIdx = a.last, this.charIdxForNext = a.suffix.length, this.stringIdx++;
 					continue;
 				}
-				if (r) {
+				if (r && !this.isNodePositions[this.stringIdx]) {
 					let e = r[0], a = r[1];
 					this.result = this.result.substring(0, this.result.length - e.length);
 					let o = e.endsWith("\"") ? "\"" : e.endsWith("'") ? "'" : "", c = !0;
 					if (a === "...") {
 						this.result = this.result.trimEnd();
 						let e = { result: this.result };
-						E(n, e), this.result = e.result;
+						O(n, e), this.result = e.result;
 					} else if (a === "ref") this.result = this.result.trimEnd();
 					else if (a.startsWith("@")) this.result = this.result.trimEnd();
 					else if (a.startsWith("?")) n ? (this.result = this.result.trimEnd(), this.result += ` ${a.slice(1)}`) : this.result = this.result.trimEnd();
@@ -196,29 +217,34 @@ var m = class {
 						let e, t = n instanceof i;
 						e = t ? f(n.component, n.fieldName) : n;
 						let r = a.slice(1);
-						t && T.has(r) ? (this.result = this.result.trimEnd(), e && (this.result += ` ${r}`)) : e != null && e !== !1 ? (this.result = this.result.trimEnd(), this.result += ` ${r}="${w(e, this.opts)}"`) : this.result = this.result.trimEnd();
-					} else if (n instanceof s) n.value === void 0 ? this.result = this.result.trimEnd() : (this.result = this.result.trimEnd(), this.result += ` ${a}="${C(String(n.value))}"`);
-					else {
+						t && E.has(r) ? (this.result = this.result.trimEnd(), e && (this.result += ` ${r}`)) : e != null && e !== !1 ? (this.result = this.result.trimEnd(), this.result += ` ${r}="${T(e, this.opts)}"`) : this.result = this.result.trimEnd();
+					} else if (n instanceof s) n.value === void 0 ? this.result = this.result.trimEnd() : (this.result = this.result.trimEnd(), this.result += ` ${a}="${w(String(n.value))}"`);
+					else if (n == null || n === _) this.result = this.result.trimEnd();
+					else if (typeof n == "boolean") {
+						this.result = this.result.trimEnd();
+						let e = D(a, n);
+						e === "" ? this.result += ` ${a}` : e !== null && (this.result += ` ${a}="${e}"`);
+					} else {
 						this.result += e;
-						let t = w(n, this.opts);
+						let t = T(n, this.opts);
 						o ? (this.result += t, c = !1) : this.result += `"${t}"`;
 					}
 					if (o && c) {
 						let e = t[this.stringIdx + 1];
 						e && e.startsWith(o) && (this.charIdxForNext = 1);
 					}
-				} else this.opts.hydrate && this.isNodePositions[this.stringIdx] ? (this.result += `<!--CRP_${this.stringIdx}-->`, this.result += w(n, this.opts), this.result += "<!--/CRP-->") : this.result += w(n, this.opts);
+				} else this.opts.hydrate && this.isNodePositions[this.stringIdx] ? (this.result += `<!--CRP_${this.stringIdx}-->`, this.result += T(n, this.opts), this.result += "<!--/CRP-->") : this.result += T(n, this.opts);
 			}
 			this.stringIdx++;
 		}
 		return this.result;
 	}
-}, N = (e, t = {}) => new M(e, t).scan(), P = /* @__PURE__ */ new WeakMap(), F = (e) => {
-	let t = P.get(e.strings);
-	t || (t = /* @__PURE__ */ new Map(), P.set(e.strings, t));
+}, F = (e, t = {}) => new P(e, t).scan(), I = /* @__PURE__ */ new WeakMap(), L = (e) => {
+	let t = I.get(e.strings);
+	t || (t = /* @__PURE__ */ new Map(), I.set(e.strings, t));
 	let n = `${e._$litType$}:${e.__cossackScope ?? ""}`, r = t.get(n);
 	return r || (r = {}, t.set(n, r)), r;
-}, I = class n {
+}, R = class n {
 	startNode;
 	endNode;
 	componentInstance = null;
@@ -303,7 +329,7 @@ var m = class {
 		if (t instanceof a) {
 			let e = t.value;
 			if (y(e)) {
-				let t = F(e);
+				let t = L(e);
 				this._cacheMap.has(t) ? this.updateCache(e) : (this._adoptTemplate(e), this._cacheCurrent = t);
 			} else this._hydrateValue(e);
 			return;
@@ -313,7 +339,7 @@ var m = class {
 			return;
 		}
 		if (!(t instanceof Node)) {
-			if (S(t)) {
+			if (C(t)) {
 				if (this.startNode.nextSibling !== this.endNode) return;
 				this.clear(), this._clearTemplateCache(), this.updateNode(t);
 				return;
@@ -335,7 +361,7 @@ var m = class {
 				if (t) if (t = !1, y(e)) try {
 					this._adoptTemplate(e);
 				} catch (t) {
-					if (t instanceof W) this.clear(), this._clearTemplateCache(), this.updateNode(e);
+					if (t instanceof K) this.clear(), this._clearTemplateCache(), this.updateNode(e);
 					else throw t;
 				}
 				else e == null ? this.clear() : this.updateNode(e);
@@ -346,8 +372,8 @@ var m = class {
 		Object.assign(r, e.props), "props" in r && (r.props = e.props), r.children = e.children, r.requestUpdate();
 	}
 	_adoptSequence(e, t) {
-		let r = q(this._nodesBetween());
-		if (r.length !== e.length) throw new W(`sequence length mismatch: SSR has ${r.length} items, client has ${e.length}`);
+		let r = Y(this._nodesBetween());
+		if (r.length !== e.length) throw new K(`sequence length mismatch: SSR has ${r.length} items, client has ${e.length}`);
 		this._childParts = [], this._partKeys = t ? [] : this._partKeys;
 		for (let i = 0; i < e.length; i++) {
 			let [a, o] = r[i], s = new n(a, o);
@@ -355,10 +381,10 @@ var m = class {
 		}
 	}
 	_adoptTemplate(e) {
-		let { fragment: t, parts: n } = H(e), r = this._nodesBetween(), i = /* @__PURE__ */ new Map();
-		J(t.childNodes, r, i), Y(n, i);
+		let { fragment: t, parts: n } = W(e), r = this._nodesBetween(), i = /* @__PURE__ */ new Map();
+		X(t.childNodes, r, i), Z(n, i);
 		for (let t = 0; t < e.values.length; t++) n[t] && n[t].update(e.values[t]);
-		this._cachedTemplateIdentity = F(e), this._cachedParts = n;
+		this._cachedTemplateIdentity = L(e), this._cachedParts = n;
 	}
 	_nodesBetween() {
 		let e = [], t = this.startNode.nextSibling;
@@ -400,7 +426,7 @@ var m = class {
 		this._keySet = !0, this._key = e.value, t && (this.componentInstance && this.disposeComponent(), this._clearTemplateCache(), this.clear()), this.updateNode(e.template);
 	}
 	updateCache(e) {
-		let t = F(e);
+		let t = L(e);
 		if (this._cacheCurrent === t && this._cachedParts) {
 			this._cachedParts.forEach((t, n) => {
 				t.update(e.values[n]);
@@ -468,24 +494,24 @@ var m = class {
 		this._cacheCurrent = null, 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 (y(t)) if (this._cachedTemplateIdentity === F(t) && this._cachedParts) this._cachedParts.forEach((e, n) => {
+		if (this.startNode.parentNode) if (y(t)) if (this._cachedTemplateIdentity === L(t) && this._cachedParts) this._cachedParts.forEach((e, n) => {
 			e.update(t.values[n]);
 		});
 		else {
 			this._clearTemplateCache(), this.clear();
 			let e = document.createDocumentFragment();
-			U(t, e), this.startNode.parentNode.insertBefore(e, this.endNode);
-			let n = V.get(e.firstChild?.childNodes[0] || e);
+			G(t, e), this.startNode.parentNode.insertBefore(e, this.endNode);
+			let n = U.get(e.firstChild?.childNodes[0] || e);
 			n && (this._cachedTemplateIdentity = n.identity, this._cachedParts = n.parts);
 		}
-		else if (S(t)) {
+		else if (C(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();
-			U(h`${t}`, e), this.startNode.parentNode.insertBefore(e, this.endNode);
+			G(h`${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 === _ || t === "" || t == null || t === !1) this._clearTemplateCache(), this.clear();
 		else {
@@ -509,7 +535,7 @@ var m = class {
 			e.parentNode.removeChild(e), e = t;
 		}
 	}
-}, L = class {
+}, z = class {
 	element;
 	previousValues = {};
 	bindStates = /* @__PURE__ */ new Map();
@@ -559,7 +585,14 @@ var m = class {
 					e.value !== t && (e.value = t);
 				}
 			} else n instanceof i ? this.element[t] = f(n.component, n.fieldName) : n instanceof l ? this.element[t] = n.value : this.element[t] = n;
-		} else e.startsWith("?") ? n !== _ && n ? this.element.setAttribute(e.slice(1), "") : this.element.removeAttribute(e.slice(1)) : n === _ ? e === "class" || e === "className" ? this.applySpreadClass("") : this.element.removeAttribute(e) : n instanceof s ? n.value === void 0 ? this.element.removeAttribute(e) : this.element.setAttribute(e, String(n.value)) : typeof n == "boolean" ? n ? this.element.setAttribute(e, "") : this.element.removeAttribute(e) : (e === "class" || e === "className") && typeof n == "string" ? this.applySpreadClass(n) : n != null && this.element.setAttribute(e, String(n));
+		} else if (e.startsWith("?")) n !== _ && n ? this.element.setAttribute(e.slice(1), "") : this.element.removeAttribute(e.slice(1));
+		else if (n === _) e === "class" || e === "className" ? this.applySpreadClass("") : this.element.removeAttribute(e);
+		else if (n instanceof s) n.value === void 0 ? this.element.removeAttribute(e) : this.element.setAttribute(e, String(n.value));
+		else if (n == null) this.element.removeAttribute(e);
+		else if (typeof n == "boolean") {
+			let t = D(e, n);
+			t === null ? this.element.removeAttribute(e) : this.element.setAttribute(e, t);
+		} else (e === "class" || e === "className") && typeof n == "string" ? this.applySpreadClass(n) : this.element.setAttribute(e, String(n));
 		this.previousValues = { ...t };
 	}
 	applySpreadClass(e) {
@@ -577,7 +610,7 @@ var m = class {
 			let e = a == null ? "" : String(a);
 			(!o || o.lastKind !== "value" || String(o.lastValue) !== e || this.element instanceof HTMLSelectElement && r.value !== e) && (r.value = e);
 		}
-		let s = B(this.element, t), c = !!o && (o.boundComponent !== i || o.boundField !== n.fieldName || o.listener.__eventName !== s);
+		let s = H(this.element, t), c = !!o && (o.boundComponent !== i || o.boundField !== n.fieldName || o.listener.__eventName !== s);
 		if (o && c && (this.element.removeEventListener(o.listener.__eventName, o.listener), this.bindStates.delete(e), o = void 0), o) o.lastKind = t, o.lastValue = t === "checked" ? !!a : a == null ? "" : String(a);
 		else {
 			let r = (e) => {
@@ -590,10 +623,10 @@ var m = class {
 				lastValue: t === "checked" ? !!a : a == null ? "" : String(a),
 				boundComponent: i,
 				boundField: n.fieldName
-			}, this.bindStates.set(e, o), t === "value" && z(this.element, () => this.bindStates.get(e) === o, () => f(o.boundComponent, o.boundField));
+			}, this.bindStates.set(e, o), t === "value" && V(this.element, () => this.bindStates.get(e) === o, () => f(o.boundComponent, o.boundField));
 		}
 	}
-}, R = class {
+}, B = class {
 	element;
 	name;
 	segments;
@@ -687,7 +720,12 @@ var m = class {
 		} else if (this.name.startsWith("?")) {
 			let t = this.name.slice(1);
 			e ? this.element.setAttribute(t, "") : this.element.removeAttribute(t), this.element.hasAttribute(this.name) && this.element.removeAttribute(this.name);
-		} else n ? e === void 0 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, this.segments[0] + String(e) + this.segments[1]) : 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]);
+		} else if (n) e === void 0 ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, this.segments[0] + String(e) + this.segments[1]);
+		else if (e == null) this.element.removeAttribute(this.name);
+		else if (typeof e == "boolean") {
+			let t = D(this.name, e);
+			t === null ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t);
+		} else this.element.setAttribute(this.name, this.segments[0] + String(e) + this.segments[1]);
 	}
 	updateBind(e) {
 		let t = this.name.startsWith(".") ? this.name.slice(1) : this.name;
@@ -703,7 +741,7 @@ var m = class {
 			let e = i == null ? "" : String(i);
 			(this.lastFormKind !== "value" || String(this.lastFormValue) !== e || this.element instanceof HTMLSelectElement && n.value !== e) && (n.value = e, this.lastFormValue = e, this.lastFormKind = "value");
 		}
-		let a = B(this.element, t);
+		let a = H(this.element, t);
 		if (this.bindListener && (this.boundPropName !== t || this.boundComponent !== r || this.boundFieldName !== e.fieldName || this.bindListener.__eventName !== a) && this._detachBindListener(), !this.bindListener) {
 			let n = (n) => {
 				let i = n.currentTarget, a = t === "checked" ? !!i[t] : i[t];
@@ -711,18 +749,18 @@ var m = class {
 			};
 			if (n.__eventName = a, this.bindListener = n, this.boundPropName = t, this.boundComponent = r, this.boundFieldName = e.fieldName, this.element.addEventListener(a, n), t === "value") {
 				let e = n;
-				z(this.element, () => this.bindListener === e, () => f(this.boundComponent, this.boundFieldName));
+				V(this.element, () => this.bindListener === e, () => f(this.boundComponent, this.boundFieldName));
 			}
 		}
 		this.element.hasAttribute(this.name) && this.element.removeAttribute(this.name);
 	}
-}, z = (e, t, n) => {
+}, V = (e, t, n) => {
 	e instanceof HTMLSelectElement && queueMicrotask(() => {
 		if (!t()) return;
 		let r = n(), i = r == null ? "" : String(r);
 		e.value !== i && (e.value = i);
 	});
-}, B = (e, t) => {
+}, H = (e, t) => {
 	if (e instanceof HTMLSelectElement) return "change";
 	if (e instanceof HTMLTextAreaElement) return "input";
 	if (e instanceof HTMLInputElement) {
@@ -730,11 +768,11 @@ var m = class {
 		return t === "checked" || n === "checkbox" || n === "radio" || n === "range" ? "change" : "input";
 	}
 	return "input";
-}, V = /* @__PURE__ */ new WeakMap(), H = (e) => {
-	let t = [], n = A(e.strings, e.__cossackScope), r = "", i = !1, a = null, o = /(\.\.\.|[.@?]?[a-zA-Z0-9_:-]+)=["']?$/;
+}, U = /* @__PURE__ */ new WeakMap(), W = (e) => {
+	let t = [], n = M(e.strings, e.__cossackScope), r = "", i = !1, a = null, o = /(\.\.\.|[.@?]?[a-zA-Z0-9_:-]+)=["']?$/;
 	for (let e = 0; e < n.length - 1; e++) {
 		let t = n[e];
-		for (let e = 0; e < t.length; e++) a ? t[e] === a && (a = null) : t[e] === "\"" || t[e] === "'" ? e > 0 && t[e - 1] === "=" && (a = t[e]) : t[e] === "<" && t[e + 1] !== "!" && t[e + 1] !== "/" ? i = !0 : t[e] === ">" && (i = !1);
+		for (let e = 0; e < t.length; e++) a ? t[e] === a && (a = null) : i && (t[e] === "\"" || t[e] === "'") ? e > 0 && t[e - 1] === "=" && (a = t[e]) : t[e] === "<" && t[e + 1] !== "!" && t[e + 1] !== "/" ? i = !0 : t[e] === ">" && (i = !1);
 		r += t;
 		let s = t.match(o);
 		if (i && (s || a)) {
@@ -762,7 +800,7 @@ var m = class {
 			if (n) {
 				let r = parseInt(n[1]), i = document.createComment("/CRP");
 				e.parentNode.insertBefore(i, e.nextSibling);
-				let a = new I(e, i);
+				let a = new R(e, i);
 				t[r] = a;
 			}
 		} else if (e.nodeType === Node.ELEMENT_NODE) {
@@ -773,10 +811,10 @@ var m = class {
 				if (r.length === 1) {
 					let i = parseInt(r[0][1]);
 					if (!t[i]) if (e.name === "...") {
-						let e = new L(n);
+						let e = new z(n);
 						t[i] = e, n.removeAttribute("...");
 					} else {
-						let r = new R(n, e.name, e.value);
+						let r = new B(n, e.name, e.value);
 						t[i] = r;
 					}
 					return;
@@ -786,7 +824,7 @@ var m = class {
 				for (let r = 0; r < i.length; r++) {
 					let o = i[r];
 					if (!t[o]) {
-						let i = new R(n, e.name, e.value, {
+						let i = new B(n, e.name, e.value, {
 							currentValues: a,
 							position: r
 						});
@@ -799,8 +837,8 @@ var m = class {
 		fragment: l,
 		parts: t
 	};
-}, U = (e, t) => {
-	let n = V.get(t), r = F(e);
+}, G = (e, t) => {
+	let n = U.get(t), r = L(e);
 	if (n && n.identity === r) {
 		n.parts.forEach((t, n) => {
 			t.update(e.values[n]);
@@ -808,22 +846,22 @@ var m = class {
 		return;
 	}
 	if (n) for (let e of n.parts) e && typeof e.dispose == "function" && e.dispose();
-	let { fragment: i, parts: a } = H(e), o = e.values;
+	let { fragment: i, parts: a } = W(e), o = e.values;
 	for (let e = 0; e < o.length; e++) a[e] && a[e].update(o[e]);
 	if (typeof HTMLElement < "u" && t instanceof HTMLElement || typeof ShadowRoot < "u" && t instanceof ShadowRoot) t.innerHTML = "";
 	else for (; t.firstChild;) t.removeChild(t.firstChild);
-	t.appendChild(i), V.set(t, {
+	t.appendChild(i), U.set(t, {
 		identity: r,
 		parts: a
 	});
-}, W = class extends Error {}, G = (e) => e ? e.nodeType === Node.ELEMENT_NODE ? `<${e.nodeName.toLowerCase()}>` : e.nodeType === Node.COMMENT_NODE ? `<!--${e.nodeValue}-->` : e.nodeType === Node.TEXT_NODE ? `text"${(e.nodeValue || "").slice(0, 30)}"` : `nodeType:${e.nodeType}` : "<none>", K = (e) => {
+}, K = class extends Error {}, q = (e) => e ? e.nodeType === Node.ELEMENT_NODE ? `<${e.nodeName.toLowerCase()}>` : e.nodeType === Node.COMMENT_NODE ? `<!--${e.nodeValue}-->` : e.nodeType === Node.TEXT_NODE ? `text"${(e.nodeValue || "").slice(0, 30)}"` : `nodeType:${e.nodeType}` : "<none>", J = (e) => {
 	if (e.nodeType === Node.TEXT_NODE) return (e.nodeValue || "").trim() === "";
 	if (e.nodeType === Node.COMMENT_NODE) {
 		let t = e.nodeValue || "";
 		return !/^CRP_\d+$/.test(t) && t !== "/CRP" && t !== "CSA-S" && t !== "CSA-E";
 	}
 	return !1;
-}, q = (e) => {
+}, Y = (e) => {
 	let t = [], n = [];
 	for (let r of e) {
 		if (r.nodeType !== Node.COMMENT_NODE) continue;
@@ -835,50 +873,50 @@ var m = class {
 		}
 	}
 	return t;
-}, J = (e, t, n) => {
-	let r = 0;
-	for (let i = 0; i < e.length; i++) {
-		let a = e[i];
-		if (K(a)) continue;
-		for (; r < t.length && K(t[r]);) r++;
-		let o = t[r];
-		if (!o) throw new W(`existing shorter than blueprint (expected ${G(a)})`);
-		if (a.nodeType === Node.ELEMENT_NODE) {
-			if (o.nodeType !== Node.ELEMENT_NODE || a.nodeName !== o.nodeName || a.namespaceURI !== o.namespaceURI) throw new W(`tag mismatch: blueprint ${G(a)} vs existing ${G(o)}`);
-			n.set(a, o), J(a.childNodes, Array.from(o.childNodes), n);
+}, X = (e, t, n, r = "root") => {
+	let i = 0;
+	for (let a = 0; a < e.length; a++) {
+		let o = e[a];
+		if (J(o)) continue;
+		for (; i < t.length && J(t[i]);) i++;
+		let s = t[i];
+		if (!s) throw new K(`existing shorter than blueprint at ${r} (expected ${q(o)})`);
+		if (o.nodeType === Node.ELEMENT_NODE) {
+			if (s.nodeType !== Node.ELEMENT_NODE || o.nodeName !== s.nodeName || o.namespaceURI !== s.namespaceURI) throw new K(`tag mismatch: blueprint ${q(o)} vs existing ${q(s)}`);
+			n.set(o, s), X(o.childNodes, Array.from(s.childNodes), n, `${r}/${o.nodeName.toLowerCase()}[${a}]`);
 		} else {
-			if (a.nodeType !== o.nodeType) throw new W(`type mismatch: blueprint ${G(a)} vs existing ${G(o)}`);
-			n.set(a, o);
+			if (o.nodeType !== s.nodeType) throw new K(`type mismatch: blueprint ${q(o)} vs existing ${q(s)}`);
+			n.set(o, s);
 		}
-		if (r++, a.nodeType === Node.COMMENT_NODE && /^CRP_\d+$/.test(a.nodeValue || "")) {
+		if (i++, o.nodeType === Node.COMMENT_NODE && /^CRP_\d+$/.test(o.nodeValue || "")) {
 			let e = 1;
-			for (; r < t.length && e > 0;) {
-				let n = t[r];
+			for (; i < t.length && e > 0;) {
+				let n = t[i];
 				if (n.nodeType === Node.COMMENT_NODE) {
 					if (/^CRP_\d+$/.test(n.nodeValue || "")) e++;
 					else if (n.nodeValue === "/CRP" && (e--, e === 0)) break;
 				}
-				r++;
+				i++;
 			}
 		}
 	}
-	for (; r < t.length && K(t[r]);) r++;
-	if (r < t.length) throw new W(`existing longer than blueprint (unexpected ${G(t[r])})`);
-}, Y = (e, t) => {
+	for (; i < t.length && J(t[i]);) i++;
+	if (i < t.length) throw new K(`existing longer than blueprint (unexpected ${q(t[i])})`);
+}, Z = (e, t) => {
 	for (let n of e) if (n) {
-		if (n instanceof I) {
+		if (n instanceof R) {
 			let e = t.get(n.startNode), r = t.get(n.endNode);
-			if (!e || !r) throw new W("node part anchors not found");
+			if (!e || !r) throw new K("node part anchors not found");
 			n.startNode = e, n.endNode = r, n._beginHydration();
-		} else if (n instanceof R || n instanceof L) {
+		} else if (n instanceof B || n instanceof z) {
 			let e = t.get(n.element);
-			if (!e) throw new W("attribute part element not found");
+			if (!e) throw new K("attribute part element not found");
 			n.element = e;
 		}
 	}
-}, X = (e, t) => {
-	if (!t.hasChildNodes()) return U(e, t);
-	let n = V.get(t), r = F(e);
+}, Q = (e, t) => {
+	if (!t.hasChildNodes()) return G(e, t);
+	let n = U.get(t), r = L(e);
 	if (n && n.identity === r) {
 		n.parts.forEach((t, n) => t.update(e.values[n]));
 		return;
@@ -886,19 +924,19 @@ var m = class {
 	if (n) for (let e of n.parts) e && typeof e.dispose == "function" && e.dispose();
 	let i;
 	try {
-		let { fragment: n, parts: r } = H(e);
+		let { fragment: n, parts: r } = W(e);
 		i = r;
 		let a = /* @__PURE__ */ new Map();
-		J(n.childNodes, Array.from(t.childNodes), a), Y(i, a);
+		X(n.childNodes, Array.from(t.childNodes), a), Z(i, a);
 		for (let t = 0; t < e.values.length; t++) i[t] && i[t].update(e.values[t]);
 	} catch (n) {
-		if (n instanceof W) return console.warn("[cossack] hydration mismatch, falling back to render:", n.message), U(e, t);
+		if (n instanceof K) return console.warn("[cossack] hydration mismatch, falling back to render:", n.message), G(e, t);
 		throw n;
 	}
-	V.set(t, {
+	U.set(t, {
 		identity: r,
 		parts: i
 	});
 };
 //#endregion
-export { m as TemplateResult, b as UnsafeHTMLResult, v as component, C as escapeHtml, h as html, X as hydrate, y as isTemplateResult, S as isUnsafeHTML, _ as nothing, U as render, N as renderToString, g as svg, x as unsafeHTML };
+export { m as TemplateResult, x as UnsafeHTMLResult, v as component, w as escapeHtml, h as html, Q as hydrate, y as isTemplateResult, C as isUnsafeHTML, _ as nothing, G as render, F as renderToString, g as svg, S as unsafeHTML };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cossackframework/renderer",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "type": "module",
   "sideEffects": false,
   "description": "The rendering engine for Cossack Framework. Lit inspired, light dom, ssr",
@@ -37,7 +37,7 @@
     "oxlint": "^1.41.0",
     "typescript": "^7.0.2",
     "vite": "^8.1.4",
-    "vitest": "^4.1.10"
+    "vitest": "^4.1.11"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.declarations.json && node ../../scripts/rewrite-declaration-imports.mjs dist",