wrec 0.22.6 → 0.22.8

package/README.md

@@ -151,6 +151,7 @@ to one of those strings.
 
 Server-side rendering (SSR) is supported.
 This requires importing from "wrec/ssr" instead of "wrec".
+"wrec/ssr" should only be imported by server code.
 That bundle is much larger because it bundles the node-html-parser package.
 However, the size increase is not likely an issue
 because it is used on the server-side rather than downloaded to web browsers.

package/dist/wrec.es.js

@@ -1,10 +1,10 @@
 var B = (r) => {
   throw TypeError(r);
 };
-var O = (r, t, e) => t.has(r) || B("Cannot " + e);
-var u = (r, t, e) => (O(r, t, "read from private field"), e ? e.call(r) : t.get(r)), b = (r, t, e) => t.has(r) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), w = (r, t, e, s) => (O(r, t, "write to private field"), s ? s.call(r, e) : t.set(r, e), e), V = (r, t, e) => (O(r, t, "access private method"), e);
+var N = (r, t, e) => t.has(r) || B("Cannot " + e);
+var u = (r, t, e) => (N(r, t, "read from private field"), e ? e.call(r) : t.get(r)), b = (r, t, e) => t.has(r) ? B("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e), w = (r, t, e, s) => (N(r, t, "write to private field"), s ? s.call(r, e) : t.set(r, e), e), V = (r, t, e) => (N(r, t, "access private method"), e);
 import W from "xss";
-function Z(r, t, e = "") {
+function U(r, t, e = "") {
   const s = /* @__PURE__ */ new WeakMap(), o = {
     // Intercept property reads.
     // This creates nested proxies lazily.
@@ -13,38 +13,38 @@ function Z(r, t, e = "") {
       if (c === null || typeof c != "object") return c;
       const a = s.get(c);
       if (a) return a;
-      const h = e ? `${e}.${n}` : n, f = Z(c, t, h);
-      return s.set(c, f), f;
+      const f = e ? `${e}.${n}` : n, l = U(c, t, f);
+      return s.set(c, l), l;
     },
     // Intercept property writes.
     set(i, n, c) {
       const a = Reflect.get(i, n);
       if (a !== c) {
         Reflect.set(i, n, c);
-        const h = e ? `${e}.${n}` : n;
-        t(h, a, c);
+        const f = e ? `${e}.${n}` : n;
+        t(f, a, c);
       }
       return !0;
     }
   };
   return new Proxy(r, o);
 }
-function U(r) {
+function Z(r) {
   const t = {};
   for (const [e, s] of Object.entries(r)) {
     const o = typeof s == "object" && s !== null;
-    t[e] = o ? U(s) : s;
+    t[e] = o ? Z(s) : s;
   }
   return t;
 }
 const P = typeof window < "u" && typeof window.document < "u";
 let z = class extends Error {
 };
-var y, R, d, v, C, g, N, Y;
+var y, $, d, v, C, g, O, Y;
 const T = class T {
   constructor(t, e, s) {
-    b(this, N);
-    b(this, R, /* @__PURE__ */ Symbol("objectId"));
+    b(this, O);
+    b(this, $, /* @__PURE__ */ Symbol("objectId"));
     // This cannot be replaced by a WeakMap<ChangeListener, Set<string>>
     // because there is no way to iterate over the keys of a WeakMap.
     b(this, d, []);
@@ -54,7 +54,7 @@ const T = class T {
     if (!t) throw new z("name cannot be empty");
     if (u(T, y).has(t))
       throw new z(`WrecState with name "${t}" already exists`);
-    if (w(this, v, t), w(this, C, e), w(this, g, Z({}, V(this, N, Y).bind(this))), e && P) {
+    if (w(this, v, t), w(this, C, e), w(this, g, U({}, V(this, O, Y).bind(this))), e && P) {
       const o = sessionStorage.getItem("wrec-state-" + t), i = o ? JSON.parse(o) : void 0;
       i && (s = i);
     }
@@ -106,7 +106,7 @@ const T = class T {
     }), u(this, g)[t] = e;
   }
   get id() {
-    return u(this, R);
+    return u(this, $);
   }
   // This is useful for debugging from the DevTools console.
   // For example: state.log()
@@ -119,7 +119,7 @@ const T = class T {
     w(this, d, u(this, d).filter((e) => e.listenerRef.deref() !== t));
   }
 };
-y = new WeakMap(), R = new WeakMap(), d = new WeakMap(), v = new WeakMap(), C = new WeakMap(), g = new WeakMap(), N = new WeakSet(), Y = function(t, e, s) {
+y = new WeakMap(), $ = new WeakMap(), d = new WeakMap(), v = new WeakMap(), C = new WeakMap(), g = new WeakMap(), O = new WeakSet(), Y = function(t, e, s) {
   const o = /* @__PURE__ */ new Set();
   for (const i of u(this, d)) {
     const n = i.listenerRef.deref();
@@ -144,7 +144,7 @@ y = new WeakMap(), R = new WeakMap(), d = new WeakMap(), v = new WeakMap(), C =
 }, b(T, y, /* @__PURE__ */ new Map()), P && window.addEventListener("beforeunload", () => {
   for (const [t, e] of u(T, y).entries())
     if (u(e, C)) {
-      const s = U(e);
+      const s = Z(e);
       sessionStorage.setItem("wrec-state-" + t, JSON.stringify(s));
     }
 });
@@ -221,7 +221,7 @@ const rt = /* @__PURE__ */ new Set([
 };
 class E extends Error {
 }
-const at = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, G = "a-zA-Z_$", ft = G + "0-9", S = `[${G}][${ft}]*`, ht = /<!--\s*(.*?)\s*-->/, lt = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, j = new RegExp(`^this\\.${S}$`), L = new RegExp(`this\\.${S}(\\.${S})*`, "g"), Q = new RegExp(`this\\.${S}(\\.${S})*`), ut = 5;
+const at = /([a-zA-Z-]+)\s*:\s*([^;}]+)/g, G = "a-zA-Z_$", ft = G + "0-9", A = `[${G}][${ft}]*`, lt = /<!--\s*(.*?)\s*-->/, ht = /<(\w+)(?:\s[^>]*)?>((?:[^<]|<(?!\w))*?)<\/\1>/g, L = new RegExp(`^this\\.${A}$`), j = new RegExp(`this\\.${A}(\\.${A})*`, "g"), Q = new RegExp(`this\\.${A}(\\.${A})*`), ut = 5;
 function pt(r) {
   return r instanceof HTMLButtonElement || r instanceof HTMLFieldSetElement || r instanceof HTMLInputElement || r instanceof HTMLSelectElement || r instanceof HTMLTextAreaElement || r instanceof p;
 }
@@ -233,11 +233,11 @@ function Et(r, t, e) {
   return e && (s.innerHTML = e), s;
 }
 const K = (r) => Array.isArray(r.values) && r.values.length > 0 ? r.values[0] : dt(r.type), dt = (r) => r === String ? "" : r === Number ? 0 : r === Boolean ? !1 : r === Array ? [] : r === Object ? {} : void 0;
-function $(r) {
+function R(r) {
   const t = [];
   let e = r.firstElementChild;
   for (; e; )
-    t.push(e), e.shadowRoot && t.push(...$(e.shadowRoot)), e.firstElementChild && t.push(...$(e)), e = e.nextElementSibling;
+    t.push(e), e.shadowRoot && t.push(...R(e.shadowRoot)), e.firstElementChild && t.push(...R(e)), e = e.nextElementSibling;
   return t;
 }
 const M = (r) => r.substring(ut).split(".")[0];
@@ -251,7 +251,7 @@ function I(r) {
   const t = typeof r;
   return t === "string" || t === "number" || t === "boolean";
 }
-function A(r) {
+function S(r) {
   return r.localName === "textarea";
 }
 function D(r) {
@@ -289,7 +289,7 @@ function k(r, t, e) {
 }
 async function bt(r) {
   const t = /* @__PURE__ */ new Set();
-  for (const s of $(r.content)) {
+  for (const s of R(r.content)) {
     const { localName: o } = s;
     o.includes("-") && t.add(o);
   }
@@ -352,21 +352,24 @@ class p extends ct {
   static propToExprsMap;
   static template = null;
   // This is true while the batchSet method is running.
-  #f = !1;
+  #h = !1;
+  // This holds the names of computed properties
+  // that are currently being updated.
+  #u = /* @__PURE__ */ new Set();
   #t = this.constructor;
   // This is a map from expressions to references to them
   // which can be found in element text content,
   // attribute values, and CSS property values.
   // Each component instance needs its own map.
-  #o = /* @__PURE__ */ new Map();
-  #h = {};
+  #s = /* @__PURE__ */ new Map();
+  #p = {};
   #i;
   // For components that set `formAssociated` to true,
   // this stores in the initial value of each property
   // in the formAssociatedCallback method
   // so they can be restored in the formResetCallback method.
-  #l = {};
-  #u = null;
+  #d = {};
+  #m = null;
   // This is a map from properties in this web component
   // to corresponding properties in a parent web component.
   // This must be an instance property because
@@ -374,11 +377,11 @@ class p extends ct {
   // to the properties of different parent components.
   // This is used to update a parent property
   // when the corresponding child property value changes.
-  #p = /* @__PURE__ */ new Map();
+  #b = /* @__PURE__ */ new Map();
   // This is a map from component properties to state bindings.
   // It must be instance-specific because each component instance
   // can bind the same property to a different WrecState/path.
-  #m = /* @__PURE__ */ new Map();
+  #r = /* @__PURE__ */ new Map();
   static define(t) {
     if (this.elementName = t, _.get(t))
       throw new E(`custom element ${t} is already defined`);
@@ -390,50 +393,50 @@ class p extends ct {
     this.#n("attrToPropMap") || (t.attrToPropMap = /* @__PURE__ */ new Map()), this.#n("properties") || (t.properties = {}), this.#n("propToAttrMap") || (t.propToAttrMap = /* @__PURE__ */ new Map()), this.#n("propToComputedMap") || (t.propToComputedMap = /* @__PURE__ */ new Map()), this.#n("propToExprsMap") || (t.propToExprsMap = /* @__PURE__ */ new Map());
   }
   attributeChangedCallback(t, e, s) {
-    t === "disabled" && this.#g();
+    t === "disabled" && this.#w();
     const o = p.getPropName(t);
-    if (this.#r(o)) {
-      const i = this.#S(o, s);
+    if (this.#c(o)) {
+      const i = this.#x(o, s);
       this[o] = i;
-      const n = this.#h[o];
+      const n = this.#p[o];
       n && this.setFormValue(n, String(i)), this.propertyChangedCallback(o, e, s);
     }
   }
   // This applies multiple property changes and only updates
   // the affected parts of the DOM after all of them are made.
   batchSet(t) {
-    this.#f = !0;
+    this.#h = !0;
     const e = this.#t.propToExprsMap, s = /* @__PURE__ */ new Set();
     for (const [c, a] of Object.entries(t)) {
       this[c] = a;
-      const h = e.get(c) ?? [];
-      for (const f of h)
-        s.add(f);
+      const f = e.get(c) ?? [];
+      for (const l of f)
+        s.add(l);
     }
     const o = this.#t.propToComputedMap, i = /* @__PURE__ */ new Set(), n = {};
     for (const c of Object.keys(t)) {
       const a = o.get(c) || [];
-      for (const [h, f] of a)
-        i.add(h), n[h] = f;
+      for (const [f, l] of a)
+        i.add(f), n[f] = l;
     }
     for (const c of i) {
       const a = n[c];
-      this[c] = this.#s(a);
-      const h = e.get(c) ?? [];
-      for (const f of h)
-        s.add(f);
+      this.#a(c, this.#o(a));
+      const f = e.get(c) ?? [];
+      for (const l of f)
+        s.add(l);
     }
     for (; ; ) {
       let c = !1;
       for (const a of i) {
-        const h = n[a], f = this.#s(h), l = this[a];
-        JSON.stringify(f) !== JSON.stringify(l) && (this[a] = f, c = !0);
+        const f = n[a], l = this.#o(f), h = this[a];
+        JSON.stringify(l) !== JSON.stringify(h) && (this.#a(a, l), c = !0);
       }
       if (!c) break;
     }
-    this.#y([...s]), this.#f = !1;
+    this.#E([...s]), this.#h = !1;
   }
-  async #x() {
+  async #$() {
     const t = this.#t;
     let { template: e } = t;
     e || (e = t.template = document.createElement("template"), e.innerHTML = t.buildHTML()), await bt(e), this.shadowRoot.replaceChildren(e.content.cloneNode(!0));
@@ -451,59 +454,65 @@ class p extends ct {
     this[e] = s;
   }
   connectedCallback() {
-    this.#F(), this.#$(), this.#x().then(() => {
-      this.hasAttribute("disabled") && this.#g(), this.#C(this.shadowRoot), this.#w(this.shadowRoot), this.#P();
+    this.#D(), this.#N(), this.#$().then(() => {
+      this.hasAttribute("disabled") && this.#w(), this.#R(this.shadowRoot), this.#M(this.shadowRoot), this.#O();
     });
   }
-  #P() {
+  #O() {
     const t = this.#t, { properties: e } = t;
     for (const [s, { computed: o }] of Object.entries(e))
-      o && (this[s] = this.#s(o));
+      o && this.#a(s, this.#o(o));
   }
-  #$() {
+  #N() {
     const t = this.#t, { observedAttributes: e, properties: s } = t;
     for (const [o, i] of Object.entries(s))
-      i.computed || this.#b(o, i, e);
+      i.computed || this.#y(o, i, e);
     for (const [o, i] of Object.entries(s))
-      i.computed && this.#b(o, i, e);
+      i.computed && this.#y(o, i, e);
   }
-  #b(t, e, s) {
+  #y(t, e, s) {
     if (t === "class" || t === "style")
       throw new E(`"${t}" is a reserved property`);
     const o = p.getAttrName(t), i = this.hasAttribute(o);
     e.required && !i && this.#e(this, o, "is a required attribute");
     let n = e.value;
     this.hasOwnProperty(t) && (n = this[t], delete this[t]);
-    const { type: c } = e, a = c === Boolean ? n || i : s.includes(o) && i ? this.#A(t, o) : n ?? K(e), h = "#" + t;
-    this[h] = a, e.computed && this.#j(t, e), Object.defineProperty(this, t, {
+    const { type: c } = e, a = c === Boolean ? n || i : s.includes(o) && i ? this.#C(t, o) : n ?? K(e), f = "#" + t;
+    this[f] = a, e.computed && this.#k(t, e), Object.defineProperty(this, t, {
       enumerable: !0,
       get() {
-        return this[h];
+        return this[f];
       },
-      set(f) {
-        c === Number && typeof f == "string" && (f = H(f));
-        const l = this[h];
-        if (f === l) return;
-        this.#I(t, c, f), this[h] = f;
-        const m = this.#m.get(t);
-        m && ot(m.state, m.stateProp, f), this.#L(t, c, f, o), this.#f || (this.#H(t), this.#M(t)), this.#k(t, f);
-        const x = this.#h[t];
-        x && this.setFormValue(x, String(f)), this.propertyChangedCallback(t, l, f), e.dispatch && this.dispatch("change", {
+      set(l) {
+        e.computed && !this.#u.has(t) && this.#e(
+          null,
+          t,
+          "is a computed property and cannot be set directly"
+        ), c === Number && typeof l == "string" && (l = H(l));
+        const h = this[f];
+        if (l === h) return;
+        this.#V(t, c, l), this[f] = l;
+        const m = this.#r.get(t);
+        m && ot(m.state, m.stateProp, l), this.#F(t, c, l, o), this.#h || (this.#_(t), this.#v(t)), this.#I(t, l);
+        const x = this.#p[t];
+        x && this.setFormValue(x, String(l)), this.propertyChangedCallback(t, h, l), e.dispatch && this.dispatch("change", {
           tagName: this.localName,
           property: t,
-          oldValue: l,
-          value: f
+          oldValue: h,
+          value: l
         });
       }
     });
   }
-  #g() {
-    const t = this.hasAttribute("disabled"), e = $(this.shadowRoot);
+  #w() {
+    const t = this.hasAttribute("disabled"), e = R(this.shadowRoot);
     for (const s of e)
       pt(s) && (s.disabled = t);
   }
   disconnectedCallback() {
-    this.#o.clear(), this.#l.clear(), this.#p.clear();
+    for (const { state: t } of this.#r.values())
+      t.removeListener(this);
+    this.#s.clear(), this.#d.clear(), this.#b.clear(), this.#r.clear();
   }
   dispatch(t, e) {
     this.dispatchEvent(
@@ -519,43 +528,53 @@ class p extends ct {
   displayIfSet(t, e = "block") {
     return `display: ${t ? e : "none"}`;
   }
-  #R(t) {
+  #L(t) {
     const e = t instanceof p;
     for (const s of t.getAttributeNames()) {
-      const o = t.getAttribute(s), i = this.#T(t, o);
+      const o = t.getAttribute(s), i = this.#A(t, o);
       if (i) {
         const n = this[i];
-        n === void 0 && this.#a(t, s, i);
+        n === void 0 && this.#l(t, s, i);
         let [c, a] = s.split(":");
-        const h = p.getPropName(c);
-        t[h] = n, c === "value" && (a ? (t["on" + a] === void 0 && this.#e(t, s, "refers to an unsupported event name"), t.setAttribute(c, this[i])) : a = "change"), e && t.#p.set(
+        const f = p.getPropName(c), l = this.#T(i);
+        e && t.#T(f) || (t[f] = n), c === "value" && (a ? (t["on" + a] === void 0 && this.#e(t, s, "refers to an unsupported event name"), t.setAttribute(c, this[i])) : a = "change"), e && !l && t.#b.set(
           p.getPropName(c),
           i
         );
       }
-      this.#c(o, t, s);
+      this.#f(o, t, s);
     }
   }
-  #y(t) {
+  #E(t) {
     for (const e of t) {
-      const s = this.#s(e), o = this.#o.get(e) ?? [];
-      for (const i of o)
-        if (i instanceof HTMLElement)
-          this.#v(i, s);
-        else if (!(i instanceof CSSStyleRule)) {
-          const { element: n, attrName: c } = i;
-          n instanceof CSSStyleRule ? n.style.setProperty(c, s) : k(n, c, s);
+      const s = this.#o(e), o = this.#s.get(e) ?? [], i = /* @__PURE__ */ new Set();
+      for (const n of o) {
+        const c = n instanceof HTMLElement || n instanceof CSSStyleRule ? n : n.element;
+        if (c instanceof HTMLElement && !c.isConnected) {
+          i.add(n);
+          continue;
+        }
+        if (n instanceof HTMLElement)
+          this.#P(n, s);
+        else if (!(n instanceof CSSStyleRule)) {
+          const { element: a, attrName: f } = n;
+          a instanceof CSSStyleRule ? a.style.setProperty(f, s) : k(a, f, s);
         }
+      }
+      if (i.size > 0) {
+        const n = o.filter((c) => !i.has(c));
+        n.length === 0 ? this.#s.delete(e) : this.#s.set(e, n);
+      }
     }
   }
-  #s(t) {
+  #o(t) {
     const { context: e } = this.#t;
     return new Function(
       "context",
       `const {${Object.keys(e).join(",")}} = context; return ${t};`
     ).call(this, e);
   }
-  #N(t) {
+  #j(t) {
     const { localName: e } = t;
     if (e === "style") {
       const { sheet: s } = t, o = s?.cssRules ?? [], i = Array.from(o);
@@ -564,15 +583,15 @@ class p extends ct {
           const c = Array.from(n.style);
           for (const a of c)
             if (a.startsWith("--")) {
-              const h = n.style.getPropertyValue(a);
-              this.#c(h, n, a);
+              const f = n.style.getPropertyValue(a);
+              this.#f(f, n, a);
             }
         }
     } else {
       let s = "";
-      if (A(t)) {
-        this.#c(t.textContent, t);
-        const o = t.textContent?.match(ht);
+      if (S(t)) {
+        this.#f(t.textContent, t);
+        const o = t.textContent?.match(lt);
         o && (s = o[1]);
       } else {
         const o = Array.from(t.childNodes).find(
@@ -581,8 +600,8 @@ class p extends ct {
         o && (s = o.textContent?.trim() ?? "");
       }
       if (s) {
-        const o = this.#T(t, s);
-        o && A(t) ? t.textContent = this[o] : this.#c(s, t);
+        const o = this.#A(t, s);
+        o && S(t) ? t.textContent = this[o] : this.#f(s, t);
       }
     }
   }
@@ -595,7 +614,7 @@ class p extends ct {
     if (!t) {
       const n = this.getAttribute("name");
       if (n)
-        if (this.#r("value"))
+        if (this.#c("value"))
           t = `value:${n}`;
         else
           return;
@@ -607,16 +626,16 @@ class p extends ct {
       const [c, a] = n.split(":");
       e[c.trim()] = a.trim();
     }
-    this.#h = e, this.#i = new FormData(), this.#u = this.attachInternals(), this.#u.setFormValue(this.#i);
-    const o = Object.keys(this.#t.properties), i = this.#l;
+    this.#p = e, this.#i = new FormData(), this.#m = this.attachInternals(), this.#m.setFormValue(this.#i);
+    const o = Object.keys(this.#t.properties), i = this.#d;
     for (const n of o)
       i[n] = this[n];
   }
   formResetCallback() {
-    const t = this.#l;
+    const t = this.#d;
     for (const e of Object.keys(t)) {
       let s = t[e];
-      j.test(s) && (s = this.#s(s)), this[e] = s;
+      L.test(s) && (s = this.#o(s)), this[e] = s;
     }
   }
   static getAttrName(t) {
@@ -627,35 +646,38 @@ class p extends ct {
     let e = this.attrToPropMap.get(t);
     return e || (e = t.replace(/-([a-z])/g, (s, o) => o.toUpperCase()), this.attrToPropMap.set(t, e)), e;
   }
-  #O(t, e, s) {
+  #H(t, e, s) {
     if (s.length !== 1) return;
     const [o] = s;
-    if (!j.test(o)) return;
-    const i = D(t) || A(t);
+    if (!L.test(o)) return;
+    const i = D(t) || S(t);
     let [n, c] = (e ?? "").split(":");
-    if (!(i && n === "value" || A(t))) return;
+    if (!(i && n === "value" || S(t))) return;
     c ? t["on" + c] === void 0 && this.#e(t, e, "refers to an unsupported event name") : c = "change";
-    const h = M(o);
-    t.addEventListener(c, (f) => {
-      const { target: l } = f;
-      if (!l) return;
-      const m = l.value, { type: x } = this.#t.properties[h];
-      this[h] = x === Number ? H(m) : m, this.#M(h);
+    const f = M(o);
+    t.addEventListener(c, (l) => {
+      const { target: h } = l;
+      if (!h) return;
+      const m = h.value, { type: x } = this.#t.properties[f];
+      this[f] = x === Number ? H(m) : m, this.#v(f);
     });
   }
   #n(t) {
     return Object.hasOwn(this.#t, t);
   }
-  #r(t) {
+  #c(t) {
     return !!this.#t.properties[t];
   }
-  #w(t) {
+  #T(t) {
+    return !!this.#t.properties[t]?.computed;
+  }
+  #M(t) {
     const e = Array.from(t.querySelectorAll("*"));
     for (const s of e)
-      this.#R(s), s.firstElementChild || this.#N(s);
+      this.#L(s), s.firstElementChild || this.#j(s);
   }
   // formAssociated is only needed when the component is inside a form.
-  #E() {
+  #S() {
     if (this.#t.formAssociated || this.closest("form") === null) return;
     const t = this.#t.name;
     this.#e(
@@ -673,35 +695,43 @@ class p extends ct {
   // Subclasses can override this to add functionality.
   propertyChangedCallback(t, e, s) {
   }
-  #T(t, e) {
-    if (!e || !j.test(e)) return;
+  #A(t, e) {
+    if (!e || !L.test(e)) return;
     const s = M(e);
-    return this[s] === void 0 && this.#a(t, "", s), s;
+    return this[s] === void 0 && this.#l(t, "", s), s;
   }
-  #M(t) {
+  #v(t) {
     const e = this.#t.propToExprsMap.get(t) || [];
-    this.#y(e);
+    this.#E(e);
   }
-  #j(t, e) {
+  #k(t, e) {
     const { computed: s, uses: o } = e, i = this.#t.propToComputedMap;
-    function n(a, h) {
-      let f = i.get(a);
-      f || (f = [], i.set(a, f)), f.push([t, h]);
+    function n(a, f) {
+      let l = i.get(a);
+      l || (l = [], i.set(a, l)), l.push([t, f]);
     }
-    const c = s.match(L) || [];
+    const c = s.match(j) || [];
     for (const a of c) {
-      const h = M(a);
-      this[h] === void 0 && this.#a(null, t, h), typeof this[h] != "function" && n(h, s);
+      const f = M(a);
+      this[f] === void 0 && this.#l(null, t, f), typeof this[f] != "function" && n(f, s);
     }
     if (o)
       for (const a of o.split(","))
         n(a.trim(), s);
   }
+  #a(t, e) {
+    this.#u.add(t);
+    try {
+      this[t] = e;
+    } finally {
+      this.#u.delete(t);
+    }
+  }
   // WARNING: Do not place untrusted JavaScript expressions
   // in attribute values or the text content of elements!
-  #c(t, e, s = void 0) {
+  #f(t, e, s = void 0) {
     if (!t) return;
-    const o = this.#d(e, s, t);
+    const o = this.#g(e, s, t);
     if (!o) {
       const a = t.replaceAll("this..", "this.");
       s ? k(e, s, a) : "textContent" in e && (e.textContent = a);
@@ -709,24 +739,24 @@ class p extends ct {
     }
     const i = this.#t;
     o.forEach((a) => {
-      const h = M(a);
-      if (typeof this[h] == "function") return;
-      const f = i.propToExprsMap;
-      let l = f.get(h);
-      l || (l = [], f.set(h, l)), l.includes(t) || l.push(t);
+      const f = M(a);
+      if (typeof this[f] == "function") return;
+      const l = i.propToExprsMap;
+      let h = l.get(f);
+      h || (h = [], l.set(f, h)), h.includes(t) || h.push(t);
     });
-    for (const [a, h] of this.#o.entries())
-      for (const f of h) {
-        const l = f instanceof HTMLElement || f instanceof CSSStyleRule ? f : f.element;
-        l instanceof CSSStyleRule || l.isConnected || this.#o.set(
+    for (const [a, f] of this.#s.entries())
+      for (const l of f) {
+        const h = l instanceof HTMLElement || l instanceof CSSStyleRule ? l : l.element;
+        h instanceof CSSStyleRule || h.isConnected || this.#s.set(
           a,
-          h.filter((m) => m !== f)
+          f.filter((m) => m !== l)
         );
       }
-    let n = this.#o.get(t);
-    n || (n = [], this.#o.set(t, n)), n.push(s ? { element: e, attrName: s } : e), e instanceof HTMLElement && this.#O(e, s, o);
-    const c = this.#s(t);
-    s ? k(e, s, c) : this.#v(e, c);
+    let n = this.#s.get(t);
+    n || (n = [], this.#s.set(t, n)), n.push(s ? { element: e, attrName: s } : e), e instanceof HTMLElement && this.#H(e, s, o);
+    const c = this.#o(t);
+    s ? k(e, s, c) : this.#P(e, c);
   }
   // This follows the best practice
   // "Do not override author-set, global attributes."
@@ -734,7 +764,7 @@ class p extends ct {
     this.hasAttribute(t) || this.setAttribute(t, e);
   }
   setFormValue(t, e) {
-    !this.#i || !I(e) || (this.#i.set(t, e), this.#u?.setFormValue(this.#i));
+    !this.#i || !I(e) || (this.#i.set(t, e), this.#m?.setFormValue(this.#i));
   }
   static ssr(t = {}) {
     throw new E('Import Wrec from "wrec/ssr" to use the ssr method.');
@@ -745,14 +775,14 @@ class p extends ct {
       `component ${this.#t.elementName}` + (t ? `, element "${o}"` : "") + (e ? `, attribute "${e}"` : "") + ` ${s}`
     );
   }
-  #a(t, e, s) {
+  #l(t, e, s) {
     this.#e(t, e, `refers to missing property "${s}"`);
   }
-  #A(t, e) {
-    return this.#S(t, this.getAttribute(e));
+  #C(t, e) {
+    return this.#x(t, this.getAttribute(e));
   }
-  #S(t, e) {
-    if (e?.match(L)) return e;
+  #x(t, e) {
+    if (e?.match(j)) return e;
     const o = this.#t.properties[t], { type: i, values: n } = o;
     if (i || this.#e(null, t, "does not specify its type"), e === null)
       return i === Boolean ? !1 : K(o);
@@ -777,20 +807,20 @@ class p extends ct {
   }
   // Updates the matching attribute for a property.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #L(t, e, s, o) {
+  #F(t, e, s, o) {
     if (I(s)) {
-      const i = e === Boolean ? this.hasAttribute(o) : this.#A(t, o);
+      const i = e === Boolean ? this.hasAttribute(o) : this.#C(t, o);
       s !== i && st(this, o || t, s);
     }
   }
   // Updates all computed properties that reference this property.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #H(t) {
+  #_(t) {
     const s = this.#t.propToComputedMap.get(t) || [];
     for (const [o, i] of s)
-      this[o] = this.#s(i);
+      this.#a(o, this.#o(i));
   }
-  #v(t, e) {
+  #P(t, e) {
     if (e === void 0) return;
     const s = t instanceof HTMLElement;
     Array.isArray(e) && (e = e.join(""));
@@ -801,17 +831,17 @@ class p extends ct {
       " computed content is not a string or number"
     );
     const i = String(e);
-    if (t instanceof HTMLElement && A(t))
+    if (t instanceof HTMLElement && S(t))
       t.value = i;
     else if (s && o === "string" && i.trim().startsWith("<")) {
       const n = nt(i);
-      t.innerHTML = n, this.#C(t), this.#w(t);
+      t.innerHTML = n, this.#R(t), this.#M(t);
     } else s && (t.textContent = i);
   }
   // Update corresponding parent web component property if bound to one.
   // VS Code thinks this is never called, but it is called by #defineProp.
-  #k(t, e) {
-    const s = this.#p.get(t);
+  #I(t, e) {
+    const s = this.#b.get(t);
     if (!s) return;
     const o = this.getRootNode();
     if (!(o instanceof ShadowRoot)) return;
@@ -831,43 +861,43 @@ class p extends ct {
       for (const s of Object.keys(t))
         e[s] = s;
     }
-    this.#_(t, e);
+    this.#B(t, e);
     for (const [s, o] of Object.entries(e))
-      if (this.#r(o)) {
+      if (this.#c(o)) {
         const i = q(t, s);
-        i !== void 0 && (this[o] = i), this.#m.set(o, { state: t, stateProp: s });
+        i !== void 0 && (this[o] = i), this.#r.set(o, { state: t, stateProp: s });
       }
     t.addListener(this, e);
   }
-  #F() {
+  #D() {
     const t = new Set(Object.keys(this.#t.properties));
     for (const e of this.getAttributeNames())
       if (!rt.has(e) && !e.startsWith("on")) {
         if (e === "form-assoc") {
-          this.#E();
+          this.#S();
           continue;
         }
         if (!t.has(p.getPropName(e))) {
           if (e === "name") {
-            this.#E();
+            this.#S();
             continue;
           }
           this.#e(null, e, "is not a supported attribute");
         }
       }
   }
-  #d(t, e, s) {
-    const o = s.match(L);
+  #g(t, e, s) {
+    const o = s.match(j);
     if (o)
       return o.forEach((i) => {
         const n = M(i);
-        this[n] === void 0 && this.#a(t, e, n);
+        this[n] === void 0 && this.#l(t, e, n);
       }), o;
   }
-  #_(t, e) {
+  #B(t, e) {
     for (const [s, o] of Object.entries(e)) {
       let i = q(t, s);
-      i === void 0 && this.#e(this, void 0, `invalid state path "${s}"`), i = this[o], this.#r(o) || this.#e(
+      i === void 0 && this.#e(this, void 0, `invalid state path "${s}"`), i = this[o], this.#c(o) || this.#e(
         null,
         o,
         "refers to missing property in useState map"
@@ -876,7 +906,7 @@ class p extends ct {
   }
   // When type is an array, this can't validate the type of the array elements.
   // This is called by #defineProp.
-  #I(t, e, s) {
+  #V(t, e, s) {
     const { values: o } = this.#t.properties[t];
     if (o) {
       let n;
@@ -898,7 +928,7 @@ class p extends ct {
       `was set to a ${i}, but must be a ${e.name}`
     );
   }
-  #C(t) {
+  #R(t) {
     const e = Array.from(t.querySelectorAll("*"));
     for (const s of e) {
       const o = [];
@@ -908,9 +938,9 @@ class p extends ct {
           let c = n.slice(2);
           c = c[0].toLowerCase() + c.slice(1).toLowerCase();
           const a = i.value;
-          this.#d(s, n, a);
-          let h;
-          typeof this[a] == "function" ? h = (f) => this[a](f) : (this.#d(s, n, a), h = () => this.#s(a)), s.addEventListener(c, h), o.push(n);
+          this.#g(s, n, a);
+          let f;
+          typeof this[a] == "function" ? f = (l) => this[a](l) : (this.#g(s, n, a), f = () => this.#o(a)), s.addEventListener(c, f), o.push(n);
         }
       }
       for (const i of o)
@@ -938,7 +968,7 @@ function Tt(r, ...t) {
 function Mt(r, ...t) {
   let e = tt(r, t);
   for (; ; ) {
-    const s = lt.exec(e);
+    const s = ht.exec(e);
     if (!s || s[1] === "style") break;
     const o = mt(s[2]);
     if (Q.test(o)) {

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.22.6",
+  "version": "0.22.8",
   "license": "MIT",
   "repository": {
     "type": "git",