tangled
alpha
login
or
join now
danabra.mov
/
rscexplorer
37
fork
atom
A tool for people curious about the React Server Components protocol
rscexplorer.dev/
rsc
react
37
fork
atom
overview
issues
pulls
pipelines
improve bundle
danabra.mov
2 months ago
f10f49e4
d26d2427
+13
-10
5 changed files
expand all
collapse all
unified
split
src
client
embed.tsx
index.tsx
worker-client.ts
server
worker-server.ts
shared
polyfill.ts
-1
src/client/embed.tsx
···
1
1
import "../shared/webpack-shim.ts";
2
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
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
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
81
-
await this.readyPromise;
82
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
4
-
import "../shared/polyfill.ts";
4
4
+
import { polyfillReady } from "../shared/polyfill.ts";
5
5
6
6
import {
7
7
renderToReadableStream,
···
165
165
}
166
166
};
167
167
168
168
-
self.postMessage({ type: "ready" });
168
168
+
polyfillReady.then(() => {
169
169
+
self.postMessage({ type: "ready" });
170
170
+
});
+7
-5
src/shared/polyfill.ts
···
1
1
-
import { ReadableStream as PolyfillReadableStream } from "web-streams-polyfill";
2
2
-
3
1
// Safari doesn't implement ReadableByteStreamController.
4
4
-
if (typeof globalThis.ReadableByteStreamController === "undefined") {
5
5
-
globalThis.ReadableStream = PolyfillReadableStream as typeof ReadableStream;
6
6
-
}
2
2
+
// Only load the polyfill when needed.
3
3
+
export const polyfillReady: Promise<void> =
4
4
+
typeof globalThis.ReadableByteStreamController === "undefined"
5
5
+
? import("web-streams-polyfill").then(({ ReadableStream }) => {
6
6
+
globalThis.ReadableStream = ReadableStream as typeof globalThis.ReadableStream;
7
7
+
})
8
8
+
: Promise.resolve();