Sveltekit support

[effen1337]

Is using svelte-i18n compatible with sveltekit?

[kaisermann]

Hey, @effen1337 👋 . In theory, it is, but I haven't had the time to explore svelte-kit just yet I'm afraid.

[effen1337]

~~I don't know what I'm doing wrong but~~

///component
	import { _, locale, locales, json } from 'svelte-i18n';
	console.log($json('home.features.am.badges'))
	
	
//en.json
{
"home": {
"features": {
            "am": {
                "badges": [
                    { "t": "1" },
                    { "t": "2" },
                    { "t": "3" },
                    { "t": "4" },
                    { "t": "5" },
                    { "t": "6" },
                    { "t": "7" },
                    { "t": "8" },
                    { "t": "9" }
                ]
            }
}
}

the array is duplicated

[
    {
        "t": "1"
    },
    {
        "t": "2"
    },
    {
        "t": "3"
    },
    {
        "t": "4"
    },
    {
        "t": "5"
    },
    {
        "t": "6"
    },
    {
        "t": "7"
    },
    {
        "t": "8"
    },
    {
        "t": "9"
    },
    {
        "t": "1"
    },
    {
        "t": "2"
    },
    {
        "t": "3"
    },
    {
        "t": "4"
    },
    {
        "t": "5"
    },
    {
        "t": "6"
    },
    {
        "t": "7"
    },
    {
        "t": "8"
    },
    {
        "t": "9"
    }
]

EDIT: Seems like this happens in dev mode.

[jarda-svoboda]

@kaisermann @effen1337 Hi guys, i just released my own i18n implementation for SvelteKit, which includes features, like:

• SSR
• module-based translations (loads only translations you really use)
• custom data sources (no matter if you are using local files or fetching translations from server)

It's currently in beta, but if you see it useful, you can use my code and integrate some of these features into your project.. If you are interested, see https://github.com/jarda-svoboda/sveltekit-i18n and let me know what you think... (examples currently in progress...)

[SuspiciousLookingOwl]

I'm using this library with svelte kit, can confirm that it's working with SSR, however you need put init in load method so it gets executed on server side properly

<!-- routes/__layout.svelte  --> 
<script context="module">
	import { browser } from "$app/env";
	import { addMessages, getLocaleFromQueryString, init,  } from "svelte-i18n";

	addMessages(...);
	addMessages(...);
	addMessages(...);

	if (browser) {
		// init on client side only
		// don't put this inside `load`, otherwise it will gets executed every time you changed route on client side
		init({
			fallbackLocale: "en",
			initialLocale: getLocaleFromQueryString("lang"),
		});
	}
	
	export const load = ({ page }) => {
		if (!browser) {
			// init on server side only, need to get query from `page.query.get("lang")`
			init({
				fallbackLocale: "en",
				initialLocale: page.query.get("lang"),
			});
		}
	}
</script>

---

EDIT: page is removed on newer version of svelte kit, the load function should look like this instead

export const load = ({ params }) => {
	if (!browser) {
		// init on server side only, need to get query from `page.query.get("lang")`
		init({
			fallbackLocale: "en",
			initialLocale: params.lang,
		});
	}
};

[Tal500]

@kaisermann @effen1337 Hi guys, i just released my own i18n implementation for SvelteKit, which includes features, like:

* SSR

* module-based translations (loads only translations you really use)

* custom data sources (no matter if you are using local files or fetching translations from server)

It's currently in beta, but if you see it useful, you can use my code and integrate some of these features into your project.. If you are interested, see https://github.com/jarda-svoboda/sveltekit-i18n and let me know what you think... (examples currently in progress...)

What features your project have that this one doesn't?

[ralyodio]

Is this project dead?

[sebastianrothe]

It works for us with sveltekit.

[kaisermann]

Hey @ralyodio 👋 not dead, but unfortunately I'm not able to prioritize working on it right now

[matthme]

I'm using this library with svelte kit, can confirm that it's working with SSR, however you need put init in load method so it gets executed on server side properly ...

Thank you @SuspiciousLookingOwl. Apparently, since recently the page parameter has been replaced in sveltekit and your code does not work anymore. I did not yet find out how to receive the lang information in the newest sveltekit version, if anyone finds out I would be happy to know.

[SuspiciousLookingOwl]

Thank you @SuspiciousLookingOwl. Apparently, since recently the page parameter has been replaced in sveltekit and your code does not work anymore. I did not yet find out how to receive the lang information in the newest sveltekit version, if anyone finds out I would be happy to know.

It gets replaced with params and url. It should look like this now

export const load = ({ params }) => {
	if (!browser) {
		// init on server side only, need to get query from `page.query.get("lang")`
		init({
			fallbackLocale: "en",
			initialLocale: params.lang,
		});
	}
};

[HannesGitH]

hi guys, has anyone successfully used this with sveltekit for ssg ? (with export const prerender = true; in +layout.js and adapter-static ?)

[mvllow]

hi guys, has anyone successfully used this with sveltekit for ssg ?

(with export const prerender = true; in +layout.js and adapter-static ?)

https://github.com/rose-pine/rose-pine-site does this, granted it's still using a version of sveltekit that has prerender in the svelte config

[sebastianrothe]

We are using this in our project(closes source) with adapter-static, prerender = true, but ssr = false.

[HannesGitH]

hi guys, has anyone successfully used this with sveltekit for ssg ? (with export const prerender = true; in +layout.js and adapter-static ?)

https://github.com/rose-pine/rose-pine-site does this, granted it's still using a version of sveltekit that has prerender in the svelte config

ah, they did it the sync way, thats what i also did in the end, but good to know thats how its currently done, thanks :)

