thunderous 1.0.0 → 1.0.1

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,6 +569,9 @@ 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();
@@ -610,29 +628,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 +673,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 +771,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 +820,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 +842,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 {
@@ -927,8 +926,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 +1037,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 +1150,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...`);

package/dist/index.d.cts

@@ -645,6 +645,8 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
+type ServerDefineFn = (tagName: string, htmlString: string) => void;
+
 type RegistryResult = {
 	__serverCss: Map<string, string[]>;
 	__serverRenderOpts: Map<string, ServerRenderOptions>;
@@ -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,6 +645,8 @@ type ServerRenderFunction = (args: RenderArgs<CustomElementProps>) => string;
 
 type ServerRenderOptions = { serverRender: ServerRenderFunction } & RenderOptions;
 
+type ServerDefineFn = (tagName: string, htmlString: string) => void;
+
 type RegistryResult = {
 	__serverCss: Map<string, string[]>;
 	__serverRenderOpts: Map<string, ServerRenderOptions>;
@@ -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,6 +534,9 @@ 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();
@@ -575,29 +593,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 +638,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 +736,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 +785,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 +807,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 {
@@ -892,8 +891,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 +1002,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 +1115,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...`);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "1.0.0",
+	"version": "1.0.1",
 	"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": "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"
 	}
 }