@crunchya/element_builder/index.ts

An HTMLElement builder for node.js

class CustomHtmlElement {
    name: string;
    classes: Array<string>;
    attributes: Array<{name: string, value: string}>;
    children: Array<HTMLElement>;
    content: {value: string, position: 'after' | 'before'};
    private _element: any;

    /**
     * Create a new CustomHtmlElement.
     * 
     * @param name The tag name of the Html element
     * @param classes The classes to add to the element
     * @param attributes The attributes to add to the element
     * @param children The children of the element
     * @param content The inner html content of the element (cannot coexist with children)
     */
    constructor (name: string, classes: Array<string> = [], attributes: Array<{name: string, value: string}> = [{name: '', value: ''}], children: Array<HTMLElement> = new Array<HTMLElement>(), content:{value: string, position: 'before' | 'after'} = {value: '', position: 'after'}) {
        this.name = name;
        this.classes = classes;
        this.attributes = attributes;
        this.content = content;
        this.children = children;
        this._element = null;
    }

    /**
     * Turns the CustomHtmlElement into a useable HTMLElement.
     * You can access it via the CustomHtmlElement.getElement() function.
     * 
     */
    webify() {
        this._element = document.createElement(this.name);
        this.classes?.forEach(cls => {
            this._element.classList.add(cls);
        });
        this.attributes?.forEach(attribute => {
            if(attribute.name != '') this._element.setAttribute(attribute.name, attribute.value);
        });
        this.children?.forEach(child => {
            this._element.appendChild(child);
        });
        if(this.content.position == 'before') this._element.insertAdjacentHTML('afterbegin', this.content.value);
        else if(this.content.position == 'after') this._element.insertAdjacentHTML('beforeend', this.content.value);

        return this;
    }

    /**
     * Clone the CustomHtmlElement.
     * @returns A clone of the choosen CustomHtmlElement
     */

    clone() {
        return new CustomHtmlElement(this.name, this.classes, this.attributes, this.children, this.content);
    }

    /**
     * Access the previously created HTMLElement or calls webify if it's not yet created.
     * 
     * @returns The useable HTMLElement
     */
    getElement() {
        return this._element ?? this.webify().getElement();
    }
}

export default { CustomHtmlElement };
export { CustomHtmlElement }