/** * Server-side rendering (SSR) utilities for i18n. * * Provides helpers for SvelteKit integration with zero-FOIT (Flash Of Incorrect Translation): * - Server detects user's locale from headers/cookies * - Server pre-renders with correct language * - Client hydrates seamlessly without language flash * * @module i18n/ssr * * @example SvelteKit +page.server.ts * ```typescript * import { initI18nOnServer } from '@composable-svelte/core/i18n/ssr'; * import enCommon from '../locales/en/common.json'; * import ptBRCommon from '../locales/pt-BR/common.json'; * * export async function load({ request, url }) { * const i18nData = await initI18nOnServer({ * request, * url: url.toString(), * supportedLocales: ['en', 'pt-BR'], * defaultLocale: 'en', * bundles: { * 'en': { common: enCommon }, * 'pt-BR': { common: ptBRCommon } * }, * preloadNamespaces: ['common'] * }); * * return { i18nData }; * } * ``` * * @example SvelteKit +page.svelte * ```svelte * * ``` */ import type { I18nState, TranslationNamespace, LocaleDetector } from './types.js'; /** * Configuration for server-side i18n initialization. */ export interface SSRConfig { /** SvelteKit Request object */ request: Request; /** Full URL (for query param detection) */ url: string; /** Supported locales */ supportedLocales: string[]; /** Default fallback locale */ defaultLocale: string; /** * Translation bundles (statically imported). * Format: { 'en': { common: {...}, products: {...} }, 'pt-BR': {...} } */ bundles: Record>; /** * Namespaces to preload on server. * These will be available immediately on page load. */ preloadNamespaces?: string[]; /** * Optional custom locale detector. * If not provided, uses createSSRLocaleDetector with request headers. */ localeDetector?: LocaleDetector; /** * Optional cookie name for locale persistence. * Defaults to 'locale'. */ cookieName?: string; /** * Optional URL parameter name for locale override. * Defaults to 'lang'. */ urlParam?: string; } /** * Serializable i18n data for SSR hydration. * * This is what gets passed from server to client. * All fields must be JSON-serializable. */ export interface I18nSSRData { /** Detected locale */ locale: string; /** Initial i18n state (JSON-serializable) */ state: I18nState; /** Preloaded translations */ translations: Record; } /** * Initialize i18n on the server. * * This function: * 1. Detects user's locale from request * 2. Creates initial i18n state * 3. Preloads critical namespaces * 4. Returns serializable data for hydration * * @example * ```typescript * // In SvelteKit +page.server.ts * export async function load({ request, url }) { * const i18nData = await initI18nOnServer({ * request, * url: url.toString(), * supportedLocales: ['en', 'pt-BR'], * defaultLocale: 'en', * bundles: { * 'en': { common: enCommon }, * 'pt-BR': { common: ptBRCommon } * }, * preloadNamespaces: ['common'] * }); * * return { i18nData }; * } * ``` */ export declare function initI18nOnServer(config: SSRConfig): Promise; /** * Hydrate i18n on the client. * * This function restores the server-rendered i18n state on the client, * ensuring zero-FOIT (Flash Of Incorrect Translation). * * @example * ```svelte * * ``` */ export declare function hydrateI18nOnClient(store: { state: S; dispatch: (action: A) => void; }, ssrData: I18nSSRData): void; /** * SvelteKit handle hook for automatic locale detection. * * This hook runs on every request and detects the user's locale, * making it available in all load functions via event.locals. * * @example hooks.server.ts * ```typescript * import { createI18nHandle } from '@composable-svelte/core/i18n/ssr'; * * export const handle = createI18nHandle({ * supportedLocales: ['en', 'pt-BR', 'es'], * defaultLocale: 'en' * }); * ``` * * @example +page.server.ts * ```typescript * export async function load({ locals }) { * const locale = locals.locale; // Automatically detected * // ... * } * ``` */ export declare function createI18nHandle(config: { supportedLocales: string[]; defaultLocale: string; cookieName?: string; urlParam?: string; }): ({ event, resolve }: { event: any; resolve: any; }) => Promise; /** * Generate alternate language links for SEO. * * Search engines use these to understand that your content is available * in multiple languages. * * @example +page.svelte * ```svelte * * {@html generateAlternateLinks('/products', ['en', 'pt-BR', 'es'])} * * ``` */ export declare function generateAlternateLinks(path: string, locales: string[], baseUrl?: string): string; /** * Extract locale from URL path. * * Supports URLs like: * - /en/products * - /pt-BR/about * * @param pathname - URL pathname * @param supportedLocales - List of supported locales * @returns Locale if found, null otherwise */ export declare function extractLocaleFromPath(pathname: string, supportedLocales: string[]): string | null; /** * Reroute URL based on locale. * * Useful for locale-based routing (e.g., /en/products → /products with locale=en). * * @example hooks.server.ts * ```typescript * export const handle = async ({ event, resolve }) => { * const locale = extractLocaleFromPath(event.url.pathname, ['en', 'pt-BR']); * * if (locale) { * event.locals.locale = locale; * // Rewrite path: /en/products → /products * event.url.pathname = '/' + event.url.pathname.split('/').slice(2).join('/'); * } * * return resolve(event); * }; * ``` */ export declare function rerouteWithLocale(pathname: string, locale: string): string; //# sourceMappingURL=ssr.d.ts.map