fix: properly handle trpc requestIDs with HMR (#369)

Author: jonathanlab

.github/workflows/build.yml

@@ -26,6 +26,8 @@ jobs:
           cache: 'pnpm'
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
+      - name: Build electron-trpc
+        run: pnpm --filter @posthog/electron-trpc build
       - name: Build agent
         run: pnpm --filter agent build
       - name: Build array

.github/workflows/release.yml

@@ -7,6 +7,7 @@ on:
     paths:
       - "apps/array/**"
       - "packages/agent/**"
+      - "packages/electron-trpc/**"
       - "pnpm-lock.yaml"
       - "package.json"
       - "turbo.json"
@@ -71,6 +72,9 @@ jobs:
       - name: Install dependencies
         run: pnpm install --frozen-lockfile
 
+      - name: Build electron-trpc package
+        run: pnpm --filter @posthog/electron-trpc run build
+
       - name: Build agent package
         run: pnpm --filter @posthog/agent run build
 

apps/array/package.json

@@ -145,7 +145,7 @@
     "remark-gfm": "^4.0.1",
     "sonner": "^2.0.7",
     "tippy.js": "^6.3.7",
-    "trpc-electron": "^0.1.2",
+    "@posthog/electron-trpc": "workspace:*",
     "uuid": "^9.0.1",
     "vscode-icons-js": "^11.6.1",
     "zod": "^4.1.12",

apps/array/src/main/index.ts

@@ -7,6 +7,7 @@ import { mkdirSync } from "node:fs";
 import os from "node:os";
 import path from "node:path";
 import { fileURLToPath } from "node:url";
+import { createIPCHandler } from "@posthog/electron-trpc/main";
 import {
   app,
   BrowserWindow,
@@ -16,7 +17,6 @@ import {
   type MenuItemConstructorOptions,
   shell,
 } from "electron";
-import { createIPCHandler } from "trpc-electron/main";
 import "./lib/logger";
 import { ANALYTICS_EVENTS } from "../types/analytics.js";
 import { container } from "./di/container.js";

apps/array/src/main/preload.ts

@@ -1,4 +1,4 @@
-import { exposeElectronTRPC } from "trpc-electron/main";
+import { exposeElectronTRPC } from "@posthog/electron-trpc/main";
 import "electron-log/preload";
 
 process.once("loaded", async () => {

apps/array/src/main/services/dock-badge/service.ts

@@ -19,7 +19,7 @@ export class DockBadgeService {
 
     this.hasBadge = true;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.dock.setBadge("•");
+      app.dock?.setBadge("•");
     }
     log.info("Dock badge shown");
   }
@@ -29,7 +29,7 @@ export class DockBadgeService {
 
     this.hasBadge = false;
     if (process.platform === "darwin" || process.platform === "linux") {
-      app.dock.setBadge("");
+      app.dock?.setBadge("");
     }
     log.info("Dock badge cleared");
   }

apps/array/src/main/services/ui/service.ts

@@ -2,10 +2,6 @@ import { injectable } from "inversify";
 import { TypedEventEmitter } from "../../lib/typed-event-emitter.js";
 import { UIServiceEvent, type UIServiceEvents } from "./schemas.js";
 
-/**
- * UIService handles UI events that need to be communicated from main to renderer.
- * These are typically triggered by menu items or other main process actions.
- */
 @injectable()
 export class UIService extends TypedEventEmitter<UIServiceEvents> {
   openSettings(): void {

apps/array/src/renderer/trpc/client.ts

@@ -1,6 +1,6 @@
+import { ipcLink } from "@posthog/electron-trpc/renderer";
 import { createTRPCProxyClient } from "@trpc/client";
 import { type CreateTRPCReact, createTRPCReact } from "@trpc/react-query";
-import { ipcLink } from "trpc-electron/renderer";
 import type { TrpcRouter } from "../../main/trpc/router.js";
 
 export function createTrpcClient() {

packages/electron-trpc/dts-bundle-generator.config.cjs

@@ -0,0 +1,19 @@
+const config = {
+  compilationOptions: {
+    preferredConfigPath: "./tsconfig.json",
+  },
+  entries: [
+    {
+      filePath: "./src/renderer/index.ts",
+      outFile: `./dist/renderer.d.ts`,
+      noCheck: true,
+    },
+    {
+      filePath: "./src/main/index.ts",
+      outFile: `./dist/main.d.ts`,
+      noCheck: true,
+    },
+  ],
+};
+
+module.exports = config;

packages/electron-trpc/main.d.ts

@@ -0,0 +1,37 @@
+// Generated by dts-bundle-generator v8.1.2
+
+import { AnyTRPCRouter, inferRouterContext } from "@trpc/server";
+import { BrowserWindow, IpcMainInvokeEvent } from "electron";
+
+export declare const ELECTRON_TRPC_CHANNEL = "trpc-electron";
+export interface CreateContextOptions {
+  event: IpcMainInvokeEvent;
+}
+export type MaybePromise<TType> = Promise<TType> | TType;
+declare class IPCHandler<TRouter extends AnyTRPCRouter> {
+  constructor({
+    createContext,
+    router,
+    windows,
+  }: {
+    createContext?: (
+      opts: CreateContextOptions,
+    ) => MaybePromise<inferRouterContext<TRouter>>;
+    router: TRouter;
+    windows?: BrowserWindow[];
+  });
+  attachWindow(win: BrowserWindow): void;
+  detachWindow(win: BrowserWindow, webContentsId?: number): void;
+}
+export declare const createIPCHandler: <TRouter extends AnyTRPCRouter>({
+  createContext,
+  router,
+  windows,
+}: {
+  createContext?: (
+    opts: CreateContextOptions,
+  ) => Promise<inferRouterContext<TRouter>>;
+  router: TRouter;
+  windows?: Electron.BrowserWindow[];
+}) => IPCHandler<TRouter>;
+export declare const exposeElectronTRPC: () => void;