intlayer: Pacote NPM para Gerenciar a Declaração de Conteúdo Multilíngue (i18n)

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

O pacote intlayer permite que você declare seu conteúdo em qualquer lugar do seu código. Ele converte declarações de conteúdo multilíngue em dicionários estruturados que se integram perfeitamente ao seu aplicativo. Com o TypeScript, Intlayer aprimora seu desenvolvimento fornecendo ferramentas mais robustas 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 Seguro em Tipo: Aproveite o TypeScript para garantir que todas as suas definições de conteúdo sejam precisas e sem erros.
• Arquivos de Conteúdo Integrados: Mantenha suas traduções próximas a seus respectivos componentes, aprimorando a manutenibilidade e clareza.

Instalação

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

npm install intlayer

Configurar o Intlayer

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

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.PORTUGUESE, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.PORTUGUESE,  },};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 da sua base de código.

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

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

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

Declare seu conteúdo

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

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      pt: "Olá Mundo",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "Menos de um carro",      "-1": "Menos um carro",      "0": "Nenhum carro",      "1": "Um carro",      ">5": "Alguns carros",      ">19": "Muitos carros",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

Construa seus dicionários

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

npx intlayer build

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

Uma saída típica pode parecer:

.├── .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 a ser usado em seu aplicativo│   │   ├── dictionary.cjs│   │   └── dictionary.mjs│   └── types  # Contém as definições de tipo geradas automaticamente do seu dicionário│       ├── client-component.d.ts│       └── server-component.d.ts└── types    └── intlayer.d.ts  # Contém as definições de tipo geradas automaticamente do Intlayer

Construa recursos i18next

O 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:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // Informa ao Intlayer para gerar arquivos de mensagem para i18next    dictionaryOutput: ["i18next"],    // O diretório onde o Intlayer escreverá seus arquivos JSON de mensagem    i18nextResourcesDir: "./i18next/resources",  },};

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

Saída:

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

Por exemplo, o pt/client-component.json pode se parecer com:

{  "myTranslatedContent": "Olá Mundo",  "zero_numberOfCar": "Nenhum carro",  "one_numberOfCar": "Um carro",  "two_numberOfCar": "Dois carros",  "other_numberOfCar": "Alguns carros"}

Construa dicionários i18next ou next-intl

O 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:

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

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

Saída:

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

Por exemplo, o pt/client-component.json pode se parecer com:

{  "myTranslatedContent": "Olá Mundo",  "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 faltantes
• construir dicionários a partir de suas declarações de conteúdo
• enviar e receber dicionários distantes do seu CMS para seu projeto local

Consulte intlayer-cli para mais informações.

Use o Intlayer em seu aplicativo

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

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

Aplicativo React

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

Aplicativo Next.js

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

Aplicativo Express

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

Funções fornecidas pelo pacote intlayer

O pacote intlayer também fornece algumas funções para ajudar a internacionalizar seu aplicativo.

• getConfiguration()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()