From 294cefeb23c4668bdfcdbefcee1ee41b0d9dcb5a Mon Sep 17 00:00:00 2001 From: Aries Date: Tue, 23 Sep 2025 12:40:36 +0000 Subject: [PATCH 1/3] fix(worker-react): jsrpc -> capnweb --- examples/worker-react/README.md | 10 +++------- examples/worker-react/src/worker.ts | 3 +-- examples/worker-react/web/index.html | 2 +- examples/worker-react/web/package.json | 2 +- examples/worker-react/web/src/main/App.tsx | 2 +- examples/worker-react/web/tsconfig.json | 2 +- examples/worker-react/web/vite.config.ts | 6 +++--- 7 files changed, 11 insertions(+), 16 deletions(-) diff --git a/examples/worker-react/README.md b/examples/worker-react/README.md index 2e47f90..3a6c41d 100644 --- a/examples/worker-react/README.md +++ b/examples/worker-react/README.md @@ -1,6 +1,6 @@ Cloudflare Workers + React Example -This example shows a Cloudflare Worker exposing a JSRPC API and a React app calling it from the browser. It demonstrates batching + promise pipelining vs sequential requests, with timing and request counts. +This example shows a Cloudflare Worker exposing a Cap'n Web API and a React app calling it from the browser. It demonstrates batching + promise pipelining vs sequential requests, with timing and request counts. Prerequisites @@ -21,7 +21,7 @@ Run locally 1) Build the library at repo root (the example uses the local dist build): npm run build -2) Install and build the React app (Vite aliases `@cloudflare/jsrpc` to the local `dist`): +2) Install and build the React app (Vite aliases `capnweb` to the local `dist`): cd examples/worker-react/web npm install npm run build @@ -40,8 +40,4 @@ Tuning delays - `DELAY_PROFILE_MS` (default 120) - `DELAY_NOTIFS_MS` (default 120) - `SIMULATED_RTT_MS` per direction (default 120) - - `SIMULATED_RTT_JITTER_MS` per direction (default 40) - -Notes - -- The frontend imports `@cloudflare/jsrpc`. If trying this example before publish, you can `npm link` the built package into the `web` app or adjust imports to point at a local path. + - `SIMULATED_RTT_JITTER_MS` per direction (default 40) \ No newline at end of file diff --git a/examples/worker-react/src/worker.ts b/examples/worker-react/src/worker.ts index afee9ff..cd7e54a 100644 --- a/examples/worker-react/src/worker.ts +++ b/examples/worker-react/src/worker.ts @@ -1,5 +1,4 @@ -// Use local build output so this example runs without publishing to npm. -import { newWorkersRpcResponse, RpcTarget } from '../../../dist/index.js'; +import { newWorkersRpcResponse, RpcTarget } from 'capnweb'; type Env = { DELAY_AUTH_MS?: string; diff --git a/examples/worker-react/web/index.html b/examples/worker-react/web/index.html index 9212994..040235e 100644 --- a/examples/worker-react/web/index.html +++ b/examples/worker-react/web/index.html @@ -3,7 +3,7 @@ - JSRPC Workers + React Example + Cap'n Web Cloudflare Workers + React Example
diff --git a/examples/worker-react/web/package.json b/examples/worker-react/web/package.json index f3c877c..3a0e87c 100644 --- a/examples/worker-react/web/package.json +++ b/examples/worker-react/web/package.json @@ -1,5 +1,5 @@ { - "name": "jsrpc-react-web", + "name": "capnweb-react-web", "private": true, "version": "0.0.0", "type": "module", diff --git a/examples/worker-react/web/src/main/App.tsx b/examples/worker-react/web/src/main/App.tsx index 2f01a6a..cf9558b 100644 --- a/examples/worker-react/web/src/main/App.tsx +++ b/examples/worker-react/web/src/main/App.tsx @@ -1,5 +1,5 @@ import React, { useMemo, useState } from 'react' -import { newHttpBatchRpcSession } from '@cloudflare/jsrpc' +import { newHttpBatchRpcSession } from 'capnweb' type Result = { posts: number diff --git a/examples/worker-react/web/tsconfig.json b/examples/worker-react/web/tsconfig.json index d5ff6be..b0e0637 100644 --- a/examples/worker-react/web/tsconfig.json +++ b/examples/worker-react/web/tsconfig.json @@ -13,7 +13,7 @@ "strict": true, "baseUrl": ".", "paths": { - "@cloudflare/jsrpc": ["../../../dist/index.d.ts"] + "capnweb": ["../../../dist/index.d.ts"] } }, "include": ["src"] diff --git a/examples/worker-react/web/vite.config.ts b/examples/worker-react/web/vite.config.ts index 3db5126..a25b795 100644 --- a/examples/worker-react/web/vite.config.ts +++ b/examples/worker-react/web/vite.config.ts @@ -1,12 +1,12 @@ import { defineConfig } from 'vite' import path from 'node:path' -// Map '@cloudflare/jsrpc' to the repo's local dist build so we can run -// the example without publishing to npm. +// Map 'capnweb' to the repo's local dist build so +// we can run using the local build. export default defineConfig({ resolve: { alias: { - '@cloudflare/jsrpc': path.resolve(__dirname, '../../../dist/index.js'), + 'capnweb': path.resolve(__dirname, '../../../dist/index.js'), }, }, // Ensure modern output so top-level await is allowed (library uses it). From 549244854704d986acadeeac21d3d45225fd0938 Mon Sep 17 00:00:00 2001 From: Aries Date: Tue, 23 Sep 2025 12:45:18 +0000 Subject: [PATCH 2/3] fix(worker-react): import server type --- examples/worker-react/src/worker.ts | 2 +- examples/worker-react/web/src/main/App.tsx | 11 ++++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/examples/worker-react/src/worker.ts b/examples/worker-react/src/worker.ts index cd7e54a..9ec291e 100644 --- a/examples/worker-react/src/worker.ts +++ b/examples/worker-react/src/worker.ts @@ -26,7 +26,7 @@ const NOTIFICATIONS = new Map([ ['u_2', ['New feature: pipelining!', 'Security tips for your account']], ]); -class Api extends RpcTarget { +export class Api extends RpcTarget { constructor(private env: Env) { super(); } async authenticate(sessionToken: string) { diff --git a/examples/worker-react/web/src/main/App.tsx b/examples/worker-react/web/src/main/App.tsx index cf9558b..a035dcd 100644 --- a/examples/worker-react/web/src/main/App.tsx +++ b/examples/worker-react/web/src/main/App.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useState } from 'react' import { newHttpBatchRpcSession } from 'capnweb' +import type { Api } from "../../../src/worker" type Result = { posts: number @@ -55,7 +56,7 @@ export function App() { const t0 = performance.now() wrapFetch.setOrigin(t0) const calls: CallEvent[] = [] - const api = newHttpBatchRpcSession('/api') + const api = newHttpBatchRpcSession('/api') const userStart = 0; calls.push({ label: 'authenticate', start: userStart, end: NaN }) const user = api.authenticate('cookie-123') user.then(() => { calls.find(c => c.label==='authenticate')!.end = performance.now() - t0 }) @@ -83,19 +84,19 @@ export function App() { const t0 = performance.now() wrapFetch.setOrigin(t0) const calls: CallEvent[] = [] - const api1 = newHttpBatchRpcSession('/api') + const api1 = newHttpBatchRpcSession('/api') const aStart = 0; calls.push({ label: 'authenticate', start: aStart, end: NaN }) const uPromise = api1.authenticate('cookie-123') uPromise.then(() => { calls.find(c => c.label==='authenticate')!.end = performance.now() - t0 }) const u = await uPromise - const api2 = newHttpBatchRpcSession('/api') + const api2 = newHttpBatchRpcSession('/api') const pStart = performance.now() - t0; calls.push({ label: 'getUserProfile', start: pStart, end: NaN }) const pPromise = api2.getUserProfile(u.id) pPromise.then(() => { calls.find(c => c.label==='getUserProfile')!.end = performance.now() - t0 }) const p = await pPromise - const api3 = newHttpBatchRpcSession('/api') + const api3 = newHttpBatchRpcSession('/api') const nStart = performance.now() - t0; calls.push({ label: 'getNotifications', start: nStart, end: NaN }) const nPromise = api3.getNotifications(u.id) nPromise.then(() => { calls.find(c => c.label==='getNotifications')!.end = performance.now() - t0 }) @@ -126,7 +127,7 @@ export function App() { return (
-

JSRPC: Workers + React

+

Cap'n Web: Cloudflare Workers + React

Network RTT is simulated on the server (configurable via SIMULATED_RTT_MS/SIMULATED_RTT_JITTER_MS in wrangler.toml).

This demo calls the Worker API in two ways:

    From d759d19ec65c2023362c9699dcdaf90ef74ddd10 Mon Sep 17 00:00:00 2001 From: Aries Date: Tue, 23 Sep 2025 12:48:39 +0000 Subject: [PATCH 3/3] fix: last remnants of jsrpc --- examples/batch-pipelining/server-node.mjs | 2 +- examples/worker-react/src/worker.ts | 2 +- examples/worker-react/web/package-lock.json | 4 ++-- examples/worker-react/wrangler.toml | 2 +- 4 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/batch-pipelining/server-node.mjs b/examples/batch-pipelining/server-node.mjs index 10ab4e6..1e9857e 100644 --- a/examples/batch-pipelining/server-node.mjs +++ b/examples/batch-pipelining/server-node.mjs @@ -23,7 +23,7 @@ const PROFILES = new Map([ ]); const NOTIFICATIONS = new Map([ - ['u_1', ['Welcome to jsrpc!', 'You have 2 new followers']], + ['u_1', ['Welcome to Cap\'n Web!', 'You have 2 new followers']], ['u_2', ['New feature: pipelining!', 'Security tips for your account']], ]); diff --git a/examples/worker-react/src/worker.ts b/examples/worker-react/src/worker.ts index 9ec291e..7e89ab1 100644 --- a/examples/worker-react/src/worker.ts +++ b/examples/worker-react/src/worker.ts @@ -22,7 +22,7 @@ const PROFILES = new Map([ ]); const NOTIFICATIONS = new Map([ - ['u_1', ['Welcome to jsrpc!', 'You have 2 new followers']], + ['u_1', ['Welcome to Cap\'n Web!', 'You have 2 new followers']], ['u_2', ['New feature: pipelining!', 'Security tips for your account']], ]); diff --git a/examples/worker-react/web/package-lock.json b/examples/worker-react/web/package-lock.json index ea06ca5..e5144df 100644 --- a/examples/worker-react/web/package-lock.json +++ b/examples/worker-react/web/package-lock.json @@ -1,11 +1,11 @@ { - "name": "jsrpc-react-web", + "name": "capnweb-react-web", "version": "0.0.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "jsrpc-react-web", + "name": "capnweb-react-web", "version": "0.0.0", "dependencies": { "react": "^18.3.1", diff --git a/examples/worker-react/wrangler.toml b/examples/worker-react/wrangler.toml index 5afeb20..52b557b 100644 --- a/examples/worker-react/wrangler.toml +++ b/examples/worker-react/wrangler.toml @@ -1,4 +1,4 @@ -name = "jsrpc-react-example" +name = "capnweb-react-example" main = "src/worker.ts" compatibility_date = "2024-09-01"