Canonical way to override Web Components messages?

[claudix]

After some struggle I have found a way to override the original messages (i18n) of Web Components (Main and Fiori). Could anybody tell me if there's a more canonical way? My solution is more a hack than a clean solution.

My directory structure is as follows:

• assets
  • i18n
    • es
      • messagebundle.properties (Application's messages)
      • ui5-web-components
        • messagebundle.properties (Overrides for Main)
      • ui5-web-components-fiori
        • messagebundle.properties (Overrides for Fiori)

Code (NOTE: the code is using the explicit locale "es"):

    //Application messages
    registerI18nLoader("MyApp", "es", async (localeId) => {
        const props = await (await fetch(`./assets/i18n/es/messagebundle.properties`)).text();
        return parseProperties(props);
    });

    //Overrides for @ui5/webcomponents
    registerI18nLoader("@ui5/webcomponents", "es", async (localeId) => {
        const props = await (await fetch(`./assets/i18n/es/ui5-webcomponents/messagebundle.properties`)).text();
        const overrides = parseProperties(props);
        const original = (await import("@ui5/webcomponents/dist/generated/assets/i18n/messagebundle_es.json")).default;

        for (const name in overrides) {
            original[name] = overrides[name];
        }
        return original;
    });

    //Overrides for @ui5/webcomponents-fiori
    registerI18nLoader("@ui5/webcomponents-fiori", "es", async (localeId) => {
        const props = await (await fetch(`./assets/i18n/es/ui5-webcomponents-fiori/messagebundle.properties`)).text();
        const overrides = parseProperties(props);
        const original = (await import("@ui5/webcomponents-fiori/dist/generated/assets/i18n/messagebundle_es.json")).default;

        for (const name in overrides) {
            original[name] = overrides[name];
        }
        return original;
    });