add tests for the behavior of returning ReactComponents from render functions

Author: AbanoubGhadban

node_package/src/RSCServerRoot.ts

@@ -1,58 +1,58 @@
-import * as React from 'react';
-import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
-import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
-import loadJsonFile from './loadJsonFile';
-
-if (!('use' in React && typeof React.use === 'function')) {
-  throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
-}
-
-const { use } = React;
-
-export type RSCServerRootProps = {
-  getRscPromise: NodeJS.ReadableStream,
-  reactClientManifestFileName: string,
-  reactServerManifestFileName: string,
-}
-
-const createFromFetch = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
-  const transformedStream = transformRSCStream(stream);
-  return createFromNodeStream(transformedStream, ssrManifest);
-}
-
-const createSSRManifest = (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
-  const reactServerManifest = loadJsonFile(reactServerManifestFileName);
-  const reactClientManifest = loadJsonFile(reactClientManifestFileName);
-
-  const ssrManifest = {
-    moduleLoading: {
-      prefix: "/webpack/development/",
-      crossOrigin: null,
-    },
-    moduleMap: {} as Record<string, unknown>,
-  };
-
-  Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
-    const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
-    ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
-      '*': {
-        id: (serverFileBundlingInfo as { id: string }).id,
-        chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
-        name: '*',
-      }
-    };
-  });
-
-  return ssrManifest;
-}
-
-const RSCServerRoot = ({
-  getRscPromise,
-  reactClientManifestFileName,
-  reactServerManifestFileName,
-}: RSCServerRootProps) => {
-  const ssrManifest = createSSRManifest(reactServerManifestFileName, reactClientManifestFileName);
-  return use(createFromFetch(getRscPromise, ssrManifest));
-};
-
-export default RSCServerRoot;
+// import * as React from 'react';
+// import { createFromNodeStream } from 'react-on-rails-rsc/client.node';
+// import transformRSCStream from './transformRSCNodeStreamAndReplayConsoleLogs';
+// import loadJsonFile from './loadJsonFile';
+
+// if (!('use' in React && typeof React.use === 'function')) {
+//   throw new Error('React.use is not defined. Please ensure you are using React 18 with experimental features enabled or React 19+ to use server components.');
+// }
+
+// const { use } = React;
+
+// export type RSCServerRootProps = {
+//   getRscPromise: NodeJS.ReadableStream,
+//   reactClientManifestFileName: string,
+//   reactServerManifestFileName: string,
+// }
+
+// const createFromFetch = (stream: NodeJS.ReadableStream, ssrManifest: Record<string, unknown>) => {
+//   const transformedStream = transformRSCStream(stream);
+//   return createFromNodeStream(transformedStream, ssrManifest);
+// }
+
+// const createSSRManifest = (reactServerManifestFileName: string, reactClientManifestFileName: string) => {
+//   const reactServerManifest = loadJsonFile(reactServerManifestFileName);
+//   const reactClientManifest = loadJsonFile(reactClientManifestFileName);
+
+//   const ssrManifest = {
+//     moduleLoading: {
+//       prefix: "/webpack/development/",
+//       crossOrigin: null,
+//     },
+//     moduleMap: {} as Record<string, unknown>,
+//   };
+
+//   Object.entries(reactClientManifest).forEach(([aboluteFileUrl, clientFileBundlingInfo]) => {
+//     const serverFileBundlingInfo = reactServerManifest[aboluteFileUrl];
+//     ssrManifest.moduleMap[(clientFileBundlingInfo as { id: string }).id] = {
+//       '*': {
+//         id: (serverFileBundlingInfo as { id: string }).id,
+//         chunks: (serverFileBundlingInfo as { chunks: string[] }).chunks,
+//         name: '*',
+//       }
+//     };
+//   });
+
+//   return ssrManifest;
+// }
+
+// const RSCServerRoot = ({
+//   getRscPromise,
+//   reactClientManifestFileName,
+//   reactServerManifestFileName,
+// }: RSCServerRootProps) => {
+//   const ssrManifest = createSSRManifest(reactServerManifestFileName, reactClientManifestFileName);
+//   return use(createFromFetch(getRscPromise, ssrManifest));
+// };
+
+// export default RSCServerRoot;

node_package/src/serverRenderReactComponent.ts

