SvelteKit component library

[danielbayley80]

I have a UI component library with its own translation files.
I also have a master project with it's translations.

What I can't work out is the best way to pull through the component library language files and ensure they are loaded.
Are there any examples for this?

[ivanhofer]

I don't have an example at hand.
You could

1. import translations from the UI Library using the namespaces feature
   i18n/en/ui-lib/index.ts

   import en from 'ui-lib/i18n/en/index.ts'
   export default en

Then somewhere in you code you can call loadNamespace('ui-lib')

*You could also do the same without namesapces

2. create a function that imports an initializes a single locale and call it somewhere in your +layout.ts file

import { initEnLocale } from 'ui-lib'

export const load = asnyc () => {
    	await loadLocaleAsync('en') // 
 	initEnLocale()
 }

Variant 2 is probably the better choice as it involves less manual steps for users of the ui library, but you probably need to experiment a bit.
Let me know if this answer helps :)

[danielbayley80]

Thanks. I was trying something like suggestion 2. But I wasn't sure what should go in my initEnLocale() method.

I think I need a load all (for server side) and load locale for front end.

I found simply trying to load the languages the usual way didn't work, but didnt have time to investigate further.
I was looking at loadNamespaceAsync and extending the dictionary.

A bit like this in an index.ts file for my components :

export const loadComponentLanguage = (async (locale: Locales) => {
      await loadNamespaceAsync(locale, 'components')
}) 

[ivanhofer]

I think I need a load all (for server side) and load locale for front end.

load all on server makes sense, because it des not really affect performance. On the client instead you should always take care that you only load necessary things.

Just a small hint, if not already obvious: you probably want to load the translations in a load function, or else you have blank parts on your screen until the translations are loaded.

[Ennoriel]

@danielbayley80 did you find a workaround to your problem?

[danielbayley80]

Nothing that worked well for my scenario. I had real problems getting things to load correctly.
For now I'm maintaining a language file for the component then copying it to the main projects, which is clunky as hell but i rarely need to do it.

[Ennoriel]

Thanks for the quick reply!

How did you configure your ui library to be able to use translation of your app in your components?

At the moment, I configured typesafe twice (in my ui library and in my app).

In a component of the UI library, I import LL as I would in any project.
I expose setLocale and loadLocaleAsync and call them in my app in the same as well as the ones for my app translations.

This works but it doesn't seems right because it initializes 2 instances of typesafe

[danielbayley80]

Yes that is what I had to do. I configure it in the UI library so I can work there , test, etc. Then I have it in the main project. I didn't notice it initialising 2 instances, although that may well be happening thinking about it. I don't know if that is a problem or not.

I use typed-inject in other case so I can inject services project by project, so maybe it can be wrapped and injected. It's workable for now though so I've stuck with it.