feat(js): type highlight utils

Author: francoischalifour

examples/js/app.ts

@@ -1,6 +1,8 @@
+import { Hit } from '@algolia/client-search';
 import algoliasearch from 'algoliasearch/lite';
 import {
   autocomplete,
+  AutocompleteSource,
   getAlgoliaHits,
   reverseHighlightItem,
 } from '@algolia/autocomplete-js';
@@ -12,7 +14,7 @@ const searchClient = algoliasearch(
 
 type QuerySuggestionHit = { query: string };
 
-autocomplete<QuerySuggestionHit>({
+autocomplete<Hit<QuerySuggestionHit>>({
   container: '#autocomplete',
   debug: true,
   // dropdownPlacement: 'start',
@@ -40,15 +42,15 @@ autocomplete<QuerySuggestionHit>({
               return `
                 <div class="item-icon">${searchIcon}</div>
                 <div>
-                  ${reverseHighlightItem<QuerySuggestionHit>({
+                  ${reverseHighlightItem({
                     item,
                     attribute: 'query',
                   })}
                 </div>
               `;
             },
           },
-        },
+        } as AutocompleteSource<Hit<QuerySuggestionHit>>,
       ];
     });
   },

examples/js/package.json

@@ -10,6 +10,7 @@
     "start": "parcel index.html"
   },
   "dependencies": {
+    "@algolia/client-search": "4.5.1",
     "@algolia/autocomplete-js": "^1.0.0-alpha.29",
     "algoliasearch": "4.5.1"
   },

packages/autocomplete-js/package.json

@@ -31,6 +31,7 @@
     "dist/"
   ],
   "dependencies": {
+    "@algolia/client-search": "4.5.1",
     "@algolia/autocomplete-core": "^1.0.0-alpha.29",
     "@algolia/autocomplete-preset-algolia": "^1.0.0-alpha.29"
   }

packages/autocomplete-js/src/autocomplete.ts

@@ -13,7 +13,7 @@ import { setProperties, setPropertiesWithoutEvents } from './setProperties';
 import {
   AutocompleteOptions,
   AutocompleteApi,
-  AutocompleteSource,
+  InternalAutocompleteSource,
 } from './types';
 
 function defaultRender({ root, sections }) {
@@ -146,7 +146,7 @@ export function autocomplete<TItem>({
 
     const sections = state.suggestions.map((suggestion) => {
       const items = suggestion.items;
-      const source = suggestion.source as AutocompleteSource<TItem>;
+      const source = suggestion.source as InternalAutocompleteSource<TItem>;
 
       const section = document.createElement('section');
       setProperties(section, {

packages/autocomplete-js/src/highlight.ts

@@ -4,8 +4,12 @@ import {
   parseAlgoliaHitSnippet,
   parseAlgoliaHitReverseSnippet,
 } from '@algolia/autocomplete-preset-algolia';
+import { Hit } from '@algolia/client-search';
 
-type ParsedAttribute = { value: string; isHighlighted: boolean };
+type ParsedAttribute = {
+  value: string;
+  isHighlighted: boolean;
+};
 
 function concatParts(
   parts: ParsedAttribute[],
@@ -32,7 +36,7 @@ type HighlightItemParams<TItem> = {
 /**
  * Highlights and escapes the matching parts of an Algolia hit.
  */
-export function highlightItem<TItem extends object>({
+export function highlightItem<TItem extends Hit<{}>>({
   item,
   attribute,
   highlightPreTag = '<mark>',
@@ -54,7 +58,7 @@ export function highlightItem<TItem extends object>({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseHighlightItem<TItem extends object>({
+export function reverseHighlightItem<TItem extends Hit<{}>>({
   item,
   attribute,
   highlightPreTag = '<mark>',
@@ -74,7 +78,7 @@ export function reverseHighlightItem<TItem extends object>({
 /**
  * Highlights and escapes the matching parts of an Algolia hit snippet.
  */
-export function snippetItem<TItem extends object>({
+export function snippetItem<TItem extends Hit<{}>>({
   item,
   attribute,
   highlightPreTag = '<mark>',
@@ -96,7 +100,7 @@ export function snippetItem<TItem extends object>({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseSnippetItem<TItem extends object>({
+export function reverseSnippetItem<TItem extends Hit<{}>>({
   item,
   attribute,
   highlightPreTag = '<mark>',

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

@@ -9,9 +9,7 @@ import {
 
 type Template<TParams> = (params: TParams) => string | void;
 
-export type AutocompleteSource<TItem> = InternalAutocompleteCoreSource<
-  TItem
-> & {
+type SourceTemplates<TItem> = {
   /**
    * Templates to display in the autocomplete dropdown.
    *
@@ -43,6 +41,14 @@ export type AutocompleteSource<TItem> = InternalAutocompleteCoreSource<
   };
 };
 
+export type AutocompleteSource<TItem> = AutocompleteCoreSource<TItem> &
+  SourceTemplates<TItem>;
+
+export type InternalAutocompleteSource<TItem> = InternalAutocompleteCoreSource<
+  TItem
+> &
+  SourceTemplates<TItem>;
+
 type GetSources<TItem> = (
   params: GetSourcesParams<TItem>
 ) =>