init

.changeset/config.json

@@ -1,6 +1,6 @@
 {
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
- "changelog": ["@changesets/changelog-github", { "repo": "jsonnull/electron-trpc" }],
+ "changelog": ["@changesets/changelog-github", { "repo": "tychenjiajun/message-channel-trpc" }],
  "commit": false,
  "fixed": [],
  "linked": [],

.gitignore

@@ -3,5 +3,5 @@ dist/
 dist-electron/
 docs/.vitepress/cache/
 coverage/
-packages/electron-trpc/renderer.d.ts
-packages/electron-trpc/main.d.ts
+packages/message-channel-trpc/client.d.ts
+packages/message-channel-trpc/server.d.ts

.npmrc

@@ -1 +1 @@
-strict-peer-dependencies=false
+strict-peer-dependencies=false

.prettierrc

@@ -0,0 +1,26 @@
+{
+ "printWidth": 100,
+ "singleQuote": true,
+ "trailingComma": "es5",
+ "proseWrap": "preserve",
+ "semi": true,
+ "bracketSpacing": true,
+ "arrowParens": "avoid",
+ "endOfLine": "auto",
+ "tabWidth": 2,
+ "overrides": [
+ {
+ "files": ".prettierrc",
+ "options": {
+ "parser": "json"
+ }
+ },
+ {
+ "files": "*.json",
+ "options": {
+ "parser": "json",
+ "trailingComma": "none"
+ }
+ }
+ ]
+}

.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+ "spellright.language": [],
+ "spellright.documentTypes": [
+ "latex",
+ "plaintext"
+ ]
+}

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Jason Nall
+Copyright (c) 2023 Jiajun Chen
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,22 +1,21 @@
-# electron-trpc
+# message-channel-trpc
 
 <p>
- <a href="https://www.npmjs.com/package/electron-trpc">
- <img alt="NPM" src="https://img.shields.io/npm/v/electron-trpc"/>
+ <a href="https://www.npmjs.com/package/message-channel-trpc">
+ <img alt="NPM" src="https://img.shields.io/npm/v/message-channel-trpc"/>
  </a>
- <a href="https://codecov.io/gh/jsonnull/electron-trpc"> 
- <img src="https://codecov.io/gh/jsonnull/electron-trpc/branch/main/graph/badge.svg?token=DU33O0D9LZ"/> 
+ <a href="https://codecov.io/gh/tychenjiajun/message-channel-trpc"> 
+ <img src="https://codecov.io/gh/tychenjiajun/message-channel-trpc/branch/main/graph/badge.svg?token=DU33O0D9LZ"/> 
  </a>
  <span>
- <img alt="MIT" src="https://img.shields.io/npm/l/electron-trpc"/>
+ <img alt="MIT" src="https://img.shields.io/npm/l/message-channel-trpc"/>
  </span>
 </p>
 
 <p></p>
 
-**Build IPC for Electron with tRPC**
+**Build IPC for MessageChannel with tRPC**
 
-- Expose APIs from Electron's main process to one or more render processes.
 - Build fully type-safe IPC.
 - Secure alternative to opening servers on localhost.
 - Full support for queries, mutations, and subscriptions.
@@ -25,22 +24,22 @@
 
 ```sh
 # Using pnpm
-pnpm add electron-trpc
+pnpm add message-channel-trpc
 
 # Using yarn
-yarn add electron-trpc
+yarn add message-channel-trpc
 
 # Using npm
-npm install --save electron-trpc
+npm install --save message-channel-trpc
 ```
 
 ## Basic Setup
 
-1. Add your tRPC router to the Electron main process using `createIPCHandler`:
+1. Add your tRPC router to the MessageChannel main process using `createIPCHandler`:
 
  ```ts
  import { app } from 'electron';
- import { createIPCHandler } from 'electron-trpc/main';
+ import { createIPCHandler } from 'message-channel-trpc/server';
  import { router } from './api';
 
  app.on('ready', () => {
@@ -58,20 +57,20 @@ npm install --save electron-trpc
 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 { exposeElectronTRPC } from 'electron-trpc/main';
+ import { exposeMessageChannelTRPC } from 'message-channel-trpc/server';
 
  process.once('loaded', async () => {
- exposeElectronTRPC();
+ exposeMessageChannelTRPC();
  });
  ```
 
- > Note: `electron-trpc` depends on `contextIsolation` being enabled, which is the default.
+ > Note: `message-channel-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):
 
  ```ts
  import { createTRPCProxyClient } from '@trpc/client';
