diff --git a/bundlesize.config.json b/bundlesize.config.json index eefb4dd19..52911c7a8 100644 --- a/bundlesize.config.json +++ b/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", diff --git a/packages/autocomplete-plugin-recent-searches/src/createLocalStorageRecentSearchesPlugin.ts b/packages/autocomplete-plugin-recent-searches/src/createLocalStorageRecentSearchesPlugin.ts index ccb177d3d..21632dd74 100644 --- a/packages/autocomplete-plugin-recent-searches/src/createLocalStorageRecentSearchesPlugin.ts +++ b/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[]; + search?(params: SearchParams): Array>; }; type LocalStorageRecentSearchesPluginOptions< diff --git a/packages/autocomplete-plugin-recent-searches/src/createStore.ts b/packages/autocomplete-plugin-recent-searches/src/createStore.ts index 1f8fd9a4e..bb5109200 100644 --- a/packages/autocomplete-plugin-recent-searches/src/createStore.ts +++ b/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 = { add(item: TItem): void; @@ -11,7 +11,7 @@ export type RecentSearchesStore = { export type RecentSearchesStorage = { onAdd(item: TItem): void; onRemove(id: string): void; - getAll(query?: string): MaybePromise; + getAll(query?: string): MaybePromise>>; }; export function createStore( diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts b/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts index 0dda0629d..73b45aa5e 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.ts +++ b/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({ 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); diff --git a/packages/autocomplete-plugin-recent-searches/src/types/Highlighted.ts b/packages/autocomplete-plugin-recent-searches/src/types/Highlighted.ts new file mode 100644 index 000000000..ac14c6813 --- /dev/null +++ b/packages/autocomplete-plugin-recent-searches/src/types/Highlighted.ts @@ -0,0 +1,7 @@ +export type Highlighted = TItem & { + _highlightResult: { + query: { + value: string; + }; + }; +}; diff --git a/packages/autocomplete-plugin-recent-searches/src/types/index.ts b/packages/autocomplete-plugin-recent-searches/src/types/index.ts index 8ffd37a5e..3f7ae9c7b 100644 --- a/packages/autocomplete-plugin-recent-searches/src/types/index.ts +++ b/packages/autocomplete-plugin-recent-searches/src/types/index.ts @@ -1 +1,2 @@ +export * from './Highlighted'; export * from './RecentSearchesItem'; diff --git a/packages/autocomplete-plugin-recent-searches/src/usecases/localStorage/search.ts b/packages/autocomplete-plugin-recent-searches/src/usecases/localStorage/search.ts index 0c869da49..f6009b92e 100644 --- a/packages/autocomplete-plugin-recent-searches/src/usecases/localStorage/search.ts +++ b/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 = { + item: TItem; + query: string; +}; + +function highlight({ + item, + query, +}: HighlightParams): Highlighted { + return { + ...item, + _highlightResult: { + query: { + value: query + ? item.query.replace( + new RegExp(query, 'g'), + `__aa-highlight__${query}__/aa-highlight__` + ) + : item.query, + }, + }, + }; +} export type SearchParams = { query: string; @@ -10,12 +34,13 @@ export function search({ query, items, limit, -}: SearchParams) { +}: SearchParams): Array> { 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 })); }