vti · nottobe · Jun 19, 2023 · Apr 2, 2024 · Apr 2, 2024 · Apr 2, 2024
diff --git a/.env b/.env
@@ -1 +1 @@
-VUE_APP_BACKEND=Electron
+VITE_APP_BACKEND=Electron
diff --git a/.env.mock b/.env.mock
@@ -1 +1 @@
-VUE_APP_BACKEND=Mock
+VITE_APP_BACKEND=Mock
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,21 @@
-node_modules/
-out/
 tmp/
 dist/
 *swp
 .idea/
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+.DS_Store
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Vite
+.vite/
+
+# Electron-Forge
+out/
diff --git a/babel.config.cjs b/babel.config.cjs
@@ -0,0 +1,4 @@
+module.exports = {
+  presets: [['@babel/preset-env', {targets: {node: 'current'}}]],
+};
+
diff --git a/babel.config.js b/babel.config.js
diff --git a/forge.config.cjs b/forge.config.cjs
@@ -0,0 +1,65 @@
+const { FusesPlugin } = require('@electron-forge/plugin-fuses');
+const { FuseV1Options, FuseVersion } = require('@electron/fuses');
+
+module.exports = {
+  packagerConfig: {
+    asar: false,
+    ignore: ['tests/', 'tmp/']
+  },
+  rebuildConfig: {},
+  makers: [
+    {
+      name: '@electron-forge/maker-squirrel',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-zip',
+      platforms: ['linux', 'win32', 'darwin'],
+    },
+    {
+      name: '@electron-forge/maker-deb',
+      config: {},
+    },
+    {
+      name: '@electron-forge/maker-rpm',
+      config: {},
+    },
+  ],
+  plugins: [
+    {
+      name: '@electron-forge/plugin-vite',
+      config: {
+        // `build` can specify multiple entry builds, which can be Main process, Preload scripts, Worker process, etc.
+        // If you are familiar with Vite configuration, it will look really familiar.
+        build: [
+          {
+            // `entry` is just an alias for `build.lib.entry` in the corresponding file of `config`.
+            entry: 'src/electron/main.js',
+            config: 'vite.main.config.js',
+          },
+          {
+            entry: 'src/electron/preload.js',
+            config: 'vite.preload.config.js',
+          },
+        ],
+        renderer: [
+          {
+            name: 'main_window',
+            config: 'vite.renderer.config.js',
+          },
+        ],
+      },
+    },
+    // Fuses are used to enable/disable various Electron functionality
+    // at package time, before code signing the application
+    new FusesPlugin({
+      version: FuseVersion.V1,
+      [FuseV1Options.RunAsNode]: false,
+      [FuseV1Options.EnableCookieEncryption]: true,
+      [FuseV1Options.EnableNodeOptionsEnvironmentVariable]: false,
+      [FuseV1Options.EnableNodeCliInspectArguments]: false,
+      [FuseV1Options.EnableEmbeddedAsarIntegrityValidation]: true,
+      [FuseV1Options.OnlyLoadAppFromAsar]: true,
+    }),
+  ],
+};
diff --git a/forge.env.d.ts b/forge.env.d.ts
@@ -0,0 +1,31 @@
+export {}; // Make this a module
+
+declare global {
+  // This allows TypeScript to pick up the magic constants that's auto-generated by Forge's Vite
+  // plugin that tells the Electron app where to look for the Vite-bundled app code (depending on
+  // whether you're running in development or production).
+  const MAIN_WINDOW_VITE_DEV_SERVER_URL: string;
+  const MAIN_WINDOW_VITE_NAME: string;
+
+  namespace NodeJS {
+    interface Process {
+      // Used for hot reload after preload scripts.
+      viteDevServers: Record<string, import('vite').ViteDevServer>;
+    }
+  }
+
+  type VitePluginConfig = ConstructorParameters<typeof import('@electron-forge/plugin-vite').VitePlugin>[0];
+
+  interface VitePluginRuntimeKeys {
+    VITE_DEV_SERVER_URL: `${string}_VITE_DEV_SERVER_URL`;
+    VITE_NAME: `${string}_VITE_NAME`;
+  }
+}
+
+declare module 'vite' {
+  interface ConfigEnv<K extends keyof VitePluginConfig = keyof VitePluginConfig> {
+    root: string;
+    forgeConfig: VitePluginConfig;
+    forgeConfigSelf: VitePluginConfig[K][number];
+  }
+}
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="./public/favicon.ico">
     <title>Elemntary</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but it doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
