-16

package-lock.json

··· 22 22 "react": "19.2.3", 23 23 "react-dom": "19.2.3", 24 24 "react-server-dom-webpack": "19.2.3", 25 25 - "text-encoding": "^0.7.0", 26 25 "web-streams-polyfill": "^4.2.0" 27 26 }, 28 27 "devDependencies": { ··· 33 32 "@types/node": "^25.0.2", 34 33 "@types/react": "^19.2.7", 35 34 "@types/react-dom": "^19.2.3", 36 36 - "@types/text-encoding": "^0.0.40", 37 35 "@vitejs/plugin-react": "^5.1.2", 38 36 "@vitest/browser": "^4.0.15", 39 37 "@vitest/browser-playwright": "^4.0.15", ··· 1876 1874 "peerDependencies": { 1877 1875 "@types/react": "^19.2.0" 1878 1876 } 1879 1879 - }, 1880 1880 - "node_modules/@types/text-encoding": { 1881 1881 - "version": "0.0.40", 1882 1882 - "resolved": "https://registry.npmjs.org/@types/text-encoding/-/text-encoding-0.0.40.tgz", 1883 1883 - "integrity": "sha512-dHzoIdwBfY7jcSTTt6XBkaeiuFQAQD7r/7aJySKDdHkYBCDOvs9jPVt4NYXuwBMn89PP6gSd29WubIS19wTiXg==", 1884 1884 - "dev": true, 1885 1885 - "license": "MIT" 1886 1877 }, 1887 1878 "node_modules/@typescript-eslint/eslint-plugin": { 1888 1879 "version": "8.50.0", ··· 5924 5915 "optional": true 5925 5916 } 5926 5917 } 5927 5927 - }, 5928 5928 - "node_modules/text-encoding": { 5929 5929 - "version": "0.7.0", 5930 5930 - "resolved": "https://registry.npmjs.org/text-encoding/-/text-encoding-0.7.0.tgz", 5931 5931 - "integrity": "sha512-oJQ3f1hrOnbRLOcwKz0Liq2IcrvDeZRHXhd9RgLrsT+DjWY/nty1Hi7v3dtkaEYbPYe0mUoOfzRrMwfXXwgPUA==", 5932 5932 - "deprecated": "no longer maintained", 5933 5933 - "license": "(Unlicense OR Apache-2.0)" 5934 5918 }, 5935 5919 "node_modules/through": { 5936 5920 "version": "2.3.8",

-2

package.json

··· 35 35 "react": "19.2.3", 36 36 "react-dom": "19.2.3", 37 37 "react-server-dom-webpack": "19.2.3", 38 38 - "text-encoding": "^0.7.0", 39 38 "web-streams-polyfill": "^4.2.0" 40 39 }, 41 40 "overrides": { ··· 49 48 "@types/node": "^25.0.2", 50 49 "@types/react": "^19.2.7", 51 50 "@types/react-dom": "^19.2.3", 52 52 - "@types/text-encoding": "^0.0.40", 53 51 "@vitejs/plugin-react": "^5.1.2", 54 52 "@vitest/browser": "^4.0.15", 55 53 "@vitest/browser-playwright": "^4.0.15",

-16

src/client/byte-stream-polyfill.ts

··· 1 1 - // Safari doesn't implement ReadableByteStreamController. 2 2 - // The standard web-streams-polyfill only polyfills ReadableStream, not byte streams. 3 3 - // This adds the missing byte stream support. 4 4 - 5 5 - import { 6 6 - ReadableStream as PolyfillReadableStream, 7 7 - ReadableByteStreamController as PolyfillReadableByteStreamController, 8 8 - } from "web-streams-polyfill"; 9 9 - 10 10 - if (typeof globalThis.ReadableByteStreamController === "undefined") { 11 11 - // Safari doesn't have byte stream support - use the polyfill's ReadableStream 12 12 - // which includes full byte stream support 13 13 - globalThis.ReadableStream = PolyfillReadableStream as typeof ReadableStream; 14 14 - // @ts-expect-error: ReadableByteStreamController polyfill assignment 15 15 - globalThis.ReadableByteStreamController = PolyfillReadableByteStreamController; 16 16 - }

+2 -6

src/client/embed.tsx

··· 1 1 - // Must be first - shims webpack globals for react-server-dom-webpack 2 2 - import "./webpack-shim.ts"; 3 3 - 4 4 - import "./byte-stream-polyfill.ts"; 5 5 - import "web-streams-polyfill/polyfill"; 6 6 - import "text-encoding"; 1 1 + import "../shared/webpack-shim.ts"; 2 2 + import "../shared/polyfill.ts"; 7 3 8 4 import React, { useState, useEffect } from "react"; 9 5 import { createRoot } from "react-dom/client";

+2 -6

src/client/index.tsx

··· 1 1 - // Must be first - shims webpack globals for react-server-dom-webpack 2 2 - import "./webpack-shim.ts"; 3 3 - 4 4 - import "./byte-stream-polyfill.ts"; 5 5 - import "web-streams-polyfill/polyfill"; 6 6 - import "text-encoding"; 1 1 + import "../shared/webpack-shim.ts"; 2 2 + import "../shared/polyfill.ts"; 7 3 8 4 import { createRoot } from "react-dom/client"; 9 5 import { App } from "./ui/App.tsx";

-272

src/client/server-worker.ts

··· 1 1 - import workerUrl from "../server/worker.ts?rolldown-worker"; 2 2 - import type { ClientManifest } from "../shared/compiler.ts"; 3 3 - 4 4 - const randomUUID: () => string = 5 5 - crypto.randomUUID?.bind(crypto) ?? 6 6 - function (): string { 7 7 - const bytes = crypto.getRandomValues(new Uint8Array(16)); 8 8 - bytes[6] = (bytes[6]! & 0x0f) | 0x40; // version 4 9 9 - bytes[8] = (bytes[8]! & 0x3f) | 0x80; // variant 1 10 10 - const hex = [...bytes].map((b) => b.toString(16).padStart(2, "0")); 11 11 - return `${hex.slice(0, 4).join("")}-${hex.slice(4, 6).join("")}-${hex.slice(6, 8).join("")}-${hex.slice(8, 10).join("")}-${hex.slice(10).join("")}`; 12 12 - }; 13 13 - 14 14 - type EncodedArgsFormData = { 15 15 - type: "formdata"; 16 16 - data: string; 17 17 - }; 18 18 - 19 19 - type EncodedArgsString = { 20 20 - type: "string"; 21 21 - data: string; 22 22 - }; 23 23 - 24 24 - type EncodedArgsTransfer = EncodedArgsFormData | EncodedArgsString; 25 25 - 26 26 - function serializeForTransfer(encoded: FormData | string): EncodedArgsTransfer { 27 27 - if (encoded instanceof FormData) { 28 28 - return { 29 29 - type: "formdata", 30 30 - data: new URLSearchParams(encoded as unknown as Record<string, string>).toString(), 31 31 - }; 32 32 - } 33 33 - return { type: "string", data: encoded }; 34 34 - } 35 35 - 36 36 - type WorkerReadyMessage = { 37 37 - type: "ready"; 38 38 - }; 39 39 - 40 40 - type WorkerStreamStartMessage = { 41 41 - type: "stream-start"; 42 42 - requestId: string; 43 43 - }; 44 44 - 45 45 - type WorkerStreamChunkMessage = { 46 46 - type: "stream-chunk"; 47 47 - requestId: string; 48 48 - chunk: Uint8Array; 49 49 - }; 50 50 - 51 51 - type WorkerStreamEndMessage = { 52 52 - type: "stream-end"; 53 53 - requestId: string; 54 54 - }; 55 55 - 56 56 - type WorkerStreamErrorMessage = { 57 57 - type: "stream-error"; 58 58 - requestId: string; 59 59 - error: { message: string }; 60 60 - }; 61 61 - 62 62 - type WorkerDeployedMessage = { 63 63 - type: "deployed"; 64 64 - requestId: string; 65 65 - }; 66 66 - 67 67 - type WorkerErrorMessage = { 68 68 - type: "error"; 69 69 - requestId: string; 70 70 - error: { message: string; stack?: string }; 71 71 - }; 72 72 - 73 73 - type WorkerMessage = 74 74 - | WorkerReadyMessage 75 75 - | WorkerStreamStartMessage 76 76 - | WorkerStreamChunkMessage 77 77 - | WorkerStreamEndMessage 78 78 - | WorkerStreamErrorMessage 79 79 - | WorkerDeployedMessage 80 80 - | WorkerErrorMessage; 81 81 - 82 82 - type PendingRequest = { 83 83 - resolve: (value: unknown) => void; 84 84 - reject: (error: Error) => void; 85 85 - }; 86 86 - 87 87 - export class ServerWorker { 88 88 - private worker: Worker; 89 89 - private pending: Map<string, PendingRequest> = new Map(); 90 90 - private streams: Map<string, ReadableStreamDefaultController<Uint8Array>> = new Map(); 91 91 - private readyPromise: Promise<void>; 92 92 - private readyResolve!: () => void; 93 93 - 94 94 - constructor() { 95 95 - this.worker = new Worker(workerUrl); 96 96 - this.readyPromise = new Promise((resolve) => { 97 97 - this.readyResolve = resolve; 98 98 - }); 99 99 - 100 100 - this.worker.onmessage = this.handleMessage.bind(this); 101 101 - this.worker.onerror = this.handleError.bind(this); 102 102 - } 103 103 - 104 104 - private handleMessage(event: MessageEvent<WorkerMessage>): void { 105 105 - const { type } = event.data; 106 106 - 107 107 - if (type === "ready") { 108 108 - this.readyResolve(); 109 109 - return; 110 110 - } 111 111 - 112 112 - if (type === "stream-start") { 113 113 - const { requestId } = event.data; 114 114 - const pending = this.pending.get(requestId); 115 115 - if (!pending) return; 116 116 - this.pending.delete(requestId); 117 117 - 118 118 - let controller: ReadableStreamDefaultController<Uint8Array>; 119 119 - const stream = new ReadableStream<Uint8Array>({ 120 120 - start: (c) => { 121 121 - controller = c; 122 122 - }, 123 123 - }); 124 124 - this.streams.set(requestId, controller!); 125 125 - pending.resolve(stream); 126 126 - return; 127 127 - } 128 128 - 129 129 - if (type === "stream-chunk") { 130 130 - const { requestId, chunk } = event.data; 131 131 - const controller = this.streams.get(requestId); 132 132 - if (controller) controller.enqueue(chunk); 133 133 - return; 134 134 - } 135 135 - 136 136 - if (type === "stream-end") { 137 137 - const { requestId } = event.data; 138 138 - const controller = this.streams.get(requestId); 139 139 - if (controller) { 140 140 - controller.close(); 141 141 - this.streams.delete(requestId); 142 142 - } 143 143 - return; 144 144 - } 145 145 - 146 146 - if (type === "stream-error") { 147 147 - const { requestId, error } = event.data; 148 148 - const controller = this.streams.get(requestId); 149 149 - if (controller) { 150 150 - controller.error(new Error(error.message)); 151 151 - this.streams.delete(requestId); 152 152 - } 153 153 - return; 154 154 - } 155 155 - 156 156 - if (type === "deployed") { 157 157 - const { requestId } = event.data as WorkerDeployedMessage; 158 158 - const pending = this.pending.get(requestId); 159 159 - if (!pending) { 160 160 - console.warn(`No pending request for ${requestId}`); 161 161 - return; 162 162 - } 163 163 - this.pending.delete(requestId); 164 164 - pending.resolve(undefined); 165 165 - return; 166 166 - } 167 167 - 168 168 - if (type === "error") { 169 169 - const { requestId, error } = event.data as WorkerErrorMessage; 170 170 - const pending = this.pending.get(requestId); 171 171 - if (!pending) { 172 172 - console.warn(`No pending request for ${requestId}`); 173 173 - return; 174 174 - } 175 175 - this.pending.delete(requestId); 176 176 - const err = new Error(error.message); 177 177 - if (error.stack) { 178 178 - err.stack = error.stack; 179 179 - } 180 180 - pending.reject(err); 181 181 - } 182 182 - } 183 183 - 184 184 - private handleError(event: ErrorEvent): void { 185 185 - const errorMsg = event.message || "Unknown worker error"; 186 186 - console.error(`Worker error: ${errorMsg}`); 187 187 - 188 188 - for (const [, pending] of this.pending) { 189 189 - pending.reject(new Error(`Worker error: ${errorMsg}`)); 190 190 - } 191 191 - this.pending.clear(); 192 192 - } 193 193 - 194 194 - async deploy({ 195 195 - compiledCode, 196 196 - manifest, 197 197 - actionNames, 198 198 - }: { 199 199 - compiledCode: string; 200 200 - manifest: ClientManifest; 201 201 - actionNames: string[]; 202 202 - }): Promise<void> { 203 203 - await this.readyPromise; 204 204 - const requestId = randomUUID(); 205 205 - 206 206 - return new Promise((resolve, reject) => { 207 207 - this.pending.set(requestId, { resolve: resolve as (value: unknown) => void, reject }); 208 208 - this.worker.postMessage({ 209 209 - type: "deploy", 210 210 - requestId, 211 211 - compiledCode, 212 212 - manifest, 213 213 - actionNames, 214 214 - }); 215 215 - }); 216 216 - } 217 217 - 218 218 - async render(): Promise<ReadableStream<Uint8Array>> { 219 219 - await this.readyPromise; 220 220 - const requestId = randomUUID(); 221 221 - 222 222 - return new Promise((resolve, reject) => { 223 223 - this.pending.set(requestId, { resolve: resolve as (value: unknown) => void, reject }); 224 224 - this.worker.postMessage({ type: "render", requestId }); 225 225 - }); 226 226 - } 227 227 - 228 228 - async callAction( 229 229 - actionId: string, 230 230 - encodedArgs: FormData | string, 231 231 - ): Promise<ReadableStream<Uint8Array>> { 232 232 - await this.readyPromise; 233 233 - const requestId = randomUUID(); 234 234 - 235 235 - return new Promise((resolve, reject) => { 236 236 - this.pending.set(requestId, { resolve: resolve as (value: unknown) => void, reject }); 237 237 - this.worker.postMessage({ 238 238 - type: "action", 239 239 - requestId, 240 240 - actionId, 241 241 - encodedArgs: serializeForTransfer(encodedArgs), 242 242 - }); 243 243 - }); 244 244 - } 245 245 - 246 246 - async callActionRaw(actionId: string, rawPayload: string): Promise<ReadableStream<Uint8Array>> { 247 247 - await this.readyPromise; 248 248 - const requestId = randomUUID(); 249 249 - 250 250 - return new Promise((resolve, reject) => { 251 251 - this.pending.set(requestId, { resolve: resolve as (value: unknown) => void, reject }); 252 252 - this.worker.postMessage({ 253 253 - type: "action", 254 254 - requestId, 255 255 - actionId, 256 256 - encodedArgs: { type: "formdata", data: rawPayload }, 257 257 - }); 258 258 - }); 259 259 - } 260 260 - 261 261 - terminate(): void { 262 262 - this.worker.terminate(); 263 263 - for (const [, pending] of this.pending) { 264 264 - pending.reject(new Error("Worker terminated")); 265 265 - } 266 266 - this.pending.clear(); 267 267 - for (const [, controller] of this.streams) { 268 268 - controller.error(new Error("Worker terminated")); 269 269 - } 270 270 - this.streams.clear(); 271 271 - } 272 272 - }

+21 -14

src/client/ui/Workspace.tsx

··· 7 7 evaluateClientModule, 8 8 type CallServerCallback, 9 9 } from "../runtime/index.ts"; 10 10 - import { ServerWorker } from "../server-worker.ts"; 10 10 + import { WorkerClient, encodeArgs } from "../worker-client.ts"; 11 11 import { 12 12 parseClientModule, 13 13 parseServerActions, ··· 35 35 }: WorkspaceProps): React.ReactElement { 36 36 const [serverCode, setServerCode] = useState(initialServerCode); 37 37 const [clientCode, setClientCode] = useState(initialClientCode); 38 38 - const [serverWorker] = useState(() => new ServerWorker()); 39 38 const [timeline] = useState(() => new Timeline()); 39 39 + const [workerClient, setWorkerClient] = useState<WorkerClient | null>(null); 40 40 const [callServerRef] = useState<CallServerRef>({ current: null }); 41 41 42 42 const snapshot = useSyncExternalStore(timeline.subscribe, timeline.getSnapshot); ··· 67 67 68 68 const handleAddRawAction = useCallback( 69 69 async (actionName: string, rawPayload: string) => { 70 70 + if (!workerClient) throw new Error("Worker not initialized"); 70 71 try { 71 71 - const responseRaw = await serverWorker.callActionRaw(actionName, rawPayload); 72 72 + const responseRaw = await workerClient.callAction(actionName, { 73 73 + type: "formdata", 74 74 + data: rawPayload, 75 75 + }); 72 76 const streamOptions = callServerRef.current ? { callServer: callServerRef.current } : {}; 73 77 const stream = new SteppableStream(responseRaw, streamOptions); 74 78 await stream.waitForBuffer(); ··· 77 81 console.error("[raw action] Failed:", err); 78 82 } 79 83 }, 80 80 - [serverWorker, timeline, callServerRef], 84 84 + [workerClient, timeline, callServerRef], 81 85 ); 82 86 83 87 const compile = useCallback( 84 88 async (sCode: string, cCode: string) => { 89 89 + if (!workerClient) throw new Error("Worker not initialized"); 85 90 try { 86 91 setError(null); 87 92 timeline.clear(); ··· 96 101 const compiledServer = compileToCommonJS(sCode); 97 102 setAvailableActions(actionNames); 98 103 99 99 - await serverWorker.deploy({ 100 100 - compiledCode: compiledServer, 101 101 - manifest, 102 102 - actionNames, 103 103 - }); 104 104 + await workerClient.deploy(compiledServer, manifest, actionNames); 104 105 105 106 const callServer: CallServerCallback | null = 106 107 actionNames.length > 0 ··· 114 115 encodedArgs as unknown as Record<string, string>, 115 116 ).toString(); 116 117 117 117 - const responseRaw = await serverWorker.callAction(actionName, encodedArgs); 118 118 + const responseRaw = await workerClient.callAction( 119 119 + actionName, 120 120 + encodeArgs(encodedArgs), 121 121 + ); 118 122 const stream = new SteppableStream(responseRaw, { 119 123 callServer: callServer as CallServerCallback, 120 124 }); ··· 126 130 127 131 callServerRef.current = callServer; 128 132 129 129 - const renderRaw = await serverWorker.render(); 133 133 + const renderRaw = await workerClient.render(); 130 134 const renderStreamOptions = callServer ? { callServer } : {}; 131 135 const renderStream = new SteppableStream(renderRaw, renderStreamOptions); 132 136 await renderStream.waitForBuffer(); ··· 140 144 setClientModuleReady(false); 141 145 } 142 146 }, 143 143 - [timeline, serverWorker, callServerRef], 147 147 + [timeline, workerClient, callServerRef], 144 148 ); 145 149 146 150 const handleReset = useCallback(() => { ··· 157 161 }, [serverCode, clientCode, compile]); 158 162 159 163 useEffect(() => { 160 160 - return () => serverWorker.terminate(); 161 161 - }, [serverWorker]); 164 164 + const client = new WorkerClient(); 165 165 + // eslint-disable-next-line react-hooks/set-state-in-effect 166 166 + setWorkerClient(client); 167 167 + return () => client.terminate(); 168 168 + }, []); 162 169 163 170 return ( 164 171 <main>

