Electron IPC is good, but difficult to maintain and scale, either because of the numerous channels you have to remember, or because of the inconsistent API between processes and the absence of inferred types of your channels and handlers. These are some of the things that interprocess comes to solve!
- 🚀 Best-in-class DX with a fully-typed API
- 🧠 Enchanced and consistent API
- 🔥 Type-safe and scalable
- 🪄 Code splitting support
- 🕸️ All edges connected (APIs to handle all processes)
- 💖
invokeandhandlemethods in both processes with the same expected behavior
- Node.js >= 14.0.0
- Electron >= 12.0.0
- TypeScript >= 4.8.0
In your terminal, run:
- npm
npm i interprocess
- pnpm
pnpm i interprocess
- yarn
yarn add interprocess
Let's build something simple that can show you some of the interprocess's power!
First, create the following folders atsrc:
shared/ipcs(this folder structure is optional)
Then, create a file named asindex.tsin theipcsfolder with the following content:
import{createInterprocess}from'interprocess'
exportconst{ipcMain,ipcRenderer,exposeApiToGlobalWindow}=
createInterprocess({
main:{
asyncgetPing(_,data:'ping'){
constmessage=`from renderer:${data}on main process`
console.log(message)
returnmessage
},
},
renderer:{
asyncgetPong(_,data:'pong'){
constmessage=`from main:${data}on renderer process`
console.log(message)
returnmessage
},
},
})On themain process:
⚠️ Don't forget to addsandbox: falseto the BrowserWindow because it's required to load the preload script properly!
import{BrowserWindow,app}from'electron'
import{ipcMain}from'shared/ipcs'
const{handle,invoke}=ipcMain
app.whenReady().then(()=>{
constmainWindow=newBrowserWindow({
webPreferences:{
preload:path.join(__dirname,'../preload/index.js'),
sandbox:false,// sandbox must be false
},
})
handle.getPing()
mainWindow.webContents.on('dom-ready',()=>{
invoke.getPong(mainWindow,'pong')
})
})In thepreload script:
import{exposeApiToGlobalWindow}from'shared/ipcs'
const{key,api}=exposeApiToGlobalWindow({
exposeAll:true,// expose handlers, invokers and removers
})
declareglobal{
interfaceWindow{
[key]:typeofapi
}
}On therenderer process:
const{invoke,handle}=window.api
invoke.getPing('ping')
handle.getPong()This is a simple way to work with interprocess, but there's a lot of more cool features you can take advantage, like overrides, code splitting, invoker's response (for renderer and main process 🎉) and more. See theKnowledge section for more
Note:contributions are always welcome, but alwaysask first,— please — before work on a PR.
That said, there's a bunch of ways you can contribute to this project, like by:
- 🪲 Reporting a bug
- 📄 Improving the docs
- 🚨 Sharing this project and recommending it to your friends
- 💵 Supporting this project on GitHub Sponsors or Patreon
- 🐛 Funding an issue on IssueHunt
- 🌟 Giving a star on this repository
