Asynchronously import() multiple translation files & merge them in runtime build?

[kuanyui]

Is your feature request related to a problem? Please describe.
I'm wondering if vue-i18n is able to asynchronously load (import(...).then(...)) multiple i18n files, under a CSP environment such as Electron? (#381, installation, optimization)

Within CSP limitation, only vue-i18n.runtime.esm-bundler.js is available; but this one can load compiled i18n message object.

That is to say:

1. Use runtime build vue-i18n.
2. Webpack should NOT use vue-i18n-loader to compile *.json i18n files. (I guess... Because it seems I cannot merge a compiled i18n file?)
3. Async import() translation JSON objects, then merge them in runtime (?)

Describe the solution you'd like

export function asyncLoadI18n (langId: language_id_t): Promise<boolean> {
    return Promise.all([
      import(/* webpackChunkName: "main-lang-[index]" */ `../i18n/dist/${langId}/main.json`),
      import(/* webpackChunkName: "ui-lib-lang-[index]" */ `../ui-lib/i18n/${langId}.json`),
    ]).then(([mainObj, uiObj]) => {
      const merged = MAGIC_PROCESS(mainObj, uiObj)  // merge JSON objects then compile then into ES module????????
      i18n.global.setLocaleMessage(langId, merged)
      i18n.global.locale.value = langId
      return true
    }).catch(() => {
      return false
    })
}

Describe alternatives you've considered

1. ... Maybe provides an option for runtime build to enable the loading of plain JSON object? (sorry maybe dumb, in fact I don't exactly sure vue-i18n for vue3 requires a compiled message ES module object instead of plain JSON object. To make *.ts / *.js able to be as message object?)
2. ... Maybe provides a compiler which is able to run under CSP, and compile JSON file for vue-i18n.runtime.esm-bundler.js? (I've checked @intlify/message-compiler but it seems only to output plaintext file?)
3. ... Or I'm get the whole thing wrong ---- I should create multiple VueI18n instances and load i18n files in each instance separately?

Additional context
Just a note, maybe useful to others / documentation: I'm curious that how to / what is the best practice to lazy load needed part of i18n file in a large scale application?
For example, store/book should load ../i18n/${langId}/book.json only, store/food is ../i18n/${langId}/food.json, and store/3c is ../i18n/${langId}/3c.json ...etc.

[kuanyui]

Hmmm... I just found use Object.assign() to merge MODULE.default works, but I don't sure if this is an anti-pattern...

Promise.all([
      import(/* webpackChunkName: "main-lang-[index]" */ `../i18n/dist/${langId}/main.json`),
      import(/* webpackChunkName: "ui-lib-lang-[index]" */ `../ui-lib/i18n/${langId}.json`),
    ]).then(([mainObj, uiObj]) => {
      Object.assign(mainObj.default, uiObj.default)  // Merge!
      i18n.global.setLocaleMessage(langId, mainObj.default) 
      i18n.global.locale.value = langId
      return true
    }).catch(() => {
      return false
    })

[kazupon]

Thank you for your feedback!

Have you tried to use MergeLocaleMessage?
https://vue-i18n.intlify.dev/api/composition.html#mergelocalemessage-locale-message

Perhaps using it will help you solve your problem, I think.
If you could not resolve this, I would like to give us a minimal reproduction repo. 🙏

[kuanyui]

Thank you for your feedback!

Have you tried to use MergeLocaleMessage?

Ahh... It works! Thanks!

https://vue-i18n.intlify.dev/api/composition.html#mergelocalemessage-locale-message

I've noticed another issue is that I don't sure if it is algolia too terrible (because I encountered similar issue in the official documentation of webpack) or just because its configuration was not set properly, I've tried to search merge in documentation of vue-i18n but didn't found that API:

Perhaps using it will help you solve your problem, I think.
If you could not resolve this, I would like to give us a minimal reproduction repo. pray

[kazupon]

@kuanyui

Ahh... It works! Thanks!

I'm happy to hear it.

I've noticed another issue is that I don't sure if it is algolia too terrible (because I encountered similar issue in the official documentation of webpack) or just because its configuration was not set properly, I've tried to search merge in documentation of vue-i18n but didn't found that API:

Thank you for your feedback!
I'm improving it now.
It will be improved soon.

algolia/docsearch-configs#3957

Thanks!