### Run Vite Development Server

Source: https://github.com/lingui/js-lingui/blob/main/examples/remix-vite-babel/README.md

Starts the Vite development server for the Remix.run application. This command is used during development to preview changes and test functionality.

```shellscript
npm run dev
```

--------------------------------

### Lingui Vite Plugin Setup with SWC

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/installation.mdx

Integrates Lingui.js with Vite using the `@vitejs/plugin-react-swc` (SWC) for faster message extraction and catalog compilation. Requires installing `@lingui/vite-plugin`, `@lingui/swc-plugin`, and `@lingui/react`.

```bash
npm install --save-dev @lingui/vite-plugin @lingui/swc-plugin
npm install --save @lingui/react
```

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import { lingui } from "@lingui/vite-plugin";

export default defineConfig({
  plugins: [
    react({
      plugins: [["@lingui/swc-plugin", {}]],
    }),
    lingui(),
  ],
});
```

--------------------------------

### Run Production Application

Source: https://github.com/lingui/js-lingui/blob/main/examples/remix-vite-babel/README.md

Starts the production version of the Remix.run application. This command is used to run the application after it has been built for deployment.

```shell
npm start
```

--------------------------------

### Lingui Vite Plugin Setup with Babel

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/installation.mdx

Integrates Lingui.js with Vite using the `@vitejs/plugin-react` (Babel) for message extraction and catalog compilation. Requires installing `@lingui/vite-plugin` and `@lingui/react`.

```bash
npm install --save-dev @lingui/vite-plugin
npm install --save @lingui/react
```

```typescript
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { lingui } from "@lingui/vite-plugin";

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ["@lingui/babel-plugin-lingui-macro"],
      },
    }),
    lingui(),
  ],
});
```

--------------------------------

### Lingui Basic Configuration (lingui.config.js)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/installation.mdx

Defines the essential configuration for Lingui.js, specifying source and target locales, and the path for message catalogs. This file is crucial for Lingui to identify and manage translations within your project.

```javascript
import { defineConfig } from "@lingui/cli";

export default defineConfig({
  sourceLocale: "en",
  locales: ["cs", "en"],
  catalogs: [
    {
      path: "<rootDir>/src/locales/{locale}/messages",
      include: ["src"],
    },
  ],
});
```

--------------------------------

### Install Lingui Babel Macro Plugin (npm2yarn)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/installation.mdx

Installs the Lingui Babel macro plugin as a development dependency using npm2yarn. This is a prerequisite for using Lingui with Babel for code transformation.

```bash
npm install --save-dev @lingui/babel-plugin-lingui-macro
```

--------------------------------

### Install Lingui SWC Plugin (npm2yarn)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/installation.mdx

Installs the Lingui SWC plugin as a development dependency using npm2yarn. This is required for integrating Lingui with SWC for faster code transformations.

```bash
npm install --save-dev @lingui/swc-plugin
```

--------------------------------

### Loading Multiple Catalogs with i18n.load

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Example demonstrating how to load multiple locale catalogs at once using the i18n.load method in @lingui/core, maintaining backward compatibility with the previous version's behavior.

```javascript
// i18n.js
import { i18n } from "@lingui/core";
import catalogEn from "./locale/en/messages.js";
import catalogFr from "./locale/fr/messages.js";

i18n.load({
  en: catalogEn.messages,
  fr: catalogFr.messages,
});

```

--------------------------------

### Install Lingui CLI with npm

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/cli.md

Installs the Lingui CLI package as a development dependency using npm. This command is typically run once during project setup.

```bash
npm install --save-dev @lingui/cli
```

--------------------------------

### Install ESLint and Lingui ESLint Plugin

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/eslint-plugin.md

Installs the necessary packages for ESLint and the Lingui ESLint plugin as development dependencies. This is a prerequisite for using the plugin.

```bash
npm install --save-dev eslint
npm install --save-dev eslint-plugin-lingui
```

--------------------------------

### Start local documentation server

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Builds the documentation, watches for changes, and starts a local development server at http://localhost:3000/. This command is used to preview documentation changes in real-time during development.

```sh
yarn start
```

--------------------------------

### Migrating from Lingui Babel Presets to Macros (npm)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Provides instructions for migrating from Lingui's Babel presets to the new macro system using npm. This involves uninstalling the old preset and installing `@lingui/macro` and `babel-plugin-macros`, followed by updating the Babel configuration.

```bash
npm uninstall @lingui/babel-preset-react
npm install --dev @lingui/macro babel-plugin-macros
```

--------------------------------

### Install Lingui Core Package

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/core.md

Installs the @lingui/core package using npm or yarn. This is the first step to integrate LinguiJS internationalization into your project.

```bash
npm install --save @lingui/core

```

```bash
yarn add @lingui/core

