thunderous 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Jonathan DeWitt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/index.cjs

@@ -0,0 +1,329 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  createEffect: () => createEffect,
+  createRegistry: () => createRegistry,
+  createSignal: () => createSignal,
+  css: () => css,
+  customElement: () => customElement,
+  derived: () => derived,
+  html: () => html
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/html-helpers.ts
+var clearHTML = (element) => {
+  while (element.childNodes.length > 0) {
+    element.childNodes[0].remove();
+  }
+};
+var parseFragment = (htmlStr) => {
+  const range = document.createRange();
+  range.selectNode(document.body);
+  return range.createContextualFragment(htmlStr);
+};
+var setInnerHTML = (element, html2) => {
+  clearHTML(element);
+  const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
+  element.append(fragment);
+};
+
+// src/signals.ts
+var subscriber = null;
+var createSignal = (initVal) => {
+  const subscribers = /* @__PURE__ */ new Set();
+  let value = initVal;
+  const getter = () => {
+    if (subscriber !== null) {
+      subscribers.add(subscriber);
+    }
+    return value;
+  };
+  const setter = (newValue) => {
+    value = newValue;
+    for (const fn of subscribers) {
+      fn();
+    }
+  };
+  return [getter, setter];
+};
+var derived = (fn) => {
+  const [getter, setter] = createSignal();
+  createEffect(() => {
+    setter(fn());
+  });
+  return getter;
+};
+var createEffect = (fn) => {
+  subscriber = fn;
+  fn();
+  subscriber = null;
+};
+
+// src/custom-element.ts
+var DEFAULT_RENDER_OPTIONS = {
+  formAssociated: false
+};
+var customElement = (render, options) => {
+  const { formAssociated } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  class CustomElement extends HTMLElement {
+    #attrSignals = {};
+    #attributeChangedFns = /* @__PURE__ */ new Set();
+    #connectedFns = /* @__PURE__ */ new Set();
+    #disconnectedFns = /* @__PURE__ */ new Set();
+    #adoptedCallbackFns = /* @__PURE__ */ new Set();
+    #formDisabledCallbackFns = /* @__PURE__ */ new Set();
+    #formResetCallbackFns = /* @__PURE__ */ new Set();
+    #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
+    #shadowRoot = this.attachShadow({ mode: "closed" });
+    #internals = this.attachInternals();
+    #observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const attrName = mutation.attributeName;
+        if (mutation.type !== "attributes" || attrName === null) continue;
+        const [value, setValue] = this.#attrSignals[attrName];
+        const _oldValue = value();
+        const oldValue = _oldValue === null ? null : _oldValue;
+        const newValue = this.getAttribute(attrName);
+        setValue(newValue);
+        for (const fn of this.#attributeChangedFns) {
+          fn(attrName, oldValue, newValue);
+        }
+      }
+    });
+    #render() {
+      const fragment = render({
+        elementRef: this,
+        root: this.#shadowRoot,
+        internals: this.#internals,
+        attributeChangedCallback: (fn) => this.#attributeChangedFns.add(fn),
+        connectedCallback: (fn) => this.#connectedFns.add(fn),
+        disconnectedCallback: (fn) => this.#disconnectedFns.add(fn),
+        adoptedCallback: (fn) => this.#adoptedCallbackFns.add(fn),
+        formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
+        formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
+        formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
+        attrSignals: new Proxy(
+          {},
+          {
+            get: (_, prop) => {
+              if (!(prop in this.#attrSignals)) this.#attrSignals[prop] = createSignal(null);
+              const [getter] = this.#attrSignals[prop];
+              const setter = (newValue) => this.setAttribute(prop, newValue);
+              return [getter, setter];
+            },
+            set: () => {
+              console.error("Signals must be assigned via setters.");
+              return false;
+            }
+          }
+        ),
+        refs: new Proxy(
+          {},
+          {
+            get: (_, prop) => this.#shadowRoot.querySelector(`[ref=${prop}]`),
+            set: () => {
+              console.error("Refs are readonly and cannot be assigned.");
+              return false;
+            }
+          }
+        ),
+        adoptStyleSheet: (stylesheet) => {
+          this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+        }
+      });
+      setInnerHTML(this.#shadowRoot, fragment);
+    }
+    static get formAssociated() {
+      return formAssociated;
+    }
+    constructor() {
+      super();
+      for (const attr of this.attributes) {
+        this.#attrSignals[attr.name] = createSignal(attr.value);
+      }
+      this.#render();
+    }
+    connectedCallback() {
+      this.#observer.observe(this, { attributes: true });
+      for (const fn of this.#connectedFns) {
+        fn();
+      }
+    }
+    disconnectedCallback() {
+      this.#observer.disconnect();
+      for (const fn of this.#disconnectedFns) {
+        fn();
+      }
+    }
+    adoptedCallback() {
+      for (const fn of this.#adoptedCallbackFns) {
+        fn();
+      }
+    }
+    formDisabledCallback() {
+      for (const fn of this.#formDisabledCallbackFns) {
+        fn();
+      }
+    }
+    formResetCallback() {
+      for (const fn of this.#formResetCallbackFns) {
+        fn();
+      }
+    }
+    formStateRestoreCallback() {
+      for (const fn of this.#formStateRestoreCallbackFns) {
+        fn();
+      }
+    }
+  }
+  let _tagname = null;
+  return {
+    define(tagname) {
+      if (customElements.get(tagname) !== void 0) {
+        console.warn(`Custom element "${tagname}" was already defined. Skipping...`);
+        return this;
+      }
+      customElements.define(tagname, CustomElement);
+      _tagname = tagname;
+      return this;
+    },
+    register(registry) {
+      if (_tagname === null) {
+        console.error("Custom element must be defined before registering.");
+        return this;
+      }
+      registry.register(_tagname, CustomElement);
+      return this;
+    },
+    eject: () => CustomElement
+  };
+};
+var createRegistry = () => {
+  const registry = /* @__PURE__ */ new Map();
+  return {
+    register: (tagName, element) => {
+      if (registry.has(element)) {
+        console.warn(`Custom element class "${element.constructor.name}" was already registered. Skipping...`);
+        return;
+      }
+      registry.set(element, tagName.toUpperCase());
+    },
+    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 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);
+            });
+          }
+        }
+        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,
+  createRegistry,
+  createSignal,
+  css,
+  customElement,
+  derived,
+  html
+});

