Konten Berbasis Pilihan (Select) / Intlayer

Cara Kerja Select

Dalam Intlayer, konten berbasis pilihan (select) dicapai melalui fungsi select, yang memetakan nilai string sembarang ke konten yang sesuai. Ini setara dengan pesan ICU {value, select, …}, atau pernyataan switch dalam kode aplikasi Anda.

Gunakan select ketika penentu (discriminant) adalah string berbentuk bebas: sebuah status, paket berlangganan, platform, atau peran. Untuk penentu lainnya, Intlayer menyediakan node khusus:

Menyiapkan Konten Berbasis Pilihan

Untuk menyiapkan konten berbasis pilihan di proyek Intlayer Anda, buat modul konten yang menyertakan definisi pilihan Anda. Di bawah ini adalah contoh dalam berbagai format.

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

export default myPostContent;

Jika tidak ada fallback yang dideklarasikan, kunci yang dideklarasikan terakhir akan dianggap sebagai fallback ketika nilai yang diberikan tidak cocok dengan kasus mana pun yang dideklarasikan: persis seperti kontrak cond() dan gender().

Type Safety

Argumen yang diterima disimpulkan dari kasus yang dideklarasikan:

• Tanpa fallback, hanya kasus yang dideklarasikan yang diterima: salah ketik akan menghasilkan kesalahan tipe (type error).
• Dengan fallback, string apa pun akan diterima (karena fallback mencakup nilai yang tidak cocok) sementara kasus yang dideklarasikan tetap menyediakan pelengkapan otomatis (autocompletion).

Mengapa Tidak Menggunakan Objek Biasa?

Sangat menggoda untuk mendeklarasikan objek biasa dan mengindeksnya menggunakan nilai saat runtime (runtime value):

// ❌ Jangan lakukan ini
const { publishStatus } = useIntlayer("my_key");

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

Kompilator (compiler) Intlayer menganalisis kode sumber Anda untuk menghapus konten yang tidak digunakan dan memperkecil (minify) kunci yang tersisa. Akses terkomputasi dinamis (obj[expr]) tidak dapat dianalisis secara statis, sehingga seluruh cabang akan ditandai sebagai opak (opaque): cabang tersebut akan tetap ada di dalam bundle dan kuncinya tidak akan diperkecil.

Dengan menggunakan select(), resolusi kasus terjadi di dalam pemanggilan fungsi alih-alih sebagai akses properti. Kompilator melihatnya sebagai akses bidang statis tunggal, dan mengoptimalkan node secara akurat, persis seperti yang dilakukannya dengan enu(), cond(), atau gender():

// ✅ Lakukan ini
const { publishStatus } = useIntlayer("my_key");

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

Menggunakan Konten Berbasis Pilihan

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");
});

// Render awal
document.getElementById("status")!.textContent = content.publishStatus("draft");

Menggabungkan Select dengan Node Lain

Karena setiap kasus berisi node konten penuh, select dapat dikombinasikan dengan t(), insert(), md(), dll:

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

export default myPostContent;

publishStatus("draft")({ name: "Alice" }); // Output: Alice menyimpan draf

Migrasi dari ICU select

Pesan yang menggunakan argumen select dari ICU diimpor sebagai node select:

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

Akan menjadi:

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

Kasus other pada ICU dinamai ulang menjadi fallback, nama kanonikal di Intlayer untuk semua kasus tangkapan-semua (catch-all). Argumen kedua mencatat nama variabel ICU sehingga saat diekspor, pesan tersebut berubah kembali menjadi string ICU yang sama persis.

Sebagai catatan, pernyataan ICU select di mana kasusnya adalah nilai gender (male / female / other) akan diimpor sebagai node gender.

Sumber Daya Tambahan

Untuk informasi lebih rinci mengenai konfigurasi dan penggunaan, lihat sumber daya berikut:

• Dokumentasi Intlayer CLI
• Dokumentasi Intlayer React
• Dokumentasi Intlayer Next.js

Sumber daya ini memberikan wawasan lebih lanjut tentang cara menyiapkan dan menggunakan Intlayer dalam berbagai lingkungan dan kerangka kerja.