Call ipcRenderer.on from renderer

[NeekoGta]

Hi,

From main process I send event like ipcRenderer.send('myEvent')

What is the best approach to call ipcRenderer.on('myEvent') from renderer (Vue.js) ?

Thanks =) !

[cawa-93]

It depends on what kind of event it is, how you want to use it, what level of isolation you need, etc. In some cases, I simply proxy the electron event to the native DOM event and listen to the DOM event where needed.
https://github.com/cawa-93/anime-library/blob/8d9042183fde3628f356ab5d149eb457dcdf8182/packages/preload/src/windowControls.ts#L5-L10

[NeekoGta]

Hi,

I'm just trying to communicate between the different processes.

I'm making "download" (files) process.
From Vue component, I'm just calling method in store (Pinia).

This store method call ipcRenderer.invoke('event:download') on main package.

From main package I send back ipcRenderer.send('event:download:progress', bytes) with progress on download and I want to show the progress in my Vue component.

But in preload package, when I use exposeInMainWorld to can call on() in my Vue component, I got this error :

Cannot read properties of undefined (reading 'exposeInMainWorld')

Just want to know the best and secure approach to handle event from Vue component.

[NeekoGta]

Maybe my approach is completely wrong. If so, what is the best method?

[NeekoGta]

I'm just making this test in packages/preload/src/test.ts with this content :

import { contextBridge, ipcRenderer } from 'electron';

contextBridge.exposeInMainWorld('electron', {
	setTitle: (title: string) => ipcRenderer.send('set-title', title)
});

Editing packages/preload/src/index.ts with :

/**
 * @module preload
 */
export { sha256sum } from './nodeCrypto';
export { versions } from './versions';
import './test';

After yarn run watch I got this error :

Cannot read properties of undefined (reading 'exposeInMainWorld')

[cawa-93]

1. Just tested and don't have issue
   
2. In this template you don't need manually expose any api.

   this template uses the unplugin-auto-expose plugin, so you just need to export the method from the preload. The exposeInMainWorld will be called automatically.