standalone vue-devtools

package.json

@@ -8,6 +8,7 @@
   "scripts": {
     "debug": "npm run rebuild:electron && npm run debug-runner",
     "debug-runner": "node scripts/devRunner.js --remote-debug",
+    "devtools": "npx vue-devtools",
     "compile": "npm run compile:main && npm run compile:workers && npm run compile:renderer",
     "compile:main": "webpack --mode=production --config webpack.main.config.js",
     "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
@@ -125,6 +126,7 @@
     "pg": "^8.7.1",
     "pg-query-stream": "^4.2.3",
     "pgsql-ast-parser": "^7.2.1",
+    "pinia": "^2.0.13",
     "source-map-support": "^0.5.20",
     "spectre.css": "^0.5.9",
     "sql-formatter": "^4.0.2",
@@ -146,6 +148,7 @@
     "@typescript-eslint/eslint-plugin": "^5.18.0",
     "@typescript-eslint/parser": "^5.18.0",
     "@vue/compiler-sfc": "^3.2.33",
+    "@vue/devtools": "^6.1.4",
     "all-contributors-cli": "^6.20.0",
     "babel-loader": "^8.2.3",
     "chalk": "^4.1.2",
@@ -153,7 +156,6 @@
     "css-loader": "^6.5.0",
     "electron": "^17.0.1",
     "electron-builder": "^22.14.11",
-    "electron-devtools-installer": "^3.2.0",
     "eslint": "^7.32.0",
     "eslint-config-standard": "^16.0.3",
     "eslint-plugin-import": "^2.24.2",

src/main/main.ts

@@ -47,22 +47,8 @@ async function createMainWindow () {
    remoteMain.enable(window.webContents);
 
    try {
-      if (isDevelopment) {
-         const { default: installExtension, VUEJS3_DEVTOOLS } = require('electron-devtools-installer');
-         const options = {
-            loadExtensionOptions: { allowFileAccess: true }
-         };
-
-         try {
-            const name = await installExtension(VUEJS3_DEVTOOLS, options);
-            console.log(`Added Extension: ${name}`);
-         }
-         catch (err) {
-            console.log('An error occurred: ', err);
-         }
-
+      if (isDevelopment)
          await window.loadURL('http://localhost:9080');
-      }
       else {
          const indexPath = path.resolve(__dirname, 'index.html');
          await window.loadFile(indexPath);

src/renderer/index.js

@@ -1,5 +1,6 @@
 'use strict';
 
+import devtools from '@vue/devtools';
 import { createApp, configureCompat } from 'vue';
 import '@mdi/font/css/materialdesignicons.css';
 import 'leaflet/dist/leaflet.css';
@@ -7,6 +8,7 @@ import '@/scss/main.scss';
 
 import App from '@/App.vue';
 import { store } from '@/store';
+import { pinia } from '@/stores';
 import i18n from '@/i18n';
 
 // @TODO: remove after migrating from vue2 -> vue3
@@ -16,7 +18,11 @@ configureCompat({
 
 i18n.global.locale = store.state.settings.locale;
 
-const app = createApp(App);
-app.use(store);
-app.use(i18n);
-app.mount('#app');
+createApp(App)
+   .use(store)
+   .use(pinia)
+   .use(i18n)
+   .mount('#app');
+
+if (process.env.NODE_ENV === 'development')
+   devtools.connect();

src/renderer/stores/index.js

@@ -0,0 +1,11 @@
+// @ts-check
+import { createPinia } from 'pinia';
+import { ipcUpdates } from './plugins/ipcUpdates';
+import { ipcShortcuts } from './plugins/ipcShortcuts';
+
+const pinia = createPinia();
+pinia
+   .use(ipcUpdates)
+   .use(ipcShortcuts);
+
+export { pinia };

src/renderer/stores/plugins/ipcShortcuts.js

@@ -0,0 +1,12 @@
+import { ipcRenderer } from 'electron';
+
+export function ipcShortcuts ({ store }) {
+   ipcRenderer.on('toggle-preferences', () => {
+      store.application.showSettingModal('general');
+   });
+
+   ipcRenderer.on('open-updates-preferences', () => {
+      store.application.showSettingModal('update');
+      ipcRenderer.send('check-for-updates');
+   });
+}

src/renderer/stores/plugins/ipcUpdates.js

@@ -0,0 +1,36 @@
+import { ipcRenderer } from 'electron';
+
+export function ipcUpdates ({ store }) {
+   ipcRenderer.on('checking-for-update', () => {
+      store.application.updateStatus = 'checking';
+   });
+
+   ipcRenderer.on('update-available', () => {
+      store.application.updateStatus = 'available';
+   });
+
+   ipcRenderer.on('update-not-available', () => {
+      store.application.updateStatus = 'noupdate';
+   });
+
+   ipcRenderer.on('check-failed', () => {
+      store.application.updateStatus = 'nocheck';
+   });
+
+   ipcRenderer.on('no-auto-update', () => {
+      store.application.updateStatus = 'disabled';
+   });
+
+   ipcRenderer.on('download-progress', (event, data) => {
+      store.application.updateStatus = 'downloading';
+      store.application.downloadprogress = data.percent;
+   });
+
+   ipcRenderer.on('update-downloaded', () => {
+      store.application.updateStatus = 'downloaded';
+   });
+
+   ipcRenderer.on('link-to-download', () => {
+      store.application.updateStatus = 'link';
+   });
+}