Simple template-literal helpers for dynamic DOM manipulation.

templates.js

/*
 * Copyright (C) 2021 John Hunter Kohler <[email protected]>
 *
 * Simple template-literal helpers for dynamic DOM manipulation.
 */

const emptyTagNames = new Set([
    "area",     "base",     "br", 
    "col",      "embed",    "hr", 
    "img",      "input",    "link",
    "menuitem", "meta",     "param", 
    "source",   "track",    "wbr"
]);

/**
 * Returns true if tag name or node corresponds to empty HTML elements.
 *
 * @param {Node | string} elem
 * @see https://developer.mozilla.org/en-US/docs/Glossary/Empty_element
 */
export function isEmptyElement(elem) {
    return emptyTagNames.has(typeof elem == "string" ? elem : elem?.tagName);
}

/**
 * @template {keyof HTMLElementTagNameMap} T
 * @param {T} type
 * @returns {(
 *     strings: TemplateStringsArray,
 *     ...args: string | Node
 * ) => HTMLElementTagNameMap[T]}
 */
function createHTMLTag(type) {
    function tag(strings, ...args) {
        const elem = document.createElement(type);
        for (let i = 0; i < strings.length; i++) {
            if (strings[i]) elem.append(strings[i]);
            if (args[i]) elem.append(args[i]);
        }
        return elem;
    }
    Reflect.defineProperty(tag, "name", { value: type });
    return tag;
}

export const a = createHTMLTag("a");
export const abbr = createHTMLTag("abbr");
export const address = createHTMLTag("address");
export const area = createHTMLTag("area");
export const article = createHTMLTag("article");
export const aside = createHTMLTag("aside");
export const audio = createHTMLTag("audio");
export const b = createHTMLTag("b");
export const base = createHTMLTag("base");
export const bdi = createHTMLTag("bdi");
export const bdo = createHTMLTag("bdo");
export const blockquote = createHTMLTag("blockquote");
export const body = createHTMLTag("body");
export const br = createHTMLTag("br");
export const button = createHTMLTag("button");
export const canvas = createHTMLTag("canvas");
export const caption = createHTMLTag("caption");
export const cite = createHTMLTag("cite");
export const code = createHTMLTag("code");
export const col = createHTMLTag("col");
export const colgroup = createHTMLTag("colgroup");
export const data = createHTMLTag("data");
export const datalist = createHTMLTag("datalist");
export const dd = createHTMLTag("dd");
export const del = createHTMLTag("del");
export const details = createHTMLTag("details");
export const dfn = createHTMLTag("dfn");
export const dialog = createHTMLTag("dialog");
export const div = createHTMLTag("div");
export const dl = createHTMLTag("dl");
export const dt = createHTMLTag("dt");
export const em = createHTMLTag("em");
export const embed = createHTMLTag("embed");
export const fieldset = createHTMLTag("fieldset");
export const figcaption = createHTMLTag("figcaption");
export const figure = createHTMLTag("figure");
export const footer = createHTMLTag("footer");
export const form = createHTMLTag("form");
export const h1 = createHTMLTag("h1");
export const h2 = createHTMLTag("h2");
export const h3 = createHTMLTag("h3");
export const h4 = createHTMLTag("h4");
export const h5 = createHTMLTag("h5");
export const h6 = createHTMLTag("h6");
export const head = createHTMLTag("head");
export const header = createHTMLTag("header");
export const hgroup = createHTMLTag("hgroup");
export const hr = createHTMLTag("hr");
export const html = createHTMLTag("html");
export const i = createHTMLTag("i");
export const iframe = createHTMLTag("iframe");
export const img = createHTMLTag("img");
export const input = createHTMLTag("input");
export const ins = createHTMLTag("ins");
export const kbd = createHTMLTag("kbd");
export const label = createHTMLTag("label");
export const legend = createHTMLTag("legend");
export const li = createHTMLTag("li");
export const link = createHTMLTag("link");
export const main = createHTMLTag("main");
export const map = createHTMLTag("map");
export const mark = createHTMLTag("mark");
export const math = createHTMLTag("math");
export const menu = createHTMLTag("menu");
export const menuitem = createHTMLTag("menuitem");
export const meta = createHTMLTag("meta");
export const meter = createHTMLTag("meter");
export const nav = createHTMLTag("nav");
export const noscript = createHTMLTag("noscript");
export const object = createHTMLTag("object");
export const ol = createHTMLTag("ol");
export const optgroup = createHTMLTag("optgroup");
export const option = createHTMLTag("option");
export const output = createHTMLTag("output");
export const p = createHTMLTag("p");
export const param = createHTMLTag("param");
export const picture = createHTMLTag("picture");
export const pre = createHTMLTag("pre");
export const progress = createHTMLTag("progress");
export const q = createHTMLTag("q");
export const rb = createHTMLTag("rb");
export const rp = createHTMLTag("rp");
export const rt = createHTMLTag("rt");
export const rtc = createHTMLTag("rtc");
export const ruby = createHTMLTag("ruby");
export const s = createHTMLTag("s");
export const samp = createHTMLTag("samp");
export const script = createHTMLTag("script");
export const section = createHTMLTag("section");
export const select = createHTMLTag("select");
export const slot = createHTMLTag("slot");
export const small = createHTMLTag("small");
export const source = createHTMLTag("source");
export const span = createHTMLTag("span");
export const strong = createHTMLTag("strong");
export const style = createHTMLTag("style");
export const sub = createHTMLTag("sub");
export const summary = createHTMLTag("summary");
export const sup = createHTMLTag("sup");
export const svg = createHTMLTag("svg");
export const table = createHTMLTag("table");
export const tbody = createHTMLTag("tbody");
export const td = createHTMLTag("td");
export const template = createHTMLTag("template");
export const textarea = createHTMLTag("textarea");
export const tfoot = createHTMLTag("tfoot");
export const th = createHTMLTag("th");
export const thead = createHTMLTag("thead");
export const time = createHTMLTag("time");
export const title = createHTMLTag("title");
export const tr = createHTMLTag("tr");
export const track = createHTMLTag("track");
export const u = createHTMLTag("u");
export const ul = createHTMLTag("ul");
export const video = createHTMLTag("video");
export const wbr = createHTMLTag("wbr");