package/dist/index.d.cts

@@ -0,0 +1,43 @@
+type SignalGetter<T> = () => T;
+type SignalSetter<T> = (newValue: T) => void;
+type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
+declare const createSignal: <T = undefined>(initVal?: T) => Signal<T>;
+declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+declare const createEffect: (fn: () => void) => void;
+
+type ElementResult = {
+    define: (tagname: `${string}-${string}`) => ElementResult;
+    register: (registry: Registry) => ElementResult;
+    eject: () => CustomElementConstructor;
+};
+type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
+type RenderProps = {
+    elementRef: HTMLElement;
+    root: ShadowRoot;
+    internals: ElementInternals;
+    attributeChangedCallback: (fn: AttributeChangedCallback) => void;
+    connectedCallback: (fn: () => void) => void;
+    disconnectedCallback: (fn: () => void) => void;
+    adoptedCallback: (fn: () => void) => void;
+    formDisabledCallback: (fn: () => void) => void;
+    formResetCallback: (fn: () => void) => void;
+    formStateRestoreCallback: (fn: () => void) => void;
+    attrSignals: Record<string, Signal<string | null>>;
+    refs: Record<string, HTMLElement | null>;
+    adoptStyleSheet: (stylesheet: CSSStyleSheet) => void;
+};
+type RenderOptions = {
+    formAssociated?: boolean;
+};
+type RenderFunction = (props: RenderProps) => DocumentFragment;
+declare const customElement: (render: RenderFunction, options?: RenderOptions) => ElementResult;
+type Registry = {
+    register: (tagName: string, element: CustomElementConstructor) => void;
+    getTagName: (element: CustomElementConstructor) => string | undefined;
+};
+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

@@ -0,0 +1,43 @@
+type SignalGetter<T> = () => T;
+type SignalSetter<T> = (newValue: T) => void;
+type Signal<T = unknown> = [SignalGetter<T>, SignalSetter<T>];
+declare const createSignal: <T = undefined>(initVal?: T) => Signal<T>;
+declare const derived: <T>(fn: () => T) => SignalGetter<T>;
+declare const createEffect: (fn: () => void) => void;
+
+type ElementResult = {
+    define: (tagname: `${string}-${string}`) => ElementResult;
+    register: (registry: Registry) => ElementResult;
+    eject: () => CustomElementConstructor;
+};
+type AttributeChangedCallback = (name: string, oldValue: string | null, newValue: string | null) => void;
+type RenderProps = {
+    elementRef: HTMLElement;
+    root: ShadowRoot;
+    internals: ElementInternals;
+    attributeChangedCallback: (fn: AttributeChangedCallback) => void;
+    connectedCallback: (fn: () => void) => void;
+    disconnectedCallback: (fn: () => void) => void;
+    adoptedCallback: (fn: () => void) => void;
+    formDisabledCallback: (fn: () => void) => void;
+    formResetCallback: (fn: () => void) => void;
+    formStateRestoreCallback: (fn: () => void) => void;
+    attrSignals: Record<string, Signal<string | null>>;
+    refs: Record<string, HTMLElement | null>;
+    adoptStyleSheet: (stylesheet: CSSStyleSheet) => void;
+};
+type RenderOptions = {
+    formAssociated?: boolean;
+};
+type RenderFunction = (props: RenderProps) => DocumentFragment;
+declare const customElement: (render: RenderFunction, options?: RenderOptions) => ElementResult;
+type Registry = {
+    register: (tagName: string, element: CustomElementConstructor) => void;
+    getTagName: (element: CustomElementConstructor) => string | undefined;
+};
+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

