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:

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.

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;

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:

// ❌ Não faça issoconst { 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():

// ✅ Faça issoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

Usando Conteúdo Baseado em Seleção

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;

"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;

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

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

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;

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;

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");}

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");

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:

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;

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:

{publishType, select, draft {draft} published {published} other {Unknown}}

torna-se

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.

Recursos Adicionais

Para informações mais detalhadas sobre configuração e uso, consulte os seguintes recursos:

• Documentação CLI do Intlayer
• Documentação React do Intlayer
• Documentação Next do Intlayer

Esses recursos oferecem mais detalhes sobre como configurar e usar o Intlayer em vários ambientes e frameworks.