thunderous 1.0.0 → 1.0.2

package/dist/index.cjs

@@ -469,6 +469,21 @@ if (typeof window !== "undefined") {
   window.CustomElementRegistry = TrackableCustomElementRegistry;
 }
 
+// src/constants.ts
+var DEFAULT_RENDER_OPTIONS = {
+  formAssociated: false,
+  observedAttributes: [],
+  attributesAsProperties: [],
+  attachShadow: true,
+  shadowRootOptions: {
+    mode: "closed",
+    delegatesFocus: false,
+    clonable: false,
+    serializable: false,
+    slotAssignment: "named"
+  }
+};
+
 // src/signals.ts
 var subscriber = null;
 var updateQueue = /* @__PURE__ */ new Set();
@@ -480,7 +495,7 @@ var createSignal = (initVal, options) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
-    if (options?.debugMode || getterOptions?.debugMode) {
+    if (options?.debugMode === true || getterOptions?.debugMode === true) {
       queueMicrotask(() => {
         let label = "anonymous signal";
         if (options?.label !== void 0) {
@@ -514,7 +529,7 @@ var createSignal = (initVal, options) => {
             console.error("Error in subscriber:", { error, oldValue, newValue, fn });
           }
         }
-        if (options?.debugMode || setterOptions?.debugMode) {
+        if (options?.debugMode === true || setterOptions?.debugMode === true) {
           let label = "anonymous signal";
           if (options?.label !== void 0) {
             label = `(${options.label})`;
@@ -554,14 +569,27 @@ var createEffect = (fn) => {
   subscriber = null;
 };
 
+// src/utilities.ts
+var NOOP = () => void 0;
+
 // src/server-side.ts
 var isServer = typeof window === "undefined";
 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;
   }
@@ -610,29 +638,21 @@ var getServerRenderArgs = (tagName, registry) => ({
       }
     });
   },
-  attributeChangedCallback: () => {
-  },
-  connectedCallback: () => {
-  },
-  disconnectedCallback: () => {
-  },
-  adoptedCallback: () => {
-  },
-  formDisabledCallback: () => {
-  },
-  formResetCallback: () => {
-  },
-  formStateRestoreCallback: () => {
-  },
-  formAssociatedCallback: () => {
-  },
-  clientOnlyCallback: () => {
-  },
+  attributeChangedCallback: NOOP,
+  connectedCallback: NOOP,
+  disconnectedCallback: NOOP,
+  adoptedCallback: NOOP,
+  formDisabledCallback: NOOP,
+  formResetCallback: NOOP,
+  formStateRestoreCallback: NOOP,
+  formAssociatedCallback: NOOP,
+  clientOnlyCallback: NOOP,
   customCallback: () => `{{callback:unavailable-on-server}}`,
   attrSignals: new Proxy({}, { get: (_, attr) => createSignal(`{{attr:${String(attr)}}}`) }),
   propSignals: new Proxy({}, { get: () => createSignal(null) }),
   refs: {},
-  // @ts-expect-error // this should be a string for server-side rendering
+  // @ts-expect-error // this will be a string for SSR, but this is true for internal cases only.
+  // The end user will see the public type, which is either a CSSStyleSheet or HTMLStyleElement.
   adoptStyleSheet: (cssStr) => {
     const _serverCss = registry !== void 0 ? registry.__serverCss : serverCss;
     const cssArr = _serverCss.get(tagName) ?? [];
@@ -663,8 +683,9 @@ var wrapTemplate = ({ tagName, serverRender, options }) => {
 };
 var insertTemplates = (tagName, template, inputString) => {
   return inputString.replace(new RegExp(`(<s*${tagName}([^>]*)>)`, "gm"), ($1, _, $3) => {
-    const attrs = $3.split(/(?!=")\s+/).filter((attr) => attr !== "").map((attr) => {
-      const [key, _value] = attr.split("=");
+    const attrs = $3.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
+      const [_key, _value] = attr.split("=");
+      const key = _key.trim();
       const value = _value?.replace(/"/g, "") ?? "";
       return [key, value];
     });
@@ -760,7 +781,7 @@ var html = (strings, ...values) => {
                 const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
                 const value = signal !== void 0 ? signal() : text;
                 if (value === null) hasNull = true;
-                newText += value;
+                newText += String(value);
               }
               if (hasNull && newText === "null") {
                 child.removeAttribute(attr.name);
@@ -809,19 +830,20 @@ var css = (strings, ...values) => {
   if (isServer) {
     return cssText;
   }
-  let stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement("style");
+  const stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement("style");
   const textList = cssText.split(signalBindingRegex);
   createEffect(() => {
     const newCSSTextList = [];
     for (const text of textList) {
       const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
       const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-      const newText = signal !== null ? signal() : text;
+      const newValue = signal !== null ? signal() : text;
+      const newText = String(newValue);
       newCSSTextList.push(newText);
     }
     const newCSSText = newCSSTextList.join("");
     if (isCSSStyleSheet(stylesheet)) {
-      stylesheet.replace(newCSSText);
+      stylesheet.replace(newCSSText).catch(console.error);
     } else {
       stylesheet.textContent = newCSSText;
     }
@@ -830,19 +852,6 @@ var css = (strings, ...values) => {
 };
 
 // src/custom-element.ts
-var DEFAULT_RENDER_OPTIONS = {
-  formAssociated: false,
-  observedAttributes: [],
-  attributesAsProperties: [],
-  attachShadow: true,
-  shadowRootOptions: {
-    mode: "closed",
-    delegatesFocus: false,
-    clonable: false,
-    serializable: false,
-    slotAssignment: "named"
-  }
-};
 var customElement = (render, options) => {
   const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const {
@@ -871,7 +880,8 @@ var customElement = (render, options) => {
           serverRender,
           options: allOptions,
           scopedRegistry,
-          parentRegistry: _registry2
+          parentRegistry: _registry2,
+          elementResult: this
         });
         return this;
       },
@@ -927,8 +937,7 @@ var customElement = (render, options) => {
         if (mutation.type !== "attributes" || attrName === null) continue;
         if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
         const [getter, setter] = this.#attrSignals[attrName];
-        const _oldValue = getter();
-        const oldValue = _oldValue === null ? null : _oldValue;
+        const oldValue = getter();
         const newValue = this.getAttribute(attrName);
         setter(newValue);
         for (const fn of this.#attributeChangedFns) {
@@ -1039,7 +1048,7 @@ You must set an initial value before calling a property signal's getter.
       tempContainer.append(fragment.cloneNode(true));
       const fragmentContent = tempContainer.innerHTML;
       root.innerHTML = fragmentContent;
-      if (registry !== void 0 && registry.__tagNames !== void 0) {
+      if (registry?.__tagNames !== void 0) {
         for (const tagName of registry.__tagNames) {
           const upgradedElements = root.querySelectorAll(tagName);
           const nonUpgradedElements = fragment.querySelectorAll(tagName);
@@ -1152,7 +1161,7 @@ You must set an initial value before calling a property signal's getter.
   let _registry;
   const elementResult = {
     define(tagName, options2) {
-      const registry = _registry !== void 0 ? _registry : customElements;
+      const registry = _registry ?? customElements;
       const nativeRegistry = "eject" in registry ? registry.eject() : registry;
       if (nativeRegistry.get(tagName) !== void 0) {
         console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
@@ -1179,6 +1188,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;
@@ -1190,30 +1200,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,16 +645,18 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
+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;
 };
@@ -699,7 +701,6 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
-type ServerDefineFn = (tagName: string, htmlString: string) => void;
 declare const onServerDefine: (fn: ServerDefineFn) => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;

package/dist/index.d.ts

@@ -645,16 +645,18 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
+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;
 };
@@ -699,7 +701,6 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
-type ServerDefineFn = (tagName: string, htmlString: string) => void;
 declare const onServerDefine: (fn: ServerDefineFn) => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;

package/dist/index.js

@@ -434,6 +434,21 @@ if (typeof window !== "undefined") {
   window.CustomElementRegistry = TrackableCustomElementRegistry;
 }
 
+// src/constants.ts
+var DEFAULT_RENDER_OPTIONS = {
+  formAssociated: false,
+  observedAttributes: [],
+  attributesAsProperties: [],
+  attachShadow: true,
+  shadowRootOptions: {
+    mode: "closed",
+    delegatesFocus: false,
+    clonable: false,
+    serializable: false,
+    slotAssignment: "named"
+  }
+};
+
 // src/signals.ts
 var subscriber = null;
 var updateQueue = /* @__PURE__ */ new Set();
@@ -445,7 +460,7 @@ var createSignal = (initVal, options) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
-    if (options?.debugMode || getterOptions?.debugMode) {
+    if (options?.debugMode === true || getterOptions?.debugMode === true) {
       queueMicrotask(() => {
         let label = "anonymous signal";
         if (options?.label !== void 0) {
@@ -479,7 +494,7 @@ var createSignal = (initVal, options) => {
             console.error("Error in subscriber:", { error, oldValue, newValue, fn });
           }
         }
-        if (options?.debugMode || setterOptions?.debugMode) {
+        if (options?.debugMode === true || setterOptions?.debugMode === true) {
           let label = "anonymous signal";
           if (options?.label !== void 0) {
             label = `(${options.label})`;
@@ -519,14 +534,27 @@ var createEffect = (fn) => {
   subscriber = null;
 };
 
+// src/utilities.ts
+var NOOP = () => void 0;
+
 // src/server-side.ts
 var isServer = typeof window === "undefined";
 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;
   }
@@ -575,29 +603,21 @@ var getServerRenderArgs = (tagName, registry) => ({
       }
     });
   },
-  attributeChangedCallback: () => {
-  },
-  connectedCallback: () => {
-  },
-  disconnectedCallback: () => {
-  },
-  adoptedCallback: () => {
-  },
-  formDisabledCallback: () => {
-  },
-  formResetCallback: () => {
-  },
-  formStateRestoreCallback: () => {
-  },
-  formAssociatedCallback: () => {
-  },
-  clientOnlyCallback: () => {
-  },
+  attributeChangedCallback: NOOP,
+  connectedCallback: NOOP,
+  disconnectedCallback: NOOP,
+  adoptedCallback: NOOP,
+  formDisabledCallback: NOOP,
+  formResetCallback: NOOP,
+  formStateRestoreCallback: NOOP,
+  formAssociatedCallback: NOOP,
+  clientOnlyCallback: NOOP,
   customCallback: () => `{{callback:unavailable-on-server}}`,
   attrSignals: new Proxy({}, { get: (_, attr) => createSignal(`{{attr:${String(attr)}}}`) }),
   propSignals: new Proxy({}, { get: () => createSignal(null) }),
   refs: {},
-  // @ts-expect-error // this should be a string for server-side rendering
+  // @ts-expect-error // this will be a string for SSR, but this is true for internal cases only.
+  // The end user will see the public type, which is either a CSSStyleSheet or HTMLStyleElement.
   adoptStyleSheet: (cssStr) => {
     const _serverCss = registry !== void 0 ? registry.__serverCss : serverCss;
     const cssArr = _serverCss.get(tagName) ?? [];
@@ -628,8 +648,9 @@ var wrapTemplate = ({ tagName, serverRender, options }) => {
 };
 var insertTemplates = (tagName, template, inputString) => {
   return inputString.replace(new RegExp(`(<s*${tagName}([^>]*)>)`, "gm"), ($1, _, $3) => {
-    const attrs = $3.split(/(?!=")\s+/).filter((attr) => attr !== "").map((attr) => {
-      const [key, _value] = attr.split("=");
+    const attrs = $3.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
+      const [_key, _value] = attr.split("=");
+      const key = _key.trim();
       const value = _value?.replace(/"/g, "") ?? "";
       return [key, value];
     });
@@ -725,7 +746,7 @@ var html = (strings, ...values) => {
                 const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : void 0;
                 const value = signal !== void 0 ? signal() : text;
                 if (value === null) hasNull = true;
-                newText += value;
+                newText += String(value);
               }
               if (hasNull && newText === "null") {
                 child.removeAttribute(attr.name);
@@ -774,19 +795,20 @@ var css = (strings, ...values) => {
   if (isServer) {
     return cssText;
   }
-  let stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement("style");
+  const stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement("style");
   const textList = cssText.split(signalBindingRegex);
   createEffect(() => {
     const newCSSTextList = [];
     for (const text of textList) {
       const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
       const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-      const newText = signal !== null ? signal() : text;
+      const newValue = signal !== null ? signal() : text;
+      const newText = String(newValue);
       newCSSTextList.push(newText);
     }
     const newCSSText = newCSSTextList.join("");
     if (isCSSStyleSheet(stylesheet)) {
-      stylesheet.replace(newCSSText);
+      stylesheet.replace(newCSSText).catch(console.error);
     } else {
       stylesheet.textContent = newCSSText;
     }
@@ -795,19 +817,6 @@ var css = (strings, ...values) => {
 };
 
 // src/custom-element.ts
-var DEFAULT_RENDER_OPTIONS = {
-  formAssociated: false,
-  observedAttributes: [],
-  attributesAsProperties: [],
-  attachShadow: true,
-  shadowRootOptions: {
-    mode: "closed",
-    delegatesFocus: false,
-    clonable: false,
-    serializable: false,
-    slotAssignment: "named"
-  }
-};
 var customElement = (render, options) => {
   const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
   const {
@@ -836,7 +845,8 @@ var customElement = (render, options) => {
           serverRender,
           options: allOptions,
           scopedRegistry,
-          parentRegistry: _registry2
+          parentRegistry: _registry2,
+          elementResult: this
         });
         return this;
       },
@@ -892,8 +902,7 @@ var customElement = (render, options) => {
         if (mutation.type !== "attributes" || attrName === null) continue;
         if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
         const [getter, setter] = this.#attrSignals[attrName];
-        const _oldValue = getter();
-        const oldValue = _oldValue === null ? null : _oldValue;
+        const oldValue = getter();
         const newValue = this.getAttribute(attrName);
         setter(newValue);
         for (const fn of this.#attributeChangedFns) {
@@ -1004,7 +1013,7 @@ You must set an initial value before calling a property signal's getter.
       tempContainer.append(fragment.cloneNode(true));
       const fragmentContent = tempContainer.innerHTML;
       root.innerHTML = fragmentContent;
-      if (registry !== void 0 && registry.__tagNames !== void 0) {
+      if (registry?.__tagNames !== void 0) {
         for (const tagName of registry.__tagNames) {
           const upgradedElements = root.querySelectorAll(tagName);
           const nonUpgradedElements = fragment.querySelectorAll(tagName);
@@ -1117,7 +1126,7 @@ You must set an initial value before calling a property signal's getter.
   let _registry;
   const elementResult = {
     define(tagName, options2) {
-      const registry = _registry !== void 0 ? _registry : customElements;
+      const registry = _registry ?? customElements;
       const nativeRegistry = "eject" in registry ? registry.eject() : registry;
       if (nativeRegistry.get(tagName) !== void 0) {
         console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
@@ -1144,6 +1153,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;
@@ -1155,30 +1165,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.0",
+	"version": "1.0.2",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -32,13 +32,17 @@
 	"scripts": {
 		"demo": "cd demo && npm start",
 		"www": "cd www && npm run dev",
-		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean"
+		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean",
+		"test": "find src -name '*.test.ts' | xargs c8 node --import tsx --test",
+		"lint": "tsc && eslint ."
 	},
 	"devDependencies": {
 		"@types/dompurify": "^3.2.0",
 		"@types/eslint": "^8.56.10",
-		"@typescript-eslint/eslint-plugin": "^7.1.1",
-		"@typescript-eslint/parser": "^7.1.1",
+		"@types/node": "^22.10.1",
+		"@typescript-eslint/eslint-plugin": "^8.17.0",
+		"@typescript-eslint/parser": "^8.17.0",
+		"c8": "^10.1.2",
 		"eslint": "^8.57.0",
 		"eslint-plugin-import": "^2.31.0",
 		"eslint-plugin-node": "^11.1.0",
@@ -46,7 +50,7 @@
 		"express": "^4.17.1",
 		"prettier": "^3.3.3",
 		"tsup": "^8.3.0",
-		"typescript": "^5.6.3",
-		"tsx": "^4.19.2"
+		"tsx": "^4.19.2",
+		"typescript": "^5.7.2"
 	}
 }