-76

src/client/webpack-shim.ts

··· 1 1 - // Shim webpack globals for react-server-dom-webpack/client in browser context 2 2 - 3 3 - type ModuleFactory = { 4 4 - (module: { exports: unknown }): void; 5 5 - }; 6 6 - 7 7 - type WebpackRequire = { 8 8 - (moduleId: string): unknown; 9 9 - m: Record<string, ModuleFactory>; 10 10 - c: Record<string, { exports: unknown } | unknown>; 11 11 - d: (exports: object, definition: Record<string, () => unknown>) => void; 12 12 - r: (exports: object) => void; 13 13 - o: (obj: object, prop: string) => boolean; 14 14 - e: (chunkId: string) => Promise<void>; 15 15 - p: string; 16 16 - }; 17 17 - 18 18 - const clientModuleCache: Record<string, { exports: unknown }> = {}; 19 19 - const clientModuleFactories: Record<string, ModuleFactory> = {}; 20 20 - 21 21 - window.__webpack_module_cache__ = clientModuleCache; 22 22 - window.__webpack_modules__ = clientModuleFactories; 23 23 - 24 24 - const clientWebpackRequire: WebpackRequire = function (moduleId: string): unknown { 25 25 - const cached = clientModuleCache[moduleId]; 26 26 - if (cached) { 27 27 - return cached.exports ?? cached; 28 28 - } 29 29 - const factory = clientModuleFactories[moduleId]; 30 30 - if (factory) { 31 31 - const module: { exports: unknown } = { exports: {} }; 32 32 - factory(module); 33 33 - clientModuleCache[moduleId] = module; 34 34 - return module.exports; 35 35 - } 36 36 - throw new Error(`Module ${moduleId} not found in webpack shim`); 37 37 - } as WebpackRequire; 38 38 - 39 39 - clientWebpackRequire.m = clientModuleFactories; 40 40 - clientWebpackRequire.c = clientModuleCache; 41 41 - clientWebpackRequire.d = function ( 42 42 - exports: object, 43 43 - definition: Record<string, () => unknown>, 44 44 - ): void { 45 45 - for (const key in definition) { 46 46 - const getter = definition[key]; 47 47 - if ( 48 48 - getter && 49 49 - Object.prototype.hasOwnProperty.call(definition, key) && 50 50 - !Object.prototype.hasOwnProperty.call(exports, key) 51 51 - ) { 52 52 - Object.defineProperty(exports, key, { enumerable: true, get: getter }); 53 53 - } 54 54 - } 55 55 - }; 56 56 - clientWebpackRequire.r = function (exports: object): void { 57 57 - if (typeof Symbol !== "undefined" && Symbol.toStringTag) { 58 58 - Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); 59 59 - } 60 60 - Object.defineProperty(exports, "__esModule", { value: true }); 61 61 - }; 62 62 - clientWebpackRequire.o = function (obj: object, prop: string): boolean { 63 63 - return Object.prototype.hasOwnProperty.call(obj, prop); 64 64 - }; 65 65 - clientWebpackRequire.e = function (_chunkId: string): Promise<void> { 66 66 - return Promise.resolve(); 67 67 - }; 68 68 - clientWebpackRequire.p = "/"; 69 69 - 70 70 - window.__webpack_require__ = clientWebpackRequire; 71 71 - 72 72 - window.__webpack_chunk_load__ = function (_chunkId: string): Promise<void> { 73 73 - return Promise.resolve(); 74 74 - }; 75 75 - 76 76 - export {};

