nano-jsx/esm/ssr.js

SSR first, lightweight 1kB JSX library.

import { isSSR, render } from './core.js';
import { documentSSR } from './regexDom.js';
import { _state } from './state.js';
import { detectSSR } from './helpers.js';
// functions that should only be available on the server-side
const ssrTricks = {
    isWebComponent: (tagNameOrComponent) => {
        return (typeof tagNameOrComponent === 'string' &&
            tagNameOrComponent.includes('-') &&
            _nano.customElements.has(tagNameOrComponent));
    },
    renderWebComponent: (tagNameOrComponent, props, children, _render) => {
        const customElement = _nano.customElements.get(tagNameOrComponent);
        const component = _render({ component: customElement, props: { ...props, children: children } });
        // get the html tag and the innerText from string
        // match[1]: HTMLTag
        // match[2]: innerText
        const match = component.toString().match(/^<(?<tag>[a-z]+)>(.*)<\/\k<tag>>$/);
        if (match) {
            const element = document.createElement(match[1]);
            element.innerText = match[2];
            // eslint-disable-next-line no-inner-declarations
            function replacer(match, p1, _offset, _string) {
                return match.replace(p1, '');
            }
            // remove events like onClick from DOM
            element.innerText = element.innerText.replace(/<\w+[^>]*(\s(on\w*)="[^"]*")/gm, replacer);
            return element;
        }
        else {
            return null;
        }
    }
};
const initGlobalVar = () => {
    const isSSR = detectSSR() === true ? true : undefined;
    const location = { pathname: '/' };
    const document = isSSR ? documentSSR() : window.document;
    globalThis._nano = { isSSR, location, document, customElements: new Map(), ssrTricks };
};
initGlobalVar();
export const initSSR = (pathname = '/') => {
    _nano.location = { pathname };
    globalThis.document = _nano.document = isSSR() ? documentSSR() : window.document;
};
export const renderSSR = (component, options = {}) => {
    const { pathname, clearState = true } = options;
    initSSR(pathname);
    if (clearState)
        _state.clear();
    const tmp = render(component, null, true);
    if (Array.isArray(tmp))
        return tmp.join('');
    else
        return Array.from(tmp).join('');
};
export const clearState = () => {
    _state.clear();
};
//# sourceMappingURL=ssr.js.map