From fd80a831e13e9d39204c982d42babdef0e9b512a Mon Sep 17 00:00:00 2001 From: lnrdnl Date: Tue, 20 Feb 2024 15:24:01 +0100 Subject: [PATCH 1/4] remove sendSync --- docs/src/electron-how-to/preload-script.md | 1 - src/preload/index.ts | 7 ------- src/renderer/screens/MainScreen.vue | 2 +- 3 files changed, 1 insertion(+), 9 deletions(-) diff --git a/docs/src/electron-how-to/preload-script.md b/docs/src/electron-how-to/preload-script.md index fa48b59..edb1c39 100644 --- a/docs/src/electron-how-to/preload-script.md +++ b/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 diff --git a/src/preload/index.ts b/src/preload/index.ts index a2be50d..ffd8905 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -12,13 +12,6 @@ contextBridge.exposeInMainWorld('mainApi', { 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) diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue index 110b907..52e99fe 100644 --- a/src/renderer/screens/MainScreen.vue +++ b/src/renderer/screens/MainScreen.vue @@ -21,7 +21,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 => { From 1b015078a68d01e48a801d6f052262723921a9ec Mon Sep 17 00:00:00 2001 From: lnrdnl Date: Tue, 20 Feb 2024 15:32:17 +0100 Subject: [PATCH 2/4] handle invoke in IPC --- src/main/IPCs.ts | 4 ++-- src/renderer/screens/MainScreen.vue | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/main/IPCs.ts b/src/main/IPCs.ts index 7fc7468..0ec519c 100644 --- a/src/main/IPCs.ts +++ b/src/main/IPCs.ts @@ -7,8 +7,8 @@ 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 diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue index 52e99fe..1ec53b0 100644 --- a/src/renderer/screens/MainScreen.vue +++ b/src/renderer/screens/MainScreen.vue @@ -21,7 +21,7 @@ onMounted((): void => { }) const getApplicationVersionFromMainProcess = (): void => { - window.mainApi.invoke('msgRequestGetVersion').then((result: string) => appVersion.value = result) + window.mainApi.invoke('msgRequestGetVersion').then((result: string) => { appVersion.value = result }) } const handleChangeTheme = (): void => { From 5ab988dab1e07128887e5bf135e2edac4d8ef547 Mon Sep 17 00:00:00 2001 From: lnrdnl Date: Tue, 20 Feb 2024 15:38:20 +0100 Subject: [PATCH 3/4] log communication in dev --- src/preload/index.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/preload/index.ts b/src/preload/index.ts index ffd8905..333caa9 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -8,6 +8,9 @@ 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}`) } @@ -36,6 +39,9 @@ contextBridge.exposeInMainWorld('mainApi', { invoke: async (channel: string, ...data: any[]): Promise => { 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 } From f310d94d9fed838673d06dbf3f16714cb29f35a5 Mon Sep 17 00:00:00 2001 From: lnrdnl Date: Tue, 20 Feb 2024 16:04:39 +0100 Subject: [PATCH 4/4] Added openFile example --- src/main/IPCs.ts | 18 +++++++++++++++- src/preload/index.ts | 2 +- src/renderer/locales/en.json | 6 ++++-- src/renderer/locales/nl.json | 6 ++++-- src/renderer/screens/MainScreen.vue | 33 +++++++++++++++++++++++------ src/renderer/utils/index.ts | 6 +++++- 6 files changed, 58 insertions(+), 13 deletions(-) diff --git a/src/main/IPCs.ts b/src/main/IPCs.ts index 0ec519c..7792378 100644 --- a/src/main/IPCs.ts +++ b/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' /* @@ -15,5 +15,21 @@ export default class IPCs { 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 + }) } } diff --git a/src/preload/index.ts b/src/preload/index.ts index 333caa9..218ae9a 100644 --- a/src/preload/index.ts +++ b/src/preload/index.ts @@ -1,7 +1,7 @@ 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', { diff --git a/src/renderer/locales/en.json b/src/renderer/locales/en.json index 50ce555..c57a3ff 100644 --- a/src/renderer/locales/en.json +++ b/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" } } diff --git a/src/renderer/locales/nl.json b/src/renderer/locales/nl.json index 4bb360b..9cc7065 100644 --- a/src/renderer/locales/nl.json +++ b/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" } } diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue index 1ec53b0..16403d7 100644 --- a/src/renderer/screens/MainScreen.vue +++ b/src/renderer/screens/MainScreen.vue @@ -1,7 +1,7 @@