add support for streaming react components returned from async render function

Author: AbanoubGhadban

node_package/src/ReactOnRailsRSC.ts

@@ -21,7 +21,10 @@ const stringToStream = (str: string) => {
   return stream;
 };
 
-const streamRenderRSCComponent = (reactElement: ReactElement, options: RSCRenderParams): Readable => {
+const streamRenderRSCComponent = (
+  reactRenderingResult: ReactElement | Promise<ReactElement | string>,
+  options: RSCRenderParams,
+): Readable => {
   const { throwJsErrors, reactClientManifestFileName } = options;
   const renderState: StreamRenderState = {
     result: null,
@@ -31,8 +34,8 @@ const streamRenderRSCComponent = (reactElement: ReactElement, options: RSCRender
 
   const { pipeToTransform, readableStream, emitError } =
     transformRenderStreamChunksToResultObject(renderState);
-  loadReactClientManifest(reactClientManifestFileName)
-    .then((reactClientManifest) => {
+  Promise.all([loadReactClientManifest(reactClientManifestFileName), reactRenderingResult])
+    .then(([reactClientManifest, reactElement]) => {
       const rscStream = renderToPipeableStream(reactElement, reactClientManifest, {
         onError: (err) => {
           const error = convertToError(err);

node_package/src/streamServerRenderedReactComponent.ts

@@ -4,7 +4,7 @@ import type { ReactElement } from 'react';
 
 import ComponentRegistry from './ComponentRegistry';
 import createReactOutput from './createReactOutput';
-import { isPromise, isServerRenderHash } from './isServerRenderResult';
+import { isServerRenderHash } from './isServerRenderResult';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils';
@@ -128,7 +128,10 @@ export const transformRenderStreamChunksToResultObject = (renderState: StreamRen
   return { readableStream, pipeToTransform, writeChunk, emitError, endStream };
 };
 
-const streamRenderReactComponent = (reactRenderingResult: ReactElement, options: RenderParams) => {
+const streamRenderReactComponent = (
+  reactRenderingResult: ReactElement | Promise<ReactElement | string>,
+  options: RenderParams,
+) => {
   const { name: componentName, throwJsErrors, domNodeId } = options;
   const renderState: StreamRenderState = {
     result: null,
@@ -139,42 +142,63 @@ const streamRenderReactComponent = (reactRenderingResult: ReactElement, options:
   const { readableStream, pipeToTransform, writeChunk, emitError, endStream } =
     transformRenderStreamChunksToResultObject(renderState);
 
-  const renderingStream = ReactDOMServer.renderToPipeableStream(reactRenderingResult, {
-    onShellError(e) {
-      const error = convertToError(e);
-      renderState.hasErrors = true;
-      renderState.error = error;
+  const onShellError = (e: unknown) => {
+    const error = convertToError(e);
+    renderState.hasErrors = true;
+    renderState.error = error;
 
-      if (throwJsErrors) {
-        emitError(error);
-      }
+    if (throwJsErrors) {
+      emitError(error);
+    }
 
-      const errorHtml = handleError({ e: error, name: componentName, serverSide: true });
-      writeChunk(errorHtml);
-      endStream();
-    },
-    onShellReady() {
-      renderState.isShellReady = true;
-      pipeToTransform(renderingStream);
-    },
-    onError(e) {
-      if (!renderState.isShellReady) {
+    const errorHtml = handleError({ e: error, name: componentName, serverSide: true });
+    writeChunk(errorHtml);
+    endStream();
+  };
+
+  Promise.resolve(reactRenderingResult)
+    .then((reactRenderedElement) => {
+      if (typeof reactRenderedElement === 'string') {
+        console.error(
+          `Error: stream_react_component helper received a string instead of a React component for component "${componentName}".\n` +
+            'To benefit from React on Rails Pro streaming feature, your render function should return a React component.\n' +
+            'Do not call ReactDOMServer.renderToString() inside the render function as this defeats the purpose of streaming.\n',
+        );
+
+        writeChunk(reactRenderedElement);
+        endStream();
         return;
       }
-      const error = convertToError(e);
-      if (throwJsErrors) {
-        emitError(error);
-      }
-      renderState.hasErrors = true;
-      renderState.error = error;
-    },
-    identifierPrefix: domNodeId,
-  });
+
+      const renderingStream = ReactDOMServer.renderToPipeableStream(reactRenderedElement, {
+        onShellError,
+        onShellReady() {
+          renderState.isShellReady = true;
+          pipeToTransform(renderingStream);
+        },
+        onError(e) {
+          if (!renderState.isShellReady) {
+            return;
+          }
+          const error = convertToError(e);
+          if (throwJsErrors) {
+            emitError(error);
+          }
+          renderState.hasErrors = true;
+          renderState.error = error;
+        },
+        identifierPrefix: domNodeId,
+      });
+    })
+    .catch(onShellError);
 
   return readableStream;
 };
 
-type StreamRenderer<T, P extends RenderParams> = (reactElement: ReactElement, options: P) => T;
+type StreamRenderer<T, P extends RenderParams> = (
+  reactElement: ReactElement | Promise<ReactElement | string>,
+  options: P,
+) => T;
 
 export const streamServerRenderedComponent = <T, P extends RenderParams>(
   options: P,
@@ -194,7 +218,7 @@ export const streamServerRenderedComponent = <T, P extends RenderParams>(
       railsContext,
     });
 
-    if (isServerRenderHash(reactRenderingResult) || isPromise(reactRenderingResult)) {
+    if (isServerRenderHash(reactRenderingResult)) {
       throw new Error('Server rendering of streams is not supported for server render hashes or promises.');
     }
 

tsconfig.json

@@ -14,5 +14,5 @@
     "target": "es5",
     "typeRoots": ["./node_modules/@types", "./node_package/types"]
   },
-  "include": ["node_package/src/**/*", "node_package/types/**/*", "node_package/tests/**/*"]
+  "include": ["node_package/src/**/*", "node_package/types/**/*"]
 }