thunderous 2.3.7 → 2.3.9

package/dist/index.cjs

@@ -58,25 +58,34 @@ var createSignal = (initVal, options) => {
       subscribers.add(subscriber);
     }
     if (options?.debugMode === true || getterOptions?.debugMode === true) {
-      queueMicrotask(() => {
-        let label = "anonymous signal";
-        if (options?.label !== void 0) {
-          label = `(${options.label})`;
-          if (getterOptions?.label !== void 0) {
-            label += ` ${getterOptions.label}`;
-          }
-        } else if (getterOptions?.label !== void 0) {
-          label = getterOptions.label;
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (getterOptions?.label !== void 0) {
+          label += ` ${getterOptions.label}`;
         }
-        console.log("Signal retrieved:", { value, subscribers, label });
-      });
+      } else if (getterOptions?.label !== void 0) {
+        label = getterOptions.label;
+      }
+      console.log("Signal retrieved:", { value, subscribers, label });
     }
     return value;
   };
   getter.getter = true;
+  let stackLength = 0;
   const setter = (newValue, setterOptions) => {
+    stackLength++;
+    queueMicrotask(() => stackLength--);
+    if (stackLength > 1e3) {
+      console.error(new Error("Signal setter stack overflow detected. Possible infinite loop. Bailing out."));
+      stackLength = 0;
+      return;
+    }
     const isObject = typeof newValue === "object" && newValue !== null;
     if (!isObject && value === newValue) return;
+    if (isObject && typeof value === "object" && value !== null) {
+      if (JSON.stringify(value) === JSON.stringify(newValue)) return;
+    }
     const oldValue = value;
     value = newValue;
     for (const fn of subscribers) {
@@ -85,24 +94,24 @@ var createSignal = (initVal, options) => {
       } catch (error) {
         console.error("Error in subscriber:", { error, oldValue, newValue, fn });
       }
-      if (options?.debugMode === true || setterOptions?.debugMode === true) {
-        let label = "anonymous signal";
-        if (options?.label !== void 0) {
-          label = `(${options.label})`;
-          if (setterOptions?.label !== void 0) {
-            label += ` ${setterOptions.label}`;
-          }
-        } else if (setterOptions?.label !== void 0) {
-          label = setterOptions.label;
+    }
+    if (options?.debugMode === true || setterOptions?.debugMode === true) {
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (setterOptions?.label !== void 0) {
+          label += ` ${setterOptions.label}`;
         }
-        console.log("Signal set:", { oldValue, newValue, subscribers, label });
+      } else if (setterOptions?.label !== void 0) {
+        label = setterOptions.label;
       }
+      console.log("Signal set:", { oldValue, newValue, subscribers, label });
     }
   };
   return [getter, setter];
 };
