daltonmenezes / interprocess

💬 A scalable and type-safe Electron IPC management tool with enhanced DX
https://interprocess.daltonmenezes.com
MIT License
95 stars 2 forks source link
dx electron interprocess-communication ipc scalable type-safe typescript

preview

interprocess: 💬 A scalable and type-safe Electron IPC management tool with enhanced DX

github url patreon url releases url license url

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

Requirements

💬 Installation

In your terminal, run:

💬 Usage

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

First, create the following folders at src:

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
      },
    },
  })

On the main process:

:warning: Don't forget to add sandbox: false to 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(() => {
  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')
  })
})

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
  }
}

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

💬 Knowledge

💬 Contributing

Note: contributions are always welcome, but always ask first, — please — before work on a PR.

That said, there's a bunch of ways you can contribute to this project, like by:

License

MIT © Dalton Menezes