Inicio rápido

Requiere Svelte 5. El SDK funciona con el renderizado en servidor de SvelteKit. Código fuente en GitHub

Crear un proyecto

Creá un proyecto en Langsys. Vas a necesitar su ID de proyecto y una clave de API. Solicitar acceso anticipado

Instalar

npm install langsys-js-svelte

Inicializar

Inicializá Langsys una sola vez, en tu layout raíz. Recibe un objeto de configuración y un store de escritura que contiene el idioma del usuario.

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

Claves de API

Clave de escritura

Para desarrollo. El SDK registra las frases nuevas y los bloques de contenido a medida que aparecen en tu aplicación.

Clave de solo lectura

Para producción. El SDK solo obtiene traducciones y nunca crea frases.

El SDK detecta qué tipo de clave tiene y actúa en consecuencia.

Traducir frases

Usá el store t para cadenas individuales. La frase en sí es la clave de búsqueda y el texto en el idioma base, por lo que no hay un archivo de claves separado. Los marcadores de posición entre llaves se verifican por tipo cuando compilás.

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

Usá una categoría cuando la misma frase significa cosas distintas en diferentes lugares:

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

Traducir bloques de contenido

Usá el componente Translate para bloques más grandes donde la estructura importa. Los traductores ven el resultado con estilo y lo traducen como una sola unidad, aunque siguen trabajando frase por frase dentro de él.

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

Otros SDK y la API

React

npm install langsys-js-react

Vue

npm install langsys-js-vue

TypeScript (any framework)

npm install langsys-js-typescript

REST API

Referencia de la API

¿Te trabaste con algo? Envianos un mensaje