@@ -0,0 +1,297 @@
+// src/html-helpers.ts
+var clearHTML = (element) => {
+  while (element.childNodes.length > 0) {
+    element.childNodes[0].remove();
+  }
+};
+var parseFragment = (htmlStr) => {
+  const range = document.createRange();
+  range.selectNode(document.body);
+  return range.createContextualFragment(htmlStr);
+};
+var setInnerHTML = (element, html2) => {
+  clearHTML(element);
+  const fragment = typeof html2 === "string" ? parseFragment(html2) : html2;
+  element.append(fragment);
+};
+
+// src/signals.ts
+var subscriber = null;
+var createSignal = (initVal) => {
+  const subscribers = /* @__PURE__ */ new Set();
+  let value = initVal;
+  const getter = () => {
+    if (subscriber !== null) {
+      subscribers.add(subscriber);
+    }
+    return value;
+  };
+  const setter = (newValue) => {
+    value = newValue;
+    for (const fn of subscribers) {
+      fn();
+    }
+  };
+  return [getter, setter];
+};
+var derived = (fn) => {
+  const [getter, setter] = createSignal();
+  createEffect(() => {
+    setter(fn());
+  });
+  return getter;
+};
+var createEffect = (fn) => {
+  subscriber = fn;
+  fn();
+  subscriber = null;
+};
+
+// src/custom-element.ts
+var DEFAULT_RENDER_OPTIONS = {
+  formAssociated: false
+};
+var customElement = (render, options) => {
+  const { formAssociated } = { ...DEFAULT_RENDER_OPTIONS, ...options };
+  class CustomElement extends HTMLElement {
+    #attrSignals = {};
+    #attributeChangedFns = /* @__PURE__ */ new Set();
+    #connectedFns = /* @__PURE__ */ new Set();
+    #disconnectedFns = /* @__PURE__ */ new Set();
+    #adoptedCallbackFns = /* @__PURE__ */ new Set();
+    #formDisabledCallbackFns = /* @__PURE__ */ new Set();
+    #formResetCallbackFns = /* @__PURE__ */ new Set();
+    #formStateRestoreCallbackFns = /* @__PURE__ */ new Set();
+    #shadowRoot = this.attachShadow({ mode: "closed" });
+    #internals = this.attachInternals();
+    #observer = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        const attrName = mutation.attributeName;
+        if (mutation.type !== "attributes" || attrName === null) continue;
+        const [value, setValue] = this.#attrSignals[attrName];
+        const _oldValue = value();
+        const oldValue = _oldValue === null ? null : _oldValue;
+        const newValue = this.getAttribute(attrName);
+        setValue(newValue);
+        for (const fn of this.#attributeChangedFns) {
+          fn(attrName, oldValue, newValue);
+        }
+      }
+    });
+    #render() {
+      const fragment = render({
+        elementRef: this,
+        root: this.#shadowRoot,
+        internals: this.#internals,
+        attributeChangedCallback: (fn) => this.#attributeChangedFns.add(fn),
+        connectedCallback: (fn) => this.#connectedFns.add(fn),
+        disconnectedCallback: (fn) => this.#disconnectedFns.add(fn),
+        adoptedCallback: (fn) => this.#adoptedCallbackFns.add(fn),
+        formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
+        formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
+        formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
+        attrSignals: new Proxy(
+          {},
+          {
+            get: (_, prop) => {
+              if (!(prop in this.#attrSignals)) this.#attrSignals[prop] = createSignal(null);
+              const [getter] = this.#attrSignals[prop];
+              const setter = (newValue) => this.setAttribute(prop, newValue);
+              return [getter, setter];
+            },
+            set: () => {
+              console.error("Signals must be assigned via setters.");
+              return false;
+            }
+          }
+        ),
+        refs: new Proxy(
+          {},
+          {
+            get: (_, prop) => this.#shadowRoot.querySelector(`[ref=${prop}]`),
+            set: () => {
+              console.error("Refs are readonly and cannot be assigned.");
+              return false;
+            }
+          }
+        ),
+        adoptStyleSheet: (stylesheet) => {
+          this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
+        }
+      });
+      setInnerHTML(this.#shadowRoot, fragment);
+    }
+    static get formAssociated() {
+      return formAssociated;
+    }
+    constructor() {
+      super();
+      for (const attr of this.attributes) {
+        this.#attrSignals[attr.name] = createSignal(attr.value);
+      }
+      this.#render();
+    }
+    connectedCallback() {
+      this.#observer.observe(this, { attributes: true });
+      for (const fn of this.#connectedFns) {
+        fn();
+      }
+    }
+    disconnectedCallback() {
+      this.#observer.disconnect();
+      for (const fn of this.#disconnectedFns) {
+        fn();
+      }
+    }
+    adoptedCallback() {
+      for (const fn of this.#adoptedCallbackFns) {
+        fn();
+      }
+    }
+    formDisabledCallback() {
+      for (const fn of this.#formDisabledCallbackFns) {
+        fn();
+      }
+    }
+    formResetCallback() {
+      for (const fn of this.#formResetCallbackFns) {
+        fn();
+      }
+    }
+    formStateRestoreCallback() {
+      for (const fn of this.#formStateRestoreCallbackFns) {
+        fn();
+      }
+    }
+  }
+  let _tagname = null;
+  return {
+    define(tagname) {
+      if (customElements.get(tagname) !== void 0) {
+        console.warn(`Custom element "${tagname}" was already defined. Skipping...`);
+        return this;
+      }
+      customElements.define(tagname, CustomElement);
+      _tagname = tagname;
+      return this;
+    },
+    register(registry) {
+      if (_tagname === null) {
+        console.error("Custom element must be defined before registering.");
+        return this;
+      }
+      registry.register(_tagname, CustomElement);
+      return this;
+    },
+    eject: () => CustomElement
+  };
+};
+var createRegistry = () => {
+  const registry = /* @__PURE__ */ new Map();
+  return {
+    register: (tagName, element) => {
+      if (registry.has(element)) {
+        console.warn(`Custom element class "${element.constructor.name}" was already registered. Skipping...`);
+        return;
+      }
+      registry.set(element, tagName.toUpperCase());
+    },
+    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 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);
+            });
+          }
+        }
+        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,
+  createSignal,
+  css,
+  customElement,
+  derived,
+  html
+};

