@sveltebase/i18n 0.3.3 → 0.4.0

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

@@ -1,19 +1,49 @@
 // src/create-i18n.ts
 import { createContext } from "svelte";
 import { PersistentState } from "@sveltebase/state";
-import { z } from "zod";
 
 // src/utils.ts
 import { createFormatter, createTranslator } from "use-intl/core";
 import { SvelteDate } from "svelte/reactivity";
-import {
-  differenceInMinutes,
-  format as formatTimeWithDateFns,
-  isThisWeek,
-  isThisYear,
-  isToday,
-  isYesterday
-} from "date-fns";
+function startOfDay(value) {
+  return new SvelteDate(value.getFullYear(), value.getMonth(), value.getDate());
+}
+function differenceInMinutes(later, earlier) {
+  return Math.floor((later.getTime() - earlier.getTime()) / 6e4);
+}
+function isSameDay(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate();
+}
+function isToday(value) {
+  return isSameDay(value, new SvelteDate());
+}
+function isYesterday(value) {
+  const yesterday = startOfDay(new SvelteDate());
+  yesterday.setDate(yesterday.getDate() - 1);
+  return isSameDay(value, yesterday);
+}
+function isThisYear(value) {
+  return value.getFullYear() === new SvelteDate().getFullYear();
+}
+function isThisWeek(value, options) {
+  const weekStartsOn = options?.weekStartsOn ?? 0;
+  const now = new SvelteDate();
+  const currentDay = now.getDay();
+  const diffToWeekStart = (currentDay - weekStartsOn + 7) % 7;
+  const weekStart = startOfDay(now);
+  weekStart.setDate(now.getDate() - diffToWeekStart);
+  const weekEnd = startOfDay(weekStart);
+  weekEnd.setDate(weekStart.getDate() + 7);
+  return value >= weekStart && value < weekEnd;
+}
+function formatTimeWithDateFns(value, format) {
+  if (format !== "HH:mm") {
+    throw new Error(`Unsupported format: ${format}`);
+  }
+  const hours = String(value.getHours()).padStart(2, "0");
+  const minutes = String(value.getMinutes()).padStart(2, "0");
+  return `${hours}:${minutes}`;
+}
 var UZ_WEEKDAYS = [
   "Yakshanba",
   "Dushanba",
@@ -221,17 +251,21 @@ function createI18n(languages, localeStorageKey = DEFAULT_LOCALE_STORAGE_KEY) {
   ensureContext();
   const localeCodes = getLocaleCodes(languages);
   const fallbackLocale = getDefaultLocale(languages);
-  const localeSchema = z.string().optional().transform((value, context) => {
-    const nextLocale = value ?? fallbackLocale;
-    if (localeCodes.includes(nextLocale)) {
-      return nextLocale;
+  const localeSchema = {
+    "~standard": {
+      version: 1,
+      vendor: "@sveltebase/i18n",
+      validate(value) {
+        const nextLocale = value == null ? fallbackLocale : typeof value === "string" ? value : null;
+        if (nextLocale && localeCodes.includes(nextLocale)) {
+          return { value: nextLocale };
+        }
+        return {
+          issues: [{ message: `Invalid locale "${String(value)}"` }]
+        };
+      }
     }
-    context.addIssue({
-      code: "custom",
-      message: `Invalid locale "${String(value)}"`
-    });
-    return z.NEVER;
-  });
+  };
   const localeState = new PersistentState(
     localeStorageKey,
     localeSchema
@@ -245,7 +279,7 @@ function createI18n(languages, localeStorageKey = DEFAULT_LOCALE_STORAGE_KEY) {
       return localeState.current;
     },
     set locale(nextLocale) {
-      localeState.current = localeSchema.parse(nextLocale);
+      localeState.current = nextLocale;
     },
     get currentLanguage() {
       return getLanguage(

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltebase/i18n",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -18,10 +18,8 @@
     }
   },
   "dependencies": {
-    "@sveltebase/state": "0.3.3",
-    "date-fns": "^4.1.0",
-    "use-intl": "^4.4.0",
-    "zod": "^4.1.11"
+    "@sveltebase/state": "0.4.0",
+    "use-intl": "^4.4.0"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"