• Recently, while developing the VSCode Extension, I discovered an issue where the plugin and WebView sections sometimes share a portion of the code, which happens to contain content that needs to be translated, resulting in the inability to use the l10n provided by VSCode itself
• Because some of the WebView pages were developed using Angular, it would be best if a translation could be used for implementation. Therefore, I came up with thelocalize in Angular to separate modules and make them a universal dependency

How to use it?

• access the usage documentation

How to separate?

• With the experience ofseparating dependency injection , is actually quite simple because it is an independent module, so just find the introduction and extraction parts
• The import section is exported intact, while the extraction section uses some self implemented code. However, the related ID generation algorithm remains the same, which means that the translation in Angular can be directly moved here for use

Synchronize updates

• Due to the limited number oflocalize changes, only a small portion has been modified
• UsingSync Script And usegithub actions for update testing

-uses:wszgrcy/code-recycle-action@mainwith:path:./script/sync-localize.tscwd:./src

Calling methods

import{$localize}from'@cyia/localize';$localize`one`;

• Usei18n ./src Extract all$localize label template contents undersrc and generateextract.json metadata> Generate ID consistent with@angular/localize
• Copyextract.json custom language translation and write the translation content into thetarget field
• Usei18n convert ./i18n-merge ./i18n Convert translation metadata tokey-value format for reference
• Custom reference format import translation, such as

// Node environment demonstrationimportpathfrom'path';importfsfrom'fs';import{loadTranslations}from'@cyia/localize';exportconstLanguageMap:Record<string,string>={zh_cn:'zh-Hans',cn:'zh-Hans',en:'en-US',en_us:'en-US',};exportfunctionloadI18n(){letlang=process.env['CR_LANG']?.toLowerCase();if(!lang){if(process.env['LANGUAGE']){lang=process.env['LANGUAGE'].split(':')[0].toLowerCase();}elseif(process.env['LANG']){lang=process.env['LANG'].split('.')[0].toLowerCase();}}letcache;constfilePath=path.join(__dirname,`./i18n/${LanguageMap[lang!]||lang||'zh-Hans'}.json`);if(ENV==='test'){cache={};}else{if(!fs.existsSync(filePath)){cache=__non_webpack_require__('./i18n/zh-Hans.json');}else{cache=__non_webpack_require__(filePath);}}loadTranslations(cache);}loadI18n();