Svelte Integration

import { writable, derived } from "svelte/store";
import i18next from "i18next";
import { browser } from "$app/environment"; // For SvelteKit
import LanguageDetector from "i18next-browser-languagedetector";
import Backend from "i18next-http-backend";

// Create a writable store with the active language
export const locale = writable("en");

// Create a derived store with the translations
export const locales = {
  en: "English",
  es: "Español",
};

// Initialize i18next
export const i18n = i18next
  // Load translations using http backend
  .use(Backend)
  // Detect user language
  .use(LanguageDetector)
  // Initialize with configuration
  .init({
    // If you're using SvelteKit, check for browser environment
    ...(browser
      ? {
          backend: {
            loadPath: "/locales/{{lng}}.json",
          },
        }
      : {}),

    // Default language
    fallbackLng: "en",
    // Supported languages
    supportedLngs: ["en", "es"],
    // Debug mode in development
    debug: import.meta.env.DEV,

    // Interpolation configuration
    interpolation: {
      escapeValue: false, // Not needed for Svelte as it handles escaping
    },
  });

// Create a derived store with a translate function
export const t = derived(locale, ($locale) => (key, params) => {
  if (!i18next.isInitialized) {
    return "";
  }
  return i18next.t(key, { ...params, lng: $locale });
});

// Function to change the language
export function changeLanguage(newLocale) {
  if (Object.keys(locales).includes(newLocale)) {
    locale.set(newLocale);
    i18next.changeLanguage(newLocale);
  }
}

// Initialize locale from i18next
i18next.on("initialized", () => {
  locale.set(i18next.language);
});

// Update locale when language changes
i18next.on("languageChanged", (lng) => {
  locale.set(lng);
});

<script>
  import { locale, locales, changeLanguage } from '../i18n.js';
</script>

<div class="language-switcher">
  {#each Object.entries(locales) as [code, name]}
    <button
      class:active={$locale === code}
      on:click={() => changeLanguage(code)}
    >
      {name}
    </button>
  {/each}
</div>

<style>
  .language-switcher {
    display: flex;
    gap: 0.5rem;
  }

  button {
    padding: 0.3rem 0.5rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: transparent;
    cursor: pointer;
  }

  button.active {
    background: #4a4a4a;
    color: white;
    border-color: #4a4a4a;
  }
</style>

<script>
  import { onMount } from 'svelte';
  import { t, i18n, locale } from './i18n.js';
  import LanguageSwitcher from './components/LanguageSwitcher.svelte';

  // Check if i18next is initialized
  let initialized = false;

  onMount(() => {
    // Wait for i18next to initialize
    i18n.then(() => {
      initialized = true;
    });
  });
</script>

{#if initialized}
  <header>
    <h1>{$t('welcome.title')}</h1>
    <LanguageSwitcher />
  </header>

  <main>
    <p>{$t('welcome.description')}</p>

    <section>
      <h2>{$t('features.title')}</h2>
      <ul>
        <li>{$t('features.easy')}</li>
        <li>{$t('features.fast')}</li>
        <li>{$t('features.flexible')}</li>
      </ul>
    </section>

    <!-- Example with parameters -->
    <p>{$t('greeting', { name: 'Svelte Developer' })}</p>
  </main>
{:else}
  <div>Loading translations...</div>
{/if}

<style>
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
  }

  main {
    padding: 1rem;
  }
</style>

<script>
  import { t } from '../i18n.js';
</script>

<div>
  <h1>{$t('page.title')}</h1>
  <p>{$t('page.description')}</p>
</div>

<script>
  import { t } from '../i18n.js';
  let username = 'John';
  let unreadCount = 5;
</script>

<div>
  <p>{$t('welcome.user', { name: username })}</p>
  <p>{$t('messages.unread', { count: unreadCount })}</p>
</div>

<!-- src/components/Trans.svelte -->
<script>
  import { t } from '../i18n.js';

  export let key = '';
  export let params = {};
</script>

<span>{$t(key, params)}</span>

<script>
  import Trans from './components/Trans.svelte';
</script>

<div>
  <h1><Trans key="page.title" /></h1>
  <p><Trans key="welcome.user" params={{ name: 'Sarah' }} /></p>
</div>

{
  "welcome": {
    "title": "Welcome to our app",
    "description": "This is a multilingual Svelte application"
  },
  "features": {
    "title": "Features",
    "easy": "Easy to use",
    "fast": "Fast translation",
    "flexible": "Flexible integration"
  },
  "greeting": "Hello, {{name}}!",
  "items": "{{count}} item",
  "items_plural": "{{count}} items",
  "messages": {
    "unread": "You have {{count}} unread message",
    "unread_plural": "You have {{count}} unread messages"
  }
}

{
  "welcome": {
    "title": "Bienvenido a nuestra aplicación",
    "description": "Esta es una aplicación Svelte multilingüe"
  },
  "features": {
    "title": "Características",
    "easy": "Fácil de usar",
    "fast": "Traducción rápida",
    "flexible": "Integración flexible"
  },
  "greeting": "¡Hola, {{name}}!",
  "items": "{{count}} artículo",
  "items_plural": "{{count}} artículos",
  "messages": {
    "unread": "Tienes {{count}} mensaje sin leer",
    "unread_plural": "Tienes {{count}} mensajes sin leer"
  }
}

// src/hooks.server.js
import i18next from "i18next";
import Backend from "i18next-fs-backend";
import { locale } from "$lib/i18n";

// Initialize i18next on the server
i18next.use(Backend).init({
  // Server-side loading of translations
  backend: {
    loadPath: "static/locales/{{lng}}.json",
  },
  // Default language
  fallbackLng: "en",
  // Supported languages
  supportedLngs: ["en", "es"],
  // Interpolation
  interpolation: {
    escapeValue: false,
  },
});

export async function handle({ event, resolve }) {
  // Get preferred language from cookies or headers
  const lang =
    event.cookies.get("i18next") ||
    event.request.headers.get("accept-language")?.split(",")[0] ||
    "en";

  // Set language for this request
  event.locals.lang = lang;

  // Add translation function to locals
  event.locals.t = (key, params) => i18next.t(key, { lng: lang, ...params });

  return resolve(event);
}