thunderous 1.0.1 → 1.1.0

package/dist/index.cjs

@@ -578,8 +578,18 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
-var serverDefine = ({ tagName, serverRender, options, scopedRegistry, parentRegistry }) => {
+var serverDefine = ({
+  tagName,
+  serverRender,
+  options,
+  elementResult,
+  scopedRegistry,
+  parentRegistry
+}) => {
   if (parentRegistry !== void 0) {
+    if (parentRegistry.getTagName(elementResult) !== tagName.toUpperCase()) {
+      parentRegistry.define(tagName, elementResult);
+    }
     parentRegistry.__serverRenderOpts.set(tagName, { serverRender, ...options });
     if (parentRegistry.scoped) return;
   }
@@ -712,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 "";
+    }
+    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;
@@ -738,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);
+            });
           }
         });
       }
@@ -870,7 +957,8 @@ var customElement = (render, options) => {
           serverRender,
           options: allOptions,
           scopedRegistry,
-          parentRegistry: _registry2
+          parentRegistry: _registry2,
+          elementResult: this
         });
         return this;
       },
@@ -1177,6 +1265,7 @@ You must set an initial value before calling a property signal's getter.
 var createRegistry = (args) => {
   const { scoped = false } = args ?? {};
   const customElementMap = /* @__PURE__ */ new Map();
+  const elementResultMap = /* @__PURE__ */ new Map();
   const customElementTags = /* @__PURE__ */ new Set();
   const nativeRegistry = (() => {
     if (isServer) return;
@@ -1188,30 +1277,42 @@ var createRegistry = (args) => {
     __serverRenderOpts: /* @__PURE__ */ new Map(),
     define(tagName, ElementResult, options) {
       const isResult = "eject" in ElementResult;
-      if (isServer) {
-        if (isResult) ElementResult.register(this).define(tagName, options);
+      const upperCaseTagName = tagName.toUpperCase();
+      if (customElementTags.has(upperCaseTagName)) {
+        console.warn(`Custom element tag name "${upperCaseTagName}" was already defined. Skipping...`);
         return this;
       }
-      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-      if (customElementMap.has(CustomElement)) {
-        console.warn(`Custom element class "${CustomElement.constructor.name}" was already defined. Skipping...`);
-        return this;
+      if (isResult) {
+        if (elementResultMap.has(ElementResult)) {
+          console.warn(`${upperCaseTagName} was already defined. Skipping...`);
+          return this;
+        }
       }
-      if (customElementTags.has(tagName)) {
-        console.warn(`Custom element tag name "${tagName}" was already defined. Skipping...`);
-        return this;
+      if (!isServer) {
+        const CustomElement2 = isResult ? ElementResult.eject() : ElementResult;
+        if (customElementMap.has(CustomElement2)) {
+          console.warn(`Custom element class "${CustomElement2.constructor.name}" was already defined. Skipping...`);
+          return this;
+        }
+        customElementMap.set(CustomElement2, upperCaseTagName);
       }
-      customElementMap.set(CustomElement, tagName.toUpperCase());
-      customElementTags.add(tagName);
-      if (CustomElement === void 0) {
-        console.error(`Custom element class for tag name "${tagName}" was not found. You must register it first.`);
+      if (isResult) elementResultMap.set(ElementResult, upperCaseTagName);
+      customElementTags.add(upperCaseTagName);
+      if (isServer) {
+        if (isResult) ElementResult.register(this).define(tagName, options);
         return this;
       }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
       nativeRegistry?.define(tagName, CustomElement, options);
       return this;
     },
     getTagName: (ElementResult) => {
-      const CustomElement = "eject" in ElementResult ? ElementResult.eject() : ElementResult;
+      const isResult = "eject" in ElementResult;
+      if (isServer) {
+        if (isResult) return elementResultMap.get(ElementResult);
+        return;
+      }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
       return customElementMap.get(CustomElement);
     },
     getAllTagNames: () => Array.from(customElementTags),

package/dist/index.d.cts

@@ -645,18 +645,18 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
-type ServerDefineFn = (tagName: string, htmlString: string) => void;
+type ServerDefineFn = (tagName: TagName, htmlString: string) => void;
 
 type RegistryResult = {
-	__serverCss: Map<string, string[]>;
-	__serverRenderOpts: Map<string, ServerRenderOptions>;
+	__serverCss: Map<TagName, string[]>;
+	__serverRenderOpts: Map<TagName, ServerRenderOptions>;
 	define: (
 		tagName: TagName,
 		CustomElement: CustomElementConstructor | ElementResult,
 		options?: ElementDefinitionOptions,
 	) => RegistryResult;
-	getTagName: (CustomElement: CustomElementConstructor | ElementResult) => string | undefined;
-	getAllTagNames: () => string[];
+	getTagName: (CustomElement: CustomElementConstructor | ElementResult) => TagName | undefined;
+	getAllTagNames: () => TagName[];
 	eject: () => CustomElementRegistry;
 	scoped: boolean;
 };

package/dist/index.d.ts

@@ -645,18 +645,18 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
-type ServerDefineFn = (tagName: string, htmlString: string) => void;
+type ServerDefineFn = (tagName: TagName, htmlString: string) => void;
 
 type RegistryResult = {
-	__serverCss: Map<string, string[]>;
-	__serverRenderOpts: Map<string, ServerRenderOptions>;
+	__serverCss: Map<TagName, string[]>;
+	__serverRenderOpts: Map<TagName, ServerRenderOptions>;
 	define: (
 		tagName: TagName,
 		CustomElement: CustomElementConstructor | ElementResult,
 		options?: ElementDefinitionOptions,
 	) => RegistryResult;
-	getTagName: (CustomElement: CustomElementConstructor | ElementResult) => string | undefined;
-	getAllTagNames: () => string[];
+	getTagName: (CustomElement: CustomElementConstructor | ElementResult) => TagName | undefined;
+	getAllTagNames: () => TagName[];
 	eject: () => CustomElementRegistry;
 	scoped: boolean;
 };

package/dist/index.js

@@ -543,8 +543,18 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
-var serverDefine = ({ tagName, serverRender, options, scopedRegistry, parentRegistry }) => {
+var serverDefine = ({
+  tagName,
+  serverRender,
+  options,
+  elementResult,
+  scopedRegistry,
+  parentRegistry
+}) => {
   if (parentRegistry !== void 0) {
+    if (parentRegistry.getTagName(elementResult) !== tagName.toUpperCase()) {
+      parentRegistry.define(tagName, elementResult);
+    }
     parentRegistry.__serverRenderOpts.set(tagName, { serverRender, ...options });
     if (parentRegistry.scoped) return;
   }
@@ -677,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 "";
+    }
+    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;
@@ -703,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);
+            });
           }
         });
       }
@@ -835,7 +922,8 @@ var customElement = (render, options) => {
           serverRender,
           options: allOptions,
           scopedRegistry,
-          parentRegistry: _registry2
+          parentRegistry: _registry2,
+          elementResult: this
         });
         return this;
       },
