Replace electron API mocks with actual electron API impl (#1535)

* link electron types locally

* Update electronAPI calls

* Fix source validation

* Payload to raw

* nit

* Update electron types

package-lock.json

@@ -9,7 +9,7 @@
       "version": "1.3.42",
       "dependencies": {
         "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-        "@comfyorg/comfyui-electron-types": "^0.2.10",
+        "@comfyorg/comfyui-electron-types": "^0.2.16",
         "@comfyorg/litegraph": "^0.8.26",
         "@primevue/themes": "^4.0.5",
         "@vueuse/core": "^11.0.0",
@@ -1916,9 +1916,9 @@
       "dev": true
     },
     "node_modules/@comfyorg/comfyui-electron-types": {
-      "version": "0.2.10",
-      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.2.10.tgz",
-      "integrity": "sha512-JwqFeqmJBp6n276Ki+VEkMkO43rFHobdt93AzJYpWC+BXGUuvTyquon/MvblWtJDnTdO0mGWGXztDFe0sXie6A==",
+      "version": "0.2.16",
+      "resolved": "https://registry.npmjs.org/@comfyorg/comfyui-electron-types/-/comfyui-electron-types-0.2.16.tgz",
+      "integrity": "sha512-Hm6NeyMK4sd2V5AyOnvfI+tvCsXr5NBG8wOZlWyyD17ADpbQnpm6qPMWzvm4vCp/YvTR7cUbDGiY0quhofuQGg==",
       "license": "GPL-3.0-only"
     },
     "node_modules/@comfyorg/litegraph": {

package.json

@@ -72,7 +72,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.3.1",
-    "@comfyorg/comfyui-electron-types": "^0.2.10",
+    "@comfyorg/comfyui-electron-types": "^0.2.16",
     "@comfyorg/litegraph": "^0.8.26",
     "@primevue/themes": "^4.0.5",
     "@vueuse/core": "^11.0.0",

src/components/install/InstallLocationPicker.vue

@@ -77,8 +77,7 @@ const pathError = defineModel<string>('pathError', { required: true })
 const appData = ref('')
 const appPath = ref('')
 
-// TODO: Implement the actual electron API.
-const electron = electronAPI() as any
+const electron = electronAPI()
 
 // Get system paths on component mount
 onMounted(async () => {

src/components/install/MigrationPicker.vue

@@ -68,38 +68,45 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, watchEffect } from 'vue'
+import { ref, computed, watchEffect } from 'vue'
 import { electronAPI } from '@/utils/envUtil'
 import InputText from 'primevue/inputtext'
 import Button from 'primevue/button'
 import Checkbox from 'primevue/checkbox'
 import Message from 'primevue/message'
 import { useI18n } from 'vue-i18n'
+import { MigrationItems } from '@comfyorg/comfyui-electron-types'
 
 const { t } = useI18n()
 
-const electron = electronAPI() as any
+const electron = electronAPI()
 
 const sourcePath = defineModel<string>('sourcePath', { required: false })
 const migrationItemIds = defineModel<string[]>('migrationItemIds', {
   required: false
 })
 
-const migrationItems = ref([])
+const migrationItems = ref(
+  MigrationItems.map((item) => ({
+    ...item,
+    selected: true
+  }))
+)
+
 const pathError = ref('')
 const isValidSource = computed(
   () => sourcePath.value !== '' && pathError.value === ''
 )
 
-const validateSource = async () => {
-  if (!sourcePath.value) {
+const validateSource = async (sourcePath: string) => {
+  if (!sourcePath) {
     pathError.value = ''
     return
   }
 
   try {
     pathError.value = ''
-    const validation = await electron.validateComfyUISource(sourcePath.value)
+    const validation = await electron.validateComfyUISource(sourcePath)
 
     if (!validation.isValid) pathError.value = validation.error
   } catch (error) {
@@ -113,7 +120,7 @@ const browsePath = async () => {
     const result = await electron.showDirectoryPicker()
     if (result) {
       sourcePath.value = result
-      await validateSource()
+      await validateSource(result)
     }
   } catch (error) {
     console.error(error)
@@ -121,13 +128,6 @@ const browsePath = async () => {
   }
 }
 
-onMounted(async () => {
-  migrationItems.value = (await electron.migrationItems()).map((item) => ({
-    ...item,
-    selected: true
-  }))
-})
-
 watchEffect(() => {
   migrationItemIds.value = migrationItems.value
     .filter((item) => item.selected)

src/stores/electronDownloadStore.ts

@@ -21,7 +21,7 @@ export const useElectronDownloadStore = defineStore('downloads', () => {
   const initialize = async () => {
     if (isElectron()) {
       const allDownloads: ElectronDownload[] =
-        await DownloadManager.getAllDownloads()
+        (await DownloadManager.getAllDownloads()) as unknown as ElectronDownload[]
 
       for (const download of allDownloads) {
         downloads.value.push(download)

src/views/InstallView.vue

@@ -87,7 +87,8 @@ import InstallLocationPicker from '@/components/install/InstallLocationPicker.vu
 import MigrationPicker from '@/components/install/MigrationPicker.vue'
 import DesktopSettingsConfiguration from '@/components/install/DesktopSettingsConfiguration.vue'
 import { electronAPI } from '@/utils/envUtil'
-import { ref, computed } from 'vue'
+import { ref, computed, toRaw } from 'vue'
+import { useRouter } from 'vue-router'
 
 const installPath = ref('')
 const pathError = ref('')
@@ -100,14 +101,17 @@ const allowMetrics = ref(true)
 
 const hasError = computed(() => pathError.value !== '')
 
+const router = useRouter()
 const install = () => {
-  ;(electronAPI() as any).installComfyUI({
+  const options = toRaw({
     installPath: installPath.value,
     autoUpdate: autoUpdate.value,
     allowMetrics: allowMetrics.value,
     migrationSourcePath: migrationSourcePath.value,
-    migrationItemIds: migrationItemIds.value
+    migrationItemIds: toRaw(migrationItemIds.value)
   })
+  electronAPI().installComfyUI(options)
+  router.push('/server-start')
 }
 </script>
 

src/views/ServerStartView.vue

@@ -14,9 +14,9 @@ import {
   ProgressStatus,
   ProgressMessages
 } from '@comfyorg/comfyui-electron-types'
-import { electronAPI as getElectronAPI } from '@/utils/envUtil'
+import { electronAPI } from '@/utils/envUtil'
 
-const electronAPI = getElectronAPI()
+const electron = electronAPI()
 
 const status = ref<ProgressStatus>(ProgressStatus.INITIAL_STATE)
 const logs = ref<string[]>([])
@@ -35,9 +35,9 @@ const fetchLogs = async () => {
 }
 
 onMounted(() => {
-  electronAPI.sendReady()
-  electronAPI.onProgressUpdate(updateProgress)
-  electronAPI.onLogMessage((message: string) => {
+  electron.sendReady()
+  electron.onProgressUpdate(updateProgress)
+  electron.onLogMessage((message: string) => {
     addLogMessage(message)
   })
 })

vite.config.mts

@@ -176,6 +176,9 @@ export default defineConfig({
   },
 
   optimizeDeps: {
-    exclude: ['@comfyorg/litegraph']
+    exclude: [
+      '@comfyorg/litegraph',
+      '@comfyorg/comfyui-electron-types'
+    ]
   }
 }) as UserConfigExport