thunderous 1.1.0 → 2.0.0

package/dist/index.js

@@ -1,439 +1,3 @@
-// vendor/@webcomponents/scoped-custom-element-registry/src/scoped-custom-element-registry.js
-if (typeof window !== "undefined") {
-  if (!ShadowRoot.prototype.createElement) {
-    const NativeHTMLElement = window.HTMLElement;
-    const nativeDefine = window.customElements.define;
-    const nativeGet = window.customElements.get;
-    const nativeRegistry = window.customElements;
-    const definitionForElement = /* @__PURE__ */ new WeakMap();
-    const pendingRegistryForElement = /* @__PURE__ */ new WeakMap();
-    const globalDefinitionForConstructor = /* @__PURE__ */ new WeakMap();
-    const scopeForElement = /* @__PURE__ */ new WeakMap();
-    window.CustomElementRegistry = class {
-      constructor() {
-        this._definitionsByTag = /* @__PURE__ */ new Map();
-        this._definitionsByClass = /* @__PURE__ */ new Map();
-        this._whenDefinedPromises = /* @__PURE__ */ new Map();
-        this._awaitingUpgrade = /* @__PURE__ */ new Map();
-      }
-      define(tagName, elementClass) {
-        tagName = tagName.toLowerCase();
-        if (this._getDefinition(tagName) !== void 0) {
-          throw new DOMException(
-            `Failed to execute 'define' on 'CustomElementRegistry': the name "${tagName}" has already been used with this registry`
-          );
-        }
-        if (this._definitionsByClass.get(elementClass) !== void 0) {
-          throw new DOMException(
-            `Failed to execute 'define' on 'CustomElementRegistry': this constructor has already been used with this registry`
-          );
-        }
-        const attributeChangedCallback = elementClass.prototype.attributeChangedCallback;
-        const observedAttributes = new Set(elementClass.observedAttributes || []);
-        patchAttributes(
-          elementClass,
-          observedAttributes,
-          attributeChangedCallback
-        );
-        const definition = {
-          elementClass,
-          connectedCallback: elementClass.prototype.connectedCallback,
-          disconnectedCallback: elementClass.prototype.disconnectedCallback,
-          adoptedCallback: elementClass.prototype.adoptedCallback,
-          attributeChangedCallback,
-          "formAssociated": elementClass["formAssociated"],
-          "formAssociatedCallback": elementClass.prototype["formAssociatedCallback"],
-          "formDisabledCallback": elementClass.prototype["formDisabledCallback"],
-          "formResetCallback": elementClass.prototype["formResetCallback"],
-          "formStateRestoreCallback": elementClass.prototype["formStateRestoreCallback"],
-          observedAttributes
-        };
-        this._definitionsByTag.set(tagName, definition);
-        this._definitionsByClass.set(elementClass, definition);
-        let standInClass = nativeGet.call(nativeRegistry, tagName);
-        if (!standInClass) {
-          standInClass = createStandInElement(tagName);
-          nativeDefine.call(nativeRegistry, tagName, standInClass);
-        }
-        if (this === window.customElements) {
-          globalDefinitionForConstructor.set(elementClass, definition);
-          definition.standInClass = standInClass;
-        }
-        const awaiting = this._awaitingUpgrade.get(tagName);
-        if (awaiting) {
-          this._awaitingUpgrade.delete(tagName);
-          for (const element of awaiting) {
-            pendingRegistryForElement.delete(element);
-            customize(element, definition, true);
-          }
-        }
-        const info = this._whenDefinedPromises.get(tagName);
-        if (info !== void 0) {
-          info.resolve(elementClass);
-          this._whenDefinedPromises.delete(tagName);
-        }
-        return elementClass;
-      }
-      upgrade() {
-        creationContext.push(this);
-        nativeRegistry.upgrade.apply(nativeRegistry, arguments);
-        creationContext.pop();
-      }
-      get(tagName) {
-        const definition = this._definitionsByTag.get(tagName);
-        return definition?.elementClass;
-      }
-      _getDefinition(tagName) {
-        return this._definitionsByTag.get(tagName);
-      }
-      whenDefined(tagName) {
-        const definition = this._getDefinition(tagName);
-        if (definition !== void 0) {
-          return Promise.resolve(definition.elementClass);
-        }
-        let info = this._whenDefinedPromises.get(tagName);
-        if (info === void 0) {
-          info = {};
-          info.promise = new Promise((r) => info.resolve = r);
-          this._whenDefinedPromises.set(tagName, info);
-        }
-        return info.promise;
-      }
-      _upgradeWhenDefined(element, tagName, shouldUpgrade) {
-        let awaiting = this._awaitingUpgrade.get(tagName);
-        if (!awaiting) {
-          this._awaitingUpgrade.set(tagName, awaiting = /* @__PURE__ */ new Set());
-        }
-        if (shouldUpgrade) {
-          awaiting.add(element);
-        } else {
-          awaiting.delete(element);
-        }
-      }
-    };
-    let upgradingInstance;
-    window.HTMLElement = function HTMLElement2() {
-      let instance = upgradingInstance;
-      if (instance) {
-        upgradingInstance = void 0;
-        return instance;
-      }
-      const definition = globalDefinitionForConstructor.get(this.constructor);
-      if (!definition) {
-        throw new TypeError(
-          "Illegal constructor (custom element class must be registered with global customElements registry to be newable)"
-        );
-      }
-      instance = Reflect.construct(
-        NativeHTMLElement,
-        [],
-        definition.standInClass
-      );
-      Object.setPrototypeOf(instance, this.constructor.prototype);
-      definitionForElement.set(instance, definition);
-      return instance;
-    };
-    window.HTMLElement.prototype = NativeHTMLElement.prototype;
-    const isValidScope = (node) => node === document || node instanceof ShadowRoot;
-    const registryForNode = (node) => {
-      let scope = node.getRootNode();
-      if (!isValidScope(scope)) {
-        const context = creationContext[creationContext.length - 1];
-        if (context instanceof CustomElementRegistry) {
-          return context;
-        }
-        scope = context.getRootNode();
-        if (!isValidScope(scope)) {
-          scope = scopeForElement.get(scope)?.getRootNode() || document;
-        }
-      }
-      return scope.customElements;
-    };
-    const createStandInElement = (tagName) => {
-      return class ScopedCustomElementBase {
-        static get ["formAssociated"]() {
-          return true;
-        }
-        constructor() {
-          const instance = Reflect.construct(
-            NativeHTMLElement,
-            [],
-            this.constructor
-          );
-          Object.setPrototypeOf(instance, HTMLElement.prototype);
-          const registry = registryForNode(instance) || window.customElements;
-          const definition = registry._getDefinition(tagName);
-          if (definition) {
-            customize(instance, definition);
-          } else {
-            pendingRegistryForElement.set(instance, registry);
-          }
-          return instance;
-        }
-        connectedCallback() {
-          const definition = definitionForElement.get(this);
-          if (definition) {
-            definition.connectedCallback && definition.connectedCallback.apply(this, arguments);
-          } else {
-            pendingRegistryForElement.get(this)._upgradeWhenDefined(this, tagName, true);
-          }
-        }
-        disconnectedCallback() {
-          const definition = definitionForElement.get(this);
-          if (definition) {
-            definition.disconnectedCallback && definition.disconnectedCallback.apply(this, arguments);
-          } else {
-            pendingRegistryForElement.get(this)._upgradeWhenDefined(this, tagName, false);
-          }
-        }
-        adoptedCallback() {
-          const definition = definitionForElement.get(this);
-          definition?.adoptedCallback?.apply(this, arguments);
-        }
-        // Form-associated custom elements lifecycle methods
-        ["formAssociatedCallback"]() {
-          const definition = definitionForElement.get(this);
-          if (definition && definition["formAssociated"]) {
-            definition?.["formAssociatedCallback"]?.apply(this, arguments);
-          }
-        }
-        ["formDisabledCallback"]() {
-          const definition = definitionForElement.get(this);
-          if (definition?.["formAssociated"]) {
-            definition?.["formDisabledCallback"]?.apply(this, arguments);
-          }
-        }
-        ["formResetCallback"]() {
-          const definition = definitionForElement.get(this);
-          if (definition?.["formAssociated"]) {
-            definition?.["formResetCallback"]?.apply(this, arguments);
-          }
-        }
-        ["formStateRestoreCallback"]() {
-          const definition = definitionForElement.get(this);
-          if (definition?.["formAssociated"]) {
-            definition?.["formStateRestoreCallback"]?.apply(this, arguments);
-          }
-        }
-        // no attributeChangedCallback or observedAttributes since these
-        // are simulated via setAttribute/removeAttribute patches
-      };
-    };
-    const patchAttributes = (elementClass, observedAttributes, attributeChangedCallback) => {
-      if (observedAttributes.size === 0 || attributeChangedCallback === void 0) {
-        return;
-      }
-      const setAttribute = elementClass.prototype.setAttribute;
-      if (setAttribute) {
-        elementClass.prototype.setAttribute = function(n, value) {
-          const name = n.toLowerCase();
-          if (observedAttributes.has(name)) {
-            const old = this.getAttribute(name);
-            setAttribute.call(this, name, value);
-            attributeChangedCallback.call(this, name, old, value);
-          } else {
-            setAttribute.call(this, name, value);
-          }
-        };
-      }
-      const removeAttribute = elementClass.prototype.removeAttribute;
-      if (removeAttribute) {
-        elementClass.prototype.removeAttribute = function(n) {
-          const name = n.toLowerCase();
-          if (observedAttributes.has(name)) {
-            const old = this.getAttribute(name);
-            removeAttribute.call(this, name);
-            attributeChangedCallback.call(this, name, old, null);
-          } else {
-            removeAttribute.call(this, name);
-          }
-        };
-      }
-      const toggleAttribute = elementClass.prototype.toggleAttribute;
-      if (toggleAttribute) {
-        elementClass.prototype.toggleAttribute = function(n, force) {
-          const name = n.toLowerCase();
-          if (observedAttributes.has(name)) {
-            const old = this.getAttribute(name);
-            toggleAttribute.call(this, name, force);
-            const newValue = this.getAttribute(name);
-            attributeChangedCallback.call(this, name, old, newValue);
-          } else {
-            toggleAttribute.call(this, name, force);
-          }
-        };
-      }
-    };
-    const patchHTMLElement = (elementClass) => {
-      const parentClass = Object.getPrototypeOf(elementClass);
-      if (parentClass !== window.HTMLElement) {
-        if (parentClass === NativeHTMLElement) {
-          return Object.setPrototypeOf(elementClass, window.HTMLElement);
-        }
-        return patchHTMLElement(parentClass);
-      }
-    };
-    const customize = (instance, definition, isUpgrade = false) => {
-      Object.setPrototypeOf(instance, definition.elementClass.prototype);
-      definitionForElement.set(instance, definition);
-      upgradingInstance = instance;
-      try {
-        new definition.elementClass();
-      } catch (_) {
-        patchHTMLElement(definition.elementClass);
-        new definition.elementClass();
-      }
-      if (definition.attributeChangedCallback) {
-        definition.observedAttributes.forEach((attr) => {
-          if (instance.hasAttribute(attr)) {
-            definition.attributeChangedCallback.call(
-              instance,
-              attr,
-              null,
-              instance.getAttribute(attr)
-            );
-          }
-        });
-      }
-      if (isUpgrade && definition.connectedCallback && instance.isConnected) {
-        definition.connectedCallback.call(instance);
-      }
-    };
-    const nativeAttachShadow = Element.prototype.attachShadow;
-    Element.prototype.attachShadow = function(init) {
-      const shadowRoot = nativeAttachShadow.apply(this, arguments);
-      if (init.customElements) {
-        shadowRoot.customElements = init.customElements;
-      }
-      return shadowRoot;
-    };
-    let creationContext = [document];
-    const installScopedCreationMethod = (ctor, method, from = void 0) => {
-      const native = (from ? Object.getPrototypeOf(from) : ctor.prototype)[method];
-      ctor.prototype[method] = function() {
-        creationContext.push(this);
-        const ret = native.apply(from || this, arguments);
-        if (ret !== void 0) {
-          scopeForElement.set(ret, this);
-        }
-        creationContext.pop();
-        return ret;
-      };
-    };
-    installScopedCreationMethod(ShadowRoot, "createElement", document);
-    installScopedCreationMethod(ShadowRoot, "importNode", document);
-    installScopedCreationMethod(Element, "insertAdjacentHTML");
-    installScopedCreationMethod(Node, "appendChild");
-    installScopedCreationMethod(Element, "append");
-    const installScopedCreationSetter = (ctor, name) => {
-      const descriptor = Object.getOwnPropertyDescriptor(ctor.prototype, name);
-      Object.defineProperty(ctor.prototype, name, {
-        ...descriptor,
-        set(value) {
-          creationContext.push(this);
-          descriptor.set.call(this, value);
-          creationContext.pop();
-        }
-      });
-    };
-    installScopedCreationSetter(Element, "innerHTML");
-    installScopedCreationSetter(ShadowRoot, "innerHTML");
-    Object.defineProperty(window, "customElements", {
-      value: new CustomElementRegistry(),
-      configurable: true,
-      writable: true
-    });
-    if (!!window["ElementInternals"] && !!window["ElementInternals"].prototype["setFormValue"]) {
-      const internalsToHostMap = /* @__PURE__ */ new WeakMap();
-      const attachInternals = HTMLElement.prototype["attachInternals"];
-      const methods = [
-        "setFormValue",
-        "setValidity",
-        "checkValidity",
-        "reportValidity"
-      ];
-      HTMLElement.prototype["attachInternals"] = function(...args) {
-        const internals = attachInternals.call(this, ...args);
-        internalsToHostMap.set(internals, this);
-        return internals;
-      };
-      methods.forEach((method) => {
-        const proto = window["ElementInternals"].prototype;
-        const originalMethod = proto[method];
-        proto[method] = function(...args) {
-          const host = internalsToHostMap.get(this);
-          const definition = definitionForElement.get(host);
-          if (definition["formAssociated"] === true) {
-            return originalMethod?.call(this, ...args);
-          } else {
-            throw new DOMException(
-              `Failed to execute ${originalMethod} on 'ElementInternals': The target element is not a form-associated custom element.`
-            );
-          }
-        };
-      });
-      class RadioNodeList extends Array {
-        constructor(elements) {
-          super(...elements);
-          this._elements = elements;
-        }
-        get ["value"]() {
-          return this._elements.find((element) => element["checked"] === true)?.value || "";
-        }
-      }
-      class HTMLFormControlsCollection {
-        constructor(elements) {
-          const entries = /* @__PURE__ */ new Map();
-          elements.forEach((element, index) => {
-            const name = element.getAttribute("name");
-            const nameReference = entries.get(name) || [];
-            this[+index] = element;
-            nameReference.push(element);
-            entries.set(name, nameReference);
-          });
-          this["length"] = elements.length;
-          entries.forEach((value, key) => {
-            if (!value) return;
-            if (value.length === 1) {
-              this[key] = value[0];
-            } else {
-              this[key] = new RadioNodeList(value);
-            }
-          });
-        }
-        ["namedItem"](key) {
-          return this[key];
-        }
-      }
-      const formElementsDescriptor = Object.getOwnPropertyDescriptor(
-        HTMLFormElement.prototype,
-        "elements"
-      );
-      Object.defineProperty(HTMLFormElement.prototype, "elements", {
-        get: function() {
-          const nativeElements = formElementsDescriptor.get.call(this, []);
-          const include = [];
-          for (const element of nativeElements) {
-            const definition = definitionForElement.get(element);
-            if (!definition || definition["formAssociated"] === true) {
-              include.push(element);
-            }
-          }
-          return new HTMLFormControlsCollection(include);
-        }
-      });
-    }
-  }
-  class TrackableCustomElementRegistry extends window.CustomElementRegistry {
-    __tagNames = /* @__PURE__ */ new Set();
-    define(tagName, constructor, options) {
-      super.define(tagName, constructor, options);
-      this.__tagNames.add(tagName);
-    }
-  }
-  window.CustomElementRegistry = TrackableCustomElementRegistry;
-}
-
 // src/constants.ts
 var DEFAULT_RENDER_OPTIONS = {
   formAssociated: false,
@@ -476,6 +40,7 @@ var createSignal = (initVal, options) => {
     }
     return value;
   };
