pragma-views2/baremetal/lib/component-loader.js

export async function loadComponent(path, templated) {
    loadScript(`${path}.js`);

    if (templated == true) {
        loadTemplates(`${path}.html`);
    }
}

export async function loadScript(path) {
    const script = document.createElement("script");
    script.async = true;
    script.src = path;
    script.type = "module";
    return script;
}

export async function loadModule(path, id) {
    if (window.modules == undefined) {
        window.modules = new Map();
    }

    return new Promise(async (resolve, reject) => {
        if (window.modules.has(id)) {
            return resolve(window.modules.get(id));
        }

        const srcPath = relToAbsPath(path);
        const blobScript = `import * as module from "${srcPath}"; window.modules.set("${id}", module);`;
        let blob = new Blob([blobScript], { type: "text/javascript" });
        let url = URL.createObjectURL(blob);

        let script = document.createElement("script");
        script.src = url;
        script.type = "module";
        script.async = true;
        script.onload = () => {
            URL.revokeObjectURL(url);
            blob = null;
            url = null;
            script.onload = null;
            script.onerror = null;
            script = null;
            resolve(window.modules.get(id));
        };
        script.onerror = error => reject(error);
        document.head.appendChild(script);
    });
}

function relToAbsPath(url) {
    const a = document.createElement("a");
    a.setAttribute("href", url);
    return a.cloneNode(false).href;
}

export async function loadTemplate(path) {
    const result = await fetch(path).then(result => result.text());

    const tdoc = document.createElement("template");
    tdoc.innerHTML = result;

    return tdoc.content.querySelector("template").content;
}