+109

src/client/worker-client.ts

··· 1 1 + import workerUrl from "../server/worker-server.ts?rolldown-worker"; 2 2 + import type { Response, EncodedArgs, Deploy, Render, CallAction } from "../server/worker-server.ts"; 3 3 + import type { ClientManifest } from "../shared/compiler.ts"; 4 4 + 5 5 + export type { EncodedArgs, ClientManifest }; 6 6 + 7 7 + export function encodeArgs(encoded: FormData | string): EncodedArgs { 8 8 + if (encoded instanceof FormData) { 9 9 + return { 10 10 + type: "formdata", 11 11 + data: new URLSearchParams(encoded as unknown as Record<string, string>).toString(), 12 12 + }; 13 13 + } 14 14 + return { type: "string", data: encoded }; 15 15 + } 16 16 + 17 17 + export class WorkerClient { 18 18 + private worker: Worker; 19 19 + private requests = new Map<string, ReadableStreamDefaultController<Uint8Array>>(); 20 20 + private readyPromise: Promise<void>; 21 21 + private readyResolve!: () => void; 22 22 + 23 23 + constructor() { 24 24 + this.worker = new Worker(workerUrl); 25 25 + this.readyPromise = new Promise((resolve) => { 26 26 + this.readyResolve = resolve; 27 27 + }); 28 28 + this.worker.onmessage = this.handleMessage.bind(this); 29 29 + this.worker.onerror = (e) => { 30 30 + const err = new Error(e.message || "Worker error"); 31 31 + for (const controller of this.requests.values()) { 32 32 + controller.error(err); 33 33 + } 34 34 + this.requests.clear(); 35 35 + }; 36 36 + } 37 37 + 38 38 + private handleMessage(event: MessageEvent<Response>): void { 39 39 + const msg = event.data; 40 40 + 41 41 + if (msg.type === "ready") { 42 42 + this.readyResolve(); 43 43 + return; 44 44 + } 45 45 + 46 46 + const controller = this.requests.get(msg.requestId); 47 47 + if (!controller) throw new Error(`Unknown request: ${msg.requestId}`); 48 48 + 49 49 + switch (msg.type) { 50 50 + case "next": 51 51 + controller.enqueue(msg.value); 52 52 + break; 53 53 + 54 54 + case "done": 55 55 + controller.close(); 56 56 + this.requests.delete(msg.requestId); 57 57 + break; 58 58 + 59 59 + case "throw": { 60 60 + const err = new Error(msg.error); 61 61 + if (msg.stack) { 62 62 + err.stack = msg.stack; 63 63 + } 64 64 + controller.error(err); 65 65 + this.requests.delete(msg.requestId); 66 66 + break; 67 67 + } 68 68 + } 69 69 + } 70 70 + 71 71 + private nextRequestId = 0; 72 72 + 73 73 + private request(body: Record<string, unknown>): ReadableStream<Uint8Array> { 74 74 + const requestId = String(this.nextRequestId++); 75 75 + let controller!: ReadableStreamDefaultController<Uint8Array>; 76 76 + const stream = new ReadableStream<Uint8Array>({ 77 77 + start: (c) => { 78 78 + controller = c; 79 79 + }, 80 80 + }); 81 81 + this.requests.set(requestId, controller); 82 82 + this.worker.postMessage({ ...body, requestId }); 83 83 + return stream; 84 84 + } 85 85 + 86 86 + terminate(): void { 87 87 + this.worker.terminate(); 88 88 + const err = new Error("Worker terminated"); 89 89 + for (const controller of this.requests.values()) { 90 90 + controller.error(err); 91 91 + } 92 92 + this.requests.clear(); 93 93 + } 94 94 + 95 95 + async deploy(...args: Parameters<Deploy>): Promise<ReturnType<Deploy>> { 96 96 + await this.readyPromise; 97 97 + return this.request({ method: "deploy", args }); 98 98 + } 99 99 + 100 100 + async render(...args: Parameters<Render>): Promise<ReturnType<Render>> { 101 101 + await this.readyPromise; 102 102 + return this.request({ method: "render", args }); 103 103 + } 104 104 + 105 105 + async callAction(...args: Parameters<CallAction>): ReturnType<CallAction> { 106 106 + await this.readyPromise; 107 107 + return this.request({ method: "action", args }); 108 108 + } 109 109 + }

