thunderous 0.3.2 → 0.3.4

package/dist/index.cjs

@@ -1,6 +1,9 @@
+"use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -57,15 +68,15 @@ var createSignal = (initVal, options) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
-    if ((options == null ? void 0 : options.debugMode) || (getterOptions == null ? void 0 : getterOptions.debugMode)) {
+    if (options?.debugMode || getterOptions?.debugMode) {
       requestAnimationFrame(() => {
         let label = "anonymous signal";
-        if ((options == null ? void 0 : options.label) !== void 0) {
+        if (options?.label !== void 0) {
           label = `(${options.label})`;
-          if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+          if (getterOptions?.label !== void 0) {
             label += ` ${getterOptions.label}`;
           }
-        } else if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+        } else if (getterOptions?.label !== void 0) {
           label = getterOptions.label;
         }
         console.log("Signal retrieved:", { value, subscribers, label });
@@ -91,14 +102,14 @@ var createSignal = (initVal, options) => {
             console.error("Error in subscriber:", { error, oldValue, newValue, fn });
           }
         }
-        if ((options == null ? void 0 : options.debugMode) || (setterOptions == null ? void 0 : setterOptions.debugMode)) {
+        if (options?.debugMode || setterOptions?.debugMode) {
           let label = "anonymous signal";
-          if ((options == null ? void 0 : options.label) !== void 0) {
+          if (options?.label !== void 0) {
             label = `(${options.label})`;
-            if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+            if (setterOptions?.label !== void 0) {
               label += ` ${setterOptions.label}`;
             }
-          } else if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+          } else if (setterOptions?.label !== void 0) {
             label = setterOptions.label;
           }
           console.log("Signal set:", { oldValue, newValue, subscribers, label });
@@ -132,6 +143,7 @@ var createEffect = (fn) => {
 };
 
 // src/render.ts
+var import_dompurify = __toESM(require("dompurify"), 1);
 var html = (strings, ...values) => {
   let innerHTML = "";
   const signalMap = /* @__PURE__ */ new Map();
@@ -144,6 +156,7 @@ var html = (strings, ...values) => {
     }
     innerHTML += string + String(value);
   });
+  import_dompurify.default.sanitize(innerHTML);
   const fragment = parseFragment(innerHTML);
   const callbackBindingRegex = /(\{\{callback:.+\}\})/;
   const signalBindingRegex = /(\{\{signal:.+\}\})/;
@@ -205,8 +218,7 @@ var html = (strings, ...values) => {
   parseChildren(fragment);
   return fragment;
 };
-var _a, _b;
-var adoptedStylesSupported = typeof window !== "undefined" && ((_a = window.ShadowRoot) == null ? void 0 : _a.prototype.hasOwnProperty("adoptedStyleSheets")) && ((_b = window.CSSStyleSheet) == null ? void 0 : _b.prototype.hasOwnProperty("replace"));
+var adoptedStylesSupported = typeof window !== "undefined" && window.ShadowRoot?.prototype.hasOwnProperty("adoptedStyleSheets") && window.CSSStyleSheet?.prototype.hasOwnProperty("replace");
 var isCSSStyleSheet = (stylesheet) => {
   return typeof CSSStyleSheet !== "undefined" && stylesheet instanceof CSSStyleSheet;
 };
@@ -282,13 +294,14 @@ var customElement = (render, options) => {
     #connectedFns = /* @__PURE__ */ new Set();
     #disconnectedFns = /* @__PURE__ */ new Set();
     #adoptedCallbackFns = /* @__PURE__ */ new Set();
+    #formAssociatedCallbackFns = /* @__PURE__ */ new Set();
     #formDisabledCallbackFns = /* @__PURE__ */ new Set();
     #formResetCallbackFns = /* @__PURE__ */ new Set();
     #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
     __customCallbackFns = /* @__PURE__ */ new Map();
     #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
     #internals = this.attachInternals();
-    #observer = (options == null ? void 0 : options.observedAttributes) !== void 0 ? null : new MutationObserver((mutations) => {
+    #observer = options?.observedAttributes !== void 0 ? null : new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
@@ -313,6 +326,7 @@ var customElement = (render, options) => {
         connectedCallback: (fn) => this.#connectedFns.add(fn),
         disconnectedCallback: (fn) => this.#disconnectedFns.add(fn),
         adoptedCallback: (fn) => this.#adoptedCallbackFns.add(fn),
+        formAssociatedCallback: (fn) => this.#formAssociatedCallbackFns.add(fn),
         formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
         formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
         formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
@@ -450,7 +464,7 @@ var customElement = (render, options) => {
     }
     attributeChangedCallback(name, oldValue, newValue) {
       const [, attrSetter] = this.#attrSignals[name] ?? [];
-      attrSetter == null ? void 0 : attrSetter(newValue);
+      attrSetter?.(newValue);
       const prop = this.#attributesAsPropertiesMap.get(name);
       if (prop !== void 0) {
         this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
@@ -464,6 +478,11 @@ var customElement = (render, options) => {
         fn();
       }
     }
+    formAssociatedCallback() {
+      for (const fn of this.#formAssociatedCallbackFns) {
+        fn();
+      }
+    }
     formDisabledCallback() {
       for (const fn of this.#formDisabledCallbackFns) {
         fn();

package/dist/index.d.cts

@@ -14,8 +14,35 @@ type SignalOptions = {
 type SignalGetter<T> = (options?: SignalOptions) => T;
 type SignalSetter<T> = (newValue: T, options?: SignalOptions) => void;
 type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
+/**
+ * Create a signal with an initial value.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * const increment = () => setCount(getCount() + 1);
+ * const decrement = () => setCount(getCount() - 1);
+ * ```
+ */
 declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions) => Signal<T>;
+/**
+ * Create a derived signal that depends on other signals.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * const doubleCount = derived(() => getCount() * 2);
+ * ```
+ */
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+/**
+ * Create an effect that runs when signals change.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * createEffect(() => {
+ *  console.log('Count:', getCount());
+ * });
+ * ```
+ */
 declare const createEffect: (fn: () => void) => void;
 
 declare global {
@@ -40,6 +67,7 @@ type RenderProps = {
     formDisabledCallback: (fn: () => void) => void;
     formResetCallback: (fn: () => void) => void;
     formStateRestoreCallback: (fn: () => void) => void;
+    formAssociatedCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
     propSignals: Record<string, Signal<unknown>>;
@@ -55,11 +83,31 @@ type RenderOptions = {
     shadowRootOptions: ShadowRootInit;
 };
 type RenderFunction = (props: RenderProps) => DocumentFragment;
+/**
+ * Create a custom element that can be defined for use in the DOM.
+ * @example
+ * ```ts
+ * const MyElement = customElement(() => {
+ *   return html`<h1>Hello, World!</h1>`;
+ * });
+ * MyElement.define('my-element');
+ * ```
+ */
 declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;
 type Registry = {
     register: (tagName: string, element: CustomElementConstructor) => void;
     getTagName: (element: CustomElementConstructor) => string | undefined;
 };
+/**
+ * Create a registry for custom elements.
+ * @example
+ * ```ts
+ * const registry = createRegistry();
+ * registry.register('my-element', MyElement);
+ * const tagName = registry.getTagName(MyElement);
+ * console.log(tagName); // 'MY-ELEMENT'
+ * ```
+ */
 declare const createRegistry: () => Registry;
 
 export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.d.ts

@@ -14,8 +14,35 @@ type SignalOptions = {
 type SignalGetter<T> = (options?: SignalOptions) => T;
 type SignalSetter<T> = (newValue: T, options?: SignalOptions) => void;
 type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
+/**
+ * Create a signal with an initial value.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * const increment = () => setCount(getCount() + 1);
+ * const decrement = () => setCount(getCount() - 1);
+ * ```
+ */
 declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions) => Signal<T>;
+/**
+ * Create a derived signal that depends on other signals.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * const doubleCount = derived(() => getCount() * 2);
+ * ```
+ */
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+/**
+ * Create an effect that runs when signals change.
+ * @example
+ * ```ts
+ * const [getCount, setCount] = createSignal(0);
+ * createEffect(() => {
+ *  console.log('Count:', getCount());
+ * });
+ * ```
+ */
 declare const createEffect: (fn: () => void) => void;
 
 declare global {
@@ -40,6 +67,7 @@ type RenderProps = {
     formDisabledCallback: (fn: () => void) => void;
     formResetCallback: (fn: () => void) => void;
     formStateRestoreCallback: (fn: () => void) => void;
+    formAssociatedCallback: (fn: () => void) => void;
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
     propSignals: Record<string, Signal<unknown>>;
@@ -55,11 +83,31 @@ type RenderOptions = {
     shadowRootOptions: ShadowRootInit;
 };
 type RenderFunction = (props: RenderProps) => DocumentFragment;
+/**
+ * Create a custom element that can be defined for use in the DOM.
+ * @example
+ * ```ts
+ * const MyElement = customElement(() => {
+ *   return html`<h1>Hello, World!</h1>`;
+ * });
+ * MyElement.define('my-element');
+ * ```
+ */
 declare const customElement: (render: RenderFunction, options?: Partial<RenderOptions>) => ElementResult;
 type Registry = {
     register: (tagName: string, element: CustomElementConstructor) => void;
     getTagName: (element: CustomElementConstructor) => string | undefined;
 };
+/**
+ * Create a registry for custom elements.
+ * @example
+ * ```ts
+ * const registry = createRegistry();
+ * registry.register('my-element', MyElement);
+ * const tagName = registry.getTagName(MyElement);
+ * console.log(tagName); // 'MY-ELEMENT'
+ * ```
+ */
 declare const createRegistry: () => Registry;
 
 export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.js

@@ -26,15 +26,15 @@ var createSignal = (initVal, options) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
-    if ((options == null ? void 0 : options.debugMode) || (getterOptions == null ? void 0 : getterOptions.debugMode)) {
+    if (options?.debugMode || getterOptions?.debugMode) {
       requestAnimationFrame(() => {
         let label = "anonymous signal";
-        if ((options == null ? void 0 : options.label) !== void 0) {
+        if (options?.label !== void 0) {
           label = `(${options.label})`;
-          if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+          if (getterOptions?.label !== void 0) {
             label += ` ${getterOptions.label}`;
           }
-        } else if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+        } else if (getterOptions?.label !== void 0) {
           label = getterOptions.label;
         }
         console.log("Signal retrieved:", { value, subscribers, label });
@@ -60,14 +60,14 @@ var createSignal = (initVal, options) => {
             console.error("Error in subscriber:", { error, oldValue, newValue, fn });
           }
         }
-        if ((options == null ? void 0 : options.debugMode) || (setterOptions == null ? void 0 : setterOptions.debugMode)) {
+        if (options?.debugMode || setterOptions?.debugMode) {
           let label = "anonymous signal";
-          if ((options == null ? void 0 : options.label) !== void 0) {
+          if (options?.label !== void 0) {
             label = `(${options.label})`;
-            if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+            if (setterOptions?.label !== void 0) {
               label += ` ${setterOptions.label}`;
             }
-          } else if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+          } else if (setterOptions?.label !== void 0) {
             label = setterOptions.label;
           }
           console.log("Signal set:", { oldValue, newValue, subscribers, label });
@@ -101,6 +101,7 @@ var createEffect = (fn) => {
 };
 
 // src/render.ts
+import DOMPurify from "dompurify";
 var html = (strings, ...values) => {
   let innerHTML = "";
   const signalMap = /* @__PURE__ */ new Map();
@@ -113,6 +114,7 @@ var html = (strings, ...values) => {
     }
     innerHTML += string + String(value);
   });
+  DOMPurify.sanitize(innerHTML);
   const fragment = parseFragment(innerHTML);
   const callbackBindingRegex = /(\{\{callback:.+\}\})/;
   const signalBindingRegex = /(\{\{signal:.+\}\})/;
@@ -174,8 +176,7 @@ var html = (strings, ...values) => {
   parseChildren(fragment);
   return fragment;
 };
-var _a, _b;
-var adoptedStylesSupported = typeof window !== "undefined" && ((_a = window.ShadowRoot) == null ? void 0 : _a.prototype.hasOwnProperty("adoptedStyleSheets")) && ((_b = window.CSSStyleSheet) == null ? void 0 : _b.prototype.hasOwnProperty("replace"));
+var adoptedStylesSupported = typeof window !== "undefined" && window.ShadowRoot?.prototype.hasOwnProperty("adoptedStyleSheets") && window.CSSStyleSheet?.prototype.hasOwnProperty("replace");
 var isCSSStyleSheet = (stylesheet) => {
   return typeof CSSStyleSheet !== "undefined" && stylesheet instanceof CSSStyleSheet;
 };
@@ -251,13 +252,14 @@ var customElement = (render, options) => {
     #connectedFns = /* @__PURE__ */ new Set();
     #disconnectedFns = /* @__PURE__ */ new Set();
     #adoptedCallbackFns = /* @__PURE__ */ new Set();
+    #formAssociatedCallbackFns = /* @__PURE__ */ new Set();
     #formDisabledCallbackFns = /* @__PURE__ */ new Set();
     #formResetCallbackFns = /* @__PURE__ */ new Set();
     #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
     __customCallbackFns = /* @__PURE__ */ new Map();
     #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
     #internals = this.attachInternals();
-    #observer = (options == null ? void 0 : options.observedAttributes) !== void 0 ? null : new MutationObserver((mutations) => {
+    #observer = options?.observedAttributes !== void 0 ? null : new MutationObserver((mutations) => {
       for (const mutation of mutations) {
         const attrName = mutation.attributeName;
         if (mutation.type !== "attributes" || attrName === null) continue;
@@ -282,6 +284,7 @@ var customElement = (render, options) => {
         connectedCallback: (fn) => this.#connectedFns.add(fn),
         disconnectedCallback: (fn) => this.#disconnectedFns.add(fn),
         adoptedCallback: (fn) => this.#adoptedCallbackFns.add(fn),
+        formAssociatedCallback: (fn) => this.#formAssociatedCallbackFns.add(fn),
         formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
         formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
         formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
@@ -419,7 +422,7 @@ var customElement = (render, options) => {
     }
     attributeChangedCallback(name, oldValue, newValue) {
       const [, attrSetter] = this.#attrSignals[name] ?? [];
-      attrSetter == null ? void 0 : attrSetter(newValue);
+      attrSetter?.(newValue);
       const prop = this.#attributesAsPropertiesMap.get(name);
       if (prop !== void 0) {
         this[prop.prop] = newValue === null ? null : prop.coerce(newValue);
@@ -433,6 +436,11 @@ var customElement = (render, options) => {
         fn();
       }
     }
+    formAssociatedCallback() {
+      for (const fn of this.#formAssociatedCallbackFns) {
+        fn();
+      }
+    }
     formDisabledCallback() {
       for (const fn of this.#formDisabledCallbackFns) {
         fn();

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "0.3.2",
+	"version": "0.3.4",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -34,6 +34,7 @@
 		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean"
 	},
 	"devDependencies": {
+		"@types/dompurify": "^3.0.5",
 		"@types/eslint": "^8.56.10",
 		"@typescript-eslint/eslint-plugin": "^7.1.1",
 		"@typescript-eslint/parser": "^7.1.1",
@@ -45,5 +46,8 @@
 		"prettier": "^3.3.3",
 		"tsup": "^8.3.0",
 		"typescript": "^5.6.3"
+	},
+	"dependencies": {
+		"dompurify": "^3.1.7"
 	}
 }