Adds {After,Between}EachPass arguments to react-server

packages/react-effect/src/server.tsx

@@ -4,6 +4,7 @@ import {EffectContext} from './context';
 import {EffectManager} from './manager';
 import {Pass} from './types';
 
+export {Pass};
 export {Effect} from './Effect';
 
 interface Options {

packages/react-server/CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## [Unreleased] -->
+## Unreleased
+
+### Changed
+
+- Added `Options` object as the second argument to `createRender()` allowing passed in values for `afterEachPass` and `betweenEachPass` [#911](https://github.com/Shopify/quilt/pull/911)
 
 ## [0.1.6] - 2019-08-20
 

packages/react-server/README.md

@@ -87,16 +87,14 @@ Creates a Koa middleware which renders an `@shopify/react-html` application.
 import {createRender} from '@shopify/react-server';
 ```
 
-The `createRender` function takes a subset of the `Options` object used by `createServer`.
+The `createRender` function takes two arguments. The first is a render function that should return the main component at the top of the application tree in JSX. This function receives the full [Koa](https://github.com/koajs/koa/) server context which can be used to derive any necessary props to feed into the main component.
 
-```tsx
-interface Options {
-  port?: number;
-  ip?: string;
-  assetPrefix?: string;
-  debug?: boolean;
-  render: RenderFunction;
-}
-```
+The second argument is a subset of [`@shopify/react-effect#extract`](../react-effect/README.md#extract)'s options which are simply delegated to the `extract` call within the `createRender` middleware.
+
+#### Options
+
+- `afterEachPass?(pass: Pass): any` see [`@shopify/react-effect#extract`](../react-effect/README.md#extract)
+
+- `betweenEachPass?(pass: Pass): any` see [`@shopify/react-effect#extract`](../react-effect/README.md#extract)
 
 It returns a [Koa](https://github.com/koajs/koa/) middleware.

packages/react-server/src/render/render.tsx

@@ -11,7 +11,7 @@ import {
   NetworkContext,
   NetworkManager,
 } from '@shopify/react-network/server';
-import {extract} from '@shopify/react-effect/server';
+import {extract, Pass} from '@shopify/react-effect/server';
 import {
   AsyncAssetContext,
   AsyncAssetManager,
@@ -26,12 +26,17 @@ export type RenderContext = Context & {
 };
 export type RenderFunction = (ctx: RenderContext) => React.ReactElement<any>;
 
+export interface Options {
+  afterEachPass?(pass: Pass): any;
+  betweenEachPass?(pass: Pass): any;
+}
+
 /**
  * Creates a Koa middleware for rendering an `@shopify/react-html` based React application defined by `options.render`.
  * @param render
  */
-export function createRender(render: RenderFunction) {
-  return async function renderFunction(ctx: RenderContext) {
+export function createRender(render: RenderFunction, options: Options = {}) {
+  return async function renderFunction(ctx: Context) {
     const logger = getLogger(ctx) || console;
     const assets = getAssets(ctx);
     const networkManager = new NetworkManager({
@@ -67,6 +72,7 @@ export function createRender(render: RenderFunction) {
           logger.log(rendering);
           logger.log(resolving);
         },
+        ...options,
       });
       applyToContext(ctx, networkManager);
 

packages/react-server/src/render/test/render.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import {createMockContext} from '@shopify/jest-koa-mocks';
 import withEnv from '@shopify/with-env';
+import {Effect} from '@shopify/react-effect/server';
 import {createRender, RenderContext} from '../render';
 
 jest.mock('@shopify/sewing-kit-koa', () => ({
@@ -54,4 +55,39 @@ describe('createRender', () => {
       );
     });
   });
+
+  describe('afterEachPass()', () => {
+    it('is called with the current pass object', async () => {
+      const ctx = createMockContext();
+      const afterEachPass = jest.fn();
+      const renderFunction = createRender(() => <>Markup</>, {afterEachPass});
+
+      await renderFunction(ctx);
+
+      expect(afterEachPass).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('betweenEachPass()', () => {
+    it('is called for each pass with current pass object', async () => {
+      const ctx = createMockContext();
+      const betweenEachPass = jest.fn();
+      const renderFunction = createRender(
+        () => (
+          <>
+            <Effect perform={() => Promise.resolve()} />
+          </>
+        ),
+        {
+          betweenEachPass,
+        },
+      );
+
+      await renderFunction(ctx);
+
+      // 4 is used here because the default maxPasses
+      // is 5 which allows 4 `betweenEachPass()` calls
+      expect(betweenEachPass).toHaveBeenCalledTimes(4);
+    });
+  });
 });