@sveltebase/i18n 0.3.2 → 0.3.4

package/README.md

@@ -64,12 +64,28 @@ export const i18n = createI18n(languages, "locale");
 
 Then initialize it before using translations or formatters.
 
-If you already have the request cookies available during the initial render, pass them to `init(cookies)` immediately. That lets the package restore the saved locale before your UI reads translations, so the correct language loads right away instead of first rendering with the fallback locale and switching later.
+In SvelteKit, the recommended quick start is to load all cookies in `+layout.server.ts`, pass them to `+layout.svelte`, and initialize i18n there. That lets the package restore the saved locale before your UI reads translations, so the correct language loads right away instead of first rendering with the fallback locale and switching later.
+
+In `+layout.server.ts`:
 
 ```ts
-import { i18n } from "./i18n";
+export function load({ cookies }) {
+  return {
+    cookies: cookies.getAll()
+  };
+}
+```
 
-i18n.init(cookies);
+Then in `+layout.svelte`:
+
+```svelte
+<script lang="ts">
+  import { i18n } from "./i18n";
+
+  let { data } = $props();
+
+  i18n.init(() => data.cookies);
+</script>
 ```
 
 ## Basic usage in a Svelte component
@@ -146,7 +162,7 @@ i18n.init();
 
 ### With cookies in SvelteKit for faster first render
 
-In SvelteKit, the recommended approach is to load all cookies in `+layout.server.ts`, return them from `load`, and then pass that data to `i18n.init(...)` in `+layout.svelte`.
+In SvelteKit, the recommended approach is to load all cookies in `+layout.server.ts`, return them from `load`, and then pass that data to `i18n.init(() => data.cookies)` in `+layout.svelte`.
 
 This lets `@sveltebase/i18n` restore the saved locale before your UI reads translations, so the correct language is available immediately and you avoid rendering the fallback language first.
 
@@ -168,13 +184,13 @@ Then in `+layout.svelte`:
 
   let { data } = $props();
 
-  i18n.init(data.cookies);
+  i18n.init(() => data.cookies);
 </script>
 
 <slot />
 ```
 
-The value passed to `i18n.init(...)` should be an array of cookie objects in this shape:
+The function passed to `i18n.init(...)` should return an array of cookie objects in this shape:
 
 ```ts
 type Cookie = {

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { AppConfig } from 'use-intl/core';
+export { MaybeGetter } from '@sveltebase/state';
 
 type MessageValue = string | {
     [key: string]: MessageValue;
@@ -20,6 +21,7 @@ type Cookie = {
     name: string;
     value: string;
 };
+type MaybeGetter<T> = T | (() => T);
 type LocaleCode<TLanguages extends readonly LanguageDefinition[]> = TLanguages[number]["code"];
 type CurrentLanguage<TLanguages extends readonly LanguageDefinition[]> = TLanguages[number];
 type TranslationValues = Record<string, string | number | Date>;
@@ -38,7 +40,7 @@ interface I18nInstance<TLanguages extends readonly LanguageDefinition[]> {
     readonly languages: TLanguages;
     locale: LocaleCode<TLanguages>;
     readonly currentLanguage: CurrentLanguage<TLanguages>;
-    init(cookies?: Cookie[]): void;
+    init(cookies?: MaybeGetter<Cookie[] | undefined>): void;
 }
 declare function getTranslations(): Translate;
 declare function getFormat(): Format;

package/dist/index.js

@@ -236,6 +236,7 @@ function createI18n(languages, localeStorageKey = DEFAULT_LOCALE_STORAGE_KEY) {
     localeStorageKey,
     localeSchema
   );
+  let initialized = false;
   const i18n = {
     get languages() {
       return languages;
@@ -254,11 +255,16 @@ function createI18n(languages, localeStorageKey = DEFAULT_LOCALE_STORAGE_KEY) {
       );
     },
     init(cookies) {
-      if (cookies) {
-        localeState.init(cookies);
+      if (initialized) {
+        return;
+      }
+      const resolvedCookies = typeof cookies === "function" ? cookies() : cookies;
+      if (resolvedCookies) {
+        localeState.init(resolvedCookies);
       }
       const { set } = ensureContext();
       set(i18n);
+      initialized = true;
     }
   };
   i18nInternals.set(i18n, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltebase/i18n",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -18,7 +18,7 @@
     }
   },
   "dependencies": {
-    "@sveltebase/state": "0.3.2",
+    "@sveltebase/state": "0.3.4",
     "date-fns": "^4.1.0",
     "use-intl": "^4.4.0",
     "zod": "^4.1.11"