Skip to content

Commit b99c28a

Browse files
jlalmesjlalmes
authored
v0.1.0-alpha.4 (#1)
1 parent 31e2b4a commit b99c28a

34 files changed

+33125
-3
lines changed

‎.eslintrc.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// @ts-check
2+
3+
/** @type {import('eslint').Linter.Config} */
4+
module.exports = {
5+
root: true,
6+
extends: [
7+
'eslint:recommended',
8+
'plugin:import/recommended',
9+
'plugin:import/typescript',
10+
'plugin:@typescript-eslint/recommended',
11+
'plugin:@typescript-eslint/recommended-requiring-type-checking',
12+
'plugin:promise/recommended',
13+
'plugin:prettier/recommended',
14+
],
15+
parser: '@typescript-eslint/parser',
16+
parserOptions: {
17+
ecmaFeatures: { jsx: false },
18+
ecmaVersion: 'latest',
19+
sourceType: 'module',
20+
project: './tsconfig.eslint.json',
21+
tsconfigRootDir: __dirname,
22+
},
23+
env: {
24+
node: true,
25+
},
26+
rules: {
27+
'@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
28+
'@typescript-eslint/no-unsafe-argument': 'warn',
29+
'@typescript-eslint/no-unsafe-assignment': 'warn',
30+
'@typescript-eslint/no-unsafe-call': 'warn',
31+
'@typescript-eslint/no-unsafe-member-access': 'warn',
32+
'@typescript-eslint/no-unsafe-return': 'warn',
33+
'@typescript-eslint/unbound-method': 'off',
34+
},
35+
overrides: [
36+
{
37+
files: ['*.js', '*.jsx', '*.mjs', '*.cjs'],
38+
rules: {},
39+
},
40+
],
41+
};

‎.github/FUNDING.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
github: jlalmes

‎.github/workflows/test.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: Test
2+
on: [push]
3+
jobs:
4+
test:
5+
runs-on: ubuntu-latest
6+
steps:
7+
- name: Checkout repo
8+
uses: actions/checkout@v2
9+
10+
- name: Setup node
11+
uses: actions/setup-node@v3
12+
with:
13+
node-version: 16
14+
15+
- name: Install dependencies
16+
run: npm ci
17+
18+
- name: Run tests
19+
run: npm test

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
node_modules
2+
dist
3+
.DS_Store

‎.npmignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
*
2+
!dist/**/*
3+
!package.json
4+
!package-lock.json
5+
!LICENSE

‎.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
sign-git-tag=false
2+
message="trpc-chrome v%s"

‎.vscode/extensions.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"recommendations": [
3+
"dbaeumer.vscode-eslint",
4+
"esbenp.prettier-vscode",
5+
"yzhang.markdown-all-in-one",
6+
]
7+
}

‎.vscode/settings.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"typescript.tsdk": "node_modules/typescript/lib",
3+
"editor.tabSize": 2,
4+
"editor.formatOnSave": true,
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true
7+
},
8+
"workbench.colorCustomizations": {
9+
"titleBar.activeBackground": "#1a73e8",
10+
"titleBar.inactiveBackground": "#5a98e9"
11+
},
12+
"[javascript]": {
13+
"editor.defaultFormatter": "esbenp.prettier-vscode"
14+
},
15+
"[jsonc]": {
16+
"editor.defaultFormatter": "esbenp.prettier-vscode"
17+
}
18+
}

‎README.md‎

Lines changed: 91 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,103 @@
1-
# trpc-chrome
1+
![trpc-chrome](assets/trpc-chrome-readme.png)
22

3-
### **[Chrome Extension](https://developer.chrome.com/docs/extensions/mv3/) adapter for [tRPC](https://trpc.io/)** 🧩
3+
<div align="center">
4+
<h1>trpc-chrome</h1>
5+
<a href="https://www.npmjs.com/package/trpc-chrome"><img src="https://img.shields.io/npm/v/trpc-chrome.svg?style=flat&color=brightgreen" target="_blank" /></a>
6+
<a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" /></a>
7+
<a href="https://trpc.io/discord" target="_blank"><img src="https://img.shields.io/badge/chat-discord-blue.svg" /></a>
8+
<br />
9+
<hr />
10+
</div>
11+
12+
## **[Chrome extension](https://developer.chrome.com/docs/extensions/mv3/) support for [tRPC](https://trpc.io/)** 🧩
413

514
- Easy communication for web extensions.
615
- Typesafe messaging between content & background scripts.
716
- Ready for Manifest V3.
817

18+
### Roadmap 🚘
19+
20+
- Reconnect on background script reload. (maybe?)
21+
- Add example with client(content) & handler(background).
22+
- Add example with vice-versa handler(content) & client(background).
23+
24+
## Usage
25+
26+
**1. Install `trpc-chrome`.**
27+
28+
```bash
29+
# npm
30+
npm install trpc-chrome
31+
# yarn
32+
yarn add trpc-chrome
33+
```
34+
35+
**2. Add a `chromeLink` to the client in your content script.**
36+
37+
```typescript
38+
// content.ts
39+
import { createTRPCClient } from '@trpc/client';
40+
import { chromeLink } from 'trpc-chrome';
41+
42+
import type { AppRouter } from './appRouter';
43+
44+
const port = chrome.runtime.connect(chrome.runtime.id);
45+
46+
export const chromeClient = createTRPCClient<AppRouter>({
47+
links: [/* 👉 */ chromeLink({ port })],
48+
});
49+
```
50+
51+
**3. Add `createChromeHandler` in your background script.**
52+
53+
```typescript
54+
// background.ts
55+
import { createChromeHandler } from 'trpc-chrome';
56+
57+
import { appRouter } from './appRouter';
58+
59+
createChromeHandler({ router: appRouter /* 👈 */ });
60+
```
61+
62+
## Requirements
63+
64+
Peer dependencies:
65+
66+
- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server@next`) must be installed.
67+
- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server@next`) must be installed.
68+
69+
## Example
70+
71+
Please see [full example here](examples/with-plasmo).
72+
73+
_For advanced use-cases, please find examples in our [complete test suite](test)._
74+
75+
## Types
76+
77+
#### ChromeLinkOptions
78+
79+
Please see [full typings here](src/link.ts).
80+
81+
| Property | Type | Description | Required |
82+
| -------- | --------------------- | ---------------------------------------------------------------- | -------- |
83+
| `port` | `chrome.runtime.Port` | An open web extension port between content & background scripts. | `true` |
84+
85+
#### CreateChromeHandlerOptions
86+
87+
Please see [full typings here](src/handler.ts).
88+
89+
| Property | Type | Description | Required |
90+
| --------------- | ---------- | ------------------------------------------------------ | -------- |
91+
| `router` | `Router` | Your application tRPC router. | `true` |
92+
| `createContext` | `Function` | Passes contextual (`ctx`) data to procedure resolvers. | `false` |
93+
| `onError` | `Function` | Called if error occurs inside handler. | `false` |
94+
95+
---
96+
997
## License
1098

1199
Distributed under the MIT License. See LICENSE for more information.
12100

13101
## Contact
14102

15-
James Berry - Follow me on Twitter [@jlalmes](https://twitter.com/jlalmes) 💚
103+
James Berry - Follow me on Twitter [@jlalmes](https://twitter.com/jlalmes) 💙

‎RELEASE.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
npm run test
2+
npm version {{version}}
3+
npm run build
4+
npm publish {{--tag alpha}}

0 commit comments

Comments
 (0)