Svelte langsys-js-svelte

Binding Svelte 5 yang tipis di atas langsys-js-typescript — binding kanonis yang sudah matang. Sinyal dasarnya sudah memenuhi kontrak store Svelte, sehingga terjemahan dibaca dengan sintaks store $.

Add Langsys translation to this Svelte app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/svelte/ for the install and setup.
2. The English text in the code is the translation key. Wrap user-facing
   strings as they are: no keys file, no extraction step, and no
   hand-written plural or gender branches (Langsys generates those).
3. Read the Langsys project id and API key from environment variables.
   The write key is for development and servers only; anything shipped
   to the browser gets the read-only key.
4. Keep brand names and user-generated content out of translation.

Instal

npm install langsys-js-svelte

Belum punya proyek atau kunci? Mulai Cepat memberi Anda keduanya dalam dua menit.

Inisialisasi

import { writable } from 'svelte/store';
import { LangsysApp } from 'langsys-js-svelte';

const locale = writable('en-US'); // a standard Svelte writable

await LangsysApp.init({
  projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
  key: import.meta.env.VITE_LANGSYS_API_KEY, // read-only in the browser
  UserLocaleStore: locale,
});

Playground interaktif

Ubah frasa dan kategori, atur parameter sebagai kolom atau JSON mentah, lalu ganti locale dan saksikan SDK asli menerjemahkan secara langsung.

const value = $derived($t("Hello, {name}! You have {count} new messages.", "Greetings", {"name":"Sarah","count":3}));

<script>
  import { t } from 'langsys-js-svelte';
  let name = 'Sarah';
</script>

<p>{$t('Hello, {name}!', 'Greetings', { name })}</p>

Mana yang harus saya gunakan?

Aturan praktis: string → $t · kalimat dengan markup → <Phrase> · area markup → <Translate> · tidak boleh diubah → <DontTranslate>.

Setiap komponen konten dirender langsung di sebelah kiri; kode yang menghasilkannya ada di sebelah kanan — dan potongan demonya berada di atas keduanya.

<script>
  import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Home">
  <h3>Welcome to our store</h3>
  <p>Browse the catalog in your language.</p>
</Translate>

<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
  Hi %name%, you have %count% items in your cart.
</Phrase>

<!-- Inside a translated region, the marked span alone stays verbatim. -->
<Translate category="Tour">
  <p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>
</Translate>

Kesesuaian gender

Bahasa Spanyol, Prancis, atau Rusia memberi infleksi pada {username} has been invited sesuai orang yang dimaksud. Langsys menghasilkan cabang-cabang itu saat penerjemahan — dengan cara yang sama seperti menghasilkan bentuk jamak — dan argumennya dinamai sesuai variabelnya, dengan tambahan _gender: male, female, atau other. Berikan nilainya setiap kali Anda mengetahuinya. Cara kerjanya, dan cara menemukan frasa yang membutuhkannya →

<script>
  import { t } from 'langsys-js-svelte';
  export let user; // user.gender is 'male' | 'female' | 'other'
</script>

<!-- Pass the agreement argument alongside the value it inflects. -->
<p>{$t('{username} has been invited', 'Team',
    { username: user.name, username_gender: user.gender })}</p>

Tidak tahu gendernya? Berikan 'other' secara eksplisit — itu adalah cabang netral. Jika tetap tidak ada, SDK akan memakai cabang other untuk Anda (langsys-js-typescript 0.6.4 dan yang lebih baru), sehingga kalimat tetap terbaca dengan benar.

Blok konten

Sebuah wilayah <Translate> terdaftar sebagai satu blok konten: bagian tersebut diterjemahkan dan ditinjau sebagai satu kesatuan di Translation Manager, tetapi setiap rangkaian teks di dalamnya tetap merupakan frasa tersendiri. Tulis kalimat yang sama di tempat lain, dan terjemahan yang sudah ada akan dipakai ulang.

<Translate category="Home">
    <h3>Welcome to our store</h3>
    <p>Browse the catalog in your language.</p>
    <p>Free shipping on orders over $50.</p>
</Translate>

Kategori

Pustaka i18n lain mengharuskan Anda membuat kunci untuk setiap string karena satu kata bisa memiliki dua arti. Di Langsys, kalimat tetap berada di kode Anda dan kategori yang menjalankan tugas itu: frasa beserta kategorinya adalah kuncinya, sehingga kata yang sama dalam dua kategori menjadi dua terjemahan.

<!-- The phrase plus its category is the key. -->
<a href="/">{$t('Home', 'Main menu')}</a>          <!-- es: Inicio -->
<h2>{$t('Home', 'Home repairs')}</h2>           <!-- es: Hogar -->

Atribut

Sebuah formulir baru setengah diterjemahkan jika teks yang terlihat berubah, sementara placeholder, deskripsi gambar, dan label pembaca layar tetap dalam bahasa Inggris. <Translate> menjangkau semuanya dalam satu proses: placeholder, alt, title, aria-label, dan aria-placeholder diterjemahkan bersama teksnya, tanpa markup tambahan. Apa pun yang ditandai translate="no" dilewati, termasuk elemen turunannya.

<Translate category="Checkout">
    <label>Email address</label>
    <input placeholder="[email protected]" />
    <img src="/lock.svg" alt="Secure checkout" />
    <button aria-label="Place your order">
        Place order
    </button>
</Translate>

Angka & tanggal

Teruskan angka dan tanggal sebagai param, dan SDK akan memformatnya sesuai locale yang ditampilkan, mengikuti CLDR (data locale Unicode): angka diproses melalui Intl.NumberFormat dan Date melalui Intl.DateTimeFormat. Cakupannya lebih dari sekadar pemisah: pengelompokan digit adalah sebuah pola, sehingga 1234567 menjadi 1,234,567 dalam bahasa Inggris AS dan 12,34,567 dalam bahasa Inggris India (en-IN).

Sisi sebaliknya: apa pun yang diberikan sebagai angka akan diperlakukan sebagai kuantitas. Nomor pesanan bukan kuantitas, jadi berikan sebagai string, atau bahasa Jerman akan menampilkan referensi pesanan Anda sebagai 1.048.576.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
    const renewsAt = new Date(2026, 2, 14); // 14 March 2026, local time
</script>

<p>{$t('Balance: {amount}', 'Billing', { amount: 1234.5 })}</p>
<p>{$t('Renews {when}', 'Billing', { when: renewsAt })}</p>

<!-- An order number is not a quantity: pass it as a string. -->
<p>{$t('Order {ref}', 'Billing', { ref: '1048576' })}</p>

Rendering di sisi server

Ambil katalog di server (SvelteKit) dan serahkan ke klien, sehingga SDK mulai berjalan tanpa mengambilnya lagi. SDK menerjemahkan di browser, jadi HTML hasil render server berada dalam bahasa dasar sampai SDK dimulai.

// SvelteKit: +layout.server.ts seeds the catalog, the client init reuses it.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});