feat(getServerState): require renderToString (#5786)

BREAKING CHANGE: `getServerState` now requires `renderToString` to be passed as an option.

packages/instantsearch-codemods/__testfixtures__/rish-to-ris/renderToString.input.js

@@ -0,0 +1,21 @@
+import { getServerState } from 'react-instantsearch-hooks-server';
+
+export async function getServerSideProps() {
+  const serverState = await getServerState(<HomePage />);
+
+  return {
+    props: {
+      serverState,
+    },
+  };
+}
+
+export async function getServerSideProps2() {
+  const serverState = await getServerState(<HomePage />, {});
+
+  return {
+    props: {
+      serverState,
+    },
+  };
+}

packages/instantsearch-codemods/__testfixtures__/rish-to-ris/renderToString.output.js

@@ -0,0 +1,26 @@
+import { getServerState } from 'react-instantsearch';
+import { renderToString } from 'react-dom/server';
+
+export async function getServerSideProps() {
+  const serverState = await getServerState(<HomePage />, {
+    renderToString
+  });
+
+  return {
+    props: {
+      serverState,
+    },
+  };
+}
+
+export async function getServerSideProps2() {
+  const serverState = await getServerState(<HomePage />, {
+    renderToString
+  });
+
+  return {
+    props: {
+      serverState,
+    },
+  };
+}

packages/instantsearch-codemods/__tests__/rish-to-ris.test.ts

@@ -4,3 +4,4 @@ const define = require('jscodeshift/dist/testUtils').defineTest;
 define(__dirname, 'src/rish-to-ris', null, 'rish-to-ris/import');
 define(__dirname, 'src/rish-to-ris', null, 'rish-to-ris/path');
 define(__dirname, 'src/rish-to-ris', null, 'rish-to-ris/use');
+define(__dirname, 'src/rish-to-ris', null, 'rish-to-ris/renderToString');

packages/instantsearch-codemods/src/rish-to-ris.ts

@@ -90,6 +90,62 @@ export default function transformer(
       });
   };
 
+  const addRenderToStringIfMissing = () => {
+    const importDeclaration = source
+      .find(j.ImportDeclaration)
+      .filter(
+        (path) => path.node.source.value === 'react-instantsearch-hooks-server'
+      );
+
+    const importSpecifier = importDeclaration
+      .find(j.ImportSpecifier)
+      .filter((path) => path.node.imported.name === 'getServerState');
+
+    const callExpression = source.find(j.CallExpression, {
+      callee: { name: 'getServerState' },
+    });
+
+    if (importSpecifier.size() === 0 || callExpression.length === 0) {
+      return;
+    }
+
+    const hasRenderToString =
+      source
+        .find(j.ImportDeclaration)
+        .filter((path) => path.node.source.value === 'react-dom/server')
+        .find(j.ImportSpecifier)
+        .filter((path) => path.node.imported.name === 'renderToString')
+        .size() > 0;
+
+    if (!hasRenderToString) {
+      importDeclaration.insertAfter(
+        j.importDeclaration(
+          [j.importSpecifier(j.identifier('renderToString'))],
+          j.literal('react-dom/server')
+        )
+      );
+    }
+
+    callExpression.forEach((path) => {
+      if (
+        path.value.arguments.length === 2 &&
+        j(path)
+          .find(j.Property, { key: { name: 'renderToString' } })
+          .size()
+      ) {
+        return;
+      }
+
+      const expression = j.template.expression`{ renderToString }`;
+
+      path.value.arguments.length === 2
+        ? (path.value.arguments[1] = expression)
+        : path.value.arguments.push(expression);
+    });
+  };
+
+  addRenderToStringIfMissing();
+
   replaceImports(
     j,
     source,

packages/react-instantsearch-hooks-server/src/__tests__/getServerState.test.tsx

@@ -126,7 +126,7 @@ describe('getServerState', () => {
     }
 
     await expect(
-      getServerState(<App />)
+      getServerState(<App />, { renderToString })
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `"Unable to retrieve InstantSearch's server state in \`getServerState()\`. Did you mount the <InstantSearch> component?"`
     );
@@ -149,7 +149,7 @@ describe('getServerState', () => {
     }
 
     await expect(
-      getServerState(<App />)
+      getServerState(<App />, { renderToString })
     ).rejects.toThrowErrorMatchingInlineSnapshot(
       `"getServerState should be called with a single InstantSearchSSRProvider and a single InstantSearch component."`
     );
@@ -168,7 +168,7 @@ describe('getServerState', () => {
       searchClient,
     });
 
-    await expect(getServerState(<App />)).rejects.toThrow(
+    await expect(getServerState(<App />, { renderToString })).rejects.toThrow(
       /Search client error/
     );
   });
@@ -183,7 +183,7 @@ describe('getServerState', () => {
       searchClient,
     });
 
-    await expect(getServerState(<App />)).rejects.toThrow(
+    await expect(getServerState(<App />, { renderToString })).rejects.toThrow(
       /Search client error/
     );
   });
@@ -195,7 +195,7 @@ describe('getServerState', () => {
     const searchClient = createAlgoliaSearchClient({});
     const { App } = createTestEnvironment({ searchClient });
 
-    await getServerState(<App />);
+    await getServerState(<App />, { renderToString });
 
     expect(searchClient.addAlgoliaAgent).toHaveBeenCalledWith(
       `react (${ReactVersion})`
@@ -218,7 +218,7 @@ describe('getServerState', () => {
     const searchClient = createSearchClient({});
     const { App } = createTestEnvironment({ searchClient });
 
-    await getServerState(<App />);
+    await getServerState(<App />, { renderToString });
 
     expect(searchClient.search).toHaveBeenCalledTimes(1);
     expect(searchClient.search).toHaveBeenCalledWith([
@@ -333,7 +333,7 @@ describe('getServerState', () => {
     const searchClient = createAlgoliaSearchClient({});
     const { App } = createTestEnvironment({ searchClient });
 
-    const serverState = await getServerState(<App />);
+    const serverState = await getServerState(<App />, { renderToString });
 
     expect(Object.keys(serverState.initialResults)).toHaveLength(4);
     expect(serverState.initialResults).toMatchSnapshot();
@@ -346,7 +346,8 @@ describe('getServerState', () => {
     await getServerState(
       <App>
         <DynamicWidgets fallbackComponent={RefinementList} />
-      </App>
+      </App>,
+      { renderToString }
     );
 
     expect(searchClient.search).toHaveBeenCalledTimes(2);
@@ -365,7 +366,8 @@ describe('getServerState', () => {
         <Index indexName="something">
           <DynamicWidgets fallbackComponent={RefinementList} />
         </Index>
-      </App>
+      </App>,
+      { renderToString }
     );
 
     expect(searchClient.search).toHaveBeenCalledTimes(2);
@@ -403,7 +405,8 @@ describe('getServerState', () => {
     await getServerState(
       <App>
         <DynamicWidgets fallbackComponent={RefinementList} />
-      </App>
+      </App>,
+      { renderToString }
     );
 
     expect(searchClient.search).toHaveBeenCalledTimes(2);
@@ -452,7 +455,7 @@ describe('getServerState', () => {
     });
     const { App } = createTestEnvironment({ searchClient });
 
-    const serverState = await getServerState(<App />);
+    const serverState = await getServerState(<App />, { renderToString });
     const html = renderToString(<App serverState={serverState} />);
 
     expect(html).toMatchInlineSnapshot(`