tsx-dom/dist/utils.js

A simple way to use tsx syntax to create native dom elements using document.createElement.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.applyChildren = applyChildren;
exports.createDomElement = createDomElement;
exports.applyTsxTag = applyTsxTag;
function applyChild(element, child) {
    if (child instanceof Element)
        element.appendChild(child);
    else if (typeof child === "string" || typeof child === "number")
        element.appendChild(document.createTextNode(child.toString()));
    else
        console.warn("Unknown type to append: ", child);
}
function applyChildren(element, children) {
    for (const child of children) {
        if (!child && child !== 0)
            continue;
        if (Array.isArray(child))
            applyChildren(element, child);
        else
            applyChild(element, child);
    }
}
function createDomElement(tag, attrs) {
    const options = attrs?.is ? { is: attrs.is } : undefined;
    if (attrs?.xmlns)
        return document.createElementNS(attrs.xmlns, tag, options);
    return document.createElement(tag, options);
}
function applyTsxTag(tag, attrs) {
    let finalTag = tag;
    let finalAttrs = attrs;
    if (finalAttrs && "tsxTag" in finalAttrs) {
        finalTag = finalAttrs.tsxTag;
        if (!finalAttrs.is && tag.includes("-")) {
            finalAttrs = { ...finalAttrs, is: tag };
        }
    }
    return { finalTag, finalAttrs };
}