-68

src/server/webpack-shim.ts

··· 1 1 - // Shim webpack globals for react-server-dom-webpack/server in worker context 2 2 - // Uses self instead of window since this runs in a Web Worker 3 3 - 4 4 - type WebpackRequire = { 5 5 - (moduleId: string): unknown; 6 6 - m: Record<string, (module: { exports: unknown }) => void>; 7 7 - c: Record<string, unknown>; 8 8 - d: (exports: object, definition: Record<string, () => unknown>) => void; 9 9 - r: (exports: object) => void; 10 10 - o: (obj: object, prop: string) => boolean; 11 11 - e: (chunkId: string) => Promise<void>; 12 12 - p: string; 13 13 - }; 14 14 - 15 15 - type WorkerSelf = DedicatedWorkerGlobalScope & { 16 16 - __webpack_require__: WebpackRequire; 17 17 - __webpack_chunk_load__: (chunkId: string) => Promise<void>; 18 18 - }; 19 19 - 20 20 - const workerSelf = self as unknown as WorkerSelf; 21 21 - 22 22 - const moduleCache: Record<string, unknown> = {}; 23 23 - 24 24 - const webpackRequire: WebpackRequire = function (moduleId: string): unknown { 25 25 - if (moduleCache[moduleId]) { 26 26 - return moduleCache[moduleId]; 27 27 - } 28 28 - throw new Error(`Module ${moduleId} not found in webpack shim`); 29 29 - } as WebpackRequire; 30 30 - 31 31 - webpackRequire.m = {}; 32 32 - webpackRequire.c = moduleCache; 33 33 - webpackRequire.d = function (exports: object, definition: Record<string, () => unknown>): void { 34 34 - for (const key in definition) { 35 35 - const getter = definition[key]; 36 36 - if ( 37 37 - getter && 38 38 - Object.prototype.hasOwnProperty.call(definition, key) && 39 39 - !Object.prototype.hasOwnProperty.call(exports, key) 40 40 - ) { 41 41 - Object.defineProperty(exports, key, { 42 42 - enumerable: true, 43 43 - get: getter, 44 44 - }); 45 45 - } 46 46 - } 47 47 - }; 48 48 - webpackRequire.r = function (exports: object): void { 49 49 - if (typeof Symbol !== "undefined" && Symbol.toStringTag) { 50 50 - Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" }); 51 51 - } 52 52 - Object.defineProperty(exports, "__esModule", { value: true }); 53 53 - }; 54 54 - webpackRequire.o = function (obj: object, prop: string): boolean { 55 55 - return Object.prototype.hasOwnProperty.call(obj, prop); 56 56 - }; 57 57 - webpackRequire.e = function (_chunkId: string): Promise<void> { 58 58 - return Promise.resolve(); 59 59 - }; 60 60 - webpackRequire.p = "/"; 61 61 - 62 62 - workerSelf.__webpack_require__ = webpackRequire; 63 63 - 64 64 - workerSelf.__webpack_chunk_load__ = function (_chunkId: string): Promise<void> { 65 65 - return Promise.resolve(); 66 66 - }; 67 67 - 68 68 - export {};

