TypeScript langsys-js-typescript

Framework'ten bağımsız temel SDK — düz TypeScript veya JavaScript, framework gerekmez. React, Vue ve Svelte bağlayıcıları bu paketin üzerindeki ince sarmalayıcılardır; burada ise doğrudan DOM'u yönetir. Her yerde aynı kural geçerlidir: kodunuzdaki ifade hem arama anahtarı hem de temel dil varsayılanıdır.

Add Langsys translation to this TypeScript app.

1. Read https://docs.langsys.dev/llms.txt, then follow
   https://docs.langsys.dev/learn/sdk/typescript/ 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.

Kurulum

npm install langsys-js-typescript

Henüz projeniz veya anahtarlarınız yok mu? Hızlı başlangıç ikisini de iki dakikada sağlar.

Başlat

import { LangsysApp, createSignal } from 'langsys-js-typescript';

const locale = createSignal('en-US');

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

Etkileşimli deneme alanı

İfadeyi ve kategoriyi düzenleyin, parametreleri alan olarak veya ham JSON olarak ayarlayın, ardından dili değiştirin ve gerçek SDK'nın canlı olarak çeviri yapmasını izleyin.

import { t, tSignal } from 'langsys-js-typescript';

const greeting = document.querySelector('#greeting');
const name = 'Sarah';

// tSignal re-emits a fresh t() whenever the locale or catalog
// changes — subscribe once and the element stays translated.
tSignal.subscribe(() => {
  greeting.textContent = t('Hello, {name}!', 'Greetings', { name });
});

Hangisini kullanmalıyım?

Pratik kural: dize → t() · biçimlendirme içeren cümle → Phrase · biçimlendirme içeren bölge → Translate · dokunulmaz → translate="no".

Her vanilla DOM işleyicisi solda canlı çalışır; onu bağlayan kod sağdadır.

İzle Bu temel yapılara ait demo kesitleri şimdilik Svelte sayfasında yer alıyor — arayüz aynı, yalnızca sözdizimi farklı: <Translate> (1:04) · <Phrase> (1:06) · <DontTranslate> (0:34).

import { Translate } from 'langsys-js-typescript';

// <section id="hero">
//   <h3>Welcome to our store</h3>
//   <p>Browse the catalog in your language.</p>
// </section>
new Translate(document.querySelector('#hero'), { category: 'Home' });

import { Phrase } from 'langsys-js-typescript';

// <p id="cart-note">Hi {name}, you have {count} items in your cart.</p>
new Phrase(document.querySelector('#cart-note'), {
  category: 'Cart',
  params: { name: 'Sarah', count: 3 },
});

// The standard translate="no" attribute — the tokenizer
// and renderer skip the subtree, so it stays verbatim while
// the sentence around it translates.
// <p id="signin">Welcome! <span translate="no">This sentence always stays in English.</span> Thanks for visiting!</p>
new Translate(document.querySelector('#signin'), { category: 'Tour' });

Cinsiyet uyumu

İspanyolca, Fransızca veya Rusça {username} has been invited ifadesini, söz konusu kişiye göre çekimler. Langsys bu dalları çeviri sırasında, çoğulları oluşturduğu gibi oluşturur; argümanın adı değişkenin adına _gender eklenerek verilir: male, female veya other. Bildiğiniz her durumda iletin. Nasıl çalışır ve buna ihtiyaç duyan ifadeler nasıl bulunur →

import { t } from 'langsys-js-typescript';

// Pass the agreement argument alongside the value it inflects.
t('{username} has been invited', 'Team', {
  username: user.name,
  username_gender: user.gender, // 'male' | 'female' | 'other'
});

Cinsiyeti bilmiyor musunuz? 'other' değerini açıkça iletin; bu, nötr daldır. Yine de eksikse SDK sizin yerinize other dalını kullanır (langsys-js-typescript 0.6.4 ve sonrası), böylece cümle yine doğru okunur. TypeScript şu anda satır içi params nesnesindeki username_gender alanını reddediyor (TS2353 hatası; düzeltme inceleme aşamasında). Düzeltme yayımlanana kadar önce params nesnesini oluşturun ve değişkeni iletin.

Sunucu tarafı oluşturma

Kataloğu sunucuda getirip istemciye aktarın; böylece SDK kataloğu yeniden getirmeden başlar. SDK çeviriyi tarayıcıda yapar, bu nedenle sunucuda oluşturulan HTML, SDK başlayana kadar temel dilde kalır.

// The server fetches the catalog; the client init starts from it
// instead of fetching it again, and translates once it runs.
LangsysApp.init({
  projectid, key,
  UserLocaleStore: locale,
  initialTranslations,        // fetched on the server
  initialTranslationsLocale,  // fetched on the server
  ssrTokenStrategy: 'client',
});