refactored mainWindow to customWindow

el3um4s · Sep 26, 2021 · 5d7cef5 · 5d7cef5
1 parent 19092ec
commit 5d7cef5
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 38 deletions.
diff --git a/package.json b/package.json
@@ -4,12 +4,13 @@
   "description": "Template to create a desktop app with Svelte, Electron and TypeScript (with electron-updater, electron-reload and electron-builder)",
   "author": "Samuele de Tomasi <[email protected]>",
   "license": "MIT",
-  "version": "0.0.10",
+  "version": "0.0.11",
   "main": "dist/index.js",
   "scripts": {
     "nodemon": "nodemon",
     "dev": "rollup -c -w",
     "start": "npm run compile && electron .",
+    "start:svelte": "rollup -c & npm run compile && electron .",
     "compile": "tsc",
     "out:win": "rollup -c && tsc && electron-builder build --win --publish never",
     "publish:win": "rollup -c && tsc && electron-builder build --win --publish always"

diff --git a/src/electron/IPC/General/IPC.ts b/src/electron/IPC/General/IPC.ts
@@ -20,11 +20,20 @@ export default class IPC {
         }
     }
 
-    initIpcMain(ipcMain:IpcMain, mainWindow: BrowserWindow) {
-        if (mainWindow) {
+    async initIpcMain(ipcMain:IpcMain, customWindow: BrowserWindow) {
+        if (customWindow) {
             Object.keys(this.validSendChannel).forEach(key => {
-                ipcMain.on(key, async( event, message) => {
-                    this.validSendChannel[key](mainWindow, event, message);
+                ipcMain.on(key, async ( event, message) => {
+                     try {
+                        if( !!customWindow && customWindow.id === event.sender.id)
+                        { await this.validSendChannel[key](customWindow, event, message); }
+                     } catch (e) {
+                        if( e instanceof TypeError) {
+                            // console.log(e.name, e.message);
+                        } else {
+                            console.log(e);
+                        }
+                     }
                 });
             });
         }

diff --git a/src/electron/mainWindow.ts → src/electron/customWindow.ts b/src/electron/mainWindow.ts → src/electron/customWindow.ts
@@ -1,6 +1,7 @@
-import { app, BrowserWindow } from 'electron';
+import { app, BrowserWindow, ipcMain } from 'electron';
 import path from "path";
 import EventEmitter from 'events';
+import IPC from './IPC/General/IPC';
 
 const appName = "MEMENTO - Svelte, Electron, TypeScript";
 
@@ -10,23 +11,16 @@ const defaultSettings = {
   height: 480
 }
 
-class Main {
+class CustomWindow {
   window!: BrowserWindow;
   settings: {[key: string]: any};
   onEvent: EventEmitter = new EventEmitter();
 
   constructor(settings: {[key: string]: any} | null = null) {
     this.settings = settings ? {...settings} : {...defaultSettings}
-
-    app.on('ready', () => { 
-      this.window = this.createWindow(); 
-      this.onEvent.emit("window-created");
-    });
-    app.on('window-all-closed', this.onWindowAllClosed);
-    app.on('activate', this.onActivate);
   }
 
-  createWindow() {
+  createWindow(url: string) {
     let settings = {...this.settings}
     app.name = appName;
     let window = new BrowserWindow({
@@ -36,31 +30,22 @@ class Main {
         nodeIntegration: false,
         contextIsolation: true,
         nativeWindowOpen: true,
-        // enableRemoteModule: true,
         preload: path.join(__dirname, "preload.js")
       }
     });
 
-    window.loadURL(path.join(__dirname, 'www', 'index.html'));
+    window.loadURL(url);
     window.once('ready-to-show', () => {
       window.show()
     });
 
+    this.window = window;
     return window;
   }
 
-  onWindowAllClosed() {
-    if (process.platform !== 'darwin') {
-      app.quit();
-    }
+  async setIpcMain(api: Array<IPC>) {
+    api.forEach( async (el) => await el.initIpcMain(ipcMain, this.window));
   }
-
-  onActivate() {
-    if (!this.window) {
-      this.createWindow();
-    }
-  }
-
 }
 
-export default Main;
+export default CustomWindow;
diff --git a/src/electron/index.ts b/src/electron/index.ts
@@ -1,17 +1,32 @@
-import { ipcMain } from 'electron';
+import { app } from 'electron';
 import { autoUpdater } from "electron-updater";
-import Main from "./mainWindow";
+import path from "path";
+
+import CustomWindow from "./customWindow";
 
 import systemInfo from './IPC/systemInfo';
 import updaterInfo from './IPC/updaterInfo';
 
 require('electron-reload')(__dirname);
 
-let main = new Main();
+let mainWindow: CustomWindow;
 
-main.onEvent.on("window-created", ()=> {
-    systemInfo.initIpcMain(ipcMain, main.window);
-    updaterInfo.initIpcMain(ipcMain, main.window);
+app.on('ready', async () => {
+    await createMainWindow();
+});
 
-    updaterInfo.initAutoUpdater(autoUpdater, main.window);
+app.on('window-all-closed', () => {
+    if (process.platform !== 'darwin') {
+        app.quit();
+    }
 });
+
+async function createMainWindow() {
+    mainWindow = new CustomWindow();
+    const urlPage = path.join(__dirname, 'www', 'index.html');
+    mainWindow.createWindow(urlPage);
+
+    await mainWindow.setIpcMain([systemInfo, updaterInfo]);
+
+    updaterInfo.initAutoUpdater(autoUpdater, mainWindow.window);
+}
diff --git a/src/frontend/Components/Version.svelte b/src/frontend/Components/Version.svelte
@@ -7,6 +7,7 @@
   let updateNotAvailable: boolean = false;
   let downloading: boolean = false;
   let quitAndInstall: boolean = false;
+  let isInstalling: boolean = false;
 
   let downloadMessage: string = "";
 
@@ -61,6 +62,7 @@
   function install() {
     globalThis.api.updaterInfo.send("quitAndInstall", null);
     quitAndInstall = false;
+    isInstalling = true;
   }
 </script>
 
@@ -69,7 +71,7 @@
 </div>
 
 <div>
-  {#if !checkingForUpdate && !updateAvailable && !downloading && !quitAndInstall}
+  {#if !checkingForUpdate && !updateAvailable && !downloading && !quitAndInstall && !isInstalling}
     <button on:click={check} class="btn-orange">Check for Update</button>
   {/if}
   {#if checkingForUpdate}
@@ -86,13 +88,18 @@
     <span class="bg-gray-300 text-red-900 message"> Update not available </span>
   {/if}
   {#if downloading}
-    {downloadMessage}
+    <span class="bg-yellow-700 text-yellow-100 message">
+      {downloadMessage.length > 1 ? downloadMessage : "download..."}
+    </span>
   {/if}
   {#if quitAndInstall}
     <button on:click={install} class="btn-orange"
       >The updates are ready. Click to quit and install.</button
     >
   {/if}
+  {#if isInstalling}
+    <span class="bg-yellow-700 text-yellow-100 message"> Installing... </span>
+  {/if}
 </div>
 
 <style lang="postcss">