standalone vue-devtools

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';
+   });
+}