refactor: rename rscPayloadGenerationUrl to rscPayloadGenerationUrlPath and enhance type safety in RailsContext

Author: AbanoubGhadban

lib/react_on_rails/helper.rb

@@ -381,7 +381,7 @@ def rails_context(server_side: true)
         if ReactOnRails::Utils.react_on_rails_pro?
           result[:rorProVersion] = ReactOnRails::Utils.react_on_rails_pro_version
 
-          result[:rscPayloadGenerationUrl] = rsc_url if ReactOnRailsPro.configuration.enable_rsc_support
+          result[:rscPayloadGenerationUrlPath] = rsc_url if ReactOnRailsPro.configuration.enable_rsc_support
         end
 
         if defined?(request) && request.present?

lib/react_on_rails/utils.rb

@@ -130,7 +130,7 @@ def self.react_server_client_manifest_file_path
       asset_name = ReactOnRails.configuration.react_server_client_manifest_file
       if asset_name.nil?
         raise ReactOnRails::Error,
-              "react_server_client_manifest_file is nil, ensure to set it in your configuration"
+              "react_server_client_manifest_file is nil, ensure it is set in your configuration"
       end
 
       @react_server_manifest_path = File.join(generated_assets_full_path, asset_name)

node_package/src/ClientSideRenderer.ts