+168

src/server/worker-server.ts

··· 1 1 + // Server Worker - RSC server simulation 2 2 + 3 3 + import "../shared/webpack-shim.ts"; 4 4 + import "../shared/polyfill.ts"; 5 5 + 6 6 + import { 7 7 + renderToReadableStream, 8 8 + registerServerReference, 9 9 + createClientModuleProxy, 10 10 + decodeReply, 11 11 + } from "react-server-dom-webpack/server"; 12 12 + import React from "react"; 13 13 + import type { ClientManifest } from "../shared/compiler.ts"; 14 14 + 15 15 + declare const self: DedicatedWorkerGlobalScope; 16 16 + 17 17 + // --- Types --- 18 18 + 19 19 + export type EncodedArgs = { 20 20 + type: "formdata" | "string"; 21 21 + data: string; 22 22 + }; 23 23 + 24 24 + export type Response = 25 25 + | { type: "ready" } 26 26 + | { type: "next"; requestId: string; value: Uint8Array } 27 27 + | { type: "done"; requestId: string } 28 28 + | { type: "throw"; requestId: string; error: string; stack?: string }; 29 29 + 30 30 + // --- State --- 31 31 + 32 32 + type ServerModule = { 33 33 + default?: React.ComponentType | React.ReactNode; 34 34 + [key: string]: unknown; 35 35 + }; 36 36 + 37 37 + let deployed: { manifest: ClientManifest; module: ServerModule } | null = null; 38 38 + 39 39 + // --- Response helpers --- 40 40 + 41 41 + async function sendStream( 42 42 + requestId: string, 43 43 + getStream: () => ReadableStream<Uint8Array> | Promise<ReadableStream<Uint8Array>>, 44 44 + ): Promise<void> { 45 45 + try { 46 46 + const stream = await getStream(); 47 47 + const reader = stream.getReader(); 48 48 + while (true) { 49 49 + const { done, value } = await reader.read(); 50 50 + if (done) break; 51 51 + self.postMessage({ type: "next", requestId, value }); 52 52 + } 53 53 + self.postMessage({ type: "done", requestId }); 54 54 + } catch (err) { 55 55 + const error = err instanceof Error ? err : new Error(String(err)); 56 56 + const msg: Response = { type: "throw", requestId, error: error.message }; 57 57 + if (error.stack) { 58 58 + msg.stack = error.stack; 59 59 + } 60 60 + self.postMessage(msg); 61 61 + } 62 62 + } 63 63 + 64 64 + // --- RPC handlers --- 65 65 + 66 66 + function deploy( 67 67 + compiledCode: string, 68 68 + manifest: ClientManifest, 69 69 + actionNames: string[], 70 70 + ): ReadableStream<Uint8Array> { 71 71 + const clientModule = createClientModuleProxy("client"); 72 72 + const modules: Record<string, unknown> = { 73 73 + react: React, 74 74 + "./client": clientModule, 75 75 + }; 76 76 + 77 77 + let code = compiledCode; 78 78 + if (actionNames.length > 0) { 79 79 + code += 80 80 + "\n" + 81 81 + actionNames 82 82 + .map( 83 83 + (name) => 84 84 + `__registerServerReference(${name}, "${name}", "${name}"); exports.${name} = ${name};`, 85 85 + ) 86 86 + .join("\n"); 87 87 + } 88 88 + 89 89 + const module: { exports: ServerModule } = { exports: {} }; 90 90 + const require = (id: string): unknown => { 91 91 + if (!modules[id]) throw new Error(`Module "${id}" not found`); 92 92 + return modules[id]; 93 93 + }; 94 94 + 95 95 + new Function("module", "exports", "require", "React", "__registerServerReference", code)( 96 96 + module, 97 97 + module.exports, 98 98 + require, 99 99 + React, 100 100 + registerServerReference, 101 101 + ); 102 102 + 103 103 + deployed = { manifest, module: module.exports }; 104 104 + return new ReadableStream({ start: (c) => c.close() }); 105 105 + } 106 106 + export type Deploy = typeof deploy; 107 107 + 108 108 + function render(): ReadableStream<Uint8Array> { 109 109 + if (!deployed) throw new Error("No code deployed"); 110 110 + const App = deployed.module.default as React.ComponentType; 111 111 + return renderToReadableStream(React.createElement(App), deployed.manifest); 112 112 + } 113 113 + export type Render = typeof render; 114 114 + 115 115 + async function callAction( 116 116 + actionId: string, 117 117 + encodedArgs: EncodedArgs, 118 118 + ): Promise<ReadableStream<Uint8Array>> { 119 119 + if (!deployed) throw new Error("No code deployed"); 120 120 + if (!Object.hasOwn(deployed.module, actionId)) { 121 121 + throw new Error(`Action "${actionId}" not found`); 122 122 + } 123 123 + const actionFn = deployed.module[actionId] as Function; 124 124 + 125 125 + let body: FormData | string; 126 126 + if (encodedArgs.type === "formdata") { 127 127 + body = new FormData(); 128 128 + for (const [key, value] of new URLSearchParams(encodedArgs.data)) { 129 129 + body.append(key, value); 130 130 + } 131 131 + } else { 132 132 + body = encodedArgs.data; 133 133 + } 134 134 + 135 135 + const decoded = await decodeReply(body, {}); 136 136 + const args = Array.isArray(decoded) ? decoded : [decoded]; 137 137 + const result = await actionFn(...args); 138 138 + 139 139 + return renderToReadableStream(result, deployed.manifest); 140 140 + } 141 141 + export type CallAction = typeof callAction; 142 142 + 143 143 + // --- Message dispatch --- 144 144 + 145 145 + self.onmessage = ( 146 146 + event: MessageEvent< 147 147 + { requestId: string } & ( 148 148 + | { method: "deploy"; args: Parameters<Deploy> } 149 149 + | { method: "render"; args: Parameters<Render> } 150 150 + | { method: "action"; args: Parameters<CallAction> } 151 151 + ) 152 152 + >, 153 153 + ) => { 154 154 + const req = event.data; 155 155 + switch (req.method) { 156 156 + case "deploy": 157 157 + sendStream(req.requestId, () => deploy(...req.args)); 158 158 + break; 159 159 + case "render": 160 160 + sendStream(req.requestId, () => render(...req.args)); 161 161 + break; 162 162 + case "action": 163 163 + sendStream(req.requestId, () => callAction(...req.args)); 164 164 + break; 165 165 + } 166 166 + }; 167 167 + 168 168 + self.postMessage({ type: "ready" });

