Merge pull request #181 from lnrdnl/master

Remove SendSync (see Electron docs)

docs/src/electron-how-to/preload-script.md

@@ -16,7 +16,6 @@ When sending events from renderer to main, you access the `window.mainApi` objec
 Here are the supported functions for mainApi:
 
 - `send`: Send an event to main.
-- `sendSync`: Send an event to main. It can be used when receiving a return value. The UI may be frozen until the operation is complete.
 - `on`: A listener to receive events sent by main.
 - `once`: A listener to receive events sent by main. (Handle only one call)
 - `off`: Remove an event listener

src/main/IPCs.ts

@@ -1,4 +1,4 @@
-import { ipcMain, shell, IpcMainEvent } from 'electron'
+import { ipcMain, shell, IpcMainEvent, dialog } from 'electron'
 import Constants from './utils/Constants'
 
 /*
@@ -7,13 +7,29 @@ import Constants from './utils/Constants'
 export default class IPCs {
   static initialize(): void {
     // Get application version
-    ipcMain.on('msgRequestGetVersion', (event: IpcMainEvent) => {
-      event.returnValue = Constants.APP_VERSION
+    ipcMain.handle('msgRequestGetVersion', () => {
+      return Constants.APP_VERSION
     })
 
     // Open url via web browser
     ipcMain.on('msgOpenExternalLink', async (event: IpcMainEvent, url: string) => {
       await shell.openExternal(url)
     })
+
+    // Open file
+    ipcMain.handle('msgOpenFile', async (event, filter: string) => {
+      const filters = []
+      if (filter === 'text') {
+        filters.push({ name: 'Text', extensions: ['txt', 'json'] })
+      }
+      if (filter === 'zip') {
+        filters.push({ name: 'Zip', extensions: ['zip'] })
+      }
+      const dialogResult = await dialog.showOpenDialog({
+        properties: ['openFile'],
+        filters
+      })
+      return dialogResult
+    })
   }
 }

src/preload/index.ts

@@ -1,24 +1,20 @@
 import { contextBridge, ipcRenderer, IpcRendererEvent } from 'electron'
 
 // Whitelist of valid channels used for IPC communication (Send message from Renderer to Main)
-const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink']
+const mainAvailChannels: string[] = ['msgRequestGetVersion', 'msgOpenExternalLink', 'msgOpenFile']
 const rendererAvailChannels: string[] = []
 
 contextBridge.exposeInMainWorld('mainApi', {
   send: (channel: string, ...data: any[]): void => {
     if (mainAvailChannels.includes(channel)) {
       ipcRenderer.send.apply(null, [channel, ...data])
+      if (process.env.NODE_ENV === 'development') {
+        console.log({ type: 'send', channel, request: data })
+      }
     } else {
       throw new Error(`Unknown ipc channel name: ${channel}`)
     }
   },
-  sendSync: (channel: string, ...data: any[]): any => {
-    if (mainAvailChannels.includes(channel)) {
-      return ipcRenderer.sendSync.apply(null, [channel, ...data])
-    }
-
-    throw new Error(`Unknown ipc channel name: ${channel}`)
-  },
   on: (channel: string, listener: (event: IpcRendererEvent, ...args: any[]) => void): void => {
     if (rendererAvailChannels.includes(channel)) {
       ipcRenderer.on(channel, listener)
@@ -43,6 +39,9 @@ contextBridge.exposeInMainWorld('mainApi', {
   invoke: async (channel: string, ...data: any[]): Promise<any> => {
     if (mainAvailChannels.includes(channel)) {
       const result = await ipcRenderer.invoke.apply(null, [channel, ...data])
+      if (process.env.NODE_ENV === 'development') {
+        console.log({ type: 'invoke', channel, request: data, result })
+      }
       return result
     }
 

src/renderer/locales/en.json

@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hello Vutron! Everything is ready.",
     "welcome-desc": "You can now write cross-platform web applications. See changes in real time and build to multiple platforms with one command. If you're not already familiar with it, you can get help from the documentation page below, or run some pre-written example code.",
-    "second-desc": "You have moved to the second screen! There is nothing here!"
+    "second-desc": "You have moved to the second screen! There is nothing here!",
+    "selected-file": "Selected file: {filePath}."
   },
   "title": {
     "main": "Main Screen",
@@ -14,6 +15,7 @@
     "change-language": "Change Language",
     "increase-count": "Count 1 increment",
     "documentation": "Documentation",
-    "github": "Source Code"
+    "github": "Source Code",
+    "open-file": "Open a text file"
   }
 }

src/renderer/locales/nl.json

@@ -2,7 +2,8 @@
   "desc": {
     "welcome-title": "Hallo Vutron! Alles is klaar.",
     "welcome-desc": "U kunt nu platformonafhankelijke webapplicaties schrijven. Bekijk wijzigingen in realtime en bouw met één opdracht naar meerdere platforms. Als u hiermee nog niet bekend bent, kunt u hulp krijgen via de onderstaande documentatiepagina, of een vooraf geschreven voorbeeldcode uitvoeren.",
-    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!"
+    "second-desc": "U bent naar het tweede scherm gegaan! Hier is niks!",
+    "selected-file": "Geselecteerde bestand: {filePath}."
   },
   "title": {
     "main": "Hoofdscherm",
@@ -14,6 +15,7 @@
     "change-language": "Taal wijzigen",
     "increase-count": "Één stap optellen",
     "documentation": "Documentatie",
-    "github": "Broncode"
+    "github": "Broncode",
+    "open-file": "Open een bestand"
   }
 }

src/renderer/screens/MainScreen.vue

@@ -1,7 +1,7 @@
 <script setup lang="tsx">
 import { useI18n } from 'vue-i18n'
 import { useTheme } from 'vuetify'
-import { openExternal } from '@/renderer/utils'
+import { openExternal, openFile } from '@/renderer/utils'
 import { useCounterStore } from '@/renderer/store/counter'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
@@ -12,6 +12,7 @@ const { counter } = storeToRefs(useCounterStore())
 const theme = useTheme()
 const languages = ref(['en'])
 const appVersion = ref('Unknown')
+const selectedFile = ref('')
 
 onMounted((): void => {
   languages.value = availableLocales
@@ -21,7 +22,7 @@ onMounted((): void => {
 })
 
 const getApplicationVersionFromMainProcess = (): void => {
-  appVersion.value = window.mainApi.sendSync('msgRequestGetVersion')
+  window.mainApi.invoke('msgRequestGetVersion').then((result: string) => { appVersion.value = result })
 }
 
 const handleChangeTheme = (): void => {
@@ -43,6 +44,13 @@ const handleOpenGitHub = async (): Promise<void> => {
 const handleCountIncrease = (): void => {
   counterIncrease(1)
 }
+
+const handleOpenFile = async () => {
+  const dialogResult = await openFile('text')
+  if (!dialogResult.canceled) {
+    selectedFile.value = dialogResult.filePaths[0]
+  }
+}
 </script>
 
 <template>
@@ -63,8 +71,13 @@ const handleCountIncrease = (): void => {
         <p class="my-4">
           App Version: <strong>{{ appVersion }}</strong>
         </p>
+          <p v-if="selectedFile !== ''">{{
+                  $t('desc.selected-file', {
+                    filePath: selectedFile
+                  })
+                }}</p>
         <v-row class="my-4">
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleChangeTheme">
               <v-icon icon="mdi-brightness-6" />
               <v-tooltip activator="parent" location="bottom">
@@ -72,7 +85,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-badge data-testid="counter-badge" color="blue" :content="counter">
               <v-btn data-testid="btn-counter" icon color="primary" @click="handleCountIncrease">
                 <v-icon icon="mdi-plus-circle" />
@@ -82,7 +95,7 @@ const handleCountIncrease = (): void => {
               </v-btn>
             </v-badge>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenDocument">
               <v-icon icon="mdi-file-document" />
               <v-tooltip activator="parent" location="bottom">
@@ -90,7 +103,7 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
-          <v-col cols="3">
+          <v-col>
             <v-btn icon color="primary" @click="handleOpenGitHub">
               <v-icon icon="mdi-github" />
               <v-tooltip activator="parent" location="bottom">
@@ -98,9 +111,17 @@ const handleCountIncrease = (): void => {
               </v-tooltip>
             </v-btn>
           </v-col>
+          <v-col>
+            <v-btn icon color="primary" @click="handleOpenFile">
+              <v-icon icon="mdi-folder-open" />
+              <v-tooltip activator="parent" location="bottom">
+                {{ $t('menu.open-file') }}
+              </v-tooltip>
+            </v-btn>
+          </v-col>
           <v-col cols="12">
             <v-select
-              data-testid="select-language"
+data-testid="select-language"
               :model-value="locale"
               density="compact"
               :label="$t('menu.change-language')"

src/renderer/utils/index.ts

@@ -6,6 +6,10 @@ export default class Utils {
   static async openExternal(url: string): Promise<void> {
     await window.mainApi.send('msgOpenExternalLink', url)
   }
+
+  static async openFile(type: string): Promise<any> {
+    return window.mainApi.invoke('msgOpenFile', type)
+  }
 }
 
-export const { getCurrentLocale, openExternal } = Utils
+export const { getCurrentLocale, openExternal, openFile } = Utils