Designing Internationalization Responsively

[XIYO]

i use tranlsator

The initial discussion seemed unorganized, so I have reorganized it.

My goal is to maintain the screen's lifecycle even when changing languages. When there are components that use continuous values, they get initialized. Therefore, I want to manage sentences as state values. Is there any plan to support this, or is it the developer's responsibility to implement it?

The following content is what I had previously written. Upon further study, I realized there were a few concepts I misunderstood.

---

Thank you for your input.

I'd like to share some thoughts from my recent foray into internationalization.

1. There’s no information on how to change languages at svelte/getting started. I managed to find a rough method through other inlang documents via Googling, but even that didn’t work properly.

Here’s a snippet from inalng:

<script lang="ts">
  import { availableLanguageTags } from "$paraglide/runtime";
  import { page } from "$app/stores";
  import { i18n } from "$lib/i18n.js";
</script>

{#each availableLanguageTags as lang}
  <a 
-  	href={i18n.route($page.url.pathname)}  // This always outputs the same pathname. Is my setup incorrect?
+     href={i18n.resolveRoute(i18n.route($page.url.pathname, lang)} // This modification produces the correct path.
	hreflang={lang}>Change language to {lang}</a>
{/each}

I finally succeeded in internationalizing! The links work well and the language changes accordingly.

However, another issue has arisen.
The above code results in a lifecycle change (should I say page mounts and unmounts?). When moving from /kr/a to /en/a with the same page.route.id, it causes the components to reinitialize.
In my case, there's a stopwatch with animations, leading to the animations being reset.

Video posted on the Svelte community to address the reset issue:
https://github.com/opral/monorepo/assets/27078637/fc083459-3cc6-4be2-9eab-ed832654325c

The solution I found involved using reactive message and shallow routing (pushState, replaceState).

Internationalization using shallow routing:
https://github.com/opral/monorepo/assets/27078637/34856158-38fc-46bd-9e46-38dc9738518e

I’m very pleased with the final outcome.

However, the process has made the code somewhat convoluted.
I keep the internationalization code in a store to design it responsively.

import { readable } from 'svelte/store';
import { onSetLanguageTag } from '$lib/paraglide/runtime.js';
import * as m from '$lib/paraglide/messages.js';

export const lang = readable(changeLanguage(), (set) => {
	onSetLanguageTag(() => {set(changeLanguage());});
});

function changeLanguage() {
	return Object.keys(m).reduce((lang, key) => {
		if (typeof m[key] === 'function') lang[key] = m[key]();
		return lang;
	}, {});
}

Whenever a language change occurs (though it's rare), there’s an issue where all strings are reassigned (including those not currently in use on the page).

Any advice on this or a plugin that might offer (optimized) state variables?

[samuelstroschein]

pinging @opral/inlang-paraglide-js