[Tech] Type-check Backend & Frontend events (#3649)

* Typechecking for backendEvents

* Typechecking for sendFrontendMessage

Author: CommandMC

package.json

@@ -142,6 +142,7 @@
     "ts-jest": "29.0.5",
     "ts-prune": "0.10.3",
     "type-fest": "3.6.1",
+    "typed-emitter": "^2.1.0",
     "typescript": "4.9.4",
     "unimported": "1.26.0",
     "vite": "3.2.8",

src/backend/api/helpers.ts

@@ -3,7 +3,6 @@ import {
   Runner,
   InstallPlatform,
   WineCommandArgs,
-  ConnectivityChangedCallback,
   ConnectivityStatus,
   AppSettings,
   GameSettings,
@@ -115,7 +114,13 @@ export const runWineCommandForGame = async (args: RunWineCommandArgs) =>
   ipcRenderer.invoke('runWineCommandForGame', args)
 
 export const onConnectivityChanged = async (
-  callback: ConnectivityChangedCallback
+  callback: (
+    event: Electron.IpcRendererEvent,
+    status: {
+      status: ConnectivityStatus
+      retryIn: number
+    }
+  ) => void
 ) => ipcRenderer.on('connectivity-changed', callback)
 
 export const getConnectivityStatus = async () =>

src/backend/api/library.ts

@@ -1,7 +1,6 @@
 import { ipcRenderer } from 'electron'
 import {
   Runner,
-  InstallParams,
   LaunchParams,
   ImportGameArgs,
   GameStatus,
@@ -74,11 +73,15 @@ export const handleLaunchGame = (
 ) => ipcRenderer.on('launchGame', callback)
 
 export const handleInstallGame = (
-  callback: (event: Electron.IpcRendererEvent, args: InstallParams) => void
+  callback: (
+    event: Electron.IpcRendererEvent,
+    appName: string,
+    runner: Runner
+  ) => void
 ) => ipcRenderer.on('installGame', callback)
 
 export const handleRefreshLibrary = (
-  callback: (event: Electron.IpcRendererEvent, runner: Runner) => void
+  callback: (event: Electron.IpcRendererEvent, runner?: Runner) => void
 ) => ipcRenderer.on('refreshLibrary', callback)
 
 export const handleGamePush = (

src/backend/api/misc.ts

@@ -127,8 +127,9 @@ export const pathExists = async (path: string) =>
 export const processShortcut = async (combination: string) =>
   ipcRenderer.send('processShortcut', combination)
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export const handleGoToScreen = (callback: any) => {
+export const handleGoToScreen = (
+  callback: (e: Electron.IpcRendererEvent, screen: string) => void
+) => {
   ipcRenderer.on('openScreen', callback)
   return () => {
     ipcRenderer.removeListener('openScreen', callback)

src/backend/api/wine.ts

@@ -38,7 +38,7 @@ export const refreshWineVersionInfo = async (fetch?: boolean): Promise<void> =>
 export const handleProgressOfWinetricks = (
   onProgress: (
     e: Electron.IpcRendererEvent,
-    payload: { messages: string[]; installingComponent: '' }
+    payload: { messages: string[]; installingComponent: string }
   ) => void
 ): (() => void) => {
   ipcRenderer.on('progressOfWinetricks', onProgress)

src/backend/backend_events.ts

@@ -1,5 +1,19 @@
 import EventEmitter from 'events'
 
+import type TypedEventEmitter from 'typed-emitter'
+import type { GameStatus, RecentGame } from 'common/types'
+
+type BackendEvents = {
+  gameStatusUpdate: (payload: GameStatus) => void
+  recentGamesChanged: (recentGames: RecentGame[]) => void
+  settingChanged: (obj: {
+    key: string
+    oldValue: unknown
+    newValue: unknown
+  }) => void
+  [key: `progressUpdate-${string}`]: (progress: GameStatus) => void
+}
+
 // This can be used to emit/listen to events to decouple components
 // For example:
 //   When the list of recent games changes, a `recentGamesChanged` event is emitted.
@@ -9,4 +23,5 @@ import EventEmitter from 'events'
 // Usage:
 //   Emit events with `backendEvents.emit("eventName", arg1, arg2)
 //   Listen to events with `backendEvents.on("eventName", (arg1, arg2) => { ... })
-export const backendEvents = new EventEmitter()
+export const backendEvents =
+  new EventEmitter() as TypedEventEmitter<BackendEvents>

src/backend/logger/logger.ts

@@ -121,7 +121,7 @@ export function initLogger() {
     )
 
     if (key === 'disableLogs') {
-      logsDisabled = newValue
+      logsDisabled = newValue as boolean
     }
   })
 }

src/backend/main_window.ts

@@ -2,6 +2,7 @@ import { AppSettings, WindowProps } from 'common/types'
 import { BrowserWindow, screen } from 'electron'
 import path from 'path'
 import { configStore } from './constants'
+import type { FrontendMessages } from 'common/types/frontend_messages'
 
 let mainWindow: BrowserWindow | null = null
 
@@ -18,7 +19,10 @@ export const isFrameless = () => {
 // send a message to the main window's webContents if available
 // returns `false` if no mainWindow or no webContents
 // returns `true` if the message was sent to the webContents
-export const sendFrontendMessage = (message: string, ...payload: unknown[]) => {
+export const sendFrontendMessage = <MessageName extends keyof FrontendMessages>(
+  message: MessageName,
+  ...payload: Parameters<FrontendMessages[MessageName]>
+) => {
   // get the first BrowserWindow if for some reason we don't have a webContents
   if (!mainWindow?.webContents) {
     mainWindow = BrowserWindow.getAllWindows()[0]

src/backend/progress_bar.ts

@@ -1,9 +1,9 @@
-import { InstallProgress } from 'common/types'
+import { GameStatus } from 'common/types'
 import { backendEvents } from './backend_events'
 import { getMainWindow } from './main_window'
 
-const handleProgressUpdate = ({ progress }: { progress: InstallProgress }) => {
-  if (progress.percent) {
+const handleProgressUpdate = ({ progress }: GameStatus) => {
+  if (progress?.percent) {
     getMainWindow()?.setProgressBar(progress.percent / 100)
   }
 }

src/backend/protocol.ts

@@ -135,18 +135,15 @@ async function handleLaunch(
       icon: icon
     })
     if (response === 0) {
-      return sendFrontendMessage('installGame', {
-        appName: app_name,
-        runner: gameRunner
-      })
+      return sendFrontendMessage('installGame', app_name, gameRunner)
     }
     if (response === 1) {
       return logInfo('Not installing game', LogPrefix.ProtocolHandler)
     }
   }
 
   mainWindow?.hide()
-  sendFrontendMessage('launchGame', arg, gameRunner)
+  sendFrontendMessage('launchGame', app_name, gameRunner)
 }
 
 /**