djledda-web/app/util.ts

import { type InjectionKey, inject } from 'vue';
import useDJSSRContext from "@/useDJSSRContext.ts";

export function gid(id: string, doc: (Document | ShadowRoot) | undefined) {
    return ((doc ?? document).getElementById(id));
}

export function qs(query: string, sub: (HTMLElement | ShadowRoot) | undefined) {
    return ((sub ?? document).querySelector(query));
}

export function qsa(query: string, sub?: (HTMLElement | ShadowRoot) | undefined) {
    return ((sub ?? document).querySelectorAll(query));
}

export function h<T extends keyof HTMLElementTagNameMap>(
    tag: T,
    opts?: Partial<HTMLElementTagNameMap[T]> | undefined,
    children?: Node[],
) {
    const newEl = Object.assign(document.createElement(tag), opts ?? {});
    if (children) {
        newEl.append(...children);
    }
    return newEl;
}

export function html(strs: TemplateStringsArray, ...vals: string[]) {
    let result = strs[0];
    for (let i = 1; i < strs.length; i++) {
        result += vals[i] + strs[i];
    }
    const template = document.createElement("template");
    template.innerHTML = result;
    return template;
}

export function css(strs: TemplateStringsArray, ...vals: string[]) {
    let result = strs[0];
    for (let i = 1; i < strs.length; i++) {
        result += vals[i] + strs[i];
    }
    return result;
}


export const cssRegistry = Symbol('css-registry') as InjectionKey<Set<string>>;
export function addCSS(key: string, css: string) {
    const context = useDJSSRContext();
    if (context && !context.styles[key]) {
        context.styles[key] = css;
    } else {
        const registry = inject(cssRegistry);
        if (!registry?.has(key)) {
            const stylesheet = new CSSStyleSheet();
            stylesheet.replace(css);
            document.adoptedStyleSheets.push(stylesheet);
        }
    }
}

/*
export class DJElement extends HTMLElement {
    static styles: CSSStyleSheet;

    static template: HTMLTemplateElement;

    root: ShadowRoot;

    constructor() {
        super();
        const statics = this.constructor as typeof DJElement;
        this.root = this.attachShadow({ mode: "open" });
        this.root.appendChild(statics.template.content.cloneNode(true));
        this.root.adoptedStyleSheets = statics.styles ? [statics.styles] : [];
    }
}
*/