Контент на основі вибору (Select) / Intlayer

Як працює Select

В Intlayer контент на основі вибору досягається за допомогою функції select, яка зіставляє довільні рядкові значення з відповідним їм контентом. Це еквівалентно повідомленню ICU {value, select, …}, або подібно до оператора switch у коді вашого застосунку.

Використовуйте select, коли дискримінантом (discriminant) є довільний рядок: статус (status), план (plan), платформа (platform) або роль (role). Для інших дискримінантів Intlayer надає спеціалізовані вузли:

Налаштування контенту на основі вибору

Щоб налаштувати контент на основі вибору у вашому проєкті Intlayer, створіть модуль контенту, який містить ваші визначення вибору. Нижче наведено приклади у різних форматах.

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", // необов'язково
    }),
  },
} satisfies Dictionary;

export default myPostContent;

Якщо fallback не оголошено, останній оголошений ключ розглядається як резервний (fallback), коли надане значення не збігається з жодним із оголошених випадків: точно так само, як у контрактах cond() та gender().

Безпека типів (Type Safety)

Прийманий аргумент виводиться з оголошених випадків:

• Без fallback приймаються лише оголошені випадки: помилка друку призведе до помилки типу (type error).
• З fallback приймається будь-який рядок (оскільки резервний варіант покриває невідповідні значення), тоді як оголошені випадки все ще забезпечують автодоповнення.

Чому б не використовувати звичайний об'єкт?

Може виникнути спокуса оголосити звичайний об'єкт та індексувати його за допомогою значення під час виконання (runtime value):

// ❌ Не робіть цьогоconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus[publishType]}</p>;

Компілятор Intlayer аналізує ваш вихідний код, щоб видалити контент, який не використовується, та мініфікувати ключі, що залишилися. Динамічно обчислюваний доступ (obj[expr]) не може бути дозволений статично, тому вся гілка буде позначена як непрозора (opaque): вона залишиться у збірці (bundle), а її ключі не будуть мініфіковані.

При використанні select() розв'язання випадку (case resolution) відбувається всередині виклику функції, а не як доступ до властивості. Компілятор бачить це як єдиний статичний доступ до поля і точно оптимізує вузол так само, як він це робить з enu(), cond() або gender():

// ✅ Робіть такconst { publishStatus } = useIntlayer("my_key");return <p>{publishStatus(publishType)}</p>;

Використання контенту на основі вибору

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

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

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

// Початковий рендеринг
document.getElementById("status")!.textContent = content.publishStatus("draft");

Комбінування Select з іншими вузлами

Оскільки кожен випадок (case) містить повний вузол контенту, select можна комбінувати з t(), insert(), md() тощо:

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",          uk: "{{name}} зберіг(ла) чернетку",        })      ),      published: insert(        t({          en: "{{name}} published the post",          fr: "{{name}} a publié l’article",          uk: "{{name}} опублікував(ла) пост",        })      ),      fallback: insert(        t({          en: "{{name}} updated the post",          fr: "{{name}} a mis à jour l’article",          uk: "{{name}} оновив(ла) пост",        })      ),    }),  },} satisfies Dictionary;export default myPostContent;

publishStatus("draft")({ name: "Alice" }); // Вивід: Alice зберіг(ла) чернетку

Міграція з ICU select

Повідомлення, що використовують аргумент ICU select, імпортуються як вузол select:

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

Стане:

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

Випадок other з ICU перейменовується на fallback, що є канонічною назвою в Intlayer для всіх резервних (catch-all) випадків. Другий аргумент записує ім'я змінної ICU, тому при експорті повідомлення трансформується назад у точно такий самий рядок ICU.

Зверніть увагу: повідомлення ICU select, у яких випадками є значення статі (male / female / other), натомість імпортуються як вузол gender.

Додаткові ресурси

Для отримання більш детальної інформації щодо конфігурації та використання перегляньте такі ресурси:

• Документація Intlayer CLI
• Документация Intlayer React
• Документація Intlayer Next.js

Ці ресурси надають подальшу інформацію щодо налаштування та використання Intlayer у різних середовищах та фреймворках.