-273

src/server/worker.ts

··· 1 1 - // Server Worker - RSC server simulation 2 2 - // 3 3 - // Models a real server: deploy code once, then handle requests against it. 4 4 - // - `deploy`: Store compiled code, manifest, etc. (like deploying to production) 5 5 - // - `render`/`action`: Execute against deployed code 6 6 - 7 7 - import "./webpack-shim.ts"; 8 8 - import "../client/byte-stream-polyfill.ts"; 9 9 - import "text-encoding"; 10 10 - 11 11 - import { 12 12 - renderToReadableStream, 13 13 - registerServerReference, 14 14 - createClientModuleProxy, 15 15 - decodeReply, 16 16 - type ClientManifest, 17 17 - } from "react-server-dom-webpack/server"; 18 18 - import React from "react"; 19 19 - 20 20 - declare const self: DedicatedWorkerGlobalScope; 21 21 - 22 22 - type DeployMessage = { 23 23 - type: "deploy"; 24 24 - requestId: string; 25 25 - compiledCode: string; 26 26 - manifest: ClientManifest; 27 27 - actionNames: string[]; 28 28 - }; 29 29 - 30 30 - type RenderMessage = { 31 31 - type: "render"; 32 32 - requestId: string; 33 33 - }; 34 34 - 35 35 - type ActionMessage = { 36 36 - type: "action"; 37 37 - requestId: string; 38 38 - actionId: string; 39 39 - encodedArgs: EncodedArgs; 40 40 - }; 41 41 - 42 42 - type WorkerMessage = DeployMessage | RenderMessage | ActionMessage; 43 43 - 44 44 - type EncodedArgs = { 45 45 - type: "formdata" | "string"; 46 46 - data: string; 47 47 - }; 48 48 - 49 49 - type ErrorResponse = { 50 50 - type: "error"; 51 51 - requestId: string; 52 52 - error: { message: string; stack?: string }; 53 53 - }; 54 54 - 55 55 - type DeployedResponse = { 56 56 - type: "deployed"; 57 57 - requestId: string; 58 58 - }; 59 59 - 60 60 - type StreamStartResponse = { 61 61 - type: "stream-start"; 62 62 - requestId: string; 63 63 - }; 64 64 - 65 65 - type StreamChunkResponse = { 66 66 - type: "stream-chunk"; 67 67 - requestId: string; 68 68 - chunk: Uint8Array; 69 69 - }; 70 70 - 71 71 - type StreamEndResponse = { 72 72 - type: "stream-end"; 73 73 - requestId: string; 74 74 - }; 75 75 - 76 76 - type StreamErrorResponse = { 77 77 - type: "stream-error"; 78 78 - requestId: string; 79 79 - error: { message: string }; 80 80 - }; 81 81 - 82 82 - type ReadyResponse = { 83 83 - type: "ready"; 84 84 - }; 85 85 - 86 86 - type ServerModule = { 87 87 - default?: React.ComponentType | React.ReactNode; 88 88 - [key: string]: unknown; 89 89 - }; 90 90 - 91 91 - type DeployedState = { 92 92 - manifest: ClientManifest; 93 93 - serverModule: ServerModule; 94 94 - actionNames: string[]; 95 95 - }; 96 96 - 97 97 - let deployed: DeployedState | null = null; 98 98 - 99 99 - // Safari doesn't support transferable streams 100 100 - async function streamToMain(stream: ReadableStream<Uint8Array>, requestId: string): Promise<void> { 101 101 - const reader = stream.getReader(); 102 102 - try { 103 103 - while (true) { 104 104 - const { done, value } = await reader.read(); 105 105 - if (done) { 106 106 - self.postMessage({ type: "stream-end", requestId } satisfies StreamEndResponse); 107 107 - break; 108 108 - } 109 109 - self.postMessage({ 110 110 - type: "stream-chunk", 111 111 - requestId, 112 112 - chunk: value, 113 113 - } satisfies StreamChunkResponse); 114 114 - } 115 115 - } catch (err) { 116 116 - const error = err instanceof Error ? err : new Error(String(err)); 117 117 - self.postMessage({ 118 118 - type: "stream-error", 119 119 - requestId, 120 120 - error: { message: error.message }, 121 121 - } satisfies StreamErrorResponse); 122 122 - } 123 123 - } 124 124 - 125 125 - self.onmessage = async (event: MessageEvent<WorkerMessage>) => { 126 126 - const { type, requestId } = event.data; 127 127 - 128 128 - try { 129 129 - switch (type) { 130 130 - case "deploy": 131 131 - handleDeploy(event.data); 132 132 - break; 133 133 - case "render": 134 134 - await handleRender(event.data); 135 135 - break; 136 136 - case "action": 137 137 - await handleAction(event.data); 138 138 - break; 139 139 - default: { 140 140 - const _exhaustive: never = type; 141 141 - throw new Error(`Unknown message type: ${_exhaustive}`); 142 142 - } 143 143 - } 144 144 - } catch (error) { 145 145 - const err = error instanceof Error ? error : new Error(String(error)); 146 146 - const errorPayload: { message: string; stack?: string } = { message: err.message }; 147 147 - if (err.stack) { 148 148 - errorPayload.stack = err.stack; 149 149 - } 150 150 - self.postMessage({ 151 151 - type: "error", 152 152 - requestId, 153 153 - error: errorPayload, 154 154 - } satisfies ErrorResponse); 155 155 - } 156 156 - }; 157 157 - 158 158 - function handleDeploy({ compiledCode, manifest, actionNames, requestId }: DeployMessage): void { 159 159 - const clientModule = createClientModuleProxy("client"); 160 160 - const modules: Record<string, unknown> = { react: React, "./client": clientModule }; 161 161 - const serverModule = evalModule(compiledCode, modules, actionNames); 162 162 - 163 163 - deployed = { manifest, serverModule, actionNames }; 164 164 - 165 165 - self.postMessage({ type: "deployed", requestId } satisfies DeployedResponse); 166 166 - } 167 167 - 168 168 - function requireDeployed(): DeployedState { 169 169 - if (!deployed) throw new Error("No code deployed"); 170 170 - return deployed; 171 171 - } 172 172 - 173 173 - async function handleRender({ requestId }: RenderMessage): Promise<void> { 174 174 - const { manifest, serverModule } = requireDeployed(); 175 175 - 176 176 - const App = serverModule.default ?? serverModule; 177 177 - const element = 178 178 - typeof App === "function" 179 179 - ? React.createElement(App as React.ComponentType) 180 180 - : (App as React.ReactNode); 181 181 - 182 182 - const flightStream = renderToReadableStream(element, manifest, { 183 183 - onError: (error: unknown) => { 184 184 - if (error instanceof Error) return error.message; 185 185 - return String(error); 186 186 - }, 187 187 - }); 188 188 - 189 189 - self.postMessage({ type: "stream-start", requestId } satisfies StreamStartResponse); 190 190 - streamToMain(flightStream, requestId); 191 191 - } 192 192 - 193 193 - async function handleAction({ actionId, encodedArgs, requestId }: ActionMessage): Promise<void> { 194 194 - const { manifest, serverModule } = requireDeployed(); 195 195 - 196 196 - const actionFn = serverModule[actionId]; 197 197 - if (typeof actionFn !== "function") { 198 198 - throw new Error(`Action "${actionId}" not found`); 199 199 - } 200 200 - 201 201 - const toDecode = reconstructEncodedArgs(encodedArgs); 202 202 - const args = await decodeReply(toDecode, {}); 203 203 - const argsArray = Array.isArray(args) ? args : [args]; 204 204 - const result = (await (actionFn as (...args: unknown[]) => Promise<unknown>)( 205 205 - ...argsArray, 206 206 - )) as React.ReactNode; 207 207 - 208 208 - const flightStream = renderToReadableStream(result, manifest, { 209 209 - onError: (error: unknown) => { 210 210 - if (error instanceof Error) return error.message; 211 211 - return String(error); 212 212 - }, 213 213 - }); 214 214 - 215 215 - self.postMessage({ type: "stream-start", requestId } satisfies StreamStartResponse); 216 216 - streamToMain(flightStream, requestId); 217 217 - } 218 218 - 219 219 - function reconstructEncodedArgs(encodedArgs: EncodedArgs): FormData | string { 220 220 - if (encodedArgs.type === "formdata") { 221 221 - const formData = new FormData(); 222 222 - for (const [key, value] of new URLSearchParams(encodedArgs.data)) { 223 223 - formData.append(key, value); 224 224 - } 225 225 - return formData; 226 226 - } 227 227 - return encodedArgs.data; 228 228 - } 229 229 - 230 230 - function evalModule( 231 231 - code: string, 232 232 - modules: Record<string, unknown>, 233 233 - actionNames: string[] | undefined, 234 234 - ): ServerModule { 235 235 - let finalCode = code; 236 236 - if (actionNames && actionNames.length > 0) { 237 237 - finalCode += 238 238 - "\n" + 239 239 - actionNames 240 240 - .map( 241 241 - (name) => 242 242 - `__registerServerReference(${name}, "${name}", "${name}"); exports.${name} = ${name};`, 243 243 - ) 244 244 - .join("\n"); 245 245 - } 246 246 - 247 247 - const module: { exports: ServerModule } = { exports: {} }; 248 248 - const require = (id: string): unknown => { 249 249 - if (!modules[id]) throw new Error(`Module "${id}" not found`); 250 250 - return modules[id]; 251 251 - }; 252 252 - 253 253 - const fn = new Function( 254 254 - "module", 255 255 - "exports", 256 256 - "require", 257 257 - "React", 258 258 - "__registerServerReference", 259 259 - finalCode, 260 260 - ) as ( 261 261 - module: { exports: ServerModule }, 262 262 - exports: ServerModule, 263 263 - require: (id: string) => unknown, 264 264 - ReactLib: typeof React, 265 265 - registerServerRef: typeof registerServerReference, 266 266 - ) => void; 267 267 - 268 268 - fn(module, module.exports, require, React, registerServerReference); 269 269 - 270 270 - return module.exports; 271 271 - } 272 272 - 273 273 - self.postMessage({ type: "ready" } satisfies ReadyResponse);

