@intlayer/docs 7.4.0 → 7.5.0-canary.1

package/docs/pt/intlayer_with_react_router_v7_fs_routes.md

@@ -0,0 +1,570 @@
+---
+createdAt: 2025-12-07
+updatedAt: 2025-12-07
+title: Como traduzir sua aplicação React Router v7 (File-System Routes) – guia i18n 2025
+description: Aprenda como adicionar internacionalização (i18n) à sua aplicação React Router v7 usando Intlayer com roteamento baseado em sistema de arquivos. Siga este guia completo para tornar sua aplicação multilíngue com roteamento consciente de localidade.
+keywords:
+  - Internacionalização
+  - Documentação
+  - Intlayer
+  - React Router v7
+  - fs-routes
+  - File System Routes
+  - React
+  - i18n
+  - TypeScript
+  - Locale Routing
+slugs:
+  - doc
+  - environment
+  - vite-and-react
+  - react-router-v7-fs-routes
+applicationTemplate: https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template
+youtubeVideo: https://www.youtube.com/watch?v=dS9L7uJeak4
+history:
+  - version: 7.3.4
+    date: 2025-12-08
+    changes: Histórico inicial
+---
+
+# Traduza seu site React Router v7 (File-System Routes) usando Intlayer | Internacionalização (i18n)
+
+Este guia demonstra como integrar o **Intlayer** para internacionalização perfeita em projetos React Router v7 usando **roteamento baseado em sistema de arquivos** (`@react-router/fs-routes`) com roteamento consciente de localidade, suporte a TypeScript e práticas modernas de desenvolvimento.
+
+## Índice
+
+<TOC/>
+
+## O que é o Intlayer?
+
+**Intlayer** é uma biblioteca de internacionalização (i18n) inovadora e de código aberto projetada para simplificar o suporte multilíngue em aplicações web modernas.
+
+Com o Intlayer, você pode:
+
+- **Gerenciar traduções facilmente** usando dicionários declarativos no nível do componente.
+- **Localizar dinamicamente metadados**, rotas e conteúdo.
+- **Garantir suporte ao TypeScript** com tipos autogerados, melhorando o preenchimento automático e a detecção de erros.
+- **Aproveitar recursos avançados**, como detecção dinâmica de localidade e alternância de idioma.
+- **Habilitar roteamento consciente de localidade** com o sistema de roteamento baseado em sistema de arquivos do React Router v7.
+
+---
+
+## Guia Passo a Passo para Configurar o Intlayer em uma Aplicação React Router v7 com File-System Routes
+
+<Tab defaultTab="video">
+  <TabItem label="Vídeo" value="video">
+  
+<iframe title="Como traduzir sua aplicação React Router v7 (File-System Routes) usando Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
+
+  </TabItem>
+  <TabItem label="Código" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer-react-router-v7-fs-routes-template?embed=1&ctl=1&file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Como internacionalizar sua aplicação usando Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </TabItem>
+</Tab>
+
+Veja o [Application Template](https://github.com/aymericzip/intlayer-react-router-v7-fs-routes-template) no GitHub.
+
+### Passo 1: Instalar Dependências
+
+Instale os pacotes necessários usando seu gerenciador de pacotes preferido:
+
+```bash packageManager="npm"
+npm install intlayer react-intlayer
+npm install vite-intlayer --save-dev
+npm install @react-router/fs-routes --save-dev
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer react-intlayer
+pnpm add vite-intlayer --save-dev
+pnpm add @react-router/fs-routes --save-dev
+```
+
+- **intlayer**
+
+  O pacote principal que fornece ferramentas de internacionalização para gerenciamento de configuração, tradução, [declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md), transpilação e [comandos CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/index.md).
+
+- **react-intlayer**
+  O pacote que integra o Intlayer com aplicações React. Fornece providers de contexto e hooks para internacionalização em React.
+
+- **vite-intlayer**
+  Inclui o plugin Vite para integrar o Intlayer com o [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), bem como middleware para detectar a localidade preferida do usuário, gerenciar cookies e lidar com redirecionamento de URL.
+
+- **@react-router/fs-routes**
+  O pacote que habilita roteamento baseado em sistema de arquivos para React Router v7.
+
+### Passo 2: Configuração do seu projeto
+
+Crie um arquivo de configuração para configurar os idiomas da sua aplicação:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { type IntlayerConfig, Locales } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    defaultLocale: Locales.ENGLISH,
+    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
+  },
+};
+
+module.exports = config;
+```
+
+> Através deste arquivo de configuração, você pode configurar URLs localizadas, redirecionamento de middleware, nomes de cookies, a localização e extensão das suas declarações de conteúdo, desabilitar os logs do Intlayer no console e mais. Para uma lista completa dos parâmetros disponíveis, consulte a [documentação de configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md).
+
+### Passo 3: Integrar o Intlayer na sua Configuração do Vite
+
+Adicione o plugin intlayer na sua configuração:
+
+```typescript fileName="vite.config.ts"
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [reactRouter(), tsconfigPaths(), intlayer()],
+});
+```
+
+> O plugin Vite `intlayer()` é usado para integrar o Intlayer com o Vite. Ele garante a construção dos arquivos de declaração de conteúdo e os monitora em modo de desenvolvimento. Ele define variáveis de ambiente do Intlayer dentro da aplicação Vite. Além disso, fornece aliases para otimizar o desempenho.
+
+### Passo 4: Configurar Rotas File-System do React Router v7
+
+Configure sua configuração de rotas para usar rotas baseadas em sistema de arquivos com `flatRoutes`:
+
+```typescript fileName="app/routes.ts"
+import type { RouteConfig } from "@react-router/dev/routes";
+import { flatRoutes } from "@react-router/fs-routes";
+import { configuration } from "intlayer";
+
+const routes: RouteConfig = flatRoutes({
+  // Ignorar arquivos de declaração de conteúdo para não serem tratados como rotas
+  ignoredRouteFiles: configuration.content.fileExtensions.map(
+    (fileExtension) => `**/*${fileExtension}`
+  ),
+});
+
+export default routes;
+```
+
+> A função `flatRoutes` do `@react-router/fs-routes` habilita roteamento baseado em sistema de arquivos, onde a estrutura de arquivos no diretório `routes/` determina as rotas da sua aplicação. A opção `ignoredRouteFiles` garante que os arquivos de declaração de conteúdo do Intlayer (`.content.ts`, etc.) não sejam tratados como arquivos de rota.
+
+### Passo 5: Criar Arquivos de Rota com Convenções File-System
+
+Com roteamento baseado em sistema de arquivos, você usa uma convenção de nomenclatura plana onde pontos (`.`) representam segmentos de caminho e parênteses `()` denotam segmentos opcionais.
+
+Crie os seguintes arquivos no seu diretório `app/routes/`:
+
+#### Estrutura de Arquivos
+
+```bash
+app/routes/
+├── ($locale)._layout.tsx        # Wrapper de layout para rotas de locale
+├── ($locale)._index.tsx         # Página inicial (/:locale?)
+├── ($locale)._index.content.ts  # Conteúdo da página inicial
+├── ($locale).about.tsx          # Página About (/:locale?/about)
+└── ($locale).about.content.ts   # Conteúdo da página About
+```
+
+As convenções de nomenclatura:
+
+- `($locale)` - Segmento dinâmico opcional para o parâmetro locale
+- `_layout` - Rota de layout que envolve as rotas filhas
+- `_index` - Rota index (renderiza no caminho pai)
+- `.` (ponto) - Separa segmentos de caminho (ex.: `($locale).about` → `/:locale?/about`)
+
+#### Componente de Layout
+
+```tsx fileName="app/routes/($locale)._layout.tsx"
+import { IntlayerProvider } from "react-intlayer";
+import { Outlet } from "react-router";
+
+import { useI18nHTMLAttributes } from "~/hooks/useI18nHTMLAttributes";
+
+import type { Route } from "./+types/($locale)._layout";
+
+export default function RootLayout({ params }: Route.ComponentProps) {
+  useI18nHTMLAttributes();
+
+  const { locale } = params;
+
+  return (
+    <IntlayerProvider locale={locale}>
+      <Outlet />
+    </IntlayerProvider>
+  );
+}
+```
+
+#### Página Index
+
+```tsx fileName="app/routes/($locale)._index.tsx"
+import { useIntlayer } from "react-intlayer";
+import { LocalizedLink } from "~/components/localized-link";
+
+import type { Route } from "./+types/($locale)._index";
+
+export default function Page() {
+  const { title, description, aboutLink } = useIntlayer("page");
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{description}</p>
+      <nav>
+        <LocalizedLink to="/about">{aboutLink}</LocalizedLink>
+      </nav>
+    </div>
+  );
+}
+```
+
+#### Página About
+
+```tsx fileName="app/routes/($locale).about.tsx"
+import { useIntlayer } from "react-intlayer";
+import { LocalizedLink } from "~/components/localized-link";
+
+import type { Route } from "./+types/($locale).about";
+
+export default function AboutPage() {
+  const { title, content, homeLink } = useIntlayer("about");
+
+  return (
+    <div>
+      <h1>{title}</h1>
+      <p>{content}</p>
+      <nav>
+        <LocalizedLink to="/">{homeLink}</LocalizedLink>
+      </nav>
+    </div>
+  );
+}
+```
+
+### Passo 6: Declarar seu Conteúdo
+
+Crie e gerencie suas declarações de conteúdo para armazenar traduções. Coloque os arquivos de conteúdo ao lado dos seus arquivos de rota:
+
+```tsx fileName="app/routes/($locale)._index.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const pageContent = {
+  key: "page",
+  content: {
+    title: t({
+      en: "Welcome to React Router v7 + Intlayer",
+      es: "Bienvenido a React Router v7 + Intlayer",
+      fr: "Bienvenue sur React Router v7 + Intlayer",
+    }),
+    description: t({
+      en: "Build multilingual applications with ease using React Router v7 and Intlayer.",
+      es: "Cree aplicaciones multilingües fácilmente usando React Router v7 y Intlayer.",
+      fr: "Créez des applications multilingues facilement avec React Router v7 et Intlayer.",
+    }),
+    aboutLink: t({
+      en: "Learn About Us",
+      es: "Aprender Sobre Nosotros",
+      fr: "En savoir plus sur nous",
+    }),
+  },
+} satisfies Dictionary;
+
+export default pageContent;
+```
+
+```tsx fileName="app/routes/($locale).about.content.ts"
+import { t, type Dictionary } from "intlayer";
+
+const aboutContent = {
+  key: "about",
+  content: {
+    title: t({
+      en: "About Us",
+      es: "Sobre Nosotros",
+      fr: "À propos de nous",
+    }),
+    content: t({
+      en: "This is the about page content.",
+      es: "Este es el contenido de la página de información.",
+      fr: "Ceci est le contenu de la page à propos.",
+    }),
+    homeLink: t({
+      en: "Home",
+      es: "Inicio",
+      fr: "Accueil",
+    }),
+  },
+} satisfies Dictionary;
+
+export default aboutContent;
+```
+
+> Suas declarações de conteúdo podem ser definidas em qualquer lugar da sua aplicação, desde que sejam incluídas no diretório `contentDir` (por padrão, `./app`). E correspondam à extensão de arquivo de declaração de conteúdo (por padrão, `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
+
+> Para mais detalhes, consulte a [documentação de declaração de conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md).
+
+### Passo 7: Criar Componentes Locale-Aware
+
+Crie um componente `LocalizedLink` para navegação consciente de localidade:
+
+```tsx fileName="app/components/localized-link.tsx"
+import type { FC } from "react";
+
+import { getLocalizedUrl, type LocalesValues } from "intlayer";
+import { useLocale } from "react-intlayer";
+import { Link, type LinkProps, type To } from "react-router";
+
+const isExternalLink = (to: string) => /^(https?:)?\/\//.test(to);
+
+export const locacalizeTo = (to: To, locale: LocalesValues): To => {
+  if (typeof to === "string") {
+    if (isExternalLink(to)) {
+      return to;
+    }
+
+    return getLocalizedUrl(to, locale);
+  }
+
+  if (isExternalLink(to.pathname ?? "")) {
+    return to;
+  }
+
+  return {
+    ...to,
+    pathname: getLocalizedUrl(to.pathname ?? "", locale),
+  };
+};
+
+export const LocalizedLink: FC<LinkProps> = (props) => {
+  const { locale } = useLocale();
+
+  return <Link {...props} to={locacalizeTo(props.to, locale)} />;
+};
+```
+
+No caso de você querer navegar para as rotas localizadas, você pode usar o hook `useLocalizedNavigate`:
+
+```tsx fileName="app/hooks/useLocalizedNavigate.ts"
+import { useLocale } from "react-intlayer";
+import { type NavigateOptions, type To, useNavigate } from "react-router";
+
+import { locacalizeTo } from "~/components/localized-link";
+
+export const useLocalizedNavigate = () => {
+  const navigate = useNavigate();
+  const { locale } = useLocale();
+
+  const localizedNavigate = (to: To, options?: NavigateOptions) => {
+    const localedTo = locacalizeTo(to, locale);
+
+    navigate(localedTo, options);
+  };
+
+  return localizedNavigate;
+};
+```
+
+### Passo 8: Criar um Componente de Alternância de Locale
+
+Crie um componente para permitir que os usuários alterem idiomas:
+
+```tsx fileName="app/components/locale-switcher.tsx"
+import type { FC } from "react";
+
+import {
+  getHTMLTextDir,
+  getLocaleName,
+  getLocalizedUrl,
+  getPathWithoutLocale,
+  Locales,
+} from "intlayer";
+import { useIntlayer, useLocale } from "react-intlayer";
+import { Link, useLocation } from "react-router";
+
+export const LocaleSwitcher: FC = () => {
+  const { localeSwitcherLabel } = useIntlayer("locale-switcher");
+  const { pathname } = useLocation();
+
+  const { availableLocales, locale } = useLocale();
+
+  const pathWithoutLocale = getPathWithoutLocale(pathname);
+
+  return (
+    <ol>
+      {availableLocales.map((localeItem) => (
+        <li key={localeItem}>
+          <Link
+            aria-current={localeItem === locale ? "page" : undefined}
+            aria-label={`${localeSwitcherLabel.value} ${getLocaleName(localeItem)}`}
+            reloadDocument // Recarregar a página para aplicar o novo locale
+            to={getLocalizedUrl(pathWithoutLocale, localeItem)}
+          >
+            <span>
+              {/* Locale - ex.: FR */}
+              {localeItem}
+            </span>
+            <span>
+              {/* Idioma na sua própria Locale - ex.: Français */}
+              {getLocaleName(localeItem, locale)}
+            </span>
+            <span dir={getHTMLTextDir(localeItem)} lang={localeItem}>
+              {/* Idioma na Locale atual - ex.: Francés com a locale atual definida como Locales.SPANISH */}
+              {getLocaleName(localeItem)}
+            </span>
+            <span dir="ltr" lang={Locales.ENGLISH}>
+              {/* Idioma em inglês - ex.: French */}
+              {getLocaleName(localeItem, Locales.ENGLISH)}
+            </span>
+          </Link>
+        </li>
+      ))}
+    </ol>
+  );
+};
+```
+
+> Para saber mais sobre o hook `useLocale`, consulte a [documentação](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md).
+
+### Passo 9: Adicionar Gerenciamento de Atributos HTML (Opcional)
+
+Crie um hook para gerenciar os atributos HTML lang e dir:
+
+```tsx fileName="app/hooks/useI18nHTMLAttributes.tsx"
+import { getHTMLTextDir } from "intlayer";
+import { useEffect } from "react";
+import { useLocale } from "react-intlayer";
+
+export const useI18nHTMLAttributes = () => {
+  const { locale } = useLocale();
+
+  useEffect(() => {
+    document.documentElement.lang = locale;
+    document.documentElement.dir = getHTMLTextDir(locale);
+  }, [locale]);
+};
+```
+
+Este hook já é usado no componente de layout (`($locale)._layout.tsx`) mostrado no Passo 5.
+
+### Passo 10: Adicionar middleware (Opcional)
+
+Você também pode usar o `intlayerProxy` para adicionar roteamento do lado do servidor à sua aplicação. Este plugin detectará automaticamente a localidade atual com base na URL e definirá o cookie de localidade apropriado. Se nenhuma localidade for especificada, o plugin determinará a localidade mais adequada com base nas preferências de idioma do navegador do usuário. Se nenhuma localidade for detectada, ele redirecionará para a localidade padrão.
+
+> Note que para usar o `intlayerProxy` em produção, você precisa mover o pacote `vite-intlayer` de `devDependencies` para `dependencies`.
+
+```typescript {3,7} fileName="vite.config.ts"
+import { reactRouter } from "@react-router/dev/vite";
+import { defineConfig } from "vite";
+import { intlayer, intlayerProxy } from "vite-intlayer";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [reactRouter(), tsconfigPaths(), intlayer(), intlayerProxy()],
+});
+```
+
+---
+
+## Configurar TypeScript
+
+O Intlayer usa module augmentation para aproveitar os benefícios do TypeScript e tornar sua codebase mais robusta.
+
+Certifique-se de que sua configuração do TypeScript inclui os tipos autogerados:
+
+```json5 fileName="tsconfig.json"
+{
+  // ... suas configurações existentes
+  include: [
+    // ... seus includes existentes
+    ".intlayer/**/*.ts", // Incluir os tipos autogerados
+  ],
+}
+```
+
+---
+
+## Configuração do Git
+
+É recomendado ignorar os arquivos gerados pelo Intlayer. Isso permite que você evite commitá-los no seu repositório Git.
+
+Para fazer isso, você pode adicionar as seguintes instruções ao seu arquivo `.gitignore`:
+
+```plaintext fileName=".gitignore"
+# Ignorar os arquivos gerados pelo Intlayer
+.intlayer
+```
+
+---
+
+## Extensão do VS Code
+
+Para melhorar sua experiência de desenvolvimento com o Intlayer, você pode instalar a extensão oficial **Intlayer VS Code Extension**.
+
+[Instalar no VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Esta extensão fornece:
+
+- **Autocompletar** para chaves de tradução.
+- **Detecção de erros em tempo real** para traduções faltando.
+- **Pré-visualizações inline** do conteúdo traduzido.
+- **Ações rápidas** para criar e atualizar traduções facilmente.
+
+Para mais detalhes sobre como usar a extensão, consulte a [documentação da Extensão Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+
+---
+
+## Ir Além
+
+Para ir além, você pode implementar o [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_visual_editor.md) ou externalizar seu conteúdo usando o [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_CMS.md).
+
+---
+
+## Referências da Documentação
+
+- [Documentação do Intlayer](https://intlayer.org)
+- [Documentação do React Router v7](https://reactrouter.com/)
+- [Documentação do React Router fs-routes](https://reactrouter.com/how-to/file-route-conventions)
+- [Hook useIntlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useIntlayer.md)
+- [Hook useLocale](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/packages/react-intlayer/useLocale.md)
+- [Declaração de Conteúdo](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/content_file.md)
+- [Configuração](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/configuration.md)
+
+Este guia completo fornece tudo o que você precisa para integrar o Intlayer com o React Router v7 usando roteamento baseado em sistema de arquivos para uma aplicação totalmente internacionalizada com roteamento consciente de localidade e suporte a TypeScript.

package/docs/pt/intlayer_with_tanstack.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2025-09-09
+updatedAt: 2025-12-11
 title: Como traduzir seu Tanstack Start – guia i18n 2025
 description: Aprenda como adicionar internacionalização (i18n) à sua aplicação Tanstack Start usando Intlayer. Siga este guia completo para tornar seu app multilíngue com roteamento sensível ao locale.
 keywords:
@@ -646,17 +646,6 @@ export function NotFoundComponent() {
 }
 ```
 
-```tsx fileName="src/routes/__root.tsx"
-import { createRootRoute } from "@tanstack/react-router";
-
-// A rota raiz serve como o layout de nível superior
-// Ela não trata 404s diretamente - isso é delegado às rotas filhas
-// Isso mantém a raiz simples e permite que rotas conscientes de locale gerenciem sua própria lógica 404
-export const Route = createRootRoute({
-  component: Outlet,
-});
-```
-
 ```tsx fileName="src/routes/{-$locale}/route.tsx"
 import { createFileRoute, Outlet, redirect } from "@tanstack/react-router";
 import { validatePrefix } from "intlayer";

package/docs/pt/plugins/sync-json.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-03-13
-updatedAt: 2025-10-05
+updatedAt: 2025-12-13
 title: Plugin Sync JSON
 description: Sincronize os dicionários Intlayer com arquivos JSON i18n de terceiros (i18next, next-intl, react-intl, vue-i18n e mais). Mantenha seu i18n existente enquanto usa o Intlayer para gerenciar, traduzir e testar suas mensagens.
 keywords:
@@ -24,12 +24,15 @@ slugs:
   - sync-json
 youtubeVideo: https://www.youtube.com/watch?v=MpGMxniDHNg
 history:
+  - version: 7.5.0
+    date: 2025-12-13
+    changes: Adicionado suporte para formatos ICU e i18next
   - version: 6.1.6
     date: 2025-10-05
     changes: Documentação inicial do plugin Sync JSON
 ---
 
-## Sync JSON (pontes i18n)
+# Sync JSON (pontes i18n) - Sync JSON com suporte ICU / i18next
 
 <iframe title="Como manter suas traduções JSON sincronizadas com Intlayer" class="m-auto aspect-[16/9] w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/MpGMxniDHNg?autoplay=0&amp;origin=http://intlayer.org&amp;controls=0&amp;rel=1"/>
 
@@ -105,9 +108,27 @@ syncJSON({
   source: ({ key, locale }) => string, // obrigatório
   location?: string, // rótulo opcional, padrão: "plugin"
   priority?: number, // prioridade opcional para resolução de conflitos, padrão: 0
+  format?: 'intlayer' | 'icu' | 'i18next', // formatador opcional, padrão: 'intlayer'
 });
 ```
 
+#### `format` ('intlayer' | 'icu' | 'i18next')
+
+Especifica o formatador a ser usado para o conteúdo do dicionário ao sincronizar arquivos JSON. Isso permite usar diferentes sintaxes de formatação de mensagens compatíveis com várias bibliotecas i18n.
+
+- `'intlayer'`: O formatador Intlayer padrão (padrão).
+- `'icu'`: Usa formatação de mensagens ICU (compatível com bibliotecas como react-intl, vue-i18n).
+- `'i18next'`: Usa formatação de mensagens i18next (compatível com i18next, next-i18next, Solid-i18next).
+
+**Exemplo:**
+
+```ts
+syncJSON({
+  source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
+  format: "i18next", // Usar formatação i18next para compatibilidade
+}),
+```
+
 ## Múltiplas fontes JSON e prioridade
 
 Você pode adicionar múltiplos plugins `syncJSON` para sincronizar diferentes fontes JSON. Isso é útil quando você tem múltiplas bibliotecas i18n ou diferentes estruturas JSON no seu projeto.
@@ -134,6 +155,7 @@ export default defineConfig({
   plugins: [
     // Fonte JSON principal (maior prioridade)
     syncJSON({
+      format: "i18next",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
       location: "main-translations",
       priority: 10,
@@ -141,6 +163,7 @@ export default defineConfig({
 
     // Fonte JSON de fallback (prioridade menor)
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `./fallback-locales/${locale}.json`,
       location: "fallback-translations",
       priority: 5,
@@ -148,6 +171,7 @@ export default defineConfig({
 
     // Fonte JSON legado (prioridade mais baixa)
     syncJSON({
+      format: "i18next",
       source: ({ locale }) => `/my/other/app/legacy/${locale}/messages.json`,
       location: "legacy-translations",
       priority: 1,
@@ -178,6 +202,7 @@ import { syncJSON } from "@intlayer/sync-json-plugin";
 export default {
   plugins: [
     syncJSON({
+      format: "i18next",
       source: ({ key, locale }) => `./locales/${locale}/${key}.json`,
     }),
   ],