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

examples/js/app.tsx

@@ -30,11 +30,13 @@ 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({
@@ -62,6 +64,7 @@ autocomplete({
 
     return [
       {
+        sourceId: 'algoliaHits',
         getItems() {
           return getAlgoliaHits<Product>({
             searchClient,

examples/js/shortcutsPlugin.tsx

@@ -14,6 +14,7 @@ export const shortcutsPlugin: AutocompletePlugin<DarkModeItem> = {
 
     return [
       {
+        sourceId: 'shortcutsPlugin',
         getItems() {
           return [
             {

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

@@ -15,6 +15,7 @@ describe.skip('concurrency', () => {
       return defer(() => {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [{ label: query }];
             },

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

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

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

@@ -47,6 +47,7 @@ describe('getSources', () => {
       getSources: () => {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -78,6 +79,7 @@ describe('getSources', () => {
                 templates: expect.objectContaining({
                   item: expect.any(Function),
                 }),
+                sourceId: expect.any(String),
               },
             }),
           ]),
@@ -92,6 +94,7 @@ describe('getSources', () => {
       getSources: () => {
         return [
           {
+            sourceId: 'pluginSource',
             getItems() {
               return [];
             },
@@ -107,6 +110,7 @@ describe('getSources', () => {
       getSources: () => {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },

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

@@ -12,6 +12,7 @@ describe('stallThreshold', () => {
         return defer(() => {
           return [
             {
+              sourceId: 'testSource',
               getItems() {
                 return [{ label: '1' }, { label: 2 }];
               },
@@ -60,6 +61,7 @@ describe('stallThreshold', () => {
         return defer(() => {
           return [
             {
+              sourceId: 'testSource',
               getItems() {
                 return [{ label: '1' }, { label: 2 }];
               },

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

@@ -58,6 +58,10 @@ export interface AutocompleteSource<TItem extends BaseItem> {
    * You can trigger different behaviors based on the event `type`.
    */
   onActive?(params: OnHighlightParams<TItem>): void;
+  /**
+   * Applied to data-autocomplete-source-id on the section source container
+   */
+  sourceId: string;
 }
 
 export type InternalAutocompleteSource<TItem extends BaseItem> = {

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

@@ -7,7 +7,7 @@ import { getNormalizedSources } from '../getNormalizedSources';
 
 describe('getNormalizedSources', () => {
   test('returns a promise of sources', async () => {
-    const getSources = () => [{ getItems: () => [] }];
+    const getSources = () => [{ sourceId: 'testSource', getItems: () => [] }];
     const params = {
       query: '',
       state: createState({
@@ -23,12 +23,17 @@ describe('getNormalizedSources', () => {
         getItems: expect.any(Function),
         onActive: expect.any(Function),
         onSelect: expect.any(Function),
+        sourceId: 'testSource',
       },
     ]);
   });
 
   test('filters out falsy sources', async () => {
-    const getSources = () => [{ getItems: () => [] }, false, undefined];
+    const getSources = () => [
+      { sourceId: 'testSource', getItems: () => [] },
+      false,
+      undefined,
+    ];
     const params = {
       query: '',
       state: createState({
@@ -44,6 +49,7 @@ describe('getNormalizedSources', () => {
         getItems: expect.any(Function),
         onActive: expect.any(Function),
         onSelect: expect.any(Function),
+        sourceId: 'testSource',
       },
     ]);
   });
@@ -64,8 +70,33 @@ describe('getNormalizedSources', () => {
     );
   });
 
+  test('with missing sourceId triggers invariant', async () => {
+    const getSources = () => [
+      {
+        getItems() {
+          return [];
+        },
+        templates: {
+          item() {},
+        },
+      },
+    ];
+    const params = {
+      query: '',
+      state: createState({}),
+      ...createScopeApi(),
+    };
+
+    // @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'
+      )
+    );
+  });
+
   test('provides a default implementation for getItemInputValue which returns the query', async () => {
-    const getSources = () => [{ getItems: () => [] }];
+    const getSources = () => [{ sourceId: 'testSource', getItems: () => [] }];
     const params = {
       query: '',
       state: createState({
@@ -82,7 +113,7 @@ describe('getNormalizedSources', () => {
   });
 
   test('provides a default implementation for getItemUrl', async () => {
-    const getSources = () => [{ getItems: () => [] }];
+    const getSources = () => [{ sourceId: 'testSource', getItems: () => [] }];
     const params = {
       query: '',
       state: createState({}),
@@ -97,7 +128,7 @@ describe('getNormalizedSources', () => {
   });
 
   test('provides a default implementation for onSelect', async () => {
-    const getSources = () => [{ getItems: () => [] }];
+    const getSources = () => [{ sourceId: 'testSource', getItems: () => [] }];
     const params = {
       query: '',
       state: createState({}),
@@ -119,7 +150,7 @@ describe('getNormalizedSources', () => {
   });
 
   test('provides a default implementation for onActive', async () => {
-    const getSources = () => [{ getItems: () => [] }];
+    const getSources = () => [{ sourceId: 'testSource', getItems: () => [] }];
     const params = {
       query: '',
       state: createState({}),

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

@@ -32,6 +32,13 @@ export function getNormalizedSources<TItem extends BaseItem>(
           Boolean(maybeSource)
         )
         .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)}`
+          );
+
           const normalizedSource: InternalAutocompleteSource<TItem> = {
             getItemInputValue({ state }) {
               return state.query;

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

@@ -11,6 +11,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },
@@ -167,6 +168,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -206,6 +208,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -245,6 +248,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -290,6 +294,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -338,6 +343,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [];
             },
@@ -383,6 +389,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },
@@ -418,6 +425,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },
@@ -449,6 +457,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },
@@ -482,6 +491,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },
@@ -512,6 +522,7 @@ describe('autocomplete-js', () => {
       getSources() {
         return [
           {
+            sourceId: 'testSource',
             getItems() {
               return [
                 { label: 'Item 1' },

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

@@ -35,6 +35,7 @@ const querySuggestionsFixturePlugin: AutocompletePlugin<
   getSources() {
     return [
       {
+        sourceId: 'testSource',
         getItems() {
           return querySuggestions;
         },

packages/autocomplete-js/src/render.tsx

@@ -92,7 +92,11 @@ export function renderPanel<TItem extends BaseItem>(
   dom.panel.classList.toggle('aa-Panel--stalled', state.status === 'stalled');
 
   const sections = state.collections.map(({ source, items }, sourceIndex) => (
-    <section key={sourceIndex} className={classNames.source}>
+    <section
+      key={sourceIndex}
+      className={classNames.source}
+      data-autocomplete-source-id={source.sourceId}
+    >
       {source.templates.header && (
         <div className={classNames.sourceHeader}>
           {source.templates.header({

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

@@ -57,6 +57,7 @@ export type AutocompleteSource<TItem extends BaseItem> = WithTemplates<
   AutocompleteCoreSource<TItem>,
   TItem
 >;
+
 export type InternalAutocompleteSource<TItem extends BaseItem> = WithTemplates<
   InternalAutocompleteCoreSource<TItem>,
   TItem

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

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

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

@@ -34,6 +34,10 @@ 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<
@@ -48,6 +52,7 @@ export function createLocalStorageRecentSearchesPlugin<
   limit = 5,
   getTemplates,
   search = defaultSearch,
+  sourceId,
 }: LocalStorageRecentSearchesPluginOptions<TItem>): AutocompletePlugin<
   TItem,
   RecentSearchesPluginData
@@ -56,10 +61,12 @@ export function createLocalStorageRecentSearchesPlugin<
     key: [LOCAL_STORAGE_KEY, key].join(':'),
     limit,
     search,
+    sourceId,
   });
 
   return createRecentSearchesPlugin({
     getTemplates,
     storage,
+    sourceId,
   });
 }