@intlayer/docs 9.4.0-canary.0 → 9.4.1

package/docs/pt/dictionary/plurial.md

@@ -29,187 +29,80 @@ author: aymericzip
 
 ## Como o Plural Funciona
 
-<Tabs group="framework">
-  <Tab label="React" value="react">
-
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
-  </Tab>
-  <Tab label="Next.js" value="nextjs">
-
 To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-"use client";
-
-import type { FC } from "react";
-import { useIntlayer } from "next-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
-```
-
-  </Tab>
-  <Tab label="Vue" value="vue">
-
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```vue fileName="**/*.vue"
-<script setup lang="ts">
-import { useIntlayer } from "vue-intlayer";
-
-defineProps<{ count: number }>();
-
-const { totalOpenings } = useIntlayer("total_openings");
-</script>
-
-<template>
-  <div>
-    <p>{{ totalOpenings(count) }}</p>
-  </div>
-</template>
-```
-
-  </Tab>
-  <Tab label="Svelte" value="svelte">
-
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
-
-```svelte fileName="**/*.svelte"
-<script lang="ts">
-import { useIntlayer } from "svelte-intlayer";
-
-export let count: number;
-
-const content = useIntlayer("total_openings");
-</script>
-
-<div>
-  <p>{$content.totalOpenings(count)}</p>
-</div>
-```
-
-  </Tab>
-  <Tab label="Preact" value="preact">
-
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "preact";
-import { useIntlayer } from "preact-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
+To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-  return (
-    <div>
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
+## Quando usar `plural` vs `enu`
 
-export default OpeningsComponent;
-```
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
 
-  </Tab>
-  <Tab label="Solid" value="solid">
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+## Configurando Conteúdo Plural
 
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { Component } from "solid-js";
-import { useIntlayer } from "solid-intlayer";
+Para configurar o conteúdo plural no seu projeto Intlayer, crie um módulo de conteúdo que use o auxiliar `plural`. A categoria `other` é obrigatória e é usada como fallback quando uma localidade não define uma categoria mais específica.
 
-const OpeningsComponent: Component<{ count: number }> = (props) => {
-  const { totalOpenings } = useIntlayer("total_openings");
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { plural, t, type Dictionary } from "intlayer";
 
-  return (
-    <div>
-      <p>{totalOpenings(props.count)}</p>
-    </div>
-  );
-};
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      pt: plural({
+        one: "{{count}} vaga",
+        other: "{{count}} vagas",
+      }),
+    }),
+  },
+} satisfies Dictionary;
 
-export default OpeningsComponent;
+export default openingsContent;
 ```
 
-  </Tab>
-  <Tab label="Angular" value="angular">
-
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="app.component.ts" codeFormat="typescript"
-import { Component, Input } from "@angular/core";
-import { useIntlayer } from "angular-intlayer";
-
-@Component({
-  selector: "app-openings",
-  template: `
-    <div>
-      <p>{{ content().totalOpenings(count) }}</p>
-    </div>
-  `,
-})
-export class OpeningsComponent {
-  @Input() count!: number;
-
-  content = useIntlayer("total_openings");
+```json fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "total_openings",
+  "content": {
+    "totalOpenings": {
+      "nodeType": "translation",
+      "translation": {
+        "en": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} opening",
+            "other": "{{count}} openings"
+          }
+        },
+        "pt": {
+          "nodeType": "plural",
+          "plural": {
+            "one": "{{count}} vaga",
+            "other": "{{count}} vagas"
+          }
+        }
+      }
+    }
+  }
 }
 ```
 
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
+> As categorias suportadas são `zero`, `one`, `two`, `few`, `many`, `other`. Você só precisa declarar as categorias que seu idioma de destino usa, o Intlayer volta para `other` quando nenhuma categoria específica corresponde.
+>
+> O marcador `{{count}}` é substituído automaticamente pela contagem que você passa em tempo de execução. Você também pode incluir outros marcadores (veja [Marcadores personalizados](#custom-placeholders) abaixo).
 
-  </Tab>
-</Tabs>
-## Quando usar `plural` vs `enu`
+## Usando Conteúdo Plural com React Intlayer
 
 <Tabs group="framework">
   <Tab label="React" value="react">
 
-To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+Para usar conteúdo plural dentro de um componente React, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. A localidade ativa e a contagem são combinadas para escolher a categoria CLDR correspondente.
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -220,6 +113,11 @@ const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
 
   return (
     <div>
+      {/* Em inglês:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
       <p>{totalOpenings(count)}</p>
     </div>
   );
@@ -231,7 +129,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Next.js" value="nextjs">
 
-To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Para usar conteúdo plural em Next.js Client Components, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 "use client";
@@ -255,7 +153,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Vue" value="vue">
 
-To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Para usar conteúdo pluralizado em componentes Vue, recupere-o via o hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
 
 ```vue fileName="**/*.vue"
 <script setup lang="ts">
@@ -276,7 +174,7 @@ const { totalOpenings } = useIntlayer("total_openings");
   </Tab>
   <Tab label="Svelte" value="svelte">
 
-To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+Para usar conteúdo plural em componentes Svelte, recupere-o por meio do hook `useIntlayer` e chame-o com uma contagem. A store é acessada com `$`. Aqui está um exemplo:
 
 ```svelte fileName="**/*.svelte"
 <script lang="ts">
@@ -295,7 +193,7 @@ const content = useIntlayer("total_openings");
   </Tab>
   <Tab label="Preact" value="preact">
 
-To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Para usar conteúdo plural em componentes Preact, recupere-o por meio do hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "preact";
@@ -317,7 +215,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Solid" value="solid">
 
-To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Para usar conteúdo plural em componentes SolidJS, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
 
 ```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { Component } from "solid-js";
