Démarrage rapide

Nécessite Svelte 5. Le SDK fonctionne avec le rendu serveur de SvelteKit. Code source sur GitHub

Créer un projet

Créez un projet dans Langsys. Vous aurez besoin de son identifiant de projet et d'une clé API. Demander un accès anticipé

Installer

npm install langsys-js-svelte

Initialiser

Initialisez Langsys une seule fois, dans votre layout racine. Il prend un objet de configuration et un store inscriptible contenant la locale de l'utilisateur.

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

Clés API

Clé d'écriture

Pour le développement. Le SDK enregistre les nouvelles phrases et blocs de contenu à mesure qu'ils apparaissent dans votre application.

Clé en lecture seule

Pour la production. Le SDK ne fait que récupérer les traductions et ne crée jamais de phrases.

Le SDK détecte le type de clé dont il dispose et se comporte en conséquence.

Traduire des phrases

Utilisez le store t pour les chaînes individuelles. La phrase elle-même sert de clé de recherche et de texte en langue de base, il n'y a donc pas de fichier de clés séparé. Les espaces réservés entre accolades ont leur type vérifié à la compilation.

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

Utilisez une catégorie lorsque la même phrase signifie des choses différentes selon le contexte :

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

Traduire des blocs de contenu

Utilisez le composant Translate pour les blocs plus volumineux où la structure compte. Les traducteurs voient le résultat mis en forme et le traduisent comme une seule unité, tout en travaillant phrase par phrase à l'intérieur.

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

Autres SDK et l'API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Référence API

Un blocage ? Envoyez-nous un message