thunderous 2.0.1 → 2.0.3

package/README.md

@@ -35,9 +35,9 @@ const myStyleSheet = css`
   }
 `;
 
-const MyElement = customElement(({ customCallback, refs, adoptStyleSheet }) => {
+const MyElement = customElement(({ refs, adoptStyleSheet }) => {
   const [count, setCount] = createSignal(0);
-  const increment = customCallback(() => setCount(count() + 1));
+  const increment = () => setCount(count() + 1);
   adoptStyleSheet(myStyleSheet);
   return html`
     <button onclick="${increment}">Increment</button>

package/dist/index.cjs

@@ -271,19 +271,15 @@ 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 FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
 var renderState = {
-  currentShadowRoot: null
-};
-var clearHTML = (element) => {
-  while (element.childNodes.length > 0) {
-    element.childNodes[0].remove();
-  }
-};
-var parseFragment = (htmlStr) => {
-  const template = document.createElement("template");
-  template.innerHTML = htmlStr;
-  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode?.(template.content, true) ?? template.content;
-  return fragment;
+  currentShadowRoot: null,
+  signalMap: /* @__PURE__ */ new Map(),
+  callbackMap: /* @__PURE__ */ new Map(),
+  fragmentMap: /* @__PURE__ */ new Map()
 };
 var logValueError = (value) => {
   console.error(
@@ -296,7 +292,7 @@ var arrayToDocumentFragment = (array, parent) => {
   let count = 0;
   const keys = /* @__PURE__ */ new Set();
   for (const item of array) {
-    const node = getNewNode(item, parent).cloneNode(true);
+    const node = createNewNode(item, parent);
     if (node instanceof DocumentFragment) {
       const child = node.firstElementChild;
       if (node.children.length > 1) {
@@ -328,150 +324,166 @@ var arrayToDocumentFragment = (array, parent) => {
   }
   return documentFragment;
 };
-var getNewNode = (value, parent) => {
+var createNewNode = (value, parent) => {
   if (typeof value === "string") return new Text(value);
   if (Array.isArray(value)) return arrayToDocumentFragment(value, parent);
   if (value instanceof DocumentFragment) return value;
   return new Text("");
 };
-var html = (strings, ...values) => {
-  let innerHTML = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  const callbackMap = /* @__PURE__ */ new Map();
-  const processValue = (value) => {
-    if (!isServer && value instanceof DocumentFragment) {
-      const tempDiv = document.createElement("div");
-      tempDiv.append(value.cloneNode(true));
-      return tempDiv.innerHTML;
+var processValue = (value) => {
+  if (!isServer && value instanceof DocumentFragment) {
+    const uniqueKey = crypto.randomUUID();
+    renderState.fragmentMap.set(uniqueKey, value);
+    return `<div ${FRAGMENT_ATTRIBUTE}="${uniqueKey}"></div>`;
+  }
+  if (typeof value === "function" && "getter" in value && value.getter === true) {
+    const getter = value;
+    const uniqueKey = crypto.randomUUID();
+    renderState.signalMap.set(uniqueKey, getter);
+    let result = getter();
+    if (Array.isArray(result)) {
+      result = result.map((item) => processValue(item)).join("");
+    }
+    return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
+  }
+  if (typeof value === "function") {
+    const uniqueKey = crypto.randomUUID();
+    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) => {
+  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;
+      textList.forEach((text, i) => {
+        const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+        const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+        const newValue = signal !== void 0 ? signal() : text;
+        const newNode = createNewNode(newValue, element);
+        if (i === 0) {
+          child.replaceWith(newNode);
+        } else {
+          element.insertBefore(newNode, sibling);
+        }
+        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);
+            if (nextNode instanceof Text) {
+              throw new TypeError(
+                "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
+              );
+            }
+            let lastSibling = element.lastChild;
+            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();
+              }
+            }
+            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);
+              }
+              matchingNode.replaceChildren(...child2.childNodes);
+              lastSibling = matchingNode.nextSibling;
+              child2.replaceWith(matchingNode);
+            }
+            element.insertBefore(nextNode, lastSibling);
+            if (!init) init = true;
+          });
+        }
+      });
     }
-    if (typeof value === "function" && "getter" in value && value.getter === true) {
-      const getter = value;
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, getter);
-      let result = getter();
-      if (Array.isArray(result)) {
-        result = result.map((item) => processValue(item)).join("");
+    if (child instanceof Element && child.hasAttribute(FRAGMENT_ATTRIBUTE)) {
+      const uniqueKey = child.getAttribute(FRAGMENT_ATTRIBUTE);
+      const childFragment = renderState.fragmentMap.get(uniqueKey);
+      if (childFragment !== void 0) {
+        child.replaceWith(childFragment);
+      }
+    } else if (child instanceof Element) {
+      for (const attr of child.attributes) {
+        if (SIGNAL_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+          createEffect(() => {
+            let newText = "";
+            let hasNull = false;
+            for (const text of textList) {
+              const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+              const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+              const value = signal !== void 0 ? signal() : text;
+              if (value === null) hasNull = true;
+              newText += String(value);
+            }
+            if (hasNull && newText === "null") {
+              child.removeAttribute(attr.name);
+            } else {
+              child.setAttribute(attr.name, newText);
+            }
+          });
+        } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const getRootNode = child.getRootNode.bind(child);
+          child.getRootNode = () => {
+            const rootNode = getRootNode();
+            return rootNode instanceof ShadowRoot ? rootNode : fragment;
+          };
+        } else if (CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(CALLBACK_BINDING_REGEX);
+          createEffect(() => {
+            child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
+            let uniqueKey = "";
+            for (const text of textList) {
+              const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
+              if (_uniqueKey !== text) uniqueKey = _uniqueKey;
+              const callback = uniqueKey !== text ? renderState.callbackMap.get(uniqueKey) : void 0;
+              if (callback !== void 0) {
+                child.__customCallbackFns.set(uniqueKey, callback);
+              }
+            }
+            if (uniqueKey !== "") {
+              child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            }
+          });
+        }
       }
-      return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
-    }
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      callbackMap.set(uniqueKey, value);
-      return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
-    }
-    if (typeof value === "object" && value !== null) {
-      logValueError(value);
-      return "";
+      evaluateBindings(child, fragment);
     }
-    return String(value);
-  };
-  strings.forEach((string, i) => {
+  }
+};
+var html = (strings, ...values) => {
+  const innerHTML = strings.reduce((innerHTML2, str, i) => {
     let value = values[i] ?? "";
     if (Array.isArray(value)) {
       value = value.map((item) => processValue(item)).join("");
     } else {
       value = processValue(value);
     }
-    innerHTML += string + String(value === null ? "" : value);
-  });
-  if (isServer) {
-    return innerHTML;
-  }
-  const fragment = parseFragment(innerHTML);
-  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
-  const legacyCallbackBindingRegex = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  const parseChildren = (element) => {
-    for (const child of element.childNodes) {
-      if (child instanceof Text && signalBindingRegex.test(child.data)) {
-        const textList = child.data.split(signalBindingRegex);
-        const sibling = child.nextSibling;
-        textList.forEach((text, i) => {
-          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
-          const newValue = signal !== void 0 ? signal() : text;
-          const newNode = getNewNode(newValue, element);
-          if (i === 0) {
-            child.replaceWith(newNode);
-          } else {
-            element.insertBefore(newNode, sibling);
-          }
-          if (signal !== void 0 && newNode instanceof Text) {
-            createEffect(() => {
-              newNode.data = signal();
-            });
-          } else if (signal !== void 0 && newNode instanceof DocumentFragment) {
-            createEffect(() => {
-              const result = signal();
-              const nextNode = getNewNode(result, element);
-              if (nextNode instanceof Text) {
-                throw new TypeError(
-                  "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
-                );
-              }
-              let lastSibling = element.lastChild;
-              for (const child2 of nextNode.children) {
-                const key = child2.getAttribute("key");
-                const matchingNode = element.querySelector(`[key="${key}"]`);
-                if (matchingNode === null) continue;
-                lastSibling = matchingNode.nextSibling;
-                child2.replaceWith(matchingNode);
-              }
-              element.insertBefore(nextNode, lastSibling);
-            });
-          }
-        });
-      }
-      if (child instanceof Element) {
-        for (const attr of child.attributes) {
-          if (signalBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(signalBindingRegex);
-            createEffect(() => {
-              let newText = "";
-              let hasNull = false;
-              for (const text of textList) {
-                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
-                const value = signal !== void 0 ? signal() : text;
-                if (value === null) hasNull = true;
-                newText += String(value);
-              }
-              if (hasNull && newText === "null") {
-                child.removeAttribute(attr.name);
-              } else {
-                child.setAttribute(attr.name, newText);
-              }
-            });
-          } else if (legacyCallbackBindingRegex.test(attr.value)) {
-            const getRootNode = child.getRootNode.bind(child);
-            child.getRootNode = () => {
-              const rootNode = getRootNode();
-              return rootNode instanceof ShadowRoot ? rootNode : fragment;
-            };
-          } else if (callbackBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(callbackBindingRegex);
-            createEffect(() => {
-              child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
-              let uniqueKey = "";
-              for (const text of textList) {
-                const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
-                if (_uniqueKey !== text) uniqueKey = _uniqueKey;
-                const callback = uniqueKey !== text ? callbackMap.get(uniqueKey) : void 0;
-                if (callback !== void 0) {
-                  child.__customCallbackFns.set(uniqueKey, callback);
-                }
-              }
-              if (uniqueKey !== "") {
-                child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
-              }
-            });
-          }
-        }
-        parseChildren(child);
-      }
-    }
-  };
-  parseChildren(fragment);
+    innerHTML2 += str + String(value === null ? "" : value);
+    return innerHTML2;
+  }, "");
+  if (isServer) return innerHTML;
+  const template = document.createElement("template");
+  template.innerHTML = innerHTML;
+  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode?.(template.content, true) ?? template.content;
+  evaluateBindings(fragment, fragment);
   return fragment;
 };
 var adoptedStylesSupported = typeof window !== "undefined" && window.ShadowRoot?.prototype.hasOwnProperty("adoptedStyleSheets") && window.CSSStyleSheet?.prototype.hasOwnProperty("replace");
@@ -721,8 +733,7 @@ You must set an initial value before calling a property signal's getter.
       for (const fn of this.#clientOnlyCallbackFns) {
         fn();
       }
-      clearHTML(root);
-      root.append(fragment);
+      root.replaceChildren(fragment);
     }
     static get formAssociated() {
       return formAssociated;

package/dist/index.d.cts

@@ -170,6 +170,9 @@ declare const derived: <T>(fn: () => T) => SignalGetter<T>;
  */
 declare const createEffect: (fn: () => void) => 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;
 

package/dist/index.d.ts

@@ -170,6 +170,9 @@ declare const derived: <T>(fn: () => T) => SignalGetter<T>;
  */
 declare const createEffect: (fn: () => void) => 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;
 

package/dist/index.js

@@ -236,19 +236,15 @@ 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 FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
 var renderState = {
-  currentShadowRoot: null
-};
-var clearHTML = (element) => {
-  while (element.childNodes.length > 0) {
-    element.childNodes[0].remove();
-  }
-};
-var parseFragment = (htmlStr) => {
-  const template = document.createElement("template");
-  template.innerHTML = htmlStr;
-  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode?.(template.content, true) ?? template.content;
-  return fragment;
+  currentShadowRoot: null,
+  signalMap: /* @__PURE__ */ new Map(),
+  callbackMap: /* @__PURE__ */ new Map(),
+  fragmentMap: /* @__PURE__ */ new Map()
 };
 var logValueError = (value) => {
   console.error(
@@ -261,7 +257,7 @@ var arrayToDocumentFragment = (array, parent) => {
   let count = 0;
   const keys = /* @__PURE__ */ new Set();
   for (const item of array) {
-    const node = getNewNode(item, parent).cloneNode(true);
+    const node = createNewNode(item, parent);
     if (node instanceof DocumentFragment) {
       const child = node.firstElementChild;
       if (node.children.length > 1) {
@@ -293,150 +289,166 @@ var arrayToDocumentFragment = (array, parent) => {
   }
   return documentFragment;
 };
-var getNewNode = (value, parent) => {
+var createNewNode = (value, parent) => {
   if (typeof value === "string") return new Text(value);
   if (Array.isArray(value)) return arrayToDocumentFragment(value, parent);
   if (value instanceof DocumentFragment) return value;
   return new Text("");
 };
-var html = (strings, ...values) => {
-  let innerHTML = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  const callbackMap = /* @__PURE__ */ new Map();
-  const processValue = (value) => {
-    if (!isServer && value instanceof DocumentFragment) {
-      const tempDiv = document.createElement("div");
-      tempDiv.append(value.cloneNode(true));
-      return tempDiv.innerHTML;
+var processValue = (value) => {
+  if (!isServer && value instanceof DocumentFragment) {
+    const uniqueKey = crypto.randomUUID();
+    renderState.fragmentMap.set(uniqueKey, value);
+    return `<div ${FRAGMENT_ATTRIBUTE}="${uniqueKey}"></div>`;
+  }
+  if (typeof value === "function" && "getter" in value && value.getter === true) {
+    const getter = value;
+    const uniqueKey = crypto.randomUUID();
+    renderState.signalMap.set(uniqueKey, getter);
+    let result = getter();
+    if (Array.isArray(result)) {
+      result = result.map((item) => processValue(item)).join("");
+    }
+    return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
+  }
+  if (typeof value === "function") {
+    const uniqueKey = crypto.randomUUID();
+    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) => {
+  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;
+      textList.forEach((text, i) => {
+        const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+        const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+        const newValue = signal !== void 0 ? signal() : text;
+        const newNode = createNewNode(newValue, element);
+        if (i === 0) {
+          child.replaceWith(newNode);
+        } else {
+          element.insertBefore(newNode, sibling);
+        }
+        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);
+            if (nextNode instanceof Text) {
+              throw new TypeError(
+                "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
+              );
+            }
+            let lastSibling = element.lastChild;
+            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();
+              }
+            }
+            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);
+              }
+              matchingNode.replaceChildren(...child2.childNodes);
+              lastSibling = matchingNode.nextSibling;
+              child2.replaceWith(matchingNode);
+            }
+            element.insertBefore(nextNode, lastSibling);
+            if (!init) init = true;
+          });
+        }
+      });
     }
-    if (typeof value === "function" && "getter" in value && value.getter === true) {
-      const getter = value;
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, getter);
-      let result = getter();
-      if (Array.isArray(result)) {
-        result = result.map((item) => processValue(item)).join("");
+    if (child instanceof Element && child.hasAttribute(FRAGMENT_ATTRIBUTE)) {
+      const uniqueKey = child.getAttribute(FRAGMENT_ATTRIBUTE);
+      const childFragment = renderState.fragmentMap.get(uniqueKey);
+      if (childFragment !== void 0) {
+        child.replaceWith(childFragment);
+      }
+    } else if (child instanceof Element) {
+      for (const attr of child.attributes) {
+        if (SIGNAL_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+          createEffect(() => {
+            let newText = "";
+            let hasNull = false;
+            for (const text of textList) {
+              const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+              const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
+              const value = signal !== void 0 ? signal() : text;
+              if (value === null) hasNull = true;
+              newText += String(value);
+            }
+            if (hasNull && newText === "null") {
+              child.removeAttribute(attr.name);
+            } else {
+              child.setAttribute(attr.name, newText);
+            }
+          });
+        } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const getRootNode = child.getRootNode.bind(child);
+          child.getRootNode = () => {
+            const rootNode = getRootNode();
+            return rootNode instanceof ShadowRoot ? rootNode : fragment;
+          };
+        } else if (CALLBACK_BINDING_REGEX.test(attr.value)) {
+          const textList = attr.value.split(CALLBACK_BINDING_REGEX);
+          createEffect(() => {
+            child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
+            let uniqueKey = "";
+            for (const text of textList) {
+              const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
+              if (_uniqueKey !== text) uniqueKey = _uniqueKey;
+              const callback = uniqueKey !== text ? renderState.callbackMap.get(uniqueKey) : void 0;
+              if (callback !== void 0) {
+                child.__customCallbackFns.set(uniqueKey, callback);
+              }
+            }
+            if (uniqueKey !== "") {
+              child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+            }
+          });
+        }
       }
-      return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
-    }
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      callbackMap.set(uniqueKey, value);
-      return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
-    }
-    if (typeof value === "object" && value !== null) {
-      logValueError(value);
-      return "";
+      evaluateBindings(child, fragment);
     }
-    return String(value);
-  };
-  strings.forEach((string, i) => {
+  }
+};
+var html = (strings, ...values) => {
+  const innerHTML = strings.reduce((innerHTML2, str, i) => {
     let value = values[i] ?? "";
     if (Array.isArray(value)) {
       value = value.map((item) => processValue(item)).join("");
     } else {
       value = processValue(value);
     }
-    innerHTML += string + String(value === null ? "" : value);
-  });
-  if (isServer) {
-    return innerHTML;
-  }
-  const fragment = parseFragment(innerHTML);
-  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
-  const legacyCallbackBindingRegex = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  const parseChildren = (element) => {
-    for (const child of element.childNodes) {
-      if (child instanceof Text && signalBindingRegex.test(child.data)) {
-        const textList = child.data.split(signalBindingRegex);
-        const sibling = child.nextSibling;
-        textList.forEach((text, i) => {
-          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
-          const newValue = signal !== void 0 ? signal() : text;
-          const newNode = getNewNode(newValue, element);
-          if (i === 0) {
-            child.replaceWith(newNode);
-          } else {
-            element.insertBefore(newNode, sibling);
-          }
-          if (signal !== void 0 && newNode instanceof Text) {
-            createEffect(() => {
-              newNode.data = signal();
-            });
-          } else if (signal !== void 0 && newNode instanceof DocumentFragment) {
-            createEffect(() => {
-              const result = signal();
-              const nextNode = getNewNode(result, element);
-              if (nextNode instanceof Text) {
-                throw new TypeError(
-                  "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
-                );
-              }
-              let lastSibling = element.lastChild;
-              for (const child2 of nextNode.children) {
-                const key = child2.getAttribute("key");
-                const matchingNode = element.querySelector(`[key="${key}"]`);
-                if (matchingNode === null) continue;
-                lastSibling = matchingNode.nextSibling;
-                child2.replaceWith(matchingNode);
-              }
-              element.insertBefore(nextNode, lastSibling);
-            });
-          }
-        });
-      }
-      if (child instanceof Element) {
-        for (const attr of child.attributes) {
-          if (signalBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(signalBindingRegex);
-            createEffect(() => {
-              let newText = "";
-              let hasNull = false;
-              for (const text of textList) {
-                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
-                const value = signal !== void 0 ? signal() : text;
-                if (value === null) hasNull = true;
-                newText += String(value);
-              }
-              if (hasNull && newText === "null") {
-                child.removeAttribute(attr.name);
-              } else {
-                child.setAttribute(attr.name, newText);
-              }
-            });
-          } else if (legacyCallbackBindingRegex.test(attr.value)) {
-            const getRootNode = child.getRootNode.bind(child);
-            child.getRootNode = () => {
-              const rootNode = getRootNode();
-              return rootNode instanceof ShadowRoot ? rootNode : fragment;
-            };
-          } else if (callbackBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(callbackBindingRegex);
-            createEffect(() => {
-              child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
-              let uniqueKey = "";
-              for (const text of textList) {
-                const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
-                if (_uniqueKey !== text) uniqueKey = _uniqueKey;
-                const callback = uniqueKey !== text ? callbackMap.get(uniqueKey) : void 0;
-                if (callback !== void 0) {
-                  child.__customCallbackFns.set(uniqueKey, callback);
-                }
-              }
-              if (uniqueKey !== "") {
-                child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
-              }
-            });
-          }
-        }
-        parseChildren(child);
-      }
-    }
-  };
-  parseChildren(fragment);
+    innerHTML2 += str + String(value === null ? "" : value);
+    return innerHTML2;
+  }, "");
+  if (isServer) return innerHTML;
+  const template = document.createElement("template");
+  template.innerHTML = innerHTML;
+  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode?.(template.content, true) ?? template.content;
+  evaluateBindings(fragment, fragment);
   return fragment;
 };
 var adoptedStylesSupported = typeof window !== "undefined" && window.ShadowRoot?.prototype.hasOwnProperty("adoptedStyleSheets") && window.CSSStyleSheet?.prototype.hasOwnProperty("replace");
@@ -686,8 +698,7 @@ You must set an initial value before calling a property signal's getter.
       for (const fn of this.#clientOnlyCallbackFns) {
         fn();
       }
-      clearHTML(root);
-      root.append(fragment);
+      root.replaceChildren(fragment);
     }
     static get formAssociated() {
       return formAssociated;

package/package.json

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