```

--------------------------------

### Install Lingui SWC Plugin (npm/yarn)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/swc-plugin.md

Installs the @lingui/swc-plugin as a development dependency using npm or yarn. This is the initial step for integrating Lingui with SWC.

```bash
npm install --save-dev @lingui/swc-plugin

```

```bash
yarn add --dev @lingui/swc-plugin

```

--------------------------------

### Install website dependencies

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Installs all necessary Node.js dependencies for the documentation website, which is built using Docusaurus. This command assumes Yarn is installed and configured.

```sh
yarn install
```

--------------------------------

### Build Production Application

Source: https://github.com/lingui/js-lingui/blob/main/examples/remix-vite-babel/README.md

Builds the Remix.run application for production deployment. This command generates optimized assets and server code for a production environment.

```shell
npm run build
```

--------------------------------

### Start Development Server (npm, yarn, pnpm)

Source: https://github.com/lingui/js-lingui/blob/main/examples/vite-project-react-swc/README.md

Commands to initiate the development server for the project. These commands are compatible with npm, Yarn, and pnpm package managers.

```bash
npm run dev
```

```bash
yarn dev
```

```bash
pnpm dev
```

--------------------------------

### Install @lingui/react

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/react.md

Installs the @lingui/react package using npm or yarn. This package is essential for integrating Lingui's localization features into React applications.

```bash
npm install --save @lingui/react

```

```bash
yarn add @lingui/react

```

--------------------------------

### Simplify non-JSX messages with useLingui macro

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

This example shows how to use the new `useLingui` macro to simplify handling non-JSX messages in React components. It contrasts the previous method requiring `t` or `msg` with `i18n` from `useLingui` hook, with the new, more concise macro usage.

```jsx
```jsx
import { t, msg } from "@lingui/macro";
import { useLingui } from "@lingui/react";

function MyComponent() {
  const { i18n, _ } = useLingui();

  const a = t(i18n)`Text`;
  // or
  const b = _(msg`Text`);
}
```
```

```jsx
```jsx
import { useLingui } from "@lingui/react/macro";

function MyComponent() {
  const { t } = useLingui();

  const a = t`Text`;
}
```
```

--------------------------------

### Install @lingui/metro-transformer

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/metro-transformer.mdx

Install the package as a development dependency using npm or yarn. This command is used to add the necessary transformer to your project.

```bash
npm install --save-dev @lingui/metro-transformer

```

```bash
yarn add --dev @lingui/metro-transformer

```

--------------------------------

### Migrating I18nProvider in React

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

This snippet demonstrates the migration of the I18nProvider in React applications from version 2.x to 3.x. The declarative API using catalogs is replaced by an imperative setup of the i18n instance.

```diff
  import { I18nProvider } from '@lingui/react'
  import { i18n } from "@lingui/core"
+ import { en } from 'make-plural/plurals'
  import { messages } from './locale/en/messages.js'

+ i18n.loadLocaleData('en', { plurals: en })
+ i18n.load('en', messages)
+ i18n.activate('en')

  function App() {
    return (
-     <I18nProvider locale="en" catalogs={{ en: catalogEn }}>
+     <I18nProvider i18n={i18n}>
         <App />
      </I18nProvider>
    )
  }
```

--------------------------------

### Whitespace Handling in JSX Macros (Prettier Example)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

Demonstrates robust whitespace cleaning in Lingui's JSX macros. The example shows how Lingui preserves intended whitespace within JSX Trans components, preventing formatting tools like Prettier from altering extracted messages.

```jsx
// prettier-ignore
<Trans>
  Hello◦{"◦"}◦world
</Trans>
```

--------------------------------

### Install Lingui Vite Plugin (npm2yarn)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/vite-plugin.md

Installs the `@lingui/vite-plugin` as a development dependency. This command is compatible with both npm and yarn package managers.

```bash
npm install --save-dev @lingui/vite-plugin

```

--------------------------------

### Install @lingui/babel-plugin-lingui-macro using npm or yarn

Source: https://github.com/lingui/js-lingui/blob/main/packages/babel-plugin-lingui-macro/README.md

Installs the @lingui/babel-plugin-lingui-macro as a development dependency. This is the first step to integrate LinguiJS macros into your project.

```sh
npm install --save-dev @lingui/babel-plugin-lingui-macro
yarn add --dev @lingui/babel-plugin-lingui-macro
```

--------------------------------

### Install PO Formatter - npm

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This command installs the `@lingui/format-po` package as a development dependency using npm. This package provides the PO catalog formatter for Lingui JS.

```bash
npm install --save-dev @lingui/format-po
```

--------------------------------

### Lingui ESLint Plugin Flat Config - Recommended Setup

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/eslint-plugin.md

Configures the Lingui ESLint plugin using the recommended set of rules within ESLint's Flat Config format. This setup enables all built-in recommended rules for i18n best practices.

```javascript
import pluginLingui from "eslint-plugin-lingui";

