Швидкий старт

Потрібен Svelte 5. SDK працює із серверним рендерингом SvelteKit. Вихідний код на GitHub

Створіть проєкт

Створіть проєкт у Langsys. Вам знадобляться його ID та API-ключ. Запросити ранній доступ

Встановлення

npm install langsys-js-svelte

Ініціалізуйте

Ініціалізуйте Langsys один раз, у кореневому макеті. Він приймає об'єкт конфігурації та стор, доступний для запису, у якому зберігається локаль користувача.

// src/routes/+layout.svelte
<script lang="ts">
    import { writable } from 'svelte/store';
    import { onMount } from 'svelte';
    import { LangsysApp, type iLangsysInitConfig } from 'langsys-js-svelte';

    const userLocale = writable('en-US');

    onMount(async () => {
        const config: iLangsysInitConfig = {
            projectid: import.meta.env.VITE_LANGSYS_PROJECT_ID,
            key: import.meta.env.VITE_LANGSYS_API_KEY,
            UserLocaleStore: userLocale,
            baseLocale: 'en-US',
            ssrTokenStrategy: 'client', // 'client' | 'server' | 'auto'
        };

        const res = await LangsysApp.init(config);
        if (!res.status) console.warn(res.errors?.join(', '));
    });
</script>

Ключі API

Ключ для запису

Для розробки. SDK реєструє нові фрази та блоки контенту в міру їх появи у вашому застосунку.

Ключ лише для читання

Для продакшену. SDK лише отримує переклади й ніколи не створює фрази.

SDK визначає, який тип ключа йому передано, і діє відповідно.

Перекладайте фрази

Використовуйте стор t для окремих рядків. Сама фраза є ключем пошуку й текстом базовою мовою, тож окремий файл ключів не потрібен. Плейсхолдери у фігурних дужках перевіряються на відповідність типів під час компіляції.

<script lang="ts">
    import { t } from 'langsys-js-svelte';
</script>

<h1>{$t('Welcome to my app', 'UI')}</h1>
<p>{$t('Hello, {name}!', 'UI', { name: 'Sarah' })}</p>
<p>{$t('You have {count} new messages', 'Notifications', { count: 3 })}</p>

Використовуйте категорію, коли одна й та сама фраза означає різне в різних місцях:

<strong>{$t('Home', 'Main menu')}</strong>
<strong>{$t('Home', 'Home repairs')}</strong>

Переклад блоків контенту

Використовуйте компонент Translate для більших блоків, де важлива структура. Перекладачі бачать стилізований результат і перекладають його як єдине ціле, при цьому все одно працюючи всередині нього фраза за фразою.

<script lang="ts">
    import { Translate } from 'langsys-js-svelte';
</script>

<Translate category="Blog" tag="article">
    <h1>My article title</h1>
    <p>My content <strong>reads best</strong> in the reader's own language.</p>
</Translate>

Інші SDK та API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Довідник API

Щось не виходить? Надішліть нам повідомлення