Быстрый старт

Требуется Svelte 5. SDK работает с серверным рендерингом SvelteKit. Исходный код на GitHub

Создайте проект

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

Установка

npm install langsys-js-svelte

Инициализация

Инициализируйте Langsys один раз в корневом макете. Он принимает объект конфигурации и доступное для записи хранилище (store) с локалью пользователя.

// 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

Что-то не получается? Напишите нам