Contenu Basé sur la Sélection / Select dans Intlayer

Comment fonctionne la Sélection (Select)

Dans Intlayer, le contenu basé sur la sélection est réalisé grâce à la fonction select, qui mappe des valeurs de chaîne arbitraires à leur contenu correspondant. C'est l'équivalent d'un message ICU {value, select, …}, ou d'une instruction switch dans le code de votre application.

Utilisez select lorsque le discriminant est une chaîne de caractères libre — un statut, un forfait, une plateforme, un rôle. Pour les autres discriminants, Intlayer fournit des nœuds dédiés :

Configuration du contenu basé sur la sélection

Pour configurer le contenu basé sur la sélection dans votre projet Intlayer, créez un module de contenu qui inclut vos définitions de sélection. Vous trouverez ci-dessous des exemples dans différents formats.

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", // Optionnel
    }),
  },
} satisfies Dictionary;

export default myPostContent;

Si aucun fallback n'est déclaré, la dernière clé déclarée sera prise comme valeur par défaut lorsque la valeur fournie ne correspond à aucun cas déclaré — le même contrat que pour cond() et gender().

Sécurité du typage

L'argument accepté est déduit des cas déclarés :

• Sans fallback, seuls les cas déclarés sont acceptés — une faute de frappe est une erreur de typage.
• Avec un fallback, n'importe quelle chaîne de caractères est acceptée (la valeur par défaut couvre les valeurs non correspondantes) tandis que les cas déclarés sont toujours proposés en autocomplétion.

Pourquoi ne pas utiliser un objet simple ?

Il est tentant de déclarer un objet simple et de l'indexer avec la valeur d'exécution :

// ❌ Ne faites pas cela
const { publishStatus } = useIntlayer("my_key");

return <p>{publishStatus[publishType]}</p>;

Le compilateur Intlayer analyse votre code source pour supprimer le contenu inutilisé et minifier les clés restantes. Un accès calculé dynamique (obj[expr]) ne peut pas être résolu de manière statique, de sorte que toute la branche est marquée comme opaque : elle est conservée dans le bundle et ses clés ne sont pas minifiées.

Avec select(), la résolution du cas se produit à l'intérieur d'un appel de fonction plutôt que comme un accès à une propriété. Le compilateur voit un seul accès à un champ statique et optimise le nœud exactement comme enu(), cond() ou gender() :

// ✅ Faites ceci
const { publishStatus } = useIntlayer("my_key");

return <p>{publishStatus(publishType)}</p>;

Utilisation du contenu basé sur la sélection

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const PostStatus: FC = () => {
  const { publishStatus } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* Sortie : This post is a draft */
          publishStatus("draft")
        }
      </p>
      <p>
        {
          /* Sortie : This post is live */
          publishStatus("published")
        }
      </p>
      <p>
        {
          /* Sortie : 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");
});

// Rendu initial
document.getElementById("status")!.textContent = content.publishStatus("draft");

Combinaison de Select avec d'autres Nœuds

Chaque cas contient un nœud de contenu complet, de sorte que select se combine avec t(), insert(), md() et les autres :

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",
        })
      ),
      published: insert(
        t({
          en: "{{name}} published the post",
          fr: "{{name}} a publié l’article",
        })
      ),
      fallback: insert(
        t({
          en: "{{name}} updated the post",
          fr: "{{name}} a mis à jour l’article",
        })
      ),
    }),
  },
} satisfies Dictionary;

export default myPostContent;

publishStatus("draft")({ name: "Alice" }); // Sortie : Alice a enregistré un brouillon

Migration depuis select d'ICU

Les messages utilisant l'argument select d'ICU sont importés en tant que nœuds select :

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

devient

select(
  {
    draft: "draft",
    published: "published",
    fallback: "Unknown",
  },
  "publishType"
);

Le cas other d'ICU est renommé en fallback, qui est le nom canonique d'Intlayer pour la valeur par défaut de rattrapage. Le deuxième argument enregistre le nom de la variable ICU afin que le message puisse être reconverti exactement dans la même chaîne ICU lors de son exportation.

Un select ICU dont les cas sont des valeurs de genre (male / female / other) est importé en tant que nœud gender à la place.

Ressources Supplémentaires

Pour des informations plus détaillées sur la configuration et l'utilisation, consultez les ressources suivantes :

• Documentation de la CLI Intlayer
• Documentation de React Intlayer
• Documentation de Next Intlayer

Ces ressources offrent des informations approfondies sur la configuration et l'utilisation d'Intlayer dans divers environnements et frameworks.