Issues with the integration in a static Sveltekit application

[BinaryBolt]

Hi!
Currently I am trying to integrate the library in an environment which is build with the static adapter provided by the Svelte package. I really wasn't able to get this to work with the provided examples (neither the Sveltekit nor the Svelte demo were helpful for my use case).
I first went through the guide provided in the readme here and when reaching the following part:

I am unsure with what exactly is meant with the root-component? Is it the +layout.svelte file?
Going to the next step and trying to use one of the translations in my application (in the +page.svelte file) by using the following snippet:

<script lang="ts">
   import LL from './i18n/i18n-svelte'
</script>

<h1>{$LL.HI({ name: 'Svelte' })}</h1>

I only receive an empty h1 tag and also logging the stores content I receive the message .
Is this library even possible to use in this environment and is the readme for Svelte complete or what am I missing here?
I am grateful for any help provided - thank you!

[ivanhofer]

Yes, the root-component is the first component in your render tree. In a SvelteKit application this would be routes/+layout.svelte and in a Svelte application this will probably be App.svelte.

You need to first load the locale you want to use (https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/generator#loading-locales) and then call setLocale(locale) in order to setup the svelte store.

typesafe-i18n works in all kind of applications. But depending on how your project setup is it could requre additional steps or some steps may slightly change.

[BinaryBolt]

With the help of your example I was able to get it to work. It now loads the locales and switches between them but in my markup I receive the following error:

Property 'locale' does not exist on type 'TranslationFunctions'.ts(2339)

<script lang="ts">
    import { localStorageDetector } from 'typesafe-i18n/detectors';
    import LL, { locale, setLocale } from '$i18n/i18n-svelte';
    import type { Locales } from '$i18n/i18n-types';
    import { detectLocale, locales } from '$i18n/i18n-util';
    import { loadLocaleAsync } from '$i18n/i18n-util.async';
    import { onMount } from 'svelte';

    onMount(async () => {
        const detectedLocale = detectLocale(localStorageDetector);
        await chooseLocale(detectedLocale);
        localeToSelect = $locale;
    });

    const chooseLocale = async (locale: Locales) => {
        await loadLocaleAsync(locale);
        setLocale(locale);
    };

    let localeToSelect: Locales;
    $: localeToSelect && chooseLocale(localeToSelect);
    $: $locale && localStorage.setItem('lang', $locale);
</script>

<label>
    {$LL.locale.selectedLocale()} <!-- Error is here -->
    <select bind:value={localeToSelect}>
        <option value="" selected disabled>{$LL.locale.choose()}</option> <!-- And here -->
        {#each locales as locale}
        <option value={locale}>{locale}</option>
        {/each}
    </select>
</label>

[ivanhofer]

Sounds great!

First of all, you can change the onMount function

  onMount(async () => {
      const detectedLocale = detectLocale(localStorageDetector);
-      await chooseLocale(detectedLocale);
-      localeToSelect = $locale;
+      localeToSelect = detectedLcale;
  });

This will also trigger chooseLocale.

About the error:

I'm not sure how your translation look like but you will probably change it to

-    {$LL.locale.selectedLocale()} <!-- Error is here -->
+    {$locale}
<!-- or -->
+    {$LL.locale[selectedLocale]()}

[BinaryBolt]

Thank you! Now its working flawlessly.