v0.1.0-alpha.4 (#1)

.eslintrc.js

@@ -0,0 +1,41 @@
+// @ts-check
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking',
+    'plugin:promise/recommended',
+    'plugin:prettier/recommended',
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: { jsx: false },
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: './tsconfig.eslint.json',
+    tsconfigRootDir: __dirname,
+  },
+  env: {
+    node: true,
+  },
+  rules: {
+    '@typescript-eslint/no-misused-promises': ['error', { checksVoidReturn: false }],
+    '@typescript-eslint/no-unsafe-argument': 'warn',
+    '@typescript-eslint/no-unsafe-assignment': 'warn',
+    '@typescript-eslint/no-unsafe-call': 'warn',
+    '@typescript-eslint/no-unsafe-member-access': 'warn',
+    '@typescript-eslint/no-unsafe-return': 'warn',
+    '@typescript-eslint/unbound-method': 'off',
+  },
+  overrides: [
+    {
+      files: ['*.js', '*.jsx', '*.mjs', '*.cjs'],
+      rules: {},
+    },
+  ],
+};

.github/FUNDING.yml

@@ -0,0 +1 @@
+github: jlalmes

.github/workflows/test.yml

@@ -0,0 +1,19 @@
+name: Test
+on: [push]
+jobs: 
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v2
+
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with: 
+          node-version: 16
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store

.npmignore

@@ -0,0 +1,5 @@
+*
+!dist/**/*
+!package.json
+!package-lock.json
+!LICENSE

.npmrc

@@ -0,0 +1,2 @@
+sign-git-tag=false
+message="trpc-chrome v%s"

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "yzhang.markdown-all-in-one",
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "editor.tabSize": 2,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#1a73e8",
+    "titleBar.inactiveBackground": "#5a98e9"
+  },
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

README.md

@@ -1,15 +1,103 @@
-# trpc-chrome
+![trpc-chrome](assets/trpc-chrome-readme.png)
 
-### **[Chrome Extension](https://developer.chrome.com/docs/extensions/mv3/) adapter for [tRPC](https://trpc.io/)** 🧩
+<div align="center">
+  <h1>trpc-chrome</h1>
+  <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>
+  <a href="./LICENSE"><img src="https://img.shields.io/badge/license-MIT-black" /></a>
+  <a href="https://trpc.io/discord" target="_blank"><img src="https://img.shields.io/badge/chat-discord-blue.svg" /></a>
+  <br />
+  <hr />
+</div>
+
+## **[Chrome extension](https://developer.chrome.com/docs/extensions/mv3/) support for [tRPC](https://trpc.io/)** 🧩
 
 - Easy communication for web extensions.
 - Typesafe messaging between content & background scripts.
 - Ready for Manifest V3.
 
