refactor: declare types for APIs, avoid making dynamic calls to any functions from the web

Author: louis-jan

core/src/api/index.ts

@@ -58,3 +58,36 @@ export enum FileSystemRoute {
   getResourcePath = 'getResourcePath',
   exists = 'exists',
 }
+
+export type ApiFunction = (...args: any[]) => any
+
+export type AppRouteFunctions = {
+  [K in AppRoute]: ApiFunction
+}
+
+export type AppEventFunctions = {
+  [K in AppEvent]: ApiFunction
+}
+
+export type DownloadRouteFunctions = {
+  [K in DownloadRoute]: ApiFunction
+}
+
+export type DownloadEventFunctions = {
+  [K in DownloadEvent]: ApiFunction
+}
+
+export type ExtensionRouteFunctions = {
+  [K in ExtensionRoute]: ApiFunction
+}
+
+export type FileSystemRouteFunctions = {
+  [K in FileSystemRoute]: ApiFunction
+}
+
+export type APIRoutes = AppRouteFunctions &
+  AppEventFunctions &
+  DownloadRouteFunctions &
+  DownloadEventFunctions &
+  ExtensionRouteFunctions &
+  FileSystemRouteFunctions

web/containers/Providers/index.tsx

@@ -53,7 +53,7 @@ const Providers = (props: PropsWithChildren) => {
   useEffect(() => {
     if (setupCore) {
       // Electron
-      if (window && window.core.api) {
+      if (window && window.core?.api) {
         setupExtensions()
       } else {
         // Host

web/extension/ExtensionManager.ts

@@ -58,7 +58,7 @@ export class ExtensionManager {
    * @returns An array of extensions.
    */
   async getActive(): Promise<Extension[]> {
-    const res = await window.core.api?.getActiveExtensions()
+    const res = await window.core?.api?.getActiveExtensions()
     if (!res || !Array.isArray(res)) return []
 
     const extensions: Extension[] = res.map(
@@ -119,7 +119,7 @@ export class ExtensionManager {
     if (typeof window === 'undefined') {
       return
     }
-    const res = await window.core.api?.installExtension(extensions)
+    const res = await window.core?.api?.installExtension(extensions)
     if (res.cancelled) return false
     return res.map(async (ext: any) => {
       const extension = new Extension(ext.name, ext.url, ext.active)
@@ -138,7 +138,7 @@ export class ExtensionManager {
     if (typeof window === 'undefined') {
       return
     }
-    return window.core.api?.uninstallExtension(extensions, reload)
+    return window.core?.api?.uninstallExtension(extensions, reload)
   }
 }
 

web/hooks/useGetAppVersion.ts

@@ -8,7 +8,7 @@ export function useGetAppVersion() {
   }, [])
 
   const getAppVersion = () => {
-    window.core.api?.appVersion().then((version: string | undefined) => {
+    window.core?.api?.appVersion().then((version: string | undefined) => {
       setVersion(version ?? '')
     })
   }

web/screens/Settings/CoreExtensions/ExtensionsCatalog/index.tsx

@@ -67,7 +67,7 @@ const ExtensionCatalog = () => {
     // Send the filename of the to be installed extension
     // to the main process for installation
     const installed = await extensionManager.install([extensionFile])
-    if (installed) window.core.api?.relaunch()
+    if (installed) window.core?.api?.relaunch()
   }
 
   /**
@@ -80,7 +80,7 @@ const ExtensionCatalog = () => {
     // Send the filename of the to be uninstalled extension
     // to the main process for removal
     const res = await extensionManager.uninstall([name])
-    if (res) window.core.api?.relaunch()
+    if (res) window.core?.api?.relaunch()
   }
 
   /**

web/types/index.d.ts

@@ -1,11 +1,17 @@
+import { APIRoutes } from '@janhq/core'
+
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export {}
 
 declare global {
   declare const PLUGIN_CATALOG: string
   declare const VERSION: string
+  interface Core {
+    api: APIRoutes
+    events: EventEmitter
+  }
   interface Window {
-    core?: any | undefined
+    core?: Core | undefined
     electronAPI?: any | undefined
   }
 }