DEV Community

Cover image for interprocess: πŸ’¬ A scalable and type-safe Electron IPC management tool with enhanced DX
Dalton Menezes
Dalton Menezes

Posted on

interprocess: πŸ’¬ A scalable and type-safe Electron IPC management tool with enhanced DX

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!

πŸ’¬ Features

  • πŸš€β€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)
  • πŸ’–β€invoke and handle methods in both processes with the same expected behavior

πŸ’¬ Installation

In your terminal, run:

yarn add interprocess

# OR

npm i interprocess
Enter fullscreen mode Exit fullscreen mode

πŸ’¬ Usage

Let's build something simple that can show you some of the interprocess's power!

First, create the following folders at src:

  • shared/ipcs (this folder structure is optional)

Then, create a file named as index.ts in the ipcs folder with the following content:

import { createInterprocess } from 'interprocess'

export const { ipcMain, ipcRenderer, exposeApiToGlobalWindow } =
  createInterprocess({
    main: {
      async getPing(_, data: 'ping') {
        const message = `from renderer: ${data} on main process`

        console.log(message)

        return message
      },
    },

    renderer: {
      async getPong(_, data: 'pong') {
        const message = `from main: ${data} on renderer process`

        console.log(message)

        return message
      },
    },
  })
Enter fullscreen mode Exit fullscreen mode

On the main process:

import { BrowserWindow, app } from 'electron'

import { ipcMain } from 'shared/ipcs'

const { handle, invoke } = ipcMain

app.whenReady().then(() => {
  const mainWindow = new BrowserWindow({
    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')
  })
})
Enter fullscreen mode Exit fullscreen mode

In the preload script:

import { exposeApiToGlobalWindow } from 'shared/ipcs'

const { key, api } = exposeApiToGlobalWindow({
  exposeAll: true, // expose handlers, invokers and removers
})

declare global {
  interface Window {
    [key]: typeof api
  }
}
Enter fullscreen mode Exit fullscreen mode

On the renderer process:

const { invoke, handle } = window.api

invoke.getPing('ping')
handle.getPong()
Enter fullscreen mode Exit fullscreen mode

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 the Knowledge section for more!

πŸ’¬ Knowledge

Top comments (0)