Use lingui.js with multiple packages

[sitole]

Hey,
four our frontend we are using monrepository architecture.
We have split codebase per application and library (ui, utils..).

So, now we want to implement Lingui in our UI package. So we want prepare some React components separately with and then use this components in applications. It works well expect translations. We have installed Lingui in this packages and also works well. Its no problem to compile this library. Library is written in TypeScript and React.

But, after this i want use some component in application. If i paster msgid with translation directly into application po file also everything works good and component is translated. But after this i want to run lingui extract for example because i added some another translation to app. But msgid used in external component is not found and its marked as unused and commented.

I know Lingui searching components only in defined paths, but its possible to force Lingui to extract this translations from another package/node_modules folder etc?

Out current configuration

{
  "fallbackLocales": {
    "default": "en"
  },
  "sourceLocale": "en",
  "format": "po",
  "locales": ["en", "cs", "es"],
  "catalogs": [
    {
        path: "src/locales/{locale}/messages",
        include: [
            "<rootDir>/src/**/*"
        ]
    }
  ],
}

[sitole]

For now, we decided to use our own path.
We have EnglishMessages.ts files with simple object {myExampleMessageId: 'Translation', ...}
and then this file is merged with standard output from Lingui.js in application:

const options = {
  en: { ...catalogEN.messages, ...EnglishMessages },
  es: { ...catalogES.messages, ...EnglishMessages },
}

i18n.loadLocaleData(lang, {});
i18n.load(options);
i18n.activate(lang);

So now we can use components from the UI package.
A negative side effect of this solution is that we are not able to extract translations directly using lingui extract from the UI package, but this issue can be solved later.

[semoal]

This is something I want to explore for a long time, how Lingui works with monorepo of UI's and how can these translations co-exist together.
Will try to get some free time and create a repo where we can play and update Lingui to work nicely with monorepos.

[renchap]

I am having a similar issue: In a monorepo, I have both a web React app, a react-native mobile app, and a shared library with some common code.

I am not sure how to properly handle this, as:

• we have many common strings between the web & mobile apps, so it would be great to only translate them once
• we want to have some strings in the shared library translated
• we do not want to ship mobile-only string into our web-app, and the other way around. Strings in the shared library should be in both

Any ideas?

The best option I am thinking about is extracting strings for each project independently, then importing and merging mobile/locale.js + ``shared/locale.jsin the mobile app, andweb/locale.js` + `shared/locale.js` in the web app, but strings need to be translated in each project independently as we get 3 `.po` files.

[Hideman85]

I having the same issue and I'm interesting to know what would be your best practice on it.

I guess it is not that easy to architecture that and I'm having the exact same questioning as @renchap

• How to split the translations where they belong and how to avoid translating multiple times the same entry?
• If we think of merging same entry translated multiple times we could deal with conflict (different trans for saying the similar thing).
• I'm wondering, maybe lingui could aggregate the different translations and treat each entry as an import then we can use the unused code elimination of webpack (or any bundler)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[sitole]

Still actual?

[landsman]

I would love to see this in progress. Is it possible?

[semoal]

Ysss, I'll take care of this as soon as possible!

[timofei-iatsenko]

I will add a bit from my experience. The built-in Angular i18n tooling solve this problem effectively.

Instead of globbing folders, they wrote a plugin for bundler (webpack). It is webpack's responsibility to discover and parse all files used in the current application. So while webpack is bundling your actual application, plugin extract the messages from a code.

Instead of manually pointing extractor to places where msgs potentially might be such as:

monorepo/shared-ui1/src
monorepo/shared-ui2/src
monorepo/shared-ui3/src

You point extractor to your entry points:

monorepo/web-app1/src/main.ts
monorepo/mobile-app1/src/main.ts
monorepo/desktop-app1/src/main.ts

Then extractor automatically (thanks to webpack) follow all imports and discover all files needed for extraction. This effectively solved the issue even with packages which are installed from npm.

The drawbacks of this are slower extraction process and more complicated setup. The plus of it, you can use your existing webpack setup with all yours aliases/path mappings setup.

After such extracting every app in monorepo would have it's own catalog of messages. The web app would not have messages from native and vice versa. Then localization platform will do the rest for you (reuse translation for the same keys)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[mgrosperrin]

Up

[mgrosperrin]

Why has this issue been closed? Nothing has been done yet and the latest status is that @semoal will work on it when he can.

[andrii-bodnar]

@thekip can this issue be resolved by the new experimental extractor feature?

[timofei-iatsenko]

Yes. Attach it to here #1458