Comment shared server translations

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

@@ -1,12 +1,14 @@
-import { loadTranslations } from '$lib/translations';
+import { addTranslations, setLocale, setRoute } from '$lib/translations';
 
 /** @type {import('@sveltejs/kit').Load} */
-export const load = async ({ url }) => {
-  const { pathname } = url;
+export const load = async ({ data }) => {
+  const { i18n, translations } = data;
+  const { locale, route } = i18n;
 
-  const initLocale = 'en'; // get from cookie / user session etc...
+  addTranslations(translations);
 
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  await setRoute(route);
+  await setLocale(locale);
 
-  return {};
+  return i18n;
 };

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

@@ -0,0 +1,15 @@
+import { loadTranslations, translations } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').ServerLoad} */
+export const load = async ({ url }) => {
+  const { pathname } = url;
+
+  const initLocale = 'en'; // get from cookie / user session etc...
+
+  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+
+  return {
+    i18n: { locale: initLocale, route: pathname },
+    translations: translations.get(), // `translations` on server contain all translations loaded by different clients
+  };
+};

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

@@ -10,6 +10,6 @@ export const load = async ({ url }) => {
 
   return {
     i18n: { locale: initLocale, route: pathname },
-    translations: translations.get(),
+    translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };

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

@@ -1,12 +1,14 @@
-import { loadTranslations } from '$lib/translations';
+import { addTranslations, setLocale, setRoute } from '$lib/translations';
 
 /** @type {import('@sveltejs/kit').Load} */
-export const load = async ({ url }) => {
-  const { pathname } = url;
+export const load = async ({ data }) => {
+  const { i18n, translations } = data;
+  const { locale, route } = i18n;
 
-  const initLocale = 'cs'; // get from cookie, user session, ...
+  addTranslations(translations);
 
-  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+  await setRoute(route);
+  await setLocale(locale);
 
-  return {};
+  return i18n;
 };

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

@@ -0,0 +1,15 @@
+import { loadTranslations, translations } from '$lib/translations';
+
+/** @type {import('@sveltejs/kit').ServerLoad} */
+export const load = async ({ url }) => {
+  const { pathname } = url;
+
+  const initLocale = 'en'; // get from cookie / user session etc...
+
+  await loadTranslations(initLocale, pathname); // keep this just before the `return`
+
+  return {
+    i18n: { locale: initLocale, route: pathname },
+    translations: translations.get(), // `translations` on server contain all translations loaded by different clients
+  };
+};

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

@@ -12,6 +12,6 @@ export const load = async ({ url, cookies }) => {
 
   return {
     i18n: { locale: initLocale, route: pathname },
-    translations: translations.get(),
+    translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };

examples/multi-page/src/routes/+layout.server.js

@@ -10,6 +10,6 @@ export const load = async ({ url }) => {
 
   return {
     i18n: { locale: initLocale, route: pathname },
-    translations: translations.get(),
+    translations: translations.get(), // `translations` on server contain all translations loaded by different clients
   };
 };