thunderous 2.4.1 → 2.4.2

package/dist/custom-element.js

@@ -1,391 +0,0 @@
-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/registry.js

@@ -1,95 +0,0 @@
-import { isServer } from './server-side';
-/**
- * Create a registry for custom elements.
- *
- * This allows you to delegate custom element definitions to the consumer of your library,
- * by using their associated classes to look up tag names dynamically.
- *
- * This can be useful when you need to select a custom element whose tag name is variable.
- * @example
- * ```ts
- * const registry = createRegistry();
- * registry.register('my-element', MyElement);
- * const tagName = registry.getTagName(MyElement);
- * console.log(tagName); // 'MY-ELEMENT'
- * ```
- */
-export const createRegistry = (args) => {
-    const { scoped = false } = args ?? {};
-    const customElementMap = new Map();
-    const elementResultMap = new Map();
-    const customElementTags = 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: new Map(),
-        __serverRenderOpts: 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 CustomElement = isResult ? ElementResult.eject() : ElementResult;
-                if (customElementMap.has(CustomElement)) {
-                    console.warn(`Custom element class "${CustomElement.constructor.name}" was already defined. Skipping...`);
-                    return this;
-                }
-                customElementMap.set(CustomElement, upperCaseTagName);
-            }
-            if (isResult)
-                elementResultMap.set(ElementResult, upperCaseTagName);
-            customElementTags.add(upperCaseTagName);
-            if (isServer) {
-                // offload the server definition to the element, as it's responsible for scoped registries and rendering.
-                if (isResult)
-                    ElementResult.register(this).define(tagName, options);
-                return this;
-            }
-            // define the custom element on the client
-            const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-            nativeRegistry?.define(tagName, CustomElement, options);
-            return this;
-        },
-        getTagName: (ElementResult) => {
-            const isResult = 'eject' in ElementResult;
-            if (isServer) {
-                // only ElementResult types are supported on the server
-                if (isResult)
-                    return elementResultMap.get(ElementResult);
-                return;
-            }
-            const CustomElement = isResult ? ElementResult.eject() : ElementResult;
-            return customElementMap.get(CustomElement);
-        },
-        getAllTagNames: () => Array.from(customElementTags),
-        eject: () => {
-            if (nativeRegistry === undefined) {
-                const error = new Error('Cannot eject a registry on the server.');
-                console.error(error);
-                throw error;
-            }
-            return nativeRegistry;
-        },
-        scoped,
-    };
-};