refactor(web-client): fix lints emitted by ESLint

Co-authored-by: irving ou <jou@devolutions.net>

web-client/iron-remote-gui/src/interfaces/UserInteraction.ts

@@ -1,13 +1,15 @@
 import type {ScreenScale} from '../enums/ScreenScale';
 import type {Observable} from 'rxjs';
 import type {NewSessionInfo} from './NewSessionInfo';
+import type {SessionEvent} from './session-event';
+import type {DesktopSize} from './DesktopSize';
 
 export interface UserInteraction {
     setVisibility(state: boolean): void;
 
     setScale(scale: ScreenScale): void;
 
-    connect(username: string, password: string, destination: string, proxyAddress: string, serverDomain: string, authToken: string): Observable<NewSessionInfo>;
+    connect(username: string, password: string, destination: string, proxyAddress: string, serverDomain: string, authToken: string, desktopSize?: DesktopSize, preConnectionBlob?: string): Observable<NewSessionInfo>;
 
     ctrlAltDel(): void;
 
@@ -15,5 +17,5 @@ export interface UserInteraction {
     
     shutdown(): void;
 
-    sessionListener: Observable<any>;
+    sessionListener: Observable<SessionEvent>;
 }

web-client/iron-remote-gui/src/iron-remote-gui.svelte

@@ -18,14 +18,12 @@
     let isVisible = false;
     let capturingInputs = false;
     let currentComponent = get_current_component();
-    let canvas;
-    let canvasCtx;
+    let canvas: HTMLCanvasElement;
 
-    let wrapper;
-    let viewer;
+    let wrapper: HTMLDivElement;
 
-    let viewerStyle;
-    let wrapperStyle;
+    let viewerStyle: string;
+    let wrapperStyle: string;
     
     let wasmService = new WasmBridgeService();
     let publicAPI = new PublicAPI(wasmService);
@@ -70,7 +68,7 @@
         viewerStyle = newStyle;
     }
 
-    function setWrapperStyle(height, width, overflow) {
+    function setWrapperStyle(height: string, width: string, overflow: string) {
         wrapperStyle = `height: ${height}; width: ${width}; overflow: ${overflow}`;
     }
 
@@ -192,7 +190,7 @@
         setHostStyle(false);
     }
 
