thunderous 0.2.0 → 0.2.2

package/README.md

@@ -227,6 +227,27 @@ createEffect(() => {
 });
 ```
 
+##### Debugging Signals
+
+If you're having a tough time tracing an issue, you can provide the `debugMode` option to any signal to log potentially helpful information to the console. For differentiating values, you can also provide an optional `label` property to easily associate logs with their respective sources. These options can be passed to signals themselves, or to specific calls to setters and getters.
+
+```ts
+const [count, setCount] = createSignal(0, {
+  debugMode: true,
+  label: 'count signal',
+});
+
+setCount(1, {
+  debugMode: true,
+  label: 'start count',
+});
+
+const newCount = count({
+  debugMode: true,
+  label: 'new count',
+});
+```
+
 #### Refs
 
 The refs property exists for convenience to avoid manually querying the DOM. Since the DOM is only available after rendering, refs will only work in and after the `connectedCallback` method.

package/dist/index.cjs

@@ -48,19 +48,64 @@ var setInnerHTML = (element, html2) => {
 
 // src/signals.ts
 var subscriber = null;
-var createSignal = (initVal) => {
+var updateQueue = /* @__PURE__ */ new Set();
+var isBatchingUpdates = false;
+var createSignal = (initVal, options) => {
   const subscribers = /* @__PURE__ */ new Set();
   let value = initVal;
-  const getter = () => {
+  const getter = (getterOptions) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
+    if ((options == null ? void 0 : options.debugMode) || (getterOptions == null ? void 0 : getterOptions.debugMode)) {
+      requestAnimationFrame(() => {
+        let label = "anonymous signal";
+        if ((options == null ? void 0 : options.label) !== void 0) {
+          label = `(${options.label})`;
+          if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+            label += ` ${getterOptions.label}`;
+          }
+        } else if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+          label = getterOptions.label;
+        }
+        console.log("Signal retrieved:", { value, subscribers, label });
+      });
+    }
     return value;
   };
-  const setter = (newValue) => {
+  const setter = (newValue, setterOptions) => {
+    const isObject = typeof newValue === "object" && newValue !== null;
+    if (!isObject && value === newValue) return;
+    const oldValue = value;
     value = newValue;
     for (const fn of subscribers) {
-      fn();
+      updateQueue.add(fn);
+    }
+    if (!isBatchingUpdates) {
+      isBatchingUpdates = true;
+      requestAnimationFrame(() => {
+        for (const fn of updateQueue) {
+          try {
+            fn();
+          } catch (error) {
+            console.error("Error in subscriber:", { error, oldValue, newValue, fn });
+          }
+        }
+        if ((options == null ? void 0 : options.debugMode) || (setterOptions == null ? void 0 : setterOptions.debugMode)) {
+          let label = "anonymous signal";
+          if ((options == null ? void 0 : options.label) !== void 0) {
+            label = `(${options.label})`;
+            if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+              label += ` ${setterOptions.label}`;
+            }
+          } else if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+            label = setterOptions.label;
+          }
+          console.log("Signal set:", { oldValue, newValue, subscribers, label });
+        }
+        updateQueue.clear();
+        isBatchingUpdates = false;
+      });
     }
   };
   return [getter, setter];
@@ -68,16 +113,124 @@ var createSignal = (initVal) => {
 var derived = (fn) => {
   const [getter, setter] = createSignal();
   createEffect(() => {
-    setter(fn());
+    try {
+      setter(fn());
+    } catch (error) {
+      console.error("Error in derived signal:", { error, fn });
+    }
   });
   return getter;
 };
 var createEffect = (fn) => {
   subscriber = fn;
-  fn();
+  try {
+    fn();
+  } catch (error) {
+    console.error("Error in effect:", { error, fn });
+  }
   subscriber = null;
 };
 
+// src/render.ts
+var html = (strings, ...values) => {
+  let innerHTML = "";
+  const signalMap = /* @__PURE__ */ new Map();
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      signalMap.set(uniqueKey, value);
+      value = `{{signal:${uniqueKey}}}`;
+    }
+    innerHTML += string + String(value);
+  });
+  const fragment = parseFragment(innerHTML);
+  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
+  const signalBindingRegex = /(\{\{signal:.+\}\})/;
+  const parseChildren = (element) => {
+    for (const child of element.childNodes) {
+      if (child instanceof Text && signalBindingRegex.test(child.data)) {
+        const textList = child.data.split(signalBindingRegex);
+        textList.forEach((text, i) => {
+          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+          const newText = signal !== null ? signal() : text;
+          const newNode = new Text(newText);
+          if (i === 0) {
+            child.replaceWith(newNode);
+          } else {
+            element.insertBefore(newNode, child.nextSibling);
+          }
+          if (signal !== null) {
+            createEffect(() => {
+              newNode.data = signal();
+            });
+          }
+        });
+      }
+      if (child instanceof Element) {
+        for (const attr of child.attributes) {
+          if (signalBindingRegex.test(attr.value)) {
+            const textList = attr.value.split(signalBindingRegex);
+            createEffect(() => {
+              let newText = "";
+              for (const text of textList) {
+                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+                newText += signal !== null ? signal() : text;
+              }
+              child.setAttribute(attr.name, newText);
+            });
+          } else if (callbackBindingRegex.test(attr.value)) {
+            const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
+            child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
+          }
+        }
+        parseChildren(child);
+      }
+    }
+  };
+  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 isCSSStyleSheet = (stylesheet) => {
+  return typeof CSSStyleSheet !== "undefined" && stylesheet instanceof CSSStyleSheet;
+};
+var css = (strings, ...values) => {
+  let cssText = "";
+  const signalMap = /* @__PURE__ */ new Map();
+  const signalBindingRegex = /(\{\{signal:.+\}\})/;
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      signalMap.set(uniqueKey, value);
+      value = `{{signal:${uniqueKey}}}`;
+    }
+    cssText += string + String(value);
+  });
+  let 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;
+      newCSSTextList.push(newText);
+    }
+    const newCSSText = newCSSTextList.join("");
+    if (isCSSStyleSheet(stylesheet)) {
+      stylesheet.replace(newCSSText);
+    } else {
+      stylesheet.textContent = newCSSText;
+    }
+  });
+  return stylesheet;
+};
+
 // src/custom-element.ts
 var DEFAULT_RENDER_OPTIONS = {
   formAssociated: false,
@@ -154,7 +307,13 @@ var customElement = (render, options) => {
           }
         ),
         adoptStyleSheet: (stylesheet) => {
-          this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+          if (isCSSStyleSheet(stylesheet)) {
+            this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+          } else {
+            requestAnimationFrame(() => {
+              this.#shadowRoot.appendChild(stylesheet);
+            });
+          }
         }
       });
       setInnerHTML(this.#shadowRoot, fragment);
@@ -251,97 +410,6 @@ var createRegistry = () => {
     getTagName: (element) => registry.get(element)
   };
 };
-
-// src/render.ts
-var html = (strings, ...values) => {
-  let innerHTML = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = `{{signal:${uniqueKey}}}`;
-    }
-    innerHTML += string + String(value);
-  });
-  const fragment = parseFragment(innerHTML);
-  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  const parseChildren = (element) => {
-    for (const child of element.childNodes) {
-      if (child instanceof Text && signalBindingRegex.test(child.data)) {
-        const textList = child.data.split(signalBindingRegex);
-        textList.forEach((text, i) => {
-          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-          const newText = signal !== null ? signal() : text;
-          const newNode = new Text(newText);
-          if (i === 0) {
-            child.replaceWith(newNode);
-          } else {
-            element.insertBefore(newNode, child.nextSibling);
-          }
-          if (signal !== null) {
-            createEffect(() => {
-              newNode.data = signal();
-            });
-          }
-        });
-      }
-      if (child instanceof Element) {
-        for (const attr of child.attributes) {
-          if (signalBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(signalBindingRegex);
-            createEffect(() => {
-              let newText = "";
-              for (const text of textList) {
-                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-                newText += signal !== null ? signal() : text;
-              }
-              child.setAttribute(attr.name, newText);
-            });
-          } else if (callbackBindingRegex.test(attr.value)) {
-            const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
-            child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
-          }
-        }
-        parseChildren(child);
-      }
-    }
-  };
-  parseChildren(fragment);
-  return fragment;
-};
-var css = (strings, ...values) => {
-  let cssText = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = `{{signal:${uniqueKey}}}`;
-    }
-    cssText += string + String(value);
-  });
-  const stylesheet = new CSSStyleSheet();
-  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;
-      newCSSTextList.push(newText);
-    }
-    const newCSSText = newCSSTextList.join("");
-    stylesheet.replace(newCSSText);
-  });
-  return stylesheet;
-};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   createEffect,

package/dist/index.d.cts

@@ -1,7 +1,15 @@
-type SignalGetter<T> = () => T;
-type SignalSetter<T> = (newValue: T) => void;
+declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
+type Styles = CSSStyleSheet | HTMLStyleElement;
+declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
+
+type SignalOptions = {
+    debugMode: boolean;
+    label?: string;
+};
+type SignalGetter<T> = (options?: SignalOptions) => T;
+type SignalSetter<T> = (newValue: T, options?: SignalOptions) => void;
 type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
-declare const createSignal: <T = undefined>(initVal?: T) => Signal<T>;
+declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions) => Signal<T>;
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
 declare const createEffect: (fn: () => void) => void;
 
@@ -25,7 +33,7 @@ type RenderProps = {
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
     refs: Record<string, HTMLElement | null>;
-    adoptStyleSheet: (stylesheet: CSSStyleSheet) => void;
+    adoptStyleSheet: (stylesheet: Styles) => void;
 };
 type RenderOptions = {
     formAssociated: boolean;
@@ -39,7 +47,4 @@ type Registry = {
 };
 declare const createRegistry: () => Registry;
 
-declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
-declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => CSSStyleSheet;
-
 export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.d.ts

@@ -1,7 +1,15 @@
-type SignalGetter<T> = () => T;
-type SignalSetter<T> = (newValue: T) => void;
+declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
+type Styles = CSSStyleSheet | HTMLStyleElement;
+declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => Styles;
+
+type SignalOptions = {
+    debugMode: boolean;
+    label?: string;
+};
+type SignalGetter<T> = (options?: SignalOptions) => T;
+type SignalSetter<T> = (newValue: T, options?: SignalOptions) => void;
 type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
-declare const createSignal: <T = undefined>(initVal?: T) => Signal<T>;
+declare const createSignal: <T = undefined>(initVal?: T, options?: SignalOptions) => Signal<T>;
 declare const derived: <T>(fn: () => T) => SignalGetter<T>;
 declare const createEffect: (fn: () => void) => void;
 
@@ -25,7 +33,7 @@ type RenderProps = {
     customCallback: (fn: () => void) => `{{callback:${string}}}`;
     attrSignals: Record<string, Signal<string | null>>;
     refs: Record<string, HTMLElement | null>;
-    adoptStyleSheet: (stylesheet: CSSStyleSheet) => void;
+    adoptStyleSheet: (stylesheet: Styles) => void;
 };
 type RenderOptions = {
     formAssociated: boolean;
@@ -39,7 +47,4 @@ type Registry = {
 };
 declare const createRegistry: () => Registry;
 
-declare const html: (strings: TemplateStringsArray, ...values: unknown[]) => DocumentFragment;
-declare const css: (strings: TemplateStringsArray, ...values: unknown[]) => CSSStyleSheet;
-
 export { type RenderFunction, type RenderProps, type Signal, type SignalGetter, type SignalSetter, createEffect, createRegistry, createSignal, css, customElement, derived, html };

package/dist/index.js

@@ -17,19 +17,64 @@ var setInnerHTML = (element, html2) => {
 
 // src/signals.ts
 var subscriber = null;
-var createSignal = (initVal) => {
+var updateQueue = /* @__PURE__ */ new Set();
+var isBatchingUpdates = false;
+var createSignal = (initVal, options) => {
   const subscribers = /* @__PURE__ */ new Set();
   let value = initVal;
-  const getter = () => {
+  const getter = (getterOptions) => {
     if (subscriber !== null) {
       subscribers.add(subscriber);
     }
+    if ((options == null ? void 0 : options.debugMode) || (getterOptions == null ? void 0 : getterOptions.debugMode)) {
+      requestAnimationFrame(() => {
+        let label = "anonymous signal";
+        if ((options == null ? void 0 : options.label) !== void 0) {
+          label = `(${options.label})`;
+          if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+            label += ` ${getterOptions.label}`;
+          }
+        } else if ((getterOptions == null ? void 0 : getterOptions.label) !== void 0) {
+          label = getterOptions.label;
+        }
+        console.log("Signal retrieved:", { value, subscribers, label });
+      });
+    }
     return value;
   };
-  const setter = (newValue) => {
+  const setter = (newValue, setterOptions) => {
+    const isObject = typeof newValue === "object" && newValue !== null;
+    if (!isObject && value === newValue) return;
+    const oldValue = value;
     value = newValue;
     for (const fn of subscribers) {
-      fn();
+      updateQueue.add(fn);
+    }
+    if (!isBatchingUpdates) {
+      isBatchingUpdates = true;
+      requestAnimationFrame(() => {
+        for (const fn of updateQueue) {
+          try {
+            fn();
+          } catch (error) {
+            console.error("Error in subscriber:", { error, oldValue, newValue, fn });
+          }
+        }
+        if ((options == null ? void 0 : options.debugMode) || (setterOptions == null ? void 0 : setterOptions.debugMode)) {
+          let label = "anonymous signal";
+          if ((options == null ? void 0 : options.label) !== void 0) {
+            label = `(${options.label})`;
+            if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+              label += ` ${setterOptions.label}`;
+            }
+          } else if ((setterOptions == null ? void 0 : setterOptions.label) !== void 0) {
+            label = setterOptions.label;
+          }
+          console.log("Signal set:", { oldValue, newValue, subscribers, label });
+        }
+        updateQueue.clear();
+        isBatchingUpdates = false;
+      });
     }
   };
   return [getter, setter];
@@ -37,16 +82,124 @@ var createSignal = (initVal) => {
 var derived = (fn) => {
   const [getter, setter] = createSignal();
   createEffect(() => {
-    setter(fn());
+    try {
+      setter(fn());
+    } catch (error) {
+      console.error("Error in derived signal:", { error, fn });
+    }
   });
   return getter;
 };
 var createEffect = (fn) => {
   subscriber = fn;
-  fn();
+  try {
+    fn();
+  } catch (error) {
+    console.error("Error in effect:", { error, fn });
+  }
   subscriber = null;
 };
 
+// src/render.ts
+var html = (strings, ...values) => {
+  let innerHTML = "";
+  const signalMap = /* @__PURE__ */ new Map();
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      signalMap.set(uniqueKey, value);
+      value = `{{signal:${uniqueKey}}}`;
+    }
+    innerHTML += string + String(value);
+  });
+  const fragment = parseFragment(innerHTML);
+  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
+  const signalBindingRegex = /(\{\{signal:.+\}\})/;
+  const parseChildren = (element) => {
+    for (const child of element.childNodes) {
+      if (child instanceof Text && signalBindingRegex.test(child.data)) {
+        const textList = child.data.split(signalBindingRegex);
+        textList.forEach((text, i) => {
+          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+          const newText = signal !== null ? signal() : text;
+          const newNode = new Text(newText);
+          if (i === 0) {
+            child.replaceWith(newNode);
+          } else {
+            element.insertBefore(newNode, child.nextSibling);
+          }
+          if (signal !== null) {
+            createEffect(() => {
+              newNode.data = signal();
+            });
+          }
+        });
+      }
+      if (child instanceof Element) {
+        for (const attr of child.attributes) {
+          if (signalBindingRegex.test(attr.value)) {
+            const textList = attr.value.split(signalBindingRegex);
+            createEffect(() => {
+              let newText = "";
+              for (const text of textList) {
+                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
+                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+                newText += signal !== null ? signal() : text;
+              }
+              child.setAttribute(attr.name, newText);
+            });
+          } else if (callbackBindingRegex.test(attr.value)) {
+            const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
+            child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
+          }
+        }
+        parseChildren(child);
+      }
+    }
+  };
+  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 isCSSStyleSheet = (stylesheet) => {
+  return typeof CSSStyleSheet !== "undefined" && stylesheet instanceof CSSStyleSheet;
+};
+var css = (strings, ...values) => {
+  let cssText = "";
+  const signalMap = /* @__PURE__ */ new Map();
+  const signalBindingRegex = /(\{\{signal:.+\}\})/;
+  strings.forEach((string, i) => {
+    let value = values[i] ?? "";
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      signalMap.set(uniqueKey, value);
+      value = `{{signal:${uniqueKey}}}`;
+    }
+    cssText += string + String(value);
+  });
+  let 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;
+      newCSSTextList.push(newText);
+    }
+    const newCSSText = newCSSTextList.join("");
+    if (isCSSStyleSheet(stylesheet)) {
+      stylesheet.replace(newCSSText);
+    } else {
+      stylesheet.textContent = newCSSText;
+    }
+  });
+  return stylesheet;
+};
+
 // src/custom-element.ts
 var DEFAULT_RENDER_OPTIONS = {
   formAssociated: false,
@@ -123,7 +276,13 @@ var customElement = (render, options) => {
           }
         ),
         adoptStyleSheet: (stylesheet) => {
-          this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+          if (isCSSStyleSheet(stylesheet)) {
+            this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+          } else {
+            requestAnimationFrame(() => {
+              this.#shadowRoot.appendChild(stylesheet);
+            });
+          }
         }
       });
       setInnerHTML(this.#shadowRoot, fragment);
@@ -220,97 +379,6 @@ var createRegistry = () => {
     getTagName: (element) => registry.get(element)
   };
 };
-
-// src/render.ts
-var html = (strings, ...values) => {
-  let innerHTML = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = `{{signal:${uniqueKey}}}`;
-    }
-    innerHTML += string + String(value);
-  });
-  const fragment = parseFragment(innerHTML);
-  const callbackBindingRegex = /(\{\{callback:.+\}\})/;
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  const parseChildren = (element) => {
-    for (const child of element.childNodes) {
-      if (child instanceof Text && signalBindingRegex.test(child.data)) {
-        const textList = child.data.split(signalBindingRegex);
-        textList.forEach((text, i) => {
-          const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-          const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-          const newText = signal !== null ? signal() : text;
-          const newNode = new Text(newText);
-          if (i === 0) {
-            child.replaceWith(newNode);
-          } else {
-            element.insertBefore(newNode, child.nextSibling);
-          }
-          if (signal !== null) {
-            createEffect(() => {
-              newNode.data = signal();
-            });
-          }
-        });
-      }
-      if (child instanceof Element) {
-        for (const attr of child.attributes) {
-          if (signalBindingRegex.test(attr.value)) {
-            const textList = attr.value.split(signalBindingRegex);
-            createEffect(() => {
-              let newText = "";
-              for (const text of textList) {
-                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-                const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
-                newText += signal !== null ? signal() : text;
-              }
-              child.setAttribute(attr.name, newText);
-            });
-          } else if (callbackBindingRegex.test(attr.value)) {
-            const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
-            child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
-          }
-        }
-        parseChildren(child);
-      }
-    }
-  };
-  parseChildren(fragment);
-  return fragment;
-};
-var css = (strings, ...values) => {
-  let cssText = "";
-  const signalMap = /* @__PURE__ */ new Map();
-  const signalBindingRegex = /(\{\{signal:.+\}\})/;
-  strings.forEach((string, i) => {
-    let value = values[i] ?? "";
-    if (typeof value === "function") {
-      const uniqueKey = crypto.randomUUID();
-      signalMap.set(uniqueKey, value);
-      value = `{{signal:${uniqueKey}}}`;
-    }
-    cssText += string + String(value);
-  });
-  const stylesheet = new CSSStyleSheet();
-  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;
-      newCSSTextList.push(newText);
-    }
-    const newCSSText = newCSSTextList.join("");
-    stylesheet.replace(newCSSText);
-  });
-  return stylesheet;
-};
 export {
   createEffect,
   createRegistry,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",