@@ -94,7 +94,7 @@ function handleRenderingError(e: unknown, options: { componentName: string; thro
 }
 
 async function createPromiseResult(
-  renderState: RenderState & { result: Promise<string> },
+  renderState: RenderState & { result: Promise<string | ReactElement> },
   componentName: string,
   throwJsErrors: boolean,
 ): Promise<RenderResult> {

node_package/tests/serverRenderReactComponent.test.js

@@ -68,7 +68,7 @@ describe('serverRenderReactComponent', () => {
     expect(result).toBeTruthy();
   });
 
-  it('serverRenderReactComponent renders promises', async () => {
+  it('serverRenderReactComponent renders promises that return strings', async () => {
     expect.assertions(2);
     const expectedHtml = '<div>Hello</div>';
     const X5 = (props, _railsContext) => Promise.resolve(expectedHtml);
@@ -86,4 +86,26 @@ describe('serverRenderReactComponent', () => {
     expect(html).toEqual(expectedHtml);
     expect(renderResult.hasErrors).toBeFalsy();
   });
+
+  it('serverRenderReactComponent renders promises that return React components', async () => {
+    expect.assertions(2);
+    const AsyncComponent = () => <div>Async Component</div>;
+    // Return a promise that resolves to a React component
+    const X6 = (_, _railsContext) => Promise.resolve(AsyncComponent);
+
+    ComponentRegistry.register({ X6 });
+
+    const renderResult = await serverRenderReactComponent({
+      name: 'X6',
+      domNodeId: 'myDomId',
+      trace: false,
+      renderingReturnsPromises: true,
+    });
+    const html = await renderResult.html;
+
+    // Verify the component was rendered correctly
+    const result = html.indexOf('>Async Component</div>') > 0;
+    expect(result).toBeTruthy();
+    expect(renderResult.hasErrors).toBeFalsy();
+  });
 });

node_package/tests/streamServerRenderedReactComponent.test.jsx

@@ -60,8 +60,24 @@ describe('streamServerRenderedReactComponent', () => {
     throwSyncError = false,
     throwJsErrors = false,
     throwAsyncError = false,
+    componentType = 'reactComponent',
   } = {}) => {
-    ComponentRegistry.register({ TestComponentForStreaming });
+    switch (componentType) {
+      case 'reactComponent':
+        ComponentRegistry.register({ TestComponentForStreaming });
+        break;
+      case 'renderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (props, _railsContext) => () => <TestComponentForStreaming {...props} />,
+        });
+        break;
+      case 'asyncRenderFunction':
+        ComponentRegistry.register({
+          TestComponentForStreaming: (props, _railsContext) => () =>
+            Promise.resolve(<TestComponentForStreaming {...props} />),
+        });
+        break;
+    }
     const renderResult = streamServerRenderedReactComponent({
       name: 'TestComponentForStreaming',
       domNodeId: 'myDomId',
@@ -169,4 +185,47 @@ describe('streamServerRenderedReactComponent', () => {
     expect(chunks[1].hasErrors).toBe(true);
     expect(chunks[1].isShellReady).toBe(true);
   });
+
+  it.each(['asyncRenderFunction', 'renderFunction'])(
+    'streams a component from a %s that resolves to a React component',
+    async (componentType) => {
+      const { renderResult, chunks } = setupStreamTest({ componentType });
+      await new Promise((resolve) => renderResult.on('end', resolve));
+
+      expect(chunks).toHaveLength(2);
+      expect(chunks[0].html).toContain('Header In The Shell');
+      expect(chunks[0].consoleReplayScript).toBe('');
+      expect(chunks[0].hasErrors).toBe(false);
+      expect(chunks[0].isShellReady).toBe(true);
+      expect(chunks[1].html).toContain('Async Content');
+      expect(chunks[1].consoleReplayScript).toBe('');
+      expect(chunks[1].hasErrors).toBe(false);
+      expect(chunks[1].isShellReady).toBe(true);
+    },
+  );
+
+  it('streams a string from a Promise that resolves to a string', async () => {
+    const StringPromiseComponent = () => Promise.resolve('<div>String from Promise</div>');
+    ComponentRegistry.register({ StringPromiseComponent });
+
+    const renderResult = streamServerRenderedReactComponent({
+      name: 'StringPromiseComponent',
+      domNodeId: 'stringPromiseId',
+      trace: false,
+      throwJsErrors: false,
+    });
+
+    const chunks = [];
+    renderResult.on('data', (chunk) => {
+      const decodedText = new TextDecoder().decode(chunk);
+      chunks.push(expectStreamChunk(decodedText));
+    });
+
+    await new Promise((resolve) => renderResult.on('end', resolve));
+
+    // Verify we have at least one chunk and it contains our string
+    expect(chunks.length).toBeGreaterThan(0);
+    expect(chunks[0].html).toContain('String from Promise');
+    expect(chunks[0].hasErrors).toBe(false);
+  });
 });