Skip to content

Commit

Permalink
v1.0.0 (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
jlalmes authored Nov 27, 2022
1 parent 6b3ba95 commit af6cc54
Show file tree
Hide file tree
Showing 4 changed files with 2,367 additions and 2,354 deletions.
41 changes: 26 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,39 +26,50 @@ npm install trpc-chrome
yarn add trpc-chrome
```

**2. Add a `chromeLink` to the client in your content script.**
**2. Add `createChromeHandler` in your background script.**

```typescript
// content.ts
import { createTRPCClient } from '@trpc/client';
import { chromeLink } from 'trpc-chrome/link';
// background.ts
import { initTRPC } from '@trpc/server';
import { createChromeHandler } from 'trpc-chrome/adapter';

import type { AppRouter } from './appRouter';
const t = initTRPC.create({
isServer: false,
allowOutsideOfServer: true,
});

const port = chrome.runtime.connect(chrome.runtime.id);
const appRouter = t.router({
// ...procedures
});

export const chromeClient = createTRPCClient<AppRouter>({
links: [/* 👉 */ chromeLink({ port })],
export type AppRouter = typeof appRouter;

createChromeHandler({
router: appRouter /* 👈 */,
});
```

**3. Add `createChromeHandler` in your background script.**
**3. Add a `chromeLink` to the client in your content script.**

```typescript
// background.ts
import { createChromeHandler } from 'trpc-chrome/adapter';
// content.ts
import { createTRPCClient } from '@trpc/client';
import { chromeLink } from 'trpc-chrome/link';

import { appRouter } from './appRouter';
import type { AppRouter } from './background';

createChromeHandler({ router: appRouter /* 👈 */ });
const port = chrome.runtime.connect();
export const chromeClient = createTRPCClient<AppRouter>({
links: [/* 👉 */ chromeLink({ port })],
});
```

## Requirements

Peer dependencies:

- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server@next`) must be installed.
- [`tRPC`](https://github.com/trpc/trpc) Client v10 (`@trpc/client@next`) must be installed.
- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server`) must be installed.
- [`tRPC`](https://github.com/trpc/trpc) Client v10 (`@trpc/client`) must be installed.

## Example

Expand Down
12 changes: 6 additions & 6 deletions examples/with-plasmo/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,19 @@
"build": "plasmo build"
},
"dependencies": {
"@trpc/client": "^10.0.0-rc.7",
"@trpc/server": "^10.0.0-rc.7",
"plasmo": "^0.59.0-alpha.1",
"@trpc/client": "^10.3.0",
"@trpc/server": "^10.3.0",
"plasmo": "^0.59.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"zod": "^3.19.1"
},
"devDependencies": {
"@types/chrome": "^0.0.200",
"@types/chrome": "^0.0.203",
"@types/node": "^18.11.9",
"@types/react": "^18.0.25",
"@types/react-dom": "^18.0.8",
"typescript": "^4.8.4"
"@types/react-dom": "^18.0.9",
"typescript": "^4.9.3"
},
"manifest": {
"host_permissions": [
Expand Down
Loading

0 comments on commit af6cc54

Please sign in to comment.