thunderous 2.3.13 → 2.4.2

package/dist/__test__/signals.test.js

@@ -1,247 +0,0 @@
-import { createEffect, createSignal, derived } from '../signals';
-import { describe, it, beforeEach } from 'node:test';
-import assert from 'assert';
-import { NOOP } from '../utilities';
-await describe('createSignal', async () => {
-    await it('sets the initial value', () => {
-        const [count] = createSignal(0);
-        assert.strictEqual(count(), 0);
-    });
-    await it('sets a new value', () => {
-        const [count, setCount] = createSignal(0);
-        setCount(1);
-        assert.strictEqual(count(), 1);
-    });
-    await it('does not recalculate for equal primitives', () => {
-        const [count, setCount] = createSignal(0);
-        let runCount = 0;
-        createEffect(() => {
-            count();
-            runCount++;
-        });
-        setCount(0);
-        assert.strictEqual(runCount, 1);
-    });
-    await it('does not recalculate for complex data', () => {
-        const [count, setCount] = createSignal({ value: 0 });
-        let runCount = 0;
-        createEffect(() => {
-            count();
-            runCount++;
-        });
-        setCount({ value: 0 });
-        assert.strictEqual(runCount, 1);
-    });
-    await it('runs in debug mode', async (testContext) => {
-        await it('adds the label when the signal is created with one', async () => {
-            testContext.mock.method(console, 'log', NOOP);
-            const logMock = console.log.mock;
-            beforeEach(() => logMock.resetCalls());
-            const [count, setCount] = createSignal(0, { debugMode: true, label: 'count' });
-            await it('does not log when the signal is initially created', () => {
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('logs when the signal getter is run', async () => {
-                count();
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal retrieved:',
-                    { value: 0, subscribers: new Set(), label: '(count)' },
-                ]);
-            });
-            await it('logs when the signal setter is run', async () => {
-                setCount(1);
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal set:',
-                    { oldValue: 0, newValue: 1, subscribers: new Set(), label: '(count)' },
-                ]);
-            });
-        });
-        await it('uses "anonymous signal" when the signal is created without a label', async () => {
-            testContext.mock.method(console, 'log', NOOP);
-            const logMock = console.log.mock;
-            beforeEach(() => logMock.resetCalls());
-            const [count, setCount] = createSignal(0, { debugMode: true });
-            await it('does not log when the signal is initially created', () => {
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('logs when the signal getter is run', () => {
-                count();
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal retrieved:',
-                    { value: 0, subscribers: new Set(), label: 'anonymous signal' },
-                ]);
-            });
-            await it('logs when the signal setter is run', () => {
-                setCount(1);
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal set:',
-                    { oldValue: 0, newValue: 1, subscribers: new Set(), label: 'anonymous signal' },
-                ]);
-            });
-        });
-        await it('does not log if debugMode is false', async () => {
-            testContext.mock.method(console, 'log', NOOP);
-            const logMock = console.log.mock;
-            beforeEach(() => logMock.resetCalls());
-            const [count, setCount] = createSignal(0, { debugMode: false, label: 'count' });
-            await it('does not log when the signal is initially created', () => {
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('does not log when the signal getter is run', () => {
-                count();
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('does not log when the signal setter is run', () => {
-                setCount(1);
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-        });
-        await it('adds getter and setter labels in addition to the overall signal label', async () => {
-            testContext.mock.method(console, 'log', NOOP);
-            const logMock = console.log.mock;
-            beforeEach(() => logMock.resetCalls());
-            const [count, setCount] = createSignal(0, { debugMode: true, label: 'count' });
-            await it('does not log when the signal is initially created', () => {
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('logs when the signal getter is run with a label', () => {
-                count({ debugMode: true, label: 'getter' });
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal retrieved:',
-                    { value: 0, subscribers: new Set(), label: '(count) getter' },
-                ]);
-            });
-            await it('logs when the signal setter is run with a label', () => {
-                setCount(1, { debugMode: true, label: 'setter' });
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal set:',
-                    { oldValue: 0, newValue: 1, subscribers: new Set(), label: '(count) setter' },
-                ]);
-            });
-        });
-        await it('adds getter and setter labels instead of the overall signal label', async () => {
-            testContext.mock.method(console, 'log', NOOP);
-            const logMock = console.log.mock;
-            beforeEach(() => logMock.resetCalls());
-            const [count, setCount] = createSignal(0);
-            await it('does not log when the signal is initially created', () => {
-                assert.strictEqual(logMock.callCount(), 0);
-            });
-            await it('logs when the signal getter is run with a label', () => {
-                count({ debugMode: true, label: 'getter' });
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal retrieved:',
-                    { value: 0, subscribers: new Set(), label: 'getter' },
-                ]);
-            });
-            await it('logs when the signal setter is run with a label', () => {
-                setCount(1, { debugMode: true, label: 'setter' });
-                assert.strictEqual(logMock.callCount(), 1);
-                assert.deepStrictEqual(logMock.calls[0].arguments, [
-                    'Signal set:',
-                    { oldValue: 0, newValue: 1, subscribers: new Set(), label: 'setter' },
-                ]);
-            });
-        });
-        await it('handles errors in subscribers', async (testContext) => {
-            testContext.mock.method(console, 'error', NOOP);
-            const errorMock = console.error.mock;
-            const [count, setCount] = createSignal(0);
-            const error = new Error('Test error');
-            createEffect(() => {
-                if (count() === 1) {
-                    throw error;
-                }
-            });
-            setCount(1);
-            assert.strictEqual(errorMock.callCount(), 1);
-            assert.deepStrictEqual(errorMock.calls[0].arguments, [
-                'Error in subscriber:',
-                { error, oldValue: 0, newValue: 1, fn: errorMock.calls[0].arguments[1].fn },
-            ]);
-        });
-    });
-});
-await describe('createEffect', async () => {
-    await it('runs immediately', () => {
-        const [count] = createSignal(0);
-        let result;
-        createEffect(() => {
-            result = count();
-        });
-        assert.strictEqual(result, 0);
-    });
-    await it('runs when signals change', () => {
-        const [count, setCount] = createSignal(0);
-        let result;
-        createEffect(() => {
-            result = count();
-        });
-        setCount(1);
-        assert.strictEqual(result, 1);
-    });
-    await it('handles multiple subscribers', () => {
-        const [count, setCount] = createSignal(0);
-        let result1;
-        let result2;
-        createEffect(() => {
-            result1 = count();
-        });
-        createEffect(() => {
-            result2 = count();
-        });
-        setCount(1);
-        assert.strictEqual(result1, 1);
-        assert.strictEqual(result2, 1);
-    });
-    await it('handles errors in effects', (testContext) => {
-        testContext.mock.method(console, 'error', NOOP);
-        const errorMock = console.error.mock;
-        const error = new Error('Test error');
-        createEffect(() => {
-            throw error;
-        });
-        assert.strictEqual(errorMock.callCount(), 1);
-        assert.deepStrictEqual(errorMock.calls[0].arguments, [
-            'Error in effect:',
-            { error, fn: errorMock.calls[0].arguments[1].fn },
-        ]);
-    });
-});
-await describe('derived', async () => {
-    await it('calculates the value immediately', () => {
-        const [count] = createSignal(1);
-        const doubled = derived(() => count() * 2);
-        assert.strictEqual(doubled(), 2);
-    });
-    await it('recalculates the value upon updating', () => {
-        const [count, setCount] = createSignal(1);
-        const doubled = derived(() => count() * 2);
-        setCount(2);
-        assert.strictEqual(doubled(), 4);
-    });
-    await it('handles errors in derived signals', (testContext) => {
-        testContext.mock.method(console, 'error', NOOP);
-        const errorMock = console.error.mock;
-        const error = new Error('Test error');
-        const [count, setCount] = createSignal(1);
-        derived(() => {
-            if (count() === 2) {
-                throw error;
-            }
-        });
-        setCount(2);
-        assert.strictEqual(errorMock.callCount(), 1);
-        assert.deepStrictEqual(errorMock.calls[0].arguments, [
-            'Error in derived signal:',
-            { error, fn: errorMock.calls[0].arguments[1].fn },
-        ]);
-    });
-});

package/dist/__test__/utilities.test.js

@@ -1,8 +0,0 @@
-import { describe, it } from 'node:test';
-import assert from 'assert';
-import { NOOP } from '../utilities';
-await describe('NOOP', async () => {
-    await it('returns nothing', () => {
-        assert.strictEqual(NOOP(), undefined);
-    });
-});

package/dist/constants.js

@@ -1,13 +0,0 @@
-export const DEFAULT_RENDER_OPTIONS = {
-    formAssociated: false,
-    observedAttributes: [],
-    attributesAsProperties: [],
-    attachShadow: true,
-    shadowRootOptions: {
-        mode: 'closed',
-        delegatesFocus: false,
-        clonable: false,
-        serializable: false,
-        slotAssignment: 'named',
-    },
-};

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;
-};