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 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():

// ✅ Faça isso
const { 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.