export default [
  pluginLingui.configs["flat/recommended"],
  // Any other config...
];
```

--------------------------------

### Print placeholder values in PO comments

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

This example illustrates the new feature that prints placeholder variable names in PO comments for better translation context. It shows how a message with unnamed placeholders like `{0}` is now extracted with descriptive comments.

```js
```js
t`Hello ${user.name} ${value}`;
```
```

```po
```po
#. placeholder {0}: user.name
msgid "Hello {0} {value}"
```
```

--------------------------------

### Loading Single Catalog with i18n.load

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Illustrates the simplified usage of the i18n.load method in @lingui/core, now allowing catalogs to be loaded for a single locale at a time.

```diff
  import { i18n } from "@lingui/core"
  import catalogEn from './locale/en/messages.js'

- i18n.load({ en: catalogEn })
+ i18n.load('en', catalogEn.messages)

```

--------------------------------

### Simplified lingui-extract Command

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-4.md

Demonstrates the simplification of the `lingui extract` command. The `NODE_ENV=development` prefix is no longer required, making the command cleaner and easier to execute.

```bash
lingui extract
```

--------------------------------

### JavaScript: Setup Lingui i18n Singleton

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tutorials/javascript.md

Initializes and activates the Lingui i18n singleton by loading translation messages for a specific locale. It requires the `@lingui/core` package and pre-compiled message catalogs.

```javascript
import { i18n } from "@lingui/core";
import { messages } from "path-to-locale/en/messages.js";

i18n.load("en", messages);
i18n.activate("en");
```

--------------------------------

### Install @lingui/loader

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/loader.md

Installs the @lingui/loader package as a development dependency using npm or yarn.

```bash
npm install --save-dev @lingui/loader
```

```bash
yarn add --dev @lingui/loader
```

--------------------------------

### ESLint Plugin Configuration

Source: https://github.com/lingui/js-lingui/blob/main/website/blog/2024-11-28-announcing-lingui-5.0/index.md

Example of configuring the Lingui ESLint plugin, showing compatibility with both flat configuration (eslint.config.js) and legacy .eslintrc formats. This helps catch common usage errors and enforce best practices.

```json
{
  "plugins": [
    "@lingui"
  ],
  "rules": {
    "@lingui/no-unused-captures": "error",
    "@lingui/no-def-whitespace": "error"
  }
}
```

--------------------------------

### Install PO Gettext Plurals Formatter - npm

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This command installs the `@lingui/format-po-gettext` package as a development dependency using npm. This package is used for reading and writing PO files with gettext-native plurals, useful for localization backends that don't support ICU plural syntax.

```bash
npm install --save-dev @lingui/format-po-gettext
```

--------------------------------

### i18next Context Example (JavaScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Shows how i18next handles context for differentiating translations of the same sentences by using a 'context' option.

```js
import i18next from "i18next";

i18next.t("Right", { context: "direction" });
```

--------------------------------

### Lingui ESLint Plugin Legacy Config - Recommended Setup

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/eslint-plugin.md

Applies the recommended rules for the Lingui ESLint plugin using the legacy `.eslintrc` configuration format. This extends the existing ESLint configuration with Lingui's best practices.

```json
{
  "extends": ["plugin:lingui/recommended"]
}
```

--------------------------------

### Install @lingui/detect-locale

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/locale-detector.md

Installs the @lingui/detect-locale package using npm or yarn. This package is essential for implementing locale detection strategies.

```bash
npm install --save @lingui/detect-locale

```

```bash
yarn add @lingui/detect-locale

```

--------------------------------

### Using Default i18n Instance in @lingui/core

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

This code illustrates the change in @lingui/core where a default i18n instance is now exported, simplifying its usage compared to the previous setupI18n function.

```diff
+ import { i18n } from "@lingui/core"
- import { setupI18n } from "@lingui/core"

- const i18n = setupI18n()
  i18n.activate('en')

```

--------------------------------

### Install development packages with Yarn Workspaces

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Installs all development packages and dependencies for all workspaces within the js-lingui project using Yarn Workspaces. This command ensures all parts of the monorepo are set up correctly.

```sh
yarn
```

--------------------------------

### Install Vue.js Extractor using npm/yarn

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/extractor-vue.md

This command installs the @lingui/extractor-vue package as a development dependency using either npm or yarn.

```bash
npm install --save-dev @lingui/extractor-vue

```

```bash
yarn add --dev @lingui/extractor-vue

```

--------------------------------

### Configure Lingui: Full Consistency Dev/Prod (TypeScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/guides/optimizing-bundle-size.md

This setup ensures full consistency between development and production by stripping all messages in both environments. This approach is useful for catching internationalization issues early. It requires setting `stripMessageField` to true in the macro config and `setMessagesCompiler` to null in the runtime setup.

```typescript
// Macro config
stripMessageField: true;

