thunderous 1.0.2 → 1.1.1

package/dist/index.cjs

@@ -358,8 +358,6 @@ if (typeof window !== "undefined") {
     installScopedCreationMethod(ShadowRoot, "createElement", document);
     installScopedCreationMethod(ShadowRoot, "importNode", document);
     installScopedCreationMethod(Element, "insertAdjacentHTML");
-    installScopedCreationMethod(Node, "appendChild");
-    installScopedCreationMethod(Element, "append");
     const installScopedCreationSetter = (ctor, name) => {
       const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name);
       Object.defineProperty(ctor.prototype, name, {
@@ -701,20 +699,19 @@ var clientOnlyCallback = (fn) => {
 };
 
 // src/render.ts
+var renderState = {
+  currentShadowRoot: null
+};
 var clearHTML = (element) => {
   while (element.childNodes.length > 0) {
     element.childNodes[0].remove();
   }
 };
 var parseFragment = (htmlStr) => {
-  const range = document.createRange();
-  range.selectNode(document.body);
-  return range.createContextualFragment(htmlStr);
-};
-var setInnerHTML = (element, html2) => {
-  clearHTML(element);
-  const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
-  element.append(fragment);
+  const template = document.createElement("template");
+  template.innerHTML = htmlStr;
+  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode(template.content, true);
+  return fragment;
 };
 var logValueError = (value) => {
   console.error(
@@ -722,21 +719,82 @@ var logValueError = (value) => {
     value
   );
 };
+var arrayToDocumentFragment = (array, parent) => {
+  const documentFragment = new DocumentFragment();
+  let count = 0;
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of array) {
+    const node = getNewNode(item, parent).cloneNode(true);
+    if (node instanceof DocumentFragment) {
+      const child = node.firstElementChild;
+      if (node.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;
+      let key = child.getAttribute("key");
+      if (key === null) {
+        console.warn(
+          "When rendering arrays, a `key` attribute should be provided on each child element. An index was automatically applied, but this could result in unexpected behavior:",
+          child
+        );
+        key = String(count);
+        child.setAttribute("key", key);
+      }
+      if (keys.has(key)) {
+        console.warn(
+          `When rendering arrays, each child should have a unique \`key\` attribute. Duplicate key "${key}" found on:`,
+          child
+        );
+      }
+      keys.add(key);
+      count++;
+    }
+    documentFragment.append(node);
+  }
+  return documentFragment;
+};
+var getNewNode = (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();
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
+  const processValue = (value) => {
+    if (!isServer && value instanceof DocumentFragment) {
+      const tempDiv = document.createElement("div");
+      tempDiv.append(value.cloneNode(true));
+      return tempDiv.innerHTML;
+    }
     if (typeof value === "function") {
+      const getter = value;
       const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = isServer ? value() : `{{signal:${uniqueKey}}}`;
+      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 === "object" && value !== null) {
       logValueError(value);
-      value = "";
+      return "";
+    }
+    return String(value);
+  };
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (Array.isArray(value)) {
+      value = value.map((item) => processValue(item)).join("");
+    } else {
+      value = processValue(value);
     }
-    innerHTML += string + String(value);
+    innerHTML += string + String(value === null ? "" : value);
   });
   if (isServer) {
     return innerHTML;
@@ -748,24 +806,40 @@ var html = (strings, ...values) => {
     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 = (() => {
-            if (typeof newValue === "string") return new Text(newValue);
-            if (newValue instanceof DocumentFragment) return newValue;
-            return new Text("");
-          })();
+          const newNode = getNewNode(newValue, element);
           if (i === 0) {
             child.replaceWith(newNode);
           } else {
-            element.insertBefore(newNode, child.nextSibling);
+            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);
+            });
           }
         });
       }
@@ -947,6 +1021,7 @@ var customElement = (render, options) => {
     });
     #render() {
       const root = this.#shadowRoot ?? this;
+      renderState.currentShadowRoot = this.#shadowRoot;
       const fragment = render({
         elementRef: this,
         root,
@@ -1043,25 +1118,11 @@ You must set an initial value before calling a property signal's getter.
         }
       });
       fragment.host = this;
