feat(recent-searches): add search highlighting (#370)

Author: francoischalifour

bundlesize.config.json

@@ -14,7 +14,7 @@
     },
     {
       "path": "packages/autocomplete-plugin-recent-searches/dist/umd/index.production.js",
-      "maxSize": "2.5 kB"
+      "maxSize": "3 kB"
     },
     {
       "path": "packages/autocomplete-plugin-query-suggestions/dist/umd/index.production.js",

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

@@ -5,7 +5,7 @@ import {
   CreateRecentSearchesPluginParams,
   RecentSearchesPluginData,
 } from './createRecentSearchesPlugin';
-import { RecentSearchesItem } from './types';
+import { Highlighted, RecentSearchesItem } from './types';
 import {
   LOCAL_STORAGE_KEY,
   createLocalStorage,
@@ -33,7 +33,7 @@ export type CreateRecentSearchesLocalStorageOptions<
   /**
    * Function to search in the recent items.
    */
-  search?(params: SearchParams<TItem>): TItem[];
+  search?(params: SearchParams<TItem>): Array<Highlighted<TItem>>;
 };
 
 type LocalStorageRecentSearchesPluginOptions<

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

@@ -1,6 +1,6 @@
 import { MaybePromise } from '@algolia/autocomplete-shared';
 
-import { RecentSearchesItem } from './types/RecentSearchesItem';
+import { Highlighted, RecentSearchesItem } from './types';
 
 export type RecentSearchesStore<TItem extends RecentSearchesItem> = {
   add(item: TItem): void;
@@ -11,7 +11,7 @@ export type RecentSearchesStore<TItem extends RecentSearchesItem> = {
 export type RecentSearchesStorage<TItem extends RecentSearchesItem> = {
   onAdd(item: TItem): void;
   onRemove(id: string): void;
-  getAll(query?: string): MaybePromise<TItem[]>;
+  getAll(query?: string): MaybePromise<Array<Highlighted<TItem>>>;
 };
 
 export function createStore<TItem extends RecentSearchesItem>(

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

@@ -1,4 +1,4 @@
-import { SourceTemplates } from '@algolia/autocomplete-js';
+import { SourceTemplates, reverseHighlightHit } from '@algolia/autocomplete-js';
 
 import { recentIcon, resetIcon } from './icons';
 import { RecentSearchesItem } from './types';
@@ -19,7 +19,10 @@ export function getTemplates<TItem extends RecentSearchesItem>({
       icon.innerHTML = recentIcon;
       const title = document.createElement('div');
       title.className = 'aa-ItemTitle';
-      title.innerText = item.query;
+      title.innerHTML = reverseHighlightHit({
+        hit: item as any,
+        attribute: 'query',
+      });
       content.appendChild(icon);
       content.appendChild(title);
 

packages/autocomplete-plugin-recent-searches/src/types/Highlighted.ts

@@ -0,0 +1,7 @@
+export type Highlighted<TItem> = TItem & {
+  _highlightResult: {
+    query: {
+      value: string;
+    };
+  };
+};

packages/autocomplete-plugin-recent-searches/src/types/index.ts

@@ -1 +1,2 @@
+export * from './Highlighted';
 export * from './RecentSearchesItem';

packages/autocomplete-plugin-recent-searches/src/usecases/localStorage/search.ts

@@ -1,4 +1,28 @@
-import { RecentSearchesItem } from '../../types';
+import { Highlighted, RecentSearchesItem } from '../../types';
+
+type HighlightParams<TItem> = {
+  item: TItem;
+  query: string;
+};
+
+function highlight<TItem extends RecentSearchesItem>({
+  item,
+  query,
+}: HighlightParams<TItem>): Highlighted<TItem> {
+  return {
+    ...item,
+    _highlightResult: {
+      query: {
+        value: query
+          ? item.query.replace(
+              new RegExp(query, 'g'),
+              `__aa-highlight__${query}__/aa-highlight__`
+            )
+          : item.query,
+      },
+    },
+  };
+}
 
 export type SearchParams<TItem> = {
   query: string;
@@ -10,12 +34,13 @@ export function search<TItem extends RecentSearchesItem>({
   query,
   items,
   limit,
-}: SearchParams<TItem>) {
+}: SearchParams<TItem>): Array<Highlighted<TItem>> {
   if (!query) {
-    return items.slice(0, limit);
+    return items.slice(0, limit).map((item) => highlight({ item, query }));
   }
 
   return items
-    .filter((item) => item.query.toLowerCase().startsWith(query.toLowerCase()))
-    .slice(0, limit);
+    .filter((item) => item.query.toLowerCase().includes(query.toLowerCase()))
+    .slice(0, limit)
+    .map((item) => highlight({ item, query }));
 }