Support for a split of translations coming from library and from the App

[bn3t]

Hi,
We have used typesafe-i18n on a react app (based on vite) and we are quite happy with it. So far the app has been a monolith but I need now to extract some reusable components into a separate library project. This means that this separate library will have its own translations alongside the App. How should I go about it? I reckon the TypesafeI18n context will be declared and implemented in the App but it should load translations coming from different sources, the library and the App.
Thanks for your answer,
Bernard.

[ivanhofer]

Hi @bn3t,
since typesafe-i18n uses regular TypeScript files, you can manage your dictionaries however you want. You could split the stings out into multiple files like this:

/common/i18n/en.ts

export const common: BaseTranslation = {
	companyName: 'Best Company'
}

/lib/i18n/en.ts

export const lib: BaseTranslation = {
	login: {
	   	ctaLabel: 'Login',
		invalidCredentials: 'Username or password do not match any user on this system'
	}
}

/app/src/i18n/en/index.ts

const en: BaseTranslation = {
	...common,
	...lib,
   projectLabel: '{nr: number} Project{{s}}'
}

export default en

Or you can also have it's own instance per package. Then you would need to make sure to initialize the locale for each package individually you are using.

Hope this helps!