sveltekit functions files.ts not get $LL string translated

[trongtri35]

Hi all,
i have a file lib/functions.ts
somethings like this:

import LL, { setLocale, locale } from "$lib/i18n/i18n-svelte";
import { get as getStore } from 'svelte/store'
import { toast } from "svoast";
....

const $LL = getStore(LL)
const agree = async (id:string, userInfo:any, loanOwnerUid: string) => {
        try {
            const notification = {
                createdAt: new Date().toISOString(),
                payload:{data:{loanUid:id, type:'loanDetail'},notification:{body: userInfo.firstName + ' ' + userInfo.lastName ?? '' + ' ' + $LL.notification.haveJustAgreeYourLoan(), title:$LL.notification.loanStatusChanged()}},
                read:false,
                to:loanOwnerUid
            }
            await push (ref(db, 'notifications/'), notification)
            toast.success($LL.notification.agreeAndNeedConfirm(), { duration: 8000, closable: true });
        } catch (error: any) {
            toast.error(error.message, { duration: 8000, closable: true });
        }
    },

the translation work well in +page.svelte but when using in functions.ts, it get no value.
Hope someone help me, i have ask GPT and google but still can't use LL in file ts.
At the moment i have to pass translated value in +page.svelte to this functions for save to firebase.

[ivanhofer]

If you call getStore(LL) inside the agree function it should work. I'm assuming $LL gets initialized before typeasfe-i18n is initialized. Therefore no locale is set and you see an empty output.

[trongtri35]

Your answer is very fast and correct, thank you very much

[cloud-on-prem]

I am on a similar journey as above and not sure what I am doing wrong.

src/routes/+layout.svelte

<script lang="ts">
	import { LL, setLocale, locale } from '$i18n/i18n-svelte.js';

	setLocale('en');

	$: {
		console.log($locale);
		console.log($LL.HI({ name: 'Svelte' }));
	}
</script>

<div id="app">
<p>{$LL.HI({name: 'Svelte'})}</p>
</div>

The console output:

en

No output for the second console log and nothing is rendered in the browser either.

Here's my sveltekit config

import adapter from '@sveltejs/adapter-static';
import { vitePreprocess } from '@sveltejs/kit/vite';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	preprocess: vitePreprocess(),
	kit: {
		adapter: adapter({
			pages: 'build',
			assets: 'build',
			fallback: "index.html",
			precompress: false,
			strict: true
		}),
		alias: {
			'$components': './src/components/',
			'$lib': './src/lib/',
			'$stores': './src/stores/',
			'$i18n': './src/i18n/',
		},
	},
	build: {
		rollupOptions: {
			chunkSizeWarningLimit: 1000,
		},
	},
};

export default config;

and the .typesafe-i18n.json

{
   "adapter": "svelte",
   "$schema": "https://unpkg.com/[email protected]/schema/typesafe-i18n.json",
   "esmImports": true,
   "baseLocale": "en"
}

[ivanhofer]

You need to load the locale first before using it: https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/generator#loading-locales

[cloud-on-prem]

Thanks a ton. That worked. It's not apparent from the docs for svelte.

BTW, awesome project. Thanks for creating and maintaining it. 👍

[ivanhofer]

Thanks!

Please tell me how to improve the docs. The information is already there:
https://github.com/ivanhofer/typesafe-i18n/tree/main/packages/adapter-svelte#configure-typesafe-i18n-for-an-existing-svelte-project

[tmaxmax]

That TODO part was confusing to me aswell. It sounds as if it is a TODO for the author, rather than for the user, i.e. it looks like that part must be added to the docs.

Maybe it could be worded something like: "Don't forget to load locales – see <link> for how to do it". There could also be a commented code sequence as an example, which should be a good default for most users: for example, importing loadAllLocales from the sync utils and calling it just before setLocale.

[ivanhofer]

Thanks for the suggestion! I will update the docs once I find time for it.