thunderous 2.4.1 → 2.4.3

package/dist/render.js

@@ -1,350 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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();
-};

package/dist/signals.js

@@ -1,115 +0,0 @@
-let subscriber = null;
-/**
- * Create a signal with an initial value.
- * @example
- * ```ts
- * const [getCount, setCount] = createSignal(0);
- * const increment = () => setCount(getCount() + 1);
- * const decrement = () => setCount(getCount() - 1);
- * ```
- */
-export const createSignal = (initVal, options) => {
-    const subscribers = new Set();
-    let value = initVal;
-    const getter = (getterOptions) => {
-        if (subscriber !== null) {
-            subscribers.add(subscriber);
-        }
-        if (options?.debugMode === true || getterOptions?.debugMode === true) {
-            let label = 'anonymous signal';
-            if (options?.label !== undefined) {
-                label = `(${options.label})`;
-                if (getterOptions?.label !== undefined) {
-                    label += ` ${getterOptions.label}`;
-                }
-            }
-            else if (getterOptions?.label !== undefined) {
-                label = getterOptions.label;
-            }
-            console.log('Signal retrieved:', { value, subscribers, label });
-        }
-        return value;
-    };
-    getter.getter = true;
-    let stackLength = 0;
-    const setter = (newValue, setterOptions) => {
-        stackLength++;
-        queueMicrotask(() => stackLength--);
-        if (stackLength > 1000) {
-            console.error(new Error('Signal setter stack overflow detected. Possible infinite loop. Bailing out.'));
-            stackLength = 0;
-            return;
-        }
-        const isObject = typeof newValue === 'object' && newValue !== null;
-        if (!isObject && value === newValue)
-            return;
-        if (isObject && typeof value === 'object' && value !== null) {
-            if (JSON.stringify(value) === JSON.stringify(newValue))
-                return;
-        }
-        const oldValue = value;
-        value = newValue;
-        for (const fn of subscribers) {
-            try {
-                fn();
-            }
-            catch (error) {
-                console.error('Error in subscriber:', { error, oldValue, newValue, fn });
-            }
-        }
-        if (options?.debugMode === true || setterOptions?.debugMode === true) {
-            let label = 'anonymous signal';
-            if (options?.label !== undefined) {
-                label = `(${options.label})`;
-                if (setterOptions?.label !== undefined) {
-                    label += ` ${setterOptions.label}`;
-                }
-            }
-            else if (setterOptions?.label !== undefined) {
-                label = setterOptions.label;
-            }
-            console.log('Signal set:', { oldValue, newValue, subscribers, label });
-        }
-    };
-    return [getter, setter];
-};
-/**
- * Create a derived signal that depends on other signals.
- * @example
- * ```ts
- * const [getCount, setCount] = createSignal(0);
- * const doubleCount = derived(() => getCount() * 2);
- * ```
- */
-export const derived = (fn, options) => {
-    const [getter, setter] = createSignal(undefined, options);
-    createEffect(() => {
-        try {
-            setter(fn());
-        }
-        catch (error) {
-            console.error('Error in derived signal:', { error, fn });
-        }
-    });
-    return getter;
-};
-/**
- * Create an effect that runs when signals change.
- * @example
- * ```ts
- * const [getCount, setCount] = createSignal(0);
- * createEffect(() => {
- *  console.log('Count:', getCount());
- * });
- * ```
- */
-export const createEffect = (fn) => {
-    subscriber = fn;
-    try {
-        fn();
-    }
-    catch (error) {
-        console.error('Error in effect:', { error, fn });
-    }
-    subscriber = null;
-};

package/dist/utilities.js

@@ -1,9 +0,0 @@
-export const NOOP = () => void 0;
-export const queryComment = (node, comment) => {
-    for (const child of node.childNodes) {
-        if (child.nodeType === Node.COMMENT_NODE && child.nodeValue === comment) {
-            return child;
-        }
-    }
-    return null;
-};