keep html in final render result as object instead of stringifying it

Author: AbanoubGhadban

node_package/src/createReactOutput.ts

@@ -77,14 +77,11 @@ export default function createReactOutput({
       // 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.then((result) => {
-        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);
+        return result;
       });
     }
 

node_package/src/isServerRenderResult.ts

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

node_package/src/serverRenderReactComponent.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import * as ReactDOMServer from 'react-dom/server';
 import type { ReactElement } from 'react';
 
@@ -14,6 +15,8 @@ import type {
   RenderState,
   RenderOptions,
   ServerRenderResult,
+  CreateReactOutputAsyncResult,
+  RenderStateHtml,
 } from './types';
 
 function processServerRenderHash(result: ServerRenderResult, options: RenderOptions): RenderState {
@@ -24,7 +27,7 @@ function processServerRenderHash(result: ServerRenderResult, options: RenderOpti
     console.error(`React Router ERROR: ${JSON.stringify(routeError)}`);
   }
 
-  let htmlResult: string;
+  let htmlResult;
   if (redirectLocation) {
     if (options.trace) {
       const redirectPath = redirectLocation.pathname + redirectLocation.search;
@@ -35,13 +38,11 @@ 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 = JSON.stringify(result.renderedHtml);
+    htmlResult = result.renderedHtml;
   }
 
-  return { result: htmlResult, hasErrors };
+  return { result: htmlResult ?? null, hasErrors };
 }
 
 function processReactElement(result: ReactElement): string {
@@ -56,9 +57,9 @@ as a renderFunction and not a simple React Function Component.`);
 }
 
 function processPromise(
-  result: Promise<string | ReactElement>,
+  result: CreateReactOutputAsyncResult,
   renderingReturnsPromises: boolean,
-): Promise<string> | string {
+): RenderStateHtml {
   if (!renderingReturnsPromises) {
     console.error(
       'Your render function returned a Promise, which is only supported by a node renderer, not ExecJS.',
@@ -68,10 +69,10 @@ function processPromise(
     return '{}';
   }
   return result.then((promiseResult) => {
-    if (typeof promiseResult === 'string') {
-      return promiseResult;
+    if (React.isValidElement(promiseResult)) {
+      return processReactElement(promiseResult);
     }
-    return processReactElement(promiseResult);
+    return promiseResult;
   });
 }
 
@@ -98,7 +99,7 @@ function handleRenderingError(e: unknown, options: { componentName: string; thro
 }
 
 async function createPromiseResult(
-  renderState: RenderState & { result: Promise<string> },
+  renderState: RenderState,
   componentName: string,
   throwJsErrors: boolean,
 ): Promise<RenderResult> {

node_package/src/serverRenderUtils.ts

@@ -1,7 +1,13 @@
-import type { RegisteredComponent, RenderResult, RenderState, StreamRenderState } from './types';
+import type {
+  RegisteredComponent,
+  RenderResult,
+  RenderState,
+  StreamRenderState,
+  FinalHtmlResult,
+} from './types';
 
 export function createResultObject(
-  html: string | null,
+  html: FinalHtmlResult | null,
   consoleReplayScript: string,
   renderState: RenderState | StreamRenderState,
 ): RenderResult {

node_package/src/streamServerRenderedReactComponent.ts

@@ -1,10 +1,11 @@
+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 { isServerRenderHash } from './isServerRenderResult';
+import { isPromise, isServerRenderHash } from './isServerRenderResult';
 import buildConsoleReplay from './buildConsoleReplay';
 import handleError from './handleError';
 import { createResultObject, convertToError, validateComponent } from './serverRenderUtils';
@@ -211,7 +212,21 @@ export const streamServerRenderedComponent = <T, P extends RenderParams>(
     });
 
     if (isServerRenderHash(reactRenderingResult)) {
-      throw new Error('Server rendering of streams is not supported for server render hashes or promises.');
+      throw new Error('Server rendering of streams is not supported for server render hashes.');
+    }
+
+    if (isPromise(reactRenderingResult)) {
+      const promiseAfterRejectingHash = reactRenderingResult.then((result) => {
+        if (!React.isValidElement(result)) {
+          throw new Error(
+            `Invalid React element detected while rendering ${componentName}. If you are trying to stream a component registered as a render function, ` +
+              `please ensure that the render function returns a valid React component, not a server render hash. ` +
+              `This error typically occurs when the render function does not return a React element or returns an incorrect type.`,
+          );
+        }
+        return result;
+      });
+      return renderStrategy(promiseAfterRejectingHash, options);
     }
 
     return renderStrategy(reactRenderingResult, options);

node_package/src/transformRSCStreamAndReplayConsoleLogs.ts

@@ -1,4 +1,4 @@
-import { RenderResult } from './types';
+import { RSCPayloadChunk } from './types';
 
 export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableStream<Uint8Array>) {
   return new ReadableStream({
@@ -18,7 +18,7 @@ export default function transformRSCStreamAndReplayConsoleLogs(stream: ReadableS
           .filter((line) => line.trim() !== '')
           .map((line) => {
             try {
-              return JSON.parse(line) as RenderResult;
+              return JSON.parse(line) as RSCPayloadChunk;
             } catch (error) {
               console.error('Error parsing JSON:', line, error);
               throw error;

node_package/src/types/index.ts

@@ -54,12 +54,17 @@ interface ServerRenderResult {
   error?: Error;
 }
 
-type CreateReactOutputResult = ServerRenderResult | ReactElement | Promise<string | ReactElement>;
+type CreateReactOutputSyncResult = ServerRenderResult | ReactElement<unknown>;
 
-type RenderFunctionResult =
-  | ReactComponent
-  | ServerRenderResult
-  | Promise<string | ServerRenderHashRenderedHtml | ReactComponent>;
+type CreateReactOutputAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactElement<unknown>>;
+
+type CreateReactOutputResult = CreateReactOutputSyncResult | CreateReactOutputAsyncResult;
+
+type RenderFunctionSyncResult = ReactComponent | ServerRenderResult;
+
+type RenderFunctionAsyncResult = Promise<string | ServerRenderHashRenderedHtml | ReactComponent>;
+
+type RenderFunctionResult = RenderFunctionSyncResult | RenderFunctionAsyncResult;
 
 /**
  * Render functions are used to create dynamic React components or server-rendered HTML with side effects.
@@ -104,6 +109,11 @@ export type {
   StoreGenerator,
   CreateReactOutputResult,
   ServerRenderResult,
+  ServerRenderHashRenderedHtml,
+  CreateReactOutputSyncResult,
+  CreateReactOutputAsyncResult,
+  RenderFunctionSyncResult,
+  RenderFunctionAsyncResult,
 };
 
 export interface RegisteredComponent {
@@ -160,14 +170,20 @@ export interface ErrorOptions {
 
 export type RenderingError = Pick<Error, 'message' | 'stack'>;
 
+export type FinalHtmlResult = string | ServerRenderHashRenderedHtml;
+
 export interface RenderResult {
-  html: string | null;
+  html: FinalHtmlResult | null;
   consoleReplayScript: string;
   hasErrors: boolean;
   renderingError?: RenderingError;
   isShellReady?: boolean;
 }
 
+export interface RSCPayloadChunk extends RenderResult {
+  html: string;
+}
+
 // from react-dom 18
 export interface Root {
   render(children: ReactNode): void;
@@ -211,8 +227,10 @@ export interface ReactOnRails {
   options: Record<string, string | number | boolean>;
 }
 
+export type RenderStateHtml = FinalHtmlResult | Promise<FinalHtmlResult>;
+
 export type RenderState = {
-  result: null | string | Promise<string>;
+  result: null | RenderStateHtml;
   hasErrors: boolean;
   error?: RenderingError;
 };

node_package/tests/serverRenderReactComponent.test.ts

@@ -52,6 +52,7 @@ describe('serverRenderReactComponent', () => {
     assertIsString(renderResult);
     const { html, hasErrors }: RenderResult = JSON.parse(renderResult) as RenderResult;
 
+    assertIsString(html);
     const result = html && html.indexOf('>HELLO</div>') > 0;
     expect(result).toBeTruthy();
     expect(hasErrors).toBeFalsy();
@@ -76,6 +77,7 @@ describe('serverRenderReactComponent', () => {
     assertIsString(renderResult);
     const { html, hasErrors }: RenderResult = JSON.parse(renderResult) as RenderResult;
 
+    assertIsString(html);
     const result = html && html.indexOf('XYZ') > 0 && html.indexOf('Exception in rendering!') > 0;
     expect(result).toBeTruthy();
     expect(hasErrors).toBeTruthy();
@@ -183,8 +185,8 @@ 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 it after stringifying it.
-  // It does not validate properties like renderedHtml or hasErrors; it simply returns the stringified object.
+  // When an async render function returns an object, serverRenderReactComponent will return the object as it is.
+  // It does not validate properties like renderedHtml or hasErrors; it simply returns the 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.
@@ -206,7 +208,7 @@ describe('serverRenderReactComponent', () => {
     const renderResult = serverRenderReactComponent(renderParams);
     assertIsPromise(renderResult);
     const html = await renderResult.then((r) => r.html);
-    expect(html).toEqual(JSON.stringify(resultObject));
+    expect(html).toMatchObject(resultObject);
   });
 
   // Because the object returned by the async render function is returned as it is,
@@ -229,7 +231,7 @@ describe('serverRenderReactComponent', () => {
     const renderResult = serverRenderReactComponent(renderParams);
     assertIsPromise(renderResult);
     const result = await renderResult;
-    expect(result.html).toEqual(JSON.stringify(reactComponentHashResult));
+    expect(result.html).toMatchObject(reactComponentHashResult);
   });
 
   it('serverRenderReactComponent renders async render function that returns react component', async () => {
@@ -270,6 +272,7 @@ describe('serverRenderReactComponent', () => {
     assertIsString(renderResult);
     const { html, hasErrors }: RenderResult = JSON.parse(renderResult) as RenderResult;
 
+    assertIsString(html);
     const result = html && html.indexOf('renderer') > 0 && html.indexOf('Exception in rendering!') > 0;
     expect(result).toBeTruthy();
     expect(hasErrors).toBeTruthy();