Uluslararasılaştırma (i18n)

PreffX, tüm çevirileri yönlendiren, kök düzeyinde tek bir dil sinyali kullanır. Dil bilgisi <html lang="..."> özniteliğinde saklanır ve lang sinyaliyle senkronize edilir; dolayısıyla bu değer değiştirildiğinde tüm sözlükler otomatik olarak güncellenir.

Dil bilgisini okuma

lang yardımcı öğesi, mevcut dil kodunu barındıran, salt okunur bir sinyaldir:

import type { PC } from 'preffx';

export const CurrentLang: PC = (_props, { lang }) => {
    return <span>Current language: {lang}</span>;
};

computed blokları içinde değer, tepkisel (reaktif) olarak takip edilir:

import type { PC } from 'preffx';

export const Caption: PC = (_props, { computed, lang }) => {
    const greeting = computed(() =>
        lang.value === 'ru' ? 'Привет' : 'Hello'
    );
    return <p>{greeting}</p>;
};

Dili değiştirme

Dili değiştirmek için setLang fonksiyonunu çağırın. Bu fonksiyon <html lang> özniteliğine yazar ve buna bağlı olarak tüm sözlükler tarafından kullanılan lang sinyalini günceller.

import type { PC } from 'preffx';

export const LangSwitch: PC = (_props, { setLang }) => {
    return (
        <div>
            <button onClick={() => setLang('en')}>EN</button>
            <button onClick={() => setLang('ru')}>RU</button>
        </div>
    );
};

Basit sözlükler

Dil anahtarlarına sahip düz bir nesne (plain object) geçirin ve ardından computed aracılığıyla aktif olanı seçin:

import type { PC } from 'preffx';

const dictionary = {
    en: { openProfile: 'Open profile', showStats: 'Show statistics' },
    ru: { openProfile: 'Открыть профиль', showStats: 'Показать статистику' }
};

export const App: PC = (_props, { computed, lang }) => {
    const captions = computed(() => dictionary[lang.value] || dictionary.en);
    return (
        <div>
            <button>{captions.openProfile}</button>
            <button>{captions.showStats}</button>
        </div>
    );
};

'dict' içeren tembel sözlükler

Bir yerel ayar büyükse veya eşzamansız olarak yükleniyorsa `dict' yardımcı programını kullanın. Dil kodu → çözümleyicinin (senkronizasyon veya eşzamansız) haritasını alır ve alanları reaktif sinyaller olan bir proxy döndürür. Bir alana değer olarak erişin veya onu işlev olarak çağırın.

import type { APC } from 'preffx';

const getRuDictionary = async () => {
    return {
        openProfile(name: string) {
            return 'Открыть профиль № ' + name;
        },
        showStats: 'Показать статистику'
    };
};

const getEnDictionary = async () => {
    return {
        openProfile(name: string) {
            return 'Open profile № ' + name;
        },
        showStats: 'Show stats'
    };
};

export const App: APC = async (_props, { dict, setLang }) => {
    const initialDict = await getEnDictionary();
    const captions = dict({ ru: getRuDictionary, en: getEnDictionary }, initialDict);

    return (
        <div>
            <button onClick={() => setLang('en')}>EN</button>
            <button onClick={() => setLang('ru')}>RU</button>
            <span>
                <button>{captions.openProfile('42')}</button>
                <button>{captions.showStats}</button>
            </span>
        </div>
    );
};

• dict(resolvers) — ilk argüman: Record<lang, () => Dict | Promise<Dict>>.
• dict(resolvers, initial) — ikinci (isteğe bağlı) argüman, bir çözümleyici (resolver) sonuç üretmeden önce kullanılacak başlangıç ​​nesnesini sağlar.
• Dil değiştiğinde, mevcut lang değerine karşılık gelen çözümleyici otomatik olarak yeniden çalıştırılır.
• Fonksiyon alanları, hesaplanmış sinyaller (computed signals) döndüren çağrılabilir yapılara dönüşür: captions.openProfile('42') reaktiftir.
• Bir alanı reaktif takip olmaksızın okumak için .peek() metodunu kullanın.

Başlangıç ​​dilini ayarlama

Başlangıç ​​lang değeri, createRoot sırasında <html lang> niteliğinden okunur veya açıkça ayarlanabilir:

import { createRoot } from 'preffx';

createRoot({ defaultLang: 'en' }).mount(App);

Yardımcı araçlar (Utils) özeti

Seçenek	Tür	Açıklama
defaultLang	string	Herhangi bir dil ayarlanmadığında/bildirilmediğinde kullanılan yedek dil
setLang	(value) => void	Mevcut dili değiştirir
lang	ReadonlySignal	Mevcut dil (reaktif)
dict	(...) => DictProxy	Dile özgü, reaktif sözlükler