electron-trpc-experimental

https://makp0.github.io/electron-trpc-experimental/
Admin
An ergonomic and type-safe solution for building IPC in Electron with full tRPC support, enabling...
Tokens:1,377
Snippets:19
Trust Score:8.3
Update:10 months ago
Show doc for...
Tokens:
Raw
### Install electron-trpc-experimental

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Add the electron-trpc-experimental package to your project using your preferred package manager. This package is essential for integrating tRPC with Electron applications.

```bash
pnpm add electron-trpc-experimental
```

```bash
yarn add electron-trpc-experimental
```

```bash
npm install --save add electron-trpc-experimental
```

--------------------------------

### Main Process IPC Handler Setup

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Configure the main Electron process to expose a tRPC router to specified windows. This involves creating an IPC handler and ensuring the BrowserWindow is configured with the correct preload script path.

```typescript
import { app } from 'electron';
import { createIPCHandler } from 'electron-trpc-experimental/main';
import { router } from './api';


app.on('ready', () => {
  const win = new BrowserWindow({
    webPreferences: {
      // Replace this path with the path to your BUILT preload file
      "preload": 'path/to/preload.js',
    },
  });


  createIPCHandler({ router, windows: [win] });
});

```

--------------------------------

### Install superjson Transformer

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Install the superjson library to enable the serialization and deserialization of complex data types like Dates, Maps, Sets, and BigInts over JSON. This is a common transformer used with tRPC.

```bash
# pnpm
pnpm add superjson


# yarn
yarn add superjson


# npm
npm install --save superjson

```

--------------------------------

### Minimal Preload Script for electron-trpc-experimental

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

This preload script exposes the electron-trpc IPC channel to the render process, leveraging Electron's Context Isolation feature. It's the most basic setup required to enable communication between the main and renderer processes for tRPC.

```typescript
import { exposeElectronTRPC } from 'electron-trpc-experimental/preload';


process.once('loaded', async () => {
  exposeElectronTRPC();
});

```

--------------------------------

### Renderer Process tRPC Client Creation

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Set up the tRPC client in the renderer process to communicate with the tRPC router in the main process over IPC. This uses the `ipcLink` provided by `electron-trpc-experimental`.

```typescript
import { createTRPCProxyClient } from '@trpc/client';
import { ipcLink } from 'electron-trpc-experimental/renderer';


export const client = createTRPCProxyClient({
  links: [ipcLink()],
});

```

--------------------------------

### Configure tRPC Router with superjson Transformer (Main Process)

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Initialize the tRPC router in the main process with the superjson transformer. This ensures that complex data types returned by your procedures are correctly serialized.

```typescript
import { initTRPC } from '@trpc/server';
import superjson from 'superjson';
import { z } from 'zod';


const t = initTRPC.create({
  isServer: true,
  transformer: superjson
});


export const router = t.router({
  greeting: t.procedure
    .input(z.object({ name: z.string() }))
    .query((req) => {
      return {
        text: `Hello ${req.input.name}`,
        timestamp: new Date(), // Date objects require transformation
      };
    }),
});

```

--------------------------------

### Configure tRPC Client with superjson Transformer (Renderer Process)

Source: https://makp0.github.io/electron-trpc-experimental/getting-started

Configure the tRPC client in the renderer process to use the superjson transformer. This ensures that data sent to and received from the main process, including complex types, is correctly handled.

```typescript
import { createTRPCProxyClient } from '@trpc/client';
import { ipcLink } from 'electron-trpc-experimental/renderer';
import superjson from 'superjson';


export const client = createTRPCProxyClient({
  links: [ipcLink({ transformer: superjson })],
});

```
Tokens:
Raw