wrec 0.29.0 → 0.29.2

package/dist/{wrec-S6tBBntE.js → wrec-DHp2V7DA.js}

@@ -151,85 +151,85 @@ function d(t) {
 }
 //#endregion
 //#region src/wrec.ts
-var f = new Set([
+var f = () => /* @__PURE__ */ new Map(), p = new Set([
 	"class",
 	"disabled",
 	"hidden",
 	"id",
 	"tabindex",
 	"title"
-]), p = globalThis.HTMLElement ?? class {}, m = globalThis.customElements ?? {
+]), m = globalThis.HTMLElement ?? class {}, h = globalThis.customElements ?? {
 	get: (e) => void 0,
 	getName: (e) => null,
 	define: () => {},
 	initialize: (e) => {},
 	upgrade: (e) => {},
 	whenDefined: () => Promise.reject(/* @__PURE__ */ Error("customElements is not available in this environment"))
-}, h = class extends Error {}, g = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, _ = "a-zA-Z_$", v = `[${_}][${_ + "0-9"}]*`, y = RegExp(`this\\.(${v})\\s*\\(`, "g"), b = /<!--\s*(.*?)\s*-->/, x = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, S = RegExp(`^this\\.${v}$`), C = RegExp(`this\\.${v}(\\.${v})*`, "g"), w = RegExp(`this\\.${v}(\\.${v})*`), T = 5;
-function E(e) {
-	return e instanceof HTMLButtonElement || e instanceof HTMLFieldSetElement || e instanceof HTMLInputElement || e instanceof HTMLSelectElement || e instanceof HTMLTextAreaElement || e instanceof U;
+}, g = class extends Error {}, _ = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, v = "a-zA-Z_$", y = `[${v}][${v + "0-9"}]*`, b = RegExp(`this\\.(${y})\\s*\\(`, "g"), x = /<!--\s*(.*?)\s*-->/, S = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, C = RegExp(`^this\\.${y}$`), w = RegExp(`this\\.${y}(\\.${y})*`, "g"), T = RegExp(`this\\.${y}(\\.${y})*`), E = 5;
+function D(e) {
+	return e instanceof HTMLButtonElement || e instanceof HTMLFieldSetElement || e instanceof HTMLInputElement || e instanceof HTMLSelectElement || e instanceof HTMLTextAreaElement || e instanceof W;
 }
-function D(e, t, n) {
+function O(e, t, n) {
 	let r = document.createElement(e);
 	if (t) for (let [e, n] of Object.entries(t)) r.setAttribute(e, n);
 	return n && (r.innerHTML = n), r;
 }
-var O = (e) => Array.isArray(e.values) && e.values.length > 0 ? e.values[0] : k(e.type), k = (e) => e === String ? "" : e === Number ? 0 : e === Boolean ? !1 : e === Array ? [] : e === Object ? {} : void 0;
-function A(e) {
+var k = (e) => Array.isArray(e.values) && e.values.length > 0 ? e.values[0] : A(e.type), A = (e) => e === String ? "" : e === Number ? 0 : e === Boolean ? !1 : e === Array ? [] : e === Object ? {} : void 0;
+function j(e) {
 	let t = [], n = e.firstElementChild;
-	for (; n;) t.push(n), n.shadowRoot && t.push(...A(n.shadowRoot)), n.firstElementChild && t.push(...A(n)), n = n.nextElementSibling;
+	for (; n;) t.push(n), n.shadowRoot && t.push(...j(n.shadowRoot)), n.firstElementChild && t.push(...j(n)), n = n.nextElementSibling;
 	return t;
 }
-var j = (e) => e.substring(T).split(".")[0];
-function M(e, t) {
+var M = (e) => e.substring(E).split(".")[0];
+function N(e, t) {
 	let n = e[0];
 	return t.forEach((t, r) => {
 		n += t + e[r + 1];
 	}), n;
 }
-function N(e) {
+function P(e) {
 	let t = typeof e;
 	return t === "string" || t === "number" || t === "boolean";
 }
-function P(e) {
+function F(e) {
 	return e.localName === "textarea";
 }
-function F(e) {
+function I(e) {
 	let { localName: t } = e;
 	return t === "input" || t === "select";
 }
-var I = (e) => e.replace(/<!--[\s\S]*?-->/g, "");
-function L(e, t, n, r) {
+var L = (e) => e.replace(/<!--[\s\S]*?-->/g, "");
+function R(e, t, n, r) {
 	return e.slice(0, t) + r + e.slice(t + n);
 }
-function R(e) {
+function z(e) {
 	let t = Number(e);
-	if (isNaN(t)) throw new h(`can't convert "${e}" to a number`);
+	if (isNaN(t)) throw new g(`can't convert "${e}" to a number`);
 	return t;
 }
-function z(e, t, n) {
+function B(e, t, n) {
 	let [r, i] = t.split(":");
-	if (N(n)) if (typeof n == "boolean") {
+	if (P(n)) if (typeof n == "boolean") {
 		n ? e.setAttribute(r, r) : e.removeAttribute(r);
-		let t = U.getPropName(r);
+		let t = W.getPropName(r);
 		e[t] = n;
 	} else {
 		let i = e.getAttribute(t), a = String(n);
-		i !== a && (e.setAttribute(r, a), r === "value" && F(e) && (e.value = a));
+		i !== a && (e.setAttribute(r, a), r === "value" && I(e) && (e.value = a));
 	}
 	else {
-		let r = U.getPropName(t);
+		let r = W.getPropName(t);
 		e[r] = n;
 	}
 }
-function B(e, t, n) {
+function V(e, t, n) {
 	let [r, i] = t.split(":");
-	e instanceof CSSStyleRule ? e.style.setProperty(r, n) : (z(e, r, n), r === "value" && F(e) && (e.value = n));
+	e instanceof CSSStyleRule ? e.style.setProperty(r, n) : (B(e, r, n), r === "value" && I(e) && (e.value = n));
 }
-var V = (e) => typeof e == "string" ? [e] : e;
-async function H(e) {
+var H = (e) => typeof e == "string" ? [e] : e;
+async function U(e) {
 	let t = /* @__PURE__ */ new Set();
-	for (let n of A(e.content)) {
+	for (let n of j(e.content)) {
 		let { localName: e } = n;
 		e.includes("-") && t.add(e);
 	}
@@ -241,9 +241,9 @@ async function H(e) {
 			}, 1e3);
 		});
 	}
-	return Promise.all([...t].map(async (e) => Promise.race([m.whenDefined(e), n(e)])));
+	return Promise.all([...t].map(async (e) => Promise.race([h.whenDefined(e), n(e)])));
 }
-var U = class e extends p {
+var W = class e extends m {
 	static {
 		this.attrToPropMap = /* @__PURE__ */ new Map();
 	}
@@ -280,19 +280,19 @@ var U = class e extends p {
 	#l = /* @__PURE__ */ new Map();
 	#u = /* @__PURE__ */ new Map();
 	static define(e) {
-		if (this.elementName = e, m.get(e)) throw new h(`custom element ${e} is already defined`);
-		m.define(e, this);
+		if (this.elementName = e, h.get(e)) throw new g(`custom element ${e} is already defined`);
+		h.define(e, this);
 	}
 	constructor() {
 		super(), this.attachShadow({ mode: "open" });
 		let e = this.#n;
-		this.#x("attrToPropMap") || (e.attrToPropMap = /* @__PURE__ */ new Map()), this.#x("properties") || (e.properties = {}), this.#x("propToAttrMap") || (e.propToAttrMap = /* @__PURE__ */ new Map()), this.#x("propToComputedMap") || (e.propToComputedMap = /* @__PURE__ */ new Map()), this.#x("propToExprsMap") || (e.propToExprsMap = /* @__PURE__ */ new Map());
+		this.#C("attrToPropMap") || (e.attrToPropMap = /* @__PURE__ */ new Map()), this.#C("computedGraph") || (e.computedGraph = null), this.#C("properties") || (e.properties = {}), this.#C("propToAttrMap") || (e.propToAttrMap = /* @__PURE__ */ new Map()), this.#C("propToComputedMap") || (e.propToComputedMap = /* @__PURE__ */ new Map()), this.#C("propToExprsMap") || (e.propToExprsMap = /* @__PURE__ */ new Map()), this.#C("registeredComputedProps") || (e.registeredComputedProps = /* @__PURE__ */ new Set());
 	}
 	attributeChangedCallback(t, n, r) {
 		t === "disabled" && this.#h();
 		let i = e.getPropName(t);
-		if (!this.#C(i) && this.#S(i)) {
-			let e = this.#F(i, r);
+		if (!this.#T(i) && this.#w(i)) {
+			let e = this.#L(i, r);
 			this[i] = e;
 			let t = this.#i[i];
 			t && this.setFormValue(t, String(e));
@@ -306,47 +306,34 @@ var U = class e extends p {
 			let e = t.get(r) ?? [];
 			for (let t of e) n.add(t);
 		}
-		let r = this.#n.propToComputedMap, i = /* @__PURE__ */ new Set(), a = {};
-		for (let t of Object.keys(e)) {
-			let e = r.get(t) || [];
-			for (let [t, n] of e) i.add(t), a[t] = n;
-		}
-		for (let e of i) {
-			let r = a[e];
-			this.#k(e, this.#v(r));
-			let i = t.get(e) ?? [];
-			for (let e of i) n.add(e);
-		}
-		for (;;) {
-			let e = !1;
-			for (let t of i) {
-				let n = a[t], r = this.#v(n), i = this[t];
-				JSON.stringify(r) !== JSON.stringify(i) && (this.#k(t, r), e = !0);
-			}
-			if (!e) break;
+		let r = this.#x(Object.keys(e));
+		for (let [e, i] of r) {
+			this.#j(e, this.#v(i));
+			let r = t.get(e) ?? [];
+			for (let e of r) n.add(e);
 		}
 		this.#_([...n]), this.#e = !1;
 	}
 	async #d() {
 		let e = this.#n, { template: t } = e;
-		t || (t = e.template = document.createElement("template"), t.innerHTML = e.buildHTML()), await H(t), this.shadowRoot.replaceChildren(t.content.cloneNode(!0));
+		t || (t = e.template = document.createElement("template"), t.innerHTML = e.buildHTML()), await U(t), this.shadowRoot.replaceChildren(t.content.cloneNode(!0));
 	}
 	static buildHTML() {
 		let e = "<style>\n    :host([hidden]) { display: none; }";
 		this.css && (e += this.css), e += "</style>\n";
 		let t = this.html.trim();
-		if (!t) throw new h("static property html must be set");
+		if (!t) throw new g("static property html must be set");
 		return t.startsWith("<") || (t = `<span><!--${t}--></span>`), e + t;
 	}
 	changed(e, t, n) {
 		this[t] = n;
 	}
 	async connectedCallback() {
-		this.#V(), this.#p(), await this.#d(), this.hasAttribute("disabled") && this.#h(), this.#G(this.shadowRoot), this.#w(this.shadowRoot), this.#B(), this.#f(), this.ready();
+		this.#U(), this.#p(), await this.#d(), this.hasAttribute("disabled") && this.#h(), this.#q(this.shadowRoot), this.#E(this.shadowRoot), this.#H(), this.#f(), this.ready();
 	}
 	#f() {
 		let { properties: e } = this.#n;
-		for (let [t, { computed: n }] of Object.entries(e)) n && this.#k(t, this.#v(n));
+		for (let [t, { computed: n }] of Object.entries(e)) n && this.#j(t, this.#v(n));
 	}
 	#p() {
 		let { observedAttributes: e, properties: t } = this.#n;
@@ -354,24 +341,24 @@ var U = class e extends p {
 		for (let [n, r] of Object.entries(t)) r.computed && this.#m(n, r, e);
 	}
 	#m(t, n, r) {
-		if (t === "class" || t === "style") throw new h(`"${t}" is a reserved property`);
+		if (t === "class" || t === "style") throw new g(`"${t}" is a reserved property`);
 		let i = e.getAttrName(t), a = this.hasAttribute(i);
-		n.required && !a && this.#M(this, i, "is a required attribute");
+		n.required && !a && this.#P(this, i, "is a required attribute");
 		let o = n.value;
 		this.hasOwnProperty(t) && (o = this[t], delete this[t]);
-		let { type: c } = n, l = c === Boolean ? o || a : r.includes(i) && a ? this.#P(t, i) : o ?? O(n), u = "#" + t;
-		this[u] = l, n.computed && this.#O(t, n), Object.defineProperty(this, t, {
+		let { type: c } = n, l = c === Boolean ? o || a : r.includes(i) && a ? this.#I(t, i) : o ?? k(n), u = "#" + t;
+		this[u] = l, n.computed && this.#A(t, n), Object.defineProperty(this, t, {
 			enumerable: !0,
 			get() {
 				return this[u];
 			},
 			set(e) {
-				n.computed && !this.#t.has(t) && this.#M(null, t, "is a computed property and cannot be set directly"), c === Number && typeof e == "string" && (e = R(e));
+				n.computed && !this.#t.has(t) && this.#P(null, t, "is a computed property and cannot be set directly"), c === Number && typeof e == "string" && (e = z(e));
 				let r = this[u];
 				if (e === r) return;
-				this.#W(t, c, e), this[u] = e;
+				this.#K(t, c, e), this[u] = e;
 				let a = this.#l.get(t);
-				a && s(a.state, a.stateProp, e), this.#I(t, c, e, i), this.#e || (this.#L(t), this.#D(t)), this.#z(t, e);
+				a && s(a.state, a.stateProp, e), this.#R(t, c, e, i), this.#e || (this.#z(t), this.#k(t)), this.#V(t, e);
 				let o = this.#i[t];
 				o && this.setFormValue(o, String(e)), this.propertyChangedCallback(t, r, e), n.dispatch && this.dispatch("change", {
 					tagName: this.localName,
@@ -383,8 +370,8 @@ var U = class e extends p {
 		});
 	}
 	#h() {
-		let e = this.hasAttribute("disabled"), t = A(this.shadowRoot);
-		for (let n of t) E(n) && (n.disabled = e);
+		let e = this.hasAttribute("disabled"), t = j(this.shadowRoot);
+		for (let n of t) D(n) && (n.disabled = e);
 	}
 	disconnectedCallback() {
 		for (let { unsubscribe: e } of this.#u.values()) e();
@@ -405,17 +392,17 @@ var U = class e extends p {
 		for (let r of t.getAttributeNames()) {
 			let i = t.getAttribute(r);
 			if (r === "ref") {
-				this.#j(t, i);
+				this.#N(t, i);
 				continue;
 			}
-			let a = this.#E(t, i);
+			let a = this.#O(t, i);
 			if (a) {
 				let i = this[a];
-				i === void 0 && this.#N(t, r, a);
-				let [o, s] = r.split(":"), c = e.getPropName(o), l = this.#C(a);
-				n && t.#C(c) || (t[c] = i), o === "value" && (s ? (t["on" + s] === void 0 && this.#M(t, r, "refers to an unsupported event name"), t.setAttribute(o, this[a])) : s = "change"), n && !l && t.#c.set(e.getPropName(o), a);
+				i === void 0 && this.#F(t, r, a);
+				let [o, s] = r.split(":"), c = e.getPropName(o), l = this.#T(a);
+				n && t.#T(c) || (t[c] = i), o === "value" && (s ? (t["on" + s] === void 0 && this.#P(t, r, "refers to an unsupported event name"), t.setAttribute(o, this[a])) : s = "change"), n && !l && t.#c.set(e.getPropName(o), a);
 			}
-			this.#A(i, t, r);
+			this.#M(i, t, r);
 		}
 	}
 	#_(e) {
@@ -427,10 +414,10 @@ var U = class e extends p {
 					r.add(t);
 					continue;
 				}
-				if (t instanceof HTMLElement) this.#R(t, e);
+				if (t instanceof HTMLElement) this.#B(t, e);
 				else if (!(t instanceof CSSStyleRule)) {
 					let { element: n, attrName: r } = t;
-					n instanceof CSSStyleRule ? n.style.setProperty(r, e) : B(n, r, e);
+					n instanceof CSSStyleRule ? n.style.setProperty(r, e) : V(n, r, e);
 				}
 			}
 			if (r.size > 0) {
@@ -451,22 +438,22 @@ var U = class e extends p {
 				let t = Array.from(e.style);
 				for (let n of t) if (n.startsWith("--")) {
 					let t = e.style.getPropertyValue(n);
-					this.#A(t, e, n);
+					this.#M(t, e, n);
 				}
 			}
 		} else {
 			let t = "";
-			if (P(e)) {
-				this.#A(e.textContent, e);
-				let n = e.textContent?.match(b);
+			if (F(e)) {
+				this.#M(e.textContent, e);
+				let n = e.textContent?.match(x);
 				n && (t = n[1]);
 			} else {
 				let n = Array.from(e.childNodes).find((e) => e.nodeType === Node.COMMENT_NODE);
 				n && (t = n.textContent?.trim() ?? "");
 			}
 			if (t) {
-				let n = this.#E(e, t);
-				n && P(e) ? e.textContent = this[n] : this.#A(t, e);
+				let n = this.#O(e, t);
+				n && F(e) ? e.textContent = this[n] : this.#M(t, e);
 			}
 		}
 	}
@@ -474,7 +461,7 @@ var U = class e extends p {
 		let e = this.getAttribute("form-assoc");
 		if (!e) {
 			let t = this.getAttribute("name");
-			if (t) if (this.#S("value")) e = `value:${t}`;
+			if (t) if (this.#w("value")) e = `value:${t}`;
 			else return;
 			else return;
 		}
@@ -486,7 +473,7 @@ var U = class e extends p {
 		this.#i = t, this.#a = new FormData(), this.#s = this.attachInternals(), this.#s.setFormValue(this.#a);
 		for (let [e, n] of Object.entries(t)) {
 			let t = this[e];
-			N(t) && this.setFormValue(n, String(t));
+			P(t) && this.setFormValue(n, String(t));
 		}
 		let r = Object.keys(this.#n.properties), i = this.#o;
 		for (let e of r) i[e] = this[e];
@@ -495,83 +482,128 @@ var U = class e extends p {
 		let e = this.#o;
 		for (let t of Object.keys(e)) {
 			let n = e[t];
-			S.test(n) && (n = this.#v(n)), this[t] = n;
+			C.test(n) && (n = this.#v(n)), this[t] = n;
 		}
 	}
 	static getAttrName(e) {
 		let t = this.propToAttrMap.get(e);
 		return t || (t = e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase(), this.propToAttrMap.set(e, t)), t;
 	}
+	#b() {
+		let e = this.#n, t = e.computedGraph;
+		if (t) return t;
+		let n = f(), r = f(), i = {};
+		for (let t of e.registeredComputedProps) n.set(t, []);
+		for (let [t, a] of e.propToComputedMap) for (let [o, s] of a) {
+			if (i[o] = s, !e.registeredComputedProps.has(o) || (n.has(o) || n.set(o, []), !e.registeredComputedProps.has(t))) continue;
+			n.get(o).push(t);
+			let a = r.get(t);
+			a || (a = [], r.set(t, a)), a.push(o);
+		}
+		return t = {
+			computedToDependenciesMap: n,
+			computedToDependentsMap: r,
+			computedToExprMap: i
+		}, e.computedGraph = t, t;
+	}
+	#x(e) {
+		let { computedToDependenciesMap: t, computedToDependentsMap: n, computedToExprMap: r } = this.#b(), i = this.#n.propToComputedMap, a = /* @__PURE__ */ new Set(), o = [...new Set(e)];
+		for (let e = 0; e < o.length; e++) {
+			let t = o[e], n = i.get(t) || [];
+			for (let [e, t] of n) r[e] = t, a.has(e) || (a.add(e), o.push(e));
+		}
+		let s = [...a].filter((e) => (t.get(e) || []).filter((e) => a.has(e)).length === 0), c = [], l = /* @__PURE__ */ new Map();
+		for (let e of a) {
+			let n = t.get(e) || [], r = 0;
+			for (let e of n) a.has(e) && r++;
+			l.set(e, r);
+		}
+		for (let e = 0; e < s.length; e++) {
+			let t = s[e];
+			c.push(t);
+			let r = n.get(t) || [];
+			for (let e of r) {
+				if (!a.has(e)) continue;
+				let t = l.get(e) - 1;
+				l.set(e, t), t === 0 && s.push(e);
+			}
+		}
+		if (c.length !== a.size) throw new g(`computed properties form a cycle: ${[...a].filter((e) => l.get(e) > 0).sort().join(", ")}`);
+		return c.map((e) => [e, r[e]]);
+	}
 	static getPropName(e) {
 		let t = this.attrToPropMap.get(e);
 		return t || (t = e.replace(/-([a-z])/g, (e, t) => t.toUpperCase()), this.attrToPropMap.set(e, t)), t;
 	}
-	#b(e, t, n) {
+	#S(e, t, n) {
 		if (n.length !== 1) return;
 		let [r] = n;
-		if (!S.test(r)) return;
-		let i = F(e) || P(e), [a, o] = (t ?? "").split(":");
-		if (!(i && a === "value" || P(e))) return;
-		o ? e["on" + o] === void 0 && this.#M(e, t, "refers to an unsupported event name") : o = "change";
-		let s = j(r);
+		if (!C.test(r)) return;
+		let i = I(e) || F(e), [a, o] = (t ?? "").split(":");
+		if (!(i && a === "value" || F(e))) return;
+		o ? e["on" + o] === void 0 && this.#P(e, t, "refers to an unsupported event name") : o = "change";
+		let s = M(r);
 		e.addEventListener(o, (e) => {
 			let { target: t } = e;
 			if (!t) return;
 			let n = t.value, { type: r } = this.#n.properties[s];
-			this[s] = r === Number ? R(n) : n, this.#D(s);
+			this[s] = r === Number ? z(n) : n, this.#k(s);
 		});
 	}
-	#x(e) {
+	#C(e) {
 		return Object.hasOwn(this.#n, e);
 	}
-	#S(e) {
+	#w(e) {
 		return !!this.#n.properties[e];
 	}
-	#C(e) {
+	#T(e) {
 		return !!this.#n.properties[e]?.computed;
 	}
-	#w(e) {
+	#E(e) {
 		let t = Array.from(e.querySelectorAll("*"));
 		for (let e of t) this.#g(e), e.firstElementChild || this.#y(e);
 	}
-	#T() {
+	#D() {
 		if (this.#n.formAssociated || this.closest("form") === null) return;
 		let e = this.#n.name;
-		this.#M(this, void 0, `inside form, class ${e} requires "static formAssociated = true;"`);
+		this.#P(this, void 0, `inside form, class ${e} requires "static formAssociated = true;"`);
 	}
 	static get observedAttributes() {
 		let t = Object.entries(this.properties || {}).filter(([e, t]) => !t.computed).map(([t]) => e.getAttrName(t));
 		return t.includes("disabled") || t.push("disabled"), t;
 	}
 	propertyChangedCallback(e, t, n) {}
-	#E(e, t) {
-		if (!t || !S.test(t)) return;
-		let n = j(t);
-		return this[n] === void 0 && this.#N(e, "", n), n;
+	#O(e, t) {
+		if (!t || !C.test(t)) return;
+		let n = M(t);
+		return this[n] === void 0 && this.#F(e, "", n), n;
 	}
-	#D(e) {
+	#k(e) {
 		let t = this.#n.propToExprsMap.get(e) || [];
 		this.#_(t);
 	}
 	ready() {}
-	#O(e, t) {
-		let n = this.#n, r = n.propToComputedMap;
+	#A(e, t) {
+		let n = this.#n;
+		if (n.registeredComputedProps.has(e)) return;
+		n.registeredComputedProps.add(e), n.computedGraph = null;
+		let r = n.propToComputedMap;
 		function i(t, n) {
 			let i = r.get(t);
 			i || (i = [], r.set(t, i)), i.push([e, n]);
 		}
-		let { computed: a } = t, o = a.match(C) || [];
+		let { computed: a } = t, o = a.match(w) || [];
 		for (let t of o) {
-			let n = j(t);
-			this[n] === void 0 && this.#N(null, e, n), typeof this[n] != "function" && i(n, a);
+			let n = M(t);
+			this[n] === void 0 && this.#F(null, e, n), typeof this[n] != "function" && i(n, a);
 		}
-		for (let t of a.matchAll(y)) {
+		for (let t of a.matchAll(b)) {
 			let r = t[1];
-			if (typeof this[r] != "function") throw new h(`property ${e} computed calls non-method ${r}`);
-			for (let [e, t] of Object.entries(n.properties)) V(t.usedBy)?.includes(r) && i(e, a);
+			if (typeof this[r] != "function") throw new g(`property ${e} computed calls non-method ${r}`);
+			for (let [e, t] of Object.entries(n.properties)) H(t.usedBy)?.includes(r) && i(e, a);
 		}
 	}
-	#k(e, t) {
+	#j(e, t) {
 		this.#t.add(e);
 		try {
 			this[e] = t;
@@ -579,17 +611,17 @@ var U = class e extends p {
 			this.#t.delete(e);
 		}
 	}
-	#A(e, t, n = void 0) {
+	#M(e, t, n = void 0) {
 		if (!e) return;
-		let r = this.#H(t, n, e);
+		let r = this.#W(t, n, e);
 		if (!r) {
 			let r = e.replaceAll("this..", "this.");
-			n ? B(t, n, r) : "textContent" in t && (t.textContent = r);
+			n ? V(t, n, r) : "textContent" in t && (t.textContent = r);
 			return;
 		}
 		let i = this.#n;
 		r.forEach((t) => {
-			let n = j(t);
+			let n = M(t);
 			if (typeof this[n] == "function") return;
 			let r = i.propToExprsMap, a = r.get(n);
 			a || (a = [], r.set(n, a)), a.includes(e) || a.push(e);
@@ -602,69 +634,68 @@ var U = class e extends p {
 		a || (a = [], this.#r.set(e, a)), a.push(n ? {
 			element: t,
 			attrName: n
-		} : t), t instanceof HTMLElement && this.#b(t, n, r);
+		} : t), t instanceof HTMLElement && this.#S(t, n, r);
 		let o = this.#v(e);
-		n ? B(t, n, o) : this.#R(t, o);
+		n ? V(t, n, o) : this.#B(t, o);
 	}
-	#j(e, t) {
+	#N(e, t) {
 		let n = t?.trim() ?? "", r = this.#n.properties[n];
-		r || this.#N(e, "ref", n), r.type !== p && this.#M(e, "ref", `refers to property "${n}" whose type is not HTMLElement`), this[n] && this.#M(e, "ref", `is a duplicate reference to the property "${n}"`), this[n] = e, e.removeAttribute("ref");
+		r || this.#F(e, "ref", n), r.type !== m && this.#P(e, "ref", `refers to property "${n}" whose type is not HTMLElement`), this[n] && this.#P(e, "ref", `is a duplicate reference to the property "${n}"`), this[n] = e, e.removeAttribute("ref");
 	}
 	setAttributeSafe(e, t) {
 		this.hasAttribute(e) || this.setAttribute(e, t);
 	}
 	setFormValue(e, t) {
-		!this.#a || !N(t) || (this.#a.set(e, t), this.#s?.setFormValue(this.#a));
+		!this.#a || !P(t) || (this.#a.set(e, t), this.#s?.setFormValue(this.#a));
 	}
 	static ssr(e = {}) {
-		throw new h("SSR is not available in the browser build.");
+		throw new g("SSR is not available in the browser build.");
 	}
-	#M(e, t, n) {
+	#P(e, t, n) {
 		let r = e instanceof HTMLElement ? e.localName : "CSS rule";
-		throw new h(`component ${this.#n.elementName}` + (e ? `, element "${r}"` : "") + (t ? `, attribute "${t}"` : "") + ` ${n}`);
+		throw new g(`component ${this.#n.elementName}` + (e ? `, element "${r}"` : "") + (t ? `, attribute "${t}"` : "") + ` ${n}`);
 	}
-	#N(e, t, n) {
-		this.#M(e, t, `refers to missing property "${n}"`);
+	#F(e, t, n) {
+		this.#P(e, t, `refers to missing property "${n}"`);
 	}
-	#P(e, t) {
-		return this.#F(e, this.getAttribute(t));
+	#I(e, t) {
+		return this.#L(e, this.getAttribute(t));
 	}
-	#F(t, n) {
-		if (n?.match(C)) return n;
+	#L(t, n) {
+		if (n?.match(w)) return n;
 		let r = this.#n.properties[t], { type: i, values: a } = r;
-		if (i || this.#M(null, t, "does not specify its type"), n === null) return i === Boolean ? !1 : O(r);
+		if (i || this.#P(null, t, "does not specify its type"), n === null) return i === Boolean ? !1 : k(r);
 		if (i === String) {
 			if (a && !a.includes(n)) {
 				let e = a.map((e) => `"${e}"`).join(", ");
-				this.#M(null, t, `must be one of ${e}`);
+				this.#P(null, t, `must be one of ${e}`);
 			}
 			return n;
 		}
-		if (i === Number) return R(n);
+		if (i === Number) return z(n);
 		if (i === Boolean) {
 			if (n === "true") return !0;
 			if (n === "false" || n === "null") return !1;
 			let r = e.getAttrName(t);
-			return n && n !== r && this.#M(null, t, "is a Boolean attribute, so its value must match attribute name or be missing"), n === "" || n === r;
+			return n && n !== r && this.#P(null, t, "is a Boolean attribute, so its value must match attribute name or be missing"), n === "" || n === r;
 		}
 	}
-	#I(e, t, n, r) {
-		N(n) && !this.#C(e) && n !== (t === Boolean ? this.hasAttribute(r) : this.#P(e, r)) && z(this, r || e, n);
+	#R(e, t, n, r) {
+		P(n) && !this.#T(e) && n !== (t === Boolean ? this.hasAttribute(r) : this.#I(e, r)) && B(this, r || e, n);
 	}
-	#L(e) {
-		let t = this.#n.propToComputedMap.get(e) || [];
-		for (let [e, n] of t) this.#k(e, this.#v(n));
+	#z(e) {
+		for (let [t, n] of this.#x([e])) this.#j(t, this.#v(n));
 	}
-	#R(e, t) {
+	#B(e, t) {
 		if (t === void 0) return;
 		let n = e instanceof HTMLElement;
 		Array.isArray(t) && (t = t.join(""));
 		let r = typeof t;
-		r !== "string" && r !== "number" && this.#M(e, void 0, " computed content is not a string or number");
+		r !== "string" && r !== "number" && this.#P(e, void 0, " computed content is not a string or number");
 		let i = String(t);
-		e instanceof HTMLElement && P(e) ? e.value = i : n && r === "string" && i.trim().startsWith("<") ? (e.innerHTML = d(i), this.#G(e), this.#w(e)) : n && (e.textContent = i);
+		e instanceof HTMLElement && F(e) ? e.value = i : n && r === "string" && i.trim().startsWith("<") ? (e.innerHTML = d(i), this.#q(e), this.#E(e)) : n && (e.textContent = i);
 	}
-	#z(e, t) {
+	#V(e, t) {
 		let n = this.#c.get(e);
 		if (!n) return;
 		let r = this.getRootNode();
@@ -674,26 +705,26 @@ var U = class e extends p {
 		let a = i;
 		a[n] = t;
 	}
-	#B() {
+	#H() {
 		let e = this.#n;
 		function t() {
-			let t = /* @__PURE__ */ new Map();
+			let t = f();
 			e.methodToExprsMap = t;
 			let n = Array.from(this.#r.keys());
-			for (let e of n) for (let n of e.matchAll(y)) {
+			for (let e of n) for (let n of e.matchAll(b)) {
 				let r = n[1], i = t.get(r);
 				i || (i = [], t.set(r, i)), i.includes(e) || i.push(e);
 			}
 		}
 		let { properties: n, propToExprsMap: r } = e;
 		for (let [i, a] of Object.entries(n)) {
-			let n = V(a.usedBy);
+			let n = H(a.usedBy);
 			if (!n) continue;
 			e.methodToExprsMap || t.call(this);
 			let { methodToExprsMap: o } = e, s = r.get(i);
 			s || (s = [], r.set(i, s));
 			for (let e of n) {
-				if (typeof this[e] != "function") throw new h(`property ${i} usedBy contains non-method ${e}`);
+				if (typeof this[e] != "function") throw new g(`property ${i} usedBy contains non-method ${e}`);
 				let t = o.get(e) || [];
 				for (let e of t) s.includes(e) || s.push(e);
 			}
@@ -704,8 +735,8 @@ var U = class e extends p {
 			t = {};
 			for (let n of Object.keys(e)) t[n] = n;
 		}
-		this.#U(e, t);
-		for (let [n, r] of Object.entries(t)) if (this.#S(r)) {
+		this.#G(e, t);
+		for (let [n, r] of Object.entries(t)) if (this.#w(r)) {
 			let t = o(e, n);
 			t !== void 0 && (this[r] = t), this.#l.set(r, {
 				state: e,
@@ -726,50 +757,50 @@ var U = class e extends p {
 			unsubscribe: i
 		});
 	}
-	#V() {
+	#U() {
 		let t = new Set(Object.keys(this.#n.properties));
-		for (let n of this.getAttributeNames()) if (!f.has(n) && !n.startsWith("on") && n !== "ref") {
+		for (let n of this.getAttributeNames()) if (!p.has(n) && !n.startsWith("on") && n !== "ref") {
 			if (n === "form-assoc") {
-				this.#T();
+				this.#D();
 				continue;
 			}
 			if (!t.has(e.getPropName(n))) {
 				if (n === "name") {
-					this.#T();
+					this.#D();
 					continue;
 				}
-				this.#M(null, n, "is not a supported attribute");
+				this.#P(null, n, "is not a supported attribute");
 			}
 		}
 	}
-	#H(e, t, n) {
-		let r = n.match(C);
+	#W(e, t, n) {
+		let r = n.match(w);
 		if (r) return r.forEach((n) => {
-			let r = j(n);
-			this[r] === void 0 && this.#N(e, t, r);
+			let r = M(n);
+			this[r] === void 0 && this.#F(e, t, r);
 		}), r;
 	}
-	#U(e, t) {
+	#G(e, t) {
 		for (let [n, r] of Object.entries(t)) {
 			let t = o(e, n);
-			t === void 0 && this.#M(this, void 0, `invalid state path "${n}"`), t = this[r], this.#S(r) || this.#M(null, r, "refers to missing property in useState map");
+			t === void 0 && this.#P(this, void 0, `invalid state path "${n}"`), t = this[r], this.#w(r) || this.#P(null, r, "refers to missing property in useState map");
 		}
 	}
-	#W(e, t, n) {
+	#K(e, t, n) {
 		let { values: r } = this.#n.properties[e];
 		if (r) {
 			let i;
-			t === String ? typeof n == "string" ? r.includes(n) || (i = `must be one of ${r.map((e) => `"${e}"`).join(", ")}`) : i = `value is a ${typeof n}, but type is String` : i = "declares allowed values, but its type is not String", i && this.#M(null, e, i);
+			t === String ? typeof n == "string" ? r.includes(n) || (i = `must be one of ${r.map((e) => `"${e}"`).join(", ")}`) : i = `value is a ${typeof n}, but type is String` : i = "declares allowed values, but its type is not String", i && this.#P(null, e, i);
 		}
 		if (n instanceof t) return;
 		let i = typeof n;
 		if (i === "object") {
 			let { constructor: r } = n;
-			i = r.name, r !== t && this.#M(null, e, `was set to a ${i}, but must be a ${t.name}`);
+			i = r.name, r !== t && this.#P(null, e, `was set to a ${i}, but must be a ${t.name}`);
 		}
-		i !== t.name.toLowerCase() && this.#M(null, e, `was set to a ${i}, but must be a ${t.name}`);
+		i !== t.name.toLowerCase() && this.#P(null, e, `was set to a ${i}, but must be a ${t.name}`);
 	}
-	#G(e) {
+	#q(e) {
 		let t = Array.from(e.querySelectorAll("*"));
 		for (let e of t) {
 			let t = [];
@@ -779,44 +810,44 @@ var U = class e extends p {
 					let i = r.slice(2);
 					i = i[0].toLowerCase() + i.slice(1).toLowerCase();
 					let a = n.value;
-					this.#H(e, r, a);
+					this.#W(e, r, a);
 					let o;
-					typeof this[a] == "function" ? o = (e) => this[a](e) : (this.#H(e, r, a), o = () => this.#v(a)), e.addEventListener(i, o), t.push(r);
+					typeof this[a] == "function" ? o = (e) => this[a](e) : (this.#W(e, r, a), o = () => this.#v(a)), e.addEventListener(i, o), t.push(r);
 				}
 			}
 			for (let n of t) e.removeAttribute(n);
 		}
 	}
 };
-function W(e, ...t) {
-	let n = M(e, t);
+function G(e, ...t) {
+	let n = N(e, t);
 	for (;;) {
-		let e = g.exec(n);
+		let e = _.exec(n);
 		if (!e) break;
 		let t = e[2];
-		if (w.test(t)) {
+		if (T.test(t)) {
 			let r = e[1];
 			if (!r.startsWith("--")) {
 				let i = `--${r}: ${t};
       ${r}: var(--${r})`;
-				n = L(n, e.index, e[0].length, i);
+				n = R(n, e.index, e[0].length, i);
 			}
 		}
 	}
 	return n;
 }
-function G(e, ...t) {
-	let n = M(e, t);
+function K(e, ...t) {
+	let n = N(e, t);
 	for (;;) {
-		let e = x.exec(n);
+		let e = S.exec(n);
 		if (!e || e[1] === "style") break;
-		let t = I(e[2]);
-		if (w.test(t)) {
+		let t = L(e[2]);
+		if (T.test(t)) {
 			let r = `<!-- ${t.trim()} -->`, i = e.index + e[0].indexOf(">") + 1;
-			n = L(n, i, t.length, r);
+			n = R(n, i, t.length, r);
 		}
 	}
 	return n;
 }
 //#endregion
-export { a, G as i, D as n, W as r, U as t };
+export { a, K as i, O as n, G as r, W as t };

package/dist/wrec-ssr.d.ts

@@ -40,6 +40,7 @@ export declare abstract class Wrec extends HTMLElementBase {
     #private;
     private static attrToPropMap;
     private static propToAttrMap;
+    private static computedGraph;
     static context: {};
     static css: string;
     private static elementName;
@@ -49,6 +50,7 @@ export declare abstract class Wrec extends HTMLElementBase {
     private static propToComputedMap;
     private static methodToExprsMap;
     private static propToExprsMap;
+    private static registeredComputedProps;
     private static template;
     [key: string]: any;
     static define(elementName: string): void;

package/dist/wrec-ssr.es.js

@@ -1,4 +1,4 @@
-import { a as e, i as t, n, r, t as i } from "./wrec-S6tBBntE.js";
+import { a as e, i as t, n, r, t as i } from "./wrec-DHp2V7DA.js";
 //#region \0rolldown/runtime.js
 var a = Object.defineProperty, o = Object.getOwnPropertyDescriptor, s = Object.getOwnPropertyNames, c = Object.prototype.hasOwnProperty, l = (e, t) => () => (e && (t = e(e = 0)), t), u = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), d = (e, t) => {
 	let n = {};

package/dist/wrec.d.ts

@@ -40,6 +40,7 @@ export declare abstract class Wrec extends HTMLElementBase {
     #private;
     private static attrToPropMap;
     private static propToAttrMap;
+    private static computedGraph;
     static context: {};
     static css: string;
     private static elementName;
@@ -49,6 +50,7 @@ export declare abstract class Wrec extends HTMLElementBase {
     private static propToComputedMap;
     private static methodToExprsMap;
     private static propToExprsMap;
+    private static registeredComputedProps;
     private static template;
     [key: string]: any;
     static define(elementName: string): void;

package/dist/wrec.es.js

@@ -1,2 +1,2 @@
-import { a as e, i as t, n, r, t as i } from "./wrec-S6tBBntE.js";
+import { a as e, i as t, n, r, t as i } from "./wrec-DHp2V7DA.js";
 export { i as Wrec, e as WrecState, n as createElement, r as css, t as html };

package/package.json

@@ -2,7 +2,7 @@
   "name": "wrec",
   "description": "a small library that greatly simplifies building web components",
   "author": "R. Mark Volkmann",
-  "version": "0.29.0",
+  "version": "0.29.2",
   "license": "MIT",
   "repository": {
     "type": "git",