thunderous 2.4.2 → 2.4.4

package/dist/index.cjs

@@ -20,6 +20,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  clearRenderState: () => clearRenderState,
+  clearServerCss: () => clearServerCss,
   clientOnlyCallback: () => clientOnlyCallback,
   createEffect: () => createEffect,
   createRegistry: () => createRegistry,
@@ -184,6 +186,9 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
+var clearServerCss = () => {
+  serverCss.clear();
+};
 var serverDefine = ({
   tagName,
   serverRender,
@@ -299,8 +304,9 @@ var wrapTemplate = ({ tagName, serverRender, options }) => {
   return finalScopedRenderString;
 };
 var insertTemplates = (tagName, template, inputString) => {
-  return inputString.replace(new RegExp(`(<s*${tagName}([^>]*)>)`, "gm"), ($1, _, $3) => {
-    const attrs = $3.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
+  const tagRegex = new RegExp(`<\\s*${tagName}((?:\\s+[^>]*)*)\\s*>`, "gm");
+  return inputString.replace(tagRegex, ($match, $1) => {
+    const attrs = $1.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
       const [_key, _value] = attr.split("=");
       const key = _key.trim();
       const value = _value?.replace(/"/g, "") ?? "";
@@ -310,7 +316,7 @@ var insertTemplates = (tagName, template, inputString) => {
     for (const [key, value] of attrs) {
       scopedResult = scopedResult.replace(new RegExp(`{{attr:${key}}}`, "gm"), value);
     }
-    return $1 + scopedResult;
+    return $match + scopedResult;
   });
 };
 var clientOnlyCallback = (fn) => {
@@ -331,6 +337,13 @@ var renderState = {
   propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
+var clearRenderState = () => {
+  renderState.signalMap.clear();
+  renderState.callbackMap.clear();
+  renderState.propertyMap.clear();
+  renderState.fragmentMap.clear();
+  renderState.childrenMap.clear();
+};
 var logPropertyWarning = (propName, element) => {
   console.warn(
     `Property "${propName}" does not exist on element:`,
@@ -340,7 +353,7 @@ var logPropertyWarning = (propName, element) => {
 };
 var asNodeList = (value, parent) => {
   if (typeof value === "string") return [new Text(value)];
-  if (value instanceof DocumentFragment) return [...value.children];
+  if (value instanceof DocumentFragment) return Array.from(value.children);
   if (Array.isArray(value)) {
     const nodeList = [];
     let count = 0;
@@ -406,7 +419,7 @@ var processValue = (value) => {
   return String(value);
 };
 var evaluateBindings = (element, fragment) => {
-  for (const child of [...element.childNodes]) {
+  for (const child of Array.from(element.childNodes)) {
     if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
       const textList = child.data.split(SIGNAL_BINDING_REGEX);
       const nextSibling = child.nextSibling;
@@ -485,10 +498,10 @@ var evaluateBindings = (element, fragment) => {
                     persistedChild.remove();
                     continue;
                   }
-                  for (const attr of [...persistedChild.attributes]) {
+                  for (const attr of Array.from(persistedChild.attributes)) {
                     if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
                   }
-                  for (const newAttr of [...newChild.attributes]) {
+                  for (const newAttr of Array.from(newChild.attributes)) {
                     const oldAttrValue = persistedChild.getAttribute(newAttr.name);
                     if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
                     persistedChild.setAttribute(newAttr.name, newAttr.value);
@@ -503,7 +516,7 @@ var evaluateBindings = (element, fragment) => {
         };
         const bindFragment = (signal2) => {
           const initialFragment = signal2();
-          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          renderState.childrenMap.set(initialFragment, Array.from(initialFragment.childNodes));
           createEffect(({ destroy }) => {
             const result = signal2();
             const cachedChildren = renderState.childrenMap.get(initialFragment);
@@ -545,7 +558,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      for (const attr of [...child.attributes]) {
+      for (const attr of Array.from(child.attributes)) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -1175,6 +1188,8 @@ var createRegistry = (args) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  clearRenderState,
+  clearServerCss,
   clientOnlyCallback,
   createEffect,
   createRegistry,

package/dist/index.d.cts

@@ -143,7 +143,41 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
+/**
+ * Add a callback to handle each call to `define()` on the server.
+ *
+ * This enables you to intercept those definitions and respond to them,
+ * for example to inject declarative shadow DOM templates.
+ *
+ * @example
+ * ```ts
+ * let response = originalResponse;
+ * onServerDefine((tagName, htmlString) => {
+ *   // ...
+ *   response = htmlString.replace(tagName, `my-${tagName}`);
+ * });
+ * ```
+ */
 declare const onServerDefine: (fn: ServerDefineFn) => void;
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the map that tracks CSS on the server side, to prevent
+ * memory leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the map will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearServerCss } from 'thunderous'
+ *
+ * clearServerCss();
+ * ```
+ */
+declare const clearServerCss: () => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;
 
@@ -178,10 +212,29 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  */
 declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the maps tracking render state, to prevent memory
+ * leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the maps will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearRenderState } from 'thunderous'
+ *
+ * clearRenderState();
+ * ```
+ */
+declare const clearRenderState: () => void;
 /**
  * A tagged template function for creating DocumentFragment instances.
  */
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clearRenderState, clearServerCss, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };

package/dist/index.d.ts

@@ -143,7 +143,41 @@ declare const customElement: <Props extends CustomElementProps>(render: RenderFu
  */
 declare const createRegistry: (args?: RegistryArgs) => RegistryResult;
 
+/**
+ * Add a callback to handle each call to `define()` on the server.
+ *
+ * This enables you to intercept those definitions and respond to them,
+ * for example to inject declarative shadow DOM templates.
+ *
+ * @example
+ * ```ts
+ * let response = originalResponse;
+ * onServerDefine((tagName, htmlString) => {
+ *   // ...
+ *   response = htmlString.replace(tagName, `my-${tagName}`);
+ * });
+ * ```
+ */
 declare const onServerDefine: (fn: ServerDefineFn) => void;
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the map that tracks CSS on the server side, to prevent
+ * memory leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the map will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearServerCss } from 'thunderous'
+ *
+ * clearServerCss();
+ * ```
+ */
+declare const clearServerCss: () => void;
 declare const insertTemplates: (tagName: string, template: string, inputString: string) => string;
 declare const clientOnlyCallback: (fn: (() => void) | (() => Promise<void>)) => void | Promise<void>;
 
@@ -178,10 +212,29 @@ declare const derived: <T>(fn: () => T, options?: SignalOptions) => SignalGetter
  */
 declare const createEffect: <T = unknown>(fn: Effect<T>, value?: T) => void;
 
+/**
+ * Thunderous tracks its state using several maps to associate values with
+ * their respective elements.
+ *
+ * This function clears the maps tracking render state, to prevent memory
+ * leaks and purge stale data from previous renders.
+ *
+ * If you are building a framework or plugin that depends on Thunderous, you
+ * should call this function before every render. Otherwise, the maps will
+ * accumulate stale data and may create significant performance issues.
+ *
+ * @example
+ * ```ts
+ * import { clearRenderState } from 'thunderous'
+ *
+ * clearRenderState();
+ * ```
+ */
+declare const clearRenderState: () => void;
 /**
  * A tagged template function for creating DocumentFragment instances.
  */
 declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
 declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
 
-export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };
+export { type ElementResult, type HTMLCustomElement, type RegistryResult, type RenderArgs, type RenderFunction, type Signal, type SignalGetter, type SignalSetter, clearRenderState, clearServerCss, clientOnlyCallback, createEffect, createRegistry, createSignal, css, customElement, derived, html, insertTemplates, onServerDefine };

package/dist/index.js

@@ -149,6 +149,9 @@ var serverDefineFns = /* @__PURE__ */ new Set();
 var onServerDefine = (fn) => {
   serverDefineFns.add(fn);
 };
+var clearServerCss = () => {
+  serverCss.clear();
+};
 var serverDefine = ({
   tagName,
   serverRender,
@@ -264,8 +267,9 @@ var wrapTemplate = ({ tagName, serverRender, options }) => {
   return finalScopedRenderString;
 };
 var insertTemplates = (tagName, template, inputString) => {
-  return inputString.replace(new RegExp(`(<s*${tagName}([^>]*)>)`, "gm"), ($1, _, $3) => {
-    const attrs = $3.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
+  const tagRegex = new RegExp(`<\\s*${tagName}((?:\\s+[^>]*)*)\\s*>`, "gm");
+  return inputString.replace(tagRegex, ($match, $1) => {
+    const attrs = $1.split(/(?<=")\s+/).filter((attr) => attr.trim() !== "").map((attr) => {
       const [_key, _value] = attr.split("=");
       const key = _key.trim();
       const value = _value?.replace(/"/g, "") ?? "";
@@ -275,7 +279,7 @@ var insertTemplates = (tagName, template, inputString) => {
     for (const [key, value] of attrs) {
       scopedResult = scopedResult.replace(new RegExp(`{{attr:${key}}}`, "gm"), value);
     }
-    return $1 + scopedResult;
+    return $match + scopedResult;
   });
 };
 var clientOnlyCallback = (fn) => {
@@ -296,6 +300,13 @@ var renderState = {
   propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
+var clearRenderState = () => {
+  renderState.signalMap.clear();
+  renderState.callbackMap.clear();
+  renderState.propertyMap.clear();
+  renderState.fragmentMap.clear();
+  renderState.childrenMap.clear();
+};
 var logPropertyWarning = (propName, element) => {
   console.warn(
     `Property "${propName}" does not exist on element:`,
@@ -305,7 +316,7 @@ var logPropertyWarning = (propName, element) => {
 };
 var asNodeList = (value, parent) => {
   if (typeof value === "string") return [new Text(value)];
-  if (value instanceof DocumentFragment) return [...value.children];
+  if (value instanceof DocumentFragment) return Array.from(value.children);
   if (Array.isArray(value)) {
     const nodeList = [];
     let count = 0;
@@ -371,7 +382,7 @@ var processValue = (value) => {
   return String(value);
 };
 var evaluateBindings = (element, fragment) => {
-  for (const child of [...element.childNodes]) {
+  for (const child of Array.from(element.childNodes)) {
     if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
       const textList = child.data.split(SIGNAL_BINDING_REGEX);
       const nextSibling = child.nextSibling;
@@ -450,10 +461,10 @@ var evaluateBindings = (element, fragment) => {
                     persistedChild.remove();
                     continue;
                   }
-                  for (const attr of [...persistedChild.attributes]) {
+                  for (const attr of Array.from(persistedChild.attributes)) {
                     if (!newChild.hasAttribute(attr.name)) persistedChild.removeAttribute(attr.name);
                   }
-                  for (const newAttr of [...newChild.attributes]) {
+                  for (const newAttr of Array.from(newChild.attributes)) {
                     const oldAttrValue = persistedChild.getAttribute(newAttr.name);
                     if (oldAttrValue?.startsWith("this.__customCallbackFns")) continue;
                     persistedChild.setAttribute(newAttr.name, newAttr.value);
@@ -468,7 +479,7 @@ var evaluateBindings = (element, fragment) => {
         };
         const bindFragment = (signal2) => {
           const initialFragment = signal2();
-          renderState.childrenMap.set(initialFragment, [...initialFragment.childNodes]);
+          renderState.childrenMap.set(initialFragment, Array.from(initialFragment.childNodes));
           createEffect(({ destroy }) => {
             const result = signal2();
             const cachedChildren = renderState.childrenMap.get(initialFragment);
@@ -510,7 +521,7 @@ var evaluateBindings = (element, fragment) => {
         child.replaceWith(childFragment);
       }
     } else if (child instanceof Element) {
-      for (const attr of [...child.attributes]) {
+      for (const attr of Array.from(child.attributes)) {
         const attrName = attr.name;
         if (SIGNAL_BINDING_REGEX.test(attr.value)) {
           const textList = attr.value.split(SIGNAL_BINDING_REGEX);
@@ -1139,6 +1150,8 @@ var createRegistry = (args) => {
   };
 };
 export {
+  clearRenderState,
+  clearServerCss,
   clientOnlyCallback,
   createEffect,
   createRegistry,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "thunderous",
-  "version": "2.4.2",
+  "version": "2.4.4",
   "description": "A lightweight, functional web components library that brings the power of signals to your UI.",
   "type": "module",
   "main": "./dist/index.cjs",