From b17848753a2794a76edf545d649be6107c712f31 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= <francois.chalifour@gmail.com>
Date: Wed, 9 Sep 2020 17:34:48 +0200
Subject: [PATCH] feat(js): type highlighting utils

---
 examples/js/app.ts                        |  9 +++++--
 packages/autocomplete-js/src/highlight.ts | 30 +++++++++++------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/examples/js/app.ts b/examples/js/app.ts
index fda62ac13..52b7049e1 100644
--- 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
index 432919424..0ae55f406 100644
--- 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,