Sapper: namespaced translations singleton on server issue

[jesperp]

Thanks again for such a well thought through and useful framework! 🎉
This is sort of a continuation on discussion 306

I think I have found an issue that makes typesafe-i18n (still) not optimal with Sapper and I hope we can find another work around. It's not entirely straight forward to explain but let me try... 🙂

So if I look at the code I can see that the loaded translations are stored in a record on the module level:

export const loadedLocales = {} as Record<Locales, Translations>

Now say that we have a bunch of namespaced translations. On the server, the loadedLocales will – eventually, after seeing some traffic to all pages – contain all possible translations including namespaced ones. This is great, we are caching things on the server by having this singleton.

But, the problem now is that the way Sapper works is that the server will serialize data in preload into HTML for use on the client. Looking at our workaround, that means that all server side rendered responses will eventually contain all translations for a specific locale, even namespaced ones that shouldn't be there. Sveltekit does not have this problem. Sveltekit's SSR content is translated but does not include serialized translation data so the client will have always start with a "fresh" loadedLocales.

I wanted to start this discussion on a conceptual level, can try to make a minimal demo if needed.
Does this makes sense 😅 and how can we work around this limitation?

I'm thinking this could be solved somehow with Sapper sessions but that would require changing how the loading functions work...

[ivanhofer]

Hi @jesperp,
thanks for your kind words.

So you are saying that the loadedLocales are passed to the client even if we had to implement a workaround to use them clientside?
Could you please create a small repo demonstrating the issue? Thanks!

[jesperp]

Thanks for your time!
I have created a repo here:

https://github.com/jesperp/sapper-typesafe-i18n-issue

To see this issue:

1. Install packages and spin up the dev server with pnpm i && pnpm dev
2. Go to http://localhost:3000/ and check the SSR:ed HTML (it only includes the HI translation)
3. Click on "About" to see the about page and do a hard refresh there.
4. Now go back to the start page again and make sure to do a hard refresh. Now the SSR:ed content for the start page includes aboutpage.DESCRIPTION even though it shouldn't be there.

So the issue is that at step 3, the server is loading the namespaced translation and then caching it on the module level (in loadedLocales). This result is then re-used on any subsequent requests (step 4)

Edit: I have sort of a work around for this. Let me get back to you with some code samples...

[ivanhofer]

Ah, now I fully understand the issue here.
The simplest solution would be to notr use namespaces 😅. Depending on the amount of translations this could be a solution that would

Or else you would need to modify the generated files a bit.
We need to decouple the loadedLocales object.
Without actually testing anything this could work:

1. make sure typesafe-i18n doesn't override your changes (see generateOnlyTypes
2. call loadAllLocales in sappers server.ts file to make sure the server always has all translations.
3. modify everything inside i18n-util.async.ts to return the loaded translation insted of storing it into the loadedTranslations object when running on the server (keep the current functionality for the client)
4. sending the returned translations via the preload function (like you currently do)
   maybe you need to come up with a merging solution if you load multiple namespaces
5. restore state on client (like you currently do)
6. enjoy

Let me know if the description helps you come up with a working solution :)