feat(getMarkupFromTree): add onBeforeRender handler (#64)

Author: avocadowastaken

src/__tests__/getMarkupFromTree-test.tsx

@@ -2,7 +2,12 @@ import ApolloClient from 'apollo-client';
 import { ApolloLink, Observable } from 'apollo-link';
 import { MockedResponse } from 'apollo-link-mock';
 import gql from 'graphql-tag';
-import * as React from 'react';
+import React, {
+  HTMLAttributes,
+  ReactElement,
+  createContext,
+  useContext,
+} from 'react';
 import { renderToString } from 'react-dom/server';
 
 import { ApolloProvider } from '../ApolloContext';
@@ -305,3 +310,49 @@ Object {
     });
   }
 );
+
+it('runs onBeforeRender', async () => {
+  const client = createMockClient();
+  const context: { headTags: Array<ReactElement<object>> } = { headTags: [] };
+  const Context = createContext(context);
+
+  function Title(props: HTMLAttributes<HTMLTitleElement>) {
+    const ctx = useContext(Context);
+
+    ctx.headTags.push(<title {...props} />);
+
+    return null;
+  }
+
+  let step = 0;
+
+  await getMarkupFromTree({
+    onBeforeRender: () => {
+      switch (++step) {
+        case 1: {
+          // First attempt, nothing happened yet.
+          expect(context.headTags).toHaveLength(0);
+          break;
+        }
+
+        case 2: {
+          // Second attempt, we should have populated context.
+          expect(context.headTags).toHaveLength(1);
+          break;
+        }
+      }
+    },
+    renderFunction: renderToString,
+    tree: (
+      <>
+        <Title>Hello!</Title>
+        <UserDetailsWrapper client={client} />
+      </>
+    ),
+  });
+
+  // Second attempt should create duplicates.
+  expect(context.headTags).toHaveLength(2);
+
+  expect.assertions(3);
+});

src/getMarkupFromTree.tsx

@@ -4,17 +4,23 @@ import { isPromiseLike } from './utils';
 
 export interface GetMarkupFromTreeOptions {
   tree: React.ReactNode;
+  onBeforeRender?: () => void;
   renderFunction: (tree: React.ReactElement<object>) => string;
 }
 
 export function getMarkupFromTree({
   tree,
+  onBeforeRender,
   renderFunction,
 }: GetMarkupFromTreeOptions): Promise<string> {
   const ssrManager = createSSRManager();
 
   function process(): string | Promise<string> {
     try {
+      if (onBeforeRender) {
+        onBeforeRender();
+      }
+
       const html = renderFunction(
         <SSRContext.Provider value={ssrManager}>{tree}</SSRContext.Provider>
       );