thunderous 2.3.5 → 2.3.6

package/dist/index.cjs

@@ -451,9 +451,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      const attrRemoveQueue = [];
-      const attrSetQueue = [];
-      for (const attr of child.attributes) {
+      for (const attr of [...child.attributes]) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -473,12 +471,12 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
             } else {
-              attrSetQueue.push([attrName, newText]);
+              child.setAttribute(attrName, newText);
             }
             if (attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
@@ -505,27 +503,21 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
-              attrSetQueue.push([attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`]);
+              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
             } else if (attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
         } else if (attrName.startsWith("prop:")) {
-          attrRemoveQueue.push(attrName);
+          child.removeAttribute(attrName);
           const propName = attrName.replace("prop:", "");
           if (!(propName in child)) logPropertyWarning(propName, child);
           child[propName] = attr.value;
         }
       }
-      for (const attrName of attrRemoveQueue) {
-        child.removeAttribute(attrName);
-      }
-      for (const [name, value] of attrSetQueue) {
-        child.setAttribute(name, value);
-      }
       evaluateBindings(child, fragment);
     }
   }
@@ -595,6 +587,7 @@ var css = (strings, ...values) => {
 };
 
 // src/custom-element.ts
+var ANY_BINDING_REGEX = /(\{\{.+:.+\}\})/;
 var customElement = (render, options) => {
   const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const {
@@ -689,6 +682,46 @@ var customElement = (render, options) => {
         }
       }
     });
+    #getPropSignal = ((prop, { allowUndefined = false } = {}) => {
+      if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
+      const [_getter, _setter] = this.#propSignals[prop];
+      let setFromProp = false;
+      const setter = (newValue) => {
+        if (!setFromProp) this[prop] = newValue;
+        _setter(newValue);
+      };
+      const getter = () => {
+        const value = _getter();
+        if (value === void 0 && !allowUndefined) {
+          const error = new Error(
+            `Error accessing property: "${prop}"
+You must set an initial value before calling a property signal's getter.
+`
+          );
+          console.error(error);
+          throw error;
+        }
+        return value;
+      };
+      getter.getter = true;
+      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+      if (descriptor === void 0) {
+        Object.defineProperty(this, prop, {
+          get: getter,
+          set: (newValue) => {
+            setFromProp = true;
+            _setter(newValue);
+            setFromProp = false;
+          }
+        });
+      }
+      const publicSignal = [getter, setter];
+      publicSignal.init = (value) => {
+        _setter(value);
+        return [getter, setter];
+      };
+      return publicSignal;
+    }).bind(this);
     #render() {
       const root = this.#shadowRoot ?? this;
       renderState.currentShadowRoot = this.#shadowRoot;
@@ -732,43 +765,7 @@ var customElement = (render, options) => {
           }
         ),
         propSignals: new Proxy({}, {
-          get: (_, prop) => {
-            if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
-            const [_getter, _setter] = this.#propSignals[prop];
-            let setFromProp = false;
-            const setter = (newValue) => {
-              if (!setFromProp) this[prop] = newValue;
-              _setter(newValue);
-            };
-            const getter = () => {
-              const value = _getter();
-              if (value === void 0) {
-                const error = new Error(
-                  `Error accessing property: "${prop}"
-You must set an initial value before calling a property signal's getter.
-`
-                );
-                console.error(error);
-                throw error;
-              }
-              return value;
-            };
-            getter.getter = true;
-            Object.defineProperty(this, prop, {
-              get: getter,
-              set: (newValue) => {
-                setFromProp = true;
-                _setter(newValue);
-                setFromProp = false;
-              }
-            });
-            const publicSignal = [getter, setter];
-            publicSignal.init = (value) => {
-              _setter(value);
-              return [getter, setter];
-            };
-            return publicSignal;
-          },
+          get: (_, prop) => this.#getPropSignal(prop),
           set: () => {
             console.error("Signals must be assigned via setters.");
             return false;
@@ -825,6 +822,27 @@ You must set an initial value before calling a property signal's getter.
     constructor() {
       try {
         super();
+        if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
+          this.__customCallbackFns = /* @__PURE__ */ new Map();
+        }
+        for (const attr of this.attributes) {
+          this.#attrSignals[attr.name] = createSignal(attr.value);
+        }
+        for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
+          if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+          const propName = attr.prop;
+          const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
+          createEffect(() => {
+            const value = getter();
+            if (value === void 0) return;
+            if (value !== null) {
+              this.setAttribute(attrName, String(value));
+            } else {
+              this.removeAttribute(attrName);
+            }
+          });
+        }
+        this.#render();
       } catch (error) {
         const _error = new Error(
           "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
@@ -833,41 +851,6 @@ You must set an initial value before calling a property signal's getter.
         console.error(_error);
         throw _error;
       }
-      if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
-        this.__customCallbackFns = /* @__PURE__ */ new Map();
-      }
-      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
-        this.#attrSignals[attrName] = createSignal(null);
-        Object.defineProperty(this, attr.prop, {
-          get: () => {
-            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-            const [getter] = this.#attrSignals[attrName];
-            const raw = getter();
-            const rawOnly = raw !== null && attr.value === null;
-            const value = rawOnly ? attr.coerce(raw) : attr.value;
-            return value === null ? null : value;
-          },
-          set: (newValue) => {
-            const oldValue = attr.value;
-            attr.value = newValue;
-            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-            const [, attrSetter] = this.#attrSignals[attrName];
-            const [, propSetter] = this.#propSignals[attrName];
-            const attrValue = newValue === null ? null : String(newValue);
-            if (String(oldValue) === attrValue) return;
-            attrSetter(attrValue);
-            propSetter(newValue);
-            if (attrValue === null) this.removeAttribute(attrName);
-            else this.setAttribute(attrName, attrValue);
-          },
-          configurable: true,
-          enumerable: true
-        });
-      }
-      for (const attr of this.attributes) {
-        this.#attrSignals[attr.name] = createSignal(attr.value);
-      }
-      this.#render();
     }
     connectedCallback() {
       if (this.#observer !== null) {
@@ -885,12 +868,19 @@ You must set an initial value before calling a property signal's getter.
         fn();
       }
     }
+    #attributesBusy = false;
     attributeChangedCallback(name, oldValue, newValue) {
+      if (this.#attributesBusy || ANY_BINDING_REGEX.test(newValue ?? "")) return;
       const [, attrSetter] = this.#attrSignals[name] ?? [];
       attrSetter?.(newValue);
       const prop = this.#attributesAsPropertiesMap.get(name);
       if (prop !== void 0) {
-        this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
+        const propName = prop.prop;
+        this.#attributesBusy = true;
+        const [, propSetter] = this.#getPropSignal(propName);
+        const propValue = newValue === null ? null : prop.coerce(newValue);
+        propSetter(propValue);
+        this.#attributesBusy = false;
       }
       for (const fn of this.#attributeChangedFns) {
         fn(name, oldValue, newValue);

package/dist/index.js

@@ -416,9 +416,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      const attrRemoveQueue = [];
-      const attrSetQueue = [];
-      for (const attr of child.attributes) {
+      for (const attr of [...child.attributes]) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -438,12 +436,12 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
             } else {
-              attrSetQueue.push([attrName, newText]);
+              child.setAttribute(attrName, newText);
             }
             if (attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
@@ -470,27 +468,21 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
-              attrSetQueue.push([attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`]);
+              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
             } else if (attrName.startsWith("prop:")) {
-              attrRemoveQueue.push(attrName);
+              child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
         } else if (attrName.startsWith("prop:")) {
-          attrRemoveQueue.push(attrName);
+          child.removeAttribute(attrName);
           const propName = attrName.replace("prop:", "");
           if (!(propName in child)) logPropertyWarning(propName, child);
           child[propName] = attr.value;
         }
       }
