thunderous 2.3.12 → 2.3.13

package/dist/registry.js

@@ -0,0 +1,95 @@
+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,
+    };
+};

package/dist/render.js

@@ -0,0 +1,350 @@
+import { isServer } from './server-side';
+import { createEffect } from './signals';
+import { queryComment } from './utilities';
+const CALLBACK_BINDING_REGEX = /(\{\{callback:.+\}\})/;
+const LEGACY_CALLBACK_BINDING_REGEX = /(this.getRootNode\(\).host.__customCallbackFns.get\('.+'\)\(event\))/;
+const SIGNAL_BINDING_REGEX = /(\{\{signal:.+\}\})/;
+const FRAGMENT_ATTRIBUTE = '___thunderous-fragment';
+export const renderState = {
+    currentShadowRoot: null,
+    signalMap: new Map(),
+    callbackMap: new Map(),
+    fragmentMap: new Map(),
+    propertyMap: new Map(),
+    registry: typeof customElements !== 'undefined' ? customElements : {},
+};
+const logPropertyWarning = (propName, element) => {
+    console.warn(`Property "${propName}" does not exist on element:`, element, '\n\nThunderous will attempt to set the property anyway, but this may result in unexpected behavior. Please make sure the property exists on the element prior to setting it.');
+};
+// For nested loops in templating logic...
+const arrayToDocumentFragment = (array, parent, uniqueKey) => {
+    const documentFragment = new DocumentFragment();
+    let count = 0;
+    const keys = new Set();
+    for (const item of array) {
+        const node = createNewNode(item, parent, uniqueKey);
+        if (node instanceof DocumentFragment) {
+            const child = node.firstElementChild;
+            if (node.children.length > 1) {
+                console.error('When rendering arrays, fragments must contain only one top-level element at a time. Error occured in:', parent);
+            }
+            if (child === null)
+                continue;
+            let key = child.getAttribute('key');
+            if (key === null) {
+                console.warn('When rendering arrays, a `key` attribute should be provided on each child element. An index was automatically applied, but this could result in unexpected behavior:', child);
+                key = String(count);
+                child.setAttribute('key', key);
+            }
+            if (keys.has(key)) {
+                console.warn(`When rendering arrays, each child should have a unique \`key\` attribute. Duplicate key "${key}" found on:`, child);
+            }
+            keys.add(key);
+            count++;
+        }
+        documentFragment.append(node);
+    }
+    const comment = document.createComment(uniqueKey);
+    documentFragment.append(comment);
+    return documentFragment;
+};
+const createNewNode = (value, parent, uniqueKey) => {
+    if (typeof value === 'string')
+        return new Text(value);
+    if (Array.isArray(value))
+        return arrayToDocumentFragment(value, parent, uniqueKey);
+    if (value instanceof DocumentFragment)
+        return value;
+    return new Text('');
+};
+// Handle each interpolated value and convert it to a string.
+// Binding is done only after the combined HTML string is parsed into a DocumentFragment.
+const processValue = (value) => {
+    if (!isServer && value instanceof DocumentFragment) {
+        const uniqueKey = crypto.randomUUID();
+        renderState.fragmentMap.set(uniqueKey, value);
+        return `<div ${FRAGMENT_ATTRIBUTE}="${uniqueKey}"></div>`;
+    }
+    if (typeof value === 'function' && 'getter' in value && value.getter === true) {
+        const getter = value;
+        const uniqueKey = crypto.randomUUID();
+        renderState.signalMap.set(uniqueKey, getter);
+        let result = getter();
+        if (Array.isArray(result)) {
+            result = result.map((item) => processValue(item)).join('');
+        }
+        return isServer ? String(result) : `{{signal:${uniqueKey}}}`;
+    }
+    if (typeof value === 'function') {
+        const uniqueKey = crypto.randomUUID();
+        renderState.callbackMap.set(uniqueKey, value);
+        return isServer ? String(value()) : `{{callback:${uniqueKey}}}`;
+    }
+    return String(value);
+};
+// Bind signals and callbacks to DOM nodes in a DocumentFragment.
+const evaluateBindings = (element, fragment) => {
+    for (const child of element.childNodes) {
+        if (child instanceof Text && SIGNAL_BINDING_REGEX.test(child.data)) {
+            const textList = child.data.split(SIGNAL_BINDING_REGEX);
+            const sibling = child.nextSibling;
+            textList.forEach((text, i) => {
+                const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, '$1');
+                const signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : undefined;
+                const newValue = signal !== undefined ? signal() : text;
+                const newNode = createNewNode(newValue, element, uniqueKey);
+                // there is only one text node, originally, so we have to replace it before inserting additional nodes
+                if (i === 0) {
+                    child.replaceWith(newNode);
+                }
+                else {
+                    element.insertBefore(newNode, sibling);
+                }
+                // evaluate signals and subscribe to them
+                if (signal !== undefined && newNode instanceof Text) {
+                    createEffect(() => {
+                        newNode.data = signal();
+                    });
+                }
+                else if (signal !== undefined && newNode instanceof DocumentFragment) {
+                    let init = false;
+                    createEffect(() => {
+                        const result = signal();
+                        const nextNode = createNewNode(result, element, uniqueKey);
+                        if (nextNode instanceof Text) {
+                            const error = new TypeError('Signal mismatch: expected DocumentFragment or Array<DocumentFragment>, but got Text');
+                            console.error(error);
+                            throw error;
+                        }
+                        // remove elements that are not in the updated array (fragment)
+                        for (const child of element.children) {
+                            const key = child.getAttribute('key');
+                            if (key === null)
+                                continue;
+                            const matchingNode = nextNode.querySelector(`[key="${key}"]`);
+                            if (init && matchingNode === null) {
+                                child.remove();
+                            }
+                        }
+                        // persist elements using the same key
+                        let anchor = queryComment(element, uniqueKey);
+                        for (const child of nextNode.children) {
+                            const key = child.getAttribute('key');
+                            const matchingNode = element.querySelector(`[key="${key}"]`);
+                            if (matchingNode === null)
+                                continue;
+                            matchingNode.__customCallbackFns = child.__customCallbackFns;
+                            for (const attr of child.attributes) {
+                                matchingNode.setAttribute(attr.name, attr.value);
+                            }
+                            matchingNode.replaceChildren(...child.childNodes);
+                            anchor = matchingNode.nextSibling;
+                            child.replaceWith(matchingNode);
+                        }
+                        const nextAnchor = queryComment(nextNode, uniqueKey);
+                        nextAnchor?.remove();
+                        element.insertBefore(nextNode, anchor);
+                        if (!init)
+                            init = true;
+                    });
+                }
+            });
+        }
+        if (child instanceof Element && child.hasAttribute(FRAGMENT_ATTRIBUTE)) {
+            const uniqueKey = child.getAttribute(FRAGMENT_ATTRIBUTE);
+            const childFragment = renderState.fragmentMap.get(uniqueKey);
+            if (childFragment !== undefined) {
+                child.replaceWith(childFragment);
+            }
+        }
+        else if (child instanceof Element) {
+            for (const attr of [...child.attributes]) {
+                const attrName = attr.name;
+                if (SIGNAL_BINDING_REGEX.test(attr.value)) {
+                    const textList = attr.value.split(SIGNAL_BINDING_REGEX);
+                    let prevText = attr.value;
+                    createEffect(() => {
+                        let newText = '';
+                        let hasNull = false;
+                        let signal;
+                        for (const text of textList) {
+                            const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, '$1');
+                            if (signal === undefined) {
+                                signal = uniqueKey !== text ? renderState.signalMap.get(uniqueKey) : undefined;
+                                const value = signal !== undefined ? signal() : text;
+                                if (value === null)
+                                    hasNull = true;
+                                newText += String(value);
+                            }
+                            else {
+                                newText += text;
+                            }
+                        }
+                        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-id:')) {
+                            if (child.hasAttribute(attrName))
+                                child.removeAttribute(attrName);
+                            const propId = attrName.replace('prop-id:', '');
+                            const propName = renderState.propertyMap.get(propId);
+                            if (propName === undefined) {
+                                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);
+                            // @ts-expect-error // the above warning should suffice for developers
+                            child[propName] = signal !== undefined ? signal() : newValue;
+                        }
+                        prevText = newText;
+                    });
+                }
+                else if (LEGACY_CALLBACK_BINDING_REGEX.test(attr.value)) {
+                    const getRootNode = child.getRootNode.bind(child);
+                    child.getRootNode = () => {
+                        const rootNode = getRootNode();
+                        return rootNode instanceof ShadowRoot ? rootNode : fragment;
+                    };
+                }
+                else if (CALLBACK_BINDING_REGEX.test(attr.value)) {
+                    const textList = attr.value.split(CALLBACK_BINDING_REGEX);
+                    createEffect(() => {
+                        child.__customCallbackFns = child.__customCallbackFns ?? new Map();
+                        let uniqueKey = '';
+                        for (const text of textList) {
+                            const _uniqueKey = text.replace(/\{\{callback:(.+)\}\}/, '$1');
+                            if (_uniqueKey !== text)
+                                uniqueKey = _uniqueKey;
+                            const callback = uniqueKey !== text ? renderState.callbackMap.get(uniqueKey) : undefined;
+                            if (callback !== undefined) {
+                                child.__customCallbackFns.set(uniqueKey, callback);
+                            }
+                        }
+                        if (uniqueKey !== '' && !attrName.startsWith('prop-id:')) {
+                            child.setAttribute(attrName, `this.__customCallbackFns.get('${uniqueKey}')(event)`);
+                        }
+                        else if (attrName.startsWith('prop-id:')) {
+                            child.removeAttribute(attrName);
+                            const propId = attrName.replace('prop-id:', '');
+                            const propName = renderState.propertyMap.get(propId);
+                            if (propName === undefined) {
+                                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;
+                            }
+                            // @ts-expect-error // the above warning should suffice for developers
+                            child[propName] = child.__customCallbackFns.get(uniqueKey);
+                        }
+                    });
+                }
+                else if (attrName.startsWith('prop-id:')) {
+                    child.removeAttribute(attrName);
+                    const propId = attrName.replace('prop-id:', '');
+                    const propName = renderState.propertyMap.get(propId);
+                    if (propName === undefined) {
+                        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;
+                    }
+                    // @ts-expect-error // the above warning should suffice for developers
+                    child[propName] = attr.value;
+                }
+            }
+            evaluateBindings(child, fragment);
+        }
+    }
+};
+/**
+ * A tagged template function for creating DocumentFragment instances.
+ */
+export const html = (strings, ...values) => {
+    // Combine the strings and values into a single HTML string
+    let innerHTML = strings.reduce((innerHTML, str, i) => {
+        let value = values[i] ?? '';
+        if (Array.isArray(value)) {
+            value = value.map((item) => processValue(item)).join('');
+        }
+        else {
+            value = processValue(value);
+        }
+        innerHTML += str + String(value === null ? '' : value);
+        return innerHTML;
+    }, '');
+    // @ts-expect-error // return a plain string for server-side rendering
+    if (isServer)
+        return innerHTML;
+    // Track properties in the render state while the HTML is still a string,
+    // since everything converts to lowercase after parsing as a DOM fragment.
+    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);
+        }
+    }
+    // Parse the HTML string into a DocumentFragment
+    const template = document.createElement('template');
+    template.innerHTML = innerHTML;
+    const fragment = renderState.currentShadowRoot?.importNode?.(template.content, true) ?? document.importNode(template.content, true);
+    // Ensure the DocumentFragment is upgraded before binding to properties
+    renderState.registry.upgrade(fragment);
+    // Bind signals and callbacks to the DocumentFragment
+    evaluateBindings(fragment, fragment);
+    return fragment;
+};
+const adoptedStylesSupported = typeof window !== 'undefined' &&
+    window.ShadowRoot?.prototype.hasOwnProperty('adoptedStyleSheets') &&
+    window.CSSStyleSheet?.prototype.hasOwnProperty('replace');
+export const isCSSStyleSheet = (stylesheet) => {
+    return typeof CSSStyleSheet !== 'undefined' && stylesheet instanceof CSSStyleSheet;
+};
+export const css = (strings, ...values) => {
+    let cssText = '';
+    const signalMap = new Map();
+    const signalBindingRegex = /(\{\{signal:.+\}\})/;
+    strings.forEach((string, i) => {
+        let value = values[i] ?? '';
+        if (typeof value === 'function') {
+            const uniqueKey = crypto.randomUUID();
+            signalMap.set(uniqueKey, value);
+            value = isServer ? value() : `{{signal:${uniqueKey}}}`;
+        }
+        if (typeof value === 'object' && value !== null) {
+            console.error('Objects are not valid in CSS values. Received:', value);
+            value = '';
+        }
+        cssText += string + String(value);
+    });
+    if (isServer) {
+        // @ts-expect-error // return a plain string for server-side rendering
+        return cssText;
+    }
+    const stylesheet = adoptedStylesSupported ? new CSSStyleSheet() : document.createElement('style');
+    const textList = cssText.split(signalBindingRegex);
+    createEffect(() => {
+        const newCSSTextList = [];
+        for (const text of textList) {
+            const uniqueKey = text.replace(/\{\{signal:(.+)\}\}/, '$1');
+            const signal = uniqueKey !== text ? signalMap.get(uniqueKey) : null;
+            const newValue = signal !== null ? signal() : text;
+            const newText = String(newValue);
+            newCSSTextList.push(newText);
+        }
+        const newCSSText = newCSSTextList.join('');
+        if (isCSSStyleSheet(stylesheet)) {
+            stylesheet.replace(newCSSText).catch(console.error);
+        }
+        else {
+            stylesheet.textContent = newCSSText;
+        }
+    });
+    return stylesheet;
+};

