thunderous 1.0.2 → 1.1.0

package/dist/index.cjs

@@ -722,21 +722,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 "";
     }
-    innerHTML += string + String(value);
+    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 === null ? "" : value);
   });
   if (isServer) {
     return innerHTML;
@@ -748,24 +809,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);
+            });
           }
         });
       }

package/dist/index.js

@@ -687,21 +687,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 "";
     }
-    innerHTML += string + String(value);
+    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 === null ? "" : value);
   });
   if (isServer) {
     return innerHTML;
@@ -713,24 +774,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);
+            });
           }
         });
       }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "1.0.2",
+	"version": "1.1.0",
 	"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",