How to Lingui.js with Vite in TurboRepo

[sohamnandi77]

Hi @thekip , @tricoder42 , @andrii-bodnar

I'm encountering difficulties setting up Lingui.js within my monorepo using TurboRepo. Here's the scenario:

I have a TurboRepo setup where I have a common package containing text to be translated. This common package is utilized by two Vite apps. I've successfully configured Lingui.js within the Vite apps, but I'm struggling to integrate it into the monorepo setup.

I've referred to the documentation provided by Lingui.js regarding monorepo setups (https://lingui.dev/guides/monorepo), but I find it lacking in clarity and practical examples.

Could someone provide guidance or share examples of how to enable Lingui.js within a monorepo setup, particularly when using TurboRepo? Any best practices or tips for configuring Lingui.js in this context would be greatly appreciated!

[timofei-iatsenko]

Updating monorepo docs is what i have in my list for a long time. The difficulty here that every monorepo is different and even in the turborepo it could be setup differently.

I personally use turborepo on my full-time project. We have, what it called, an "integrated monorepo", it means packages are not buildable and publishable but bound together using tsconfigs path aliases.

Imagine that we have 1 application and 2 libraries which this application is consuming.

.
└── projects
    ├── app
    ├── lib1
    └── lib2

Both lib1 and lib2 have a frontend code ad should be processed by extractor.

What has to be done:

1. Createlingui.config.js only in app project
2. Add all libs sources used in the app into catalogs.include

   module.exports = {
     locales,
     sourceLocale: 'en',
     catalogs: [
       {
         path: '<rootDir>/translates/{locale}',
         include: ['<rootDir>/src', '../lib1/src', '../lib2/src'],
       },
     ],
     format: 'po',
   };

3. Add lingui extract command to a package.json of the app only

So in general extract should happend on the application level. Lingui config of each application should include all libraries used in this application. So you should track and keep it in sync manually.

You can go forward and automate process of adding dependecies into lingui.config based on some conventions and assumptions applicable to your monorepo setup:

// Consider all packages from monorepo in the `dependecies`,
//  starts with '@myApp/' and have the same path pattern 
function getMonorepoDependencies() {
  const { dependecies } = require('./package.json');

  const paths = [];
  for (const [name, version] in Object.entries(dependecies)) {
    if (name.startsWith('@myApp/')) {
      const [_, folderName] = name.split('/');
      paths.push('<rootDir>/../' + folderName + '/' + 'src');
    }
  }

  return paths;
}


  catalogs: [
    {
      path: '<rootDir>/translates/{locale}',
      include: ['<rootDir>/src',  ...getMonorepoDependencies()) ],
    },