@furystack/shades/esm/shade-component.js

Google Authentication Provider for FuryStack

import { isShadeComponent } from './models/shade-component.js';
/**
 * Appends a list of items to a HTML element
 * @param el the root element
 * @param children array of items to append
 */
export const appendChild = (el, children) => {
    for (const child of children) {
        if (typeof child === 'string' || typeof child === 'number') {
            el.appendChild(document.createTextNode(child));
        }
        else {
            if (child instanceof HTMLElement || child instanceof DocumentFragment) {
                el.appendChild(child);
            }
            else if (child instanceof Array) {
                appendChild(el, child);
            }
        }
    }
};
export const hasStyle = (props) => {
    return (!!props && typeof props === 'object' && typeof props.style === 'object');
};
/**
 * @param el The Target HTML Element
 * @param props The Properties to fetch The Styles Object
 */
export const attachStyles = (el, props) => {
    if (hasStyle(props))
        for (const key in props.style) {
            if (Object.prototype.hasOwnProperty.call(props.style, key)) {
                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                // @ts-expect-error
                el.style[key] = props.style[key];
            }
        }
};
export const attachDataAttributes = (el, props) => {
    if (props) {
        Object.entries(props)
            .filter(([key]) => key.startsWith('data-'))
            .forEach(([key, value]) => el.setAttribute(key, value || ''));
    }
};
/**
 *
 * @param el The Target HTML Element
 * @param props The Props to attach
 */
export const attachProps = (el, props) => {
    if (!props) {
        return;
    }
    attachStyles(el, props);
    if (hasStyle(props)) {
        const { style, ...rest } = props;
        Object.assign(el, rest);
    }
    else {
        Object.assign(el, props);
    }
    attachDataAttributes(el, props);
};
/**
 * Factory method that creates a component. This should be configured as a default JSX Factory in tsconfig.
 * @returns the created JSX element
 */
export const createComponentInner = (...[elementType, props, ...children]) => {
    if (typeof elementType === 'string') {
        const el = document.createElement(elementType);
        attachProps(el, props);
        if (children) {
            appendChild(el, children);
        }
        return el;
    }
    else if (isShadeComponent(elementType)) {
        const el = elementType(props, children);
        attachStyles(el, props);
        return el;
    }
    return undefined;
};
export const createFragmentInner = (...[_props, ...children]) => {
    const fragment = document.createDocumentFragment();
    appendChild(fragment, children);
    return fragment;
};
export const createComponent = (...args) => {
    if (args[0] === null) {
        return createFragmentInner(...args);
    }
    return createComponentInner(...args);
};
//# sourceMappingURL=shade-component.js.map