\n+ hello<\/Text>\n+ {largeString}<\/Text>\n+ <\/div>\n+ );\n+ }\n+\n+ function App() {\n+ const model = {\n+ html: ,\n+ };\n+ return model;\n+ }\n+\n+ const readable = await serverAct(() =>\n+ ReactServerDOMServer.renderToReadableStream(, webpackMap),\n+ );\n+ const response = ReactServerDOMClient.createFromReadableStream(readable, {\n+ serverConsumerManifest: {\n+ moduleMap: null,\n+ moduleLoading: null,\n+ },\n+ });\n+ const model = await response;\n+ expect(model).toEqual({\n+ html: (\n+

\n+ hello<\/span>\n+ {largeString}<\/span>\n+ <\/div>\n+ ),\n+ });\n+ });\n+\n it('should allow an alternative module mapping to be used for SSR', async () => {\n function ClientComponent() {\n return Client Component<\/span>;\n@@ -498,8 +541,6 @@ describe('ReactFlightDOMNode', () => {\n expect(errors).toEqual([new Error('Connection closed.')]);\n \/\/ Should still match the result when parsed\n const result = await readResult(ssrStream);\n- const div = document.createElement('div');\n- div.innerHTML = result;\n- expect(div.textContent).toBe('loading...');\n+ expect(result).toContain('loading...');\n });\n });\ndiff --git a\/packages\/react-server-dom-webpack\/src\/server\/ReactFlightDOMServerNode.js b\/packages\/react-server-dom-webpack\/src\/server\/ReactFlightDOMServerNode.js\nindex f459e04914..cede8a46d6 100644\n--- a\/packages\/react-server-dom-webpack\/src\/server\/ReactFlightDOMServerNode.js\n+++ b\/packages\/react-server-dom-webpack\/src\/server\/ReactFlightDOMServerNode.js\n@@ -20,6 +20,8 @@ import type {Thenable} from 'shared\/ReactTypes';\n \n import {Readable} from 'stream';\n \n+import {ASYNC_ITERATOR} from 'shared\/ReactSymbols';\n+\n import {\n createRequest,\n createPrerenderRequest,\n@@ -34,6 +36,7 @@ import {\n reportGlobalError,\n close,\n resolveField,\n+ resolveFile,\n resolveFileInfo,\n resolveFileChunk,\n resolveFileComplete,\n@@ -51,6 +54,8 @@ export {\n createClientModuleProxy,\n } from '..\/ReactFlightWebpackReferences';\n \n+import {textEncoder} from 'react-server\/src\/ReactServerStreamConfigNode';\n+\n import type {TemporaryReferenceSet} from 'react-server\/src\/ReactFlightServerTemporaryReferences';\n \n export {createTemporaryReferenceSet} from 'react-server\/src\/ReactFlightServerTemporaryReferences';\n@@ -128,11 +133,91 @@ function renderToPipeableStream(\n };\n }\n \n-function createFakeWritable(readable: any): Writable {\n+function createFakeWritableFromReadableStreamController(\n+ controller: ReadableStreamController,\n+): Writable {\n \/\/ The current host config expects a Writable so we create\n \/\/ a fake writable for now to push into the Readable.\n return ({\n- write(chunk) {\n+ write(chunk: string | Uint8Array) {\n+ if (typeof chunk === 'string') {\n+ chunk = textEncoder.encode(chunk);\n+ }\n+ controller.enqueue(chunk);\n+ \/\/ in web streams there is no backpressure so we can always write more\n+ return true;\n+ },\n+ end() {\n+ controller.close();\n+ },\n+ destroy(error) {\n+ \/\/ $FlowFixMe[method-unbinding]\n+ if (typeof controller.error === 'function') {\n+ \/\/ $FlowFixMe[incompatible-call]: This is an Error object or the destination accepts other types.\n+ controller.error(error);\n+ } else {\n+ controller.close();\n+ }\n+ },\n+ }: any);\n+}\n+\n+function renderToReadableStream(\n+ model: ReactClientValue,\n+ webpackMap: ClientManifest,\n+ options?: Options & {\n+ signal?: AbortSignal,\n+ },\n+): ReadableStream {\n+ const request = createRequest(\n+ model,\n+ webpackMap,\n+ options ? options.onError : undefined,\n+ options ? options.identifierPrefix : undefined,\n+ options ? options.onPostpone : undefined,\n+ options ? options.temporaryReferences : undefined,\n+ __DEV__ && options ? options.environmentName : undefined,\n+ __DEV__ && options ? options.filterStackFrame : undefined,\n+ );\n+ if (options && options.signal) {\n+ const signal = options.signal;\n+ if (signal.aborted) {\n+ abort(request, (signal: any).reason);\n+ } else {\n+ const listener = () => {\n+ abort(request, (signal: any).reason);\n+ signal.removeEventListener('abort', listener);\n+ };\n+ signal.addEventListener('abort', listener);\n+ }\n+ }\n+ let writable: Writable;\n+ const stream = new ReadableStream(\n+ {\n+ type: 'bytes',\n+ start: (controller): ?Promise => {\n+ writable = createFakeWritableFromReadableStreamController(controller);\n+ startWork(request);\n+ },\n+ pull: (controller): ?Promise => {\n+ startFlowing(request, writable);\n+ },\n+ cancel: (reason): ?Promise => {\n+ stopFlowing(request);\n+ abort(request, reason);\n+ },\n+ },\n+ \/\/ $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.\n+ {highWaterMark: 0},\n+ );\n+ return stream;\n+}\n+\n+function createFakeWritableFromNodeReadable(readable: any): Writable {\n+ \/\/ The current host config expects a Writable so we create\n+ \/\/ a fake writable for now to push into the Readable.\n+ return ({\n+ write(chunk: string | Uint8Array) {\n return readable.push(chunk);\n },\n end() {\n@@ -171,7 +256,7 @@ function prerenderToNodeStream(\n startFlowing(request, writable);\n },\n });\n- const writable = createFakeWritable(readable);\n+ const writable = createFakeWritableFromNodeReadable(readable);\n resolve({prelude: readable});\n }\n \n@@ -205,6 +290,69 @@ function prerenderToNodeStream(\n });\n }\n \n+function prerender(\n+ model: ReactClientValue,\n+ webpackMap: ClientManifest,\n+ options?: Options & {\n+ signal?: AbortSignal,\n+ },\n+): Promise<{\n+ prelude: ReadableStream,\n+}> {\n+ return new Promise((resolve, reject) => {\n+ const onFatalError = reject;\n+ function onAllReady() {\n+ let writable: Writable;\n+ const stream = new ReadableStream(\n+ {\n+ type: 'bytes',\n+ start: (controller): ?Promise => {\n+ writable =\n+ createFakeWritableFromReadableStreamController(controller);\n+ },\n+ pull: (controller): ?Promise => {\n+ startFlowing(request, writable);\n+ },\n+ cancel: (reason): ?Promise => {\n+ stopFlowing(request);\n+ abort(request, reason);\n+ },\n+ },\n+ \/\/ $FlowFixMe[prop-missing] size() methods are not allowed on byte streams.\n+ {highWaterMark: 0},\n+ );\n+ resolve({prelude: stream});\n+ }\n+ const request = createPrerenderRequest(\n+ model,\n+ webpackMap,\n+ onAllReady,\n+ onFatalError,\n+ options ? options.onError : undefined,\n+ options ? options.identifierPrefix : undefined,\n+ options ? options.onPostpone : undefined,\n+ options ? options.temporaryReferences : undefined,\n+ __DEV__ && options ? options.environmentName : undefined,\n+ __DEV__ && options ? options.filterStackFrame : undefined,\n+ );\n+ if (options && options.signal) {\n+ const signal = options.signal;\n+ if (signal.aborted) {\n+ const reason = (signal: any).reason;\n+ abort(request, reason);\n+ } else {\n+ const listener = () => {\n+ const reason = (signal: any).reason;\n+ abort(request, reason);\n+ signal.removeEventListener('abort', listener);\n+ };\n+ signal.addEventListener('abort', listener);\n+ }\n+ }\n+ startWork(request);\n+ });\n+}\n+\n function decodeReplyFromBusboy(\n busboyStream: Busboy,\n webpackMap: ServerManifest,\n@@ -286,11 +434,59 @@ function decodeReply(\n return root;\n }\n \n+function decodeReplyFromAsyncIterable(\n+ iterable: AsyncIterable<[string, string | File]>,\n+ webpackMap: ServerManifest,\n+ options?: {temporaryReferences?: TemporaryReferenceSet},\n+): Thenable {\n+ const iterator: AsyncIterator<[string, string | File]> =\n+ iterable[ASYNC_ITERATOR]();\n+\n+ const response = createResponse(\n+ webpackMap,\n+ '',\n+ options ? options.temporaryReferences : undefined,\n+ );\n+\n+ function progress(\n+ entry:\n+ | {done: false, +value: [string, string | File], ...}\n+ | {done: true, +value: void, ...},\n+ ) {\n+ if (entry.done) {\n+ close(response);\n+ } else {\n+ const [name, value] = entry.value;\n+ if (typeof value === 'string') {\n+ resolveField(response, name, value);\n+ } else {\n+ resolveFile(response, name, value);\n+ }\n+ iterator.next().then(progress, error);\n+ }\n+ }\n+ function error(reason: Error) {\n+ reportGlobalError(response, reason);\n+ if (typeof (iterator: any).throw === 'function') {\n+ \/\/ The iterator protocol doesn't necessarily include this but a generator do.\n+ \/\/ $FlowFixMe should be able to pass mixed\n+ iterator.throw(reason).then(error, error);\n+ }\n+ }\n+\n+ iterator.next().then(progress, error);\n+\n+ return getRoot(response);\n+}\n+\n export {\n+ renderToReadableStream,\n renderToPipeableStream,\n+ prerender,\n prerenderToNodeStream,\n- decodeReplyFromBusboy,\n decodeReply,\n+ decodeReplyFromBusboy,\n+ decodeReplyFromAsyncIterable,\n decodeAction,\n decodeFormState,\n };\ndiff --git a\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.js b\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.js\nindex fde5746732..1e3571a6f2 100644\n--- a\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.js\n+++ b\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.js\n@@ -8,10 +8,13 @@\n *\/\n \n export {\n+ renderToReadableStream,\n renderToPipeableStream,\n+ prerender as unstable_prerender,\n prerenderToNodeStream as unstable_prerenderToNodeStream,\n- decodeReplyFromBusboy,\n decodeReply,\n+ decodeReplyFromBusboy,\n+ decodeReplyFromAsyncIterable,\n decodeAction,\n decodeFormState,\n registerServerReference,\ndiff --git a\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.unbundled.js b\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.unbundled.js\nindex fde5746732..1e3571a6f2 100644\n--- a\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.unbundled.js\n+++ b\/packages\/react-server-dom-webpack\/src\/server\/react-flight-dom-server.node.unbundled.js\n@@ -8,10 +8,13 @@\n *\/\n \n export {\n+ renderToReadableStream,\n renderToPipeableStream,\n+ prerender as unstable_prerender,\n prerenderToNodeStream as unstable_prerenderToNodeStream,\n- decodeReplyFromBusboy,\n decodeReply,\n+ decodeReplyFromBusboy,\n+ decodeReplyFromAsyncIterable,\n decodeAction,\n decodeFormState,\n registerServerReference,\ndiff --git a\/packages\/react-server-dom-webpack\/static.node.js b\/packages\/react-server-dom-webpack\/static.node.js\nindex 345f4123c9..1b2c11edc1 100644\n--- a\/packages\/react-server-dom-webpack\/static.node.js\n+++ b\/packages\/react-server-dom-webpack\/static.node.js\n@@ -7,4 +7,7 @@\n * @flow\n *\/\n \n-export {unstable_prerenderToNodeStream} from '.\/src\/server\/react-flight-dom-server.node';\n+export {\n+ unstable_prerender,\n+ unstable_prerenderToNodeStream,\n+} from '.\/src\/server\/react-flight-dom-server.node';\n"}

dillon1000/react

Files changed