Avvio rapido

Richiede Svelte 5. L'SDK funziona con il rendering lato server di SvelteKit. Codice sorgente su GitHub

Crea un progetto

Crea un progetto in Langsys. Ti serviranno l'ID del progetto e una chiave API. Richiedi l'accesso anticipato

Installa

npm install langsys-js-svelte

Inizializza

Inizializza Langsys una sola volta, nel layout radice. Richiede un oggetto di configurazione e uno store scrivibile contenente la lingua dell'utente.

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

Chiavi API

Chiave di scrittura

Per lo sviluppo. L'SDK registra nuove frasi e blocchi di contenuto non appena compaiono nella tua app.

Chiave di sola lettura

Per la produzione. L'SDK recupera solo le traduzioni e non crea mai frasi.

L'SDK rileva il tipo di chiave che possiede e si comporta di conseguenza.

Traduci le frasi

Usa lo store t per le stringhe singole. La frase stessa è la chiave di ricerca e il testo in lingua di base, quindi non è necessario un file delle chiavi separato. I placeholder tra parentesi graffe vengono controllati per tipo in fase di compilazione.

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

Usa una categoria quando la stessa frase significa cose diverse in luoghi diversi:

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

Traduci i blocchi di contenuto

Usa il componente Translate per i blocchi più grandi in cui la struttura è importante. I traduttori vedono il risultato con lo stile applicato e lo traducono come un'unica unità, lavorando comunque frase per frase al suo interno.

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

Altri SDK e l'API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Riferimento API

Hai bisogno di aiuto? Inviaci un messaggio