A tool for people curious about the React Server Components protocol rscexplorer.dev/
rsc react

improve bundle

+13 -10
-1
src/client/embed.tsx
··· 1 1 import "../shared/webpack-shim.ts"; 2 - import "../shared/polyfill.ts"; 3 2 4 3 import { createRoot } from "react-dom/client"; 5 4 import { EmbedApp } from "./ui/EmbedApp.tsx";
-1
src/client/index.tsx
··· 1 1 import "../shared/webpack-shim.ts"; 2 - import "../shared/polyfill.ts"; 3 2 4 3 import { createRoot } from "react-dom/client"; 5 4 import { App } from "./ui/App.tsx";
+2 -1
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 + import { polyfillReady } from "../shared/polyfill.ts"; 4 5 5 6 export type { EncodedArgs, ClientManifest }; 6 7 ··· 78 79 private nextRequestId = 0; 79 80 80 81 private async request(body: Record<string, unknown>): Promise<ReadableStream<Uint8Array>> { 81 - await this.readyPromise; 82 + await Promise.all([this.readyPromise, polyfillReady]); 82 83 const requestId = String(this.nextRequestId++); 83 84 let controller!: ReadableStreamDefaultController<Uint8Array>; 84 85 const stream = new ReadableStream<Uint8Array>({
+4 -2
src/server/worker-server.ts
··· 1 1 // Server Worker - RSC server simulation 2 2 3 3 import "../shared/webpack-shim.ts"; 4 - import "../shared/polyfill.ts"; 4 + import { polyfillReady } from "../shared/polyfill.ts"; 5 5 6 6 import { 7 7 renderToReadableStream, ··· 165 165 } 166 166 }; 167 167 168 - self.postMessage({ type: "ready" }); 168 + polyfillReady.then(() => { 169 + self.postMessage({ type: "ready" }); 170 + });
+7 -5
src/shared/polyfill.ts
··· 1 - import { ReadableStream as PolyfillReadableStream } from "web-streams-polyfill"; 2 - 3 1 // Safari doesn't implement ReadableByteStreamController. 4 - if (typeof globalThis.ReadableByteStreamController === "undefined") { 5 - globalThis.ReadableStream = PolyfillReadableStream as typeof ReadableStream; 6 - } 2 + // Only load the polyfill when needed. 3 + export const polyfillReady: Promise<void> = 4 + typeof globalThis.ReadableByteStreamController === "undefined" 5 + ? import("web-streams-polyfill").then(({ ReadableStream }) => { 6 + globalThis.ReadableStream = ReadableStream as typeof globalThis.ReadableStream; 7 + }) 8 + : Promise.resolve();