pass AsyncPropsManager to the component

Author: AbanoubGhadban

packages/react-on-rails-pro/src/AsyncPropsManager.ts

@@ -46,6 +46,10 @@ class AsyncPropsManager {
   }
 
   endStream() {
+    if (this.isClosed) {
+      return;
+    }
+
     this.isClosed = true;
     this.propNameToPromiseController.forEach((promiseController, propName) => {
       if (!promiseController.resolved) {

packages/react-on-rails-pro/src/ReactOnRailsRSC.ts

@@ -25,6 +25,7 @@ import {
 import { convertToError } from 'react-on-rails/serverRenderUtils';
 import handleError from './handleErrorRSC.ts';
 import ReactOnRails from './ReactOnRails.full.ts';
+import AsyncPropsManager from './AsyncPropsManager.ts';
 
 import {
   streamServerRenderedComponent,
@@ -104,6 +105,26 @@ ReactOnRails.serverRenderRSCReactComponent = (options: RSCRenderParams) => {
   }
 };
 
+function addAsyncPropsCapabilityToComponentProps<
+  AsyncPropsType extends Record<string, unknown>,
+  PropsType extends Record<string, unknown>,
+>(props: PropsType) {
+  const asyncPropManager = new AsyncPropsManager();
+  const propsAfterAddingAsyncProps = {
+    ...props,
+    getReactOnRailsAsyncProp: <PropName extends keyof AsyncPropsType>(propName: PropName) => {
+      return asyncPropManager.getProp(propName as string) as Promise<AsyncPropsType[PropName]>;
+    },
+  };
+
+  return {
+    asyncPropManager,
+    props: propsAfterAddingAsyncProps,
+  };
+}
+
+ReactOnRails.addAsyncPropsCapabilityToComponentProps = addAsyncPropsCapabilityToComponentProps;
+
 ReactOnRails.isRSCBundle = true;
 
 export * from 'react-on-rails/types';

packages/react-on-rails-pro/src/createReactOnRailsPro.ts

@@ -45,6 +45,7 @@ type ReactOnRailsProSpecificFunctions = Pick<
   | 'reactOnRailsStoreLoaded'
   | 'streamServerRenderedReactComponent'
   | 'serverRenderRSCReactComponent'
+  | 'addAsyncPropsCapabilityToComponentProps'
 >;
 
 // Pro client startup with immediate hydration support
@@ -133,6 +134,10 @@ export default function createReactOnRailsPro(
     serverRenderRSCReactComponent(): any {
       throw new Error('serverRenderRSCReactComponent is supported in RSC bundle only');
     },
+
+    addAsyncPropsCapabilityToComponentProps() {
+      throw new Error('addAsyncPropsCapabilityToComponentProps is supported in RSC bundle only');
+    },
   };
 
   // Type assertion is safe here because:
@@ -153,6 +158,11 @@ export default function createReactOnRailsPro(
       reactOnRailsPro.serverRenderRSCReactComponent;
   }
 
+  if (reactOnRailsPro.addAsyncPropsCapabilityToComponentProps) {
+    reactOnRailsProSpecificFunctions.addAsyncPropsCapabilityToComponentProps =
+      reactOnRailsPro.addAsyncPropsCapabilityToComponentProps;
+  }
+
   // Assign Pro-specific functions to the ReactOnRailsPro object using Object.assign
   // This pattern ensures we add exactly what's defined in the type, nothing more, nothing less
   Object.assign(reactOnRailsPro, reactOnRailsProSpecificFunctions);

packages/react-on-rails/src/base/client.ts

@@ -51,6 +51,7 @@ export type BaseClientObjectType = Omit<
   | 'reactOnRailsStoreLoaded'
   | 'streamServerRenderedReactComponent'
   | 'serverRenderRSCReactComponent'
+  | 'addAsyncPropsCapabilityToComponentProps'
 >;
 
 // Cache to track created objects and their registries

packages/react-on-rails/src/createReactOnRails.ts

@@ -22,6 +22,7 @@ type ReactOnRailsCoreSpecificFunctions = Pick<
   | 'reactOnRailsStoreLoaded'
   | 'streamServerRenderedReactComponent'
   | 'serverRenderRSCReactComponent'
+  | 'addAsyncPropsCapabilityToComponentProps'
 >;
 
 export default function createReactOnRails(
@@ -76,6 +77,10 @@ export default function createReactOnRails(
     serverRenderRSCReactComponent(): any {
       throw new Error('serverRenderRSCReactComponent requires react-on-rails-pro package');
     },
+
+    addAsyncPropsCapabilityToComponentProps() {
+      throw new Error('addAsyncPropsCapabilityToComponentProps requires react-on-rails-pro package');
+    },
   };
 
   // Type assertion is safe here because:

packages/react-on-rails/src/types/index.ts

@@ -139,6 +139,12 @@ type RenderFunctionResult = RenderFunctionSyncResult | RenderFunctionAsyncResult
 
 type StreamableComponentResult = ReactElement | Promise<ReactElement | string>;
 
+type AsyncPropsManager = {
+  getProp: (propName: string) => Promise<unknown>;
+  setProp: (propName: string, propValue: unknown) => void;
+  endStream: () => void;
+};
+
 /**
  * Render-functions are used to create dynamic React components or server-rendered HTML with side effects.
  * They receive two arguments: props and railsContext.
@@ -355,6 +361,15 @@ export type RSCPayloadStreamInfo = {
 
 export type RSCPayloadCallback = (streamInfo: RSCPayloadStreamInfo) => void;
 
+export type WithAsyncProps<
+  AsyncPropsType extends Record<string, unknown>,
+  PropsType extends Record<string, unknown>,
+> = PropsType & {
+  getReactOnRailsAsyncProp: <PropName extends keyof AsyncPropsType>(
+    propName: PropName,
+  ) => Promise<AsyncPropsType[PropName]>;
+};
+
 /** Contains the parts of the `ReactOnRails` API intended for internal use only. */
 export interface ReactOnRailsInternal extends ReactOnRails {
   /**
@@ -463,6 +478,19 @@ export interface ReactOnRailsInternal extends ReactOnRails {
    * Indicates if the RSC bundle is being used.
    */
   isRSCBundle: boolean;
+  /**
+   * Adds the getAsyncProp function to the component props object
+   * @returns An object containitng: the AsyncPropsManager and the component props after adding the getAsyncProp to it
+   */
+  addAsyncPropsCapabilityToComponentProps: <
+    AsyncPropsType extends Record<string, unknown>,
+    PropsType extends Record<string, unknown>,
+  >(
+    props: PropsType,
+  ) => {
+    asyncPropManager: AsyncPropsManager;
+    props: WithAsyncProps<AsyncPropsType, PropsType>;
+  };
 }
 
 export type RenderStateHtml = FinalHtmlResult | Promise<FinalHtmlResult>;

react_on_rails_pro/packages/node-renderer/tests/fixtures/projects/spec-dummy/asyncComponentsTreeForTestingRenderingRequest.js

@@ -20,6 +20,13 @@
 
   ReactOnRails.clearHydratedStores();
   var usedProps = typeof props === 'undefined' ? {"helloWorldData":{"name":"Mr. Server Side Rendering","\u003cscript\u003ewindow.alert('xss1');\u003c/script\u003e":"\u003cscript\u003ewindow.alert(\"xss2\");\u003c/script\u003e"}} : props;
+  
+  if (ReactOnRails.isRSCBundle) {
+    var { props: propsWithAsyncProps, asyncPropsManager } = ReactOnRails.addAsyncPropsCapabilityToComponentProps(usedProps);
+    usedProps = propsWithAsyncProps;
+    sharedExecutionContext.set("asyncPropsManager", asyncPropsManager);
+  }
+
   return ReactOnRails[ReactOnRails.isRSCBundle ? 'serverRenderRSCReactComponent' : 'streamServerRenderedReactComponent']({
     name: componentName,
     domNodeId: 'AsyncComponentsTreeForTesting-react-component-0',

react_on_rails_pro/spec/dummy/client/app/ror-auto-load-components/AsyncPropsComponent.tsx

@@ -0,0 +1,56 @@
+/// <reference types="react/experimental" />
+
+import * as React from 'react';
+import { Suspense } from 'react';
+import { WithAsyncProps } from 'react-on-rails-pro';
+
+type SyncPropsType = {
+  name: string;
+  age: number;
+  description: string;
+};
+
+type AsyncPropsType = {
+  books: string[];
+  researches: string[];
+};
+
+type PropsType = WithAsyncProps<AsyncPropsType, SyncPropsType>;
+
+const AsyncArrayComponent = async ({ items }: { items: Promise<string[]> }) => {
+  const resolvedItems = await items;
+
+  return (
+    <ol>
+      {resolvedItems.map((value) => (
+        <li key={value}>{value}</li>
+      ))}
+    </ol>
+  );
+};
+
+const AsyncPropsComponent = ({ name, age, description, getReactOnRailsAsyncProp }: PropsType) => {
+  const booksPromise = getReactOnRailsAsyncProp('books');
+  const researchesPromise = getReactOnRailsAsyncProp('researches');
+
+  return (
+    <div>
+      <h1>Async Props Component</h1>
+      <p>Name: {name}</p>
+      <p>Age: {age}</p>
+      <p>Description: {description}</p>
+
+      <h2>Books</h2>
+      <Suspense fallback={<p>Loading Books...</p>}>
+        <AsyncArrayComponent items={booksPromise} />
+      </Suspense>
+
+      <h2>Researches</h2>
+      <Suspense fallback={<p>Loading Researches...</p>}>
+        <AsyncArrayComponent items={researchesPromise} />
+      </Suspense>
+    </div>
+  );
+};
+
+export default AsyncPropsComponent;