Contenuto Basato su Selezione / Select in Intlayer

Come funziona Select

In Intlayer, il contenuto basato su selezione si ottiene tramite la funzione select, che mappa valori stringa arbitrari al rispettivo contenuto. È l'equivalente di un messaggio {value, select, …} di ICU, o di un'istruzione switch nel codice della tua applicazione.

Usa select quando il discriminante è una stringa in formato libero: uno stato, un piano, una piattaforma, un ruolo. Per gli altri discriminanti, Intlayer fornisce nodi dedicati:

Impostazione del Contenuto Basato su Selezione

Per impostare il contenuto basato su selezione nel tuo progetto Intlayer, crea un modulo di contenuto che includa le tue definizioni di selezione. Di seguito sono riportati esempi in vari formati.

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

export default myPostContent;

Se non viene dichiarato un fallback, l'ultima chiave dichiarata verrà utilizzata come fallback quando il valore fornito non corrisponde ad alcun caso dichiarato: lo stesso contratto di cond() e gender().

Sicurezza dei Tipi

L'argomento accettato viene dedotto dai casi dichiarati:

• Senza un fallback, sono accettati solo i casi dichiarati: un errore di battitura è un errore di tipo.
• Con un fallback, viene accettata qualsiasi stringa (il fallback copre i valori non corrispondenti), mentre i casi dichiarati offrono comunque l'autocompletamento.

Perché non un semplice oggetto?

È allettante dichiarare un semplice oggetto e indicizzarlo con il valore a runtime:

// ❌ Non fare questo
const { publishStatus } = useIntlayer("my_key");

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

Il compilatore di Intlayer analizza il tuo codice sorgente per eliminare il contenuto inutilizzato e minimizzare le chiavi rimanenti. Un accesso computato dinamico (obj[expr]) non può essere risolto staticamente, per cui l'intero ramo viene contrassegnato come opaco: viene mantenuto nel bundle e le sue chiavi restano non minimizzate.

Con select(), la risoluzione del caso avviene all'interno di una chiamata a funzione anziché come accesso a una proprietà. Il compilatore vede un singolo accesso di campo statico e ottimizza il nodo esattamente come enu(), cond() o gender():

// ✅ Fai questo
const { publishStatus } = useIntlayer("my_key");

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

Utilizzo del Contenuto Basato su Selezione

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

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

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

// Rendering iniziale
document.getElementById("status")!.textContent = content.publishStatus("draft");

Combinare Select con altri nodi

Ciascun caso contiene un nodo di contenuto completo, pertanto select si combina con t(), insert(), md() e gli altri:

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

export default myPostContent;

publishStatus("draft")({ name: "Alice" }); // Output: Alice ha salvato una bozza

Migrazione da ICU select

I messaggi che utilizzano l'argomento select di ICU vengono importati come nodi select:

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

diventa

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

Il caso ICU other viene rinominato in fallback, che è il nome canonico in Intlayer per il caso catch-all. Il secondo argomento registra il nome della variabile ICU affinché il messaggio ritorni esattamente alla stessa stringa ICU al momento dell'esportazione.

Un ICU select i cui casi sono valori di genere (male / female / other) viene invece importato come nodo gender.

Risorse Aggiuntive

Per informazioni più dettagliate sulla configurazione e l'uso, fai riferimento alle seguenti risorse:

• Documentazione CLI di Intlayer
• Documentazione React di Intlayer
• Documentazione Next di Intlayer

Queste risorse offrono ulteriori approfondimenti sulla configurazione e l'utilizzo di Intlayer in vari ambienti e framework.