make render function returns Readable stream instead of PassThrough

Author: AbanoubGhadban

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';
@@ -250,7 +250,7 @@ ctx.ReactOnRails = {
    * Used by server rendering by Rails
    * @param options
    */
-  streamServerRenderedReactComponent(options: RenderParams): PassThrough {
+  streamServerRenderedReactComponent(options: RenderParams): Readable {
     return streamServerRenderedReactComponent(options);
   },
 

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';
@@ -185,17 +185,17 @@ const serverRenderReactComponent: typeof serverRenderReactComponentInternal = (o
   return result;
 };
 
-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);
@@ -217,8 +217,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

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
@@ -139,7 +139,7 @@ export interface ReactOnRails {
   ): RenderReturnType;
   getComponent(name: string): RegisteredComponent;
   serverRenderReactComponent(options: RenderParams): null | string | Promise<RenderResult>;
-  streamServerRenderedReactComponent(options: RenderParams): PassThrough;
+  streamServerRenderedReactComponent(options: RenderParams): Readable;
   handleError(options: ErrorOptions): string | undefined;
   buildConsoleReplay(): string;
   registeredComponents(): Map<string, RegisteredComponent>;