OSSForks/react
1
0
Fork 0
mirror of https://github.com/zebrajr/react.git synced 2025-12-06 12:20:20 +01:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

[Flight] Use Web Streams APIs for 3rd-party component in Flight fixture (#33481)

Browse Source
This commit is contained in:
Hendrik Liebau 2025-06-08 06:33:25 +02:00 committed by GitHub
parent e4b88ae4c6
commit c0b5a0cad3
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 20 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
fixtures/flight/src/App.js
View File

@ -1,6 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import {renderToPipeableStream} from 'react-server-dom-webpack/server'; import {renderToReadableStream} from 'react-server-dom-webpack/server';
import {createFromNodeStream} from 'react-server-dom-webpack/client'; import {createFromReadableStream} from 'react-server-dom-webpack/client';
import {PassThrough, Readable} from 'stream'; import {PassThrough, Readable} from 'stream';
import Container from './Container.js'; import Container from './Container.js';
@ -46,43 +46,33 @@ async function ThirdPartyComponent() {
return delay('hello from a 3rd party', 30); return delay('hello from a 3rd party', 30);
} }
// Using Web streams for tee'ing convenience here. let cachedThirdPartyStream;
let cachedThirdPartyReadableWeb;
// We create the Component outside of AsyncLocalStorage so that it has no owner. // We create the Component outside of AsyncLocalStorage so that it has no owner.
// That way it gets the owner from the call to createFromNodeStream. // That way it gets the owner from the call to createFromNodeStream.
const thirdPartyComponent = <ThirdPartyComponent />; const thirdPartyComponent = <ThirdPartyComponent />;
function fetchThirdParty(noCache) { function fetchThirdParty(noCache) {
if (cachedThirdPartyReadableWeb && !noCache) { // We're using the Web Streams APIs for tee'ing convenience.
const [readableWeb1, readableWeb2] = cachedThirdPartyReadableWeb.tee(); const stream =
cachedThirdPartyReadableWeb = readableWeb1; cachedThirdPartyStream && !noCache
? cachedThirdPartyStream
: renderToReadableStream(
thirdPartyComponent,
{},
{environmentName: 'third-party'}
);
return createFromNodeStream(Readable.fromWeb(readableWeb2), { const [stream1, stream2] = stream.tee();
cachedThirdPartyStream = stream1;
return createFromReadableStream(stream2, {
serverConsumerManifest: {
moduleMap: {}, moduleMap: {},
moduleLoading: {}, serverModuleMap: null,
}); moduleLoading: null,
} },
const stream = renderToPipeableStream(
thirdPartyComponent,
{},
{environmentName: 'third-party'}
);
const readable = new PassThrough();
// React currently only supports piping to one stream, so we convert, tee, and
// convert back again.
// TODO: Switch to web streams without converting when #33442 has landed.
const [readableWeb1, readableWeb2] = Readable.toWeb(readable).tee();
cachedThirdPartyReadableWeb = readableWeb1;
const result = createFromNodeStream(Readable.fromWeb(readableWeb2), {
moduleMap: {},
moduleLoading: {},
}); });
stream.pipe(readable);
return result;
} }
async function ServerComponent({noCache}) { async function ServerComponent({noCache}) {