Sapper minimal working example?

[jesperp]

Version

5.4.2

Describe the bug

I'm trying to get a minimal working example in Sapper (can't use Sveltekit yet..) and the SSR output works but client then renders an empty translation. There was actually a similar bug for me when I tried to make sveltekit-i18n work with sapper (quick flash of SSR content before displaying empty translation).

Any ideas? :)

Reproduction

Start a new sapper project and install/setup typesafe-i18n

pnpx degit "sveltejs/sapper-template#rollup" typesafe-i18n-sapper
cd  typesafe-i18n-sapper
node scripts/setupTypeScript.js
pnpm i typesafe-i18n
./node_modules/typesafe-i18n/cli/typesafe-i18n.mjs --setup-auto
pnpm typesafe-i18n

Now edit the _layout.svelte file's script tags:

<script lang="ts" context="module">
   import { loadLocaleAsync } from '../i18n/i18n-util.async'

   export async function preload(page, session) {
      const locale = 'en'
      await loadLocaleAsync(locale)

      // NOTE: Comment out this `return` and it works... hmm
      return { props: { locale } }
   }
</script>

<script lang="ts">
  import Nav from '../components/Nav.svelte';
  import { setLocale } from '../i18n/i18n-svelte'

  export let segment: string;
  export let locale: string;

  setLocale(locale || 'en')

  $: console.log("HI:",  $LL.HI({ name: "You" }) )
</script>

The server logs HI: Hi You! and the client logs HI:

Logs

No response

Config

{
   "adapter": "svelte",
   "$schema": "https://unpkg.com/typesafe-i18n@5.4.2/schema/typesafe-i18n.json"
}

Additional information

No response

[ivanhofer]

Strange, sounds like a Sapper bug if it runs the preload function only on the client if it doesn't return anything.

Sou you could leave the return statement out. But you probably need the information on what locale is used. You could create language specific urls like '/en/...' and '/de/...' and read the information from the page store.

Or you can hack it together like in this example:

<script lang="ts" context="module">
	import { loadFormatters, loadLocaleAsync } from '../i18n/i18n-util.async'
	import { loadedLocales } from '../i18n/i18n-util'

	export async function preload(page, session) {
		const locale = 'en'
		await loadLocaleAsync(locale)

		// access the loaded translations and send it as a prop to the layout
		const translations = loadedLocales[locale]

		return { locale, translations }
	}
</script>

<script lang="ts">
	import LL, { setLocale } from '../i18n/i18n-svelte'
	import type { Locales, Translation } from '../i18n/i18n-types'

	export let locale: Locales
	export let translations: Translation

	// restore the translations from the received props
	loadedLocales[locale] = translations
	loadFormatters(locale)

	setLocale(locale || ('en' as Locales))

	$: console.log('HI:', $LL.HI({ name: 'You' }))
</script>

The preload function also passes the translations to the client. The client then manually sets the translations, loads the formatters and sets the locale. Eerything will happen in a synchronous way.

[jesperp]

I noticed there is actually an example for Sapper in your docs here. But it uses initI18n which doesn't exist in recent typesafe-i18n, would that be the equivalent of todays loadLocaleAsync?

Thanks for looking into this. But isn't preload in a root _layout.svelte only run on the server? (Unless you have the curoius case of returning nothing in preload, then it is run on the client, surely a bug?). So if it's only run on the server that would explain why locales are not available in the frontend unless you serialize it in preload like you do. The fix you provided looks good, a bit hacky, but OK for me :)
I can understand that people want to move on to Sveltekit but there must have been a minimal working example at some point for Sapper right?

[ivanhofer]

Thanks for mentioning the outdated docs page. I'll update it.
init18n was split into two function calls loadLocaleXYZ and setLocalebecause the solution before didn't work that well for SSR.

At least in SvelteKit the loadfunction runs on both the client and the server. And I think also the Sapper docs mention it: https://sapper.svelte.dev/docs#Preloading. But it is not clearly. statet if it 'could' or 'always will' run also on the client.

Actually I haven't used the library in a Sapper project, so to be honest, I haven't tested it that well in that context.

[jesperp]

Looked into this a bit more. Reading the docs at https://sapper.svelte.dev/docs#Return_value we can see that:

When Sapper renders a page on the server, it will attempt to serialize the resolved value (using ) and include it on the page, so that the client doesn't also need to call preload upon initialization

Looks like intended behaviour on Sapper's side, so we can't rely on setup behaviour in preload, only data serialization . I guess your solution is not a hack but the only way around it :) Thanks!

[ivanhofer]

@jesperp thanks for pointing me to the correct spot in the docs. I somehow missed that part.
Looks like the behaviour of Sapper was not ideal and they changed it in SvelteKit.
But great that we have found a workaround. I have also updated the typesafe-i18n docs.