Контент на основе выбора (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 принимаются только объявленные случаи: опечатка приведет к ошибке типа.
• С fallback принимается любая строка (поскольку резервный вариант покрывает несовпадающие значения), в то время как объявленные случаи по-прежнему обеспечивают автодополнение.

Почему не использовать обычный объект?

Может возникнуть соблазн объявить обычный объект и индексировать его, используя значение во время выполнения:

// ❌ Не делайте этого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",          ru: "{{name}} сохранил(а) черновик",        })      ),      published: insert(        t({          en: "{{name}} published the post",          fr: "{{name}} a publié l’article",          ru: "{{name}} опубликовал(а) пост",        })      ),      fallback: insert(        t({          en: "{{name}} updated the post",          fr: "{{name}} a mis à jour l’article",          ru: "{{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 в различных средах и фреймворках.