Custom extension internationalization

#1

Hi, all.
I have installed language pack like Chinese (Simplified) Language Pack in Theia, all of the default content have been changed to Chinese, but how can custom extension do?

like this: https://ecdtools.eclipse.org/resources/blogs/2021-12-16-theia-i18n/ Sample Menu is not internationalized.
In my custom extenions, I do add nls.localize to code like doc said, but still not work.

#2

Hi @navono,

what parts of the documentation do not work for you? Do you mind sharing a bit more information your setup, so we can help you fix this?

Be aware that nls.localize alone does not automatically translate your content, you’ll have to add your translated text as a LocalizationContribution in the backend.

#3

@msujew thank you for your reply.

Yes, I added LocalizationContribution in the backend with translated json file. Full demo please check this repo. nls.localize in sample-menu-contribution.ts and LocalizationContribution in the backend.

I tried to debug, it appears that nls key not found in localization.translations, seems not merge custom extension LocalizationContribution

#4

Hi @navono,

Thank you for sharing an example. So, there are two small issues which prevent this from working. You’re really close:

  1. Your LocalizationContribution is not decorated as @injectable() (imported from @theia/core/shared/inversify)
  2. The require paths are wrong, because your JS files end up in the lib folder, while your localization files are in your src folder. I would generally recommend to put the data folder on the same level as the lib and src folders.

The following will translate your sample menu correctly:

import { injectable } from '@theia/core/shared/inversify';

@injectable()
export class CustomLocalizationContribution implements LocalizationContribution {
	async registerLocalizations(registry: LocalizationRegistry): Promise<void> {
		console.error('registerLocalizations');

		// Theia uses language codes, e.g. "de" for German
		registry.registerLocalizationFromRequire('en', require('../../../src/backend/data/i18n/nls.en.json'));
		registry.registerLocalizationFromRequire('zh-cn', require('../../../src/backend/data/i18n/nls.zh-cn.json'));
	}
}
1 Like
#5

@msujew Thank you for reply. Didn’t notice injectable annotation and load path.

#6

你好！我看到你上传的https://github.com/navono/theia-hello-world-extension这个项目，我想请教你一个实现，就是在开始打开项目时，是如何提示项目已经内置中文版然后用户点击使用中文版，然后重新刷新一遍就展示中文了

#7

有个语言插件，装上中文语言插件后，然后将自己要翻译的文件也注册进去。首先一打开界面是英文的，然后需要设置成中文，这个设置信息是保存在登录用户的个人文件夹下的，之后再打开界面就都是中文了。
如果要做到提示，那么只能在自己的首页展示这个信息，用户选择后就做语言切换即可。