+### Roadmap 🚘
+
+- Reconnect on background script reload. (maybe?)
+- Add example with client(content) & handler(background).
+- Add example with vice-versa handler(content) & client(background).
+
+## Usage
+
+**1. Install `trpc-chrome`.**
+
+```bash
+# npm
+npm install trpc-chrome
+# yarn
+yarn add trpc-chrome
+```
+
+**2. Add a `chromeLink` to the client in your content script.**
+
+```typescript
+// content.ts
+import { createTRPCClient } from '@trpc/client';
+import { chromeLink } from 'trpc-chrome';
+
+import type { AppRouter } from './appRouter';
+
+const port = chrome.runtime.connect(chrome.runtime.id);
+
+export const chromeClient = createTRPCClient<AppRouter>({
+  links: [/* 👉 */ chromeLink({ port })],
+});
+```
+
+**3. Add `createChromeHandler` in your background script.**
+
+```typescript
+// background.ts
+import { createChromeHandler } from 'trpc-chrome';
+
+import { appRouter } from './appRouter';
+
+createChromeHandler({ router: appRouter /* 👈 */ });
+```
+
+## Requirements
+
+Peer dependencies:
+
+- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server@next`) must be installed.
+- [`tRPC`](https://github.com/trpc/trpc) Server v10 (`@trpc/server@next`) must be installed.
+
+## Example
+
+Please see [full example here](examples/with-plasmo).
+
+_For advanced use-cases, please find examples in our [complete test suite](test)._
+
+## Types
+
+#### ChromeLinkOptions
+
+Please see [full typings here](src/link.ts).
+
+| Property | Type                  | Description                                                      | Required |
+| -------- | --------------------- | ---------------------------------------------------------------- | -------- |
+| `port`   | `chrome.runtime.Port` | An open web extension port between content & background scripts. | `true`   |
+
+#### CreateChromeHandlerOptions
+
+Please see [full typings here](src/handler.ts).
+
+| Property        | Type       | Description                                            | Required |
+| --------------- | ---------- | ------------------------------------------------------ | -------- |
+| `router`        | `Router`   | Your application tRPC router.                          | `true`   |
+| `createContext` | `Function` | Passes contextual (`ctx`) data to procedure resolvers. | `false`  |
+| `onError`       | `Function` | Called if error occurs inside handler.                 | `false`  |
+
+---
+
 ## License
 
 Distributed under the MIT License. See LICENSE for more information.
 
 ## Contact
 
-James Berry - Follow me on Twitter [@jlalmes](https://twitter.com/jlalmes) 💚
+James Berry - Follow me on Twitter [@jlalmes](https://twitter.com/jlalmes) 💙

RELEASE.md

@@ -0,0 +1,4 @@
+npm run test
+npm version {{version}}
+npm run build
+npm publish {{--tag alpha}}

examples/with-plasmo/.gitignore

@@ -0,0 +1,42 @@
+
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+#cache
+.turbo
+.next
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+
+# local env files
+.env*
+
+out/
+build/
+dist/
+
+# plasmo - https://www.plasmo.com
+.plasmo
+
+# bpp - http://bpp.browser.market/
+keys.json
+
+# typescript
+.tsbuildinfo

examples/with-plasmo/README.md

@@ -0,0 +1,11 @@
+# [**`trpc-chrome`**](../../README.md) (with-plasmo)
+
+### Getting started
+
+Make sure your current working directory is at `/trpc-chrome` root.
+
+```bash
+npm install
+npm run build
+npm run dev -w with-plasmo
+```

examples/with-plasmo/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "with-plasmo",
+  "displayName": "tRPC with Plasmo",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "plasmo dev",
+    "build": "plasmo build"
+  },
+  "dependencies": {
+    "@trpc/client": "^10.0.0-proxy-beta.13",
+    "@trpc/server": "^10.0.0-proxy-beta.13",
+    "plasmo": "0.55.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "zod": "^3.19.1"
+  },
+  "devDependencies": {
+    "@types/chrome": "0.0.196",
+    "@types/node": "18.7.15",
+    "@types/react": "18.0.18",
+    "@types/react-dom": "18.0.6",
+    "typescript": "4.8.2"
+  },
+  "manifest": {
+    "host_permissions": [
+      "http://*/*",
+      "https://*/*"
+    ]
+  }
+}

examples/with-plasmo/popup.tsx

@@ -0,0 +1,29 @@
+import { useState } from 'react';
+
+function IndexPopup() {
+  const [data, setData] = useState('');
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        padding: 16,
+      }}
+    >
+      <h2>
+        Welcome to your{' '}
+        <a href="https://www.plasmo.com" target="_blank">
+          Plasmo
+        </a>{' '}
+        Extension!
+      </h2>
+      <input onChange={(e) => setData(e.target.value)} value={data} />
+      <a href="https://docs.plasmo.com" target="_blank">
+        View Docs
+      </a>
+    </div>
+  );
+}
+
+export default IndexPopup;

examples/with-plasmo/src/background.ts

@@ -0,0 +1,15 @@
+import { initTRPC } from '@trpc/server';
+import { createChromeHandler } from 'trpc-chrome/dist/adapter';
+import { z } from 'zod';
+
+const t = initTRPC.create();
+
+const appRouter = t.router({
+  openNewTab: t.procedure.input(z.object({ url: z.string().url() })).mutation(async ({ input }) => {
+    await chrome.tabs.create({ url: input.url, active: true });
+  }),
+});
+
+export type AppRouter = typeof appRouter;
+
+createChromeHandler({ router: appRouter });