Convert translator callbacks to async/await (#3048)

Co-authored-by: veeck <michael@veeck.de>

CHANGELOG.md

@@ -37,6 +37,7 @@ _This release is scheduled to be released on 2023-04-01._
 - Update dates in Calendar widgets every minute
 - Cleanup jest coverage for patches
 - Update `stylelint` dependencies, switch to `stylelint-config-standard` and handle `stylelint` issues
+- Convert translator callbacks to async/await
 
 ### Fixed
 

js/loader.js

@@ -160,7 +160,7 @@ const Loader = (function () {
 			Log.log("Scripts loaded for: " + module.name);
 			mObj.loadStyles(function () {
 				Log.log("Styles loaded for: " + module.name);
-				mObj.loadTranslations(function () {
+				mObj.loadTranslations().then(() => {
 					Log.log("Translations loaded for: " + module.name);
 					moduleObjects.push(mObj);
 					callback();

js/main.js

@@ -485,8 +485,7 @@ const MM = (function () {
 
 			Log.setLogLevel(config.logLevel);
 
-			Translator.loadCoreTranslations(config.language);
+			Translator.loadCoreTranslations(config.language).then(() => Loader.loadModules());
-			Loader.loadModules();
 		},
 
 		/**

js/module.js

@@ -302,10 +302,8 @@ const Module = Class.extend({
 
 	/**
 	 * Load all translations.
-	 *
-	 * @param {Function} callback Function called when done.
 	 */
-	loadTranslations(callback) {
+	async loadTranslations() {
 		const translations = this.getTranslations() || {};
 		const language = config.language.toLowerCase();
 
@@ -313,7 +311,6 @@ const Module = Class.extend({
 		const fallbackLanguage = languages[0];
 
 		if (languages.length === 0) {
-			callback();
 			return;
 		}
 
@@ -321,17 +318,14 @@ const Module = Class.extend({
 		const translationsFallbackFile = translations[fallbackLanguage];
 
 		if (!translationFile) {
-			Translator.load(this, translationsFallbackFile, true, callback);
+			return Translator.load(this, translationsFallbackFile, true);
-			return;
 		}
 
-		Translator.load(this, translationFile, false, () => {
+		await Translator.load(this, translationFile, false);
+
 		if (translationFile !== translationsFallbackFile) {
-				Translator.load(this, translationsFallbackFile, true, callback);
+			return Translator.load(this, translationsFallbackFile, true);
-			} else {
-				callback();
 		}
-		});
 	},
 
 	/**

js/translator.js

@@ -11,10 +11,11 @@ const Translator = (function () {
 	 * Load a JSON file via XHR.
 	 *
 	 * @param {string} file Path of the file we want to load.
-	 * @param {Function} callback Function called when done.
+	 * @returns {Promise<object>} the translations in the specified file
 	 */
-	function loadJSON(file, callback) {
+	async function loadJSON(file) {
 		const xhr = new XMLHttpRequest();
+		return new Promise(function (resolve, reject) {
 			xhr.overrideMimeType("application/json");
 			xhr.open("GET", file, true);
 			xhr.onreadystatechange = function () {
@@ -27,10 +28,11 @@ const Translator = (function () {
 						// nothing here, but don't die
 						Log.error(" loading json file =" + file + " failed");
 					}
-				callback(fileinfo);
+					resolve(fileinfo);
 				}
 			};
 			xhr.send(null);
+		});
 	}
 
 	return {
@@ -48,7 +50,7 @@ const Translator = (function () {
 		 * @returns {string} the translated key
 		 */
 		translate: function (module, key, variables) {
-			variables = variables || {}; //Empty object by default
+			variables = variables || {}; // Empty object by default
 
 			/**
 			 * Combines template and variables like:
@@ -101,21 +103,17 @@ const Translator = (function () {
 		 * @param {Module} module The module to load the translation file for.
 		 * @param {string} file Path of the file we want to load.
 		 * @param {boolean} isFallback Flag to indicate fallback translations.
-		 * @param {Function} callback Function called when done.
 		 */
-		load(module, file, isFallback, callback) {
+		async load(module, file, isFallback) {
 			Log.log(`${module.name} - Load translation${isFallback ? " fallback" : ""}: ${file}`);
 
 			if (this.translationsFallback[module.name]) {
-				callback();
 				return;
 			}
 
-			loadJSON(module.file(file), (json) => {
+			const json = await loadJSON(module.file(file));
 			const property = isFallback ? "translationsFallback" : "translations";
 			this[property][module.name] = json;
-				callback();
-			});
 		},
 
 		/**
@@ -123,30 +121,26 @@ const Translator = (function () {
 		 *
 		 * @param {string} lang The language identifier of the core language.
 		 */
-		loadCoreTranslations: function (lang) {
+		loadCoreTranslations: async function (lang) {
 			if (lang in translations) {
 				Log.log("Loading core translation file: " + translations[lang]);
-				loadJSON(translations[lang], (translations) => {
+				this.coreTranslations = await loadJSON(translations[lang]);
-					this.coreTranslations = translations;
-				});
 			} else {
 				Log.log("Configured language not found in core translations.");
 			}
 
-			this.loadCoreTranslationsFallback();
+			await this.loadCoreTranslationsFallback();
 		},
 
 		/**
-		 * Load the core translations fallback.
+		 * Load the core translations' fallback.
 		 * The first language defined in translations.js will be used.
 		 */
-		loadCoreTranslationsFallback: function () {
+		loadCoreTranslationsFallback: async function () {
 			let first = Object.keys(translations)[0];
 			if (first) {
 				Log.log("Loading core translation fallback file: " + translations[first]);
-				loadJSON(translations[first], (translations) => {
+				this.coreTranslationsFallback = await loadJSON(translations[first]);
-					this.coreTranslationsFallback = translations;
-				});
 			}
 		}
 	};

tests/e2e/translations_spec.js

@@ -21,8 +21,8 @@ describe("Translations", () => {
 		server = app.listen(3000);
 	});
 
-	afterAll(() => {
+	afterAll(async () => {
-		server.close();
+		await server.close();
 	});
 
 	it("should have a translation file in the specified path", () => {
@@ -48,17 +48,15 @@ describe("Translations", () => {
 			dom.window.onload = async () => {
 				const { Translator, Module, config } = dom.window;
 				config.language = "en";
-				Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
+				Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
 
 				Module.register("name", { getTranslations: () => translations });
 				const MMM = Module.create("name");
 
-				const loaded = sinon.stub();
+				await MMM.loadTranslations();
-				MMM.loadTranslations(loaded);
 
-				expect(loaded.callCount).toBe(1);
 				expect(Translator.load.args.length).toBe(1);
-				expect(Translator.load.calledWith(MMM, "translations/en.json", false, sinon.match.func)).toBe(true);
+				expect(Translator.load.calledWith(MMM, "translations/en.json", false)).toBe(true);
 
 				done();
 			};
@@ -67,18 +65,16 @@ describe("Translations", () => {
 		it("should load translation + fallback file", (done) => {
 			dom.window.onload = async () => {
 				const { Translator, Module } = dom.window;
-				Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
+				Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
 
 				Module.register("name", { getTranslations: () => translations });
 				const MMM = Module.create("name");
 
-				const loaded = sinon.stub();
+				await MMM.loadTranslations();
-				MMM.loadTranslations(loaded);
 
-				expect(loaded.callCount).toBe(1);
 				expect(Translator.load.args.length).toBe(2);
-				expect(Translator.load.calledWith(MMM, "translations/de.json", false, sinon.match.func)).toBe(true);
+				expect(Translator.load.calledWith(MMM, "translations/de.json", false)).toBe(true);
-				expect(Translator.load.calledWith(MMM, "translations/en.json", true, sinon.match.func)).toBe(true);
+				expect(Translator.load.calledWith(MMM, "translations/en.json", true)).toBe(true);
 
 				done();
 			};
@@ -88,17 +84,15 @@ describe("Translations", () => {
 			dom.window.onload = async () => {
 				const { Translator, Module, config } = dom.window;
 				config.language = "--";
-				Translator.load = sinon.stub().callsFake((_m, _f, _fb, callback) => callback());
+				Translator.load = sinon.stub().callsFake((_m, _f, _fb) => null);
 
 				Module.register("name", { getTranslations: () => translations });
 				const MMM = Module.create("name");
 
-				const loaded = sinon.stub();
+				await MMM.loadTranslations();
-				MMM.loadTranslations(loaded);
 
-				expect(loaded.callCount).toBe(1);
 				expect(Translator.load.args.length).toBe(1);
-				expect(Translator.load.calledWith(MMM, "translations/en.json", true, sinon.match.func)).toBe(true);
+				expect(Translator.load.calledWith(MMM, "translations/en.json", true)).toBe(true);
 
 				done();
 			};
@@ -112,10 +106,8 @@ describe("Translations", () => {
 				Module.register("name", {});
 				const MMM = Module.create("name");
 
-				const loaded = sinon.stub();
+				await MMM.loadTranslations();
-				MMM.loadTranslations(loaded);
 
-				expect(loaded.callCount).toBe(1);
 				expect(Translator.load.callCount).toBe(0);
 
 				done();
@@ -138,14 +130,13 @@ describe("Translations", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
 					{ runScripts: "dangerously", resources: "usable" }
 				);
-				dom.window.onload = () => {
+				dom.window.onload = async () => {
 					const { Translator } = dom.window;
 
-					Translator.load(mmm, translations[language], false, () => {
+					await Translator.load(mmm, translations[language], false);
 					expect(typeof Translator.translations[mmm.name]).toBe("object");
 					expect(Object.keys(Translator.translations[mmm.name]).length).toBeGreaterThanOrEqual(1);
 					done();
-					});
 				};
 			});
 		}
@@ -161,13 +152,12 @@ describe("Translations", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
 				{ runScripts: "dangerously", resources: "usable" }
 			);
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
 
-				Translator.load(mmm, translations.de, false, () => {
+				await Translator.load(mmm, translations.de, false);
 				base = Object.keys(Translator.translations[mmm.name]).sort();
 				done();
-				});
 			};
 		});
 
@@ -191,13 +181,12 @@ describe("Translations", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "js", "translator.js")}">`,
 						{ runScripts: "dangerously", resources: "usable" }
 					);
-					dom.window.onload = () => {
+					dom.window.onload = async () => {
 						const { Translator } = dom.window;
 
-						Translator.load(mmm, translations[language], false, () => {
+						await Translator.load(mmm, translations[language], false);
 						keys = Object.keys(Translator.translations[mmm.name]).sort();
 						done();
-						});
 					};
 				});
 

tests/unit/classes/translator_spec.js

@@ -23,14 +23,13 @@ describe("Translator", () => {
 		});
 	});
 
-	afterAll(() => {
+	afterAll(async () => {
 		for (const socket of sockets) {
 			socket.destroy();
-
 			sockets.delete(socket);
 		}
 
-		server.close();
+		await server.close();
 	});
 
 	describe("translate", () => {
@@ -158,35 +157,33 @@ describe("Translator", () => {
 
 		it("should load translations", (done) => {
 			const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
 				const file = "translation_test.json";
 
-				Translator.load(mmm, file, false, () => {
+				await Translator.load(mmm, file, false);
 				const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
 				expect(Translator.translations[mmm.name]).toEqual(json);
 				done();
-				});
 			};
 		});
 
 		it("should load translation fallbacks", (done) => {
 			const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
 				const file = "translation_test.json";
 
-				Translator.load(mmm, file, true, () => {
+				await Translator.load(mmm, file, true);
 				const json = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", file));
 				expect(Translator.translationsFallback[mmm.name]).toEqual(json);
 				done();
-				});
 			};
 		});
 
 		it("should not load translations, if module fallback exists", (done) => {
 			const dom = new JSDOM(`<script>var Log = {log: () => {}};</script><script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`, { runScripts: "dangerously", resources: "usable" });
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator, XMLHttpRequest } = dom.window;
 				const file = "translation_test.json";
 
@@ -198,13 +195,12 @@ describe("Translator", () => {
 					Hello: "Hallo"
 				};
 
-				Translator.load(mmm, file, false, () => {
+				await Translator.load(mmm, file, false);
 				expect(Translator.translations[mmm.name]).toBe(undefined);
 				expect(Translator.translationsFallback[mmm.name]).toEqual({
 					Hello: "Hallo"
 				});
 				done();
-				});
 			};
 		});
 	});
@@ -216,9 +212,9 @@ describe("Translator", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
 				{ runScripts: "dangerously", resources: "usable" }
 			);
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
-				Translator.loadCoreTranslations("en");
+				await Translator.loadCoreTranslations("en");
 
 				const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
 				setTimeout(() => {
@@ -235,9 +231,9 @@ describe("Translator", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
 				{ runScripts: "dangerously", resources: "usable" }
 			);
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
-				Translator.loadCoreTranslations("MISSINGLANG");
+				await Translator.loadCoreTranslations("MISSINGLANG");
 
 				const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
 				setTimeout(() => {
@@ -256,9 +252,9 @@ describe("Translator", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
 				{ runScripts: "dangerously", resources: "usable" }
 			);
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
-				Translator.loadCoreTranslationsFallback();
+				await Translator.loadCoreTranslationsFallback();
 
 				const en = require(path.join(__dirname, "..", "..", "..", "tests", "mocks", "translation_test.json"));
 				setTimeout(() => {
@@ -274,9 +270,9 @@ describe("Translator", () => {
 					<script src="file://${path.join(__dirname, "..", "..", "..", "js", "translator.js")}">`,
 				{ runScripts: "dangerously", resources: "usable" }
 			);
-			dom.window.onload = () => {
+			dom.window.onload = async () => {
 				const { Translator } = dom.window;
-				Translator.loadCoreTranslations();
+				await Translator.loadCoreTranslations();
 
 				setTimeout(() => {
 					expect(Translator.coreTranslationsFallback).toEqual({});