refactor: enhance error handling and improve code clarity in server component rendering and tests

Author: AbanoubGhadban

jest.config.js

@@ -14,8 +14,7 @@ export default {
   }),
   testEnvironment: 'jsdom',
   setupFiles: ['<rootDir>/node_package/tests/jest.setup.js'],
-  // React Server Components tests are compatible with React 19
-  // That only run with node version 18 and above
+  // React Server Components tests require React 19 and only run with Node version 18 (`newest` in our CI matrix)
   moduleNameMapper:
     nodeVersion < 18
       ? {

node_package/src/injectRSCPayload.ts

@@ -1,5 +1,6 @@
 import { PipeableStream } from 'react-dom/server';
 import { PassThrough, Transform } from 'stream';
+import { finished } from 'stream/promises';
 import { RailsContextWithServerComponentCapabilities } from './types/index.ts';
 
 // In JavaScript, when an escape sequence with a backslash (\) is followed by a character
@@ -90,15 +91,7 @@ export default function injectRSCPayload(
         );
       });
 
-      await new Promise((resolve) => {
-        if (htmlStream.readableEnded) {
-          resolve(Promise.all(rscPromises));
-        } else {
-          htmlStream.on('end', () => {
-            resolve(Promise.all(rscPromises));
-          });
-        }
-      });
+      await finished(htmlStream).then(() => Promise.all(rscPromises));
     } catch (err) {
       resultStream.emit('error', err);
     }

node_package/src/registerServerComponent/server.rsc.ts

@@ -14,8 +14,8 @@ import { ReactComponent, RenderFunction } from '../types/index.ts';
  * @example
  * ```js
  * registerServerComponent({
- *   ServerComponent1: ServerComponent1Component,
- *   ServerComponent2: ServerComponent2Component
+ *   ServerComponent1,
+ *   ServerComponent2,
  * });
  * ```
  */

node_package/src/wrapServerComponentRenderer/client.tsx

@@ -45,28 +45,29 @@ const wrapServerComponentRenderer = (componentOrRenderFunction: ReactComponentOr
       throw new Error('wrapServerComponentRenderer: component is not a function');
     }
 
+    if (!domNodeId) {
+      throw new Error('RSCClientRoot: No domNodeId provided');
+    }
+    const domNode = document.getElementById(domNodeId);
+    if (!domNode) {
+      throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
+    }
+
     assertRailsContextWithComponentSpecificMetadata(railsContext);
 
     const RSCProvider = createRSCProvider({
       railsContext,
       getServerComponent: getReactServerComponent,
     });
 
-    const SuspensableRSCRoute = (
-      <React.Suspense fallback={null}>
-        <Component {...props} />
-      </React.Suspense>
+    const root = (
+      <RSCProvider>
+        <React.Suspense fallback={null}>
+          <Component {...props} />
+        </React.Suspense>
+      </RSCProvider>
     );
 
-    const root = <RSCProvider>{SuspensableRSCRoute}</RSCProvider>;
-
-    if (!domNodeId) {
-      throw new Error('RSCClientRoot: No domNodeId provided');
-    }
-    const domNode = document.getElementById(domNodeId);
-    if (!domNode) {
-      throw new Error(`RSCClientRoot: No DOM node found for id: ${domNodeId}`);
-    }
     if (domNode.innerHTML) {
       ReactDOMClient.hydrateRoot(domNode, root, { identifierPrefix: domNodeId });
     } else {

node_package/src/wrapServerComponentRenderer/server.tsx

@@ -45,15 +45,13 @@ const wrapServerComponentRenderer = (componentOrRenderFunction: ReactComponentOr
       getServerComponent: getReactServerComponent,
     });
 
-    const suspensableServerComponent = (
-      <React.Suspense fallback={null}>
-        <Component {...props} />
-      </React.Suspense>
+    return () => (
+      <RSCProvider>
+        <React.Suspense fallback={null}>
+          <Component {...props} />
+        </React.Suspense>
+      </RSCProvider>
     );
-
-    const root = <RSCProvider>{suspensableServerComponent}</RSCProvider>;
-
-    return () => root;
   };
 
   return wrapper;

node_package/tests/SuspenseHydration.test.tsx

@@ -21,7 +21,7 @@ import { getNodeVersion } from './testUtils.js';
  * RSC payload to be present in the page before client-side hydration can occur.
  * And because the RSCRoute is rendered on the server because it's being hydrated on the client,
  * we can sure that the RSC payload is present in the page before the RSCRoute is hydrated on the client.
- * That's because `getRSCPayloadStream` function embeds the RSC payload immediately to the html stream even before the RSCRoute is rendered on the server.
+ * That's because `getRSCPayloadStream` function embeds the RSC payload immediately to the HTML stream even before the RSCRoute is rendered on the server.
  * Without this guarantee, hydration would fail or produce incorrect results.
  */
 
@@ -152,8 +152,7 @@ async function renderAndHydrate() {
   };
 }
 
-// React Server Components tests are compatible with React 19
-// That only run with node version 18 and above
+// React Server Components tests require React 19 and only run with Node version 18 (`newest` in our CI matrix)
 (getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
   beforeEach(() => {
     jest.clearAllMocks();

node_package/tests/registerServerComponent.client.test.jsx

@@ -16,8 +16,7 @@ import { clear as clearComponentRegistry } from '../src/ComponentRegistry.ts';
 
 enableFetchMocks();
 
-// React Server Components tests are compatible with React 19
-// That only run with node version 18 and above
+// React Server Components tests require React 19 and only run with Node version 18 (`newest` in our CI matrix)
 (getNodeVersion() >= 18 ? describe : describe.skip)('RSCClientRoot', () => {
   let container;
   const mockDomNodeId = 'test-container';
@@ -242,7 +241,7 @@ enableFetchMocks();
         document.dispatchEvent(new Event('DOMContentLoaded'));
       });
 
-      // After second chunk, AsyncComponent should now be visible and loading indicator gone
+      // After the second chunk, AsyncComponent should now be visible and loading indicator gone
       expect(screen.getByText('AsyncComponent')).toBeInTheDocument();
       expect(screen.queryByText('Loading AsyncComponent...')).not.toBeInTheDocument();