const ESC = { "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" };

const SLOT_PREFIX = "\x00slot:";
let slotId = 0;

export function html(strings, ...values) {
    const t = document.createElement("template");
    const slots = new Map();
    let markup = strings[0];
    for (let i = 0; i < values.length; i++) {
        const v = values[i];
        if (v instanceof DocumentFragment || v instanceof Node) {
            const id = SLOT_PREFIX + slotId++;
            slots.set(id, v);
            markup += `<template data-slot="${id}"></template>`;
        } else {
            markup += String(v).replace(/[&<>"']/g, (c) => ESC[c]);
        }
        markup += strings[i + 1];
    }
    t.innerHTML = markup;
    for (const [id, node] of slots) {
        t.content.querySelector(`[data-slot="${id}"]`).replaceWith(node.cloneNode(true));
    }
    return t.content;
}

export function css(strings, ...values) {
    const sheet = new CSSStyleSheet();
    sheet.replaceSync(String.raw(strings, ...values));
    return sheet;
}