update TS types to handle the case when render function return object

Author: AbanoubGhadban

node_package/src/createReactOutput.ts

@@ -1,11 +1,5 @@
 import * as React from 'react';
-import type {
-  ServerRenderResult,
-  CreateParams,
-  ReactComponent,
-  RenderFunction,
-  CreateReactOutputResult,
-} from './types/index';
+import type { CreateParams, ReactComponent, RenderFunction, CreateReactOutputResult } from './types/index';
 import { isServerRenderHash, isPromise } from './isServerRenderResult';
 
 /**
@@ -53,16 +47,21 @@ export default function createReactOutput({
       console.log(`${name} is a renderFunction`);
     }
     const renderFunctionResult = (component as RenderFunction)(props, railsContext);
-    if (isServerRenderHash(renderFunctionResult as CreateReactOutputResult)) {
+    if (isServerRenderHash(renderFunctionResult)) {
       // 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 ServerRenderResult;
+      return renderFunctionResult;
     }
 
-    if (isPromise(renderFunctionResult as CreateReactOutputResult)) {
+    if (isPromise(renderFunctionResult)) {
       // 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>;
+      return renderFunctionResult.then((result) => {
+        if (typeof result === 'string') {
+          return result;
+        }
+        return JSON.stringify(result);
+      });
     }
 
     if (React.isValidElement(renderFunctionResult)) {
@@ -77,7 +76,7 @@ work if you return JSX. Update by wrapping the result JSX of ${name} in a fat ar
     }
 
     // If a component, then wrap in an element
-    const reactComponent = renderFunctionResult as ReactComponent;
+    const reactComponent = renderFunctionResult;
     return React.createElement(reactComponent, props);
   }
   // else

node_package/src/isServerRenderResult.ts

@@ -1,6 +1,8 @@
-import type { CreateReactOutputResult, ServerRenderResult } from './types/index';
+import type { CreateReactOutputResult, ServerRenderResult, RenderFunctionResult } from './types/index';
 
-export function isServerRenderHash(testValue: CreateReactOutputResult): testValue is ServerRenderResult {
+export function isServerRenderHash(
+  testValue: CreateReactOutputResult | RenderFunctionResult,
+): testValue is ServerRenderResult {
   return !!(
     (testValue as ServerRenderResult).renderedHtml ||
     (testValue as ServerRenderResult).redirectLocation ||
@@ -10,7 +12,7 @@ export function isServerRenderHash(testValue: CreateReactOutputResult): testValu
 }
 
 export function isPromise<T>(
-  testValue: CreateReactOutputResult | Promise<T> | string | null,
+  testValue: CreateReactOutputResult | RenderFunctionResult | Promise<T> | string | null,
 ): testValue is Promise<T> {
   return !!(testValue as Promise<T> | null)?.then;
 }

node_package/src/serverRenderReactComponent.ts

@@ -35,8 +35,10 @@ function processServerRenderHash(result: ServerRenderResult, options: RenderOpti
     // For redirects on server rendering, we can't stop Rails from returning the same result.
     // Possibly, someday, we could have the Rails server redirect.
     htmlResult = '';
+  } else if (typeof result.renderedHtml === 'string') {
+    htmlResult = result.renderedHtml;
   } else {
-    htmlResult = result.renderedHtml as string;
+    htmlResult = JSON.stringify(result.renderedHtml);
   }
 
   return { result: htmlResult, hasErrors };

node_package/src/types/index.ts

@@ -42,16 +42,24 @@ type AuthenticityHeaders = Record<string, string> & {
 
 type StoreGenerator = (props: Record<string, unknown>, railsContext: RailsContext) => Store;
 
+type ServerRenderHashRenderedHtml = {
+  componentHtml: string;
+  [key: string]: string;
+};
+
 interface ServerRenderResult {
-  renderedHtml?: string | { componentHtml: string; [key: string]: string };
+  renderedHtml?: string | ServerRenderHashRenderedHtml;
   redirectLocation?: { pathname: string; search: string };
   routeError?: Error;
   error?: Error;
 }
 
 type CreateReactOutputResult = ServerRenderResult | ReactElement | Promise<string>;
 
-type RenderFunctionResult = ReactComponent | ServerRenderResult | Promise<string>;
+type RenderFunctionResult =
+  | ReactComponent
+  | ServerRenderResult
+  | Promise<string | ServerRenderHashRenderedHtml>;
 
 /**
  * Render functions are used to create dynamic React components or server-rendered HTML with side effects.

node_package/tests/serverRenderReactComponent.test.ts

@@ -183,15 +183,15 @@ describe('serverRenderReactComponent', () => {
     await expect(renderResult.then((r) => r.hasErrors)).resolves.toBeFalsy();
   });
 
-  // When an async render function returns an object, serverRenderReactComponent will return the object as is.
-  // It does not validate properties like renderedHtml or hasErrors; it simply returns the object.
+  // When an async render function returns an object, serverRenderReactComponent will return the object as it after stringifying it.
+  // It does not validate properties like renderedHtml or hasErrors; it simply returns the stringified object.
   // This behavior can cause issues with the ruby_on_rails gem.
   // To avoid such issues, ensure that the returned object includes a `componentHtml` property and use the `react_component_hash` helper.
   // This is demonstrated in the "can render async render function used with react_component_hash helper" test.
   it('serverRenderReactComponent returns the object returned by the async render function', async () => {
-    const expectedHtml = '<div>Hello</div>';
+    const resultObject = { renderedHtml: '<div>Hello</div>' };
     const X6 = ((_props: unknown, _railsContext?: RailsContext): Promise<ServerRenderResult> =>
-      Promise.resolve({ renderedHtml: expectedHtml })) as RenderFunction;
+      Promise.resolve(resultObject)) as RenderFunction;
 
     ComponentRegistry.register({ X6 });
 
@@ -205,16 +205,16 @@ describe('serverRenderReactComponent', () => {
 
     const renderResult = serverRenderReactComponent(renderParams);
     assertIsPromise(renderResult);
-    const html = (await renderResult.then((r) => r.html)) as ServerRenderResult;
-    expectMatchObject(html, { renderedHtml: expectedHtml });
+    const html = await renderResult.then((r) => r.html);
+    expect(html).toEqual(JSON.stringify(resultObject));
   });
 
   // Because the object returned by the async render function is returned as it is,
   // we can make the async render function returns an object with `componentHtml` property.
   // This is useful when we want to render a component using the `react_component_hash` helper.
   it('can render async render function used with react_component_hash helper', async () => {
-    const X7 = (_props: unknown, _railsContext?: RailsContext) =>
-      Promise.resolve({ componentHtml: '<div>Hello</div>' });
+    const reactComponentHashResult = { componentHtml: '<div>Hello</div>' };
+    const X7 = (_props: unknown, _railsContext?: RailsContext) => Promise.resolve(reactComponentHashResult);
 
     ComponentRegistry.register({ X7: X7 as unknown as RenderFunction });
 
@@ -229,7 +229,7 @@ describe('serverRenderReactComponent', () => {
     const renderResult = serverRenderReactComponent(renderParams);
     assertIsPromise(renderResult);
     const result = await renderResult;
-    expect(result.html).toMatchObject({ componentHtml: '<div>Hello</div>' });
+    expect(result.html).toEqual(JSON.stringify(reactComponentHashResult));
   });
 
   it('serverRenderReactComponent renders an error if attempting to render a renderer', () => {