[half2me]

I'm using SvelteKit with SSR and I cannot change the locale once set, from a load function.

I have my main +layout.ts at the root of my entire project, that looks like:

export const load = (async ({ params }) => {
  init({
    fallbackLocale: 'en',
    initialLocale: params.region ?? 'en',
  })
  await waitLocale()

  ...
}) satisfies LayoutLoad

And this works fine, but if I want to change the region in another layout: /de/+layout.ts This always needs to be set to german:

export const load = (async ({ }) => {
  locale.set('de') // doesn't work
  // neither does calling init() again
  ...
}) satisfies LayoutLoad

Any idea how this can be changed? For some more context, my setup is I have some static routes that are made for specific languages, these are in: /en/ or /de/ etc. The rest of my routes are dynamic: /[region]/ which matches the region by the parameter and I set the locale accordingly. This bit works fine, but for the cases where I don't use this param, and I just need to always set it to one specific language, I can't get it to work.

[ansbr]

@half2me I have the same question. The current solution with svelte-i18n dynamically changes the language, but does not allow for permanent links with prefixes for different languages, and without prefix for English.

There is a solution with typesafe-i18n, where prefixes are added for all languages, including English, here is an example https://github.com/ivanhofer/typesafe-i18n-demo-sveltekit. But even that doesn't work for me, I would like dynamic configuration, but I can't find anything. I don't even know what to do...

[half2me]

@ansbr what makes things even worse is SvelteKit's preloading behaviour for links. When you hover over a link to a different language, it preloads the page, and runs the language changes even before clicking the link :') I'm getting super weird bugs because of this.

[mtpython]

To anyone looking for a solution that doesn't have server load side-effects like the ones in the SvelteKit example: https://github.com/kaisermann/svelte-i18n/blob/780932a3e1270d521d348aac8ba03be9df309f04/docs/Svelte-Kit.md?plain=1#L37-L47

this seems to be the best solution: https://github.com/sveltekit-i18n/lib/issues/106

[jacob-8]

@kaisermann, I love your library, I've been using it in SvelteKit and Sapper for years and have been quite happy with it. I just started component screenshot testing on my app with many languages. The race condition issue (#165) stemming from using shared state on the server occasionally showed up but not very often. Just enough to make me scratch my head. But now it makes the screenshot testing useless as requests from 11 languages all hit the server at once. So I took the best of your library and two others and wrote a very minimal copy-paste i18n solution. Maybe it, especially the page on using with SvelteKit, can help you update your library to be able to expose a function that lets users instantiate a new format instance per user request in the root +layout.ts.

[kaisermann]

Hey @jacob-8 👋 thanks for the references! Will check it when I can 🙏

[mulder999]

@jacob-8 use the solution I highlight in #165, never ever touch the locale store and you should be fine

[jacob-8]

@jacob-8 use the solution I highlight in #165, never ever touch the locale store and you should be fine

Thanks for the mention, @mulder999, That's a great workaround for svelte-i18n users and I even referenced it in my docs:

But I didn't like the idea of adding that much code to my site. It's not much for one component but when spread across hundreds...

I'd rather use i18n that was built from the ground up for the SSR use case. As I looked at it from a few angles, I realized that I was using very little of all the neat features that svelte-i18n offered, so I just wrote what I've referenced as a i18n DIY guide, which I hope will have a beneficial effect on improving varius i18n libraries available.

[mulder999]

@jacob-8 Thanks for mention. Glad you implemented a solution that works for you.