package/package.json

@@ -0,0 +1,34 @@
+{
+	"name": "thunderous",
+	"version": "0.0.1",
+	"description": "",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"module": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"files": [
+		"/dist",
+		"/package.json",
+		"/README.md",
+		"/LICENSE"
+	],
+	"scripts": {
+		"demo": "cd demo && rm -rf node_modules && npm i && npm start",
+		"build": "tsup src/index.ts --format cjs,esm --dts --no-clean"
+	},
+	"author": "",
+	"license": "MIT",
+	"devDependencies": {
+		"@types/eslint": "^8.56.10",
+		"@typescript-eslint/eslint-plugin": "^7.1.1",
+		"@typescript-eslint/parser": "^7.1.1",
+		"eslint": "^8.57.0",
+		"eslint-plugin-import": "^2.31.0",
+		"eslint-plugin-node": "^11.1.0",
+		"eslint-plugin-promise": "^7.1.0",
+		"express": "^4.17.1",
+		"prettier": "^3.3.3",
+		"typescript": "^5.6.3",
+		"tsup": "^8.3.0"
+	}
+}

package/readme.md

@@ -0,0 +1,73 @@
+# Thunderous
+
+Thunderous is a library for writing web components in a functional style, reducing the boilerplate, while signals make it better for managing and sharing state.
+
+Each component renders only once, then binds signals to DOM nodes for direct updates with _thunderous_ efficiency.
+
+## Table of Contents
+
+- [Installation](#installation)
+- [Usage](#usage)
+- [Development](#development)
+- [License](#license)
+
+## Installation
+
+Install Thunderous via npm:
+
+```sh
+npm install thunderous
+```
+
+## Usage
+
+Below is a basic usage of the functions available.
+
+```ts
+import { customElement, html, css, createSignal } from 'thunderous';
+
+const MyElement = customElement(({ attrSignals, connectedCallback, refs, adoptStyleSheet }) => {
+	const [heading] = attrSignals.heading;
+	const [count, setCount] = createSignal(0);
+	connectedCallback(() => {
+		refs.increment.addEventListener('click', () => {
+			setCount(count() + 1);
+		});
+	});
+	adoptStyleSheet(css`
+		:host {
+			display: block;
+			font-family: sans-serif;
+		}
+	`);
+	return html`
+		<h2>${heading}</h2>
+		<button ref="increment">Increment</button>
+		<output>${count}</output>
+	`;
+});
+
+MyElement.define('my-element');
+```
+
+If you should need to access the class directly for some reason, you can use the `eject` method.
+
+```ts
+const MyElementClass = MyElement.eject();
+```
+
+[more examples to be updated...]
+
+## Development
+
+### Local Server
+
+To see it in action, start the demo server with:
+
+```sh
+npm run demo
+```
+
+## License
+
+This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.