refactor: electron starup (#8)

.github/workflows/installer.yml

@@ -9,58 +9,12 @@ on:
       - main
 
 jobs:
-  package:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 1
-          lfs: true
-          clean: true
-
-      - name: Setup Node.js
-        uses: actions/[email protected]
-        with:
-          node-version: 18
-
-      - name: Install dependencies for controller
-        run: npm ci
-        working-directory: ./controller
-
-      - name: Build controller
-        run: npm run build:ng
-        working-directory: ./controller
-
-      - name: Publish controller
-        uses: actions/[email protected]
-        with:
-          name: angular-controller
-          path: ./controller/dist/controller
-          if-no-files-found: error
-
-      - name: Install dependencies for editor
-        run: npm ci
-        working-directory: ./editor
-
-      - name: Build editor
-        run: npm run build:ng
-        working-directory: ./editor
-
-      - name: Publish editor
-        uses: actions/[email protected]
-        with:
-          name: angular-editor
-          path: ./editor/dist/editor
-          if-no-files-found: error
-
   installer:
     name: Compile installer on ${{ matrix.os }}
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
         os: [ubuntu-latest, macOS-latest, windows-latest]
-    needs: package
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -74,34 +28,20 @@ jobs:
         with:
           node-version: 18
 
-      - name: Create temp directory
-        run: |
-          mkdir -p artifacts/controller
-          mkdir -p artifacts/editor
-          mkdir -p artifacts/sing-box
-
-      - name: Download angular-controller
-        uses: actions/[email protected]
-        with:
-          name: angular-controller
-          path: artifacts/controller
-
-      - name: Download angular-editor
-        uses: actions/[email protected]
-        with:
-          name: angular-editor
-          path: artifacts/editor
+      - uses: google/wireit@setup-github-actions-caching/v1
 
       - name: Download sing-box for Linux
         if: matrix.os == 'ubuntu-latest'
         run: |
+          mkdir -p artifacts/sing-box
           wget -O ./sing-box.tar.gz https://github.com/SagerNet/sing-box/releases/download/v1.1.7/sing-box-1.1.7-linux-amd64.tar.gz
           tar -xvzf ./sing-box.tar.gz -C ./artifacts/sing-box
           mv artifacts/sing-box/**/sing-box controller/resources/sing-box
 
       - name: Download sing-box for Mac
         if: matrix.os == 'macOS-latest'
         run: |
+          mkdir -p artifacts/sing-box
           wget -O ./sing-box.tar.gz https://github.com/SagerNet/sing-box/releases/download/v1.1.7/sing-box-1.1.7-darwin-amd64.tar.gz
           tar -xvzf ./sing-box.tar.gz -C ./artifacts/sing-box
           mv artifacts/sing-box/**/sing-box controller/resources/sing-box
@@ -110,30 +50,35 @@ jobs:
         if: matrix.os == 'windows-latest'
         shell: pwsh
         run: |
+          mkdir -p artifacts/sing-box
           Invoke-RestMethod -Uri https://github.com/SagerNet/sing-box/releases/download/v1.1.7/sing-box-1.1.7-windows-amd64.zip -OutFile sing-box.zip
           Expand-Archive .\sing-box.zip -DestinationPath .\artifacts\sing-box
           Move-Item -Path .\artifacts\sing-box\**\sing-box.exe -Destination .\controller\resources\sing-box\
 
-      - name: Preparing files
-        if: matrix.os == 'ubuntu-latest' || matrix.os == 'macOS-latest'
-        run: |
-          mv ./artifacts/controller/* ./singland/controller
-          mv ./artifacts/editor/* ./singland/editor
-          mv ./controller/resources ./singland/resources
+      - name: Install dependencies for controller
+        run: npm ci
+        working-directory: ./controller
 
-      - name: Preparing files
-        if: matrix.os == 'windows-latest'
-        run: |
-          Move-Item -Path .\artifacts\controller\* -Destination .\singland\controller
-          Move-Item -Path .\artifacts\editor\* -Destination .\singland\editor
-          Move-Item -Path .\controller\resources -Destination .\singland\resources
+      - name: Install dependencies for editor
+        run: npm ci
+        working-directory: ./editor
 
       - name: Install dependencies for singland
         run: npm ci
         working-directory: ./singland
 
-      - name: Build
-        run: npm run build
+      - name: Build for Unix
+        if: matrix.os == 'ubuntu-latest' || matrix.os == 'macOS-latest'
+        run: |
+          npm run init-unix
+          npm run build
+        working-directory: ./singland
+
+      - name: Build for Windows
+        if: matrix.os == 'windows-latest'
+        run: |
+          npm run init-win
+          npm run build
         working-directory: ./singland
 
       - name: Publish installer for Linux

controller/.gitignore

@@ -39,4 +39,6 @@ Thumbs.db
 
 resources/sing-box/
 
-.wireit
+.wireit
+main.js
+controller.js

controller/controller.ts

@@ -0,0 +1,113 @@
+import { BrowserWindow, BrowserWindowConstructorOptions } from "electron";
+import * as contextMenu from "electron-context-menu";
+import * as fs from "fs";
+import * as os from "os";
+
+export class Controller {
+  private platform = os.platform();
+  private window?: BrowserWindow;
+  private windowConfig: BrowserWindowConstructorOptions = {
+    width: 850,
+    height: 600,
+    minWidth: 850,
+    minHeight: 600,
+    // mac title menu
+    titleBarStyle: "hiddenInset",
+    transparent: this.platform === "darwin" ? true : false,
+    autoHideMenuBar: this.platform === "darwin" ? false : true,
+    frame: true,
+    vibrancy: "sidebar",
+    visualEffectState: "followWindow",
+    webPreferences: {
+      nodeIntegration: true,
+      contextIsolation: false,
+      webSecurity: false,
+      spellcheck: false
+    }
+  };
+
+  constructor() {
+    this.setEnvironment();
+  }
+
+  startup() {
+    if (this.window) {
+      this.window.show();
+      return;
+    }
+
+    this.window = new BrowserWindow(this.windowConfig);
+    if (process.argv.indexOf("--port") > -1) {
+      const portIndex = process.argv.indexOf("--port") + 1;
+      const port = process.argv[portIndex];
+      this.window.webContents.openDevTools({ mode: "bottom" });
+      process.env["ELECTRON_DISABLE_SECURITY_WARNINGS"] = "true";
+      this.window.loadURL(`http://localhost:${port}`);
+    } else {
+      this.window.loadFile("./controller/index.html");
+    }
+    this.setContextMenu();
+  }
+
+  private setEnvironment() {
+    let NODE_CONFIG_DIR = `${process.resourcesPath}/config`;
+
+    // development
+    const exsitOnWorkspace = fs.existsSync("./resources/config");
+    if (exsitOnWorkspace) NODE_CONFIG_DIR = "./resources/config";
+
+    process.env["NODE_CONFIG_DIR"] = NODE_CONFIG_DIR;
+    console.log(`export NODE_CONFIG_DIR=${NODE_CONFIG_DIR}`);
+  }
+
+  private setContextMenu() {
+    const getProfileName = (title: string): string => {
+      return title.substring(0, title.indexOf("\n"));
+    };
+    const contextMenuConfig: contextMenu.Options = {
+      showInspectElement: false,
+      showSelectAll: false,
+      showCopyImage: false,
+      showSaveImageAs: false,
+      showLearnSpelling: false,
+      showLookUpSelection: false,
+      showSearchWithGoogle: false,
+      menu: (actions, params, browserWindow) => [],
+      prepend: (defaultActions, parameters, browserWindow, event) => [
+        {
+          label: "edit",
+          visible: parameters.titleText.endsWith("file") || parameters.titleText.endsWith("connection"),
+          click: () => {
+            let name = getProfileName(parameters.titleText);
+            this.window!.webContents.send("profiles", "edit", name);
+          }
+        },
+        {
+          label: "coder",
+          visible: parameters.titleText.endsWith("local file") || parameters.titleText.endsWith("remote file"),
+          click: () => {
+            let name = getProfileName(parameters.titleText);
+            this.window!.webContents.send("profiles", "coder", name);
+          }
+        },
+        {
+          label: "sync",
+          visible: parameters.titleText.endsWith("remote file"),
+          click: () => {
+            let name = getProfileName(parameters.titleText);
+            this.window!.webContents.send("profiles", "sync", name);
+          }
+        },
+        {
+          label: "delete",
+          visible: parameters.titleText.endsWith("file") || parameters.titleText.endsWith("connection"),
+          click: () => {
+            let name = getProfileName(parameters.titleText);
+            this.window!.webContents.send("profiles", "delete", name);
+          }
+        }
+      ]
+    };
+    contextMenu(contextMenuConfig);
+  }
+}