intlayer: Pacote NPM para Gerenciar Dicionário Multilíngue (i18n)

Intlayer é um conjunto de pacotes projetados especificamente para desenvolvedores JavaScript. Ele é compatível com frameworks como React, Next.js e Express.js.

O pacote intlayer permite que você declare seu conteúdo em qualquer lugar no seu código. Ele converte declarações de conteúdo multilíngue em dicionários estruturados que se integram perfeitamente ao seu aplicativo. Com TypeScript, Intlayer aprimora seu desenvolvimento fornecendo ferramentas mais fortes e eficientes.

Por que integrar o Intlayer?

• Gerenciamento de Conteúdo com JavaScript: Aproveite a flexibilidade do JavaScript para definir e gerenciar seu conteúdo de forma eficiente.
• Ambiente com Tipagem Segura: Utilize TypeScript para garantir que todas as suas definições de conteúdo sejam precisas e livres de erros.
• Arquivos de Conteúdo Integrados: Mantenha suas traduções próximas aos seus respectivos componentes, melhorando a manutenção e a clareza.

Instalação

Instale o pacote necessário usando seu gerenciador de pacotes preferido:

npm install intlayer

Configurar Intlayer

Intlayer fornece um arquivo de configuração para configurar seu projeto. Coloque este arquivo na raiz do seu projeto.

// Configuração de internacionalizaçãoimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

Exemplo de uso

Com o Intlayer, você pode declarar seu conteúdo de forma estruturada em qualquer lugar do seu código.

Por padrão, o Intlayer procura arquivos com a extensão .content.{ts,tsx,js,jsx,mjs,cjs}.

Você pode modificar a extensão padrão configurando a propriedade contentDir no arquivo de configuração.

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

Declarar seu conteúdo

Aqui está um exemplo de declaração de conteúdo:

// Conteúdo traduzido do componente clienteimport { t, type Dictionary } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      en: "Hello World",      fr: "Bonjour le monde",      es: "Hola Mundo",      pt: "Olá Mundo",    }),    numberOfCar: enu({      "<-1": "Menos de menos um carro",      "-1": "Menos um carro",      "0": "Nenhum carro",      "1": "Um carro",      ">5": "Alguns carros",      ">19": "Muitos carros",    }),  },} satisfies Dictionary;export default clientComponentContent;

Construir seus dicionários

Você pode construir seus dicionários usando o intlayer-cli.

npx intlayer build

Este comando analisa todos os arquivos *.content.*, compila-os e grava os resultados no diretório especificado no seu intlayer.config.ts (por padrão, ./.intlayer).

Uma saída típica pode ser:

.└── .intlayer    ├── dictionary  # Contém o dicionário do seu conteúdo    │   ├── client-component.json    │   └── server-component.json    ├── main  # Contém o ponto de entrada do seu dicionário para ser usado no seu aplicativo    │   ├── dictionary.cjs    │   └── dictionary.mjs    └── types  # Contém as definições de tipo geradas automaticamente do seu dicionário        ├── intlayer.d.ts  # Contém as definições de tipo geradas automaticamente do Intlayer        ├── client-component.d.ts        └── server-component.d.ts

Construir recursos i18next

Intlayer pode ser configurado para construir dicionários para i18next. Para isso, você precisa adicionar a seguinte configuração ao seu arquivo intlayer.config.ts:

// Configuração de saída de mensagensimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Informa ao Intlayer para gerar arquivos de mensagens para i18next    dictionaryOutput: ["i18next"],    // O diretório onde o Intlayer gravará seus arquivos JSON de mensagens    i18nextResourcesDir: "./i18next/resources",  },};

Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

Saída:

.└── i18next    └── resources        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Por exemplo, o en/client-component.json pode ser assim:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "Nenhum carro",  "one_numberOfCar": "Um carro",  "two_numberOfCar": "Dois carros",  "other_numberOfCar": "Alguns carros"}

Construir dicionários next-intl

Intlayer pode ser configurado para construir dicionários para i18next ou next-intl. Para isso, você precisa adicionar a seguinte configuração ao seu arquivo intlayer.config.ts:

// Configuração para next-intlimport { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Informa ao Intlayer para gerar arquivos de mensagens para next-intl    dictionaryOutput: ["next-intl"],    // O diretório onde o Intlayer gravará seus arquivos JSON de mensagens    nextIntlMessagesDir: "./i18next/messages",  },};

Para uma lista completa de parâmetros disponíveis, consulte a documentação de configuração.

Saída:

.└── intl    └── messages        ├── en        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

Por exemplo, o en/client-component.json pode ser assim:

{  "myTranslatedContent": "Hello World",  "zero_numberOfCar": "Nenhum carro",  "one_numberOfCar": "Um carro",  "two_numberOfCar": "Dois carros",  "other_numberOfCar": "Alguns carros"}

Ferramentas CLI

O Intlayer fornece uma ferramenta CLI para:

• auditar suas declarações de conteúdo e completar traduções ausentes
• construir dicionários a partir de suas declarações de conteúdo
• enviar e puxar dicionários distantes do seu CMS para o seu projeto local

Consulte intlayer-cli para mais informações.

Usar Intlayer no seu aplicativo

Uma vez que seu conteúdo foi declarado, você pode consumir seus dicionários Intlayer no seu aplicativo.

O Intlayer está disponível como um pacote para seu aplicativo.

Aplicativo React

Para usar o Intlayer no seu aplicativo React, você pode usar react-intlayer.

Aplicativo Next.js

Para usar o Intlayer no seu aplicativo Next.js, você pode usar next-intlayer.

Aplicativo Express

Para usar o Intlayer no seu aplicativo Express, você pode usar express-intlayer.

Funções fornecidas pelo pacote intlayer

O pacote intlayer também fornece algumas funções para ajudá-lo a internacionalizar seu aplicativo.

• getConfiguration()
• getTranslation()
• getEnumeration()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()