feat(sourceId): Add sourceId to provide data-autocomplete-source-id on section source container

examples/js/app.tsx

@@ -30,13 +30,11 @@ insightsClient('init', { appId, apiKey });
 
 const algoliaInsightsPlugin = createAlgoliaInsightsPlugin({ insightsClient });
 const recentSearchesPlugin = createLocalStorageRecentSearchesPlugin({
-  sourceId: 'recentSearchesPlugin',
   key: 'search',
   limit: 3,
 });
 const querySuggestionsPlugin = createQuerySuggestionsPlugin({
   searchClient,
-  sourceId: 'querySuggestionsPlugin',
   indexName: 'instant_search_demo_query_suggestions',
   getSearchParams({ state }) {
     return recentSearchesPlugin.data.getAlgoliaSearchParams({
@@ -64,7 +62,7 @@ autocomplete({
 
     return [
       {
-        sourceId: 'algoliaHits',
+        sourceId: 'products',
         getItems() {
           return getAlgoliaHits<Product>({
             searchClient,

packages/autocomplete-core/src/__tests__/concurrency.test.ts

@@ -1,6 +1,6 @@
 import userEvent from '@testing-library/user-event';
 
-import { defer } from '../../../../test/utils';
+import { createSource, defer } from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 describe.skip('concurrency', () => {
@@ -14,12 +14,11 @@ describe.skip('concurrency', () => {
 
       return defer(() => {
         return [
-          {
-            sourceId: 'testSource',
+          createSource({
             getItems() {
               return [{ label: query }];
             },
-          },
+          }),
         ];
       }, delays[deferCount]);
     };

packages/autocomplete-core/src/__tests__/getInputProps.test.ts

@@ -1049,7 +1049,7 @@ describe('getInputProps', () => {
                     { label: '2', url: '#2' },
                   ],
                   source: {
-                    sourceId: 'testSource',
+                    sourceId: expect.any(String),
                     getItemInputValue: expect.any(Function),
                     getItemUrl: expect.any(Function),
                     getItems: expect.any(Function),

packages/autocomplete-core/src/__tests__/stallThreshold.test.ts

@@ -1,6 +1,6 @@
 import userEvent from '@testing-library/user-event';
 
-import { defer } from '../../../../test/utils';
+import { createSource, defer } from '../../../../test/utils';
 import { createAutocomplete } from '../createAutocomplete';
 
 describe('stallThreshold', () => {
@@ -11,12 +11,11 @@ describe('stallThreshold', () => {
       getSources() {
         return defer(() => {
           return [
-            {
-              sourceId: 'testSource',
+            createSource({
               getItems() {
                 return [{ label: '1' }, { label: 2 }];
               },
-            },
+            }),
           ];
         }, 500);
       },
@@ -60,12 +59,11 @@ describe('stallThreshold', () => {
       getSources() {
         return defer(() => {
           return [
-            {
-              sourceId: 'testSource',
+            createSource({
               getItems() {
                 return [{ label: '1' }, { label: 2 }];
               },
-            },
+            }),
           ];
         }, 500);
       },

packages/autocomplete-core/src/types/AutocompleteSource.ts

@@ -59,7 +59,7 @@ export interface AutocompleteSource<TItem extends BaseItem> {
    */
   onActive?(params: OnHighlightParams<TItem>): void;
   /**
-   * Applied to data-autocomplete-source-id on the section source container
+   * Identifier for the source.
    */
   sourceId: string;
 }

packages/autocomplete-core/src/utils/__tests__/getNormalizedSources.test.ts

@@ -70,7 +70,7 @@ describe('getNormalizedSources', () => {
     );
   });
 
-  test('with missing sourceId triggers invariant', async () => {
+  test('with missing `sourceId` triggers invariant', async () => {
     const getSources = () => [
       {
         getItems() {
@@ -89,9 +89,31 @@ describe('getNormalizedSources', () => {
 
     // @ts-expect-error
     await expect(getNormalizedSources(getSources, params)).rejects.toEqual(
-      new Error(
-        '[Autocomplete] The `getSources` function must return a `sourceId` string but returned type "undefined":\n\nundefined'
-      )
+      new Error('[Autocomplete] A source must provide a `sourceId` string.')
+    );
+  });
+
+  test('with wrong `sourceId` type triggers invariant', async () => {
+    const getSources = () => [
+      {
+        sourceId: ['testSource'],
+        getItems() {
+          return [];
+        },
+        templates: {
+          item() {},
+        },
+      },
+    ];
+    const params = {
+      query: '',
+      state: createState({}),
+      ...createScopeApi(),
+    };
+
+    // @ts-expect-error
+    await expect(getNormalizedSources(getSources, params)).rejects.toEqual(
+      new Error('[Autocomplete] A source must provide a `sourceId` string.')
     );
   });
 

packages/autocomplete-core/src/utils/getNormalizedSources.ts

@@ -33,10 +33,8 @@ export function getNormalizedSources<TItem extends BaseItem>(
         )
         .map((source) => {
           invariant(
-            source.sourceId !== undefined,
-            `The \`getSources\` function must return a \`sourceId\` string but returned type ${JSON.stringify(
-              typeof source.sourceId
-            )}:\n\n${JSON.stringify(source.sourceId, null, 2)}`
+            typeof source.sourceId === 'string',
+            'A source must provide a `sourceId` string.'
           );
 
           const normalizedSource: InternalAutocompleteSource<TItem> = {

packages/autocomplete-plugin-query-suggestions/src/createQuerySuggestionsPlugin.ts

@@ -17,7 +17,6 @@ export type CreateQuerySuggestionsPluginParams<
 > = {
   searchClient: SearchClient;
   indexName: string;
-  sourceId: string;
   getSearchParams?(params: { state: AutocompleteState<TItem> }): SearchOptions;
   getTemplates?(params: GetTemplatesParams<TItem>): SourceTemplates<TItem>;
 };
@@ -27,7 +26,6 @@ export function createQuerySuggestionsPlugin<
 >({
   searchClient,
   indexName,
-  sourceId,
   getSearchParams = () => ({}),
   getTemplates = defaultGetTemplates,
 }: CreateQuerySuggestionsPluginParams<TItem>): AutocompletePlugin<
@@ -38,7 +36,7 @@ export function createQuerySuggestionsPlugin<
     getSources({ query, setQuery, refresh, state }) {
       return [
         {
-          sourceId,
+          sourceId: 'querySuggestionsPlugin',
           getItemInputValue({ item }) {
             return item.query;
           },

packages/autocomplete-plugin-recent-searches/src/createLocalStorageRecentSearchesPlugin.ts

@@ -34,10 +34,6 @@ export type CreateRecentSearchesLocalStorageOptions<
    * Function to search in the recent items.
    */
   search?(params: SearchParams<TItem>): Array<Highlighted<TItem>>;
-  /**
-   * Applied to data-autocomplete-source-id on the section source container
-   */
-  sourceId: string;
 };
 
 type LocalStorageRecentSearchesPluginOptions<
@@ -52,7 +48,6 @@ export function createLocalStorageRecentSearchesPlugin<
   limit = 5,
   getTemplates,
   search = defaultSearch,
-  sourceId,
 }: LocalStorageRecentSearchesPluginOptions<TItem>): AutocompletePlugin<
   TItem,
   RecentSearchesPluginData
@@ -61,12 +56,10 @@ export function createLocalStorageRecentSearchesPlugin<
     key: [LOCAL_STORAGE_KEY, key].join(':'),
     limit,
     search,
-    sourceId,
   });
 
   return createRecentSearchesPlugin({
     getTemplates,
     storage,
-    sourceId,
   });
 }

packages/autocomplete-plugin-recent-searches/src/createRecentSearchesPlugin.ts

@@ -21,14 +21,12 @@ export type RecentSearchesPluginData = {
 export type CreateRecentSearchesPluginParams<
   TItem extends RecentSearchesItem
 > = {
-  sourceId: string;
   storage: RecentSearchesStorage<TItem>;
   getTemplates?(params: GetTemplatesParams): SourceTemplates<TItem>;
 };
 
 export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({
   storage,
-  sourceId,
   getTemplates = defaultGetTemplates,
 }: CreateRecentSearchesPluginParams<TItem>): AutocompletePlugin<
   TItem,
@@ -70,7 +68,7 @@ export function createRecentSearchesPlugin<TItem extends RecentSearchesItem>({
 
         return [
           {
-            sourceId,
+            sourceId: 'recentSearchesPlugin',
             getItemInputValue({ item }) {
               return item.query;
             },