SvelteKit: Load translation for non-active locale

[freeform99]

Hi Ivan

I am trying to translate the url slugs for a multilingual SvelteKit page.

Let's say on the German blog index page I have a language switcher which points to "/de/blog" and "/fr/blogue". I can access translations for the current locale with the $LL store and that works fine for pages within a locale. So by invoking, say, $LL.blog_title() on the HTML title tag I'd get "Blog" on the German page "Blogue" on the French page.

But how would I access the translation for a different locale than the current one in order to create links that point to the correct url in the target language? I was thinking of a language switcher that would take visitors to $L.de.blog_url() ("/de/blog"), $L.fr.blog_url() ("/fr/blogue").

Thank you!

[ivanhofer]

Hi @freeform99,
you almost guesst the correct syntax ;)
The generated src/i18n.util.ts file, also includes a i18n object which you can use to create an L instance (it is not a svelte store, so you can't use the $ prefix).
on the L instance you then have access to all locales and their translations.

import { i18n } from '$i18n/i18n-util'
import { loadAllLocales } from '$i18n/i18n-util.sync'

loadAllLocales() // you need to load all locales into memory before initializing
const L = i18n() // create a `L` instance

L.de.blog_title()
L.en.blog_title()
L.fr.blog_title()

But keep in mind, that depending on where in your code you are doing that, it could potentially load the whole dictionary for all locales inside the browser of your users.
You could use the namespaces feature and create a routes namespace that only contains the translated routes. But you would need to write your own loadNamespaceForAllLocales() function.

Or you could create an /api/translations/[route] SvelteKit-Endpoint that executes the code above and just returns all translations for that specific route. You then can call this Endpoint in the load function.

Let me know if this helps :)

[freeform99]

Thank you very much! The translations are small (its mostly navigation and labels; the actual content is in markdown files), so loading the whole locale is not a problem in my case.

[lukashass]

Hey @ivanhofer,
I'm trying to achieve something similar (loading translations of the language and country names for the language switcher).

I tried writing my own loadNamespaceForAllLocales(), basically:

await Promise.all(locales.map((locale) => loadNamespaceAsync(locale, "meta")));

The problem is that it seems like the "main" namespace of a locale has to be loaded to successfully load further namespaces:

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'meta')
    at loadNamespaceAsync (i18n-util.async.ts:40:24)
    at async Promise.all (index 0)

My first try at a workaround breaks loading the complete locale afterwards because then the object is already set 🤔

locales.forEach((locale) => {
    if (!loadedLocales[locale]) {
        loadedLocales[locale] = {};
    }
});

Do you have an idea how to solve this?

[ivanhofer]

@lukashass this should be fixed in version 4.3.5. Please try it out and let me know if it works

[lukashass]

@ivanhofer Thanks for the quick response.

I'm now running into another problem because I want to load the non-namespaced locale after loading a namespace:

await loadLocaleAsync("initial-locale");
await Promise.all(locales.map((locale) => loadNamespaceAsync(locale, "meta")));
await loadLocaleAsync("another-locale");

Loading another-locale doesn't work, because of if (loadedLocales[locale]) return in the load function.

We would have to detect that only a namespace is loaded and then merge the main locale:

export const loadLocaleAsync = async (locale: Locales) => {
- 	if (loadedLocales[locale]) return
+      // detect that only namespace is loaded

- 	loadedLocales[locale] = (await localeTranslationLoaders[locale]()).default as unknown as Translations
+      loadedLocales[locale] = {...loadedLocales[locale], ...(await localeTranslationLoaders[locale]()).default as unknown as Translations}
	loadFormatters(locale)
}

[ivanhofer]

@lukashass can you tell me more what are you trying to do?
If it is such a special use case you could always manage the entries yourself. Something like this maybe:

await loadLocaleAsync("initial-locale");
await Promise.all(locales.map((locale) => loadNamespaceAsync(locale, "meta")));
const cached = loadedLocales["another-locale"]
await loadLocaleAsync("another-locale");
loadedLocales["another-locale"] = { ...cached, ...loadedLocales["another-locale"] }

[lukashass]

@ivanhofer My use case is a language picker (so possibly quite a common case):

The options contain the localized language names. This works fine when loading the locales synchronously, since all locales are loaded anyway.
However when loading the locales asynchronously, I want to avoid loading all locales on the settings page just to show the language and country names. That is why I thought about putting the language and country names in a namespace.

The problem arises when actually switching to another locale. When calling loadLocaleAsync("de") after loadNamespaceAsync("de", "namespace") it just aborts because loadedLocales["de"] is already set. Hence the translations from the locale de are not loaded.

For reference, I'm working on workadventure/workadventure#1940. Specifically workadventure/workadventure@8f922e5 deals with loading the language and country translations from a namespace.

[ivanhofer]

@lukashass I think you should take a look at Intl.DisplayNames. It is a built-in browser API you could use for your language picker