From fdb51ebb0e5c2daadf00e7ef08827e2d8dc7fbd1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fran=C3=A7ois=20Chalifour?= Date: Thu, 18 Feb 2021 18:55:09 +0100 Subject: [PATCH] feat(algolia): fix highlighting hit type --- examples/js/categoriesPlugin.tsx | 5 ++- packages/autocomplete-js/src/highlight.ts | 33 ++++++++++--------- .../src/getTemplates.tsx | 3 +- .../src/highlight/HighlightedHit.ts | 5 +++ .../src/highlight/SnippetedHit.ts | 5 +++ .../src/highlight/parseAlgoliaHitHighlight.ts | 4 +-- .../parseAlgoliaHitReverseHighlight.ts | 9 +++-- .../parseAlgoliaHitReverseSnippet.ts | 9 +++-- .../src/highlight/parseAlgoliaHitSnippet.ts | 4 +-- .../autocomplete-preset-algolia/src/index.ts | 2 ++ 10 files changed, 45 insertions(+), 34 deletions(-) create mode 100644 packages/autocomplete-preset-algolia/src/highlight/HighlightedHit.ts create mode 100644 packages/autocomplete-preset-algolia/src/highlight/SnippetedHit.ts diff --git a/examples/js/categoriesPlugin.tsx b/examples/js/categoriesPlugin.tsx index 2cbdaf9dd..a373746dd 100644 --- a/examples/js/categoriesPlugin.tsx +++ b/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({
- {highlightHit>({ - hit: item as any, + {highlightHit({ + hit: item, attribute: 'label', })}
diff --git a/packages/autocomplete-js/src/highlight.ts b/packages/autocomplete-js/src/highlight.ts index 6460fff23..9c33e6c63 100644 --- a/packages/autocomplete-js/src/highlight.ts +++ b/packages/autocomplete-js/src/highlight.ts @@ -3,15 +3,16 @@ 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 = { - hit: TItem; - attribute: keyof TItem | string[]; +type HighlightItemParams = { + hit: THit; + attribute: keyof THit | string[]; tagName?: string; createElement?: AutocompleteRenderer['createElement']; }; @@ -19,13 +20,13 @@ type HighlightItemParams = { /** * Highlights and escapes the matching parts of an Algolia hit. */ -export function highlightHit>({ +export function highlightHit>({ hit, attribute, tagName = 'mark', createElement = preactCreateElement, -}: HighlightItemParams) { - return parseAlgoliaHitHighlight({ hit, attribute }).map((x, index) => +}: HighlightItemParams) { + return parseAlgoliaHitHighlight({ hit, attribute }).map((x, index) => x.isHighlighted ? createElement(tagName, { key: index }, x.value) : x.value ); } @@ -35,13 +36,13 @@ export function highlightHit>({ * * This is a common pattern for Query Suggestions. */ -export function reverseHighlightHit>({ +export function reverseHighlightHit>({ hit, attribute, tagName = 'mark', createElement = preactCreateElement, -}: HighlightItemParams) { - return parseAlgoliaHitReverseHighlight({ +}: HighlightItemParams) { + return parseAlgoliaHitReverseHighlight({ hit, attribute, }).map((x, index) => @@ -52,13 +53,13 @@ export function reverseHighlightHit>({ /** * Highlights and escapes the matching parts of an Algolia hit snippet. */ -export function snippetHit>({ +export function snippetHit>({ hit, attribute, tagName = 'mark', createElement = preactCreateElement, -}: HighlightItemParams) { - return parseAlgoliaHitSnippet({ hit, attribute }).map((x, index) => +}: HighlightItemParams) { + return parseAlgoliaHitSnippet({ hit, attribute }).map((x, index) => x.isHighlighted ? createElement(tagName, { key: index }, x.value) : x.value ); } @@ -68,13 +69,13 @@ export function snippetHit>({ * * This is a common pattern for Query Suggestions. */ -export function reverseSnippetHit>({ +export function reverseSnippetHit>({ hit, attribute, tagName = 'mark', createElement = preactCreateElement, -}: HighlightItemParams) { - return parseAlgoliaHitReverseSnippet({ +}: HighlightItemParams) { + return parseAlgoliaHitReverseSnippet({ hit, attribute, }).map((x, index) => diff --git a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx b/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx index 8813f71ca..57e2700b9 100644 --- a/packages/autocomplete-plugin-recent-searches/src/getTemplates.tsx +++ b/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({
- {reverseHighlightHit({ + {reverseHighlightHit>({ hit: item, attribute: 'query', createElement, diff --git a/packages/autocomplete-preset-algolia/src/highlight/HighlightedHit.ts b/packages/autocomplete-preset-algolia/src/highlight/HighlightedHit.ts new file mode 100644 index 000000000..63bde579e --- /dev/null +++ b/packages/autocomplete-preset-algolia/src/highlight/HighlightedHit.ts @@ -0,0 +1,5 @@ +import { HighlightResult } from '@algolia/client-search'; + +export type HighlightedHit = THit & { + _highlightResult?: HighlightResult; +}; diff --git a/packages/autocomplete-preset-algolia/src/highlight/SnippetedHit.ts b/packages/autocomplete-preset-algolia/src/highlight/SnippetedHit.ts new file mode 100644 index 000000000..ca0dc6f0c --- /dev/null +++ b/packages/autocomplete-preset-algolia/src/highlight/SnippetedHit.ts @@ -0,0 +1,5 @@ +import { SnippetResult } from '@algolia/client-search'; + +export type SnippetedHit = THit & { + _snippetResult?: SnippetResult; +}; diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts index 4bf7517cc..4c248cd21 100644 --- a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitHighlight.ts +++ b/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>({ +export function parseAlgoliaHitHighlight>({ hit, attribute, }: ParseAlgoliaHitParams): ParsedAttribute[] { diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseHighlight.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseHighlight.ts index 60fd7c6ec..9f649f0eb 100644 --- a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseHighlight.ts +++ b/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>( - props: ParseAlgoliaHitParams -): ParsedAttribute[] { +export function parseAlgoliaHitReverseHighlight< + THit extends HighlightedHit +>(props: ParseAlgoliaHitParams): ParsedAttribute[] { return reverseHighlightedParts(parseAlgoliaHitHighlight(props)); } diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseSnippet.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseSnippet.ts index 6d6abec54..775fe4245 100644 --- a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitReverseSnippet.ts +++ b/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>( - props: ParseAlgoliaHitParams -): ParsedAttribute[] { +export function parseAlgoliaHitReverseSnippet< + THit extends SnippetedHit +>(props: ParseAlgoliaHitParams): ParsedAttribute[] { return reverseHighlightedParts(parseAlgoliaHitSnippet(props)); } diff --git a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts b/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts index 50b41b1ca..2aabf0d66 100644 --- a/packages/autocomplete-preset-algolia/src/highlight/parseAlgoliaHitSnippet.ts +++ b/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>({ +export function parseAlgoliaHitSnippet>({ hit, attribute, }: ParseAlgoliaHitParams): ParsedAttribute[] { diff --git a/packages/autocomplete-preset-algolia/src/index.ts b/packages/autocomplete-preset-algolia/src/index.ts index 9536091ac..2749a2af4 100644 --- a/packages/autocomplete-preset-algolia/src/index.ts +++ b/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';