added prod devtools support, optimizations

interfaces/I_faDevToolsControl.ts

@@ -0,0 +1,25 @@
+export interface I_faDevToolsControl {
+
+  /**
+   * Check the current state of the DevTools in the opened FA instance
+   */
+  checkDecToolsStatus: () => boolean
+
+  /**
+   * Toggles the dev tools
+   * - If they are opened, close them
+   * - If they are closed, open them
+   */
+  toggleDevTools: () => void
+
+  /**
+   * Opens the dev tools
+   */
+  openDevTools: () => void
+
+  /**
+   * Closes the dev tools
+   */
+  closeDevTools: () => void
+
+}

package.json

@@ -8,7 +8,7 @@
   "scripts": {
     "lint": "eslint --ext .js,.ts,.vue ./",
     "dev:electron": "quasar dev -m electron",
-    "build": "quasar build -m electron --publish never",
+    "build": "quasar build -m electron --publish never --debug",
     "test:unit:ui": "vitest --ui",
     "test:unit:ci": "vitest run --reporter verbose",
     "test:component": "node \"node_modules/@playwright/test/cli.js\" test src/components/",
@@ -17,6 +17,7 @@
   "dependencies": {
     "@electron/remote": "^2.0.10",
     "@quasar/extras": "^1.16.4",
+    "app-root-path": "^3.1.0",
     "axios": "^1.2.1",
     "pinia": "^2.0.11",
     "quasar": "^2.6.0",
@@ -35,7 +36,6 @@
     "@typescript-eslint/parser": "^5.10.0",
     "@vitest/ui": "^0.15.0",
     "@vue/test-utils": "^2.0.0",
-    "app-root-path": "^3.1.0",
     "autoprefixer": "^10.4.2",
     "electron": "^25.5.0",
     "electron-builder": "^24.3.0",

postcss.config.cjs

@@ -3,25 +3,11 @@
 
 module.exports = {
   plugins: [
-    // https://github.com/postcss/autoprefixer
-    require('autoprefixer')({
-      overrideBrowserslist: [
-        'last 4 Chrome versions',
-        'last 4 Firefox versions',
-        'last 4 Edge versions',
-        'last 4 Safari versions',
-        'last 4 Android versions',
-        'last 4 ChromeAndroid versions',
-        'last 4 FirefoxAndroid versions',
-        'last 4 iOS versions'
-      ]
-    })
-
     // https://github.com/elchininet/postcss-rtlcss
     // If you want to support RTL css, then
     // 1. yarn/npm install postcss-rtlcss
     // 2. optionally set quasar.config.js > framework > lang to an RTL language
     // 3. uncomment the following line:
     // require('postcss-rtlcss')
-  ]
-}
+  ],
+};

src-electron/customContentBridgeAPIs/extraEnvVariablesAPI.ts

