introduce StreamableComponentResult for improved type safety in streaming components

Author: AbanoubGhadban

node_package/src/ReactOnRailsRSC.ts

@@ -1,8 +1,7 @@
 import { renderToPipeableStream } from 'react-on-rails-rsc/server.node';
 import { PassThrough, Readable } from 'stream';
-import type { ReactElement } from 'react';
 
-import { RSCRenderParams, StreamRenderState } from './types';
+import { RSCRenderParams, StreamRenderState, StreamableComponentResult } from './types';
 import ReactOnRails from './ReactOnRails.full';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
@@ -22,7 +21,7 @@ const stringToStream = (str: string) => {
 };
 
 const streamRenderRSCComponent = (
-  reactRenderingResult: ReactElement | Promise<ReactElement | string>,
+  reactRenderingResult: StreamableComponentResult,
   options: RSCRenderParams,
 ): Readable => {
   const { throwJsErrors, reactClientManifestFileName } = options;

node_package/src/streamServerRenderedReactComponent.ts

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import { PassThrough, Readable } from 'stream';
-import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';
 import createReactOutput from './createReactOutput';
 import { isPromise, isServerRenderHash } from './isServerRenderResult';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils';
-import type { RenderParams, StreamRenderState } from './types';
+import type { RenderParams, StreamRenderState, StreamableComponentResult } from './types';
 
 type BufferedEvent = {
   event: 'data' | 'error' | 'end';
@@ -123,7 +122,7 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
 };
 
 const streamRenderReactComponent = (
-  reactRenderingResult: ReactElement | Promise<ReactElement | string>,
+  reactRenderingResult: StreamableComponentResult,
   options: RenderParams,
 ) => {
   const { name: componentName, throwJsErrors, domNodeId } = options;
@@ -188,10 +187,7 @@ const streamRenderReactComponent = (
   return readableStream;
 };
 
-type StreamRenderer<T, P extends RenderParams> = (
-  reactElement: ReactElement | Promise<ReactElement | string>,
-  options: P,
-) => T;
+type StreamRenderer<T, P extends RenderParams> = (reactElement: StreamableComponentResult, options: P) => T;
 
 export const streamServerRenderedComponent = <T, P extends RenderParams>(
   options: P,

node_package/src/types/index.ts

@@ -69,6 +69,8 @@ type RenderFunctionAsyncResult = Promise<string | ServerRenderHashRenderedHtml |
 
 type RenderFunctionResult = RenderFunctionSyncResult | RenderFunctionAsyncResult;
 
+type StreamableComponentResult = ReactElement | Promise<ReactElement | string>;
+
 /**
  * Render functions are used to create dynamic React components or server-rendered HTML with side effects.
  * They receive two arguments: props and railsContext.
@@ -117,6 +119,7 @@ export type {
   CreateReactOutputAsyncResult,
   RenderFunctionSyncResult,
   RenderFunctionAsyncResult,
+  StreamableComponentResult,
 };
 
 export interface RegisteredComponent {