@intlayer/docs 9.0.2 → 9.1.0

package/docs/pt/dictionary/select.md

@@ -0,0 +1,386 @@
+---
+createdAt: 2026-07-30
+updatedAt: 2026-07-30
+title: Conteúdo Baseado em Seleção
+description: Aprenda como usar o conteúdo baseado em seleção no Intlayer para exibir dinamicamente conteúdo com base em um valor de string arbitrário. Siga esta documentação para implementar eficientemente conteúdos do tipo switch no seu projeto.
+keywords:
+  - Conteúdo Baseado em Seleção
+  - Select Content
+  - Conteúdo Switch
+  - ICU select
+  - Renderização Dinâmica
+  - Documentação
+  - Intlayer
+  - Next.js
+  - JavaScript
+  - React
+slugs:
+  - doc
+  - concept
+  - content
+  - select
+history:
+  - version: 9.1.0
+    date: 2026-07-30
+    changes: "Introduzido o conteúdo baseado em seleção"
+author: aymericzip
+---
+
+# Conteúdo Baseado em Seleção / Select no Intlayer
+
+## Como o Select Funciona
+
+No Intlayer, o conteúdo baseado em seleção é obtido através da função `select`, que mapeia valores de string arbitrários ao seu conteúdo correspondente. É o equivalente a uma mensagem `{value, select, …}` do ICU, ou a uma declaração `switch` no código da sua aplicação.
+
+Use o `select` quando o discriminante for uma string de formato livre: um status, um plano, uma plataforma, um cargo. Para os demais discriminantes, o Intlayer fornece nós dedicados:
+
+| Discriminante         | Nó         |
+| --------------------- | ---------- |
+| Uma quantidade        | `enu()`    |
+| Um booleano           | `cond()`   |
+| Um gênero             | `gender()` |
+| Qualquer outra string | `select()` |
+
+## Configurando Conteúdo Baseado em Seleção
+
+Para configurar o conteúdo baseado em seleção no seu projeto Intlayer, crie um módulo de conteúdo que inclua as suas definições de seleção. Abaixo estão exemplos em vários formatos.
+
+```typescript fileName="**/*.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
+import { select, type Dictionary } from "intlayer";
+
+const myPostContent = {
+  key: "my_key",
+  content: {
+    publishStatus: select({
+      draft: "This post is a draft",
+      published: "This post is live",
+      scheduled: "This post is scheduled",
+      fallback: "Unknown status", // Opcional
+    }),
+  },
+} satisfies Dictionary;
+
+export default myPostContent;
+```
+
+```json5 fileName="**/*.content.json" contentDeclarationFormat="json"
+{
+  "$schema": "https://intlayer.org/schema.json",
+  "key": "my_key",
+  "content": {
+    "publishStatus": {
+      "nodeType": "select",
+      "select": {
+        "draft": "This post is a draft",
+        "published": "This post is live",
+        "scheduled": "This post is scheduled",
+        "fallback": "Unknown status", // Opcional
+      },
+    },
+  },
+}
+```
+
+> Se um `fallback` não for declarado, a última chave declarada será considerada o fallback quando o valor fornecido não corresponder a nenhum caso declarado: o mesmo contrato de `cond()` e `gender()`.
+
+### Segurança de Tipo
+
+O argumento aceito é inferido dos casos declarados:
+
+- Sem um `fallback`, apenas os casos declarados são aceitos: um erro de digitação é um erro de tipo.
+- Com um `fallback`, qualquer string é aceita (o fallback cobre os valores não correspondentes) enquanto os casos declarados continuam fornecendo o preenchimento automático (autocompletion).
+
+## Por Que Não um Objeto Simples?
+
+É tentador declarar um objeto simples e acessá-lo usando o valor em tempo de execução:
+
+```tsx
+// ❌ Não faça isso
+const { publishStatus } = useIntlayer("my_key");
+
+return <p>{publishStatus[publishType]}</p>;
+```
+
+O compilador do Intlayer analisa o seu código fonte para descartar o conteúdo não utilizado e minificar as chaves restantes. Um acesso computado dinâmico (`obj[expr]`) não pode ser resolvido estaticamente, fazendo com que todo o ramo seja marcado como opaco: ele é mantido no pacote (bundle) e as suas chaves não são minificadas.
+
+Com `select()`, a resolução do caso ocorre dentro de uma chamada de função e não como um acesso de propriedade. O compilador enxerga um único acesso de campo estático e otimiza o nó exatamente como faz com `enu()`, `cond()` ou `gender()`:
+
+```tsx
+// ✅ Faça isso
+const { publishStatus } = useIntlayer("my_key");
+
+return <p>{publishStatus(publishType)}</p>;
+```
+
+## Usando Conteúdo Baseado em Seleção
+
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+Para utilizar o conteúdo baseado em seleção num componente React, importe e use o hook `useIntlayer` a partir do pacote `react-intlayer`. Este hook recupera o conteúdo da chave especificada e permite que você passe um valor para selecionar a saída apropriada.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>
+        {
+          /* Saída: This post is a draft */
+          publishStatus("draft")
+        }
+      </p>
+      <p>
+        {
+          /* Saída: This post is live */
+          publishStatus("published")
+        }
+      </p>
+      <p>
+        {
+          /* Saída: Unknown status */
+          publishStatus("Archived")
+        }
+      </p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+Para usar o conteúdo baseado em seleção em componentes clientes do Next.js, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+Para usar o conteúdo baseado em seleção nos componentes Vue, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const { publishStatus } = useIntlayer("my_key");
+</script>
+
+<template>
+  <div>
+    <p>{{ publishStatus("draft") }}</p>
+    <p>{{ publishStatus("published") }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+Para usar o conteúdo baseado em seleção nos componentes Svelte, recupere-o através do hook `useIntlayer`. A store é acessada com `$`. Aqui está um exemplo:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("my_key");
+</script>
+
+<div>
+  <p>{$content.publishStatus("draft")}</p>
+  <p>{$content.publishStatus("published")}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+Para usar o conteúdo baseado em seleção em componentes Preact, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const PostStatus: FC = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+Para usar o conteúdo baseado em seleção em componentes SolidJS, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const PostStatus: Component = () => {
+  const { publishStatus } = useIntlayer("my_key");
+
+  return (
+    <div>
+      <p>{publishStatus("draft")}</p>
+      <p>{publishStatus("published")}</p>
+    </div>
+  );
+};
+
+export default PostStatus;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+Para usar o conteúdo baseado em seleção em componentes Angular, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-post-status",
+  template: `
+    <div>
+      <p>{{ content().publishStatus("draft") }}</p>
+      <p>{{ content().publishStatus("published") }}</p>
+    </div>
+  `,
+})
+export class PostStatusComponent {
+  content = useIntlayer("my_key");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+Para usar o conteúdo baseado em seleção com `vanilla-intlayer`, recupere-o através do hook `useIntlayer`. Aqui está um exemplo:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("my_key").onChange((newContent) => {
+  document.getElementById("status")!.textContent =
+    newContent.publishStatus("draft");
+});
+
+// Renderização inicial
+document.getElementById("status")!.textContent = content.publishStatus("draft");
+```
+
+  </Tab>
+</Tabs>
+
+## Combinando Select com Outros Nós
+
+Cada caso contém um nó de conteúdo completo, de forma que o `select` pode ser composto com `t()`, `insert()`, `md()` e outros:
+
+```typescript fileName="**/*.content.ts" codeFormat="typescript"
+import { insert, select, t, type Dictionary } from "intlayer";
+
+const myPostContent = {
+  key: "my_key",
+  content: {
+    publishStatus: select({
+      draft: insert(
+        t({
+          en: "{{name}} saved a draft",
+          fr: "{{name}} a enregistré un brouillon",
+          pt: "{{name}} salvou um rascunho",
+        })
+      ),
+      published: insert(
+        t({
+          en: "{{name}} published the post",
+          fr: "{{name}} a publié l’article",
+          pt: "{{name}} publicou o post",
+        })
+      ),
+      fallback: insert(
+        t({
+          en: "{{name}} updated the post",
+          fr: "{{name}} a mis à jour l’article",
+          pt: "{{name}} atualizou o post",
+        })
+      ),
+    }),
+  },
+} satisfies Dictionary;
+
+export default myPostContent;
+```
+
+```tsx
+publishStatus("draft")({ name: "Alice" }); // Saída: Alice salvou um rascunho
+```
+
+## Migrando do ICU `select`
+
+Mensagens que usam o argumento ICU `select` são importadas como nós `select`:
+
+```text
+{publishType, select, draft {draft} published {published} other {Unknown}}
+```
+
+torna-se
+
+```typescript
+select(
+  {
+    draft: "draft",
+    published: "published",
+    fallback: "Unknown",
+  },
+  "publishType"
+);
+```
+
+O caso ICU `other` é renomeado para `fallback`, que é o nome canônico do Intlayer para o caso "pega-tudo" (catch-all). O segundo argumento registra o nome da variável ICU para que a mensagem seja revertida exatamente à mesma string do ICU no momento da exportação.
+
+> Um `select` do ICU em que os casos são valores de gênero (`male` / `female` / `other`) é, ao invés disso, importado como um nó [`gender`](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/dictionary/gender.md).
+
+## Recursos Adicionais
+
+Para informações mais detalhadas sobre configuração e uso, consulte os seguintes recursos:
+
+- [Documentação CLI do Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/cli/index.md)
+- [Documentação React do Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_create_react_app.md)
+- [Documentação Next do Intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pt/intlayer_with_nextjs_15.md)
+
+Esses recursos oferecem mais detalhes sobre como configurar e usar o Intlayer em vários ambientes e frameworks.

package/docs/ru/dictionary/content_file.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-12
+updatedAt: 2026-07-30
 title: Файл контента
 description: Узнайте, как настраивать расширения для ваших файлов декларации контента. Следуйте этой документации, чтобы эффективно реализовывать условия в вашем проекте.
 keywords:
@@ -12,6 +12,9 @@ slugs:
   - concept
   - content
 history:
+  - version: 9.1.0
+    date: 2026-07-30
+    changes: "Представлен контент на основе выбора (Select)"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Добавлена поддержка форматов файлов YAML и Markdown"
@@ -256,7 +259,8 @@ Intlayer поддерживает различные типы содержимо
 - **Содержимое Markdown**: Форматированный текст в формате Markdown [см. Содержимое Markdown](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/markdown_content.md)
 - **HTML-содержимое**: Богатое HTML-содержимое с необязательными пользовательскими компонентами [см. HTML-содержимое](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/html.md)
 - **Вложенное содержимое**: Ссылки на другие словари [см. Вложенное содержимое](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/nested_content.md)
-- **Содержимое по полу**: Содержимое, зависящее от пола [см. Содержимое по полу](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/gender_content.md)
+- **Содержимое по половому признаку**: Содержимое, зависящее от пола [см. Содержимое по половому признаку](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/gender_content.md)
+- **Контент на основе выбора**: Контент, изменяющийся в зависимости от произвольного строкового значения [см. Контент на основе выбора](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/select.md)
 - **Содержимое файла**: Ссылки на внешние файлы [см. Содержимое файла](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/file_content.md)
 
 ## Структура словаря
@@ -746,6 +750,25 @@ genderContent: gender({
 
 > См. [Контент по половому признаку (`gender`) Документация](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/gender.md) для получения дополнительной информации.
 
+### Контент на основе выбора (`select`)
+
+Контент, который изменяется в зависимости от произвольного строкового значения — эквивалент ICU `select`:
+
+```typescript
+import { select } from "intlayer";
+
+selectContent: select({
+  draft: "This post is a draft",
+  published: "This post is live",
+  scheduled: "This post is scheduled",
+  fallback: "Unknown status",
+});
+```
+
+Используйте `select`, когда дискриминантом не является ни количество (`enu`), ни логическое значение (`cond`), ни пол (`gender`). Предпочтительнее использовать его, а не индексировать обычный объект значением во время выполнения: компилятор Intlayer не может статически разрешить динамически вычисляемый доступ.
+
+> См. [Контент на основе выбора (`select`) Документация](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ru/dictionary/select.md) для получения дополнительной информации.
+
 ### Контент из файла (`file`)
 
 Ссылки на внешние файлы: