thunderous 2.3.11 → 2.3.13

package/dist/custom-element.js

@@ -0,0 +1,391 @@
+import { DEFAULT_RENDER_OPTIONS } from './constants';
+import { isCSSStyleSheet, renderState } from './render';
+import { isServer, serverDefine } from './server-side';
+import { createEffect, createSignal } from './signals';
+const ANY_BINDING_REGEX = /(\{\{.+:.+\}\})/;
+/**
+ * Create a custom element that can be defined for use in the DOM.
+ * @example
+ * ```ts
+ * const MyElement = customElement(() => {
+ *   return html`<h1>Hello, World!</h1>`;
+ * });
+ * MyElement.define('my-element');
+ * ```
+ */
+export const 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 _tagName;
+        let _registry;
+        const scopedRegistry = (() => {
+            if (shadowRootOptions.registry !== undefined &&
+                'scoped' in shadowRootOptions.registry &&
+                shadowRootOptions.registry.scoped) {
+                return shadowRootOptions.registry;
+            }
+        })();
+        return {
+            define(tagName) {
+                _tagName = tagName;
+                serverDefine({
+                    tagName,
+                    serverRender,
+                    options: allOptions,
+                    scopedRegistry,
+                    parentRegistry: _registry,
+                    elementResult: this,
+                });
+                return this;
+            },
+            register(registry) {
+                if (_tagName !== undefined && 'eject' in registry && registry.scoped) {
+                    console.error('Must call `register()` before `define()` for scoped registries.');
+                    return this;
+                }
+                if ('eject' in registry) {
+                    _registry = 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();
+    // must set observedAttributes prior to defining the class
+    const observedAttributesSet = new Set(_observedAttributes);
+    const attributesAsPropertiesMap = 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])/g, (_, letter) => letter.toUpperCase()).replace(/(-|_)/g, ''),
+            coerce,
+            value: null,
+        });
+    }
+    const observedAttributes = Array.from(observedAttributesSet);
+    class CustomElement extends HTMLElement {
+        #attributesAsPropertiesMap = new Map(attributesAsPropertiesMap);
+        #attrSignals = {};
+        #propSignals = {};
+        #attributeChangedFns = new Set();
+        #connectedFns = new Set();
+        #disconnectedFns = new Set();
+        #adoptedCallbackFns = new Set();
+        #formAssociatedCallbackFns = new Set();
+        #formDisabledCallbackFns = new Set();
+        #formResetCallbackFns = new Set();
+        #formStateRestoreCallbackFns = new Set();
+        #clientOnlyCallbackFns = new Set();
+        #shadowRoot = attachShadow ? this.attachShadow(shadowRootOptions) : null;
+        #internals = this.attachInternals();
+        #observer = options?.observedAttributes !== undefined
+            ? 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, options) => {
+                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, options);
+            };
+            const descriptor = Object.getOwnPropertyDescriptor(this, prop);
+            if (descriptor === undefined) {
+                Object.defineProperty(this, prop, {
+                    get: _getter,
+                    set: _setter,
+                    configurable: false,
+                    enumerable: true,
+                });
+            }
+            const setter = (newValue, options) => {
+                // @ts-expect-error // TODO: look into this
+                this[prop] = newValue;
+                _setter(newValue, options);
+            };
+            const getter = ((options) => {
+                const value = _getter(options);
+                if (value === undefined && !allowUndefined) {
+                    const error = new Error(`Error accessing property: "${prop}"\nYou must set an initial value before calling a property signal's getter.\n`);
+                    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 = 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 === undefined)
+                        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 !== undefined) {
+                const propName = prop.prop;
+                this.#attributesBusy = true; // prevent infinite loop
+                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, options) {
+            const registry = _registry ?? customElements;
+            const nativeRegistry = 'eject' in registry ? registry.eject() : registry;
+            if (nativeRegistry.get(tagName) !== undefined) {
+                console.warn(`Custom element "${tagName}" was already defined. Skipping...`);
+                return this;
+            }
+            registry.define(tagName, CustomElement, options);
+            _tagName = tagName;
+            return this;
+        },
+        register(registry) {
+            if (_tagName !== undefined && '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;
+};

package/dist/index.cjs

@@ -291,6 +291,7 @@ var renderState = {
   signalMap: /* @__PURE__ */ new Map(),
   callbackMap: /* @__PURE__ */ new Map(),
   fragmentMap: /* @__PURE__ */ new Map(),
+  propertyMap: /* @__PURE__ */ new Map(),
   registry: typeof customElements !== "undefined" ? customElements : {}
 };
 var logPropertyWarning = (propName, element) => {
@@ -455,14 +456,22 @@ var evaluateBindings = (element, fragment) => {
                 newText += text;
               }
             }
-            if (hasNull && newText === "null" || attrName.startsWith("prop:")) {
+            if (hasNull && newText === "null" || attrName.startsWith("prop-id:")) {
               if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
             } else {
               if (newText !== prevText) child.setAttribute(attrName, newText);
             }
-            if (attrName.startsWith("prop:")) {
+            if (attrName.startsWith("prop-id:")) {
               if (child.hasAttribute(attrName)) child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:SIGNAL; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
               const newValue = hasNull && newText === "null" ? null : newText;
               if (!(propName in child)) logPropertyWarning(propName, child);
               child[propName] = signal !== void 0 ? signal() : newValue;
@@ -488,19 +497,33 @@ var evaluateBindings = (element, fragment) => {
                 child.__customCallbackFns.set(uniqueKey, callback);
               }
             }
-            if (uniqueKey !== "" && !attrName.startsWith("prop:")) {
+            if (uniqueKey !== "" && !attrName.startsWith("prop-id:")) {
               child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
-            } else if (attrName.startsWith("prop:")) {
+            } else if (attrName.startsWith("prop-id:")) {
               child.removeAttribute(attrName);
-              const propName = attrName.replace("prop:", "");
-              if (!(propName in child)) logPropertyWarning(propName, child);
+              const propId = attrName.replace("prop-id:", "");
+              const propName = renderState.propertyMap.get(propId);
+              if (propName === void 0) {
+                console.error(
+                  `BRANCH:CALLBACK; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+                  child
+                );
+                return;
+              }
               child[propName] = child.__customCallbackFns.get(uniqueKey);
             }
           });
-        } else if (attrName.startsWith("prop:")) {
+        } else if (attrName.startsWith("prop-id:")) {
           child.removeAttribute(attrName);
-          const propName = attrName.replace("prop:", "");
-          if (!(propName in child)) logPropertyWarning(propName, child);
+          const propId = attrName.replace("prop-id:", "");
+          const propName = renderState.propertyMap.get(propId);
+          if (propName === void 0) {
+            console.error(
+              `BRANCH:PROP; Property ID "${propId}" does not exist in the property map. This is likely a problem with Thunderous. Report a bug if you see this message. https://github.com/Thunder-Solutions/Thunderous/issues`,
+              child
+            );
+            return;
+          }
           child[propName] = attr.value;
         }
       }
@@ -509,7 +532,7 @@ var evaluateBindings = (element, fragment) => {
   }
 };
 var html = (strings, ...values) => {
-  const innerHTML = strings.reduce((innerHTML2, str, i) => {
+  let innerHTML = strings.reduce((innerHTML2, str, i) => {
     let value = values[i] ?? "";
     if (Array.isArray(value)) {
       value = value.map((item) => processValue(item)).join("");
@@ -520,6 +543,16 @@ var html = (strings, ...values) => {
     return innerHTML2;
   }, "");
   if (isServer) return innerHTML;
+  const props = innerHTML.match(/prop:([^=]+)/g);
+  if (props !== null) {
+    for (const prop of props) {
+      const name = prop.split(":")[1].trim();
+      const id = crypto.randomUUID();
+      const newProp = `prop-id:${id}`;
+      renderState.propertyMap.set(id, name);
+      innerHTML = innerHTML.replace(`prop:${name}`, newProp);
+    }
+  }
   const template = document.createElement("template");
   template.innerHTML = innerHTML;
   const fragment = renderState.currentShadowRoot?.importNode?.(template.content, true) ?? document.importNode(template.content, true);
@@ -633,7 +666,7 @@ var customElement = (render, options) => {
     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()),
+      prop: attrName.replace(/(?<=-|_)([a-z])/g, (_, letter) => letter.toUpperCase()).replace(/(-|_)/g, ""),
       coerce,
       value: null
     });
@@ -887,8 +920,14 @@ You must set an initial value before calling a property signal's getter.
         const propName = prop.prop;
         this.#attributesBusy = true;
         const [, propSetter] = this.#getPropSignal(propName);
-        const propValue = newValue === null ? null : prop.coerce(newValue);
-        propSetter(propValue);
+        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) {