Svelte(Kit) reactivity without #key

[IAPBenediktZwoelfer]

Can we have svelte stores for the m function so we can use $m to make the language reactive without having a need for wrapping the whole page in a #key block. This is extremely important for me because all the data that got changed inside components gets reloaded on a language change. It seems like you implemented this here, but i cannot find it anywhere how to use it, or is this still in development? Thanks a lot!

[samuelstroschein]

Hi @IAPBenediktZwoelfer,

Doesn't work. Svelte stores are not tree-shakable. You have to wait for Svelte runes, which will solve Svelte's reactivity limitations. Maybe @LorisSigrist has another idea.

[IAPBenediktZwoelfer]

Thanks a lot for the explanation! For me this has high priority because i am developing an application where you can configure so-called "webtools", they can be a quiz, a form or whatever. In the app the user can setup his/her webtool, which can be in multiple languages. So i need to have the ability to quickly change between languages while persisting the data. The workflow can be seen like this: A user creates a quiz in three languages. He/she writes the question and answers in one language, then switches to the other languages and does the same. As is understood (im quite new to svelte so i might be completely wrong, please correct me), this use case it not really possible with paraglide js, right? Before I found this project i tried a minimal demo with typesafe-i18n, which worked in this reactive way as expected, but of course does not bring all the amazing features you guys developed. Thanks :)

[IAPBenediktZwoelfer]

Here is an example of our old platform before moving to Sveltekit. In my new version i want the user to be able to make changes directly in the preview.

[LorisSigrist]

Does changing the language only affect the preview, or the entire page?

[LorisSigrist]

There are a few things you could try.

You could store the state in an SvelteKit Snapshot and then reload the page when changing languages. That way the state would survive the language change.

You could also try to create an $m store like so, that updates whenever the language changes:

import * as original_m from "./paraglide/messages.js"
import { onSetLanguageTag, languageTag } from "./paraglide/runtime.js"

// only one instance at a time!
export const m = readable<typeof original_m>(original_m, (set) => {
     onSetLanguageTag(() => set(original_m))
});


//Then use it like
$m.hello_world()

This should work, but it has a drawback. Treeshaking no longer works, so all messages will always be bundled. If most of your app mostly consists of a single page that might not be a huge deal.

[IAPBenediktZwoelfer]

Hey Loris, thanks a lot for that code snippet, ill give it a try! Yes the language change is only for the preview.

[MCMattia]

@LorisSigrist It would also be possible to create a language store that contains "en" | "de" and get's updated after setLanguageTag.

Then use the translation functions together with the store in the markup like so:
{$language && $m.hello_world()}

Remove the #key block.

This will re-render the text whenever the language store changes value. Without re-rendering the whole page.

I'm curios to what you think about this solution

[LorisSigrist]

That's a tough one, and not a use-case we have thought about much yet.
There are a few thins you can try:

• m.my_message({}, { languageTag: "en" }) manually set the language on each message in your WebTool Component
• Create separate instances of the paraglide/runtime.js module for each component
• setLanguageTag accepts setting a "getter" function for the language tag. This get's run whenever you use a message to determine which language should be used. Eg setLanguageTag(() => getContext("language")). I'm not sure how exactly you could combine that with Svelte, since svelte forces you to call getContext at the component root, but it might be something worth exploring

[IAPBenediktZwoelfer]

I almost got it to work with the vanilla code. I am using a context for each webtool, so all the child component get their corresponding language. But when i try to display the text, even if i use a key block, the language will always stay the default language (The {$languageTag} is updatingcorrectly):

{#key $languageTag}
  {$languageTag}
  {m.cookiesWelcome({ languageTag: $languageTag })}
{/key}

EDIT:

let languageTag = getContext<Writable<AvailableLanguageTag>>('languageTag');
{m.cookiesWelcome({}, { languageTag: $languageTag })} 

works! Even without the key. Can you help me write a wrapper so i don't need to use the options in every element. Thanks a lot!!

[LorisSigrist]

Perhaps something like this will work:

import * as _m from "../paraglide/messages.js"
import { derived } from "svelte/stores"

const languageTag = getContext<Writable<AvailableLanguageTag>>('languageTag');

function getMessagesInLangauge(m, lang) {
    const translatedMessages = {};
    for(const [key, message] of Object.entries(m)){
      translatedMessages[key] = (args) => m(args, { languageTag: lang })
    }
    return translatedMessages;
}

const m = derived($languageTag, lang =>getMessagesInLangauge(_m, lang))

[IAPBenediktZwoelfer]

When i try something like this i get:
Error: Function called outside component initialization
(SvelteKite)

[LorisSigrist]

getContext has to be called during component initialization. The above code has to either be in a .svelte file, or you wrap it in a function and pass the languageTag store as an argument