refactor(web): continue TypeScript migration

web/jest.config.js

@@ -135,7 +135,7 @@ module.exports = {
 
   // A list of paths to modules that run some code to configure or set up the testing framework before each test
   // setupFilesAfterEnv: [],
-  setupFilesAfterEnv: ["<rootDir>/src/setupTests.js"],
+  setupFilesAfterEnv: ["<rootDir>/src/setupTests.ts"],
 
   // The number of seconds after which a test is considered as slow and reported as such in the results.
   // slowTestThreshold: 5,

web/src/agama.ts

@@ -0,0 +1,99 @@
+/*
+ * Copyright (c) [2024] SUSE LLC
+ *
+ * All Rights Reserved.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU General Public License as published by the Free
+ * Software Foundation; either version 2 of the License, or (at your option)
+ * any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT
+ * ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
+ * FITNESS FOR A PARTICULAR PURPOSE.  See the GNU General Public License for
+ * more details.
+ *
+ * You should have received a copy of the GNU General Public License along
+ * with this program; if not, contact SUSE LLC.
+ *
+ * To contact SUSE LLC about this file by physical or electronic mail, you may
+ * find current contact information at www.suse.com.
+ */
+
+/**
+ * This module provides a global "agama" object which can be use from other
+ * scripts like "po.js".
+ */
+
+// mapping with the current translations
+let translations = {};
+// function used for computing the plural form index
+let plural_fn: (n: number) => boolean;
+
+const agama = {
+  // the current language
+  language: "en",
+
+  // set the current translations, called from po.<lang>.js
+  locale: (po) => {
+    if (po) {
+      Object.assign(translations, po);
+
+      const header = po[""];
+      if (header) {
+        if (header["plural-forms"]) plural_fn = header["plural-forms"];
+        if (header.language) agama.language = header.language;
+      }
+    } else if (po === null) {
+      translations = {};
+      plural_fn = undefined;
+      agama.language = "en";
+    }
+  },
+
+  /**
+   * Get a translation for a singular text
+   * @param str input text
+   * @return translated text or the original text if the translation is not found
+   */
+  gettext: (str: string): string => {
+    if (translations) {
+      const translated = translations[str];
+      if (translated?.[0]) return translated[0];
+    }
+
+    // fallback, return the original text
+    return str;
+  },
+
+  /**
+   * get a translation for a plural text
+   * @param str1 input singular text
+   * @param strN input plural text
+   * @param n the actual number which decides whether to use the
+   *   singular or plural form (of which plural form if there are several of them)
+   * @return translated text or the original text if the translation is not found
+   */
+  ngettext: (str1: string, strN: string, n: number) => {
+    if (translations && plural_fn) {
+      // plural form translations are indexed by the singular variant
+      const translation = translations[str1];
+
+      if (translation) {
+        const plural_index = plural_fn(n);
+
+        // the plural function either returns direct index (integer) in the plural
+        // translations or a boolean indicating simple plural form which
+        // needs to be converted to index 0 (singular) or 1 (plural)
+        const index = plural_index === true ? 1 : plural_index || 0;
+
+        if (translation[index]) return translation[index];
+      }
+    }
+
+    // fallback, return the original text
+    return n === 1 ? str1 : strN;
+  },
+};
+
+export default agama;

web/src/client/index.js → web/src/client/index.ts

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) [2021-2023] SUSE LLC
+ * Copyright (c) [2021-2024] SUSE LLC
  *
  * All Rights Reserved.
  *
@@ -20,28 +20,40 @@
  * find current contact information at www.suse.com.
  */
 
-// @ts-check
-
 import { WSClient } from "./ws";
 
-/**
- * @typedef {object} InstallerClient
- * @property {() => boolean} isConnected - determines whether the client is connected
- * @property {() => boolean} isRecoverable - determines whether the client is recoverable after disconnected
- * @property {(handler: () => void) => (() => void)} onConnect - registers a handler to run
- * @property {(handler: () => void) => (() => void)} onDisconnect - registers a handler to run
- *   when the connection is lost. It returns a function to deregister the
- *   handler.
- * @property {(handler: (any) => void) => (() => void)} onEvent - registers a handler to run on events
- */
+type VoidFn = () => void;
+type BooleanFn = () => boolean;
+type EventHandlerFn = (event) => void;
+
+export type InstallerClient = {
+  /** Whether the client is connected. */
+  isConnected: BooleanFn;
+  /** Whether the client is recoverable after disconnecting. */
+  isRecoverable: BooleanFn;
+  /**
+   * Registers a handler to run when connection is set. It returns a function
+   * for deregistering the handler.
+   */
+  onConnect: (handler: VoidFn) => VoidFn;
+  /**
+   * Registers a handler to run when connection is lost. It returns a function
+   * for deregistering the handler.
+   */
+  onDisconnect: (handler: VoidFn) => VoidFn;
+  /**
+   * Registers a handler to run on events. It returns a function for
+   * deregistering the handler.
+   */
+  onEvent: (handler: EventHandlerFn) => VoidFn;
+};
 
 /**
  * Creates the Agama client
  *
- * @param {URL} url - URL of the HTTP API.
- * @return {InstallerClient}
+ * @param url - URL of the HTTP API.
  */
-const createClient = (url) => {
+const createClient = (url: URL): InstallerClient => {
   url.hash = "";
   url.pathname = url.pathname.concat("api/ws");
   url.protocol = url.protocol === "http:" ? "ws" : "wss";
@@ -53,9 +65,9 @@ const createClient = (url) => {
   return {
     isConnected,
     isRecoverable,
-    onConnect: (handler) => ws.onOpen(handler),
-    onDisconnect: (handler) => ws.onClose(handler),
-    onEvent: (handler) => ws.onEvent(handler),
+    onConnect: (handler: VoidFn) => ws.onOpen(handler),
+    onDisconnect: (handler: VoidFn) => ws.onClose(handler),
+    onEvent: (handler: EventHandlerFn) => ws.onEvent(handler),
   };
 };