Add AsyncPropManager to react-on-rails-pro package (#2049)

Author: AbanoubGhadban

packages/react-on-rails-pro-node-renderer/src/worker.ts

@@ -287,7 +287,7 @@ export default function run(config: Partial<Config>) {
           );
 
           const initial: IncrementalRenderInitialRequest = {
-            renderingRequest: String((tempReqBody as { renderingRequest?: string }).renderingRequest ?? ''),
+            firstRequestChunk: obj,
             bundleTimestamp,
             dependencyBundleTimestamps,
           };
@@ -322,6 +322,7 @@ export default function run(config: Partial<Config>) {
           }
 
           try {
+            log.info(`Received a new update chunk ${JSON.stringify(obj)}`);
             incrementalSink.add(obj);
           } catch (err) {
             // Log error but don't stop processing
@@ -334,7 +335,11 @@ export default function run(config: Partial<Config>) {
         },
 
         onRequestEnded: () => {
-          // Do nothing
+          if (!incrementalSink) {
+            return;
+          }
+
+          incrementalSink.handleRequestClosed();
         },
       });
     } catch (err) {

packages/react-on-rails-pro-node-renderer/src/worker/handleIncrementalRenderRequest.ts

@@ -6,6 +6,7 @@ import { getRequestBundleFilePath } from '../shared/utils';
 export type IncrementalRenderSink = {
   /** Called for every subsequent NDJSON object after the first one */
   add: (chunk: unknown) => void;
+  handleRequestClosed: () => void;
 };
 
 export type UpdateChunk = {
@@ -27,11 +28,33 @@ function assertIsUpdateChunk(value: unknown): asserts value is UpdateChunk {
 }
 
 export type IncrementalRenderInitialRequest = {
-  renderingRequest: string;
+  firstRequestChunk: unknown;
   bundleTimestamp: string | number;
   dependencyBundleTimestamps?: string[] | number[];
 };
 
+export type FirstIncrementalRenderRequestChunk = {
+  renderingRequest: string;
+  onRequestClosedUpdateChunk?: string;
+};
+
+function assertFirstIncrementalRenderRequestChunk(
+  chunk: unknown,
+): asserts chunk is FirstIncrementalRenderRequestChunk {
+  if (
+    typeof chunk !== 'object' ||
+    chunk === null ||
+    !('renderingRequest' in chunk) ||
+    typeof chunk.renderingRequest !== 'string' ||
+    // onRequestClosedUpdateChunk is an optional field
+    ('onRequestClosedUpdateChunk' in chunk &&
+      chunk.onRequestClosedUpdateChunk &&
+      typeof chunk.onRequestClosedUpdateChunk !== 'object')
+  ) {
+    throw new Error('Invalid first incremental render request chunk received, missing properties');
+  }
+}
+
 export type IncrementalRenderResult = {
   response: ResponseResult;
   sink?: IncrementalRenderSink;
@@ -46,7 +69,9 @@ export type IncrementalRenderResult = {
 export async function handleIncrementalRenderRequest(
   initial: IncrementalRenderInitialRequest,
 ): Promise<IncrementalRenderResult> {
-  const { renderingRequest, bundleTimestamp, dependencyBundleTimestamps } = initial;
+  const { firstRequestChunk, bundleTimestamp, dependencyBundleTimestamps } = initial;
+  assertFirstIncrementalRenderRequestChunk(firstRequestChunk);
+  const { renderingRequest, onRequestClosedUpdateChunk } = firstRequestChunk;
 
   try {
     // Call handleRenderRequest internally to handle all validation and VM execution
@@ -79,6 +104,27 @@ export async function handleIncrementalRenderRequest(
             log.error({ msg: 'Invalid incremental render chunk', err, chunk });
           }
         },
+        handleRequestClosed: () => {
+          if (!onRequestClosedUpdateChunk) {
+            return;
+          }
+
+          try {
+            assertIsUpdateChunk(onRequestClosedUpdateChunk);
+            const bundlePath = getRequestBundleFilePath(onRequestClosedUpdateChunk.bundleTimestamp);
+            executionContext
+              .runInVM(onRequestClosedUpdateChunk.updateChunk, bundlePath)
+              .catch((err: unknown) => {
+                log.error({
+                  msg: 'Error running onRequestClosedUpdateChunk',
+                  err,
+                  onRequestClosedUpdateChunk,
+                });
+              });
+          } catch (err) {
+            log.error({ msg: 'Invalid onRequestClosedUpdateChunk', err, onRequestClosedUpdateChunk });
+          }
+        },
       },
     };
   } catch (error) {

packages/react-on-rails-pro-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, asyncPropManager } = ReactOnRails.addAsyncPropsCapabilityToComponentProps(usedProps);
+    usedProps = propsWithAsyncProps;
+    sharedExecutionContext.set("asyncPropsManager", asyncPropManager);
+  }
+
   return ReactOnRails[ReactOnRails.isRSCBundle ? 'serverRenderRSCReactComponent' : 'streamServerRenderedReactComponent']({
     name: componentName,
     domNodeId: 'AsyncComponentsTreeForTesting-react-component-0',

packages/react-on-rails-pro-node-renderer/tests/httpRequestUtils.ts

@@ -19,19 +19,13 @@ type RequestOptions = {
   renderRscPayload: boolean;
 };
 
-export const createForm = ({
+export const createRenderingRequest = ({
   project = 'spec-dummy',
   commit = '',
   props = {},
   throwJsErrors = false,
   componentName = undefined,
 }: Partial<RequestOptions> = {}) => {
-  const form = new FormData();
-  form.append('gemVersion', packageJson.version);
-  form.append('protocolVersion', packageJson.protocolVersion);
-  form.append('password', 'myPassword1');
-  form.append('dependencyBundleTimestamps[]', RSC_BUNDLE_TIMESTAMP);
-
   let renderingRequestCode = readRenderingRequest(
     project,
     commit,
@@ -45,6 +39,29 @@ export const createForm = ({
   if (throwJsErrors) {
     renderingRequestCode = renderingRequestCode.replace('throwJsErrors: false', 'throwJsErrors: true');
   }
+  return renderingRequestCode;
+};
+
+export const createForm = ({
+  project = 'spec-dummy',
+  commit = '',
+  props = {},
+  throwJsErrors = false,
+  componentName = undefined,
+}: Partial<RequestOptions> = {}) => {
+  const form = new FormData();
+  form.append('gemVersion', packageJson.version);
+  form.append('protocolVersion', packageJson.protocolVersion);
+  form.append('password', 'myPassword1');
+  form.append('dependencyBundleTimestamps[]', RSC_BUNDLE_TIMESTAMP);
+
+  const renderingRequestCode = createRenderingRequest({
+    project,
+    commit,
+    props,
+    throwJsErrors,
+    componentName,
+  });
   form.append('renderingRequest', renderingRequestCode);
 
   const testBundlesDirectory = path.join(__dirname, '../../../react_on_rails_pro/spec/dummy/ssr-generated');
@@ -76,7 +93,14 @@ export const createForm = ({
   return form;
 };
 
-const getAppUrl = (app: ReturnType<typeof buildApp>) => {
+export const createUploadAssetsForm = (options: Partial<RequestOptions> = {}) => {
+  const requestForm = createForm(options);
+  requestForm.append('targetBundles[]', SERVER_BUNDLE_TIMESTAMP);
+  requestForm.append('targetBundles[]', RSC_BUNDLE_TIMESTAMP);
+  return requestForm;
+};
+
+export const getAppUrl = (app: ReturnType<typeof buildApp>) => {
   const addresssInfo = app.server.address();
   if (!addresssInfo) {
     throw new Error('The app has no address, ensure to run the app before running tests');
@@ -177,3 +201,66 @@ export const makeRequest = (app: ReturnType<typeof buildApp>, options: Partial<R
     getBuffer,
   };
 };
+
+export const getNextChunkInternal = (
+  stream: NodeJS.ReadableStream,
+  { timeout = 250 }: { timeout?: number } = {},
+) => {
+  return new Promise<string>((resolve, reject) => {
+    let timeoutId: NodeJS.Timeout;
+    let cancelDataListener = () => {};
+    if (timeout) {
+      timeoutId = setTimeout(() => {
+        cancelDataListener();
+        reject(new Error(`Timeout after waiting for ${timeout}ms to get the next stream chunk`));
+      }, timeout);
+    }
+
+    const onData = (chunk: Buffer) => {
+      clearTimeout(timeoutId);
+      cancelDataListener();
+      resolve(chunk.toString());
+    };
+
+    const onError = (error: Error) => {
+      clearTimeout(timeoutId);
+      cancelDataListener();
+      reject(error);
+    };
+
+    const onClose = () => {
+      reject(new Error('Stream Closed'));
+    };
+
+    cancelDataListener = () => {
+      stream.off('data', onData);
+      stream.off('error', onError);
+      stream.off('close', onClose);
+    };
+
+    stream.once('data', onData);
+    stream.once('error', onError);
+    if (stream.closed) {
+      onClose();
+    } else {
+      stream.once('close', onClose);
+    }
+  });
+};
+
+export const getNextChunk = async (stream: NodeJS.ReadableStream, options: { timeout?: number } = {}) => {
+  const receivedChunks: string[] = [];
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+  while (true) {
+    try {
+      // eslint-disable-next-line no-await-in-loop
+      const chunk = await getNextChunkInternal(stream, options);
+      receivedChunks.push(chunk);
+    } catch (err) {
+      if (receivedChunks.length > 0) {
+        return receivedChunks.join('');
+      }
+      throw err;
+    }
+  }
+};