Fetching translations over the network

[trevcodesjs]

Hey Lingui community!

I've been exploring Lingui for my i18n needs, and I have a few questions and topics I'd like to discuss with the community:

It seems that Lingui doesn't natively support fetching translations over the network. Can someone confirm if this is correct? If so, are there plans to add this feature in future releases? What are the recommended approaches for projects that require dynamic loading of translations?

The reason I ask is because I would love to decouple translation updates from our web app deploys. Has anyone successfully implemented a system where translations can be updated independently of code deployments using Lingui?

I appreciate any insights and thanks in advance for the help!

[timofei-iatsenko]

Hello,

It's possible to load translations over the network. However there are some difficulties:

1. Catalogs should be compiled before consumed by the library, even if you choose JSON format
2. There are nothing to fallback in the source code, so if your translation catalog would be outdated you will see an id instead of default message in english.

To compile catalogs, usually you need to use lingui cli or lingui loader for bundler. Depending on how you are going to manage translation that may or may not work for you. Possible approaches are:

1. If you use TMS, and it has an OTA delivery, you could write a server-side code which works as a proxy , taking translations from the TMS, compiling them using lingui functions and returning to your application.
2. If you manage translation manually, you can compile catalogs in your pipeline, and then upload them to the storage (say S3). Actually, you can do the same with TMS, create a job which download catalogs from TMS, compile & upload.
3. AFAIK Crowdin natively supported OTA delivery with catalog compilation for lingui.

Here is a snippet how to compile catalogs using lingui functions

import { getConfig } from "@lingui/conf"
import {
  createCompiledCatalog,
  getCatalogs,
  getCatalogForFile,
} from "@lingui/cli/api"

const config = getConfig()
const filePath = "/my/translation.po"

const fileCatalog = getCatalogForFile(filePath, await getCatalogs(config))

if (!fileCatalog) {
  throw new Error(
    `Requested resource ${filePath} is not matched to any of your catalogs paths specified in "lingui.config".

Your catalogs:
${config.catalogs.map((c) => c.path).join("\n")}

Working dir is: 
${process.cwd()}

Please check that \`catalogs.path\` is filled properly.\n`
  )
}

const { locale, catalog } = fileCatalog

const messages = await catalog.getTranslations(locale, {
  fallbackLocales: config.fallbackLocales,
  sourceLocale: config.sourceLocale,
})

const strict = process.env.NODE_ENV !== "production"

const compiled = createCompiledCatalog(locale, messages, {
  strict,
  namespace: "json",
  pseudoLocale: config.pseudoLocale,
})

In the future, we probably need to create a more ergonomic api for compiling catalogs for the OTA

[andrii-bodnar]

AFAIK Crowdin natively supported OTA delivery with catalog compilation for lingui.

Yes, Crowdin has a Lingui String Exporter application that allows new translations to be delivered to the Lingui application over-the-air using the CDN feature.

[trevcodesjs]

thank you, this is helpful!