@@ -1,4 +1,4 @@
-import { I_extraEnvVariablesAPI } from 'src/interfaces/I_extraEnvVariablesAPI'
+import { I_extraEnvVariablesAPI } from 'app/interfaces/I_extraEnvVariablesAPI'
 import appRoot from 'app-root-path'
 
 export const extraEnvVariablesAPI: I_extraEnvVariablesAPI = {

src-electron/customContentBridgeAPIs/faDevToolsControlAPI.ts

@@ -0,0 +1,42 @@
+import { BrowserWindow } from '@electron/remote'
+import { I_faDevToolsControl } from 'app/interfaces/I_faDevToolsControl'
+
+export const faDevToolsControlAPI: I_faDevToolsControl = {
+
+  checkDecToolsStatus () {
+    const currentWindow = BrowserWindow.getFocusedWindow()
+    if (currentWindow !== null) {
+      return currentWindow.webContents.isDevToolsOpened()
+    }
+    return false
+  },
+
+  toggleDevTools () {
+    const currentWindow = BrowserWindow.getFocusedWindow()
+
+    if (currentWindow !== null) {
+      const devToolsOpened = currentWindow.webContents.isDevToolsOpened()
+      if (devToolsOpened) {
+        currentWindow.webContents.closeDevTools()
+      } else {
+        currentWindow.webContents.openDevTools()
+      }
+    }
+  },
+
+  openDevTools () {
+    const currentWindow = BrowserWindow.getFocusedWindow()
+
+    if (currentWindow !== null) {
+      currentWindow.webContents.openDevTools()
+    }
+  },
+
+  closeDevTools () {
+    const currentWindow = BrowserWindow.getFocusedWindow()
+
+    if (currentWindow !== null) {
+      currentWindow.webContents.closeDevTools()
+    }
+  }
+}

src-electron/customContentBridgeAPIs/faWindowControlAPI.ts

@@ -1,5 +1,5 @@
 import { BrowserWindow } from '@electron/remote'
-import { I_faWindowControlAPI } from 'src/interfaces/I_faWindowControlAPI'
+import { I_faWindowControlAPI } from 'app/interfaces/I_faWindowControlAPI'
 
 export const faWindowControlAPI: I_faWindowControlAPI = {
 

src-electron/electron-main.ts

@@ -1,4 +1,4 @@
-import { app, BrowserWindow, nativeTheme } from 'electron'
+import { app, BrowserWindow, Menu, nativeTheme } from 'electron'
 import { initialize, enable } from '@electron/remote/main'
 import path from 'path'
 import os from 'os'
@@ -51,6 +51,9 @@ function createWindow () {
   })
 }
 
+// Performance improvement tweak
+Menu.setApplicationMenu(null)
+
 app.whenReady().then(createWindow)
 
 app.on('window-all-closed', () => {

src-electron/electron-preload.ts

@@ -32,6 +32,8 @@ import { contextBridge } from 'electron'
 
 import { faWindowControlAPI } from 'src-electron/customContentBridgeAPIs/faWindowControlAPI'
 import { extraEnvVariablesAPI } from 'src-electron/customContentBridgeAPIs/extraEnvVariablesAPI'
+import { faDevToolsControlAPI } from 'src-electron/customContentBridgeAPIs/faDevToolsControlAPI'
 
 contextBridge.exposeInMainWorld('faWindowControlAPI', faWindowControlAPI)
+contextBridge.exposeInMainWorld('faDevToolsControlAPI', faDevToolsControlAPI)
 contextBridge.exposeInMainWorld('extraEnvVariables', extraEnvVariablesAPI)

src/globals.d.ts

@@ -1,11 +1,13 @@
-import { I_faWindowControlAPI } from './interfaces/I_faWindowControlAPI'
-import { I_extraEnvVariablesAPI } from './interfaces/I_extraEnvVariablesAPI'
+import { I_extraEnvVariablesAPI } from 'app/interfaces/I_extraEnvVariablesAPI'
+import { I_faWindowControlAPI } from 'app/interfaces/I_faWindowControlAPI'
+import { I_faDevToolsControl } from 'app/interfaces/I_faDevToolsControl'
 
 export {}
 
 declare global{
     interface Window {
           faWindowControlAPI: I_faWindowControlAPI,
+          faDevToolsControlAPI: I_faDevToolsControl,
           extraEnvVariables: I_extraEnvVariablesAPI
     }
 }

src/pages/IndexPage.vue

@@ -1,6 +1,18 @@
 <template>
   <q-page class="row">
     <FantasiaMascotImage width="400px" />
+    <div>
+      <q-btn
+        class="q-mt-xl"
+        color="primary"
+        outline
+        size="xl"
+        @click="toggle()"
+      >
+        Toggle
+      </q-btn>
+    </div>
+
     <div>
       <div
         v-for="n in 1000"
@@ -15,4 +27,8 @@
 <script lang="ts" setup>
 import FantasiaMascotImage from 'src/components/FantasiaMascotImage/FantasiaMascotImage.vue'
 
+const toggle = () => {
+  window.faDevToolsControlAPI.toggleDevTools()
+}
+
 </script>