Add vanilla esm support and example. (#204)

.changeset/healthy-tigers-enjoy.md

@@ -0,0 +1,5 @@
+---
+'electron-trpc': major
+---
+
+Breaking change: exposeElectronTRPC is now imported from 'electron-trpc/preload'.

.github/workflows/test.yml

@@ -21,7 +21,7 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
-      - run: pnpm build
+      - run: pnpm build:code
       - run: pnpm test:ci
       - uses: codecov/codecov-action@v4
 
@@ -40,5 +40,10 @@ jobs:
           node-version: ${{ matrix.node }}
           cache: 'pnpm'
       - run: pnpm install --frozen-lockfile
-      - run: pnpm build
+      - run: pnpm build:code
+      - run: |
+          sudo chown root examples/basic-react/node_modules/electron/dist/chrome-sandbox \
+          && sudo chmod 4755 examples/basic-react/node_modules/electron/dist/chrome-sandbox \
+          && sudo chown root examples/basic-vanilla-esm/node_modules/electron/dist/chrome-sandbox \
+          && sudo chmod 4755 examples/basic-vanilla-esm/node_modules/electron/dist/chrome-sandbox
       - run: xvfb-run --auto-servernum -- pnpm test:e2e

README.md

@@ -58,7 +58,7 @@ 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 { exposeElectronTRPC } from 'electron-trpc/preload';
 
    process.once('loaded', async () => {
      exposeElectronTRPC();

examples/basic-react-superjson/preload/preload.ts

@@ -1,4 +1,4 @@
-import { exposeElectronTRPC } from 'electron-trpc/main';
+import { exposeElectronTRPC } from 'electron-trpc/preload';
 
 process.once('loaded', async () => {
   exposeElectronTRPC();

examples/basic-react-superjson/tsconfig.json

@@ -5,7 +5,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["dom", "esnext"],
-    "module": "esnext",
+    "module": "node16",
     "moduleResolution": "node16",
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,

examples/basic-react/index.e2e.ts

@@ -3,7 +3,11 @@ import { _electron as electron, test, expect } from '@playwright/test';
 test('Hello Electron', async () => {
   const electronApp = await electron.launch({
     args: [`${__dirname}`],
-    executablePath: process.env.PLAYWRIGHT_ELECTRON_PATH ?? undefined,
+    executablePath: process.env.PLAYWRIGHT_ELECTRON_PATH || undefined,
+    env: {
+      ...process.env,
+      NODE_ENV: 'development',
+    },
   });
 
   const window = await electronApp.firstWindow();

examples/basic-react/preload/preload.ts

@@ -1,4 +1,4 @@
-import { exposeElectronTRPC } from 'electron-trpc/main';
+import { exposeElectronTRPC } from 'electron-trpc/preload';
 
 process.once('loaded', async () => {
   exposeElectronTRPC();

examples/basic-react/tsconfig.json

@@ -5,7 +5,7 @@
     "forceConsistentCasingInFileNames": true,
     "jsx": "react",
     "lib": ["dom", "esnext"],
-    "module": "esnext",
+    "module": "node16",
     "moduleResolution": "node16",
     "noEmit": true,
     "noFallthroughCasesInSwitch": true,

examples/basic-vanilla-esm/CHANGELOG.md

@@ -0,0 +1,134 @@
+# examples/basic
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [[`fb7845f`](https://github.com/jsonnull/electron-trpc/commit/fb7845fbc771002309dea9d8b4c2079860350656), [`2bc0233`](https://github.com/jsonnull/electron-trpc/commit/2bc02333172b8a25a493c34c8e17434b8ffb4eea)]:
+  - electron-trpc@0.6.1
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [[`a15c6c4d0c531b3596689b4cc470548a5228c989`](https://github.com/jsonnull/electron-trpc/commit/a15c6c4d0c531b3596689b4cc470548a5228c989), [`50953c7e5bcb69d4e5482405f4a621b229f0ca82`](https://github.com/jsonnull/electron-trpc/commit/50953c7e5bcb69d4e5482405f4a621b229f0ca82)]:
+  - electron-trpc@0.6.0
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [[`0e72fe9`](https://github.com/jsonnull/electron-trpc/commit/0e72fe93b7605636b80cb3b3e47b6992cb4c097a), [`0e72fe9`](https://github.com/jsonnull/electron-trpc/commit/0e72fe93b7605636b80cb3b3e47b6992cb4c097a)]:
+  - electron-trpc@0.5.2
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [[`c43ae93`](https://github.com/jsonnull/electron-trpc/commit/c43ae93df4af397986c602c432fc32178d62796b)]:
+  - electron-trpc@0.5.1
+
+## 0.0.12
+
+### Patch Changes
+
+- Updated dependencies [[`68ddf63`](https://github.com/jsonnull/electron-trpc/commit/68ddf63ff6b3560626bf78d45ca2bf7ed2851f22)]:
+  - electron-trpc@0.5.0
+
+## 0.0.11
+
+### Patch Changes
+
+- Updated dependencies [[`70d13e4`](https://github.com/jsonnull/electron-trpc/commit/70d13e400d8b0678a359c633511b419736ef4b5d)]:
+  - electron-trpc@0.4.5
+
+## 0.0.10
+
+### Patch Changes
+
+- Updated dependencies [[`84d1139`](https://github.com/jsonnull/electron-trpc/commit/84d1139d6b6970b8863fdb1ba22a0aaa709045ec)]:
+  - electron-trpc@0.4.4
+
+## 0.0.9
+
+### Patch Changes
+
+- Updated dependencies [[`42abc41`](https://github.com/jsonnull/electron-trpc/commit/42abc4182c260580e320e8ec61926ed3ad372940)]:
+  - electron-trpc@0.4.3
+
+## 0.0.8
+
+### Patch Changes
+
+- Updated dependencies [[`cbae157`](https://github.com/jsonnull/electron-trpc/commit/cbae1570ddeab2405950806656c0d4fc19d72855)]:
+  - electron-trpc@0.4.2
+
+## 0.0.7
+
+### Patch Changes
+
+- Updated dependencies [[`b73c1a8`](https://github.com/jsonnull/electron-trpc/commit/b73c1a89c77258bf4372991fda563d6fa0ba299f)]:
+  - electron-trpc@0.4.1
+
+## 0.0.6
+
+### Patch Changes
+
+- Updated dependencies [[`70e8e5c`](https://github.com/jsonnull/electron-trpc/commit/70e8e5c5f3e2654d055663a286c4107a66f362e7)]:
+  - electron-trpc@0.4.0
+
+## 0.0.5
+
+### Patch Changes
+
+- Updated dependencies [[`46d79ef`](https://github.com/jsonnull/electron-trpc/commit/46d79efde7ccc12cd1e99eb086413aa83bda29f8)]:
+  - electron-trpc@0.3.2
+
+## 0.0.4
+
+### Patch Changes
+
+- Updated dependencies [[`25b6c5a`](https://github.com/jsonnull/electron-trpc/commit/25b6c5a5cb56a93a4facf7345a10c3bb2db37730), [`25b6c5a`](https://github.com/jsonnull/electron-trpc/commit/25b6c5a5cb56a93a4facf7345a10c3bb2db37730), [`25b6c5a`](https://github.com/jsonnull/electron-trpc/commit/25b6c5a5cb56a93a4facf7345a10c3bb2db37730)]:
+  - electron-trpc@0.3.1
+
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies [[`b67f2a7`](https://github.com/jsonnull/electron-trpc/commit/b67f2a7a87cd77b88d337e6996d78c6507a9c187)]:
+  - electron-trpc@0.3.0
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [[`c9031f5`](https://github.com/jsonnull/electron-trpc/commit/c9031f5b521095d3c648fc905b642471e875d86f)]:
+  - electron-trpc@0.2.1
+
+## 0.0.1
+
+### Patch Changes
+
+- Updated dependencies [[`231afea`](https://github.com/jsonnull/electron-trpc/commit/231afea9f21f0d4ba7f12c37fd781f22ca5d4141), [`960999f`](https://github.com/jsonnull/electron-trpc/commit/960999f5c2fec8b70152cfdf6cadc737c60edd48), [`3c76498`](https://github.com/jsonnull/electron-trpc/commit/3c76498c152e92fe1b084d3e7a5170d8f2c1dee3), [`7c7ee89`](https://github.com/jsonnull/electron-trpc/commit/7c7ee89b45c6c27527e26b0a6100fc0cb41d8ba6), [`ddc11cb`](https://github.com/jsonnull/electron-trpc/commit/ddc11cb1f1502568a028476acdefdb8d95d9562c), [`4615cf6`](https://github.com/jsonnull/electron-trpc/commit/4615cf63c382a0ea21781efb5093a531cc6378e6), [`006d01e`](https://github.com/jsonnull/electron-trpc/commit/006d01e73a995f756be622769192444bba3b4a87), [`c46f700`](https://github.com/jsonnull/electron-trpc/commit/c46f700b6171835a5b00d6d2c44061acdcd49874), [`42f2b09`](https://github.com/jsonnull/electron-trpc/commit/42f2b09efbaf322af42df176b74f72b972724f99), [`d2870a4`](https://github.com/jsonnull/electron-trpc/commit/d2870a4ef4429053c6a0d3e44bb204d0177adda9)]:
+  - electron-trpc@0.2.0
+
+## 0.0.1-next.2
+
+### Patch Changes
+
+- Updated dependencies [[`169c47f`](https://github.com/jsonnull/electron-trpc/commit/169c47f325de8899784187af06140c29758b0c0a)]:
+  - electron-trpc@0.2.0-next.7
+
+## 0.0.1-next.1
+
+### Patch Changes
+
+- Updated dependencies [[`a2103c4`](https://github.com/jsonnull/electron-trpc/commit/a2103c4e9789741aa98aa057fcebf78e4f339d9b)]:
+  - electron-trpc@0.2.0-next.6
+
+## 0.0.1-next.0
+
+### Patch Changes
+
+- Updated dependencies [[`333197f`](https://github.com/jsonnull/electron-trpc/commit/333197fb3e567aa37f350af992d123f8f8ed6796)]:
+  - electron-trpc@0.2.0-next.5

examples/basic-vanilla-esm/electron/api.mjs

@@ -0,0 +1,32 @@
+import z from 'zod';
+import { initTRPC } from '@trpc/server';
+import { observable } from '@trpc/server/observable';
+import { EventEmitter } from 'events';
+
+const ee = new EventEmitter();
+
+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;
+
+    ee.emit('greeting', `Greeted ${input.name}`);
+    return {
+      text: `Hello ${input.name}`,
+    };
+  }),
+  subscription: t.procedure.subscription(() => {
+    return observable((emit) => {
+      function onGreet(text) {
+        emit.next({ text });
+      }
+
+      ee.on('greeting', onGreet);
+
+      return () => {
+        ee.off('greeting', onGreet);
+      };
+    });
+  }),
+});

examples/basic-vanilla-esm/electron/index.mjs

@@ -0,0 +1,33 @@
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { app, BrowserWindow } from 'electron';
+import { createIPCHandler } from 'electron-trpc/main';
+import { router } from './api.mjs';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const html = path.join(dirname, '../dist/index.html');
+const preload = path.join(dirname, '../preload/preload.mjs');
+
+app.on('ready', () => {
+  const win = new BrowserWindow({
+    webPreferences: {
+      /*
+       * Disabling sandbox allows preload script to use ESM imports.
+       *
+       * It is recommended to instead use a bundler to bundle the preload script with its dependencies and leave the
+       * sandbox enabled.
+       *
+       * See https://www.electronjs.org/docs/latest/tutorial/esm
+       */
+      sandbox: false,
+      preload,
+    },
+  });
+
+  createIPCHandler({ router, windows: [win] });
+
+  win.loadFile(html);
+
+  win.show();
+});

examples/basic-vanilla-esm/index.e2e.js

@@ -0,0 +1,24 @@
+import { _electron as electron, test, expect } from '@playwright/test';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const dirname = path.dirname(fileURLToPath(import.meta.url));
+
+test('Hello Electron', async () => {
+  const electronApp = await electron.launch({
+    args: [dirname],
+    executablePath: process.env.PLAYWRIGHT_ELECTRON_PATH || undefined,
+    env: {
+      ...process.env,
+      NODE_ENV: 'development',
+    },
+  });
+
+  const window = await electronApp.firstWindow();
+  expect(await window.title()).toBe('Hello from Electron renderer!');
+
+  const response = await window.textContent('[data-testid="greeting"]');
+  expect(response).toBe('Hello Electron');
+
+  await electronApp.close();
+});

examples/basic-vanilla-esm/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
+    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
+    <meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'" />
+    <title>Hello from Electron renderer!</title>
+  </head>
+  <body></body>
+  <script type="module" src="./src/index.mjs"></script>
+</html>

examples/basic-vanilla-esm/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "examples/basic-vanilla-esm",
+  "type": "module",
+  "version": "0.0.16",
+  "private": true,
+  "main": "electron/index.mjs",
+  "license": "MIT",
+  "scripts": {
+    "start": "corepack pnpm build && electron .",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "@trpc/client": "10.33.1",
+    "@trpc/server": "10.33.1",
+    "electron": "29.3.2",
+    "electron-trpc": "0.6.1",
+    "vite": "^5.2.11",
+    "zod": "^3.21.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20.12.8"
+  }
+}

examples/basic-vanilla-esm/preload/preload.mjs

@@ -0,0 +1,3 @@
+import { exposeElectronTRPC } from 'electron-trpc/preload';
+
+exposeElectronTRPC();

examples/basic-vanilla-esm/src/index.mjs

@@ -0,0 +1,29 @@
+import { ipcLink } from 'electron-trpc/renderer';
+import { createTRPCProxyClient } from '@trpc/client';
+
+const trpc = createTRPCProxyClient({
+  links: [ipcLink()],
+});
+
+async function writeGreeting() {
+  const greeting = await trpc.greeting.query({ name: 'Electron' });
+
+  console.log('greeting', greeting);
+
+  const div = document.createElement('div');
+  div.innerText = greeting.text;
+  div.setAttribute('data-testid', 'greeting');
+
+  document.body.appendChild(div);
+}
+
+async function listenForSubscription() {
+  trpcReact.subscription.subscribe(undefined, {
+    onData: (data) => {
+      console.log(data);
+    },
+  });
+}
+
+writeGreeting();
+listenForSubscription();

examples/basic-vanilla-esm/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  mode: 'development',
+  base: './',
+});

package.json

@@ -2,8 +2,9 @@
   "license": "MIT",
   "scripts": {
     "build": "corepack pnpm -r build",
+    "build:code": "corepack pnpm --filter=!www build",
     "test": "corepack pnpm -r test",
-    "test:e2e": "playwright test",
+    "test:e2e": "DEBUG=pw:browser* playwright test",
     "test:ci": "corepack pnpm -r test:ci",
     "lint": "prettier --check .",
     "lint:fix": "prettier --write .",