thunderous 2.3.12 → 2.3.13

package/dist/index.js

@@ -1,1007 +1,5 @@
-// 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 createSignal = (initVal, options) => {
-  const subscribers = /* @__PURE__ */ new Set();
-  let value = initVal;
-  const getter = (getterOptions) => {
-    if (subscriber !== null) {
-      subscribers.add(subscriber);
-    }
-    if (options?.debugMode === true || getterOptions?.debugMode === true) {
-      let label = "anonymous signal";
-      if (options?.label !== void 0) {
-        label = `(${options.label})`;
-        if (getterOptions?.label !== void 0) {
-          label += ` ${getterOptions.label}`;
-        }
-      } else if (getterOptions?.label !== void 0) {
-        label = getterOptions.label;
-      }
-      console.log("Signal retrieved:", { value, subscribers, label });
-    }
-    return value;
-  };
-  getter.getter = true;
-  let stackLength = 0;
-  const setter = (newValue, setterOptions) => {
-    stackLength++;
-    queueMicrotask(() => stackLength--);
-    if (stackLength > 1e3) {
-      console.error(new Error("Signal setter stack overflow detected. Possible infinite loop. Bailing out."));
-      stackLength = 0;
-      return;
-    }
-    const isObject = typeof newValue === "object" && newValue !== null;
-    if (!isObject && value === newValue) return;
-    if (isObject && typeof value === "object" && value !== null) {
-      if (JSON.stringify(value) === JSON.stringify(newValue)) return;
-    }
-    const oldValue = value;
-    value = newValue;
-    for (const fn of subscribers) {
-      try {
-        fn();
-      } catch (error) {
-        console.error("Error in subscriber:", { error, oldValue, newValue, fn });
-      }
-    }
-    if (options?.debugMode === true || setterOptions?.debugMode === true) {
-      let label = "anonymous signal";
-      if (options?.label !== void 0) {
-        label = `(${options.label})`;
-        if (setterOptions?.label !== void 0) {
-          label += ` ${setterOptions.label}`;
-        }
-      } else if (setterOptions?.label !== void 0) {
-        label = setterOptions.label;
-      }
-      console.log("Signal set:", { oldValue, newValue, subscribers, label });
-    }
-  };
-  return [getter, setter];
-};
-var derived = (fn, options) => {
-  const [getter, setter] = createSignal(void 0, options);
-  createEffect(() => {
-    try {
-      setter(fn());
-    } catch (error) {
-      console.error("Error in derived signal:", { error, fn });
-    }
-  });
-  return getter;
-};
-var createEffect = (fn) => {
-  subscriber = fn;
-  try {
-    fn();
-  } catch (error) {
-    console.error("Error in effect:", { error, fn });
-  }
-  subscriber = null;
-};
-
-// src/utilities.ts
-var NOOP = () => void 0;
-var queryComment = (node, comment) => {
-  for (const child of node.childNodes) {
-    if (child.nodeType === Node.COMMENT_NODE && child.nodeValue === comment) {
-      return child;
-    }
-  }
-  return null;
-};
-
-// src/server-side.ts
-var isServer = typeof window === "undefined";
-var serverDefineFns = /* @__PURE__ */ new Set();
-var onServerDefine = (fn) => {
-  serverDefineFns.add(fn);
-};
-var serverDefine = ({
-  tagName,
-  serverRender,
-  options,
-  elementResult,
-  scopedRegistry,
-  parentRegistry
-}) => {
-  if (parentRegistry !== void 0) {
-    if (parentRegistry.getTagName(elementResult) !== tagName.toUpperCase()) {
-      parentRegistry.define(tagName, elementResult);
-    }
-    parentRegistry.__serverRenderOpts.set(tagName, { serverRender, ...options });
-    if (parentRegistry.scoped) return;
-  }
-  for (const fn of serverDefineFns) {
-    let result = serverRender(getServerRenderArgs(tagName));
-    result = wrapTemplate({
-      tagName,
-      serverRender,
-      options
-    });
-    if (scopedRegistry !== void 0) {
-      for (const [scopedTagName, scopedRenderOptions] of scopedRegistry.__serverRenderOpts) {
-        const { serverRender: serverRender2, ...scopedOptions } = scopedRenderOptions;
-        let template = serverRender2(getServerRenderArgs(scopedTagName, scopedRegistry));
-        template = wrapTemplate({
-          tagName: scopedTagName,
-          serverRender: serverRender2,
-          options: scopedOptions
-        });
-        result = insertTemplates(scopedTagName, template, result);
-      }
-    }
-    fn(tagName, result);
-  }
-};
-var serverCss = /* @__PURE__ */ new Map();
-var getServerRenderArgs = (tagName, registry) => ({
-  get elementRef() {
-    return new Proxy({}, {
-      get: () => {
-        const error = new Error("The `elementRef` property is not available on the server.");
-        console.error(error);
-        throw error;
-      }
-    });
-  },
-  get root() {
-    return new Proxy({}, {
-      get: () => {
-        const error = new Error("The `root` property is not available on the server.");
-        console.error(error);
-        throw error;
-      }
-    });
-  },
-  get internals() {
-    return new Proxy({}, {
-      get: () => {
-        const error = new Error("The `internals` property is not available on the server.");
-        console.error(error);
-        throw error;
-      }
-    });
-  },
-  attributeChangedCallback: NOOP,
-  connectedCallback: NOOP,
-  disconnectedCallback: NOOP,
-  adoptedCallback: NOOP,
-  formDisabledCallback: NOOP,
-  formResetCallback: NOOP,
-  formStateRestoreCallback: NOOP,
-  formAssociatedCallback: NOOP,
-  clientOnlyCallback: NOOP,
-  customCallback: () => "",
-  getter: (fn) => {
-    const _fn = () => fn();
-    _fn.getter = true;
-    return _fn;
-  },
-  attrSignals: new Proxy({}, { get: (_, attr) => createSignal(`{{attr:${String(attr)}}}`) }),
-  propSignals: new Proxy({}, { get: () => createSignal(null) }),
-  refs: {},
-  // @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) ?? [];
-    cssArr.push(cssStr);
-    _serverCss.set(tagName, cssArr);
-  }
-});
-var wrapTemplate = ({ tagName, serverRender, options }) => {
-  const { registry } = options.shadowRootOptions;
-  const scopedRegistry = registry !== void 0 && "scoped" in registry ? registry : void 0;
-  const initialRenderString = serverRender(getServerRenderArgs(tagName, scopedRegistry));
-  const _serverCss = scopedRegistry?.__serverCss ?? serverCss;
-  const cssRenderString = (_serverCss.get(tagName) ?? []).map((cssStr) => `<style>${cssStr}</style>`).join("");
-  const finalScopedRenderString = options.attachShadow ? (
-    /* html */
-    `
-				<template
-					shadowrootmode="${options.shadowRootOptions.mode}"
-					shadowrootdelegatesfocus="${options.shadowRootOptions.delegatesFocus}"
-					shadowrootclonable="${options.shadowRootOptions.clonable}"
-					shadowrootserializable="${options.shadowRootOptions.serializable}"
-				>
-					${cssRenderString + initialRenderString}
-				</template>
-			`
-  ) : cssRenderString + initialRenderString;
-  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 [_key, _value] = attr.split("=");
-      const key = _key.trim();
-      const value = _value?.replace(/"/g, "") ?? "";
-      return [key, value];
-    });
-    let scopedResult = template;
-    for (const [key, value] of attrs) {
-      scopedResult = scopedResult.replace(new RegExp(`{{attr:${key}}}`, "gm"), value);
-    }
-    return $1 + scopedResult;
-  });
-};
-var clientOnlyCallback = (fn) => {
-  if (!isServer) return fn();
-};
-
-// src/render.ts
-var CALLBACK_BINDING_REGEX = /(\{\{callback:.+\}\})/;
-var LEGACY_CALLBACK_BINDING_REGEX = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
-var SIGNAL_BINDING_REGEX = /(\{\{signal:.+\}\})/;
-var FRAGMENT_ATTRIBUTE = "___thunderous-fragment";
-var renderState = {
-  currentShadowRoot: null,
-  signalMap: /* @__PURE__ */ new Map(),
-  callbackMap: /* @__PURE__ */ new Map(),
-  fragmentMap: /* @__PURE__ */ new Map(),
-  registry: typeof customElements !== "undefined" ? customElements : {}
-};
-var logPropertyWarning = (propName, element) => {
-  console.warn(
-    `Property "${propName}" does not exist on element:`,
-    element,
-    "\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it."
-  );
-};
-var arrayToDocumentFragment = (array, parent, uniqueKey) => {
-  const documentFragment = new DocumentFragment();
-  let count = 0;
-  const keys = /* @__PURE__ */ new Set();
-  for (const item of array) {
-    const node = createNewNode(item, parent, uniqueKey);
-    if (node instanceof DocumentFragment) {
-      const child = node.firstElementChild;
-      if (node.children.length > 1) {
-        console.error(
-          "When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:",
-          parent
-        );
-      }
-      if (child === null) continue;
-      let key = child.getAttribute("key");
-      if (key === null) {
-        console.warn(
-          "When rendering arrays, a `key` attribute should be provided on each child element. An index was automatically applied, but this could result in unexpected behavior:",
-          child
-        );
-        key = String(count);
-        child.setAttribute("key", key);
-      }
-      if (keys.has(key)) {
-        console.warn(
-          `When rendering arrays, each child should have a unique \`key\` attribute. Duplicate key "${key}" found on:`,
-          child
-        );
-      }
-      keys.add(key);
-      count++;
-    }
-    documentFragment.append(node);
-  }
-  const comment = document.createComment(uniqueKey);
-  documentFragment.append(comment);
-  return documentFragment;
-};
-var createNewNode = (value, parent, uniqueKey) => {
-  if (typeof value === "string") return new Text(value);
-  if (Array.isArray(value)) return arrayToDocumentFragment(value, parent, uniqueKey);
-  if (value instanceof DocumentFragment) return value;
-  return new Text("");
-};
-var processValue = (value) => {
-  if (!isServer && value instanceof DocumentFragment) {
-    const uniqueKey = crypto.randomUUID();
-    renderState.fragmentMap.set(uniqueKey, value);
-    return `<div ${FRAGMENT_ATTRIBUTE}="${uniqueKey}"></div>`;
-  }
-  if (typeof value === "function" && "getter" in value && value.getter === true) {
-    const getter = value;
-    const uniqueKey = crypto.randomUUID();
-    renderState.signalMap.set(uniqueKey, getter);
-    let result = getter();
-    if (Array.isArray(result)) {
-      result = result.map((item) => processValue(item)).join("");
-    }
-    return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
-  }
-  if (typeof value === "function") {
-    const uniqueKey = crypto.randomUUID();
-    renderState.callbackMap.set(uniqueKey, value);
-    return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
-  }
-  return String(value);
-};
-var evaluateBindings = (element, fragment) => {
-  for (const child of element.childNodes) {
-    if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
-      const textList = child.data.split(SIGNAL_BINDING_REGEX);
-      const sibling = child.nextSibling;
-      textList.forEach((text, i) => {
-        const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-        const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
-        const newValue = signal !== void 0 ? signal() : text;
-        const newNode = createNewNode(newValue, element, uniqueKey);
-        if (i === 0) {
-          child.replaceWith(newNode);
-        } else {
-          element.insertBefore(newNode, sibling);
-        }
-        if (signal !== void 0 && newNode instanceof Text) {
-          createEffect(() => {
-            newNode.data = signal();
-          });
-        } else if (signal !== void 0 && newNode instanceof DocumentFragment) {
-          let init = false;
-          createEffect(() => {
-            const result = signal();
-            const nextNode = createNewNode(result, element, uniqueKey);
-            if (nextNode instanceof Text) {
-              const error = new TypeError(
-                "Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text"
-              );
-              console.error(error);
-              throw error;
-            }
-            for (const child2 of element.children) {
-              const key = child2.getAttribute("key");
-              if (key === null) continue;
-              const matchingNode = nextNode.querySelector(`[key="${key}"]`);
-              if (init && matchingNode === null) {
-                child2.remove();
-              }
-            }
-            let anchor = queryComment(element, uniqueKey);
-            for (const child2 of nextNode.children) {
-              const key = child2.getAttribute("key");
-              const matchingNode = element.querySelector(`[key="${key}"]`);
-              if (matchingNode === null) continue;
-              matchingNode.__customCallbackFns = child2.__customCallbackFns;
-              for (const attr of child2.attributes) {
-                matchingNode.setAttribute(attr.name, attr.value);
-              }
-              matchingNode.replaceChildren(...child2.childNodes);
-              anchor = matchingNode.nextSibling;
-              child2.replaceWith(matchingNode);
-            }
-            const nextAnchor = queryComment(nextNode, uniqueKey);
-            nextAnchor?.remove();
-            element.insertBefore(nextNode, anchor);
-            if (!init) init = true;
-          });
-        }
-      });
-    }
-    if (child instanceof Element && child.hasAttribute(FRAGMENT_ATTRIBUTE)) {
-      const uniqueKey = child.getAttribute(FRAGMENT_ATTRIBUTE);
-      const childFragment = renderState.fragmentMap.get(uniqueKey);
-      if (childFragment !== void 0) {
-        child.replaceWith(childFragment);
-      }
-    } else if (child instanceof Element) {
-      for (const attr of [...child.attributes]) {
-        const attrName = attr.name;
-        if (SIGNAL_BINDING_REGEX.test(attr.value)) {
-          const textList = attr.value.split(SIGNAL_BINDING_REGEX);
-          let prevText = attr.value;
-          createEffect(() => {
-            let newText = "";
-            let hasNull = false;
-            let signal;
-            for (const text of textList) {
-              const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, "$1");
-              if (signal === void 0) {
-                signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : void 0;
-                const value = signal !== void 0 ? signal() : text;
-                if (value === null) hasNull = true;
-                newText += String(value);
-              } else {
-                newText += text;
-              }
-            }
-            if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
-              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
-            } else {
-              if (newText !== prevText) child.setAttribute(attrName, newText);
-            }
-            if (attrName.startsWith("prop:")) {
-              if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
-              const newValue = hasNull && newText === "null" ? null : newText;
-              if (!(propName in child)) logPropertyWarning(propName, child);
-              child[propName] = signal !== void 0 ? signal() : newValue;
-            }
-            prevText = newText;
-          });
-        } else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
-          const getRootNode = child.getRootNode.bind(child);
-          child.getRootNode = () => {
-            const rootNode = getRootNode();
-            return rootNode instanceof ShadowRoot ? rootNode : fragment;
-          };
-        } else if (CALLBACK_BINDING_REGEX.test(attr.value)) {
-          const textList = attr.value.split(CALLBACK_BINDING_REGEX);
-          createEffect(() => {
-            child.__customCallbackFns = child.__customCallbackFns ?? /* @__PURE__ */ new Map();
-            let uniqueKey = "";
-            for (const text of textList) {
-              const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, "$1");
-              if (_uniqueKey !== text) uniqueKey = _uniqueKey;
-              const callback = uniqueKey !== text ? renderState.callbackMap.get(uniqueKey) : void 0;
-              if (callback !== void 0) {
-                child.__customCallbackFns.set(uniqueKey, callback);
-              }
-            }
-            if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
-              child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
-            } else if (attrName.startsWith("prop:")) {
-              child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
-              if (!(propName in child)) logPropertyWarning(propName, child);
-              child[propName] = child.__customCallbackFns.get(uniqueKey);
-            }
-          });
-        } else if (attrName.startsWith("prop:")) {
-          child.removeAttribute(attrName);
-          const propName = attrName.replace("prop:", "");
-          if (!(propName in child)) logPropertyWarning(propName, child);
-          child[propName] = attr.value;
-        }
-      }
-      evaluateBindings(child, fragment);
-    }
-  }
-};
-var html = (strings, ...values) => {
-  const innerHTML = strings.reduce((innerHTML2, str, i) => {
-    let value = values[i] ?? "";
-    if (Array.isArray(value)) {
-      value = value.map((item) => processValue(item)).join("");
-    } else {
-      value = processValue(value);
-    }
-    innerHTML2 += str + String(value === null ? "" : value);
-    return innerHTML2;
-  }, "");
-  if (isServer) return innerHTML;
-  const template = document.createElement("template");
-  template.innerHTML = innerHTML;
-  const fragment = renderState.currentShadowRoot?.importNode?.(template.content, true) ?? document.importNode(template.content, true);
-  renderState.registry.upgrade(fragment);
-  evaluateBindings(fragment, fragment);
-  return fragment;
-};
-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;
-};
-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 = isServer ? value() : `{{signal:${uniqueKey}}}`;
-    }
-    if (typeof value === "object" && value !== null) {
-      console.error("Objects are not valid in CSS values. Received:", value);
-      value = "";
-    }
-    cssText += string + String(value);
-  });
-  if (isServer) {
-    return cssText;
-  }
-  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 newValue = signal !== null ? signal() : text;
-      const newText = String(newValue);
-      newCSSTextList.push(newText);
-    }
-    const newCSSText = newCSSTextList.join("");
-    if (isCSSStyleSheet(stylesheet)) {
-      stylesheet.replace(newCSSText).catch(console.error);
-    } else {
-      stylesheet.textContent = newCSSText;
-    }
-  });
-  return stylesheet;
-};
-
-// src/custom-element.ts
-var ANY_BINDING_REGEX = /(\{\{.+:.+\}\})/;
-var customElement = (render, options) => {
-  const _options = { ...DEFAULT_RENDER_OPTIONS, ...options };
-  const {
-    formAssociated,
-    observedAttributes: _observedAttributes,
-    attributesAsProperties,
-    attachShadow,
-    shadowRootOptions: _shadowRootOptions
-  } = _options;
-  const shadowRootOptions = { ...DEFAULT_RENDER_OPTIONS.shadowRootOptions, ..._shadowRootOptions };
-  const allOptions = { ..._options, shadowRootOptions };
-  if (isServer) {
-    const serverRender = render;
-    let _tagName2;
-    let _registry2;
-    const scopedRegistry = (() => {
-      if (shadowRootOptions.registry !== void 0 && "scoped" in shadowRootOptions.registry && shadowRootOptions.registry.scoped) {
-        return shadowRootOptions.registry;
-      }
-    })();
-    return {
-      define(tagName) {
-        _tagName2 = tagName;
-        serverDefine({
-          tagName,
-          serverRender,
-          options: allOptions,
-          scopedRegistry,
-          parentRegistry: _registry2,
-          elementResult: this
-        });
-        return this;
-      },
-      register(registry) {
-        if (_tagName2 !== void 0 && "eject" in registry && registry.scoped) {
-          console.error("Must call `register()` before `define()` for scoped registries.");
-          return this;
-        }
-        if ("eject" in registry) {
-          _registry2 = registry;
-        } else {
-          console.error("Registry must be created with `createRegistry()` for SSR.");
-        }
-        return this;
-      },
-      eject() {
-        const error = new Error("Cannot eject a custom element on the server.");
-        console.error(error);
-        throw error;
-      }
-    };
-  }
-  shadowRootOptions.registry = shadowRootOptions.customElements = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
-  const observedAttributesSet = new Set(_observedAttributes);
-  const attributesAsPropertiesMap = /* @__PURE__ */ new Map();
-  for (const [attrName, coerce] of attributesAsProperties) {
-    observedAttributesSet.add(attrName);
-    attributesAsPropertiesMap.set(attrName, {
-      // convert kebab-case attribute names to camelCase property names
-      prop: attrName.replace(/^([A-Z]+)/, (_, letter) => letter.toLowerCase()).replace(/(-|_| )([a-zA-Z])/g, (_, letter) => letter.toUpperCase()),
-      coerce,
-      value: null
-    });
-  }
-  const observedAttributes = Array.from(observedAttributesSet);
-  class CustomElement extends HTMLElement {
-    #attributesAsPropertiesMap = new Map(attributesAsPropertiesMap);
-    #attrSignals = {};
-    #propSignals = {};
-    #attributeChangedFns = /* @__PURE__ */ new Set();
-    #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();
-    #clientOnlyCallbackFns = /* @__PURE__ */ new Set();
-    #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
-    #internals = this.attachInternals();
-    #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;
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-        const [getter, setter] = this.#attrSignals[attrName];
-        const oldValue = getter();
-        const newValue = this.getAttribute(attrName);
-        setter(newValue);
-        for (const fn of this.#attributeChangedFns) {
-          fn(attrName, oldValue, newValue);
-        }
-      }
-    });
-    #getPropSignal = ((prop, { allowUndefined = false } = {}) => {
-      if (!(prop in this.#propSignals)) this.#propSignals[prop] = createSignal();
-      const [_getter, __setter] = this.#propSignals[prop];
-      let stackLength = 0;
-      const _setter = (newValue, options2) => {
-        stackLength++;
-        queueMicrotask(() => stackLength--);
-        if (stackLength > 999) {
-          console.error(
-            new Error(
-              `Property signal setter stack overflow detected. Possible infinite loop. Bailing out.
-
-Property: ${prop}
-
-New value: ${JSON.stringify(newValue, null, 2)}
-
-Element: <${this.tagName.toLowerCase()}>
-`
-            )
-          );
-          stackLength = 0;
-          return;
-        }
-        __setter(newValue, options2);
-      };
-      const descriptor = Object.getOwnPropertyDescriptor(this, prop);
-      if (descriptor === void 0) {
-        Object.defineProperty(this, prop, {
-          get: _getter,
-          set: _setter,
-          configurable: false,
-          enumerable: true
-        });
-      }
-      const setter = (newValue, options2) => {
-        this[prop] = newValue;
-        _setter(newValue, options2);
-      };
-      const getter = (options2) => {
-        const value = _getter(options2);
-        if (value === void 0 && !allowUndefined) {
-          const error = new Error(
-            `Error accessing property: "${prop}"
-You must set an initial value before calling a property signal's getter.
-`
-          );
-          console.error(error);
-          throw error;
-        }
-        return value;
-      };
-      getter.getter = true;
-      const publicSignal = [getter, setter];
-      publicSignal.init = (value) => {
-        _setter(value);
-        return [getter, setter];
-      };
-      return publicSignal;
-    }).bind(this);
-    #render = (() => {
-      const root = this.#shadowRoot ?? this;
-      renderState.currentShadowRoot = this.#shadowRoot;
-      renderState.registry = shadowRootOptions.customElements ?? customElements;
-      const fragment = render({
-        elementRef: this,
-        root,
-        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),
-        formAssociatedCallback: (fn) => this.#formAssociatedCallbackFns.add(fn),
-        formDisabledCallback: (fn) => this.#formDisabledCallbackFns.add(fn),
-        formResetCallback: (fn) => this.#formResetCallbackFns.add(fn),
-        formStateRestoreCallback: (fn) => this.#formStateRestoreCallbackFns.add(fn),
-        clientOnlyCallback: (fn) => this.#clientOnlyCallbackFns.add(fn),
-        getter: (fn) => {
-          const _fn = () => fn();
-          _fn.getter = true;
-          return _fn;
-        },
-        customCallback: (fn) => {
-          const key = crypto.randomUUID();
-          this.__customCallbackFns?.set(key, fn);
-          return `this.getRootNode().host.__customCallbackFns.get('${key}')(event)`;
-        },
-        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;
-            }
-          }
-        ),
-        propSignals: new Proxy({}, {
-          get: (_, prop) => this.#getPropSignal(prop),
-          set: () => {
-            console.error("Signals must be assigned via setters.");
-            return false;
-          }
-        }),
-        refs: new Proxy(
-          {},
-          {
-            get: (_, prop) => root.querySelector(`[ref=${prop}]`),
-            set: () => {
-              console.error("Refs are readonly and cannot be assigned.");
-              return false;
-            }
-          }
-        ),
-        adoptStyleSheet: (stylesheet) => {
-          if (!attachShadow) {
-            console.warn(
-              "Styles are only encapsulated when using shadow DOM. The stylesheet will be applied to the global document instead."
-            );
-          }
-          if (isCSSStyleSheet(stylesheet)) {
-            if (this.#shadowRoot === null) {
-              for (const rule of stylesheet.cssRules) {
-                if (rule instanceof CSSStyleRule && rule.selectorText.includes(":host")) {
-                  console.error("Styles with :host are not supported when not using shadow DOM.");
-                }
-              }
-              document.adoptedStyleSheets.push(stylesheet);
-              return;
-            }
-            this.#shadowRoot.adoptedStyleSheets.push(stylesheet);
-          } else {
-            requestAnimationFrame(() => {
-              root.appendChild(stylesheet);
-            });
-          }
-        }
-      });
-      fragment.host = this;
-      for (const fn of this.#clientOnlyCallbackFns) {
-        fn();
-      }
-      root.replaceChildren(fragment);
-      renderState.currentShadowRoot = null;
-      renderState.registry = customElements;
-    }).bind(this);
-    static get formAssociated() {
-      return formAssociated;
-    }
-    static get observedAttributes() {
-      return observedAttributes;
-    }
-    constructor() {
-      try {
-        super();
-        if (!Object.prototype.hasOwnProperty.call(this, "__customCallbackFns")) {
-          this.__customCallbackFns = /* @__PURE__ */ new Map();
-        }
-        for (const attr of this.attributes) {
-          this.#attrSignals[attr.name] = createSignal(attr.value);
-        }
-        this.#render();
-      } catch (error) {
-        const _error = new Error(
-          "Error instantiating element:\nThis usually occurs if you have errors in the function body of your component. Check prior logs for possible causes.\n",
-          { cause: error }
-        );
-        console.error(_error);
-        throw _error;
-      }
-    }
-    connectedCallback() {
-      for (const [attrName, attr] of this.#attributesAsPropertiesMap) {
-        if (!(attrName in this.#attrSignals)) this.#attrSignals[attrName] = createSignal(null);
-        const propName = attr.prop;
-        const [getter] = this.#getPropSignal(propName, { allowUndefined: true });
-        let busy = false;
-        createEffect(() => {
-          if (busy) return;
-          busy = true;
-          const value = getter();
-          if (value === void 0) return;
-          if (value !== null && value !== false) {
-            this.setAttribute(attrName, String(value === true ? "" : value));
-          } else {
-            this.removeAttribute(attrName);
-          }
-          busy = false;
-        });
-      }
-      if (this.#observer !== null) {
-        this.#observer.observe(this, { attributes: true });
-      }
-      for (const fn of this.#connectedFns) {
-        fn();
-      }
-    }
-    disconnectedCallback() {
-      if (this.#observer !== null) {
-        this.#observer.disconnect();
-      }
-      for (const fn of this.#disconnectedFns) {
-        fn();
-      }
-    }
-    #attributesBusy = false;
-    attributeChangedCallback(name, oldValue, newValue) {
-      if (this.#attributesBusy || ANY_BINDING_REGEX.test(newValue ?? "")) return;
-      const [, attrSetter] = this.#attrSignals[name] ?? [];
-      attrSetter?.(newValue);
-      const prop = this.#attributesAsPropertiesMap.get(name);
-      if (prop !== void 0) {
-        const propName = prop.prop;
-        this.#attributesBusy = true;
-        const [, propSetter] = this.#getPropSignal(propName);
-        if (prop.coerce === Boolean) {
-          const bool = newValue !== null && newValue !== "false";
-          const propValue = newValue === null ? null : bool;
-          propSetter(propValue);
-        } else {
-          const propValue = newValue === null ? null : prop.coerce(newValue);
-          propSetter(propValue);
-        }
-        this.#attributesBusy = false;
-      }
-      for (const fn of this.#attributeChangedFns) {
-        fn(name, oldValue, newValue);
-      }
-    }
-    adoptedCallback() {
-      for (const fn of this.#adoptedCallbackFns) {
-        fn();
-      }
-    }
-    formAssociatedCallback() {
-      for (const fn of this.#formAssociatedCallbackFns) {
-        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;
-  let _registry;
-  const elementResult = {
-    define(tagName, options2) {
-      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...`);
-        return this;
-      }
-      registry.define(tagName, CustomElement, options2);
-      _tagName = tagName;
-      return this;
-    },
-    register(registry) {
-      if (_tagName !== void 0 && "eject" in registry && registry.scoped) {
-        console.error("Must call `register()` before `define()` for scoped registries.");
-        return this;
-      }
-      _registry = registry;
-      return this;
-    },
-    eject: () => CustomElement
-  };
-  return elementResult;
-};
-
-// src/registry.ts
-var createRegistry = (args) => {
-  const { scoped = false } = args ?? {};
-  const customElementMap = /* @__PURE__ */ new Map();
-  const elementResultMap = /* @__PURE__ */ new Map();
-  const customElementTags = /* @__PURE__ */ new Set();
-  const nativeRegistry = (() => {
-    if (isServer) return;
-    if (scoped) {
-      try {
-        return new CustomElementRegistry();
-      } catch {
-        console.error(
-          "The scoped custom elements polyfill was not found. Falling back to global registry.\n\nCheck `RegistryResult.scoped` at https://thunderous.dev/docs/registries for more information."
-        );
-      }
-    }
-    return customElements;
-  })();
-  return {
-    __serverCss: /* @__PURE__ */ new Map(),
-    __serverRenderOpts: /* @__PURE__ */ new Map(),
-    define(tagName, ElementResult, options) {
-      const isResult = "eject" in ElementResult;
-      const upperCaseTagName = tagName.toUpperCase();
-      if (customElementTags.has(upperCaseTagName)) {
-        console.warn(`Custom element tag name "${upperCaseTagName}" was already defined. Skipping...`);
-        return this;
-      }
-      if (isResult) {
-        if (elementResultMap.has(ElementResult)) {
-          console.warn(`${upperCaseTagName} was already defined. Skipping...`);
-          return this;
-        }
-      }
-      if (!isServer) {
-        const CustomElement2 = isResult ? ElementResult.eject() : ElementResult;
-        if (customElementMap.has(CustomElement2)) {
-          console.warn(`Custom element class "${CustomElement2.constructor.name}" was already defined. Skipping...`);
-          return this;
-        }
-        customElementMap.set(CustomElement2, upperCaseTagName);
-      }
-      if (isResult) elementResultMap.set(ElementResult, upperCaseTagName);
-      customElementTags.add(upperCaseTagName);
-      if (isServer) {
-        if (isResult) ElementResult.register(this).define(tagName, options);
-        return this;
-      }
-      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-      nativeRegistry?.define(tagName, CustomElement, options);
-      return this;
-    },
-    getTagName: (ElementResult) => {
-      const isResult = "eject" in ElementResult;
-      if (isServer) {
-        if (isResult) return elementResultMap.get(ElementResult);
-        return;
-      }
-      const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-      return customElementMap.get(CustomElement);
-    },
-    getAllTagNames: () => Array.from(customElementTags),
-    eject: () => {
-      if (nativeRegistry === void 0) {
-        const error = new Error("Cannot eject a registry on the server.");
-        console.error(error);
-        throw error;
-      }
-      return nativeRegistry;
-    },
-    scoped
-  };
-};
-export {
-  clientOnlyCallback,
-  createEffect,
-  createRegistry,
-  createSignal,
-  css,
-  customElement,
-  derived,
-  html,
-  insertTemplates,
-  onServerDefine
-};
+export { customElement } from './custom-element';
+export { createRegistry } from './registry';
+export { onServerDefine, insertTemplates, clientOnlyCallback } from './server-side';
+export { createEffect, createSignal, derived } from './signals';
+export { html, css } from './render';