// Runtime setup
i18n.setMessagesCompiler(null);
```

--------------------------------

### Example Usage of Split Lingui Macros

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

Illustrates the usage of separated Lingui macros in a React component. It imports 'Trans' from '@lingui/react/macro' for JSX elements and 'msg' from '@lingui/core/macro' for core JavaScript string definitions.

```jsx
import { Trans } from "@lingui/react/macro";
import { msg } from "@lingui/core/macro";

const colors = [msg`Red`, msg`Yellow`, msg`Green`];

function MyComponent() {
  <Trans>Hi, my name is {name}</Trans>;
}
```

--------------------------------

### Install JSON formatter for js-lingui

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This command installs the JSON formatter for js-lingui using npm or yarn. The JSON format is used to store messages and comes in minimal and lingui styles.

```bash
npm install --save-dev @lingui/format-json
```

--------------------------------

### React/React Native: Simplified I18nProvider and useLingui interplay

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tutorials/react-native.md

This example illustrates the basic setup of `I18nProvider` and the usage of `useLingui` hook with the `t` macro for translating both static headings and dynamic button titles within a React Native component.

```tsx
import { I18nProvider } from "@lingui/react";
import { Trans, useLingui } from "@lingui/react/macro";
import { i18n } from "@lingui/core";

<I18nProvider i18n={i18n}>
  <AppRoot />
</I18nProvider>;
//...
const Inbox = ({ markAsRead }) => {
  const { t } = useLingui();
  return (
    <View>
      <Text style={styles.heading}>
        <Trans>Message Inbox</Trans>
      </Text>
      <Button onPress={markAsRead} title={t`Mark messages as read`} />
    </View>
  );
};

```

--------------------------------

### Lingui Context Example with Macros (JavaScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Demonstrates Lingui's use of macros to specify context for translations, providing more detail to translators and differentiating messages.

```js
import { msg } from "@lingui/core/macro";

msg({
  message: "Right",
  context: "direction",
});
```

--------------------------------

### Install Crowdin CLI with npm

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tools/crowdin.md

This command installs the Crowdin CLI as a development dependency in your Node.js project using npm. The Crowdin CLI is essential for automating the synchronization of localization files between your project and the Crowdin platform.

```bash
npm install --save-dev @crowdin/cli
```

--------------------------------

### Catalogs Path with Component Name (JSON)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/conf.md

Example of configuring catalogs where the path includes both the locale and a component name token. This allows for organizing catalogs per component within a structured directory.

```json
{
  "catalogs": [
    {
      "path": "<rootDir>/components/{name}/locale/{locale}",
      "include": ["<rootDir>/components/{name}/"]
    }
  ]
}
```

--------------------------------

### Install @lingui/babel-plugin-extract-messages

Source: https://github.com/lingui/js-lingui/blob/main/packages/babel-plugin-extract-messages/README.md

Installs the @lingui/babel-plugin-extract-messages package as a development dependency using npm or yarn. This package is essential for enabling message extraction in your project's build process.

```shell
npm install --save-dev @lingui/babel-plugin-extract-messages
yarn add --dev @lingui/babel-plugin-extract-messages
```

--------------------------------

### Basic Trans Component Usage (React)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/react.md

Provides examples of using the Trans component directly in React for simple translations, translations with dynamic values, including comments for translators, and using components for formatting.

```jsx
import React from "react";
import { Trans } from "@lingui/react";

const MyComponent = () => {
  return (
    <div>
      {/* Simple translation without dynamic values */}
      <Trans id="my.message" message="Hello World" />

      {/* Translation with dynamic values */}
      <Trans id="greeting" message="Hello {name}" values={{ name: "Arthur" }} />

      {/* Translation with a comment for translators */}
      <Trans id="hello.world" message="Hello world" comment="A message that greets the user" />

      {/* Translation with a component for formatting */}
      <Trans
        id="link"
        message="Read <link>Description</link> below."
        components={{ link: <a href="/docs">Documentation</a> }}
      />
    </div>
  );
};

```

--------------------------------

### Lingui Setup: RootLayout for Server Components (TypeScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tutorials/react-rsc.md

This TypeScript code demonstrates how to set up Lingui for server-side rendering within a Next.js application's root layout. It retrieves an I18n instance, makes it available server-side using `setI18n`, and initializes the client-side provider with initial locale and messages. This ensures translations are accessible in server components and passed down to the client.

```tsx
import { setI18n } from "@lingui/react/server";
import { getI18nInstance } from "./appRouterI18n";
import { LinguiClientProvider } from "./LinguiClientProvider";

type Props = {
  params: {
    lang: string;
  };
  children: React.ReactNode;
};

