add support for returning react component from async render function

Author: AbanoubGhadban

node_package/src/createReactOutput.ts

@@ -2,6 +2,26 @@ import * as React from 'react';
 import type { CreateParams, ReactComponent, RenderFunction, CreateReactOutputResult } from './types/index';
 import { isServerRenderHash, isPromise } from './isServerRenderResult';
 
+function createReactElementFromRenderFunctionResult(
+  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
+  return React.createElement(renderFunctionResult, props);
+}
+
 /**
  * Logic to either call the renderFunction or call React.createElement to get the
  * React.Component
@@ -60,24 +80,15 @@ export default function createReactOutput({
         if (typeof result === 'string') {
           return result;
         }
+        // If the result is a function, then it returned a React Component (even class components are functions).
+        if (typeof result === 'function') {
+          return createReactElementFromRenderFunctionResult(result, name, props);
+        }
         return JSON.stringify(result);
       });
     }
 
-    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;
-    return React.createElement(reactComponent, props);
+    return createReactElementFromRenderFunctionResult(renderFunctionResult, name, props);
   }
   // else
   return React.createElement(component as ReactComponent, props);

node_package/src/serverRenderReactComponent.ts

@@ -44,8 +44,19 @@ function processServerRenderHash(result: ServerRenderResult, options: RenderOpti
   return { result: htmlResult, hasErrors };
 }
 
+function processReactElement(result: ReactElement): string {
+  try {
+    return ReactDOMServer.renderToString(result);
+  } catch (error) {
+    console.error(`Invalid call to renderToString. Possibly you have a renderFunction, a function that already
+calls renderToString, that takes one parameter. You need to add an extra unused parameter to identify this function
+as a renderFunction and not a simple React Function Component.`);
+    throw error;
+  }
+}
+
 function processPromise(
-  result: Promise<string>,
+  result: Promise<string | ReactElement>,
   renderingReturnsPromises: boolean,
 ): Promise<string> | string {
   if (!renderingReturnsPromises) {
@@ -56,18 +67,12 @@ function processPromise(
     // 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);
-  } catch (error) {
-    console.error(`Invalid call to renderToString. Possibly you have a renderFunction, a function that already
-calls renderToString, that takes one parameter. You need to add an extra unused parameter to identify this function
-as a renderFunction and not a simple React Function Component.`);
-    throw error;
-  }
+  return result.then((promiseResult) => {
+    if (typeof promiseResult === 'string') {
+      return promiseResult;
+    }
+    return processReactElement(promiseResult);
+  });
 }
 
 function processRenderingResult(result: CreateReactOutputResult, options: RenderOptions): RenderState {

node_package/src/types/index.ts

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