How to combine all .po files into one en.po file with extract-experimental?

[manvi-ivnam]

I started using js-lingui in my react-native project.

I followed the tutorial for react-native, I added a @lingui/metro-transformer plugin. I run lingui extract-experimental command, catalogs are created according to entries in config, for example: src/app/navigation/MainNavigator/BottomTabNavigator/i18n/en.po.

lingui.config.js:

export default defineConfig({
  sourceLocale: 'en',
  locales: ['en'],
  catalogs: [],
  experimental: {
    extractor: {
      entries: [
        'src/shared/components/BottomSheets/*/index.tsx',
        'src/app/navigation/MainNavigator/BottomTabNavigator/index.tsx',
        'src/app/screens/*/index.tsx',
      ],
      output: '<rootDir>/{entryDir}/i18n/{locale}',
    },
  },
  catalogsMergePath: 'src/common/i18n/{locale}',
});

Code example:

// it doesn't work.
// Cannot find module ./common/i18n/en.po because it doesn't exist
import { messages } from '../src/common/i18n/en.po'; 

i18n.loadAndActivate({ locale: 'en', messages });

In the code above I get an error that the file is not found.

What needs to be done to combine all .po files into one en.po file?

[timofei-iatsenko]

Unfortunately catalogsMergePath feature is supported only in the old extractor. Could you provide your files layout and what you want to get, i will try to propose a different solution.

[manvi-ivnam]

Thanks for the answer!

I generally misunderstood the purpose of the extract-experimental and I rewrote the lingui.config.js file, now it looks like this

import { defineConfig } from '@lingui/cli';

export default defineConfig({
  sourceLocale: 'en',
  locales: ['en'],
  catalogs: [
    {
      path: 'src/shared/components/BottomSheets/{name}/i18n/{locale}',
      include: ['src/shared/components/BottomSheets/{name}/'],
    },
    {
      path: 'src/screens/{name}/i18n/{locale}',
      include: ['src/b2c/screens/{name}/'],
    },
  ],
  catalogsMergePath: '<rootDir>/src/common/i18n/{locale}',
});

My basic idea is to separate translation files at screens level, but the files should be merged into one output file as it happens when calling a lingui compile command. And the file should be live-reloaded during development.
I tried to achieve this with @lingui/metro-transformer plugin, but I have no idea if this plugin has such functionality or maybe i'm doing something wrong because the resulting file never appears.

For example, I have the following file structure after running the lingui extract command

src/
├─ screens/
│  ├─ LoginScreen/
│  │  ├─ i18n/
│  │  │  ├─ en.po
│  │  ├─ index.tsx
│  ├─ MainScreen/
│  │  ├─ i18n/
│  │  │  ├─ en.po
│  │  ├─ index.tsx
├─ common/
│  ├─ i18n/
│  │  ├─ file_i_want_to_achieve.po

I want to get the result file from the common/i18n/file_i_want_to_achieve.po path, then import the messages from it when the i18n.loadAndActivate({ locale: 'en', messages }); function is called. Then I want to use live-reload on changes in translation files instead of calling the lingui compile all the time. But I don't know how to get file_i_want_to_achieve.po file.

Please tell me what I need to do to achieve this result?

[timofei-iatsenko]

Ok let's take it one by one:

1. If you want to have separate catalogs per screen, this is where experimental extractor could help because it's traversing a dependency tree. It's unlikely that you have fully self-contained screen in one folder, most likely it uses some shared components or utils which could be located outside of the screen component folder.
2. catalogsMergePath works only for compile command, and it basically merge multiple catalogs defined in the catalogs into one per locale on the specified path. Loaders/transformers such as Metro transformer doesn't support this.
3. With your configuration you should get compiled per locale files on the <rootDir>/src/common/i18n/{locale}.js path ready to be imported into bundle.
4. You can run compile in a watch mode if needed.

But basically there no much sense to have different translation files, and then compile everethying into one. It's just made your workflow much harder. What you trying to achieve?

[manvi-ivnam]

Thanks for the reply!

Most likely, the way I use terminology can be misleading, I don't need to compile different .po files into one .po file. I need to automate the process of compiling from different .po files into one .ts file in real time.

All I'm trying to achieve is to get rid of the need to work with one large catalog, because as the project grows it becomes difficult to maintain and merge conflicts occur frequently. In other words, I want to separate the catalogs for ease of development. But I didn't have an answer to the question of how to merge all catalogs into one .ts file automatically when making changes. I missed I can run compile in a watch mode, that really helped. This is what I needed.

To summarize, what solution I came to:

1. I add the paths where I need translations to the catalogs property in the lingui.config.js file. Not necessarily at the screen level, as you really noted, there are also shared components and some utils. I specify the catalogsMergePath by which I compile the resulting file with all the catalogs
2. I use lingui compile --watch to automate the process of compiling catalogs
3. I use src/common/i18n/en.ts to import and call i18n.loadAndActivate({ locale: 'en', messages });

It works.

Thanks again!