+6

src/shared/polyfill.ts

··· 1 1 + import { ReadableStream as PolyfillReadableStream } from "web-streams-polyfill"; 2 2 + 3 3 + // Safari doesn't implement ReadableByteStreamController. 4 4 + if (typeof globalThis.ReadableByteStreamController === "undefined") { 5 5 + globalThis.ReadableStream = PolyfillReadableStream as typeof ReadableStream; 6 6 + }

+18

src/shared/webpack-shim.ts

··· 1 1 + // Minimal webpack shim for react-server-dom-webpack 2 2 + // Works in both browser (window) and worker (self) contexts via globalThis 3 3 + 4 4 + const g = globalThis as Record<string, unknown>; 5 5 + 6 6 + const moduleCache: Record<string, unknown> = {}; 7 7 + 8 8 + g.__webpack_module_cache__ = moduleCache; 9 9 + 10 10 + g.__webpack_require__ = function (moduleId: string): unknown { 11 11 + const cached = moduleCache[moduleId] as { exports?: unknown } | undefined; 12 12 + if (cached) return cached.exports ?? cached; 13 13 + throw new Error(`Module ${moduleId} not found`); 14 14 + }; 15 15 + 16 16 + g.__webpack_chunk_load__ = () => Promise.resolve(); 17 17 + 18 18 + export {};

-19

types/web-streams-polyfill.d.ts

··· 1 1 - // Type declarations for web-streams-polyfill specific exports 2 2 - 3 3 - declare module "web-streams-polyfill" { 4 4 - export const ReadableStream: { 5 5 - new <R = unknown>( 6 6 - underlyingSource?: UnderlyingSource<R>, 7 7 - strategy?: QueuingStrategy<R>, 8 8 - ): ReadableStream<R>; 9 9 - prototype: ReadableStream; 10 10 - }; 11 11 - // ReadableByteStreamController is an internal class, we type it loosely 12 12 - export const ReadableByteStreamController: unknown; 13 13 - export const WritableStream: typeof globalThis.WritableStream; 14 14 - export const TransformStream: typeof globalThis.TransformStream; 15 15 - } 16 16 - 17 17 - declare module "web-streams-polyfill/polyfill" { 18 18 - // Side-effect only import that polyfills globals 19 19 - }