+  getter.getter = true;
   const setter = (newValue, setterOptions) => {
     const isObject = typeof newValue === "object" && newValue !== null;
     if (!isObject && value === newValue) return;
@@ -612,7 +177,12 @@ var getServerRenderArgs = (tagName, registry) => ({
   formStateRestoreCallback: NOOP,
   formAssociatedCallback: NOOP,
   clientOnlyCallback: NOOP,
-  customCallback: () => `{{callback:unavailable-on-server}}`,
+  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: {},
@@ -666,20 +236,19 @@ var clientOnlyCallback = (fn) => {
 };
 
 // src/render.ts
+var renderState = {
+  currentShadowRoot: null
+};
 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);
+  const template = document.createElement("template");
+  template.innerHTML = htmlStr;
+  const fragment = renderState.currentShadowRoot === null ? template.content : renderState.currentShadowRoot.importNode(template.content, true);
+  return fragment;
 };
 var logValueError = (value) => {
   console.error(
@@ -733,13 +302,14 @@ var getNewNode = (value, parent) => {
 var html = (strings, ...values) => {
   let innerHTML = "";
   const signalMap = /* @__PURE__ */ new Map();
+  const callbackMap = /* @__PURE__ */ new Map();
   const processValue = (value) => {
     if (!isServer && value instanceof DocumentFragment) {
       const tempDiv = document.createElement("div");
       tempDiv.append(value.cloneNode(true));
       return tempDiv.innerHTML;
     }
-    if (typeof value === "function") {
+    if (typeof value === "function" && "getter" in value && value.getter === true) {
       const getter = value;
       const uniqueKey = crypto.randomUUID();
       signalMap.set(uniqueKey, getter);
@@ -749,6 +319,11 @@ var html = (strings, ...values) => {
       }
       return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
     }
+    if (typeof value === "function") {
+      const uniqueKey = crypto.randomUUID();
+      callbackMap.set(uniqueKey, value);
+      return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
+    }
     if (typeof value === "object" && value !== null) {
       logValueError(value);
       return "";
@@ -769,6 +344,7 @@ var html = (strings, ...values) => {
   }
   const fragment = parseFragment(innerHTML);
   const callbackBindingRegex = /(\{\{callback:.+\}\})/;
+  const legacyCallbackBindingRegex = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
   const signalBindingRegex = /(\{\{signal:.+\}\})/;
   const parseChildren = (element) => {
     for (const child of element.childNodes) {
@@ -831,14 +407,29 @@ var html = (strings, ...values) => {
                 child.setAttribute(attr.name, newText);
               }
             });
-          } else if (callbackBindingRegex.test(attr.value)) {
+          } else if (legacyCallbackBindingRegex.test(attr.value)) {
             const getRootNode = child.getRootNode.bind(child);
             child.getRootNode = () => {
               const rootNode = getRootNode();
               return rootNode instanceof ShadowRoot ? rootNode : fragment;
             };
-            const uniqueKey = attr.value.replace(/\{\{callback:(.+)\}\}/, "$1");
-            child.setAttribute(attr.name, `this.getRootNode().host.__customCallbackFns.get('${uniqueKey}')(event)`);
+          } else if (callbackBindingRegex.test(attr.value)) {
+            const textList = attr.value.split(callbackBindingRegex);
+            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 ? callbackMap.get(uniqueKey) : void 0;
+                if (callback !== void 0) {
+                  child.__customCallbackFns.set(uniqueKey, callback);
+                }
+              }
+              if (uniqueKey !== "") {
+                child.setAttribute(attr.name, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+              }
+            });
           }
         }
         parseChildren(child);
@@ -989,6 +580,7 @@ var customElement = (render, options) => {
     });
     #render() {
       const root = this.#shadowRoot ?? this;
+      renderState.currentShadowRoot = this.#shadowRoot;
       const fragment = render({
         elementRef: this,
         root,
@@ -1002,10 +594,15 @@ var customElement = (render, options) => {
         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 `{{callback:${key}}}`;
+          return `this.getRootNode().host.__customCallbackFns.get('${key}')(event)`;
         },
         attrSignals: new Proxy(
           {},
@@ -1043,6 +640,7 @@ You must set an initial value before calling a property signal's getter.
                 );
               return value;
             };
+            getter.getter = true;
             return [getter, setter];
           },
           set: () => {
@@ -1085,25 +683,11 @@ You must set an initial value before calling a property signal's getter.
         }
       });
       fragment.host = this;
-      const registry = shadowRootOptions.registry instanceof CustomElementRegistry ? shadowRootOptions.registry : shadowRootOptions.registry?.eject();
-      const tempContainer = document.createElement("div");
-      tempContainer.append(fragment.cloneNode(true));
-      const fragmentContent = tempContainer.innerHTML;
-      root.innerHTML = fragmentContent;
-      if (registry?.__tagNames !== void 0) {
-        for (const tagName of registry.__tagNames) {
-          const upgradedElements = root.querySelectorAll(tagName);
-          const nonUpgradedElements = fragment.querySelectorAll(tagName);
-          upgradedElements.forEach((upgradedElement, index) => {
-            const nonUpgradedElement = nonUpgradedElements[index];
-            nonUpgradedElement.replaceWith(upgradedElement);
-          });
-        }
-      }
       for (const fn of this.#clientOnlyCallbackFns) {
         fn();
       }
-      setInnerHTML(root, fragment);
+      clearHTML(root);
+      root.append(fragment);
     }
     static get formAssociated() {
       return formAssociated;
@@ -1302,16 +886,3 @@ export {
   insertTemplates,
   onServerDefine
 };
-/**
- * @license
- * Copyright (c) 2020 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "thunderous",
-	"version": "1.1.0",
+	"version": "2.0.0",
 	"description": "",
 	"type": "module",
 	"main": "./dist/index.cjs",
@@ -53,5 +53,13 @@
 		"tsup": "^8.3.0",
 		"tsx": "^4.19.2",
 		"typescript": "^5.7.2"
+	},
+	"peerDependencies": {
+		"@webcomponents/scoped-custom-element-registry": "^0.0.10"
+	},
+	"peerDependenciesMeta": {
+		"@webcomponents/scoped-custom-element-registry": {
+			"optional": true
+		}
 	}
 }