Treść Oparta na Wyborze (Select) / Intlayer

Jak Działa Select

W Intlayer treść oparta na wyborze jest osiągana za pomocą funkcji select, która mapuje dowolne wartości znakowe na odpowiadającą im treść. Jest to odpowiednik komunikatu ICU {value, select, …} lub podobne do instrukcji switch w kodzie Twojej aplikacji.

Używaj select, gdy dyskryminatorem (discriminant) jest dowolny ciąg znaków (string): status, plan, platforma lub rola (role). Dla innych dyskryminatorów Intlayer udostępnia dedykowane węzły:

Konfigurowanie Treści Opartej na Wyborze

Aby skonfigurować treść opartą na wyborze w projekcie Intlayer, utwórz moduł treści zawierający Twoje definicje wyboru. Poniżej znajdują się przykłady w różnych formatach.

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

export default myPostContent;

Jeśli nie zostanie zadeklarowany żaden fallback, ostatni zadeklarowany klucz jest uważany za wariant rezerwowy, gdy dostarczona wartość nie pasuje do żadnego z zadeklarowanych przypadków: dokładnie tak samo jak w kontraktach cond() i gender().

Bezpieczeństwo Typów (Type Safety)

Akceptowany argument jest wnioskowany z zadeklarowanych przypadków:

• Bez fallback, akceptowane są tylko zadeklarowane przypadki: literówka spowoduje błąd typu (type error).
• Z fallback, każdy ciąg znaków (string) jest akceptowany (ponieważ fallback pokrywa niedopasowane wartości), podczas gdy zadeklarowane przypadki nadal zapewniają autouzupełnianie.

Dlaczego Nie Używać Zwykłego Obiektu?

Kuszące może być zadeklarowanie zwykłego obiektu i indeksowanie go za pomocą wartości w czasie wykonywania (runtime value):

// ❌ Nie rób tegoconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus[publishType]}</p>;

Kompilator Intlayer analizuje Twój kod źródłowy, aby wyeliminować nieużywane treści i zminifikować pozostałe klucze. Dynamicznie obliczany dostęp (obj[expr]) nie może zostać rozwiązany statycznie, dlatego cała gałąź zostanie oznaczona jako nieprzezroczysta (opaque): zostanie zachowana w bundle'u, a jej klucze nie zostaną zminifikowane.

Korzystając z select(), rozwiązywanie przypadków (case resolution) odbywa się wewnątrz wywołania funkcji, a nie poprzez dostęp do właściwości. Kompilator widzi to jako pojedynczy, statyczny dostęp do pola i optymalizuje ten węzeł dokładnie tak, jak robi to z enu(), cond() lub gender():

// ✅ Rób takconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

Używanie Treści Opartej na Wyborze

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

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

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

// Wstępne renderowanie (Initial render)
document.getElementById("status")!.textContent = content.publishStatus("draft");

Łączenie Select z Innymi Węzłami

Ponieważ każdy przypadek (case) zawiera pełny węzeł treści, select można łączyć z t(), insert(), md() itp.:

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

publishStatus("draft")({ name: "Alice" }); // Wynik: Alice zapisał(a) szkic

Migracja z ICU select

Wiadomości wykorzystujące argument ICU select są importowane jako węzeł select:

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

Zostaną przekształcone na:

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

Przypadek (case) other z ICU jest zmieniany na fallback, co jest kanoniczną nazwą w Intlayer dla wszystkich ogólnych przypadków typu catch-all. Drugi argument przechowuje nazwę zmiennej ICU, dzięki czemu przy eksporcie wiadomość przekształca się dokładnie w ten sam ciąg znaków ICU.

Pamiętaj, że komunikaty ICU select, w których przypadkami są wartości płci (male / female / other), są importowane jako węzeł gender.

Dodatkowe Zasoby

Aby uzyskać bardziej szczegółowe informacje na temat konfiguracji i użytkowania, zapoznaj się z poniższymi zasobami:

• Dokumentacja Intlayer CLI
• Dokumentacja Intlayer React
• Dokumentacja Intlayer Next.js

Powyższe zasoby dostarczają dalszych spostrzeżeń dotyczących konfiguracji i używania Intlayer w różnych środowiskach i frameworkach.