export default function RootLayout({ params: { lang }, children }: Props) {
  const i18n = getI18nInstance(lang); // get a ready-made i18n instance for the given locale
  setI18n(i18n); // make it available server-side for the current request

  return (
    <html lang={lang}>
      <body>
        <LinguiClientProvider initialLocale={lang} initialMessages={i18n.messages}>
          <YourApp />
        </LinguiClientProvider>
      </body>
    </html>
  );
}
```

--------------------------------

### Run Verdaccio locally with Docker

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Starts a local NPM registry using Verdaccio within a Docker container. This registry is used to test local package builds before publishing them to the public NPM registry.

```sh
docker run -d -it --rm --name verdaccio -p 4873:4873 verdaccio/verdaccio
```

--------------------------------

### Check Crowdin CLI Version

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tools/crowdin.md

This command verifies that the Crowdin CLI is installed and accessible by checking its version. It's a basic check to ensure the tool is ready for use.

```bash
npm run crowdin --version
```

--------------------------------

### Lingui ESLint Plugin Flat Config - Custom Setup

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/eslint-plugin.md

Manually configures the Lingui ESLint plugin in Flat Config format, allowing specific rule enablement. This provides granular control over which Lingui rules are applied.

```javascript
import pluginLingui from "eslint-plugin-lingui";

export default [
  {
    plugins: {
      lingui: pluginLingui,
    },
    rules: {
      "lingui/t-call-in-function": "error",
    },
  },
  // Any other config...
];
```

--------------------------------

### Install CSV Formatter for Lingui JS

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

Installs the CSV formatter package for Lingui JS using npm or yarn. This package is a development dependency.

```bash
npm install --save-dev @lingui/format-csv
```

--------------------------------

### Lingui ESLint Plugin Legacy Config - Custom Setup

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/eslint-plugin.md

Configures the Lingui ESLint plugin in the legacy `.eslintrc` format by adding it to the plugins list and specifying individual rules in the rules section. This allows for custom rule selection.

```json
{
  "plugins": ["lingui"],
  "rules": {
    "lingui/no-unlocalized-strings": 2,
    "lingui/t-call-in-function": 2,
    "lingui/no-single-variables-to-translate": 2,
    "lingui/no-expression-in-message": 2,
    "lingui/no-single-tag-to-translate": 2,
    "lingui/no-trans-inside-trans": 2
  }
}
```

--------------------------------

### Using Message Descriptor with i18n._

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Shows the updated usage of the i18n._ method to accept a message descriptor object as its first parameter, allowing for more structured translation definitions.

```javascript
i18n._({
  id: string,
  message?: string,
  comment?: string
})
```

--------------------------------

### Activate Locale and Translate Message with Global i18n Instance

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/core.md

Demonstrates how to load and activate a locale, and then use the global `i18n` instance to translate a message. This example assumes messages are dynamically imported.

```typescript
import { i18n } from "@lingui/core";

/**
 * Load messages for the requested locale and activate it.
 * This function isn't part of the Lingui because there are
 * many ways how to load messages — from REST API, from file, from cache, etc.
 */
async function activate(locale: string) {
  const { messages } = await import(`${locale}/messages.js`);
  i18n.loadAndActivate({ locale, messages });
}

activate("cs");

// returns the Czech translation of "Hello World"
const translation = i18n._("Hello World");

```

--------------------------------

### Lingui JS React Trans Component Example

Source: https://github.com/lingui/js-lingui/blob/main/README.md

Demonstrates how to use the `Trans` component from `@lingui/react/macro` to internationalize JSX content in a React application. It shows how to provide an optional message ID and a comment for translators. The extracted message format is also illustrated.

```javascript
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>
  )
}
```

```po
msgid "msg.docs"
msgstr "Read the <0>documentation</0> for more info."
```

--------------------------------

### Initialize i18next for basic translation

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Initializes the i18next library with a default language ('en') and a simple translation resource. This setup is essential for using i18next's translation capabilities in a JavaScript application.

```javascript
import i18next from "i18next";

i18next.init({
  lng: "en",
  resources: {
    en: {
      translation: {
        key: "Hello world",
      },
    },
  },
});
```

--------------------------------

### CSV Example for Lingui JS

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

Provides an example of the CSV format used by Lingui JS. It consists of two columns: 'messageId' and 'Message'. This format is straightforward for use with spreadsheets and tools that support CSV.

```csv
messageId,Message
msg.common,String for translation
```

--------------------------------

### Basic Message Formatting (react-intl vs Lingui)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/react-intl.md

Demonstrates the basic message formatting syntax for both react-intl and Lingui, which use the ICU MessageFormat. The examples show how to include dynamic values like names and numbers, and handle pluralization within messages.

```jsx
<FormattedMessage
  id="welcome"
  defaultMessage={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
     one {message}
     other {messages}
   }`}
  values={{ name: <b>{name}</b>, unreadCount }}
/>
```