-      const registry = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
-      const tempContainer = document.createElement("div");
-      tempContainer.append(fragment.cloneNode(true));
-      const fragmentContent = tempContainer.innerHTML;
-      root.innerHTML = fragmentContent;
-      if (registry?.__tagNames !== void 0) {
-        for (const tagName of registry.__tagNames) {
-          const upgradedElements = root.querySelectorAll(tagName);
-          const nonUpgradedElements = fragment.querySelectorAll(tagName);
-          upgradedElements.forEach((upgradedElement, index) => {
-            const nonUpgradedElement = nonUpgradedElements[index];
-            nonUpgradedElement.replaceWith(upgradedElement);
-          });
-        }
-      }
       for (const fn of this.#clientOnlyCallbackFns) {
         fn();
       }
-      setInnerHTML(root, fragment);
+      clearHTML(root);
+      root.append(fragment);
     }
     static get formAssociated() {
       return formAssociated;

package/dist/index.d.cts

@@ -439,9 +439,6 @@ if (typeof window !== 'undefined') {
     installScopedCreationMethod(ShadowRoot, 'createElement', document);
     installScopedCreationMethod(ShadowRoot, 'importNode', document);
     installScopedCreationMethod(Element, 'insertAdjacentHTML');
-    installScopedCreationMethod(Node, 'appendChild');
-    installScopedCreationMethod(Element, 'append');
-
 
     // Install scoped innerHTML on Element & ShadowRoot
     const installScopedCreationSetter = (ctor, name) => {
@@ -589,6 +586,10 @@ declare global {
 	interface CustomElementRegistry {
 		__tagNames: Set<string>;
 	}
+	interface ShadowRoot {
+		// missing from typescript but present in the spec
+		importNode: <T = Node>(node: T, deep: boolean) => T;
+	}
 }
 
 type TagName = `${string}-${string}`;

package/dist/index.d.ts

@@ -439,9 +439,6 @@ if (typeof window !== 'undefined') {
     installScopedCreationMethod(ShadowRoot, 'createElement', document);
     installScopedCreationMethod(ShadowRoot, 'importNode', document);
     installScopedCreationMethod(Element, 'insertAdjacentHTML');
-    installScopedCreationMethod(Node, 'appendChild');
-    installScopedCreationMethod(Element, 'append');
-
 
     // Install scoped innerHTML on Element & ShadowRoot
     const installScopedCreationSetter = (ctor, name) => {
@@ -589,6 +586,10 @@ declare global {
 	interface CustomElementRegistry {
 		__tagNames: Set<string>;
 	}
+	interface ShadowRoot {
+		// missing from typescript but present in the spec
+		importNode: <T = Node>(node: T, deep: boolean) => T;
+	}
 }
 
 type TagName = `${string}-${string}`;

package/dist/index.js

@@ -323,8 +323,6 @@ if (typeof window !== "undefined") {
     installScopedCreationMethod(ShadowRoot, "createElement", document);
     installScopedCreationMethod(ShadowRoot, "importNode", document);
     installScopedCreationMethod(Element, "insertAdjacentHTML");
-    installScopedCreationMethod(Node, "appendChild");
-    installScopedCreationMethod(Element, "append");
     const installScopedCreationSetter = (ctor, name) => {
       const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name);
       Object.defineProperty(ctor.prototype, name, {
@@ -666,20 +664,19 @@ var clientOnlyCallback = (fn) => {
 };
 
 // src/render.ts
+var renderState = {
+  currentShadowRoot: null
+};
 var clearHTML = (element) => {
   while (element.childNodes.length > 0) {
     element.childNodes[0].remove();
   }
 };
 var parseFragment = (htmlStr) => {
-  const range = document.createRange();
-  range.selectNode(document.body);
-  return range.createContextualFragment(htmlStr);
-};
-var setInnerHTML = (element, html2) => {
-  clearHTML(element);
-  const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
-  element.append(fragment);
+  const template = document.createElement("template");
+  template.innerHTML = htmlStr;
+  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode(template.content, true);
+  return fragment;
 };
 var logValueError = (value) => {
   console.error(
@@ -687,21 +684,82 @@ var logValueError = (value) => {
     value
   );
 };
+var arrayToDocumentFragment = (array, parent) => {
+  const documentFragment = new DocumentFragment();
+  let count = 0;
+  const keys = /* @__PURE__ */ new Set();
+  for (const item of array) {
+    const node = getNewNode(item, parent).cloneNode(true);
+    if (node instanceof DocumentFragment) {
+      const child = node.firstElementChild;
+      if (node.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;
+      let key = child.getAttribute("key");
+      if (key === null) {
+        console.warn(
+          "When rendering arrays, a `key` attribute should be provided on each child element. An index was automatically applied, but this could result in unexpected behavior:",
+          child
+        );
+        key = String(count);
+        child.setAttribute("key", key);
+      }
+      if (keys.has(key)) {
+        console.warn(
+          `When rendering arrays, each child should have a unique \`key\` attribute. Duplicate key "${key}" found on:`,
+          child
+        );
+      }
+      keys.add(key);
+      count++;
+    }
+    documentFragment.append(node);
+  }
+  return documentFragment;
+};
+var getNewNode = (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();
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
+  const processValue = (value) => {
+    if (!isServer && value instanceof DocumentFragment) {
+      const tempDiv = document.createElement("div");
+      tempDiv.append(value.cloneNode(true));
+      return tempDiv.innerHTML;
+    }
     if (typeof value === "function") {
+      const getter = value;
       const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = isServer ? value() : `{{signal:${uniqueKey}}}`;
+      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 === "object" && value !== null) {
       logValueError(value);
-      value = "";
+      return "";
+    }
+    return String(value);
+  };
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (Array.isArray(value)) {
+      value = value.map((item) => processValue(item)).join("");
+    } else {
+      value = processValue(value);
     }
-    innerHTML += string + String(value);
+    innerHTML += string + String(value === null ? "" : value);
   });
   if (isServer) {
     return innerHTML;
@@ -713,24 +771,40 @@ var html = (strings, ...values) => {
     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 = (() => {
-            if (typeof newValue === "string") return new Text(newValue);
-            if (newValue instanceof DocumentFragment) return newValue;
-            return new Text("");
-          })();
+          const newNode = getNewNode(newValue, element);
           if (i === 0) {
             child.replaceWith(newNode);
           } else {
-            element.insertBefore(newNode, child.nextSibling);
+            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);
+            });
           }
         });
       }
@@ -912,6 +986,7 @@ var customElement = (render, options) => {
     });
     #render() {
       const root = this.#shadowRoot ?? this;
+      renderState.currentShadowRoot = this.#shadowRoot;
       const fragment = render({
         elementRef: this,
         root,
@@ -1008,25 +1083,11 @@ You must set an initial value before calling a property signal's getter.
         }
       });
       fragment.host = this;
-      const registry = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
-      const tempContainer = document.createElement("div");
-      tempContainer.append(fragment.cloneNode(true));
-      const fragmentContent = tempContainer.innerHTML;
-      root.innerHTML = fragmentContent;
-      if (registry?.__tagNames !== void 0) {
-        for (const tagName of registry.__tagNames) {
-          const upgradedElements = root.querySelectorAll(tagName);
-          const nonUpgradedElements = fragment.querySelectorAll(tagName);
-          upgradedElements.forEach((upgradedElement, index) => {
-            const nonUpgradedElement = nonUpgradedElements[index];
-            nonUpgradedElement.replaceWith(upgradedElement);
-          });
-        }
-      }
       for (const fn of this.#clientOnlyCallbackFns) {
         fn();
       }
-      setInnerHTML(root, fragment);
+      clearHTML(root);
+      root.append(fragment);
     }
     static get formAssociated() {
       return formAssociated;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "1.0.2",
+	"version": "1.1.1",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -31,6 +31,7 @@
 	"license": "MIT",
 	"scripts": {
 		"demo": "cd demo && npm start",
+		"demo:ssr": "cd demo && npm run ssr",
 		"www": "cd www && npm run dev",
 		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean",
 		"test": "find src -name '*.test.ts' | xargs c8 node --import tsx --test",