-      for (const attrName of attrRemoveQueue) {
-        child.removeAttribute(attrName);
-      }
-      for (const [name, value] of attrSetQueue) {
-        child.setAttribute(name, value);
-      }
       evaluateBindings(child, fragment);
     }
   }
@@ -560,6 +552,7 @@ var css = (strings, ...values) => {
 };
 
 // src/custom-element.ts
+var ANY_BINDING_REGEX = /(\{\{.+:.+\}\})/;
 var customElement = (render, options) => {
   const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const {
@@ -654,6 +647,46 @@ var customElement = (render, options) => {
         }
       }
     });
+    #getPropSignal = ((prop, { allowUndefined = false } = {}) => {
+      if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
+      const [_getter, _setter] = this.#propSignals[prop];
+      let setFromProp = false;
+      const setter = (newValue) => {
+        if (!setFromProp) this[prop] = newValue;
+        _setter(newValue);
+      };
+      const getter = () => {
+        const value = _getter();
+        if (value === void 0 && !allowUndefined) {
+          const error = new Error(
+            `Error accessing property: "${prop}"
+You must set an initial value before calling a property signal's getter.
+`
+          );
+          console.error(error);
+          throw error;
+        }
+        return value;
+      };
+      getter.getter = true;
+      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+      if (descriptor === void 0) {
+        Object.defineProperty(this, prop, {
+          get: getter,
+          set: (newValue) => {
+            setFromProp = true;
+            _setter(newValue);
+            setFromProp = false;
+          }
+        });
+      }
+      const publicSignal = [getter, setter];
+      publicSignal.init = (value) => {
+        _setter(value);
+        return [getter, setter];
+      };
+      return publicSignal;
+    }).bind(this);
     #render() {
       const root = this.#shadowRoot ?? this;
       renderState.currentShadowRoot = this.#shadowRoot;
