feat: load remote catalogs with remoteLoader()

[semoal]

This new feature opens a whole world for loading the messages:

Now you could perfectly store your .json, .po, or even .csv files of Lingui in remote environments like an AWS S3, and recover them dynamically.

Basically now you could so something similar to this:

import { i18n } from "@lingui/core"
import { remoteLoader } from "@lingui/loader"

export async function remoteActive(locale: string) {
  const remoteMessages = await fetch(`https://some-api/${locale}/messages`)
  const compiledMessages = remoteLoader(locale, remoteMessages)
  i18n.load(locale, compiledMessages)
  i18n.activate(locale)
}

How does this handle fallbacks?

You can perfectly pass a fallback messages object, it can be a .json file or even a .po file.

import { i18n } from "@lingui/core"
import { remoteLoader } from "@lingui/loader"

import { messages as fallbackMessages } from "./locales/en/messages"

export async function remoteActive(locale: string) {
  const remoteMessages = await fetch(`https://some-api/${locale}/messages`)
  const compiledMessages = remoteLoader(locale, remoteMessages, fallbackMessages)
  i18n.load(locale, compiledMessages)
  i18n.activate(locale)
}

There's pending to write documentation of this, I'll push the documentation along the week since I'm not sure if this will 100% work great

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/lingui-js/js-lingui/HcpZSkoxQjFqNvaAW14p3DqpMLNe
✅ Preview: https://js-lingui-git-feat-remote-loader-lingui-js.vercel.app

[github-actions]

size-limit report 📦

Path	Size
./packages/core/build/cjs/core.production.min.js	2.78 KB (0%)
./packages/detect-locale/build/cjs/detect-locale.production.min.js	798 B (0%)
./packages/react/build/cjs/react.production.min.js	4.85 KB (0%)
./packages/core/build/esm/index.js	2.75 KB (0%)
./packages/core/build/esm/dev.js	7.01 KB (0%)
./packages/detect-locale/build/esm/index.js	852 B (0%)
./packages/react/build/esm/index.js	4.83 KB (0%)

[jsefiani]

Hey @semoal, sorry for reaching out, considering it's already been 4 years since you introduced this feature. Is there a reason why it didn't end up in the documentation? Should we not use it or?

[timofei-iatsenko]

@jsefiani there is a better way to achieve the same functionality. This loader is abandoned and not published since Lingui@3

If you want to just load catalogs from the server, you can put them on CDN already pre-compiled.

If you want to compile catalogs on the fly, you can use lambda / cloud functions and use @lingui/message-utils to compile catalogs on your own on the server.

You also can compile catalogs using @lingui/message-utils in the browser, but that would add an additional weight to the bundle.

You also can also use Crowdin, they have a plugin for lingui which will provide OTA delivery for messages with proper compilation.