Início rápido

Requer Svelte 5. O SDK funciona com a renderização no servidor do SvelteKit. Código-fonte no GitHub

Crie um projeto

Crie um projeto na Langsys. Você vai precisar do ID do projeto e de uma chave de API. Solicitar acesso antecipado

Instalar

npm install langsys-js-svelte

Inicializar

Inicialize o Langsys uma vez, no seu layout raiz. Ele recebe um objeto de configuração e um store gravável que guarda o locale do usuário.

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

Chaves de API

Chave de escrita

Para desenvolvimento. O SDK registra novas frases e blocos de conteúdo à medida que aparecem no seu app.

Chave somente leitura

Para produção. O SDK apenas busca traduções e nunca cria frases.

O SDK detecta que tipo de chave recebeu e se comporta de acordo.

Traduzir frases

Use o store t para strings individuais. A própria frase é a chave de consulta e o texto no idioma base, então não há um arquivo de chaves separado. Os placeholders entre chaves têm seus tipos verificados na compilação.

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

Use uma categoria quando a mesma frase tiver significados diferentes em lugares diferentes:

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

Traduzir blocos de conteúdo

Use o componente Translate para blocos maiores em que a estrutura é importante. Os tradutores veem o resultado formatado e o traduzem como uma única unidade, trabalhando frase por frase dentro dele.

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

Outros SDKs e a API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Referência da API

Travou em alguma coisa? Envie-nos uma mensagem