feat(algolia): fix highlighting hit type (#452)

examples/js/categoriesPlugin.tsx

@@ -4,7 +4,6 @@ import {
   getAlgoliaFacetHits,
   highlightHit,
 } from '@algolia/autocomplete-js';
-import { Hit } from '@algolia/client-search';
 import { SearchClient } from 'algoliasearch/lite';
 import { h, Fragment } from 'preact';
 
@@ -70,8 +69,8 @@ export function createCategoriesPlugin({
                   </div>
                   <div className="aa-ItemContent">
                     <div className="aa-ItemContentTitle">
-                      {highlightHit<Hit<CategoryItem>>({
-                        hit: item as any,
+                      {highlightHit<CategoryItem>({
+                        hit: item,
                         attribute: 'label',
                       })}
                     </div>

packages/autocomplete-js/src/highlight.ts

@@ -3,29 +3,30 @@ import {
   parseAlgoliaHitReverseHighlight,
   parseAlgoliaHitReverseSnippet,
   parseAlgoliaHitSnippet,
+  HighlightedHit,
+  SnippetedHit,
 } from '@algolia/autocomplete-preset-algolia';
-import { Hit } from '@algolia/client-search';
 import { createElement as preactCreateElement } from 'preact';
 
 import { AutocompleteRenderer } from './types';
 
-type HighlightItemParams<TItem> = {
-  hit: TItem;
-  attribute: keyof TItem | string[];
+type HighlightItemParams<THit> = {
+  hit: THit;
+  attribute: keyof THit | string[];
   tagName?: string;
   createElement?: AutocompleteRenderer['createElement'];
 };
 
 /**
  * Highlights and escapes the matching parts of an Algolia hit.
  */
-export function highlightHit<TItem extends Hit<{}>>({
+export function highlightHit<THit extends HighlightedHit<unknown>>({
   hit,
   attribute,
   tagName = 'mark',
   createElement = preactCreateElement,
-}: HighlightItemParams<TItem>) {
-  return parseAlgoliaHitHighlight<TItem>({ hit, attribute }).map((x, index) =>
+}: HighlightItemParams<THit>) {
+  return parseAlgoliaHitHighlight<THit>({ hit, attribute }).map((x, index) =>
     x.isHighlighted ? createElement(tagName, { key: index }, x.value) : x.value
   );
 }
@@ -35,13 +36,13 @@ export function highlightHit<TItem extends Hit<{}>>({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseHighlightHit<TItem extends Hit<{}>>({
+export function reverseHighlightHit<THit extends HighlightedHit<unknown>>({
   hit,
   attribute,
   tagName = 'mark',
   createElement = preactCreateElement,
-}: HighlightItemParams<TItem>) {
-  return parseAlgoliaHitReverseHighlight<TItem>({
+}: HighlightItemParams<THit>) {
+  return parseAlgoliaHitReverseHighlight<THit>({
     hit,
     attribute,
   }).map((x, index) =>
@@ -52,13 +53,13 @@ export function reverseHighlightHit<TItem extends Hit<{}>>({
 /**
  * Highlights and escapes the matching parts of an Algolia hit snippet.
  */
-export function snippetHit<TItem extends Hit<{}>>({
+export function snippetHit<THit extends SnippetedHit<unknown>>({
   hit,
   attribute,
   tagName = 'mark',
   createElement = preactCreateElement,
-}: HighlightItemParams<TItem>) {
-  return parseAlgoliaHitSnippet<TItem>({ hit, attribute }).map((x, index) =>
+}: HighlightItemParams<THit>) {
+  return parseAlgoliaHitSnippet<THit>({ hit, attribute }).map((x, index) =>
     x.isHighlighted ? createElement(tagName, { key: index }, x.value) : x.value
   );
 }
@@ -68,13 +69,13 @@ export function snippetHit<TItem extends Hit<{}>>({
  *
  * This is a common pattern for Query Suggestions.
  */
-export function reverseSnippetHit<TItem extends Hit<{}>>({
+export function reverseSnippetHit<THit extends SnippetedHit<unknown>>({
   hit,
   attribute,
   tagName = 'mark',
   createElement = preactCreateElement,
-}: HighlightItemParams<TItem>) {
-  return parseAlgoliaHitReverseSnippet<TItem>({
+}: HighlightItemParams<THit>) {
+  return parseAlgoliaHitReverseSnippet<THit>({
     hit,
     attribute,
   }).map((x, index) =>

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

@@ -1,5 +1,6 @@
 /** @jsx createElement */
 import { reverseHighlightHit, SourceTemplates } from '@algolia/autocomplete-js';
+import { HighlightedHit } from '@algolia/autocomplete-preset-algolia';
 
 import { RecentSearchesItem } from './types';
 
@@ -23,7 +24,7 @@ export function getTemplates<TItem extends RecentSearchesItem>({
           </div>
           <div className="aa-ItemContent">
             <div className="aa-ItemContentTitle">
-              {reverseHighlightHit<RecentSearchesItem>({
+              {reverseHighlightHit<HighlightedHit<RecentSearchesItem>>({
                 hit: item,
                 attribute: 'query',
                 createElement,

packages/autocomplete-preset-algolia/src/highlight/HighlightedHit.ts

@@ -0,0 +1,5 @@
+import { HighlightResult } from '@algolia/client-search';
+
+export type HighlightedHit<THit> = THit & {
+  _highlightResult?: HighlightResult<THit>;
+};

packages/autocomplete-preset-algolia/src/highlight/SnippetedHit.ts

@@ -0,0 +1,5 @@
+import { SnippetResult } from '@algolia/client-search';
+
+export type SnippetedHit<THit> = THit & {
+  _snippetResult?: SnippetResult<THit>;
+};

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts

@@ -1,12 +1,12 @@
 import { warn } from '@algolia/autocomplete-shared';
-import { Hit } from '@algolia/client-search';
 
 import { getAttributeValueByPath } from './getAttributeValueByPath';
+import { HighlightedHit } from './HighlightedHit';
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { parseAttribute } from './parseAttribute';
 import { ParsedAttribute } from './ParsedAttribute';
 
-export function parseAlgoliaHitHighlight<THit extends Hit<{}>>({
+export function parseAlgoliaHitHighlight<THit extends HighlightedHit<unknown>>({
   hit,
   attribute,
 }: ParseAlgoliaHitParams<THit>): ParsedAttribute[] {

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseHighlight.ts

@@ -1,12 +1,11 @@
-import { Hit } from '@algolia/client-search';
-
+import { HighlightedHit } from './HighlightedHit';
 import { parseAlgoliaHitHighlight } from './parseAlgoliaHitHighlight';
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { ParsedAttribute } from './ParsedAttribute';
 import { reverseHighlightedParts } from './reverseHighlightedParts';
 
-export function parseAlgoliaHitReverseHighlight<THit extends Hit<{}>>(
-  props: ParseAlgoliaHitParams<THit>
-): ParsedAttribute[] {
+export function parseAlgoliaHitReverseHighlight<
+  THit extends HighlightedHit<unknown>
+>(props: ParseAlgoliaHitParams<THit>): ParsedAttribute[] {
   return reverseHighlightedParts(parseAlgoliaHitHighlight<THit>(props));
 }

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseSnippet.ts

@@ -1,12 +1,11 @@
-import { Hit } from '@algolia/client-search';
-
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { parseAlgoliaHitSnippet } from './parseAlgoliaHitSnippet';
 import { ParsedAttribute } from './ParsedAttribute';
 import { reverseHighlightedParts } from './reverseHighlightedParts';
+import { SnippetedHit } from './SnippetedHit';
 
-export function parseAlgoliaHitReverseSnippet<THit extends Hit<{}>>(
-  props: ParseAlgoliaHitParams<THit>
-): ParsedAttribute[] {
+export function parseAlgoliaHitReverseSnippet<
+  THit extends SnippetedHit<unknown>
+>(props: ParseAlgoliaHitParams<THit>): ParsedAttribute[] {
   return reverseHighlightedParts(parseAlgoliaHitSnippet<THit>(props));
 }

packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts

@@ -1,12 +1,12 @@
 import { warn } from '@algolia/autocomplete-shared';
-import { Hit } from '@algolia/client-search';
 
 import { getAttributeValueByPath } from './getAttributeValueByPath';
 import { ParseAlgoliaHitParams } from './ParseAlgoliaHitParams';
 import { parseAttribute } from './parseAttribute';
 import { ParsedAttribute } from './ParsedAttribute';
+import { SnippetedHit } from './SnippetedHit';
 
-export function parseAlgoliaHitSnippet<THit extends Hit<{}>>({
+export function parseAlgoliaHitSnippet<THit extends SnippetedHit<unknown>>({
   hit,
   attribute,
 }: ParseAlgoliaHitParams<THit>): ParsedAttribute[] {

packages/autocomplete-preset-algolia/src/index.ts

@@ -1,7 +1,9 @@
+export * from './highlight/HighlightedHit';
 export * from './highlight/parseAlgoliaHitHighlight';
 export * from './highlight/parseAlgoliaHitReverseHighlight';
 export * from './highlight/parseAlgoliaHitReverseSnippet';
 export * from './highlight/parseAlgoliaHitSnippet';
+export * from './highlight/SnippetedHit';
 export * from './search/getAlgoliaFacetHits';
 export * from './search/getAlgoliaHits';
 export * from './search/getAlgoliaResults';