feat(hooks-server): support import from React 18

packages/react-instantsearch-hooks-server/rollup.config.js

@@ -39,14 +39,15 @@ const plugins = [
 
 const createConfiguration = ({ name, minify = false } = {}) => ({
   input: 'src/index.ts',
-  external: ['react', 'react-dom', 'react-instantsearch-hooks'],
+  external: ['react', 'react-instantsearch-hooks'],
+  inlineDynamicImports: true,
   output: {
     file: `dist/umd/ReactInstantSearch${name}${minify ? '.min' : ''}.js`,
     name: `ReactInstantSearch${name}`,
     format: 'umd',
     globals: {
       react: 'React',
-      'react-dom': 'ReactDOM',
+      'react-dom/server.js': 'ReactDOMServer',
       'react-instantsearch-hooks': 'ReactInstantSearchHooks',
     },
     banner: createBanner(name),

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

@@ -0,0 +1,135 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import {
+  InstantSearch,
+  InstantSearchSSRProvider,
+  Index,
+  useHits,
+  useRefinementList,
+  useSearchBox,
+} from 'react-instantsearch-hooks';
+
+import { createSearchClient } from '../../../../test/mock';
+import { getServerState } from '../getServerState';
+
+import type {
+  InstantSearchServerState,
+  InstantSearchProps,
+  UseRefinementListProps,
+} from 'react-instantsearch-hooks';
+
+type CreateTestEnvironmentProps = {
+  searchClient: InstantSearchProps['searchClient'];
+  initialUiState?: InstantSearchProps['initialUiState'];
+};
+
+function createTestEnvironment({
+  searchClient,
+  initialUiState = {
+    instant_search: {
+      query: 'iphone',
+      refinementList: {
+        brand: ['Apple'],
+      },
+    },
+    instant_search_price_asc: {
+      query: 'iphone',
+      refinementList: {
+        brand: ['Apple'],
+      },
+    },
+  },
+}: CreateTestEnvironmentProps) {
+  function Search({ children }: { children?: React.ReactNode }) {
+    return (
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="instant_search"
+        initialUiState={initialUiState}
+      >
+        {children}
+        <RefinementList attribute="brand" />
+        <SearchBox />
+        <Hits />
+
+        <Index indexName="instant_search_price_asc">
+          <Hits />
+
+          <Index indexName="instant_search_rating_desc">
+            <Hits />
+          </Index>
+        </Index>
+
+        <Index indexName="instant_search_price_desc">
+          <Hits />
+        </Index>
+      </InstantSearch>
+    );
+  }
+
+  function App({
+    serverState,
+    children,
+  }: {
+    serverState?: InstantSearchServerState;
+    children?: React.ReactNode;
+  }) {
+    return (
+      <InstantSearchSSRProvider {...serverState}>
+        <Search>{children}</Search>
+      </InstantSearchSSRProvider>
+    );
+  }
+
+  return {
+    App,
+  };
+}
+
+// Neither of the modules exist
+jest.mock(
+  'react-dom/server.js',
+  () => {
+    throw new Error('simulate the module not existing');
+  },
+  { virtual: true }
+);
+
+jest.mock(
+  'react-dom/server',
+  () => {
+    throw new Error('simulate the module not existing');
+  },
+  { virtual: true }
+);
+
+describe('ReactDOMServer imports', () => {
+  test('throws when no ReactDOMServer is present', async () => {
+    const searchClient = createSearchClient({});
+    const { App } = createTestEnvironment({ searchClient });
+
+    await expect(
+      getServerState(<App />)
+    ).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"Could not import ReactDOMServer."`
+    );
+  });
+});
+
+function SearchBox() {
+  useSearchBox();
+  return null;
+}
+
+function Hits() {
+  useHits();
+  return null;
+}
+
+function RefinementList(props: UseRefinementListProps) {
+  useRefinementList(props);
+  return null;
+}

packages/react-instantsearch-hooks-server/src/__tests__/modules-with-extension.test.tsx

@@ -0,0 +1,133 @@
+/**
+ * @jest-environment node
+ */
+
+import React from 'react';
+import {
+  InstantSearch,
+  InstantSearchSSRProvider,
+  Index,
+  useHits,
+  useRefinementList,
+  useSearchBox,
+} from 'react-instantsearch-hooks';
+
+import { createSearchClient } from '../../../../test/mock';
+import { getServerState } from '../getServerState';
+
+import type {
+  InstantSearchServerState,
+  InstantSearchProps,
+  UseRefinementListProps,
+} from 'react-instantsearch-hooks';
+
+type CreateTestEnvironmentProps = {
+  searchClient: InstantSearchProps['searchClient'];
+  initialUiState?: InstantSearchProps['initialUiState'];
+};
+
+function createTestEnvironment({
+  searchClient,
+  initialUiState = {
+    instant_search: {
+      query: 'iphone',
+      refinementList: {
+        brand: ['Apple'],
+      },
+    },
+    instant_search_price_asc: {
+      query: 'iphone',
+      refinementList: {
+        brand: ['Apple'],
+      },
+    },
+  },
+}: CreateTestEnvironmentProps) {
+  function Search({ children }: { children?: React.ReactNode }) {
+    return (
+      <InstantSearch
+        searchClient={searchClient}
+        indexName="instant_search"
+        initialUiState={initialUiState}
+      >
+        {children}
+        <RefinementList attribute="brand" />
+        <SearchBox />
+        <Hits />
+
+        <Index indexName="instant_search_price_asc">
+          <Hits />
+
+          <Index indexName="instant_search_rating_desc">
+            <Hits />
+          </Index>
+        </Index>
+
+        <Index indexName="instant_search_price_desc">
+          <Hits />
+        </Index>
+      </InstantSearch>
+    );
+  }
+
+  function App({
+    serverState,
+    children,
+  }: {
+    serverState?: InstantSearchServerState;
+    children?: React.ReactNode;
+  }) {
+    return (
+      <InstantSearchSSRProvider {...serverState}>
+        <Search>{children}</Search>
+      </InstantSearchSSRProvider>
+    );
+  }
+
+  return {
+    App,
+  };
+}
+
+// Only the module with extension exists
+jest.mock(
+  'react-dom/server.js',
+  () => {
+    return jest.requireActual('react-dom/server');
+  },
+  { virtual: true }
+);
+
+jest.mock(
+  'react-dom/server',
+  () => {
+    throw new Error('simulate the module not existing');
+  },
+  { virtual: true }
+);
+
+describe('ReactDOMServer imports', () => {
+  test('works when the import with an extension exists', async () => {
+    const searchClient = createSearchClient({});
+    const { App } = createTestEnvironment({ searchClient });
+
+    const serverState = await getServerState(<App />);
+
+    expect(serverState.initialResults).toEqual(expect.any(Object));
+  });
+});
+
+function SearchBox() {
+  useSearchBox();
+  return null;
+}
+
+function Hits() {
+  useHits();
+  return null;
+}
+
+function RefinementList(props: UseRefinementListProps) {
+  useRefinementList(props);
+  return null;
+}