@@ -86,7 +86,7 @@ class ComponentRenderer {
     const renderRequestId = el.getAttribute('data-render-request-id');
 
     if (!renderRequestId) {
-      console.error(`renderRequestId is missing for ${name} in dom node with id: ${domNodeId}`);
+      console.error(`renderRequestId is missing for component ${name} in the DOM node with id ${domNodeId}`);
     }
 
     const componentSpecificRailsContext = {

node_package/src/RSCPayloadGenerator.ts

@@ -15,7 +15,7 @@ declare global {
 
 const mapRailsContextToRSCPayloadStreams = new Map<string, RSCPayloadStreamInfo[]>();
 
-const rscPayloadCallbacks = new Map<string, Array<RSCPayloadCallback>>();
+const rscPayloadCallbacks = new Map<string, RSCPayloadCallback[]>();
 
 /**
  * Registers a callback to be executed when RSC payloads are generated.
@@ -36,13 +36,18 @@ export const onRSCPayloadGenerated = (
   callback: RSCPayloadCallback,
 ) => {
   const { renderRequestId } = railsContext.componentSpecificMetadata;
-  const callbacks = rscPayloadCallbacks.get(renderRequestId) || [];
-  callbacks.push(callback);
-  rscPayloadCallbacks.set(renderRequestId, callbacks);
+  const callbacks = rscPayloadCallbacks.get(renderRequestId);
+  if (callbacks) {
+    callbacks.push(callback);
+  } else {
+    rscPayloadCallbacks.set(renderRequestId, [callback]);
+  }
 
   // Call callback for any existing streams for this context
-  const existingStreams = mapRailsContextToRSCPayloadStreams.get(renderRequestId) || [];
-  existingStreams.forEach((streamInfo) => callback(streamInfo));
+  const existingStreams = mapRailsContextToRSCPayloadStreams.get(renderRequestId);
+  if (existingStreams) {
+    existingStreams.forEach((streamInfo) => callback(streamInfo));
+  }
 };
 
 /**
@@ -76,7 +81,10 @@ export const getRSCPayloadStream = async (
 
   const { renderRequestId } = railsContext.componentSpecificMetadata;
   const stream = await generateRSCPayload(componentName, props, railsContext);
-  const streams = mapRailsContextToRSCPayloadStreams.get(renderRequestId) ?? [];
+  // Tee stream to allow for multiple consumers:
+  //   1. stream1 - Used by React's runtime to perform server-side rendering
+  //   2. stream2 - Used by react-on-rails to embed the RSC payloads
+  //      into the HTML stream for client-side hydration
   const stream1 = new PassThrough();
   stream.pipe(stream1);
   const stream2 = new PassThrough();
@@ -87,13 +95,19 @@ export const getRSCPayloadStream = async (
     props,
     stream: stream2,
   };
-  streams.push(streamInfo);
-  mapRailsContextToRSCPayloadStreams.set(renderRequestId, streams);
+  const streams = mapRailsContextToRSCPayloadStreams.get(renderRequestId);
+  if (streams) {
+    streams.push(streamInfo);
+  } else {
+    mapRailsContextToRSCPayloadStreams.set(renderRequestId, [streamInfo]);
+  }
 
   // Notify callbacks about the new stream in a sync manner to maintain proper hydration timing
   // as described in the comment above onRSCPayloadGenerated
-  const callbacks = rscPayloadCallbacks.get(renderRequestId) || [];
-  callbacks.forEach((callback) => callback(streamInfo));
+  const callbacks = rscPayloadCallbacks.get(renderRequestId);
+  if (callbacks) {
+    callbacks.forEach((callback) => callback(streamInfo));
+  }
 
   return stream1;
 };

node_package/src/RSCProvider.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { RailsContext } from './types/index.ts';
+import { RailsContextWithComponentSpecificMetadata } from './types/index.ts';
 import getReactServerComponent from './getReactServerComponent.client.ts';
+import { createRSCPayloadKey } from './utils.ts';
 
 type RSCContextType = {
   getCachedComponent: (componentName: string, componentProps: unknown) => React.ReactNode;
@@ -33,18 +34,14 @@ export const createRSCProvider = ({
   railsContext,
   getServerComponent,
 }: {
-  railsContext: RailsContext;
+  railsContext: RailsContextWithComponentSpecificMetadata;
   getServerComponent: typeof getReactServerComponent;
 }) => {
   const cachedComponents: Record<string, React.ReactNode> = {};
   const fetchRSCPromises: Record<string, Promise<React.ReactNode>> = {};
 
-  const generateCacheKey = (componentName: string, componentProps: unknown) => {
-    return `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
-  };
-
   const getCachedComponent = (componentName: string, componentProps: unknown) => {
-    const key = generateCacheKey(componentName, componentProps);
+    const key = createRSCPayloadKey(componentName, componentProps, railsContext);
     return cachedComponents[key];
   };
 
@@ -53,7 +50,7 @@ export const createRSCProvider = ({
     if (cachedComponent) {
       return cachedComponent;
     }
-    const key = generateCacheKey(componentName, componentProps);
+    const key = createRSCPayloadKey(componentName, componentProps, railsContext);
     if (key in fetchRSCPromises) {
       return fetchRSCPromises[key];
     }
@@ -66,9 +63,10 @@ export const createRSCProvider = ({
     return promise;
   };
 
+  const contextValue = { getCachedComponent, getComponent };
+
   return ({ children }: { children: React.ReactNode }) => {
-    // eslint-disable-next-line react/jsx-no-constructed-context-values
-    return <RSCContext.Provider value={{ getCachedComponent, getComponent }}>{children}</RSCContext.Provider>;
+    return <RSCContext.Provider value={contextValue}>{children}</RSCContext.Provider>;
   };
 };
 

node_package/src/RSCRoute.ts

@@ -30,10 +30,9 @@ export type RSCRouteProps = {
 
 const RSCRoute = ({ componentName, componentProps }: RSCRouteProps) => {
   const { getComponent, getCachedComponent } = useRSC();
-  let component = getCachedComponent(componentName, componentProps);
-  if (!component) {
-    component = React.use(getComponent(componentName, componentProps));
-  }
+  const component =
+    getCachedComponent(componentName, componentProps) ??
+    React.use(getComponent(componentName, componentProps));
   return component;
 };
 

node_package/src/getReactServerComponent.client.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { createFromReadableStream } from 'react-on-rails-rsc/client.browser';
-import { fetch } from './utils.ts';
+import { createRSCPayloadKey, fetch } from './utils.ts';
 import transformRSCStreamAndReplayConsoleLogs from './transformRSCStreamAndReplayConsoleLogs.ts';
-import { RailsContext } from './types/index.ts';
+import { assertRailsContextWithComponentSpecificMetadata, RailsContext } from './types/index.ts';
 
 declare global {
   interface Window {
@@ -42,8 +42,8 @@ const createFromFetch = async (fetchPromise: Promise<Response>) => {
  */
 const fetchRSC = ({ componentName, componentProps, railsContext }: ClientGetReactServerComponentProps) => {
   const propsString = JSON.stringify(componentProps);
-  const { rscPayloadGenerationUrl } = railsContext;
-  const strippedUrlPath = rscPayloadGenerationUrl?.replace(/^\/|\/$/g, '');
+  const { rscPayloadGenerationUrlPath } = railsContext;
+  const strippedUrlPath = rscPayloadGenerationUrlPath?.replace(/^\/|\/$/g, '');
   return createFromFetch(fetch(`/${strippedUrlPath}/${componentName}?props=${propsString}`));
 };
 
@@ -126,7 +126,8 @@ const getReactServerComponent = ({
   componentProps,
   railsContext,
 }: ClientGetReactServerComponentProps) => {
-  const componentKey = `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata?.renderRequestId}`;
+  assertRailsContextWithComponentSpecificMetadata(railsContext);
+  const componentKey = createRSCPayloadKey(componentName, componentProps, railsContext);
   const payloads = window.REACT_ON_RAILS_RSC_PAYLOADS?.[componentKey];
   if (payloads) {
     return createFromPreloadedPayloads(payloads);

node_package/src/types/index.ts

@@ -34,7 +34,7 @@ export type RailsContext = {
   pathname: string;
   search: string | null;
   httpAcceptLanguage: string;
-  rscPayloadGenerationUrl?: string;
+  rscPayloadGenerationUrlPath?: string;
   componentSpecificMetadata?: {
     // The renderRequestId serves as a unique identifier for each render request.
     // We cannot rely solely on nodeDomId, as it should be unique for each component on the page,
@@ -62,14 +62,29 @@ export type RailsContext = {
     }
 );
 
-export type RailsContextWithServerComponentCapabilities = RailsContext & {
+export type RailsContextWithComponentSpecificMetadata = RailsContext & {
+  componentSpecificMetadata: {
+    renderRequestId: string;
+  };
+};
+
+export type RailsContextWithServerComponentCapabilities = RailsContextWithComponentSpecificMetadata & {
   serverSide: true;
   serverSideRSCPayloadParameters: unknown;
   reactClientManifestFileName: string;
   reactServerClientManifestFileName: string;
-  componentSpecificMetadata: {
-    renderRequestId: string;
-  };
+};
+
+export const assertRailsContextWithComponentSpecificMetadata: (
+  context: RailsContext | undefined,
+) => asserts context is RailsContextWithComponentSpecificMetadata = (
+  context: RailsContext | undefined,
+): asserts context is RailsContextWithComponentSpecificMetadata => {
+  if (!context || !('componentSpecificMetadata' in context)) {
+    throw new Error(
+      'Rails context does not have component specific metadata. Please ensure you are using a compatible version of react_on_rails_pro',
+    );
+  }
 };
 
 export const assertRailsContextWithServerComponentCapabilities: (

node_package/src/utils.ts

@@ -1,3 +1,5 @@
+import { RailsContextWithComponentSpecificMetadata } from './types/index.ts';
+
 // Override the fetch function to make it easier to test
 // The default fetch implementation in jest returns Node's Readable stream
 // In jest.setup.js, we configure this fetch to return a web-standard ReadableStream instead,
@@ -8,5 +10,12 @@ const customFetch = (...args: Parameters<typeof fetch>) => {
   return res;
 };
 
-// eslint-disable-next-line import/prefer-default-export
 export { customFetch as fetch };
+
+export const createRSCPayloadKey = (
+  componentName: string,
+  componentProps: unknown,
+  railsContext: RailsContextWithComponentSpecificMetadata,
+) => {
+  return `${componentName}-${JSON.stringify(componentProps)}-${railsContext.componentSpecificMetadata.renderRequestId}`;
+};

node_package/src/wrapServerComponentRenderer/client.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 import * as ReactDOMClient from 'react-dom/client';
-import { ReactComponentOrRenderFunction, RenderFunction } from '../types/index.ts';
+import {
+  ReactComponentOrRenderFunction,
+  RenderFunction,
+  assertRailsContextWithComponentSpecificMetadata,
+} from '../types/index.ts';
 import isRenderFunction from '../isRenderFunction.ts';
 import { ensureReactUseAvailable } from '../reactApis.cts';
 import { createRSCProvider } from '../RSCProvider.tsx';
@@ -41,9 +45,7 @@ const wrapServerComponentRenderer = (componentOrRenderFunction: ReactComponentOr
       throw new Error('wrapServerComponentRenderer: component is not a function');
     }
 
-    if (!railsContext) {
-      throw new Error('RSCClientRoot: No railsContext provided');
-    }
+    assertRailsContextWithComponentSpecificMetadata(railsContext);
 
     const RSCProvider = createRSCProvider({
       railsContext,