Mimicking electron-tRPC

[Kaizen-BT]

Hi everyone,

I am working on a personal project which is just a personal dashboard. I think it's the third time I've attempted the project, mainly because IPC was just so much of a challenge as I am very new to the concept.

However, on my last attempt I stumbled across electron-trpc and was stoked to use it but the incompatibility with trpc v11 made me reconsider (mainly because I really wanted to use the react-query-integration.

Inspired by electron-trpc I tried my best to mimic it's capabilities and created ipc-bridge.

// client.ts
import { ipcRenderer } from "electron";

// Very primitive implementation of a proxy api
export function createAPIProxy<T extends object>() {
  const proxyHandler: ProxyHandler<T> = {
    get: (_, channel, __) => {
      console.log(`Calling: ${String(channel)}`);

      if (typeof channel !== "string") {
        throw Error("Unsupported channel...");
      }

      return (...args: any[]) => {
        return ipcRenderer.invoke(channel, ...args);
      };
    },
  };

  return new Proxy({} as T, proxyHandler);
}

// server.ts
import { ipcMain } from "electron";
import { APIProxyProps } from "../types";

// Very primitive implementation of the ICP API Server...
export function serveAPIProxy<T extends object>({ api }: APIProxyProps<T>) {
  Object.entries(api).forEach(([channel, handler]) => {
    ipcMain.handle(channel, (_, ...args) => handler(...args));
    console.log(`Registered: ${channel}`);
  });
}

The createAPIProxy function is used inside the preload script to expose any 'procedures' defined by a 'router'. The following is how it is currently being used in my project:

// contract.ts

import type { AppDatabase } from "@app/database";
import { QueryDriver } from "@app/database/queries";

export function makeAPI({ db }: { db: AppDatabase }) {
  return new QueryDriver(db);
}

export type IPCBridge = ReturnType<typeof makeAPI>;

The Query-Driver class is my current approach for creating a router. I prefer this approach since any properties will be auto-exposed for the main process to listen on.

In the main process I use the serveAPIProxy function together with the object from makeAPI to tell electron the channels to listen on as well as how to handle them.

As mentioned before the createAPIProxy is used in preload to expose the functions/properties from the query driver to the renderer process. However, the functions are from a Proxy object that instead traps the calls and sends it over ipc for the main process to handle. As a bonus, the proxy objects functions are typed identically to how they are defined in the QueryDriver allowing for end-to-end typesafety.

I acknowledge it is very primitive and has flaws but has made my experience much more enjoyable. I thought to share just in case it helps out anyone getting started with electron as IPC has been very frustrating for me.

I also acknowledge that the template my project is derived from played a huge role in making the DX more enjoyable.

Thank you for reading along.

Kindly, if possible please leave any feedback for me or point out any mistakes in my understanding so I may improve.