add support for returning promise of react component from render function

Author: AbanoubGhadban

node_package/src/ReactOnRails.client.ts

@@ -341,6 +341,8 @@ ctx.ReactOnRails = {
   resetOptions(): void {
     this.options = Object.assign({}, DEFAULT_OPTIONS);
   },
+
+  isRSCBundle: false,
 };
 
 ctx.ReactOnRails.resetOptions();

node_package/src/ReactOnRailsRSC.ts

@@ -21,18 +21,17 @@ 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,
     hasErrors: false,
     isShellReady: true,
   };
 
-  const { pipeToTransform, readableStream, emitError } =
-    transformRenderStreamChunksToResultObject(renderState);
-  loadJsonFile(reactClientManifestFileName)
-    .then((reactClientManifest) => {
+  const { pipeToTransform, readableStream, emitError } = transformRenderStreamChunksToResultObject(renderState);
+  Promise.all([loadJsonFile(reactClientManifestFileName), reactRenderingResult])
+    .then(([reactClientManifest, reactElement]) => {
       const rscStream = renderToPipeableStream(reactElement, reactClientManifest, {
         onError: (err) => {
           const error = convertToError(err);
@@ -65,5 +64,7 @@ ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
   }
 };
 
+ReactOnRails.isRSCBundle = true;
+
 export * from './types';
 export default ReactOnRails;

node_package/src/createReactOutput.ts

@@ -8,6 +8,26 @@ import type {
 } from './types/index';
 import { isServerRenderHash, isPromise } from './isServerRenderResult';
 
+export function createReactElementFromRenderFunction(
+  renderFunctionResult: ReactComponent,
+  name: string,
+  props: Record<string, unknown> | undefined,
+): React.ReactElement {
+  if (React.isValidElement(renderFunctionResult)) {
+    // If already a ReactElement, then just return it.
+    console.error(
+`Warning: ReactOnRails: Your registered render-function (ReactOnRails.register) for ${name}
+incorrectly returned a React Element (JSX). Instead, return a React Function Component by
+wrapping your JSX in a function. ReactOnRails v13 will throw error on this, as React Hooks do not
+work if you return JSX. Update by wrapping the result JSX of ${name} in a fat arrow function.`);
+    return renderFunctionResult;
+  }
+
+  // If a component, then wrap in an element
+  const reactComponent = renderFunctionResult as ReactComponent;
+  return React.createElement(reactComponent, props);
+}
+
 /**
  * Logic to either call the renderFunction or call React.createElement to get the
  * React.Component
@@ -62,23 +82,13 @@ export default function createReactOutput({
     if (isPromise(renderFunctionResult as CreateReactOutputResult)) {
       // We just return at this point, because calling function knows how to handle this case and
       // we can't call React.createElement with this type of Object.
-      return renderFunctionResult as Promise<string>;
-    }
-
-    if (React.isValidElement(renderFunctionResult)) {
-      // If already a ReactElement, then just return it.
-      console.error(
-        `Warning: ReactOnRails: Your registered render-function (ReactOnRails.register) for ${name}
-incorrectly returned a React Element (JSX). Instead, return a React Function Component by
-wrapping your JSX in a function. ReactOnRails v13 will throw error on this, as React Hooks do not
-work if you return JSX. Update by wrapping the result JSX of ${name} in a fat arrow function.`,
-      );
-      return renderFunctionResult;
+      return (renderFunctionResult as Promise<string | ReactComponent>).then((result) => {
+        if (typeof result === 'string') return result;
+        return createReactElementFromRenderFunction(result, name, props)
+      });
     }
 
-    // If a component, then wrap in an element
-    const reactComponent = renderFunctionResult as ReactComponent;
-    return React.createElement(reactComponent, props);
+    return createReactElementFromRenderFunction(renderFunctionResult as ReactComponent, name, props);
   }
   // else
   return React.createElement(component as ReactComponent, props);

node_package/src/serverRenderReactComponent.ts

@@ -42,21 +42,6 @@ function processServerRenderHash(result: ServerRenderResult, options: RenderOpti
   return { result: htmlResult, hasErrors };
 }
 
-function processPromise(
-  result: Promise<string>,
-  renderingReturnsPromises: boolean,
-): Promise<string> | string {
-  if (!renderingReturnsPromises) {
-    console.error(
-      'Your render function returned a Promise, which is only supported by a node renderer, not ExecJS.',
-    );
-    // If the app is using server rendering with ExecJS, then the promise will not be awaited.
-    // And when a promise is passed to JSON.stringify, it will be converted to '{}'.
-    return '{}';
-  }
-  return result;
-}
-
 function processReactElement(result: ReactElement): string {
   try {
     return ReactDOMServer.renderToString(result);
@@ -68,6 +53,24 @@ as a renderFunction and not a simple React Function Component.`);
   }
 }
 
+function processPromise(
+  result: Promise<string | ReactElement>,
+  renderingReturnsPromises: boolean,
+): Promise<string> | string {
+  if (!renderingReturnsPromises) {
+    console.error('Your render function returned a Promise, which is only supported by a node renderer, not ExecJS.');
+    // If the app is using server rendering with ExecJS, then the promise will not be awaited.
+    // And when a promise is passed to JSON.stringify, it will be converted to '{}'.
+    return '{}';
+  }
+  return result.then((result) => {
+    if (typeof result !== 'string') {
+      return processReactElement(result);
+    }
+    return result;
+  });
+}
+
 function processRenderingResult(result: CreateReactOutputResult, options: RenderOptions): RenderState {
   if (isServerRenderHash(result)) {
     return processServerRenderHash(result, options);

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';
@@ -158,7 +158,7 @@ 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,
@@ -169,42 +169,59 @@ 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;
+  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'
+      );
 
-      if (throwJsErrors) {
-        emitError(error);
-      }
-
-      const errorHtml = handleError({ e: error, name: componentName, serverSide: true });
-      writeChunk(errorHtml);
+      writeChunk(reactRenderedElement);
       endStream();
-    },
-    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,
+      return;
+    }
+
+    const renderingStream = ReactDOMServer.renderToPipeableStream(reactRenderedElement, {
+      onShellError(e) {
+        const error = convertToError(e);
+        renderState.hasErrors = true;
+        renderState.error = 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) {
+          return;
+        }
+        const error = convertToError(e);
+        if (throwJsErrors) {
+          emitError(error);
+        }
+        renderState.hasErrors = true;
+        renderState.error = error;
+      },
+      identifierPrefix: domNodeId,
+    });
   });
 
   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,
@@ -224,7 +241,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.');
     }
 

node_package/src/types/index.ts

@@ -49,9 +49,9 @@ interface ServerRenderResult {
   error?: Error;
 }
 
-type CreateReactOutputResult = ServerRenderResult | ReactElement | Promise<string>;
+type CreateReactOutputResult = ServerRenderResult | ReactElement | Promise<string | ReactElement>;
 
-type RenderFunctionResult = ReactComponent | ServerRenderResult | Promise<string>;
+type RenderFunctionResult = ReactComponent | ServerRenderResult | Promise<string | ReactComponent>;
 
 /**
  * Render functions are used to create dynamic React components or server-rendered HTML with side effects.