thunderous 2.4.3 → 2.4.5

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  clearRenderState: () => clearRenderState,
+  clearServerCss: () => clearServerCss,
   clientOnlyCallback: () => clientOnlyCallback,
   createEffect: () => createEffect,
   createRegistry: () => createRegistry,
@@ -163,12 +165,6 @@ var createEffect = (fn, value) => {
 
 // src/utilities.ts
 var NOOP = () => void 0;
-var queryComment = (node, 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)) {
@@ -184,6 +180,9 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
+var clearServerCss = () => {
+  serverCss.clear();
+};
 var serverDefine = ({
   tagName,
   serverRender,
@@ -321,7 +320,7 @@ var clientOnlyCallback = (fn) => {
 // src/render.ts
 var CALLBACK_BINDING_REGEX = /(\{\{callback:.+\}\})/;
 var LEGACY_CALLBACK_BINDING_REGEX = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
-var SIGNAL_BINDING_REGEX = /(\{\{signal:.+\}\})/;
+var SIGNAL_BINDING_REGEX = /(\{\{signal:.+?\}\})/;
 var FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
 var renderState = {
   currentShadowRoot: null,
@@ -332,6 +331,13 @@ var renderState = {
   propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
+var clearRenderState = () => {
+  renderState.signalMap.clear();
+  renderState.callbackMap.clear();
+  renderState.propertyMap.clear();
+  renderState.fragmentMap.clear();
+  renderState.childrenMap.clear();
+};
 var logPropertyWarning = (propName, element) => {
   console.warn(
     `Property "${propName}" does not exist on element:`,
@@ -339,19 +345,34 @@ 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 asNodeList = (value, parent) => {
+var asNodeList = (value, parent, autoKey) => {
+  if (value === null || value === void 0) return [];
   if (typeof value === "string") return [new Text(value)];
-  if (value instanceof DocumentFragment) return [...value.children];
+  if (typeof value === "number" || typeof value === "boolean") return [new Text(String(value))];
+  if (value instanceof DocumentFragment) {
+    const children = Array.from(value.children);
+    if (autoKey !== void 0 && children.length > 0) {
+      const child = children[0];
+      if (child instanceof Element && child.getAttribute("key") === null) {
+        child.setAttribute("key", String(autoKey));
+      }
+    }
+    return 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);
+      const children = cachedItem ?? asNodeList(item, parent, item instanceof DocumentFragment ? count : void 0);
       if (cachedItem === void 0 && item instanceof DocumentFragment) {
         renderState.childrenMap.set(item, children);
       }
+      if (!(item instanceof DocumentFragment)) {
+        nodeList.push(...children);
+        continue;
+      }
       if (children.length > 1) {
         console.error(
           "When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:",
@@ -404,73 +425,77 @@ var processValue = (value) => {
     renderState.callbackMap.set(uniqueKey, value);
     return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
   }
-  return String(value);
+  return value === null || value === void 0 ? "" : String(value);
 };
 var evaluateBindings = (element, fragment) => {
-  for (const child of [...element.childNodes]) {
+  for (const child of Array.from(element.childNodes)) {
     if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
       const textList = child.data.split(SIGNAL_BINDING_REGEX);
-      const nextSibling = child.nextSibling;
-      const prevSibling = child.previousSibling;
-      textList.forEach((text, i) => {
+      const allInitialChildren = [];
+      const signalEntries = [];
+      let signalIndex = 0;
+      const totalSignals = textList.filter((t) => SIGNAL_BINDING_REGEX.test(t)).length;
+      textList.forEach((text) => {
         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 initialChildren = asNodeList(newValue, element);
-        if (i === 0) {
-          child.replaceWith(...initialChildren);
-        } else {
-          const endAnchor2 = queryComment(element, `${uniqueKey}:end`) ?? nextSibling;
-          if (endAnchor2 !== null) {
-            endAnchor2.before(...initialChildren);
-          } else {
-            element.append(...initialChildren);
-          }
+        const autoKey = signal !== void 0 && totalSignals > 1 ? signalIndex++ : void 0;
+        const initialChildren = asNodeList(newValue, element, autoKey);
+        allInitialChildren.push(...initialChildren);
+        if (uniqueKey !== void 0 && signal !== void 0) {
+          signalEntries.push({ uniqueKey, signal, initialChildren, autoKey });
         }
-        if (uniqueKey === void 0) return;
+      });
+      child.replaceWith(...allInitialChildren);
+      signalEntries.forEach(({ uniqueKey, signal, initialChildren, autoKey }) => {
+        const firstChild = initialChildren[0];
+        const lastChild = initialChildren[initialChildren.length - 1];
+        if (uniqueKey === void 0 || firstChild === void 0) return;
         const startAnchor = document.createComment(`${uniqueKey}:start`);
-        if (prevSibling !== null) {
-          prevSibling.after(startAnchor);
-        } else {
-          element.prepend(startAnchor);
-        }
+        firstChild.before(startAnchor);
         const endAnchor = document.createComment(`${uniqueKey}:end`);
-        if (nextSibling !== null) {
-          nextSibling.before(endAnchor);
+        if (lastChild !== void 0) {
+          lastChild.after(endAnchor);
         } else {
-          element.append(endAnchor);
+          startAnchor.after(endAnchor);
         }
         const bindText = (node, signal2) => {
           createEffect(({ destroy }) => {
             const result = signal2();
             if (Array.isArray(result)) {
               destroy();
-              bindArray(signal2);
+              bindArray(signal2, autoKey);
               return;
             }
             if (result instanceof DocumentFragment) {
               destroy();
-              bindFragment(signal2);
+              bindFragment(signal2, initialChildren, autoKey);
               return;
             }
-            node.data = result === null ? "" : String(result);
+            node.data = result === null || result === void 0 ? "" : String(result);
           });
         };
-        const bindArray = (signal2) => {
+        const bindArray = (signal2, autoKey2) => {
           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;
+              const newChildren = asNodeList(result, element, autoKey2);
+              const firstChild2 = newChildren[0];
+              if (!Array.isArray(result)) {
+                if (newChildren.length === 1 && firstChild2 instanceof DocumentFragment) {
+                  destroy();
+                  bindFragment(signal2, initialChildren, autoKey2);
+                  return;
+                }
+                if (newChildren.length === 1 && firstChild2 instanceof Text) {
+                  while (startAnchor.nextSibling !== endAnchor) {
+                    startAnchor.nextSibling?.remove();
+                  }
+                  startAnchor.after(firstChild2);
+                  destroy();
+                  bindText(firstChild2, signal2);
+                  return;
+                }
               }
               while (startAnchor.nextSibling !== endAnchor) {
                 startAnchor.nextSibling?.remove();
@@ -486,10 +511,10 @@ var evaluateBindings = (element, fragment) => {
                     persistedChild.remove();
                     continue;
                   }
-                  for (const attr of [...persistedChild.attributes]) {
+                  for (const attr of Array.from(persistedChild.attributes)) {
                     if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
                   }
-                  for (const newAttr of [...newChild.attributes]) {
+                  for (const newAttr of Array.from(newChild.attributes)) {
                     const oldAttrValue = persistedChild.getAttribute(newAttr.name);
                     if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
                     persistedChild.setAttribute(newAttr.name, newAttr.value);
@@ -502,36 +527,50 @@ var evaluateBindings = (element, fragment) => {
             null
           );
         };
-        const bindFragment = (signal2) => {
+        const bindFragment = (signal2, initialChildren2, autoKey2) => {
           const initialFragment = signal2();
-          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          const firstInitialChild = initialChildren2[0];
+          if (firstInitialChild instanceof Element) {
+            renderState.childrenMap.set(initialFragment, initialChildren2);
+          }
           createEffect(({ destroy }) => {
             const result = signal2();
-            const cachedChildren = renderState.childrenMap.get(initialFragment);
-            const children = cachedChildren ?? asNodeList(result, element);
+            const cachedChildren = result instanceof DocumentFragment ? renderState.childrenMap.get(result) : void 0;
+            const children = cachedChildren ?? asNodeList(result, element, autoKey2);
+            if (result instanceof DocumentFragment && !renderState.childrenMap.has(result)) {
+              renderState.childrenMap.set(result, children);
+            }
             if (Array.isArray(result)) {
               destroy();
-              bindArray(signal2);
+              bindArray(signal2, autoKey2);
               return;
             }
-            if (result instanceof Text) {
-              const children2 = asNodeList(result, element);
-              const text2 = children2[0];
+            if (!(result instanceof DocumentFragment) && result !== null && result !== void 0) {
+              while (startAnchor.nextSibling !== endAnchor) {
+                startAnchor.nextSibling?.remove();
+              }
+              const children2 = asNodeList(result, element, autoKey2);
+              const text = children2[0];
+              startAnchor.after(text);
               destroy();
-              bindText(text2, signal2);
+              bindText(text, signal2);
               return;
             }
             while (startAnchor.nextSibling !== endAnchor) {
               startAnchor.nextSibling?.remove();
             }
+            if (result === null || result === void 0) {
+              return;
+            }
             startAnchor.after(...children);
           });
         };
         if (signal !== void 0) {
-          if (Array.isArray(newValue)) {
-            bindArray(signal);
-          } else if (initialChildren instanceof DocumentFragment) {
-            bindFragment(signal);
+          const currentValue = signal();
+          if (Array.isArray(currentValue)) {
+            bindArray(signal, autoKey);
+          } else if (currentValue instanceof DocumentFragment) {
+            bindFragment(signal, initialChildren, autoKey);
           } else {
             const initialChild = initialChildren[0];
             bindText(initialChild, signal);
@@ -546,7 +585,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      for (const attr of [...child.attributes]) {
+      for (const attr of Array.from(child.attributes)) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -804,7 +843,9 @@ var customElement = (render, options) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        if (!(attrName in this.#attrSignals)) {
+          this.#attrSignals[attrName] = createSignal(this.getAttribute(attrName));
+        }
         const [getter, setter] = this.#attrSignals[attrName];
         const oldValue = getter();
         const newValue = this.getAttribute(attrName);
@@ -904,7 +945,9 @@ You must set an initial value before calling a property signal's getter.
           {},
           {
             get: (_, prop) => {
-              if (!(prop in this.#attrSignals)) this.#attrSignals[prop] = createSignal(null);
+              if (!(prop in this.#attrSignals)) {
+                this.#attrSignals[prop] = createSignal(this.getAttribute(prop));
+              }
               const [getter] = this.#attrSignals[prop];
               const setter = (newValue) => this.setAttribute(prop, newValue);
               return [getter, setter];
@@ -991,7 +1034,9 @@ You must set an initial value before calling a property signal's getter.
     }
     connectedCallback() {
       for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        if (!(attrName in this.#attrSignals)) {
+          this.#attrSignals[attrName] = createSignal(this.getAttribute(attrName));
+        }
         const propName = attr.prop;
         const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
         let busy = false;
@@ -1008,6 +1053,16 @@ You must set an initial value before calling a property signal's getter.
           busy = false;
         });
       }
+      for (const attrName of Object.keys(this.#attrSignals)) {
+        const signal = this.#attrSignals[attrName];
+        if (signal) {
+          const [getter, setter] = signal;
+          const currentValue = this.getAttribute(attrName);
+          if (getter() !== currentValue) {
+            setter(currentValue);
+          }
+        }
+      }
       if (this.#observer !== null) {
         this.#observer.observe(this, { attributes: true });
       }
@@ -1176,6 +1231,8 @@ var createRegistry = (args) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  clearRenderState,
+  clearServerCss,
   clientOnlyCallback,
   createEffect,
   createRegistry,

package/dist/index.d.cts

@@ -143,7 +143,41 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
+/**
+ * Add a callback to handle each call to `define()` on the server.
+ *
+ * This enables you to intercept those definitions and respond to them,
+ * for example to inject declarative shadow DOM templates.
+ *
+ * @example
+ * ```ts
+ * let response = originalResponse;
+ * onServerDefine((tagName, htmlString) => {
+ *   // ...
+ *   response = htmlString.replace(tagName, `my-${tagName}`);
+ * });
+ * ```
+ */
 declare const onServerDefine: (fn: ServerDefineFn) => void;
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the map that tracks CSS on the server side, to prevent
+ * memory leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the map will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearServerCss } from 'thunderous'
+ *
+ * clearServerCss();
+ * ```
+ */
+declare const clearServerCss: () => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;
 
@@ -178,10 +212,29 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  */
 declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the maps tracking render state, to prevent memory
+ * leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the maps will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearRenderState } from 'thunderous'
+ *
+ * clearRenderState();
+ * ```
+ */
+declare const clearRenderState: () => void;
 /**
  * A tagged template function for creating DocumentFragment instances.
  */
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-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 };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clearRenderState, clearServerCss, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };

package/dist/index.d.ts

@@ -143,7 +143,41 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
+/**
+ * Add a callback to handle each call to `define()` on the server.
+ *
+ * This enables you to intercept those definitions and respond to them,
+ * for example to inject declarative shadow DOM templates.
+ *
+ * @example
+ * ```ts
+ * let response = originalResponse;
+ * onServerDefine((tagName, htmlString) => {
+ *   // ...
+ *   response = htmlString.replace(tagName, `my-${tagName}`);
+ * });
+ * ```
+ */
 declare const onServerDefine: (fn: ServerDefineFn) => void;
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the map that tracks CSS on the server side, to prevent
+ * memory leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the map will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearServerCss } from 'thunderous'
+ *
+ * clearServerCss();
+ * ```
+ */
+declare const clearServerCss: () => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;
 
@@ -178,10 +212,29 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  */
 declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the maps tracking render state, to prevent memory
+ * leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the maps will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearRenderState } from 'thunderous'
+ *
+ * clearRenderState();
+ * ```
+ */
+declare const clearRenderState: () => void;
 /**
  * A tagged template function for creating DocumentFragment instances.
  */
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-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 };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clearRenderState, clearServerCss, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };

package/dist/index.js

@@ -128,12 +128,6 @@ var createEffect = (fn, value) => {
 
 // src/utilities.ts
 var NOOP = () => void 0;
-var queryComment = (node, 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)) {
@@ -149,6 +143,9 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
+var clearServerCss = () => {
+  serverCss.clear();
+};
 var serverDefine = ({
   tagName,
   serverRender,
@@ -286,7 +283,7 @@ var clientOnlyCallback = (fn) => {
 // src/render.ts
 var CALLBACK_BINDING_REGEX = /(\{\{callback:.+\}\})/;
 var LEGACY_CALLBACK_BINDING_REGEX = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
-var SIGNAL_BINDING_REGEX = /(\{\{signal:.+\}\})/;
+var SIGNAL_BINDING_REGEX = /(\{\{signal:.+?\}\})/;
 var FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
 var renderState = {
   currentShadowRoot: null,
@@ -297,6 +294,13 @@ var renderState = {
   propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
+var clearRenderState = () => {
+  renderState.signalMap.clear();
+  renderState.callbackMap.clear();
+  renderState.propertyMap.clear();
+  renderState.fragmentMap.clear();
+  renderState.childrenMap.clear();
+};
 var logPropertyWarning = (propName, element) => {
   console.warn(
     `Property "${propName}" does not exist on element:`,
@@ -304,19 +308,34 @@ 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 asNodeList = (value, parent) => {
+var asNodeList = (value, parent, autoKey) => {
+  if (value === null || value === void 0) return [];
   if (typeof value === "string") return [new Text(value)];
-  if (value instanceof DocumentFragment) return [...value.children];
+  if (typeof value === "number" || typeof value === "boolean") return [new Text(String(value))];
+  if (value instanceof DocumentFragment) {
+    const children = Array.from(value.children);
+    if (autoKey !== void 0 && children.length > 0) {
+      const child = children[0];
+      if (child instanceof Element && child.getAttribute("key") === null) {
+        child.setAttribute("key", String(autoKey));
+      }
+    }
+    return 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);
+      const children = cachedItem ?? asNodeList(item, parent, item instanceof DocumentFragment ? count : void 0);
       if (cachedItem === void 0 && item instanceof DocumentFragment) {
         renderState.childrenMap.set(item, children);
       }
+      if (!(item instanceof DocumentFragment)) {
+        nodeList.push(...children);
+        continue;
+      }
       if (children.length > 1) {
         console.error(
           "When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:",
@@ -369,73 +388,77 @@ var processValue = (value) => {
     renderState.callbackMap.set(uniqueKey, value);
     return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
   }
-  return String(value);
+  return value === null || value === void 0 ? "" : String(value);
 };
 var evaluateBindings = (element, fragment) => {
-  for (const child of [...element.childNodes]) {
+  for (const child of Array.from(element.childNodes)) {
     if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
       const textList = child.data.split(SIGNAL_BINDING_REGEX);
-      const nextSibling = child.nextSibling;
-      const prevSibling = child.previousSibling;
-      textList.forEach((text, i) => {
+      const allInitialChildren = [];
+      const signalEntries = [];
+      let signalIndex = 0;
+      const totalSignals = textList.filter((t) => SIGNAL_BINDING_REGEX.test(t)).length;
+      textList.forEach((text) => {
         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 initialChildren = asNodeList(newValue, element);
-        if (i === 0) {
-          child.replaceWith(...initialChildren);
-        } else {
-          const endAnchor2 = queryComment(element, `${uniqueKey}:end`) ?? nextSibling;
-          if (endAnchor2 !== null) {
-            endAnchor2.before(...initialChildren);
-          } else {
-            element.append(...initialChildren);
-          }
+        const autoKey = signal !== void 0 && totalSignals > 1 ? signalIndex++ : void 0;
+        const initialChildren = asNodeList(newValue, element, autoKey);
+        allInitialChildren.push(...initialChildren);
+        if (uniqueKey !== void 0 && signal !== void 0) {
+          signalEntries.push({ uniqueKey, signal, initialChildren, autoKey });
         }
-        if (uniqueKey === void 0) return;
+      });
+      child.replaceWith(...allInitialChildren);
+      signalEntries.forEach(({ uniqueKey, signal, initialChildren, autoKey }) => {
+        const firstChild = initialChildren[0];
+        const lastChild = initialChildren[initialChildren.length - 1];
+        if (uniqueKey === void 0 || firstChild === void 0) return;
         const startAnchor = document.createComment(`${uniqueKey}:start`);
-        if (prevSibling !== null) {
-          prevSibling.after(startAnchor);
-        } else {
-          element.prepend(startAnchor);
-        }
+        firstChild.before(startAnchor);
         const endAnchor = document.createComment(`${uniqueKey}:end`);
-        if (nextSibling !== null) {
-          nextSibling.before(endAnchor);
+        if (lastChild !== void 0) {
+          lastChild.after(endAnchor);
         } else {
-          element.append(endAnchor);
+          startAnchor.after(endAnchor);
         }
         const bindText = (node, signal2) => {
           createEffect(({ destroy }) => {
             const result = signal2();
             if (Array.isArray(result)) {
               destroy();
-              bindArray(signal2);
+              bindArray(signal2, autoKey);
               return;
             }
             if (result instanceof DocumentFragment) {
               destroy();
-              bindFragment(signal2);
+              bindFragment(signal2, initialChildren, autoKey);
               return;
             }
-            node.data = result === null ? "" : String(result);
+            node.data = result === null || result === void 0 ? "" : String(result);
           });
         };
-        const bindArray = (signal2) => {
+        const bindArray = (signal2, autoKey2) => {
           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;
+              const newChildren = asNodeList(result, element, autoKey2);
+              const firstChild2 = newChildren[0];
+              if (!Array.isArray(result)) {
+                if (newChildren.length === 1 && firstChild2 instanceof DocumentFragment) {
+                  destroy();
+                  bindFragment(signal2, initialChildren, autoKey2);
+                  return;
+                }
+                if (newChildren.length === 1 && firstChild2 instanceof Text) {
+                  while (startAnchor.nextSibling !== endAnchor) {
+                    startAnchor.nextSibling?.remove();
+                  }
+                  startAnchor.after(firstChild2);
+                  destroy();
+                  bindText(firstChild2, signal2);
+                  return;
+                }
               }
               while (startAnchor.nextSibling !== endAnchor) {
                 startAnchor.nextSibling?.remove();
@@ -451,10 +474,10 @@ var evaluateBindings = (element, fragment) => {
                     persistedChild.remove();
                     continue;
                   }
-                  for (const attr of [...persistedChild.attributes]) {
+                  for (const attr of Array.from(persistedChild.attributes)) {
                     if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
                   }
-                  for (const newAttr of [...newChild.attributes]) {
+                  for (const newAttr of Array.from(newChild.attributes)) {
                     const oldAttrValue = persistedChild.getAttribute(newAttr.name);
                     if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
                     persistedChild.setAttribute(newAttr.name, newAttr.value);
@@ -467,36 +490,50 @@ var evaluateBindings = (element, fragment) => {
             null
           );
         };
-        const bindFragment = (signal2) => {
+        const bindFragment = (signal2, initialChildren2, autoKey2) => {
           const initialFragment = signal2();
-          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          const firstInitialChild = initialChildren2[0];
+          if (firstInitialChild instanceof Element) {
+            renderState.childrenMap.set(initialFragment, initialChildren2);
+          }
           createEffect(({ destroy }) => {
             const result = signal2();
-            const cachedChildren = renderState.childrenMap.get(initialFragment);
-            const children = cachedChildren ?? asNodeList(result, element);
+            const cachedChildren = result instanceof DocumentFragment ? renderState.childrenMap.get(result) : void 0;
+            const children = cachedChildren ?? asNodeList(result, element, autoKey2);
+            if (result instanceof DocumentFragment && !renderState.childrenMap.has(result)) {
+              renderState.childrenMap.set(result, children);
+            }
             if (Array.isArray(result)) {
               destroy();
-              bindArray(signal2);
+              bindArray(signal2, autoKey2);
               return;
             }
-            if (result instanceof Text) {
-              const children2 = asNodeList(result, element);
-              const text2 = children2[0];
+            if (!(result instanceof DocumentFragment) && result !== null && result !== void 0) {
+              while (startAnchor.nextSibling !== endAnchor) {
+                startAnchor.nextSibling?.remove();
+              }
+              const children2 = asNodeList(result, element, autoKey2);
+              const text = children2[0];
+              startAnchor.after(text);
               destroy();
-              bindText(text2, signal2);
+              bindText(text, signal2);
               return;
             }
             while (startAnchor.nextSibling !== endAnchor) {
               startAnchor.nextSibling?.remove();
             }
+            if (result === null || result === void 0) {
+              return;
+            }
             startAnchor.after(...children);
           });
         };
         if (signal !== void 0) {
-          if (Array.isArray(newValue)) {
-            bindArray(signal);
-          } else if (initialChildren instanceof DocumentFragment) {
-            bindFragment(signal);
+          const currentValue = signal();
+          if (Array.isArray(currentValue)) {
+            bindArray(signal, autoKey);
+          } else if (currentValue instanceof DocumentFragment) {
+            bindFragment(signal, initialChildren, autoKey);
           } else {
             const initialChild = initialChildren[0];
             bindText(initialChild, signal);
@@ -511,7 +548,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      for (const attr of [...child.attributes]) {
+      for (const attr of Array.from(child.attributes)) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -769,7 +806,9 @@ var customElement = (render, options) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        if (!(attrName in this.#attrSignals)) {
+          this.#attrSignals[attrName] = createSignal(this.getAttribute(attrName));
+        }
         const [getter, setter] = this.#attrSignals[attrName];
         const oldValue = getter();
         const newValue = this.getAttribute(attrName);
@@ -869,7 +908,9 @@ You must set an initial value before calling a property signal's getter.
           {},
           {
             get: (_, prop) => {
-              if (!(prop in this.#attrSignals)) this.#attrSignals[prop] = createSignal(null);
+              if (!(prop in this.#attrSignals)) {
+                this.#attrSignals[prop] = createSignal(this.getAttribute(prop));
+              }
               const [getter] = this.#attrSignals[prop];
               const setter = (newValue) => this.setAttribute(prop, newValue);
               return [getter, setter];
@@ -956,7 +997,9 @@ You must set an initial value before calling a property signal's getter.
     }
     connectedCallback() {
       for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
+        if (!(attrName in this.#attrSignals)) {
+          this.#attrSignals[attrName] = createSignal(this.getAttribute(attrName));
+        }
         const propName = attr.prop;
         const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
         let busy = false;
@@ -973,6 +1016,16 @@ You must set an initial value before calling a property signal's getter.
           busy = false;
         });
       }
+      for (const attrName of Object.keys(this.#attrSignals)) {
+        const signal = this.#attrSignals[attrName];
+        if (signal) {
+          const [getter, setter] = signal;
+          const currentValue = this.getAttribute(attrName);
+          if (getter() !== currentValue) {
+            setter(currentValue);
+          }
+        }
+      }
       if (this.#observer !== null) {
         this.#observer.observe(this, { attributes: true });
       }
@@ -1140,6 +1193,8 @@ var createRegistry = (args) => {
   };
 };
 export {
+  clearRenderState,
+  clearServerCss,
   clientOnlyCallback,
   createEffect,
   createRegistry,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thunderous",
-  "version": "2.4.3",
+  "version": "2.4.5",
   "description": "A lightweight, functional web components library that brings the power of signals to your UI.",
   "type": "module",
   "main": "./dist/index.cjs",