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

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,15 @@ 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
+          item.requesterId === requesterId
         );
       }
     );
@@ -108,6 +109,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,93 @@ describe('requester', () => {
     });
   });
 
+  test('batches calls when possible and re-dispatches results to the right sources across requester instances', async () => {
+    const container = document.createElement('div');
+    const panelContainer = document.createElement('div');
+
+    document.body.appendChild(panelContainer);
+
+    const searchClient = createSearchClient({
+      search: jest.fn(() =>
+        Promise.resolve(
+          createMultiSearchResponse<{ label: string }>(
+            { hits: [{ objectID: '1', label: 'Hit 1' }] },
+            { hits: [{ objectID: '2', label: 'Hit 2' }] }
+          )
+        )
+      ),
+    });
+
+    const getResults1 = (params) =>
+      createRequester(fetchAlgoliaResults)({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    const getResults2 = (params) =>
+      createRequester(fetchAlgoliaResults)({
+        transformResponse: (response) => response.hits,
+      })(params);
+
+    autocomplete({
+      container,
+      panelContainer,
+      getSources({ query }) {
+        return [
+          {
+            sourceId: 'hits',
+            getItems() {
+              return getResults1({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+          {
+            sourceId: 'other-hits',
+            getItems() {
+              return getResults2({
+                searchClient,
+                queries: [
+                  {
+                    indexName: 'indexName',
+                    query,
+                  },
+                ],
+              });
+            },
+            templates: {
+              item({ item }) {
+                return JSON.stringify(item);
+              },
+            },
+          },
+        ];
+      },
+    });
+
+    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(1);
+    });
+  });
+
   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'
+);

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

@@ -77,13 +77,29 @@ export type RequestParams<THit> = FetcherParams & {
 };
 
 export type RequesterDescription<THit> = {
+  /**
+   * The search client used for this request. Multiple queries with the same client will be batched.
+   */
   searchClient: SearchClient;
+  /**
+   * Used to make sure queries should be batched. The Algolia requester uses "algolia" for this.
+   */
+  requesterId?: string;
+  /**
+   * The search parameters used for this query
+   */
   queries: MultipleQueriesQuery[];
+  /**
+   * Change the response of this search before returning it to the caller
+   */
   transformResponse: TransformResponse<THit>;
+  /**
+   * Batched multi-query function. Is only called for one of the batched calls
+   */
   execute: Execute<THit>;
 };
 
-export function createRequester(fetcher: Fetcher) {
+export function createRequester(fetcher: Fetcher, requesterId?: string) {
   function execute<THit>(fetcherParams: ExecuteParams<THit>) {
     return fetcher<THit>({
       searchClient: fetcherParams.searchClient,
@@ -108,6 +124,7 @@ export function createRequester(fetcher: Fetcher) {
       requestParams: RequestParams<TTHit>
     ): RequesterDescription<TTHit> {
       return {
+        requesterId,
         execute,
         ...requesterParams,
         ...requestParams,