fix(umd): batch requests when using plugins via UMD (#902)

* wip

* e2e test

* remove e2e

* new test to clarify that execute isn't referentially equal

* back to status quo

* fix the issue

* fix unit test

* move algolia marker to outside createRequester

* docs

* make ts happy again

* Apply suggestions from code review

Co-authored-by: Sarah Dayan <[email protected]>

* make requester id required for batching

* Update packages/autocomplete-preset-algolia/src/requester/createRequester.ts

Co-authored-by: Sarah Dayan <[email protected]>

* extended test

Co-authored-by: Youcef Mammar <[email protected]>
Co-authored-by: Sarah Dayan <[email protected]>

Author: 3 people

bundlesize.config.json

@@ -6,7 +6,7 @@
     },
     {
       "path": "packages/autocomplete-js/dist/umd/index.production.js",
-      "maxSize": "16.5 kB"
+      "maxSize": "16.75 kB"
     },
     {
       "path": "packages/autocomplete-preset-algolia/dist/umd/index.production.js",

packages/autocomplete-core/src/resolve.ts

@@ -33,12 +33,13 @@ function isRequesterDescription<TItem extends BaseItem>(
 type PackedDescription<TItem extends BaseItem> = {
   searchClient: SearchClient;
   execute: Execute<TItem>;
+  requesterId?: string;
   items: RequestDescriptionPreResolved<TItem>['requests'];
 };
 
 type RequestDescriptionPreResolved<TItem extends BaseItem> = Pick<
   RequesterDescription<TItem>,
-  'execute' | 'searchClient' | 'transformResponse'
+  'execute' | 'requesterId' | 'searchClient' | 'transformResponse'
 > & {
   requests: Array<{
     query: MultipleQueriesQuery;
@@ -90,15 +91,16 @@ export function resolve<TItem extends BaseItem>(
       return acc;
     }
 
-    const { searchClient, execute, requests } = current;
+    const { searchClient, execute, requesterId, requests } = current;
 
     const container = acc.find<PackedDescription<TItem>>(
       (item): item is PackedDescription<TItem> => {
         return (
           isDescription(current) &&
           isDescription(item) &&
           item.searchClient === searchClient &&
-          item.execute === execute
+          Boolean(requesterId) &&
+          item.requesterId === requesterId
         );
       }
     );
@@ -108,6 +110,7 @@ export function resolve<TItem extends BaseItem>(
     } else {
       const request: PackedDescription<TItem> = {
         execute,
+        requesterId,
         items: requests,
         searchClient,
       };

packages/autocomplete-js/src/__tests__/requester.test.ts

@@ -1,3 +1,7 @@
+import {
+  createRequester,
+  fetchAlgoliaResults,
+} from '@algolia/autocomplete-preset-algolia';
 import { fireEvent, waitFor, within } from '@testing-library/dom';
 
 import {
@@ -346,6 +350,123 @@ describe('requester', () => {
     });
   });
 
+  test('batches calls across requesters with same id', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    const searchClient = createSearchClient({
+      search: jest.fn((requests) =>
+        Promise.resolve(
+          createMultiSearchResponse<{ label: string }>(
+            ...requests.map(({ indexName, params: { query } }) => ({
+              hits: [{ objectID: '1', label: 'Hit 1' }],
+              index: indexName,
+              query,
+            }))
+          )
+        )
+      ),
+    });
+
+    const getResults1 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'custom-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const getResults2 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'custom-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const getResults3 = (params) =>
+      createRequester(
+        fetchAlgoliaResults,
+        'different-requester-id'
+      )({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const templates = {
+      item({ item }) {
+        return JSON.stringify(item);
+      },
+    };
+
+    autocomplete({
+      container,
+      panelContainer,
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'hits',
+            getItems() {
+              return getResults1({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+          {
+            sourceId: 'hits-merged',
+            getItems() {
+              return getResults2({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+          {
+            sourceId: 'hits-separate',
+            getItems() {
+              return getResults3({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates,
+          },
+        ];
+      },
+    });
+
+    const input = container.querySelector<HTMLInputElement>('.aa-Input');
+
+    fireEvent.input(input, { target: { value: 'a' } });
+
+    await waitFor(() => {
+      expect(
+        panelContainer.querySelector<HTMLElement>('.aa-Panel')
+      ).toBeInTheDocument();
+
+      expect(searchClient.search).toHaveBeenCalledTimes(2);
+    });
+  });
+
   test('transforms the response before forwarding it to the state', async () => {
     const container = document.createElement('div');
     const panelContainer = document.createElement('div');

packages/autocomplete-js/src/requesters/__tests__/getAlgoliaFacets.test.ts

@@ -22,6 +22,7 @@ describe('getAlgoliaFacets', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

packages/autocomplete-js/src/requesters/__tests__/getAlgoliaResults.test.ts

@@ -22,6 +22,7 @@ describe('getAlgoliaResults', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

packages/autocomplete-js/src/requesters/createAlgoliaRequester.ts

@@ -5,9 +5,11 @@ import {
 
 import { userAgents } from '../userAgents';
 
-export const createAlgoliaRequester = createRequester((params) =>
-  fetchAlgoliaResults({
-    ...params,
-    userAgents,
-  })
+export const createAlgoliaRequester = createRequester(
+  (params) =>
+    fetchAlgoliaResults({
+      ...params,
+      userAgents,
+    }),
+  'algolia'
 );

packages/autocomplete-preset-algolia/src/requester/__tests__/createRequester.test.ts

@@ -40,6 +40,7 @@ describe('createRequester', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: undefined,
       transformResponse,
       searchClient,
       queries: [

packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaFacets.test.ts

@@ -22,6 +22,7 @@ describe('getAlgoliaFacets', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

packages/autocomplete-preset-algolia/src/requester/__tests__/getAlgoliaResults.test.ts

@@ -22,6 +22,7 @@ describe('getAlgoliaResults', () => {
 
     expect(description).toEqual({
       execute: expect.any(Function),
+      requesterId: 'algolia',
       transformResponse: expect.any(Function),
       searchClient,
       queries: [

packages/autocomplete-preset-algolia/src/requester/createAlgoliaRequester.ts

@@ -2,4 +2,7 @@ import { fetchAlgoliaResults } from '../search';
 
 import { createRequester } from './createRequester';
 
-export const createAlgoliaRequester = createRequester(fetchAlgoliaResults);
+export const createAlgoliaRequester = createRequester(
+  fetchAlgoliaResults,
+  'algolia'
+);