diff --git a/fixtures/flight/src/App.js b/fixtures/flight/src/App.js index 7b811dd7628e0..08eaefc90f887 100644 --- a/fixtures/flight/src/App.js +++ b/fixtures/flight/src/App.js @@ -1,4 +1,7 @@ import * as React from 'react'; +import {renderToPipeableStream} from 'react-server-dom-webpack/server'; +import {createFromNodeStream} from 'react-server-dom-webpack/client'; +import {PassThrough, Readable} from 'stream'; import Container from './Container.js'; @@ -35,8 +38,50 @@ async function Bar({children}) { return
{children}
; } +async function ThirdPartyComponent() { + return new Promise(resolve => + setTimeout(() => resolve('hello from a 3rd party'), 30) + ); +} + +// Using Web streams for tee'ing convenience here. +let cachedThirdPartyReadableWeb; + +function fetchThirdParty(Component) { + if (cachedThirdPartyReadableWeb) { + const [readableWeb1, readableWeb2] = cachedThirdPartyReadableWeb.tee(); + cachedThirdPartyReadableWeb = readableWeb1; + + return createFromNodeStream(Readable.fromWeb(readableWeb2), { + moduleMap: {}, + moduleLoading: {}, + }); + } + + const stream = renderToPipeableStream( + , + {}, + {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() { await new Promise(resolve => setTimeout(() => resolve('deferred text'), 50)); + return await fetchThirdParty(); } export default async function App({prerender}) {