package/dist/server-side.js

@@ -0,0 +1,136 @@
+import { createSignal } from './signals';
+import { NOOP } from './utilities';
+export const isServer = typeof window === 'undefined';
+export const serverDefineFns = new Set();
+export const onServerDefine = (fn) => {
+    serverDefineFns.add(fn);
+};
+export const serverDefine = ({ tagName, serverRender, options, elementResult, scopedRegistry, parentRegistry, }) => {
+    if (parentRegistry !== undefined) {
+        if (parentRegistry.getTagName(elementResult) !== tagName.toUpperCase()) {
+            parentRegistry.define(tagName, elementResult);
+        }
+        parentRegistry.__serverRenderOpts.set(tagName, { serverRender, ...options });
+        if (parentRegistry.scoped)
+            return;
+    }
+    for (const fn of serverDefineFns) {
+        let result = serverRender(getServerRenderArgs(tagName));
+        result = wrapTemplate({
+            tagName,
+            serverRender,
+            options,
+        });
+        if (scopedRegistry !== undefined) {
+            for (const [scopedTagName, scopedRenderOptions] of scopedRegistry.__serverRenderOpts) {
+                const { serverRender, ...scopedOptions } = scopedRenderOptions;
+                let template = serverRender(getServerRenderArgs(scopedTagName, scopedRegistry));
+                template = wrapTemplate({
+                    tagName: scopedTagName,
+                    serverRender,
+                    options: scopedOptions,
+                });
+                result = insertTemplates(scopedTagName, template, result);
+            }
+        }
+        fn(tagName, result);
+    }
+};
+export const serverCss = new Map();
+export const getServerRenderArgs = (tagName, registry) => ({
+    get elementRef() {
+        return new Proxy({}, {
+            get: () => {
+                const error = new Error('The `elementRef` property is not available on the server.');
+                console.error(error);
+                throw error;
+            },
+        });
+    },
+    get root() {
+        return new Proxy({}, {
+            get: () => {
+                const error = new Error('The `root` property is not available on the server.');
+                console.error(error);
+                throw error;
+            },
+        });
+    },
+    get internals() {
+        return new Proxy({}, {
+            get: () => {
+                const error = new Error('The `internals` property is not available on the server.');
+                console.error(error);
+                throw error;
+            },
+        });
+    },
+    attributeChangedCallback: NOOP,
+    connectedCallback: NOOP,
+    disconnectedCallback: NOOP,
+    adoptedCallback: NOOP,
+    formDisabledCallback: NOOP,
+    formResetCallback: NOOP,
+    formStateRestoreCallback: NOOP,
+    formAssociatedCallback: NOOP,
+    clientOnlyCallback: NOOP,
+    customCallback: () => '',
+    getter: (fn) => {
+        const _fn = () => fn();
+        _fn.getter = true;
+        return _fn;
+    },
+    attrSignals: new Proxy({}, { get: (_, attr) => createSignal(`{{attr:${String(attr)}}}`) }),
+    propSignals: new Proxy({}, { get: () => createSignal(null) }),
+    refs: {},
+    // @ts-expect-error // this will be a string for SSR, but this is true for internal cases only.
+    // The end user will see the public type, which is either a CSSStyleSheet or HTMLStyleElement.
+    adoptStyleSheet: (cssStr) => {
+        const _serverCss = registry !== undefined ? registry.__serverCss : serverCss;
+        const cssArr = _serverCss.get(tagName) ?? [];
+        cssArr.push(cssStr);
+        _serverCss.set(tagName, cssArr);
+    },
+});
+export const wrapTemplate = ({ tagName, serverRender, options }) => {
+    const { registry } = options.shadowRootOptions;
+    const scopedRegistry = registry !== undefined && 'scoped' in registry ? registry : undefined;
+    const initialRenderString = serverRender(getServerRenderArgs(tagName, scopedRegistry));
+    const _serverCss = scopedRegistry?.__serverCss ?? serverCss;
+    const cssRenderString = (_serverCss.get(tagName) ?? []).map((cssStr) => `<style>${cssStr}</style>`).join('');
+    const finalScopedRenderString = options.attachShadow
+        ? /* html */ `
+				<template
+					shadowrootmode="${options.shadowRootOptions.mode}"
+					shadowrootdelegatesfocus="${options.shadowRootOptions.delegatesFocus}"
+					shadowrootclonable="${options.shadowRootOptions.clonable}"
+					shadowrootserializable="${options.shadowRootOptions.serializable}"
+				>
+					${cssRenderString + initialRenderString}
+				</template>
+			`
+        : cssRenderString + initialRenderString;
+    return finalScopedRenderString;
+};
+export const insertTemplates = (tagName, template, inputString) => {
+    return inputString.replace(new RegExp(`(<\s*${tagName}([^>]*)>)`, 'gm'), ($1, _, $3) => {
+        const attrs = $3
+            .split(/(?<=")\s+/)
+            .filter((attr) => attr.trim() !== '')
+            .map((attr) => {
+            const [_key, _value] = attr.split('=');
+            const key = _key.trim();
+            const value = _value?.replace(/"/g, '') ?? '';
+            return [key, value];
+        });
+        let scopedResult = template;
+        for (const [key, value] of attrs) {
+            scopedResult = scopedResult.replace(new RegExp(`{{attr:${key}}}`, 'gm'), value);
+        }
+        return $1 + scopedResult;
+    });
+};
+export const clientOnlyCallback = (fn) => {
+    if (!isServer)
+        return fn();
+};