feat(js): type highlighting utils

algolia · Sep 9, 2020 · b178487 · b178487
1 parent fa4b959
commit b178487
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 17 deletions.
diff --git a/examples/js/app.ts b/examples/js/app.ts
@@ -10,7 +10,9 @@ const searchClient = algoliasearch(
   '6be0576ff61c053d5f9a3225e2a90f76'
 );
 
-autocomplete<{ query: string }>({
+type QuerySuggestionHit = { query: string };
+
+autocomplete<QuerySuggestionHit>({
   container: '#autocomplete',
   debug: true,
   // dropdownPlacement: 'start',
@@ -34,7 +36,10 @@ autocomplete<{ query: string }>({
         },
         templates: {
           item({ item }) {
-            return reverseHighlightItem({ item, attribute: 'query' });
+            return reverseHighlightItem<QuerySuggestionHit>({
+              item,
+              attribute: 'query',
+            });
           },
         },
       },

diff --git a/packages/autocomplete-js/src/highlight.ts b/packages/autocomplete-js/src/highlight.ts
@@ -21,9 +21,9 @@ function concatParts(
   }, '');
 }
 
-type HighlightItemParams = {
-  item: any;
-  attribute: string;
+type HighlightItemParams<TItem> = {
+  item: TItem;
+  attribute: keyof TItem;
   highlightPreTag?: string;
   highlightPostTag?: string;
   ignoreEscape?: string[];
@@ -32,15 +32,15 @@ type HighlightItemParams = {
 /**
  * Highlights and escapes the matching parts of an Algolia hit.
  */
-export function highlightItem({
+export function highlightItem<TItem extends object>({
   item,
   attribute,
   highlightPreTag = '<mark>',
   highlightPostTag = '</mark>',
   ignoreEscape,
-}: HighlightItemParams) {
+}: HighlightItemParams<TItem>) {
   return concatParts(
-    parseAlgoliaHitHighlight({
+    parseAlgoliaHitHighlight<TItem>({
       hit: item,
       attribute,
       ignoreEscape,
@@ -54,15 +54,15 @@ export function highlightItem({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseHighlightItem({
+export function reverseHighlightItem<TItem extends object>({
   item,
   attribute,
   highlightPreTag = '<mark>',
   highlightPostTag = '</mark>',
   ignoreEscape,
-}: HighlightItemParams) {
+}: HighlightItemParams<TItem>) {
   return concatParts(
-    parseAlgoliaHitReverseHighlight({
+    parseAlgoliaHitReverseHighlight<TItem>({
       hit: item,
       attribute,
       ignoreEscape,
@@ -74,15 +74,15 @@ export function reverseHighlightItem({
 /**
  * Highlights and escapes the matching parts of an Algolia hit snippet.
  */
-export function snippetItem({
+export function snippetItem<TItem extends object>({
   item,
   attribute,
   highlightPreTag = '<mark>',
   highlightPostTag = '</mark>',
   ignoreEscape,
-}: HighlightItemParams) {
+}: HighlightItemParams<TItem>) {
   return concatParts(
-    parseAlgoliaHitSnippet({
+    parseAlgoliaHitSnippet<TItem>({
       hit: item,
       attribute,
       ignoreEscape,
@@ -96,15 +96,15 @@ export function snippetItem({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseSnippetItem({
+export function reverseSnippetItem<TItem extends object>({
   item,
   attribute,
   highlightPreTag = '<mark>',
   highlightPostTag = '</mark>',
   ignoreEscape,
-}: HighlightItemParams) {
+}: HighlightItemParams<TItem>) {
   return concatParts(
-    parseAlgoliaHitReverseSnippet({
+    parseAlgoliaHitReverseSnippet<TItem>({
       hit: item,
       attribute,
       ignoreEscape,