diff --git a/node_package/src/ReactOnRails.ts b/node_package/src/ReactOnRails.ts index 10b72771d..ff9b03e53 100644 --- a/node_package/src/ReactOnRails.ts +++ b/node_package/src/ReactOnRails.ts @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import type { PassThrough } from 'stream'; +import type { Readable } from 'stream'; import * as ClientStartup from './clientStartup'; import handleError from './handleError'; @@ -246,7 +246,7 @@ ctx.ReactOnRails = { * Used by server rendering by Rails * @param options */ - streamServerRenderedReactComponent(options: RenderParams): PassThrough { + streamServerRenderedReactComponent(options: RenderParams): Readable { return streamServerRenderedReactComponent(options); }, diff --git a/node_package/src/serverRenderReactComponent.ts b/node_package/src/serverRenderReactComponent.ts index 2415382b5..44e161dd0 100644 --- a/node_package/src/serverRenderReactComponent.ts +++ b/node_package/src/serverRenderReactComponent.ts @@ -1,5 +1,5 @@ import ReactDOMServer from 'react-dom/server'; -import { PassThrough } from 'stream'; +import { PassThrough, Readable } from 'stream'; import type { ReactElement } from 'react'; import ComponentRegistry from './ComponentRegistry'; @@ -167,17 +167,17 @@ const serverRenderReactComponent: typeof serverRenderReactComponentInternal = (o } }; -const stringToStream = (str: string) => { +const stringToStream = (str: string): Readable => { const stream = new PassThrough(); stream.push(str); stream.push(null); return stream; }; -export const streamServerRenderedReactComponent = (options: RenderParams) => { +export const streamServerRenderedReactComponent = (options: RenderParams): Readable => { const { name, domNodeId, trace, props, railsContext, throwJsErrors } = options; - let renderResult: null | PassThrough = null; + let renderResult: null | Readable = null; try { const componentObj = ComponentRegistry.get(name); @@ -199,8 +199,9 @@ See https://github.com/shakacode/react_on_rails#renderer-functions`); throw new Error('Server rendering of streams is not supported for server render hashes or promises.'); } - renderResult = new PassThrough(); - ReactDOMServer.renderToPipeableStream(reactRenderingResult).pipe(renderResult); + const renderStream = new PassThrough(); + ReactDOMServer.renderToPipeableStream(reactRenderingResult).pipe(renderStream); + renderResult = renderStream; // TODO: Add console replay script to the stream // Ensure to avoid console messages leaking between different components rendering diff --git a/node_package/src/types/index.ts b/node_package/src/types/index.ts index 878b8820d..dddf50434 100644 --- a/node_package/src/types/index.ts +++ b/node_package/src/types/index.ts @@ -1,5 +1,5 @@ import type { ReactElement, ReactNode, Component, ComponentType } from 'react'; -import type { PassThrough } from 'stream'; +import type { Readable } from 'stream'; // Don't import redux just for the type definitions // See https://github.com/shakacode/react_on_rails/issues/1321 @@ -138,7 +138,7 @@ export interface ReactOnRails { ): RenderReturnType; getComponent(name: string): RegisteredComponent; serverRenderReactComponent(options: RenderParams): null | string | Promise; - streamServerRenderedReactComponent(options: RenderParams): PassThrough; + streamServerRenderedReactComponent(options: RenderParams): Readable; handleError(options: ErrorOptions): string | undefined; buildConsoleReplay(): string; registeredComponents(): Map;