use exitCode and promise to check if puppeteer has been setup. migrate start install logic to DependenciesSetupProgressIndicatorDialog/index.vue

packages/ui/src/main/flow/CHECK_AND_DOWNLOAD_DEPENDENCIES/index.ts

@@ -1,6 +1,11 @@
+import { app } from 'electron'
 import checkAndDownloadPuppeteer from './check-and-download-puppeteer'
 import * as net from 'net'
 
+export enum DOWNLOAD_ERROR_EXIT_CODE {
+  NO_ERROR = 0,
+  DOWNLOAD_ERROR = 1
+}
 export const checkAndDownloadDependenciesForInit = async () => {
   let pipe: null | net.Socket = null
   try {
@@ -15,9 +20,8 @@ export const checkAndDownloadDependenciesForInit = async () => {
     }) + '\r\n'
   )
 
-  let browser
   try {
-    browser = await checkAndDownloadPuppeteer({
+    await checkAndDownloadPuppeteer({
       downloadProgressCallback(downloadedBytes: number, totalBytes: number) {
         pipe?.write(
           JSON.stringify({
@@ -28,18 +32,8 @@ export const checkAndDownloadDependenciesForInit = async () => {
         ) + '\r\n'
       }
     })
-    pipe?.write(
+    app.exit(DOWNLOAD_ERROR_EXIT_CODE.NO_ERROR)
-      JSON.stringify({
-        type: 'PUPPETEER_DOWNLOAD_FINISHED'
-      })
-    ) + '\r\n'
   } catch (err) {
-    pipe?.write(
+    app.exit(DOWNLOAD_ERROR_EXIT_CODE.DOWNLOAD_ERROR)
-      JSON.stringify({
-        type: 'PUPPETEER_DOWNLOAD_ERROR'
-      })
-    ) + '\r\n'
   }
-
-  console.log(browser)
 }

packages/ui/src/main/window/mainWindow.ts

@@ -14,6 +14,7 @@ import {
   getExpectPuppeteerExecutablePath
 } from '../flow/CHECK_AND_DOWNLOAD_DEPENDENCIES/check-and-download-puppeteer'
 import * as JSONStream from 'JSONStream'
+import { DOWNLOAD_ERROR_EXIT_CODE } from '../flow/CHECK_AND_DOWNLOAD_DEPENDENCIES'
 let mainWindow: BrowserWindow
 
 export function createMainWindow(): void {
@@ -134,7 +135,7 @@ export function createMainWindow(): void {
     return await checkPuppeteerExecutable()
   })
 
-  let subProcessOfCheckAndDownloadDependencies: ChildProcess
+  let subProcessOfCheckAndDownloadDependencies: ChildProcess | null = null
   ipcMain.handle('setup-dependencies', async () => {
     if (subProcessOfCheckAndDownloadDependencies) {
       return
@@ -152,17 +153,12 @@ export function createMainWindow(): void {
         stdio: [null, null, null, 'pipe']
       }
     )
-    return new Promise((resolve) => {
+    return new Promise((resolve, reject) => {
       subProcessOfCheckAndDownloadDependencies!.stdio[3]!.pipe(JSONStream.parse()).on(
         'data',
         (raw) => {
           const data = raw
           switch (data.type) {
-            case 'PUPPETEER_DOWNLOAD_FINISHED': {
-              mainWindow.webContents.send(data.type, data)
-              resolve(data)
-              break
-            }
             case 'NEED_RESETUP_DEPENDENCIES':
             case 'PUPPETEER_DOWNLOAD_PROGRESS': {
               mainWindow.webContents.send(data.type, data)
@@ -171,20 +167,22 @@ export function createMainWindow(): void {
             default: {
               return
             }
-            // case 'PUPPETEER_DOWNLOAD_ERROR': {
-            //   subProcessOfCheckAndDownloadDependencies?.kill()
-            //   pipe?.write(JSON.stringify(data) + '\r\n')
-            //   resolve(data)
-            //   break
-            // }
-            // case 'PUPPETEER_MAY_NOT_INSTALLED': {
-            //   pipe?.write(JSON.stringify(data) + '\r\n')
-            //   resolve(data)
-            //   break
-            // }
           }
         }
       )
+      subProcessOfCheckAndDownloadDependencies!.once('exit', (exitCode) => {
+        switch (exitCode) {
+          case DOWNLOAD_ERROR_EXIT_CODE.NO_ERROR: {
+            resolve(exitCode)
+            break
+          }
+          default: {
+            reject(exitCode)
+            break
+          }
+        }
+        subProcessOfCheckAndDownloadDependencies = null
+      })
     })
   })
 

packages/ui/src/renderer/src/features/DependenciesSetupProgressIndicatorDialog/index.vue

@@ -6,14 +6,41 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, onUnmounted } from 'vue'
+import { ref, onUnmounted, onMounted } from 'vue'
+import { ElMessageBox } from 'element-plus';
+
+const props = defineProps({
+  dispose: Function
+})
 
 const percentage = ref(0)
 const handleProgress = (ev, { downloadedBytes, totalBytes }) => {
-  percentage.value = ((downloadedBytes / totalBytes) * 100)
+  percentage.value = (downloadedBytes / totalBytes) * 100
 }
 electron.ipcRenderer.on('PUPPETEER_DOWNLOAD_PROGRESS', handleProgress)
-onUnmounted(
+onUnmounted(() =>
-  () => electron.ipcRenderer.removeListener('PUPPETEER_DOWNLOAD_PROGRESS', handleProgress)
+  electron.ipcRenderer.removeListener('PUPPETEER_DOWNLOAD_PROGRESS', handleProgress)
 )
+const downloadProcessExitCode = ref(0)
+
+const processDownload = async () => {
+  downloadProcessExitCode.value = 0
+  percentage.value = 0
+  try {
+    await electron.ipcRenderer.invoke('setup-dependencies')
+    props.dispose?.()
+  } catch(err) {
+    downloadProcessExitCode.value = 1
+
+    ElMessageBox.confirm('Encounter error while setup dependencies. Retry?')
+    .then(() => {
+      processDownload()
+    })
+    .catch(() => {
+      // FIXME: should exit app here
+      props.dispose?.()
+    })
+  }
+}
+processDownload()
 </script>

packages/ui/src/renderer/src/features/DependenciesSetupProgressIndicatorDialog/operations.ts

@@ -26,7 +26,8 @@ export const mountGlobalDialog = () => {
     modelValue: true,
     onClosed() {
       dispose()
-    }
+    },
+    dispose
   }).use(ElementPlus)
   app.mount(containerEl)
 

packages/ui/src/renderer/src/page/Configuration/index.vue

@@ -16,29 +16,7 @@ onUnmounted(() => {
 ;(async () => {
   const checkDependenciesResult = await electron.ipcRenderer.invoke('check-dependencies')
   if (!checkDependenciesResult) {
-    let processDialog
+    mountDependenciesSetupProgressIndicatorDialog()
-    const needWarmingUpDenpendenciesHandler = () => {
-      processDialog = mountDependenciesSetupProgressIndicatorDialog()
-    }
-    electron.ipcRenderer.on('NEED_RESETUP_DEPENDENCIES', needWarmingUpDenpendenciesHandler)
-
-    const handlePuppeteerDownloadFinished = () => {
-      processDialog?.dispose()
-    }
-    electron.ipcRenderer.once('PUPPETEER_DOWNLOAD_FINISHED', handlePuppeteerDownloadFinished)
-
-    unmountedCbs.push(
-      () => {
-        electron.ipcRenderer.removeListener('PUPPETEER_DOWNLOAD_FINISHED', handlePuppeteerDownloadFinished)
-        electron.ipcRenderer.removeListener('NEED_RESETUP_DEPENDENCIES', needWarmingUpDenpendenciesHandler)
-      }
-    )
-    try {
-      await electron.ipcRenderer.invoke('setup-dependencies')
-    } finally {
-      electron.ipcRenderer.removeListener('PUPPETEER_DOWNLOAD_FINISHED', handlePuppeteerDownloadFinished)
-      electron.ipcRenderer.removeListener('NEED_RESETUP_DEPENDENCIES', needWarmingUpDenpendenciesHandler)
-    }
   }
 })()
 </script>