```jsx
<Trans
  id="welcome"
  message={`Hello {name}, you have {unreadCount, number} {unreadCount, plural,
     one {message}
     other {messages}
   }`}
  values={{ name: <b>{name}</b>, unreadCount }}
/>
```

--------------------------------

### Updating Babel Configuration for Lingui Macros

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Shows the change in Babel configuration when migrating from Lingui's presets to macros. The `@lingui/babel-preset-react` is removed from presets, and `macros` is added to the plugins list.

```diff
{
   "presets": [
-      "@lingui/babel-preset-react"
   ],
   "plugins": [
+      "macros",
   ]
}
```

--------------------------------

### Configure SWC Core Version with Yarn Resolutions

Source: https://github.com/lingui/js-lingui/blob/main/examples/vite-project-react-swc/README.md

Specifies the SWC core version to ensure compatibility with the LinguiJS SWC plugin. This example uses Yarn's `resolutions` field in `package.json` to enforce a specific version of `@swc/core`.

```json
{
  "resolutions": {
    "@swc/core": "1.3.56"
  }
}
```

--------------------------------

### Updating Macro API for Pluralization

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

This snippet shows the updated syntax for pluralization macros in @lingui/macro, where the value to be pluralized is now passed as the first argument.

```diff
- plural({ value, one: "# book", other: "# books" })
+ plural(value, { one: "# book", other: "# books" })

```

--------------------------------

### Loading Single Catalog with i18n.load in Lingui v3

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Illustrates the Lingui v3 specific feature of `i18n.load` which allows loading a single catalog for a specific locale. This is useful for incremental loading of translations.

```jsx
// Lingui v3 only
i18n.load("en", require("./locale/en/messages"));
i18n.load("cs", require("./locale/cs/messages"));
```

--------------------------------

### Format dates using Lingui's Intl API

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Demonstrates date and time formatting in Lingui via the `i18n.date()` function, which utilizes the Intl API. It provides examples of formatting with different date and time styles.

```javascript
import { i18n } from "@lingui/core";

const d = new Date("2021-07-23T16:23:00");

i18n.activate("en");
i18n.date(d);
// Returns "7/23/2021"

i18n.date(d, { timeStyle: "medium" });
// Returns "4:23:00 PM"

i18n.date(d, { dateStyle: "medium", timeStyle: "medium" });
// Returns "Jul 23, 2021, 4:23:00 PM"
```

--------------------------------

### Initialize i18n Instance with setupI18n

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/core.md

The `setupI18n` function initializes and returns a new `I18n` instance. It can be configured with an initial locale and other options. While a global `i18n` object is often available, `setupI18n` allows for custom instance creation.

```typescript
import { setupI18n } from "@lingui/core";

const i18n = setupI18n();
```

```typescript
import { setupI18n } from "@lingui/core";

const i18n = setupI18n({ locale: "en" });

// This is a shortcut for:
// const i18n = setupI18n()
// i18n.activate("en")
```

--------------------------------

### Optional Message IDs in Lingui

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/react-intl.md

Demonstrates Lingui's flexibility in handling message IDs. It shows an example where message IDs are optional, and the library automatically generates an ID based on the message content itself.

```html
<p>
  <Trans>Read the <a href="/docs">documentation</a>.</Trans>
</p>
```

--------------------------------

### Publish local packages to Verdaccio registry

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Runs a local release script that publishes the current local build of the js-lingui packages to the configured Verdaccio registry. This makes the local packages available for installation in other projects.

```sh
yarn verdaccio:release
```

--------------------------------

### Importing Lingui Macros for React Components

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Illustrates the code change required when migrating Lingui imports from `@lingui/react` to `@lingui/macro` for components like Trans. This change is necessary to utilize the new macro system.

```diff
- import { Trans } from "@lingui/react"
+ import { Trans } from "@lingui/macro"
```

--------------------------------

### Application Startup with Dynamic Catalog Loading (JavaScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/guides/dynamic-loading-catalogs.md

This JavaScript code demonstrates how to integrate the `dynamicActivate` function into a React application's startup sequence. It uses the `useEffect` hook to call `dynamicActivate` with the `defaultLocale` when the component mounts, ensuring that the initial language catalog is loaded and activated before the application renders. It requires `@lingui/react` and `@lingui/core`.

```jsx
import React, { useEffect } from "react";
import App from "./App";

import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { defaultLocale, dynamicActivate } from "./i18n";

const I18nApp = () => {
  useEffect(() => {
    // With this method we dynamically load the catalogs
    dynamicActivate(defaultLocale);
  }, []);

  return (
    <I18nProvider i18n={i18n}>
      <App />
    </I18nProvider>
  );
};

```

--------------------------------

### Format dates using i18next's Intl API

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Shows date and time formatting in i18next using the Intl API. Examples include basic date display and detailed formatting with specified components like weekday, year, month, and day.