@@ -697,43 +730,7 @@ var customElement = (render, options) => {
           }
         ),
         propSignals: new Proxy({}, {
-          get: (_, prop) => {
-            if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
-            const [_getter, _setter] = this.#propSignals[prop];
-            let setFromProp = false;
-            const setter = (newValue) => {
-              if (!setFromProp) this[prop] = newValue;
-              _setter(newValue);
-            };
-            const getter = () => {
-              const value = _getter();
-              if (value === void 0) {
-                const error = new Error(
-                  `Error accessing property: "${prop}"
-You must set an initial value before calling a property signal's getter.
-`
-                );
-                console.error(error);
-                throw error;
-              }
-              return value;
-            };
-            getter.getter = true;
-            Object.defineProperty(this, prop, {
-              get: getter,
-              set: (newValue) => {
-                setFromProp = true;
-                _setter(newValue);
-                setFromProp = false;
-              }
-            });
-            const publicSignal = [getter, setter];
-            publicSignal.init = (value) => {
-              _setter(value);
-              return [getter, setter];
-            };
-            return publicSignal;
-          },
+          get: (_, prop) => this.#getPropSignal(prop),
           set: () => {
             console.error("Signals must be assigned via setters.");
             return false;
@@ -790,6 +787,27 @@ You must set an initial value before calling a property signal's getter.
     constructor() {
       try {
         super();
+        if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
+          this.__customCallbackFns = /* @__PURE__ */ new Map();
+        }
+        for (const attr of this.attributes) {
+          this.#attrSignals[attr.name] = createSignal(attr.value);
+        }
+        for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
+          if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+          const propName = attr.prop;
+          const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
+          createEffect(() => {
+            const value = getter();
+            if (value === void 0) return;
+            if (value !== null) {
+              this.setAttribute(attrName, String(value));
+            } else {
+              this.removeAttribute(attrName);
+            }
+          });
+        }
+        this.#render();
       } catch (error) {
         const _error = new Error(
           "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
@@ -798,41 +816,6 @@ You must set an initial value before calling a property signal's getter.
         console.error(_error);
         throw _error;
       }
-      if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
-        this.__customCallbackFns = /* @__PURE__ */ new Map();
-      }
-      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
-        this.#attrSignals[attrName] = createSignal(null);
-        Object.defineProperty(this, attr.prop, {
-          get: () => {
-            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-            const [getter] = this.#attrSignals[attrName];
-            const raw = getter();
-            const rawOnly = raw !== null && attr.value === null;
-            const value = rawOnly ? attr.coerce(raw) : attr.value;
-            return value === null ? null : value;
-          },
-          set: (newValue) => {
-            const oldValue = attr.value;
-            attr.value = newValue;
-            if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-            const [, attrSetter] = this.#attrSignals[attrName];
-            const [, propSetter] = this.#propSignals[attrName];
-            const attrValue = newValue === null ? null : String(newValue);
-            if (String(oldValue) === attrValue) return;
-            attrSetter(attrValue);
-            propSetter(newValue);
-            if (attrValue === null) this.removeAttribute(attrName);
-            else this.setAttribute(attrName, attrValue);
-          },
-          configurable: true,
-          enumerable: true
-        });
-      }
-      for (const attr of this.attributes) {
-        this.#attrSignals[attr.name] = createSignal(attr.value);
-      }
-      this.#render();
     }
     connectedCallback() {
       if (this.#observer !== null) {
@@ -850,12 +833,19 @@ You must set an initial value before calling a property signal's getter.
         fn();
       }
     }
+    #attributesBusy = false;
     attributeChangedCallback(name, oldValue, newValue) {
+      if (this.#attributesBusy || ANY_BINDING_REGEX.test(newValue ?? "")) return;
       const [, attrSetter] = this.#attrSignals[name] ?? [];
       attrSetter?.(newValue);
       const prop = this.#attributesAsPropertiesMap.get(name);
       if (prop !== void 0) {
-        this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
+        const propName = prop.prop;
+        this.#attributesBusy = true;
+        const [, propSetter] = this.#getPropSignal(propName);
+        const propValue = newValue === null ? null : prop.coerce(newValue);
+        propSetter(propValue);
+        this.#attributesBusy = false;
       }
       for (const fn of this.#attributeChangedFns) {
         fn(name, oldValue, newValue);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "2.3.5",
+	"version": "2.3.6",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",