[Flight] Use Web Streams APIs for 3rd-party component in Flight fixture (#33481)
Hendrik Liebau committed
Jun 8, 2025 at 06:33 UTC
c0b5a0cad32cbf237d4c0134bef702d6ba3e393c
1 file changed
+21
-31
fixtures/flight/src/App.js
+21
-31
@@ -1,6 +1,6 @@
1
import * as React from 'react';
2
-import {renderToPipeableStream} from 'react-server-dom-webpack/server';
3
-import {createFromNodeStream} from 'react-server-dom-webpack/client';
2
+import {renderToReadableStream} from 'react-server-dom-webpack/server';
3
+import {createFromReadableStream} from 'react-server-dom-webpack/client';
4
import {PassThrough, Readable} from 'stream';
5
6
import Container from './Container.js';
@@ -46,43 +46,33 @@ async function ThirdPartyComponent() {
46
return delay('hello from a 3rd party', 30);
47
}
48
49
-// Using Web streams for tee'ing convenience here.
50
-let cachedThirdPartyReadableWeb;
49
+let cachedThirdPartyStream;
50
51
// We create the Component outside of AsyncLocalStorage so that it has no owner.
52
// That way it gets the owner from the call to createFromNodeStream.
53
const thirdPartyComponent = <ThirdPartyComponent />;
54
55
function fetchThirdParty(noCache) {
57
- if (cachedThirdPartyReadableWeb && !noCache) {
58
- const [readableWeb1, readableWeb2] = cachedThirdPartyReadableWeb.tee();
59
- cachedThirdPartyReadableWeb = readableWeb1;
60
-
61
- return createFromNodeStream(Readable.fromWeb(readableWeb2), {
56
+ // We're using the Web Streams APIs for tee'ing convenience.
57
+ const stream =
58
+ cachedThirdPartyStream && !noCache
59
+ ? cachedThirdPartyStream
60
+ : renderToReadableStream(
61
+ thirdPartyComponent,
62
+ {},
63
+ {environmentName: 'third-party'}
64
+ );
65
+
66
+ const [stream1, stream2] = stream.tee();
67
+ cachedThirdPartyStream = stream1;
68
+
69
+ return createFromReadableStream(stream2, {
70
+ serverConsumerManifest: {
71
moduleMap: {},
63
- moduleLoading: {},
64
- });
65
- }
66
-
67
- const stream = renderToPipeableStream(
68
- thirdPartyComponent,
69
- {},
70
- {environmentName: 'third-party'}
71
- );
72
-
73
- const readable = new PassThrough();
74
- // React currently only supports piping to one stream, so we convert, tee, and
75
- // convert back again.
76
- // TODO: Switch to web streams without converting when #33442 has landed.
77
- const [readableWeb1, readableWeb2] = Readable.toWeb(readable).tee();
78
- cachedThirdPartyReadableWeb = readableWeb1;
79
- const result = createFromNodeStream(Readable.fromWeb(readableWeb2), {
80
- moduleMap: {},
81
- moduleLoading: {},
72
+ serverModuleMap: null,
73
+ moduleLoading: null,
74
+ },
75
});
83
- stream.pipe(readable);
84
-
85
- return result;
76
}
77
78
async function ServerComponent({noCache}) {