thunderous 2.3.12 → 2.4.1

package/dist/index.cjs

@@ -49,13 +49,14 @@ var DEFAULT_RENDER_OPTIONS = {
 };
 
 // src/signals.ts
-var subscriber = null;
+var sym = 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 (sym !== null) {
+      subscribers.add(sym);
     }
     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((sym2) => effects.get(sym2)),
+        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 sym2 of subscribers) {
+      const effectRef = effects.get(sym2);
+      if (effectRef !== void 0) {
+        try {
+          effectRef.fn({
+            lastValue: effectRef.value,
+            destroy: () => {
+              effects.delete(sym2);
+              queueMicrotask(() => subscribers.delete(sym2));
+            }
+          });
+        } catch (error) {
+          console.error("Error in subscriber:", { error, oldValue, newValue, fn: effectRef.fn });
+        }
+      } else {
+        queueMicrotask(() => subscribers.delete(sym2));
       }
     }
     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((sym2) => effects.get(sym2)),
+        label
+      });
     }
   };
   return [getter, setter];
@@ -121,21 +145,33 @@ var derived = (fn, options) => {
   });
   return getter;
 };
-var createEffect = (fn) => {
-  subscriber = fn;
+var createEffect = (fn, value) => {
+  const privateSym = sym = Symbol();
+  effects.set(sym, { fn, value });
   try {
-    fn();
+    fn({
+      lastValue: value,
+      destroy: () => {
+        effects.delete(privateSym);
+      }
+    });
   } catch (error) {
     console.error("Error in effect:", { error, fn });
   }
-  subscriber = null;
+  sym = 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,8 @@ 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 : {}
 };
 var logPropertyWarning = (propName, element) => {
@@ -300,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(
@@ -332,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) {
@@ -369,62 +406,139 @@ 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();
+              console.trace("Binding array:", {
+                result: result.map((node) => node.cloneNode(true)),
+                oldChildren
+              });
+              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;
               }
-              matchingNode.replaceChildren(...child2.childNodes);
-              anchor = matchingNode.nextSibling;
-              child2.replaceWith(matchingNode);
+              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);
+                }
+              }
+              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;
             }
-            const nextAnchor = queryComment(nextNode, uniqueKey);
-            nextAnchor?.remove();
-            element.insertBefore(nextNode, anchor);
-            if (!init) init = true;
+            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();
+            }
+            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);
+          }
         }
       });
     }
@@ -455,14 +569,22 @@ var evaluateBindings = (element, fragment) => {
                 newText += text;
               }
             }
-            if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
+            if (hasNull && newText === "null" || attrName.startsWith("prop-id:")) {
               if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
             } else {
               if (newText !== prevText) child.setAttribute(attrName, newText);
             }
-            if (attrName.startsWith("prop:")) {
+            if (attrName.startsWith("prop-id:")) {
               if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:SIGNAL; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = signal !== void 0 ? signal() : newValue;
@@ -488,18 +610,34 @@ var evaluateBindings = (element, fragment) => {
                 child.__customCallbackFns.set(uniqueKey, callback);
               }
             }
-            if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
+            if (uniqueKey !== "" && !attrName.startsWith("prop-id:")) {
               child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
-            } else if (attrName.startsWith("prop:")) {
+            } else if (attrName.startsWith("prop-id:")) {
               child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:CALLBACK; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
-        } else if (attrName.startsWith("prop:")) {
+        } else if (attrName.startsWith("prop-id:")) {
           child.removeAttribute(attrName);
-          const propName = attrName.replace("prop:", "");
+          const propId = attrName.replace("prop-id:", "");
+          const propName = renderState.propertyMap.get(propId);
+          if (propName === void 0) {
+            console.error(
+              `BRANCH:PROP; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+              child
+            );
+            return;
+          }
           if (!(propName in child)) logPropertyWarning(propName, child);
           child[propName] = attr.value;
         }
@@ -509,7 +647,7 @@ var evaluateBindings = (element, fragment) => {
   }
 };
 var html = (strings, ...values) => {
-  const innerHTML = strings.reduce((innerHTML2, str, i) => {
+  let innerHTML = strings.reduce((innerHTML2, str, i) => {
     let value = values[i] ?? "";
     if (Array.isArray(value)) {
       value = value.map((item) => processValue(item)).join("");
@@ -520,6 +658,16 @@ var html = (strings, ...values) => {
     return innerHTML2;
   }, "");
   if (isServer) return innerHTML;
+  const props = innerHTML.match(/prop:([^=]+)/g);
+  if (props !== null) {
+    for (const prop of props) {
+      const name = prop.split(":")[1].trim();
+      const id = crypto.randomUUID();
+      const newProp = `prop-id:${id}`;
+      renderState.propertyMap.set(id, name);
+      innerHTML = innerHTML.replace(`prop:${name}`, newProp);
+    }
+  }
   const template = document.createElement("template");
   template.innerHTML = innerHTML;
   const fragment = renderState.currentShadowRoot?.importNode?.(template.content, true) ?? document.importNode(template.content, true);
@@ -633,7 +781,7 @@ var customElement = (render, options) => {
     observedAttributesSet.add(attrName);
     attributesAsPropertiesMap.set(attrName, {
       // convert kebab-case attribute names to camelCase property names
-      prop: attrName.replace(/^([A-Z]+)/, (_, letter) => letter.toLowerCase()).replace(/(-|_| )([a-zA-Z])/g, (_, letter) => letter.toUpperCase()),
+      prop: attrName.replace(/(?<=-|_)([a-z])/g, (_, letter) => letter.toUpperCase()).replace(/(-|_)/g, ""),
       coerce,
       value: null
     });

package/dist/index.d.cts

@@ -112,6 +112,10 @@ 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
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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 +178,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.

package/dist/index.d.ts

@@ -112,6 +112,10 @@ 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
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+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 +178,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.