```javascript
import i18next from "i18next";

i18next.t("intlDateTime", { val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)) });
// --> On the 12/20/2012

i18next.t("intlDateTime", {
  val: new Date(Date.UTC(2012, 11, 20, 3, 0, 0)),
  formatParams: {
    val: { weekday: "long", year: "numeric", month: "long", day: "numeric" },
  },
});
// --> On the Thursday, December 20, 2012
```

--------------------------------

### PO Gettext Formatter Example: Custom ID Plural Message

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This example demonstrates how a plural message with a custom ID ('my_message') is exported in the PO Gettext format. It shows the generated msgid, msgid_plural, and msgstr entries, highlighting how the plural property '_someCount_' is used.

```po
#. js-lingui:pluralize_on=someCount
msgid "my_message"
msgid_plural "my_message_plural"
msgstr[0] "Singular case"
msgstr[1] "Case number {someCount}"
```

--------------------------------

### PO Gettext Formatter Example: Custom ICU Comment Prefix

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This example shows how to override the default 'js-lingui:' prefix for ICU comments using the `customICUPrefix` option. It contrasts the default prefix with a custom prefix ('jsi18n:') for clarity.

```po
# with default prefix
#. js-
#. lingui:icu=%7BanotherCount%2C+plural%2C+one+%7BSingular+case%7D+other+%7BCase+number+%7BanotherCount%7D%7D%7D&pluralize_on=anotherCount

# customICUPrefix = jsi18n:
#. jsi18n:icu=%7BanotherCount%2C+plural%2C+one+%7BSingular+case%7D+other+%7BCase+number+%7BanotherCount%7D%7D%7D&pluralize_on=anotherCount
```

--------------------------------

### Pluralization with Czech Language Example

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/guides/plurals.md

Illustrates how to use the `plural` macro when the source language has more complex plural rules, such as Czech. This example defines 'one', 'few', 'many', and 'other' plural forms. Lingui automatically handles the translation and selection of the correct form based on the input number and the target language's rules.

```javascript
plural(numBooks, {
  one: "# kniha",
  few: "# knihy",
  many: "# knihy",
  other: "# knih",
});
```

--------------------------------

### Updating i18n._ Method Signature

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Demonstrates the change in the signature of the i18n._ method. The third parameter for default message has been renamed from 'defaults' to 'message'.

```diff
- i18n._('Welcome / Greetings', { name: 'Joe' }, { defaults: "Hello {name}" })
+ i18n._('Welcome / Greetings', { name: 'Joe' }, { message: "Hello {name}" })

```

--------------------------------

### Lingui Setup with I18nProvider

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/tutorials/react.md

Configures the Lingui internationalization provider for a React application. It imports necessary modules from '@lingui/core' and '@lingui/react', loads and activates a specific language catalog ('en'), and wraps the main application component (Inbox) with I18nProvider to make translations accessible.

```jsx
import React from "react";
import ReactDOM from "react-dom/client";

import { i18n } from "@lingui/core";
import { I18nProvider } from "@lingui/react";
import { messages } from "./locales/en/messages";
import Inbox from "./Inbox";

i18n.load("en", messages);
i18n.activate("en");

const App = () => (
  <I18nProvider i18n={i18n}>
    <Inbox />
  </I18nProvider>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```

--------------------------------

### Changed ExtractorType Public Interface

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-4.md

Highlights the modification to the public interface of `ExtractorType`. The `extract` method signature has been updated to accept `code` and `onMessageExtracted` parameters, and can now return a Promise.

```diff
declare type ExtractorType = {
  match(filename: string): boolean
-   extract(filename: string, targetDir: string, options?: any): void
+   extract(
+    filename: string,
+    code: string,
+    onMessageExtracted: (msg: ExtractedMessage) => void,
+    ctx?: ExtractorCtx
+  ): Promise<void> | void
}
```

--------------------------------

### Minimal JSON Example

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

Demonstrates the 'minimal' style JSON output for Lingui JS. This format provides a flat structure with message IDs as keys and translations as values. It's primarily intended for offline use and sacrifices metadata like the default message, origin, and message flags for a more compact representation.

```json
{
  "messageId": "translation"
}
```

--------------------------------

### Format numbers using Lingui's Intl API

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/misc/i18next.md

Demonstrates number formatting in Lingui using the `i18n.number()` function, which is based on the Intl API. It shows examples of locale-specific formatting and currency formatting.

```javascript
import { i18n } from "@lingui/core";

i18n.activate("en");
i18n.number(12345.678);
// Returns "12,345.678"

i18n.number(12345.678, { style: "currency", currency: "USD" });
// Returns "$12,345.68"

i18n.activate("cs");
i18n.number(12345.678);
// Returns "12 345,678"

i18n.number(12345.678, { style: "currency", currency: "CZK" });
// Returns "12 345,68 Kč"
```