@@ -339,7 +237,7 @@ export default OpeningsComponent;
   </Tab>
   <Tab label="Angular" value="angular">
 
-To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+Para usar conteúdo plural em componentes Angular, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
 
 ```typescript fileName="app.component.ts" codeFormat="typescript"
 import { Component, Input } from "@angular/core";
@@ -358,121 +256,20 @@ export class OpeningsComponent {
 
   content = useIntlayer("total_openings");
 }
-```
-
-  </Tab>
-  <Tab label="Vanilla JS" value="vanilla">
-
-To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
-
-```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
-import { installIntlayer, useIntlayer } from "vanilla-intlayer";
-
-installIntlayer();
-
-const content = useIntlayer("total_openings").onChange((newContent) => {
-  document.getElementById("openings")!.textContent =
-    newContent.totalOpenings(5);
-});
-
-// Initial render
-document.getElementById("openings")!.textContent = content.totalOpenings(5);
-```
-
-  </Tab>
-</Tabs>
-
-## Configurando Conteúdo Plural
-
-Para configurar o conteúdo plural no seu projeto Intlayer, crie um módulo de conteúdo que use o auxiliar `plural`. A categoria `other` é obrigatória e é usada como fallback quando uma localidade não define uma categoria mais específica.
-
-```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
-import { plural, t, type Dictionary } from "intlayer";
-
-const openingsContent = {
-  key: "total_openings",
-  content: {
-    totalOpenings: t({
-      en: plural({
-        one: "{{count}} opening",
-        other: "{{count}} openings",
-      }),
-      pt: plural({
-        one: "{{count}} vaga",
-        other: "{{count}} vagas",
-      }),
-    }),
-  },
-} satisfies Dictionary;
-
-export default openingsContent;
-```
-
-```json fileName="**/*.content.json" contentDeclarationFormat="json"
-{
-  "$schema": "https://intlayer.org/schema.json",
-  "key": "total_openings",
-  "content": {
-    "totalOpenings": {
-      "nodeType": "translation",
-      "translation": {
-        "en": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} opening",
-            "other": "{{count}} openings"
-          }
-        },
-        "pt": {
-          "nodeType": "plural",
-          "plural": {
-            "one": "{{count}} vaga",
-            "other": "{{count}} vagas"
-          }
-        }
-      }
-    }
-  }
-}
-```
-
-> As categorias suportadas são `zero`, `one`, `two`, `few`, `many`, `other`. Você só precisa declarar as categorias que seu idioma de destino usa, o Intlayer volta para `other` quando nenhuma categoria específica corresponde.
->
-> O marcador `{{count}}` é substituído automaticamente pela contagem que você passa em tempo de execução. Você também pode incluir outros marcadores (veja [Marcadores personalizados](#custom-placeholders) abaixo).
-
-## Usando Conteúdo Plural com React Intlayer
-
-Para usar conteúdo plural dentro de um componente React, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. A localidade ativa e a contagem são combinadas para escolher a categoria CLDR correspondente.
-
-```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
-import type { FC } from "react";
-import { useIntlayer } from "react-intlayer";
-
-const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
-  const { totalOpenings } = useIntlayer("total_openings");
-
-  return (
-    <div>
-      {/* Em inglês:                                  */}
-      {/*  count=0  → "0 openings"   (other)           */}
-      {/*  count=1  → "1 opening"    (one)             */}
-      {/*  count=2  → "2 openings"   (other)           */}
-      {/*  count=21 → "21 openings"  (other)           */}
-      <p>{totalOpenings(count)}</p>
-    </div>
-  );
-};
-
-export default OpeningsComponent;
 ```
 
 Você pode chamar a função retornada de duas maneiras equivalentes:
 
+Para usar conteúdo plural com `vanilla-intlayer`, recupere-o através do hook `useIntlayer` e chame-o com uma contagem. Aqui está um exemplo:
+
 ```tsx
 totalOpenings(21); // atalho: apenas contagem
 totalOpenings({ count: 21 }); // forma explícita
 ```
 
+  </Tab>
+</Tabs>
+
 ## Marcadores personalizados
 
 Strings plurais podem incluir marcadores diferentes de `{{count}}`. Passe-os na forma de objeto junto com `count`:

package/docs/pt/dynamic_dictionaries/variants.md

@@ -523,6 +523,27 @@ Declare antes a variante uma única vez no provedor, exatamente como `locale`:
 
   </Tab>
   <Tab label="Next.js" value="nextjs">
+    <Tabs>
+      <Tab label="Intlayer >=9.4" value=">=9.4">
+
+        ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+        import { IntlayerProvider } from "next-intlayer/server";
+
+        export default async function Layout({ children, params }) {
+          const { locale } = await params;
+          const schoolType = await getSchoolType();
+
+          return (
+            <IntlayerProvider locale={locale} variant={schoolType}>
+              {children}
+            </IntlayerProvider>
+          );
+        }
+        ```
+
+      </Tab>
+      <Tab label="Intlayer <9.4" value="<9.4">
+
     ```tsx fileName="layout.tsx" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
     import { IntlayerServerProvider } from "next-intlayer/server";
     import { IntlayerClientProvider } from "next-intlayer";
@@ -541,6 +562,9 @@ Declare antes a variante uma única vez no provedor, exatamente como `locale`:
     }
     ```
 
+      </Tab>
+    </Tabs>
+
   </Tab>
   <Tab label="Vue" value="vue">
     ```ts fileName="main.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}