-    <!-- built files will be auto injected -->
+    <script type="module" src="/src/ui/main.js"></script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -1,78 +1,59 @@
 {
   "name": "elemntary",
-  "version": "0.5.6",
+  "version": "0.5.7-unstabl-unstablee",
   "description": "Wahoo Missing Configuration GUI App",
-  "main": "src/electron/main.js",
+  "main": ".vite/build/main.js",
+  "type": "module",
   "author": "Viacheslav Tykhanovskyi",
   "license": "GPL-3.0-or-later",
   "scripts": {
-    "start": "vue-cli-service build && cross-env NODE_ENV=development electron-forge start",
+    "start": "cross-env NODE_ENV=development electron-forge start",
     "start-local-server": "cross-env NODE_ENV=development LOCAL_SERVER=http://localhost:8080 electron-forge start",
-    "serve": "yarn run vue-cli-service serve",
-    "serve-mock": "yarn run vue-cli-service serve --mode mock",
-    "package": "vue-cli-service build && electron-forge package",
-    "make": "vue-cli-service build && electron-forge make",
+    "package": "electron-forge package",
+    "make": "electron-forge make",
     "format": "prettier --write '{src,tests}/**/*.{js,jsx,ts,tsx,css,md,json,vue}'",
     "test": "jest"
   },
   "devDependencies": {
-    "@babel/core": "^7.21.4",
-    "@electron-forge/cli": "^6.1.1",
-    "@electron-forge/maker-deb": "^6.1.1",
-    "@electron-forge/maker-rpm": "^6.1.1",
-    "@electron-forge/maker-squirrel": "^6.1.1",
-    "@electron-forge/maker-zip": "^6.1.1",
-    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-service": "~5.0.0",
+    "@babel/core": "^7.24.3",
+    "@babel/preset-env": "^7.24.3",
+    "@electron-forge/cli": "^7.4.0",
+    "@electron-forge/maker-deb": "^7.4.0",
+    "@electron-forge/maker-rpm": "^7.4.0",
+    "@electron-forge/maker-squirrel": "^7.4.0",
+    "@electron-forge/maker-zip": "^7.4.0",
+    "@electron-forge/plugin-auto-unpack-natives": "^7.4.0",
+    "@electron-forge/plugin-fuses": "^7.4.0",
+    "@electron-forge/plugin-vite": "^7.4.0",
+    "@electron/fuses": "^1.8.0",
+    "@vitejs/plugin-vue": "^5.0.4",
     "autoprefixer": "^10.4.14",
+    "babel-jest": "^29.7.0",
     "compare-json": "^0.4.0",
-    "core-js": "^3.30.0",
-    "electron": "^24.0.0",
+    "electron": "^32.0.0",
     "html-to-image": "^1.11.11",
-    "imports-loader": "^4.0.1",
-    "jest": "^29.5.0",
+    "jest": "^29.7.0",
     "mitt": "^3.0.0",
     "postcss": "^8.4.21",
     "prettier": "^2.8.7",
     "tailwindcss": "^3.3.1",
-    "vue": "^3.2.47",
-    "vue-i18n": "^9.2.2",
-    "webpack": "^5.78.0",
-    "webpack-cli": "^5.0.1"
+    "vite": "^5.4.1"
   },
   "dependencies": {
     "cross-env": "^7.0.3",
     "electron-context-menu": "^3.6.1",
-    "electron-squirrel-startup": "^1.0.0",
-    "electron-unhandled": "^4.0.1",
+    "electron-squirrel-startup": "^1.0.1",
+    "electron-unhandled": "^5.0.0",
     "extract-zip": "^2.0.1",
     "log4js": "^6.9.1",
+    "vue": "^3.2.47",
+    "vue-i18n": "^9.10.2",
     "walker": "^1.0.8"
   },
-  "config": {
-    "forge": {
-      "packagerConfig": {
-        "ignore": [
-          "tests/",
-          "tmp/"
-        ]
-      },
-      "makers": [
-        {
-          "name": "@electron-forge/maker-zip",
-          "platforms": [
-            "linux",
-            "win32",
-            "darwin"
-          ]
-        }
-      ]
-    }
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not dead",
     "not ie 11"
   ]
-}
+}
diff --git a/postcss.config.js → postcss.config.cjs b/postcss.config.js → postcss.config.cjs
diff --git a/src/domain/adb-response.js b/src/domain/adb-response.js
@@ -1,4 +1,4 @@
-class AdbResponse {
+export default class AdbResponse {
   parseDevices(data) {
     let devices = data
       .split(/\r?\n/)
@@ -186,5 +186,3 @@ class AdbResponse {
     return [address, port];
   }
 }
-
-module.exports = AdbResponse;
diff --git a/src/domain/adb-wrapper.js b/src/domain/adb-wrapper.js
@@ -1,10 +1,10 @@
-const path = require("path");
-const { spawn } = require("child_process");
-const log4js = require("log4js");
+import path from "path";
+import { spawn } from "child_process";
+import log4js from "log4js";
 
 const log = log4js.getLogger("adb");
 
-class AdbWrapper {
+export default class AdbWrapper {
   constructor(options) {
     const mode = process.env.NODE_ENV || "production";
 
@@ -63,5 +63,3 @@ class AdbWrapper {
     });
   }
 }
-
-module.exports = AdbWrapper;
diff --git a/src/domain/device-service.js b/src/domain/device-service.js
@@ -1,18 +1,16 @@
-const process = require("process");
-const fs = require("fs");
-const path = require("path");
+import process from "process";
+import path from "path";
 
-const Walker = require("walker");
-const extract = require("extract-zip");
+import Walker from "walker";
 
-const AdbWrapper = require("./adb-wrapper.js");
-const AdbResponse = require("./adb-response.js");
-const Feature = require("./feature.js");
-const Features = require("./features.js");
+import AdbWrapper from "./adb-wrapper.js";
+import AdbResponse from "./adb-response.js";
+import Feature from "./feature.js";
+import Features from "./features.js";
 
 const BACKUP_FILE = "elemnt_config.zip";
 
-class DeviceService {
+export default class DeviceService {
   constructor(options) {
     this.adb = options.adbWrapper || new AdbWrapper();
   }
@@ -500,5 +498,3 @@ class DeviceService {
       });
   }
 }
-
-module.exports = DeviceService;
diff --git a/src/domain/feature.js b/src/domain/feature.js
@@ -1,4 +1,4 @@
-class Feature {
+export default class Feature {
   constructor(id, name, enabled) {
     this.id = id;
     this.name = name;
@@ -17,5 +17,3 @@ class Feature {
     return this.enabled;
   }
 }
-
-module.exports = Feature;
diff --git a/src/domain/features.js b/src/domain/features.js
@@ -3,4 +3,4 @@ const Features = {
   MAP_PAN_ZOOM: "cfg_MapPanZoom",
 };
 
-module.exports = Features;
+export default Features;
diff --git a/src/electron/i18n.js b/src/electron/i18n.js
@@ -1,4 +1,4 @@
-function translate(messages, locale, messageId) {
+export function translate(messages, locale, messageId) {
   if (!messages[locale]) {
     locale = locale.split("-")[0];
 
@@ -29,5 +29,3 @@ function locate(root, messageId) {
 
   return undefined;
 }
-
-module.exports = { translate };