Sapper support?

[jesperp]

I'm not sure there is anything that keeps this lib from being used in Sapper as well. I tried the simple example that is provided but with Sapper specific tweaks (_layout instead of __layout, preload instead of load, path instead of url.pathname) and it seem to almost work. The SSR:d content is translated as expected but the frontend renders empty translations (after a quick flash of the correct SSR:d content). I also get the warning [i18n]: No translation key or locale provided. Skipping translation... in the browser. Am I missing something simple or is Sapper support harder than I expect?

[jarda-svoboda]

Hi @jesperp.)

Not tested so far, but i think It should work normally – what versions (sveltekit-i18n, sapper, node, browser) do you use? what locales you have defined in your config? If it works on BE it should work on FE as well, but there can be some differences in Intl library so BE recognizes given locale properly, but FE not, so there is the warning on FE that locale is not provided...

[jarda-svoboda]

Just tried with latest versions and i'm getting the same as you... i'll keep you informed..

[jesperp]

Firefox 99.0.1 (tried latest chrome/safari as well) node 14.16.1 sveltekit-i18n 2.2.1 sapper 0.28.0 svelte 3.17.3

Thanks for looking into this! I will also keep you posted if I find a fix 🙂

[jarda-svoboda]

Well, it seems to work somehow weird under Sapper. Even if i achieve the first load working correctly by splitting "the load" and "the add" part like this:

<!-- _layout.svelte -->

<script context="module">
  import { t, locale, locales, translations, addTranslations, loadTranslations, getTranslationProps } from '../translations';

  export async function preload({path}) {
    const defaultLocale = 'en'; // get from cookie / user session etc...

    const initLocale = locale.get() || defaultLocale; 

    const translationProps = await getTranslationProps(initLocale, path); // keep this just before the `return`

    return { translationProps, initLocale };
  }
</script>

<script>
  import { writable } from 'svelte/store';

  export let initLocale;
  export let translationProps = [];

  addTranslations(...translationProps);
  locale.forceSet(initLocale);

  $: console.log($locale, initLocale);
</script>

{JSON.stringify($translations, null, 2)}<br />
<br />
{$t('common.text')}<br />
<br />

<select bind:value="{$locale}">
  {#each $locales as value}
    <option value="{value}">{$t(`lang.${value}`)}</option>
  {/each}
</select>

changing $locale nor navigating does not trigger further load... So i guess it would need a bigger effort to get this library work with Sapper and because Sapper is obsolete i wouldn't go this way..

Anyway, let me please know if you find some easier solution, but i currently think it would involve bigger changes in the @sveltekit-i18n/base (and not even sure if it would work for both Sapper and SvelteKit at once)...