--------------------------------

### I18nProvider Setup for React Application

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/react.md

The I18nProvider component from @lingui/react is used to provide Lingui context to the application. It requires an I18n instance and optionally accepts a defaultComponent for rendering translations. Translations are loaded and activated before rendering the application.

```jsx
import React from "react";
import { I18nProvider } from "@lingui/react";
import { i18n } from "@lingui/core";
import { messages as messagesEn } from "./locales/en/messages.js";

i18n.load({
  en: messagesEn,
});
i18n.activate("en");

const DefaultI18n = ({ children }) => <span>{children}</span>;

const App = () => {
  return (
    <I18nProvider i18n={i18n} defaultComponent={DefaultI18n}>
      // rest of the app
    </I18nProvider>
  );
};

```

--------------------------------

### Restore default NPM registry

Source: https://github.com/lingui/js-lingui/blob/main/CONTRIBUTING.md

Resets the NPM configuration to use the default public NPM registry. This command is important to run after testing with a local registry to ensure future package installations work correctly.

```sh
npm config set registry https://registry.npmjs.org/
```

--------------------------------

### Codemod for Splitting Lingui Macro Imports

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

This command-line instruction utilizes the Lingui codemod tool to automatically update import statements in a project, migrating from the unified '@lingui/macro' to the separated '@lingui/core/macro' and '@lingui/react/macro' packages.

```bash
npx @lingui/codemods split-macro-imports <path>
```

--------------------------------

### PO Gettext Formatter Example: Default ID Plural Message

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/catalog-formats.md

This example illustrates how a plural message without a custom ID is handled by the PO Gettext formatter. It includes the original ICU message in a comment for deserialization and shows the extracted msgid and msgid_plural.

```po
#. js-lingui:icu=%7BanotherCount%2C+plural%2C+one+%7BSingular+case%7D+other+%7BCase+number+%7BanotherCount%7D%7D%7D&pluralize_on=anotherCount
msgid "Singular case"
msgid_plural "Case number {anotherCount}"
msgstr[0] "Singular case"
msgstr[1] "Case number {anotherCount}"
```

--------------------------------

### Configure Lingui: Production Like Development (TypeScript)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/guides/optimizing-bundle-size.md

This configuration allows production to behave like development by keeping original messages and enabling runtime compilation. It's useful for debugging or dynamic catalogs. This involves setting `stripMessageField` to false in the macro config and `setMessagesCompiler` to `compileMessage` in the runtime setup.

```typescript
// Macro config
stripMessageField: false;

// Runtime setup
i18n.setMessagesCompiler(compileMessage);
```

--------------------------------

### Loading Catalogs with i18n.load in Lingui v2 and v3

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-3.md

Demonstrates the usage of the `i18n.load` function to load multiple language catalogs in Lingui versions 2 and 3. It shows how to provide an object where keys are locale identifiers and values are the required message modules.

```jsx
import { i18n } from "@lingui/core";

// Lingui v2 and v3
i18n.load({
  en: require("./locale/en/messages"),
  cs: require("./locale/cs/messages"),
});
```

--------------------------------

### Trans Component for Plurals (React)

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/ref/react.md

Illustrates how to use the Trans component to render pluralized messages using ICU MessageFormat. This example shows a simple pluralization for car counts.

```jsx
import React from "react";
import { Trans } from "@lingui/react";

const CarCount = ({ cars }) => {
  return (
    <Trans
      id="application.pages.carsList"
      message="{count, plural, =1 {# car} other {# cars}}"
      values={{ count: cars.length }}
    />
  );
};

```

--------------------------------

### Split Macro Imports: Core JS and React JSX

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/releases/migration-5.md

This code demonstrates the separation of Lingui macros into core JavaScript and React-specific packages. Imports from '@lingui/macro' are deprecated and will be removed in a future release. Use '@lingui/core/macro' for JS macros and '@lingui/react/macro' for React (JSX) macros.

```diff
- import { t, plural, select, selectOrdinal, defineMessage, msg } from "@lingui/macro";
+ import { t, plural, select, selectOrdinal, defineMessage, msg } from "@lingui/core/macro";

- import { Trans, Plural, Select, SelectOrdinal } from "@lingui/macro";
+ import { Trans, Plural, Select, SelectOrdinal } from "@lingui/react/macro";
```

--------------------------------

### ICU MessageFormat: Select Statement

Source: https://github.com/lingui/js-lingui/blob/main/website/docs/guides/message-format.md

Provides an example of the 'select' statement in ICU MessageFormat, which allows choosing a translation based on a specific string value (e.g., gender). This is crucial for context-dependent translations.

```icu-message-format
{gender, select, male {He replied to your message}
                 female {She replied to your message}
                 other {They replied to your message}}
```