Simplify API surface area.

Author: renovate[bot]

.changeset/healthy-wolves-boil.md

@@ -0,0 +1,5 @@
+---
+'electron-trpc': patch
+---
+
+Updated API to be simpler and require fewer steps.

.gitignore

@@ -1,3 +1,5 @@
 node_modules
 dist/
 coverage/
+packages/electron-trpc/renderer.d.ts
+packages/electron-trpc/main.d.ts

README.md

@@ -34,44 +34,37 @@ yarn add electron-trpc
 npm install --save electron-trpc
 ```
 
-## Setup
+## Basic Setup
 
-1. Add your tRPC router to the Electron main process using `createIPCHandler`:
+1. Add your tRPC router to the Electron main process using `createIPCHandler` and `getPreloadFile`:
 
    ```ts
-   import { app, ipcMain } from 'electron';
-   import { createIPCHandler } from 'electron-trpc';
-   import { router, createContext } from './api';
+   import { app } from 'electron';
+   import { createIPCHandler, getPreloadFile } from 'electron-trpc/main';
+   import { router } from './api';
 
    app.on('ready', () => {
-     createIPCHandler({ ipcMain, router, createContext });
+     createIPCHandler({ router });
 
-     // ...
-   });
-   ```
-
-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';
-
-   process.once('loaded', async () => {
-     exposeElectronTRPC({ contextBridge, ipcRenderer });
+     const win = new BrowserWindow({
+       webPreferences: {
+         preload: getPreloadFile(),
+       },
+     });
    });
    ```
 
    > Note: `electron-trpc` depends on `contextIsolation` being 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):
+2. 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';
+   import { ipcLink } from 'electron-trpc/renderer';
 
    export const trpcClient = trpc.createTRPCClient({
      links: [ipcLink()],
    });
    ```
 
-4. Now you can use the client in your render process as you normally would (e.g. using `@trpc/react`).
+3. Now you can use the client in your render process as you normally would (e.g. using `@trpc/react`).

examples/basic/.npmrc

@@ -1,14 +1,14 @@
 import path from 'path';
-import { app, ipcMain, BrowserWindow } from 'electron';
-import { createIPCHandler } from 'electron-trpc';
+import { app, BrowserWindow } from 'electron';
+import { createIPCHandler, getPreloadFile } from 'electron-trpc/main';
 import { router } from './api';
 
 app.on('ready', () => {
-  createIPCHandler({ ipcMain, router: router as any });
+  createIPCHandler({ router });
 
   const win = new BrowserWindow({
     webPreferences: {
-      preload: path.resolve(__dirname, 'preload.js'),
+      preload: getPreloadFile(),
     },
   });
 

examples/basic/main/main.ts

@@ -14,7 +14,7 @@
     "@trpc/client": "10.0.0-rc.4",
     "@trpc/react-query": "10.0.0-rc.4",
     "@trpc/server": "10.0.0-rc.4",
-    "electron": "^19.0.9",
+    "electron": "^21.2.2",
     "electron-trpc": "0.2.0-next.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -25,6 +25,7 @@
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
     "@vitejs/plugin-react": "^2.1.0",
-    "vite": "^3.0.3"
+    "vite": "^3.0.3",
+    "vite-plugin-electron-renderer": "^0.10.2"
   }
 }

examples/basic/main/preload.ts

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import ReactDom from 'react-dom';
-import { ipcLink } from 'electron-trpc';
+import { ipcLink } from 'electron-trpc/renderer';
 import { createTRPCReact } from '@trpc/react-query';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import type { AppRouter } from '../main/api';

examples/basic/package.json

@@ -1,10 +1,13 @@
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import renderer from 'vite-plugin-electron-renderer';
 
 export default defineConfig({
   base: './',
-  define: {
-    'process.env': {},
+  build: {
+    rollupOptions: {
+      external: ['electron', 'path'],
+    },
   },
-  plugins: [react()],
+  plugins: [renderer(), react()],
 });

examples/basic/renderer/index.tsx

@@ -0,0 +1,16 @@
+import z from 'zod';
+import { initTRPC } from '@trpc/server';
+
+const t = initTRPC.create({ isServer: true });
+
+export const router = t.router({
+  greeting: t.procedure.input(z.object({ name: z.string() })).query((req) => {
+    const { input } = req;
+
+    return {
+      text: `Hello ${input.name}` as const,
+    };
+  }),
+});
+
+export type AppRouter = typeof router;