thunderous 2.3.13 → 2.4.2

package/dist/index.cjs

@@ -49,13 +49,14 @@ var DEFAULT_RENDER_OPTIONS = {
 };
 
 // src/signals.ts
-var subscriber = null;
+var ident = null;
+var effects = /* @__PURE__ */ new WeakMap();
 var createSignal = (initVal, options) => {
   const subscribers = /* @__PURE__ */ new Set();
   let value = initVal;
   const getter = (getterOptions) => {
-    if (subscriber !== null) {
-      subscribers.add(subscriber);
+    if (ident !== null) {
+      subscribers.add(ident);
     }
     if (options?.debugMode === true || getterOptions?.debugMode === true) {
       let label = "anonymous signal";
@@ -67,7 +68,11 @@ var createSignal = (initVal, options) => {
       } else if (getterOptions?.label !== void 0) {
         label = getterOptions.label;
       }
-      console.log("Signal retrieved:", { value, subscribers, label });
+      console.log("Signal retrieved:", {
+        value,
+        subscribers: Array.from(subscribers).map((sym) => effects.get(sym)),
+        label
+      });
     }
     return value;
   };
@@ -84,15 +89,29 @@ var createSignal = (initVal, options) => {
     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 isPlainObject = (obj) => typeof obj === "object" && obj !== null && Object.getPrototypeOf(obj) === Object.prototype;
+      if (isPlainObject(value) && isPlainObject(newValue)) {
+        if (JSON.stringify(value) === JSON.stringify(newValue)) return;
+      }
     }
     const oldValue = value;
     value = newValue;
-    for (const fn of subscribers) {
-      try {
-        fn();
-      } catch (error) {
-        console.error("Error in subscriber:", { error, oldValue, newValue, fn });
+    for (const sym of subscribers) {
+      const effectRef = effects.get(sym);
+      if (effectRef !== void 0) {
+        try {
+          effectRef.fn({
+            lastValue: effectRef.value,
+            destroy: () => {
+              effects.delete(sym);
+              queueMicrotask(() => subscribers.delete(sym));
+            }
+          });
+        } catch (error) {
+          console.error("Error in subscriber:", { error, oldValue, newValue, fn: effectRef.fn });
+        }
+      } else {
+        queueMicrotask(() => subscribers.delete(sym));
       }
     }
     if (options?.debugMode === true || setterOptions?.debugMode === true) {
@@ -105,7 +124,12 @@ var createSignal = (initVal, options) => {
       } else if (setterOptions?.label !== void 0) {
         label = setterOptions.label;
       }
-      console.log("Signal set:", { oldValue, newValue, subscribers, label });
+      console.log("Signal set:", {
+        oldValue,
+        newValue,
+        subscribers: Array.from(subscribers).map((sym) => effects.get(sym)),
+        label
+      });
     }
   };
   return [getter, setter];
@@ -121,21 +145,33 @@ var derived = (fn, options) => {
   });
   return getter;
 };
-var createEffect = (fn) => {
-  subscriber = fn;
+var createEffect = (fn, value) => {
+  const privateIdent = ident = {};
+  effects.set(ident, { fn, value });
   try {
-    fn();
+    fn({
+      lastValue: value,
+      destroy: () => {
+        effects.delete(privateIdent);
+      }
+    });
   } catch (error) {
     console.error("Error in effect:", { error, fn });
   }
-  subscriber = null;
+  ident = null;
 };
 
 // src/utilities.ts
 var NOOP = () => void 0;
 var queryComment = (node, comment) => {
-  for (const child of node.childNodes) {
-    if (child.nodeType === Node.COMMENT_NODE && child.nodeValue === comment) {
+  const walker = document.createTreeWalker(node, NodeFilter.SHOW_COMMENT, {
+    acceptNode: (n) => n.nodeValue === comment ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  return walker.nextNode();
+};
+var queryChildren = (children, selector) => {
+  for (const child of children) {
+    if (child instanceof Element && child.matches(selector)) {
       return child;
     }
   }
@@ -291,6 +327,7 @@ var renderState = {
   signalMap: /* @__PURE__ */ new Map(),
   callbackMap: /* @__PURE__ */ new Map(),
   fragmentMap: /* @__PURE__ */ new Map(),
+  childrenMap: /* @__PURE__ */ new Map(),
   propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
@@ -301,21 +338,27 @@ var logPropertyWarning = (propName, element) => {
     "\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it."
   );
 };
-var arrayToDocumentFragment = (array, parent, uniqueKey) => {
-  const documentFragment = new DocumentFragment();
-  let count = 0;
-  const keys = /* @__PURE__ */ new Set();
-  for (const item of array) {
-    const node = createNewNode(item, parent, uniqueKey);
-    if (node instanceof DocumentFragment) {
-      const child = node.firstElementChild;
-      if (node.children.length > 1) {
+var asNodeList = (value, parent) => {
+  if (typeof value === "string") return [new Text(value)];
+  if (value instanceof DocumentFragment) return [...value.children];
+  if (Array.isArray(value)) {
+    const nodeList = [];
+    let count = 0;
+    const keys = /* @__PURE__ */ new Set();
+    for (const item of value) {
+      const cachedItem = item instanceof DocumentFragment ? renderState.childrenMap.get(item) : void 0;
+      const children = cachedItem ?? asNodeList(item, parent);
+      if (cachedItem === void 0 && item instanceof DocumentFragment) {
+        renderState.childrenMap.set(item, children);
+      }
+      if (children.length > 1) {
         console.error(
           "When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:",
           parent
         );
       }
-      if (child === null) continue;
+      const child = children[0];
+      if (child === null || !(child instanceof Element)) continue;
       let key = child.getAttribute("key");
       if (key === null) {
         console.warn(
@@ -333,18 +376,11 @@ var arrayToDocumentFragment = (array, parent, uniqueKey) => {
       }
       keys.add(key);
       count++;
+      nodeList.push(...children);
     }
-    documentFragment.append(node);
+    return nodeList;
   }
-  const comment = document.createComment(uniqueKey);
-  documentFragment.append(comment);
-  return documentFragment;
-};
-var createNewNode = (value, parent, uniqueKey) => {
-  if (typeof value === "string") return new Text(value);
-  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent, uniqueKey);
-  if (value instanceof DocumentFragment) return value;
-  return new Text("");
+  return [new Text()];
 };
 var processValue = (value) => {
   if (!isServer && value instanceof DocumentFragment) {
@@ -370,62 +406,135 @@ var processValue = (value) => {
   return String(value);
 };
 var evaluateBindings = (element, fragment) => {
-  for (const child of element.childNodes) {
+  for (const child of [...element.childNodes]) {
     if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
       const textList = child.data.split(SIGNAL_BINDING_REGEX);
-      const sibling = child.nextSibling;
+      const nextSibling = child.nextSibling;
+      const prevSibling = child.previousSibling;
       textList.forEach((text, i) => {
-        const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-        const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+        const uniqueKey = SIGNAL_BINDING_REGEX.test(text) ? text.replace(/\{\{signal:(.+)\}\}/, "$1") : void 0;
+        const signal = uniqueKey !== void 0 ? renderState.signalMap.get(uniqueKey) : void 0;
         const newValue = signal !== void 0 ? signal() : text;
-        const newNode = createNewNode(newValue, element, uniqueKey);
+        const initialChildren = asNodeList(newValue, element);
         if (i === 0) {
-          child.replaceWith(newNode);
+          child.replaceWith(...initialChildren);
         } else {
-          element.insertBefore(newNode, sibling);
+          const endAnchor2 = queryComment(element, `${uniqueKey}:end`) ?? nextSibling;
+          if (endAnchor2 !== null) {
+            endAnchor2.before(...initialChildren);
+          } else {
+            element.append(...initialChildren);
+          }
         }
-        if (signal !== void 0 && newNode instanceof Text) {
-          createEffect(() => {
-            newNode.data = signal();
-          });
-        } else if (signal !== void 0 && newNode instanceof DocumentFragment) {
-          let init = false;
-          createEffect(() => {
-            const result = signal();
-            const nextNode = createNewNode(result, element, uniqueKey);
-            if (nextNode instanceof Text) {
-              const error = new TypeError(
-                "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
-              );
-              console.error(error);
-              throw error;
+        if (uniqueKey === void 0) return;
+        const startAnchor = document.createComment(`${uniqueKey}:start`);
+        if (prevSibling !== null) {
+          prevSibling.after(startAnchor);
+        } else {
+          element.prepend(startAnchor);
+        }
+        const endAnchor = document.createComment(`${uniqueKey}:end`);
+        if (nextSibling !== null) {
+          nextSibling.before(endAnchor);
+        } else {
+          element.append(endAnchor);
+        }
+        const bindText = (node, signal2) => {
+          createEffect(({ destroy }) => {
+            const result = signal2();
+            if (Array.isArray(result)) {
+              destroy();
+              bindArray(signal2);
+              return;
             }
-            for (const child2 of element.children) {
-              const key = child2.getAttribute("key");
-              if (key === null) continue;
-              const matchingNode = nextNode.querySelector(`[key="${key}"]`);
-              if (init && matchingNode === null) {
-                child2.remove();
-              }
+            if (result instanceof DocumentFragment) {
+              destroy();
+              bindFragment(signal2);
+              return;
             }
-            let anchor = queryComment(element, uniqueKey);
-            for (const child2 of nextNode.children) {
-              const key = child2.getAttribute("key");
-              const matchingNode = element.querySelector(`[key="${key}"]`);
-              if (matchingNode === null) continue;
-              matchingNode.__customCallbackFns = child2.__customCallbackFns;
-              for (const attr of child2.attributes) {
-                matchingNode.setAttribute(attr.name, attr.value);
+            node.data = result === null ? "" : String(result);
+          });
+        };
+        const bindArray = (signal2) => {
+          createEffect(
+            ({ lastValue: oldChildren, destroy }) => {
+              const result = signal2();
+              const newChildren = asNodeList(result, element);
+              const firstChild = newChildren[0];
+              if (!Array.isArray(result) && newChildren.length === 1 && firstChild instanceof DocumentFragment) {
+                destroy();
+                bindFragment(signal2);
+                return;
+              }
+              if (newChildren.length === 1 && firstChild instanceof Text) {
+                destroy();
+                bindText(firstChild, signal2);
+                return;
+              }
+              while (startAnchor.nextSibling !== endAnchor) {
+                startAnchor.nextSibling?.remove();
+              }
+              startAnchor.after(...newChildren);
+              if (oldChildren === null) return newChildren;
+              for (const persistedChild of oldChildren) {
+                if (persistedChild instanceof Element) {
+                  const key = persistedChild.getAttribute("key");
+                  if (key === null) continue;
+                  const newChild = queryChildren(newChildren, `[key="${key}"]`);
+                  if (newChild === null) {
+                    persistedChild.remove();
+                    continue;
+                  }
+                  for (const attr of [...persistedChild.attributes]) {
+                    if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
+                  }
+                  for (const newAttr of [...newChild.attributes]) {
+                    const oldAttrValue = persistedChild.getAttribute(newAttr.name);
+                    if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
+                    persistedChild.setAttribute(newAttr.name, newAttr.value);
+                  }
+                  newChild.replaceWith(persistedChild);
+                }
               }
-              matchingNode.replaceChildren(...child2.childNodes);
-              anchor = matchingNode.nextSibling;
-              child2.replaceWith(matchingNode);
+              return newChildren;
+            },
+            null
+          );
+        };
+        const bindFragment = (signal2) => {
+          const initialFragment = signal2();
+          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          createEffect(({ destroy }) => {
+            const result = signal2();
+            const cachedChildren = renderState.childrenMap.get(initialFragment);
+            const children = cachedChildren ?? asNodeList(result, element);
+            if (Array.isArray(result)) {
+              destroy();
+              bindArray(signal2);
+              return;
+            }
+            if (result instanceof Text) {
+              const children2 = asNodeList(result, element);
+              const text2 = children2[0];
+              destroy();
+              bindText(text2, signal2);
+              return;
+            }
+            while (startAnchor.nextSibling !== endAnchor) {
+              startAnchor.nextSibling?.remove();
             }
-            const nextAnchor = queryComment(nextNode, uniqueKey);
-            nextAnchor?.remove();
-            element.insertBefore(nextNode, anchor);
-            if (!init) init = true;
+            startAnchor.after(...children);
           });
+        };
+        if (signal !== void 0) {
+          if (Array.isArray(newValue)) {
+            bindArray(signal);
+          } else if (initialChildren instanceof DocumentFragment) {
+            bindFragment(signal);
+          } else {
+            const initialChild = initialChildren[0];
+            bindText(initialChild, signal);
+          }
         }
       });
     }
@@ -510,6 +619,7 @@ var evaluateBindings = (element, fragment) => {
                 );
                 return;
               }
+              if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
@@ -524,6 +634,7 @@ var evaluateBindings = (element, fragment) => {
             );
             return;
           }
+          if (!(propName in child)) logPropertyWarning(propName, child);
           child[propName] = attr.value;
         }
       }
@@ -597,7 +708,7 @@ var css = (strings, ...values) => {
     }
     const newCSSText = newCSSTextList.join("");
     if (isCSSStyleSheet(stylesheet)) {
-      stylesheet.replace(newCSSText).catch(console.error);
+      stylesheet.replaceSync(newCSSText);
     } else {
       stylesheet.textContent = newCSSText;
     }
@@ -626,6 +737,7 @@ var customElement = (render, options) => {
       if (shadowRootOptions.registry !== void 0 && "scoped" in shadowRootOptions.registry && shadowRootOptions.registry.scoped) {
         return shadowRootOptions.registry;
       }
+      return void 0;
     })();
     return {
       define(tagName) {
@@ -685,8 +797,8 @@ var customElement = (render, options) => {
     #formResetCallbackFns = /* @__PURE__ */ new Set();
     #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
     #clientOnlyCallbackFns = /* @__PURE__ */ new Set();
-    #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
     #internals = this.attachInternals();
+    #shadowRoot = attachShadow ? this.#internals.shadowRoot ?? this.attachShadow(shadowRootOptions) : null;
     #observer = options?.observedAttributes !== void 0 ? null : new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
@@ -739,7 +851,7 @@ Element: <${this.tagName.toLowerCase()}>
         this[prop] = newValue;
         _setter(newValue, options2);
       };
-      const getter = (options2) => {
+      const getter = ((options2) => {
         const value = _getter(options2);
         if (value === void 0 && !allowUndefined) {
           const error = new Error(
@@ -751,7 +863,7 @@ You must set an initial value before calling a property signal's getter.
           throw error;
         }
         return value;
-      };
+      });
       getter.getter = true;
       const publicSignal = [getter, setter];
       publicSignal.init = (value) => {

package/dist/index.d.cts

@@ -107,11 +107,13 @@ type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
 type SignalWithInit<T = unknown> = Signal<T> & { init: (value: T) => Signal<T> };
 
 // Flexible typing is necessary to support generic functions
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyFn = (...args: any[]) => any;
 
 type HTMLCustomElement<T extends Record<PropertyKey, unknown>> = Omit<HTMLElement, keyof T> & T;
 
+// Again, flexible typing is necessary to support these generics
+type Effect<T = any> = (args: { lastValue: T; destroy: () => void }) => T | void;
+
 /**
  * Create a custom element that can be defined for use in the DOM.
  * @example
@@ -174,7 +176,7 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  * });
  * ```
  */
-declare const createEffect: (fn: () => void) => void;
+declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
 /**
  * A tagged template function for creating DocumentFragment instances.
@@ -182,4 +184,4 @@ declare const createEffect: (fn: () => void) => void;
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-export { type HTMLCustomElement, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };

package/dist/index.d.ts

@@ -107,11 +107,13 @@ type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
 type SignalWithInit<T = unknown> = Signal<T> & { init: (value: T) => Signal<T> };
 
 // Flexible typing is necessary to support generic functions
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 type AnyFn = (...args: any[]) => any;
 
 type HTMLCustomElement<T extends Record<PropertyKey, unknown>> = Omit<HTMLElement, keyof T> & T;
 
+// Again, flexible typing is necessary to support these generics
+type Effect<T = any> = (args: { lastValue: T; destroy: () => void }) => T | void;
+
 /**
  * Create a custom element that can be defined for use in the DOM.
  * @example
@@ -174,7 +176,7 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  * });
  * ```
  */
-declare const createEffect: (fn: () => void) => void;
+declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
 /**
  * A tagged template function for creating DocumentFragment instances.
@@ -182,4 +184,4 @@ declare const createEffect: (fn: () => void) => void;
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-export { type HTMLCustomElement, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };