DEV Community

Ramu Narasinga
Ramu Narasinga

Posted on • Originally published at thinkthroo.com

lingui.config.ts file in Twenty, the #1 open-source CRM.

In this article, we will review lingui.config.ts file in Twenty, the #1 open-source CRM. We will look at:

  1. What is Lingui?

  2. lingui.config.ts in Twenty

What is Lingui?

Lingui is an internationalization framework for global products.

It is a JavaScript library for internationalization (i18n) of JavaScript projects. Supports React (including RSC and React Native), Vue, Node.js, and more.

Why choose Lingui?

  1. Universal

  2. Powerful tooling

  3. Full Rich-Text support

  4. AI Translation Ready

  5. Headache-Free Professional Localization

Workflow

  1. Define Messages

  2. Extract

  3. Translate

  4. Compile

  5. Deploy

Example

import { Trans } from "@lingui/react/macro" function App() { return ( <Trans id="msg.docs" // Optional message id comment="Docs link on the website" // Comment for translators, optional > Read the <a href="https://lingui.dev">documentation</a>  for more info. </Trans>  ) } 
Enter fullscreen mode Exit fullscreen mode

Configuration

By default, Lingui looks for the configuration in the following locations:

  • lingui.config.js or lingui.config.ts file exporting a configuration object (recommended).

  • .linguirc file in JSON format.

  • lingui section in package.json.

You can also define the environment variable LINGUI_CONFIG with the path to your config file.

Learn more about config

lingui.config.ts in Twenty

In twenty/packages/twenty-front/lingui.config.ts, you will find the following code:

import { defineConfig } from '@lingui/conf'; import { formatter } from '@lingui/format-po'; import { APP_LOCALES, SOURCE_LOCALE } from 'twenty-shared/translations'; export default defineConfig({ sourceLocale: 'en', locales: Object.values(APP_LOCALES), pseudoLocale: 'pseudo-en', fallbackLocales: { 'pseudo-en': 'en', default: SOURCE_LOCALE, }, catalogs: [ { path: '<rootDir>/src/locales/{locale}', include: ['src'], }, ], catalogsMergePath: '<rootDir>/src/locales/generated/{locale}', compileNamespace: 'ts', format: formatter({ lineNumbers: false, printLinguiId: true }), }); 
Enter fullscreen mode Exit fullscreen mode

For all the options defined in this above code, please refer to documentation.

About me

Hey, my name is Ramu Narasinga. I study codebase architecture in large open-source projects.

Email: ramu.narasinga@gmail.com

Build Shadcn CLI from scratch.

References:

  1. https://github.com/twentyhq/twenty/blob/main/packages/twenty-front/lingui.config.ts

  2. https://lingui.dev/ref/conf

Top comments (0)