@@ -1142,6 +1230,7 @@ You must set an initial value before calling a property signal's getter.
 var createRegistry = (args) => {
   const { scoped = false } = args ?? {};
   const customElementMap = /* @__PURE__ */ new Map();
+  const elementResultMap = /* @__PURE__ */ new Map();
   const customElementTags = /* @__PURE__ */ new Set();
   const nativeRegistry = (() => {
     if (isServer) return;
@@ -1153,30 +1242,42 @@ var createRegistry = (args) => {
     __serverRenderOpts: /* @__PURE__ */ new Map(),
     define(tagName, ElementResult, options) {
       const isResult = "eject" in ElementResult;
-      if (isServer) {
-        if (isResult) ElementResult.register(this).define(tagName, options);
+      const upperCaseTagName = tagName.toUpperCase();
+      if (customElementTags.has(upperCaseTagName)) {
+        console.warn(`Custom element tag name "${upperCaseTagName}" was already defined. Skipping...`);
         return this;
       }
-      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-      if (customElementMap.has(CustomElement)) {
-        console.warn(`Custom element class "${CustomElement.constructor.name}" was already defined. Skipping...`);
-        return this;
+      if (isResult) {
+        if (elementResultMap.has(ElementResult)) {
+          console.warn(`${upperCaseTagName} was already defined. Skipping...`);
+          return this;
+        }
       }
-      if (customElementTags.has(tagName)) {
-        console.warn(`Custom element tag name "${tagName}" was already defined. Skipping...`);
-        return this;
+      if (!isServer) {
+        const CustomElement2 = isResult ? ElementResult.eject() : ElementResult;
+        if (customElementMap.has(CustomElement2)) {
+          console.warn(`Custom element class "${CustomElement2.constructor.name}" was already defined. Skipping...`);
+          return this;
+        }
+        customElementMap.set(CustomElement2, upperCaseTagName);
       }
-      customElementMap.set(CustomElement, tagName.toUpperCase());
-      customElementTags.add(tagName);
-      if (CustomElement === void 0) {
-        console.error(`Custom element class for tag name "${tagName}" was not found. You must register it first.`);
+      if (isResult) elementResultMap.set(ElementResult, upperCaseTagName);
+      customElementTags.add(upperCaseTagName);
+      if (isServer) {
+        if (isResult) ElementResult.register(this).define(tagName, options);
         return this;
       }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
       nativeRegistry?.define(tagName, CustomElement, options);
       return this;
     },
     getTagName: (ElementResult) => {
-      const CustomElement = "eject" in ElementResult ? ElementResult.eject() : ElementResult;
+      const isResult = "eject" in ElementResult;
+      if (isServer) {
+        if (isResult) return elementResultMap.get(ElementResult);
+        return;
+      }
+      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
       return customElementMap.get(CustomElement);
     },
     getAllTagNames: () => Array.from(customElementTags),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "1.0.1",
+	"version": "1.1.0",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -31,10 +31,11 @@
 	"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",
-		"lint": "eslint ."
+		"lint": "tsc && eslint ."
 	},
 	"devDependencies": {
 		"@types/dompurify": "^3.2.0",