diff --git a/docs/project-structure.md b/docs/project-structure.md index 86d0ee3..8f33546 100644 --- a/docs/project-structure.md +++ b/docs/project-structure.md @@ -22,6 +22,7 @@ │ │ │ └─ Constants.ts - Main global definition │ │ │ └─ Menus.ts - Main global menu definition │ │ └─ index.ts - Main process entry point +│ │ └─ IPCs.ts - Main process ipc handlers definition │ │ └─ MainRunner.ts - Main process main window processing │ ├─ preload/ - Preload (Electron-Vue communication bridge) process source code │ │ └─ index.ts diff --git a/src/main/IPCs.ts b/src/main/IPCs.ts new file mode 100644 index 0000000..3033a6d --- /dev/null +++ b/src/main/IPCs.ts @@ -0,0 +1,14 @@ +import { BrowserWindow, ipcMain } from 'electron' +import Constants from './utils/Constants' + +/* + * IPC Communications + * */ +export default class IPCs { + static initialize(window: BrowserWindow) { + // Get application version + ipcMain.on('msgRequestGetVersion', () => { + window.webContents.send('msgReceivedVersion', Constants.APP_VERSION) + }) + } +} diff --git a/src/main/MainRunner.ts b/src/main/MainRunner.ts index cc480e1..f20ea18 100644 --- a/src/main/MainRunner.ts +++ b/src/main/MainRunner.ts @@ -1,6 +1,7 @@ import { app, BrowserWindow, RenderProcessGoneDetails } from 'electron' import Constants from './utils/Constants' import * as electronRemote from '@electron/remote/main' +import IPCs from './IPCs' const exitApp = (mainWindow: BrowserWindow): void => { if (mainWindow && !mainWindow.isDestroyed()) { @@ -48,6 +49,9 @@ export const createMainWindow = async (mainWindow: BrowserWindow): Promise { - console.log('[Preload] Script loaded.') -} +import { contextBridge, ipcRenderer, shell } from 'electron' -main() +// Whitelist of valid channels used for IPC communication (Send message from Renderer to Main) +const mainAvailChannels = ['msgRequestGetVersion'] +const rendererAvailChannels = ['msgReceivedVersion'] + +contextBridge.exposeInMainWorld('mainApi', { + openExternal: async (url) => await shell.openExternal(url), + send: (channel, data) => { + if (mainAvailChannels.includes(channel)) { + ipcRenderer.send(channel, data) + } + }, + receive: (channel, cbFunc) => { + if (rendererAvailChannels.includes(channel)) { + ipcRenderer.on(channel, (event, ...args) => cbFunc(...args)) + } + } +}) diff --git a/src/renderer/main.ts b/src/renderer/main.ts index dd4dd63..3196c34 100644 --- a/src/renderer/main.ts +++ b/src/renderer/main.ts @@ -6,6 +6,14 @@ import router from '@/renderer/router' import vuetify from '@/renderer/plugins/vuetify' import i18n from '@/renderer/plugins/i18n' +// Add API key defined in contextBridge to window object type +declare global { + // eslint-disable-next-line no-unused-vars + interface Window { + mainApi?: any + } +} + const app = createApp(App) app.use(vuetify).use(i18n).use(router).use(createPinia()) diff --git a/src/renderer/screens/MainScreen.vue b/src/renderer/screens/MainScreen.vue index a4802a0..f251871 100644 --- a/src/renderer/screens/MainScreen.vue +++ b/src/renderer/screens/MainScreen.vue @@ -11,9 +11,16 @@ const { counterIncrease } = useTempStore() const { counter } = storeToRefs(useTempStore()) const theme = useTheme() const languages = ref(['en']) +const appVersion = ref('Unknown') onMounted((): void => { languages.value = availableLocales + + // Get application version from package.json version string (Using IPC communication) + window.mainApi.receive('msgReceivedVersion', (version: string) => { + appVersion.value = version + }) + window.mainApi.send('msgRequestGetVersion') }) const handleChangeTheme = (): void => { @@ -51,6 +58,9 @@ const handleCountIncrease = (): void => {

{{ $t('desc.welcome-title') }}

{{ $t('desc.welcome-desc') }}

+

App Version: {{ appVersion }}

diff --git a/src/renderer/utils/index.ts b/src/renderer/utils/index.ts index 2789d80..add6596 100644 --- a/src/renderer/utils/index.ts +++ b/src/renderer/utils/index.ts @@ -1,12 +1,10 @@ -import { shell } from 'electron' - export default class Utils { static getCurrentLocale(): string { return navigator?.language?.split('-')[0] || 'en' } static async openExternal(url: string): Promise { - await shell.openExternal(url) + await window.mainApi.openExternal(url) } } diff --git a/vite.config.ts b/vite.config.ts index ac809a5..b5f0c74 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -68,7 +68,6 @@ export default defineConfig({ } ]), rendererPlugin({ - nodeIntegration: true, optimizeDeps: { include: ['path'] }