Add lang cookies to examples

Author: jarda-svoboda

examples/component-scoped-csr/src/lib/translations/index.js

@@ -1,6 +1,8 @@
 import i18n from 'sveltekit-i18n';
 import lang from './lang.json';
 
+export const defaultLocale = 'en';
+
 /** @type {import('sveltekit-i18n').Config} */
 export const config = {
   translations: {

examples/component-scoped-csr/src/routes/+layout.server.js

@@ -1,15 +1,29 @@
-import { loadTranslations, translations } from '$lib/translations';
+import { locales, loadTranslations, translations, defaultLocale } from '$lib/translations';
 
 /** @type {import('@sveltejs/kit').ServerLoad} */
-export const load = async ({ url }) => {
+export const load = async ({ url, cookies, request }) => {
   const { pathname } = url;
 
-  const initLocale = 'en'; // get from cookie / user session etc...
+  // Try to get the locale from cookie
+  let locale = (cookies.get('lang') || '').toLowerCase();
 
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  // Get user preferred locale
+  if (!locale) {
+    locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
+  }
+
+  // Get defined locales
+  const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+  // Use default locale if current locale is not supported
+  if (!supportedLocales.includes(locale)) {
+    locale = defaultLocale;
+  }
+
+  await loadTranslations(locale, pathname); // keep this just before the `return`
 
   return {
-    i18n: { locale: initLocale, route: pathname },
+    i18n: { locale, route: pathname },
     translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };

examples/component-scoped-csr/src/routes/+layout.svelte

@@ -1,24 +1,29 @@
 <script>
-  import { writable } from 'svelte/store';
   import { t, locale, locales } from '$lib/translations';
 
-  const count = writable(2);
+  const handleChange = ({ currentTarget }) => {
+    const { value } = currentTarget;
+
+    document.cookie = `lang=${value} ;`;
+  };
+
+  $: count = 2;
 </script>
 
 <a href="/">{$t('menu.home')}</a>
 <a href="/about">{$t('menu.about')}</a>
 <br/>
 <br/>
-{$t('menu.notification', { count: $count })}<br />
-<button on:click="{() => {if ($count) $count -= 1;}}">–</button>
-<button on:click="{() => {$count += 1;}}">+</button>
+{$t('menu.notification', { count })}<br />
+<button on:click="{() => {if (count) count -= 1;}}">–</button>
+<button on:click="{() => {count += 1;}}">+</button>
 <hr />
 <slot />
 <br />
 <br />
 <br />
 <br />
-<select bind:value="{$locale}">
+<select bind:value="{$locale}" on:change={handleChange}>
   {#each $locales as value}
     <option value="{value}">{$t(`lang.${value}`)}</option>
   {/each}

examples/component-scoped-ssr/src/lib/translations/index.js

@@ -1,6 +1,8 @@
 import i18n from 'sveltekit-i18n';
 import lang from './lang.json';
 
+export const defaultLocale = 'en';
+
 /** @type {import('sveltekit-i18n').Config} */
 export const config = {
   translations: {

examples/component-scoped-ssr/src/routes/+layout.server.js

@@ -1,15 +1,29 @@
-import { loadTranslations, translations } from '$lib/translations';
+import { locales, loadTranslations, translations, defaultLocale } from '$lib/translations';
 
 /** @type {import('@sveltejs/kit').ServerLoad} */
-export const load = async ({ url }) => {
+export const load = async ({ url, cookies, request }) => {
   const { pathname } = url;
 
-  const initLocale = 'en'; // get from cookie / user session etc...
+  // Try to get the locale from cookie
+  let locale = (cookies.get('lang') || '').toLowerCase();
 
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  // Get user preferred locale
+  if (!locale) {
+    locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
+  }
+
+  // Get defined locales
+  const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+  // Use default locale if current locale is not supported
+  if (!supportedLocales.includes(locale)) {
+    locale = defaultLocale;
+  }
+
+  await loadTranslations(locale, pathname); // keep this just before the `return`
 
   return {
-    i18n: { locale: initLocale, route: pathname },
+    i18n: { locale, route: pathname },
     translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };

examples/component-scoped-ssr/src/routes/+layout.svelte

@@ -1,6 +1,12 @@
 <script>
   import { t, locale, locales } from '$lib/translations';
 
+  const handleChange = ({ currentTarget }) => {
+    const { value } = currentTarget;
+
+    document.cookie = `lang=${value} ;`;
+  };
+
   $: count = 2;
 </script>
 
@@ -17,7 +23,7 @@
 <br />
 <br />
 <br />
-<select bind:value="{$locale}">
+<select bind:value="{$locale}" on:change={handleChange}>
   {#each $locales as value}
     <option value="{value}">{$t(`lang.${value}`)}</option>
   {/each}

examples/fallback-locale/src/lib/translations/index.js

@@ -1,6 +1,8 @@
 import i18n from 'sveltekit-i18n';
 import lang from './lang.json';
 
+export const defaultLocale = 'en';
+
 /** @type {import('sveltekit-i18n').Config} */
 export const config = {
   fallbackLocale: 'en',

examples/fallback-locale/src/routes/+layout.server.js

@@ -1,15 +1,29 @@
-import { loadTranslations, translations } from '$lib/translations';
+import { locales, loadTranslations, translations, defaultLocale } from '$lib/translations';
 
 /** @type {import('@sveltejs/kit').ServerLoad} */
-export const load = async ({ url }) => {
+export const load = async ({ url, cookies, request }) => {
   const { pathname } = url;
 
-  const initLocale = 'en'; // get from cookie / user session etc...
+  // Try to get the locale from cookie
+  let locale = (cookies.get('lang') || '').toLowerCase();
 
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  // Get user preferred locale
+  if (!locale) {
+    locale = `${`${request.headers.get('accept-language')}`.match(/[a-zA-Z]+?(?=-|_|,|;)/)}`.toLowerCase();
+  }
+
+  // Get defined locales
+  const supportedLocales = locales.get().map((l) => l.toLowerCase());
+
+  // Use default locale if current locale is not supported
+  if (!supportedLocales.includes(locale)) {
+    locale = defaultLocale;
+  }
+
+  await loadTranslations(locale, pathname); // keep this just before the `return`
 
   return {
-    i18n: { locale: initLocale, route: pathname },
+    i18n: { locale, route: pathname },
     translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };

examples/fallback-locale/src/routes/+layout.svelte

@@ -1,25 +1,30 @@
 <script>
-  import { writable } from 'svelte/store';
   import { t, locale, locales } from '$lib/translations';
 
-  const count = writable(2);
+  const handleChange = ({ currentTarget }) => {
+    const { value } = currentTarget;
+
+    document.cookie = `lang=${value} ;`;
+  };
+
+  $: count = 2;
 </script>
 
 <a href="/">{$t('menu.home')}</a>
 <a href="/about">{$t('menu.about')}</a>
 <br/>
 <br/>
-{$t('menu.notification', { count: $count })}<br />
-<button on:click="{() => {if ($count) $count -= 1;}}">–</button>
-<button on:click="{() => {$count += 1;}}">+</button>
+{$t('menu.notification', { count })}<br />
+<button on:click="{() => {if (count) count -= 1;}}">–</button>
+<button on:click="{() => {count += 1;}}">+</button>
 <hr />
 <slot />
 <br />
 <br />
 <br />
 <br />
-<select bind:value="{$locale}">
+<select bind:value="{$locale}" on:change={handleChange}>
   {#each $locales as value}
-    <option value="{value}">{$t(`lang.${value.toLowerCase()}`)}</option>
+    <option value="{value}">{$t(`lang.${value}`)}</option>
   {/each}
 </select>

examples/locale-router-advanced/src/hooks.server.js

@@ -11,7 +11,7 @@ export const handle = async ({ event, resolve }) => {
   if (routeRegex.test(pathname)) {
 
     // Get defined locales
-    const supportedLocales = locales.get();
+    const supportedLocales = locales.get().map((l) => l.toLowerCase());
 
     // Try to get locale from `pathname`.
     let locale = supportedLocales.find((l) => l === `${pathname.match(/[^/]+?(?=\/|$)/)}`.toLowerCase());