diff --git a/.changeset/perfect-spoons-heal.md b/.changeset/perfect-spoons-heal.md new file mode 100644 index 00000000..0a9f4dc5 --- /dev/null +++ b/.changeset/perfect-spoons-heal.md @@ -0,0 +1,5 @@ +--- +'electron-trpc': patch +--- + +Update API for `exposeElectronTRPC`. diff --git a/README.md b/README.md index 74df32f7..fc8e9ac7 100644 --- a/README.md +++ b/README.md @@ -35,38 +35,40 @@ npm install --save electron-trpc 1. Add your tRPC router to the Electron main process using `createIPCHandler`: - ```ts - import { app, ipcMain } from 'electron'; - import { createIPCHandler } from 'electron-trpc'; - import { router, createContext } from './api'; + ```ts + import { app, ipcMain } from 'electron'; + import { createIPCHandler } from 'electron-trpc'; + import { router, createContext } from './api'; - app.on('ready', () => { - createIPCHandler({ ipcMain, router, createContext })); + app.on('ready', () => { + createIPCHandler({ ipcMain, router, createContext })); - // ... - }); - ``` + // ... + }); + ``` 2. Expose the IPC to the render process from the [preload file](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts): - ```ts - import { contextBridge, ipcRenderer } from 'electron'; - import { exposeElectronTRPC } from 'electron-trpc'; + ```ts + import { contextBridge, ipcRenderer } from 'electron'; + import { exposeElectronTRPC } from 'electron-trpc'; - contextBridge.exposeInMainWorld('electron-trpc', exposeElectronTRPC(ipcRenderer)); - ``` + process.once('loaded', async () => { + exposeElectronTRPC({ contextBridge, ipcRenderer }); + }); + ``` - > Note: using `exposeInMainWorld` depends on `contextIsolation` to be enabled, which is the default. + > Note: using `exposeInMainWorld` depends on `contextIsolation` to be enabled, which is the default. 3. When creating the client in the render process, use the `ipcLink` (instead of the HTTP or batch HTTP links): - ```ts - import * as trpc from '@trpc/client'; - import { ipcLink } from 'electron-trpc'; + ```ts + import * as trpc from '@trpc/client'; + import { ipcLink } from 'electron-trpc'; - export const trpcClient = trpc.createClient({ - links: [ipcLink()], - }); - ``` + export const trpcClient = trpc.createClient({ + links: [ipcLink()], + }); + ``` 4. Now you can use the client in your render process as you normally would (e.g. using `@trpc/react`). diff --git a/src/main/exposeElectronTRPC.ts b/src/main/exposeElectronTRPC.ts index 42018edd..b7418448 100644 --- a/src/main/exposeElectronTRPC.ts +++ b/src/main/exposeElectronTRPC.ts @@ -1,8 +1,14 @@ -import type { IpcRenderer } from 'electron'; +import type { IpcRenderer, ContextBridge } from 'electron'; import { TRPCHandlerArgs } from './types'; -export const exposeElectronTRPC = (ipcRenderer: IpcRenderer) => { - return { +export const exposeElectronTRPC = ({ + contextBridge, + ipcRenderer, +}: { + contextBridge: ContextBridge; + ipcRenderer: IpcRenderer; +}) => { + return contextBridge.exposeInMainWorld('electronTRPC', { rpc: (args: TRPCHandlerArgs) => ipcRenderer.invoke('electron-trpc', args), - }; + }); };