Snelstart

Vereist Svelte 5. De SDK werkt met server-side rendering van SvelteKit. Broncode op GitHub

Maak een project aan

Maak een project aan in Langsys. Je hebt de project-ID en een API-sleutel ervan nodig. Vraag vroege toegang aan

Installeren

npm install langsys-js-svelte

Initialiseren

Initialiseer Langsys één keer, in je root-layout. Het verwacht een configuratieobject en een writable store met de locale van de gebruiker.

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

Schrijfsleutel

Voor ontwikkeling. De SDK registreert nieuwe zinnen en contentblokken zodra ze in je app verschijnen.

Alleen-lezensleutel

Voor productie. De SDK haalt alleen vertalingen op en maakt nooit teksten aan.

De SDK detecteert welk type sleutel hij heeft en gedraagt zich dienovereenkomstig.

Zinnen vertalen

Gebruik de t-store voor losse strings. De zin zelf is de opzoeksleutel en de tekst in de basistaal, dus er is geen apart sleutelbestand. Placeholders tussen accolades worden bij het compileren op type gecontroleerd.

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

Gebruik een categorie wanneer dezelfde tekst op verschillende plekken iets anders betekent:

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

Contentblokken vertalen

Gebruik de component Translate voor grotere blokken waarbij structuur belangrijk is. Vertalers zien het opgemaakte resultaat en vertalen het als één geheel, terwijl ze binnen het blok nog steeds zin voor zin werken.

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

Andere SDK's en de API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

API-referentie

Kom je er niet uit? Stuur ons een bericht