- import { ipcLink } from 'electron-trpc/renderer';
+ import { ipcLink } from 'message-channel-trpc/client';
 
  export const client = createTRPCProxyClient({
  links: [ipcLink()],

docs/.vitepress/ExamplesButton.vue

@@ -2,7 +2,7 @@
  <div class="flex flex-col items-center pt-8">
  <a
  class="py-2 px-6 block rounded-full font-600 text-4 bg-[var(--vp-button-alt-bg)] border border-solid border-[var(--vp-button-alt-border)]"
- href="https://github.com/jsonnull/electron-trpc/tree/main/examples/"
+ href="https://github.com/tychenjiajun/message-channel-trpc/tree/main/examples/"
  target="_blank"
  >See more examples</a
  >

docs/.vitepress/Features.vue

@@ -1,26 +1,7 @@
 <script setup>
 import { ref } from 'vue';
 
-const features = ref([
- {
- title: 'Main <-> Renderer',
- description: "Expose APIs from electron's main process to one or more renderer processes.",
- },
- {
- title: 'Fully type-safe IPC',
- description:
- 'Build electron IPC with all the benefits of tRPC, including inferred client types.',
- },
- {
- title: 'Secure platform alternative to localhost',
- description: 'Electron IPC is faster and more secure than opening local servers for IPC.',
- },
- {
- title: 'Queries, mutations, and subscriptions',
- description:
- 'Supports all tRPC features. No need to write complicated bi-directional IPC schemes.',
- },
-]);
+const features = ref([]);
 </script>
 
 <template>

docs/.vitepress/Hero.vue

@@ -3,11 +3,11 @@
  <h1
  class="text-12 md-text-16 font-700 tracking-tighter leading-none pb-8 color-[var(--vp-home-hero-name-color)]"
  >
- electron-trpc
+ message-channel-trpc
  </h1>
 
  <p class="text-5 md-text-7 font-500 md-tracking-tight leading-normal text-center">
- Ergonomic and type-safe solution for building IPC in Electron
+ Ergonomic and type-safe solution for building IPC in MessageChannel
  </p>
 
  <div class="flex flex-row pt-8 gap-4">
@@ -19,7 +19,7 @@
 
  <a
  class="py-2 px-6 block rounded-full font-600 text-4 bg-[var(--vp-button-alt-bg)] border border-solid border-[var(--vp-button-alt-border)]"
- href="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/jsonnull/electron-trpc"
+ href="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/tychenjiajun/message-channel-trpc"
  target="_blank"
  >View on Github</a
  >

docs/.vitepress/config.ts

@@ -2,10 +2,10 @@ import { defineConfig } from 'vitepress';
 import UnoCSS from 'unocss/vite';
 
 export default defineConfig({
- title: 'electron-trpc',
+ title: 'message-channel-trpc',
  description: 'Just playing around.',
  themeConfig: {
- repo: 'jsonnull/electron-trpc',
+ repo: 'tychenjiajun/message-channel-trpc',
  nav: [{ text: 'Guide', link: '/getting-started' }],
  sidebar: [
  {
@@ -15,7 +15,7 @@ export default defineConfig({
  ],
  footer: {
  message: 'Released under the MIT License.',
- copyright: 'Copyright © 2023-present Jason Nall',
+ copyright: 'Copyright © 2023-present Jiajun Chen',
  },
  },
  vite: {

docs/getting-started.md

@@ -7,85 +7,17 @@ Follow installation instructions for [trpc](https://trpc.io/docs/quickstart#inst
 #### pnpm
 
 ```sh
-pnpm add electron-trpc
+pnpm add message-channel-trpc
 ```
 
 #### yarn
 
 ```sh
-yarn add electron-trpc
+yarn add message-channel-trpc
 ```
 
 #### npm
 
 ```sh
-npm install --save electron-trpc
+npm install --save message-channel-trpc
 ```
-
-## TypeScript
-
-It's worth noting that you'll need to figure out how to get TypeScript working on both the main process and render process client code. For one example of how to do this with a good developer experience (minimal configuration, fast bundling, client hot-reloading) see our [basic example](https://github.com/jsonnull/electron-trpc/tree/main/examples/basic).
-
-## Preload
-
-`electron-trpc` depends on Electron's [Context Isolation](https://www.electronjs.org/docs/latest/tutorial/context-isolation) feature, and exposes the electron-trpc IPC channel to render processes using a [preload file](https://www.electronjs.org/docs/latest/tutorial/process-model#preload-scripts).
-
-Some familiarization with these concepts can be helpful in case of unexpected issues during setup.
-
-This is the most minimal working preload file for using `electron-trpc`. Depending on your application, you may need to add this to an existing preload file or customize it later.
-
-::: code-group
-
-```ts [preload.ts]
-import { exposeElectronTRPC } from 'electron-trpc/main';
-
-process.once('loaded', async () => {
- exposeElectronTRPC();
-});
-```
-
-:::
-
-## Main
-
-In the main electron process, you will want to expose a tRPC router to one or more windows. These windows need to use the preload file you created.
-
-::: code-group
-
-```ts{7-10,13} [main.ts]
-import { app } from 'electron';
-import { createIPCHandler } from 'electron-trpc/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] });
-});
-```
-
-:::
-
-## Renderer
-
-Windows you construct with the preload file and the IPC handler can reach the tRPC router in the main process over IPC. To do this, a script in the window needs to create a tRPC client using the IPC link:
-
-::: code-group
-
-```ts [renderer.ts]
-import { createTRPCProxyClient } from '@trpc/client';
-import { ipcLink } from 'electron-trpc/renderer';
-
-export const client = createTRPCProxyClient({
- links: [ipcLink()],
-});
-```
-
-:::
-
-To use a different client, follow the appropriate usage instructions in the tRPC docs, ensuring that you substitute any HTTP or websocket links with the `ipcLink`.

docs/index.md

@@ -32,15 +32,15 @@ import Hero from './.vitepress/Hero.vue'
 
 ::: code-group
 
-```ts [renderer.tsx]
-function HelloElectron() {
+```ts [client.tsx]
+function HelloMessageChannel() {
  const { data } = trpcReact.greeting.useQuery({
- name: 'Electron',
+ name: 'MessageChannel',
  });
 
  if (!data) return null;
 
- return <div>{data.text}</div>; // Hello Electron
+ return <div>{data.text}</div>; // Hello MessageChannel
 }
 ```
 
@@ -51,7 +51,7 @@ function HelloElectron() {
 
 ::: code-group
 
-```ts [main.ts]
+```ts [server.ts]
 export const router = t.router({
  greeting: t.procedure
  .input(z.object({ name: z.string() }))