initial code for changing the language

[DenisaCG]

The PR is missing the logic for listening to language changes, in Jupyter Lab.

It also mentions this issue, in connection with the error for using the setLocale property from Blockly.

[hbcarlos]

I believe we can not listen for changes on the ITranslator. But there is probably another solution. I saw the language is stored in the settings, we can use the settings to listen for changes in language.

There is here an example of how to use the settings that could be useful.
https://github.com/jupyterlab/extension-examples/tree/master/settings

And this is the ITraslation plugging, it could be useful to see what is the name of the plugin and the name of the settings we want to listen to for changes.
https://github.com/jupyterlab/jupyterlab/blob/29b6cc783a8e3169385df5cc452cf30975c41e4e/packages/translation-extension/src/index.ts#L38-L40

[hbcarlos]

Hi @DenisaCG the PR looks great!
Do you mind rebasing to resolve the conflicts?
I just realize that Blockly languages are javascript modules and would be better to load them dynamically. I opened a PR to your branch as an example of how to load them dynamically.
DenisaCG#3

[hbcarlos]

Thanks for this awesome feature @DenisaCG!
I added a couple of commits to fix the CI. We have TypeScript configured to prevent using @ts-ignore but we need to use it because Blockly is missing some types, I just added this commit 9f456a2 to allow the @ts-ignore in line 180.

[DenisaCG]

Thank you for the great feedback and help @hbcarlos!

As a wrap-up, in index.ts, we used locale from the ISettingsRegistry to listen to the changes in language from JupyterLab:

jupyterlab-blockly/src/index.ts

Lines 120 to 144 in d56ccaf

	function getSetting(setting: ISettingRegistry.ISettings): string {
	// Read the settings and convert to the correct type
	const currentLocale: string = setting.get('locale').composite as string;
	return currentLocale;
	}
	// Wait for the application to be restored and
	// for the settings for this plugin to be loaded
	settings.load(PLUGIN_ID).then(setting => {
	// Read the settings
	const currentLocale = getSetting(setting);
	// Listen for our plugin setting changes using Signal
	setting.changed.connect(getSetting);
	// Get new language and call the function that modifies the language name accordingly.
	// Also, make the transformation to have the name of the language package as in Blockly.
	const language =
	currentLocale[currentLocale.length - 2].toUpperCase() +
	currentLocale[currentLocale.length - 1].toLowerCase();
	console.log(`Current Language : '${language}'`);
	// Transmitting the current language to the manager.
	widgetFactory.manager.setlanguage(language);
	});

.

Further, in manager.ts we used dynamic imports to include all the language modules from Blockly and load the respective language each user is using, in accordance to the Jupyter Lab one:

jupyterlab-blockly/src/manager.ts

Lines 68 to 183 in d56ccaf

	setlanguage(language: string): void {
	this.language = language;
	Private.importLanguageModule(language);
	}
	}
	// Dynamically importing the language modules needed for each respective
	// user, in order to change the Blockly language in accordance to the
	// JL one.
	namespace Private {
	export async function importLanguageModule(language: string) {
	let module: Promise<any>;
	switch (language) {
	case 'En':
	module = import('blockly/msg/en');
	break;
	case 'Es':
	module = import('blockly/msg/es');
	break;
	case 'Fr':
	module = import('blockly/msg/fr');
	break;
	case 'Sa' || 'Ar':
	module = import('blockly/msg/ar');
	break;
	case 'Cz':
	module = import('blockly/msg/cs');
	break;
	case 'Dk':
	module = import('blockly/msg/da');
	break;
	case 'De':
	module = import('blockly/msg/de');
	break;
	case 'Gr':
	module = import('blockly/msg/el');
	break;
	case 'Ee':
	module = import('blockly/msg/et');
	break;
	case 'Fi':
	module = import('blockly/msg/fi');
	break;
	case 'Il':
	module = import('blockly/msg/he');
	break;
	case 'Hu':
	module = import('blockly/msg/hu');
	break;
	case 'Am':
	module = import('blockly/msg/hy');
	break;
	case 'Id':
	module = import('blockly/msg/id');
	break;
	case 'It':
	module = import('blockly/msg/it');
	break;
	case 'Jp':
	module = import('blockly/msg/ja');
	break;
	case 'Kr':
	module = import('blockly/msg/ko');
	break;
	case 'Lt':
	module = import('blockly/msg/lt');
	break;
	case 'Nl':
	module = import('blockly/msg/nl');
	break;
	case 'Pl':
	module = import('blockly/msg/pl');
	break;
	case 'Br':
	module = import('blockly/msg/pt');
	break;
	case 'Ro':
	module = import('blockly/msg/ro');
	break;
	case 'Ru':
	module = import('blockly/msg/ru');
	break;
	case 'Lk':
	module = import('blockly/msg/si');
	break;
	case 'Tr':
	module = import('blockly/msg/tr');
	break;
	case 'Ua':
	module = import('blockly/msg/uk');
	break;
	case 'Vn':
	module = import('blockly/msg/vi');
	break;
	case 'Tw':
	module = import('blockly/msg/zh-hant');
	break;
	case 'Cn':
	module = import('blockly/msg/zh-hans');
	break;
	// Complete with all the cases taken from: (last updates June 2022)
	// List of languages in blockly: https://github.com/google/blockly/tree/master/msg/js
	// List of languages in Lab: https://github.com/jupyterlab/language-packs/tree/master/language-packs
	default:
	console.warn('Language not found. Loading english');
	module = Promise.resolve(En);
	break;
	}
	// Setting the current language in Blockly.
	module.then(lang => {
	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
	// @ts-ignore
	Blockly.setLocale(lang);
	});
	}

.