x0/modules/locale.js

// [x-locale-key="<key>"]
// html[x1-locale-file] - 
// html[x1-locale-watch] - watch document for changes and update
(async () => {
    if (!document.querySelector("html").hasAttribute("x1-locale-file")) return;
    let backupElements = window.x0?.registerStorage("locale") ?? {};
    let locale = (await (await fetch(document.querySelector("html").getAttribute("x1-locale-file"))).json()) ?? {};

    const getValueFromPath = (obj, path) => path.split(".").reduce((obj, key) => obj && obj[key], obj);

    function updateLocale() {
        document.querySelectorAll("[x-locale-key]:not([x1-locale-uuid])")
            .forEach(e => {
                let uuid = (Math.random() + new Date().getTime()).toString(36);
                e.setAttribute("x1-locale-uuid", uuid);
                backupElements[uuid] = e.outerHTML;
                e.innerHTML = getValueFromPath(locale, e.getAttribute("x-locale-key"));
            })
    }

    updateLocale();

    if (document.querySelector("html").hasAttribute("x1-locale-watch"))
        document.querySelector("html").onchange = updateLocale;

    window.x0?.registerModuleUpdateHook("locale", updateLocale);

    window.x0?.registerModuleRemoveHook("locale", (s) => {
        Object.keys(s)
            .forEach(uuid => {
                document.querySelector(`[x1-locale-uuid="${uuid}"]`).outerHTML = s[uuid];
            })
    })
})()