-var derived = (fn) => {
-  const [getter, setter] = createSignal();
+var derived = (fn, options) => {
+  const [getter, setter] = createSignal(void 0, options);
   createEffect(() => {
     try {
       setter(fn());
@@ -282,13 +291,7 @@ var renderState = {
   signalMap: /* @__PURE__ */ new Map(),
   callbackMap: /* @__PURE__ */ new Map(),
   fragmentMap: /* @__PURE__ */ new Map(),
-  registry: customElements
-};
-var logValueError = (value) => {
-  console.error(
-    "An invalid value was passed to a template function. Non-primitive values are not supported.\n\nValue:\n",
-    value
-  );
+  registry: typeof customElements !== "undefined" ? customElements : {}
 };
 var logPropertyWarning = (propName, element) => {
   console.warn(
@@ -363,10 +366,6 @@ var processValue = (value) => {
     renderState.callbackMap.set(uniqueKey, value);
     return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
   }
-  if (typeof value === "object" && value !== null) {
-    logValueError(value);
-    return "";
-  }
   return String(value);
 };
 var evaluateBindings = (element, fragment) => {
@@ -440,6 +439,7 @@ var evaluateBindings = (element, fragment) => {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+          let prevText = attr.value;
           createEffect(() => {
             let newText = "";
             let hasNull = false;
@@ -456,17 +456,18 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
-              child.removeAttribute(attrName);
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
             } else {
-              child.setAttribute(attrName, newText);
+              if (newText !== prevText) child.setAttribute(attrName, newText);
             }
             if (attrName.startsWith("prop:")) {
-              child.removeAttribute(attrName);
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = signal !== void 0 ? signal() : newValue;
             }
+            prevText = newText;
           });
         } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
           const getRootNode = child.getRootNode.bind(child);
@@ -542,7 +543,7 @@ var css = (strings, ...values) => {
       value = isServer ? value() : `{{signal:${uniqueKey}}}`;
     }
     if (typeof value === "object" && value !== null) {
-      logValueError(value);
+      console.error("Objects are not valid in CSS values. Received:", value);
       value = "";
     }
     cssText += string + String(value);
@@ -669,14 +670,44 @@ 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, __setter] = this.#propSignals[prop];
+      let stackLength = 0;
+      const _setter = (newValue, options2) => {
+        stackLength++;
+        queueMicrotask(() => stackLength--);
+        if (stackLength > 999) {
+          console.error(
+            new Error(
+              `Property signal setter stack overflow detected. Possible infinite loop. Bailing out.
+
+Property: ${prop}
+
+New value: ${JSON.stringify(newValue, null, 2)}
+
+Element: <${this.tagName.toLowerCase()}>
+`
+            )
+          );
+          stackLength = 0;
+          return;
+        }
+        __setter(newValue, options2);
+      };
+      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+      if (descriptor === void 0) {
+        Object.defineProperty(this, prop, {
+          get: _getter,
+          set: _setter,
+          configurable: false,
+          enumerable: true
+        });
+      }
+      const setter = (newValue, options2) => {
+        this[prop] = newValue;
+        _setter(newValue, options2);
       };
-      const getter = () => {
-        const value = _getter();
+      const getter = (options2) => {
+        const value = _getter(options2);
         if (value === void 0 && !allowUndefined) {
           const error = new Error(
             `Error accessing property: "${prop}"
@@ -689,17 +720,6 @@ You must set an initial value before calling a property signal's getter.
         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);
@@ -707,7 +727,7 @@ You must set an initial value before calling a property signal's getter.
       };
       return publicSignal;
     }).bind(this);
-    #render() {
+    #render = (() => {
       const root = this.#shadowRoot ?? this;
       renderState.currentShadowRoot = this.#shadowRoot;
       renderState.registry = shadowRootOptions.customElements ?? customElements;
@@ -797,7 +817,7 @@ You must set an initial value before calling a property signal's getter.
       root.replaceChildren(fragment);
       renderState.currentShadowRoot = null;
       renderState.registry = customElements;
-    }
+    }).bind(this);
     static get formAssociated() {
       return formAssociated;
     }

package/dist/index.d.cts

@@ -163,7 +163,7 @@ declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions
  * const doubleCount = derived(() => getCount() * 2);
  * ```
  */
-declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter<T>;
 /**
  * Create an effect that runs when signals change.
  * @example

package/dist/index.d.ts

@@ -163,7 +163,7 @@ declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions
  * const doubleCount = derived(() => getCount() * 2);
  * ```
  */
-declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter<T>;
 /**
  * Create an effect that runs when signals change.
  * @example

package/dist/index.js

@@ -23,25 +23,34 @@ var createSignal = (initVal, options) => {
       subscribers.add(subscriber);
     }
     if (options?.debugMode === true || getterOptions?.debugMode === true) {
-      queueMicrotask(() => {
-        let label = "anonymous signal";
-        if (options?.label !== void 0) {
-          label = `(${options.label})`;
-          if (getterOptions?.label !== void 0) {
-            label += ` ${getterOptions.label}`;
-          }
-        } else if (getterOptions?.label !== void 0) {
-          label = getterOptions.label;
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (getterOptions?.label !== void 0) {
+          label += ` ${getterOptions.label}`;
         }
-        console.log("Signal retrieved:", { value, subscribers, label });
-      });
+      } else if (getterOptions?.label !== void 0) {
+        label = getterOptions.label;
+      }
+      console.log("Signal retrieved:", { value, subscribers, label });
     }
     return value;
   };
   getter.getter = true;
+  let stackLength = 0;
   const setter = (newValue, setterOptions) => {
+    stackLength++;
+    queueMicrotask(() => stackLength--);
+    if (stackLength > 1e3) {
+      console.error(new Error("Signal setter stack overflow detected. Possible infinite loop. Bailing out."));
+      stackLength = 0;
+      return;
+    }
     const isObject = typeof newValue === "object" && newValue !== null;
     if (!isObject && value === newValue) return;
+    if (isObject && typeof value === "object" && value !== null) {
+      if (JSON.stringify(value) === JSON.stringify(newValue)) return;
+    }
     const oldValue = value;
     value = newValue;
     for (const fn of subscribers) {
@@ -50,24 +59,24 @@ var createSignal = (initVal, options) => {
       } catch (error) {
         console.error("Error in subscriber:", { error, oldValue, newValue, fn });
       }
-      if (options?.debugMode === true || setterOptions?.debugMode === true) {
-        let label = "anonymous signal";
-        if (options?.label !== void 0) {
-          label = `(${options.label})`;
-          if (setterOptions?.label !== void 0) {
-            label += ` ${setterOptions.label}`;
-          }
-        } else if (setterOptions?.label !== void 0) {
-          label = setterOptions.label;
+    }
+    if (options?.debugMode === true || setterOptions?.debugMode === true) {
+      let label = "anonymous signal";
+      if (options?.label !== void 0) {
+        label = `(${options.label})`;
+        if (setterOptions?.label !== void 0) {
+          label += ` ${setterOptions.label}`;
         }
-        console.log("Signal set:", { oldValue, newValue, subscribers, label });
+      } else if (setterOptions?.label !== void 0) {
+        label = setterOptions.label;
       }
+      console.log("Signal set:", { oldValue, newValue, subscribers, label });
     }
   };
   return [getter, setter];
 };
-var derived = (fn) => {
-  const [getter, setter] = createSignal();
+var derived = (fn, options) => {
+  const [getter, setter] = createSignal(void 0, options);
   createEffect(() => {
     try {
       setter(fn());
@@ -247,13 +256,7 @@ var renderState = {
   signalMap: /* @__PURE__ */ new Map(),
   callbackMap: /* @__PURE__ */ new Map(),
   fragmentMap: /* @__PURE__ */ new Map(),
-  registry: customElements
-};
-var logValueError = (value) => {
-  console.error(
-    "An invalid value was passed to a template function. Non-primitive values are not supported.\n\nValue:\n",
-    value
-  );
+  registry: typeof customElements !== "undefined" ? customElements : {}
 };
 var logPropertyWarning = (propName, element) => {
   console.warn(
@@ -328,10 +331,6 @@ var processValue = (value) => {
     renderState.callbackMap.set(uniqueKey, value);
     return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
   }
-  if (typeof value === "object" && value !== null) {
-    logValueError(value);
-    return "";
-  }
   return String(value);
 };
 var evaluateBindings = (element, fragment) => {
@@ -405,6 +404,7 @@ var evaluateBindings = (element, fragment) => {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+          let prevText = attr.value;
           createEffect(() => {
             let newText = "";
             let hasNull = false;
@@ -421,17 +421,18 @@ var evaluateBindings = (element, fragment) => {
               }
             }
             if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
-              child.removeAttribute(attrName);
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
             } else {
-              child.setAttribute(attrName, newText);
+              if (newText !== prevText) child.setAttribute(attrName, newText);
             }
             if (attrName.startsWith("prop:")) {
-              child.removeAttribute(attrName);
+              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
               const propName = attrName.replace("prop:", "");
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = signal !== void 0 ? signal() : newValue;
             }
+            prevText = newText;
           });
         } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
           const getRootNode = child.getRootNode.bind(child);
@@ -507,7 +508,7 @@ var css = (strings, ...values) => {
       value = isServer ? value() : `{{signal:${uniqueKey}}}`;
     }
     if (typeof value === "object" && value !== null) {
-      logValueError(value);
+      console.error("Objects are not valid in CSS values. Received:", value);
       value = "";
     }
     cssText += string + String(value);
@@ -634,14 +635,44 @@ 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, __setter] = this.#propSignals[prop];
+      let stackLength = 0;
+      const _setter = (newValue, options2) => {
+        stackLength++;
+        queueMicrotask(() => stackLength--);
+        if (stackLength > 999) {
+          console.error(
+            new Error(
+              `Property signal setter stack overflow detected. Possible infinite loop. Bailing out.
+
+Property: ${prop}
+
+New value: ${JSON.stringify(newValue, null, 2)}
+
+Element: <${this.tagName.toLowerCase()}>
+`
+            )
+          );
+          stackLength = 0;
+          return;
+        }
+        __setter(newValue, options2);
+      };
+      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+      if (descriptor === void 0) {
+        Object.defineProperty(this, prop, {
+          get: _getter,
+          set: _setter,
+          configurable: false,
+          enumerable: true
+        });
+      }
+      const setter = (newValue, options2) => {
+        this[prop] = newValue;
+        _setter(newValue, options2);
       };
-      const getter = () => {
-        const value = _getter();
+      const getter = (options2) => {
+        const value = _getter(options2);
         if (value === void 0 && !allowUndefined) {
           const error = new Error(
             `Error accessing property: "${prop}"
@@ -654,17 +685,6 @@ You must set an initial value before calling a property signal's getter.
         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);
@@ -672,7 +692,7 @@ You must set an initial value before calling a property signal's getter.
       };
       return publicSignal;
     }).bind(this);
-    #render() {
+    #render = (() => {
       const root = this.#shadowRoot ?? this;
       renderState.currentShadowRoot = this.#shadowRoot;
       renderState.registry = shadowRootOptions.customElements ?? customElements;
@@ -762,7 +782,7 @@ You must set an initial value before calling a property signal's getter.
       root.replaceChildren(fragment);
       renderState.currentShadowRoot = null;
       renderState.registry = customElements;
-    }
+    }).bind(this);
     static get formAssociated() {
       return formAssociated;
     }

package/package.json

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