-    function getMousePos(evt) {
+    function getMousePos(evt: MouseEvent) {
         const rect = canvas?.getBoundingClientRect(),
             scaleX = canvas?.width / rect.width,
             scaleY = canvas?.height / rect.height;
@@ -205,25 +203,25 @@
         wasmService.updateMousePosition(coord);
     }
 
-    function setMouseButtonState(state, isDown) {
+    function setMouseButtonState(state: MouseEvent, isDown: boolean) {
         wasmService.mouseButtonState(state, isDown);
     }
 
-    function mouseWheel(evt) {
+    function mouseWheel(evt: WheelEvent) {
         wasmService.mouseWheel(evt);
     }
 
-    function setMouseIn(evt) {
+    function setMouseIn(evt: MouseEvent) {
         capturingInputs = true;
         wasmService.mouseIn(evt);
     }
 
-    function setMouseOut(evt) {
+    function setMouseOut(evt: MouseEvent) {
         capturingInputs = false;
         wasmService.mouseOut(evt);
     }
 
-    function keyboardEvent(evt) {
+    function keyboardEvent(evt: KeyboardEvent) {
         wasmService.sendKeyboardEvent(evt);
     }
 
@@ -232,21 +230,21 @@
             doc = document,
             docElem = doc.documentElement,
             body = doc.getElementsByTagName('body')[0],
-            x = win.innerWidth || docElem.clientWidth || body.clientWidth,
-            y = win.innerHeight || docElem.clientHeight || body.clientHeight;
+            x = win.innerWidth ?? docElem.clientWidth ?? body.clientWidth,
+            y = win.innerHeight ?? docElem.clientHeight ?? body.clientHeight;
         return {x, y};
     }
 
     async function initcanvas() {
         loggingService.info('Start canvas initialization.')
         canvas = currentComponent.shadowRoot.getElementById('renderer');
-        canvasCtx = canvas?.getContext('2d', {alpha: false});
 
         // Set a default canvas size. Need more test to know if i can remove it.
         canvas.width = 800;
         canvas.height = 600;
 
-        await wasmService.init(LogType[debugwasm] || LogType.INFO);
+        const logLevel = LogType[debugwasm] ?? LogType.INFO;
+        await wasmService.init(logLevel);
         wasmService.setCanvas(canvas);
 
         initListeners();
@@ -269,7 +267,7 @@
 <div bind:this={wrapper} class="screen-wrapper scale-{scale}" class:hidden="{!isVisible}"
      class:capturing-inputs="{capturingInputs}"
      style="{wrapperStyle}">
-    <div bind:this={viewer} class="screen-viewer" style="{viewerStyle}">
+    <div class="screen-viewer" style="{viewerStyle}">
         <canvas
                 on:mousemove={getMousePos}
                 on:mousedown={(event) => setMouseButtonState(event, true)}

web-client/iron-remote-gui/src/lib/scancodes.ts

@@ -13,7 +13,7 @@ type EngineMaps = {
 };
 type CodeMap = Record<OS, EngineMaps>;
 
-export let ScanCodeToCode: CodeMap = {
+export const ScanCodeToCode: CodeMap = {
     windows: {
         blink: {
             "0x0001": "Escape",
@@ -813,7 +813,7 @@ export let ScanCodeToCode: CodeMap = {
     }
 }
 
-export let CodeToScanCode: CodeMap = {
+export const CodeToScanCode: CodeMap = {
     windows: {
         blink: {},
         gecko: {}
@@ -828,7 +828,7 @@ export let CodeToScanCode: CodeMap = {
     }
 };
 
-let mapList: [Record<string, string>, Record<string, string>][] = [
+const mapList: [Record<string, string>, Record<string, string>][] = [
     [ScanCodeToCode.windows.blink!, CodeToScanCode.windows.blink!],
     [ScanCodeToCode.windows.gecko, CodeToScanCode.windows.gecko],
     [ScanCodeToCode.linux.blink!, CodeToScanCode.linux.blink!],
@@ -837,23 +837,23 @@ let mapList: [Record<string, string>, Record<string, string>][] = [
 ];
 
 mapList.forEach(maps => {
-    for (let key in maps[0]) {
+    for (const key in maps[0]) {
         if (Object.prototype.hasOwnProperty.call(maps[0], key)) {
             maps[1][maps[0][key]] = key;
         }
     }
 })
 
-let parser = new UAParser();
-let parsedUA = parser.getResult();
-let engine = parsedUA.engine.name?.toLowerCase() as EngineName;
+const parser = new UAParser();
+const parsedUA = parser.getResult();
+const engine = parsedUA.engine.name?.toLowerCase() as EngineName;
 
-export let scanCode = function (code: string, targetOs: OS): number {
-    let map = CodeToScanCode[targetOs][engine] || CodeToScanCode.linux.gecko;
+export const scanCode = function (code: string, targetOs: OS): number {
+    const map = CodeToScanCode[targetOs][engine] || CodeToScanCode.linux.gecko;
     return parseInt(map[code], 16);
 }
 
-export let code = function (scanCode: string, targetOs: OS): string {
-    let map = ScanCodeToCode[targetOs][engine] || CodeToScanCode.linux.gecko;
+export const code = function (scanCode: string, targetOs: OS): string {
+    const map = ScanCodeToCode[targetOs][engine] || CodeToScanCode.linux.gecko;
     return map[scanCode];
 }

web-client/iron-remote-gui/src/main.ts

@@ -1,4 +1,4 @@
-import IronRemoteGui from './iron-remote-gui.svelte';
+export * as default from './iron-remote-gui.svelte';
 
 export type {UserInteraction} from './interfaces/UserInteraction';
 export type {ResizeEvent} from './interfaces/ResizeEvent';

web-client/iron-remote-gui/src/services/logging.service.ts

@@ -7,11 +7,11 @@
         }
     }
     
-    error(description: string, object?: any) {
+    error(description: string, object?: unknown) {
         if (this.verbose) {
             console.error(description, object);
         }
     }
 }
 
-export let loggingService = new LoggingService();
+export const loggingService = new LoggingService();

web-client/iron-remote-gui/src/services/wasm-bridge.service.ts

@@ -70,7 +70,7 @@ export class WasmBridgeService {
 
     mouseButtonState(event: MouseEvent, isDown: boolean) {
         event.preventDefault(); // prevent default behavior (context menu, etc)
-        let mouseFnc = isDown ? DeviceEvent.new_mouse_button_pressed : DeviceEvent.new_mouse_button_released;
+        const mouseFnc = isDown ? DeviceEvent.new_mouse_button_pressed : DeviceEvent.new_mouse_button_released;
         this.doTransactionFromDeviceEvents([mouseFnc(event.button)]);
     }
 
@@ -97,11 +97,11 @@ export class WasmBridgeService {
         sessionBuilder.show_pointer_callback_context(this);
         sessionBuilder.show_pointer_callback(this.showPointerCallback);
 
-        if (preConnectionBlob) {
+        if (preConnectionBlob != null) {
             sessionBuilder.pcb(preConnectionBlob);
         }
 
-        if (desktopSize) {
+        if (desktopSize != null) {
             sessionBuilder.desktop_size(DesktopSize.new(desktopSize.width, desktopSize.height));
         }
 
@@ -169,8 +169,8 @@ export class WasmBridgeService {
 
 
     mouseWheel(event: WheelEvent) {
-        let vertical = event.deltaY !== 0;
-        let rotation = vertical ? event.deltaY : event.deltaX;
+        const vertical = event.deltaY !== 0;
+        const rotation = vertical ? event.deltaY : event.deltaX;
         this.doTransactionFromDeviceEvents([DeviceEvent.new_wheel_rotations(vertical, -rotation)]);
     }
 
@@ -228,13 +228,11 @@ export class WasmBridgeService {
         this.canvas!.style.cursor = 'default';
     }
 
-    private syncModifier(evt: any): void {
-        const mouseEvent = evt as MouseEvent;
-
-        let syncCapsLockActive = mouseEvent.getModifierState(LockKey.CAPS_LOCK);
-        let syncNumsLockActive = mouseEvent.getModifierState(LockKey.NUM_LOCK);
-        let syncScrollLockActive = mouseEvent.getModifierState(LockKey.SCROLL_LOCK);
-        let syncKanaModeActive = mouseEvent.getModifierState(LockKey.KANA_MODE);
+    private syncModifier(evt: KeyboardEvent | MouseEvent): void {
+        const syncCapsLockActive = evt.getModifierState(LockKey.CAPS_LOCK);
+        const syncNumsLockActive = evt.getModifierState(LockKey.NUM_LOCK);
+        const syncScrollLockActive = evt.getModifierState(LockKey.SCROLL_LOCK);
+        const syncKanaModeActive = evt.getModifierState(LockKey.KANA_MODE);
 
         this.session?.synchronize_lock_keys(syncScrollLockActive, syncNumsLockActive, syncCapsLockActive, syncKanaModeActive);
     }

web-client/iron-svelte-client/pre-build.js

@@ -33,9 +33,11 @@ let run = async function (command, cwd) {
             console.log(`child process exited with code ${code}`);
             resolve();
         });
-    })
-}
+    });
+};
+
 let copyCoreFiles = async function () {
+    console.log('Copying core files…');
     await fs.remove(assetIronRemoteGuiFolder);
     return new Promise(resolve => {
         let source = '../iron-remote-gui/dist';
@@ -43,10 +45,10 @@ let copyCoreFiles = async function () {
 
         fs.copy(source, destination, function (err) {
             if (err) {
-                console.log('An error occurred while copying folder.');
+                console.log('An error occurred while copying core files.');
                 return console.error(err);
             }
-            console.log('Core files was copied successfully');
+            console.log('Core files were copied successfully');
             resolve();
         });
     })

web-client/iron-svelte-client/src/lib/login/login.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
     import {currentSession, userInteractionService} from '../../services/session.service';
     import {catchError, filter} from "rxjs/operators";
-    import type {IRGUserInteraction, NewSessionInfo} from '../../../static/iron-remote-gui';
+    import type {UserInteraction, NewSessionInfo} from '../../../static/iron-remote-gui';
     import {of} from 'rxjs';
     import {toast} from '$lib/messages/message-store';
     import {showLogin} from '$lib/login/login-store';
-    import {DesktopSize} from '../../models/desktop-size';
+    import type {DesktopSize} from '../../models/desktop-size';
 
     let username = "Administrator";
     let password = "DevoLabs123!";
@@ -17,14 +17,13 @@
         width: 1280,
         height: 768
     };
-    let pcb;
-    let toastMessage: string;
+    let pcb: string;
 
-    let userInteraction: IRGUserInteraction;
+    let userInteraction: UserInteraction;
 
     userInteractionService.subscribe(val => {
         userInteraction = val;
-        if (val) {
+        if (val != null) {
             initListeners();
         }
     });
@@ -36,12 +35,12 @@
 
                 toast.set({
                     type: 'error',
-                    message: event.data.backtrace ? event.data.backtrace() : event.data,
+                    message: event.data.backtrace != null ? event.data.backtrace() : event.data,
                 });
             } else {
                 toast.set({
                     type: 'info',
-                    message: event.data || "No info",
+                    message: event.data ?? "No info",
                 });
             }
         });
@@ -63,8 +62,8 @@
                 }),
                 filter(result => !!result)
             )
-            .subscribe((start_info: NewSessionInfo) => {
-                if (start_info.initial_desktop_size !== null) {
+            .subscribe((start_info: NewSessionInfo | null) => {
+                if (start_info != null && start_info.initial_desktop_size !== null) {
                     toast.set({
                         type: 'info',
                         message: 'Success',

web-client/iron-svelte-client/src/lib/messages/message.svelte

@@ -4,13 +4,21 @@
     let toastMessage: string;
 
     toast.subscribe(t => {
-        if (t) {
+        if (t != null) {
             toastMessage = t.message;
             switch (t.type) {
                 case 'info':
+                    // FIXME: update beercss (the `ui` function comes from this library)
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    // eslint-disable-next-line no-undef
                     ui('#toast');
                     break;
                 case 'error':
+                    // FIXME: update beercss (the `ui` function comes from this library)
+                    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                    // @ts-ignore
+                    // eslint-disable-next-line no-undef
                     ui('#toast-error');
                     break;
             }

web-client/iron-svelte-client/src/lib/remote-screen/remote-screen.svelte

@@ -5,11 +5,12 @@
         userInteractionService
     } from '../../services/session.service';
     import {showLogin} from '$lib/login/login-store';
+    import type { UserInteraction } from '../../../static/iron-remote-gui/main';
 
-    let uiService;
+    let uiService: UserInteraction;
 
     userInteractionService.subscribe(uis => {
-        if (uis) {
+        if (uis != null) {
             uiService = uis
             uiService.sessionListener.subscribe(event => {
                 if (event.type === 0) {
@@ -24,8 +25,14 @@
 
     onMount(async () => {
         let el = document.querySelector('iron-remote-gui');
+
+        if (el == null) {
+            throw "`iron-remote-gui` element not found";
+        }
+
         el.addEventListener('ready', (e) => {
-            userInteractionService.set(e.detail.irgUserInteraction);
+            const event = e as CustomEvent;
+            userInteractionService.set(event.detail.irgUserInteraction);
         });
     });
 </script>

web-client/iron-svelte-client/src/routes/session/+page.svelte

@@ -2,7 +2,7 @@
     import Login from '$lib/login/login.svelte';
     import RemoteScreen from '$lib/remote-screen/remote-screen.svelte';
     import Message from '$lib/messages/message.svelte';
-    import {showLogin} from "$lib/login/login-store.ts";
+    import {showLogin} from "$lib/login/login-store";
 
 </script>
 

web-client/iron-svelte-client/src/services/session.service.ts

@@ -24,7 +24,7 @@ export function getCurrentSession(): Session {
 
 export function setCurrentSessionActive(active: boolean) {
    currentSession.update(session => {
-       session.active = true;
+       session.active = active;
        return session;
    }); 
 }