chore(major): leave major comments on how to improve highlighting (#5648

) A problem we currently have (see #5237) is that escapeHTML is one of the slower parts of InstantSearch. With `html``/jsx rendering without dangerousInnerHtml, we no longer need to escape by default, but for that to work, escaping and not escaping should both leave the "placeholders" in the final output. Current workaround for the performance impact: pass `escapeHTML={false}` to every Hits/infiniteHits etc. and `<Configure highlightPreTag={TAG_REPLACEMENT.highlightPreTag} highlightPostTag={TAG_REPLACEMENT.highlightPostTag} />`
algolia · May 25, 2023 · 14f1235 · 14f1235
1 parent 4bcc426
commit 14f1235
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 1 deletion.
diff --git a/packages/instantsearch.js/src/connectors/answers/connectAnswers.ts b/packages/instantsearch.js/src/connectors/answers/connectAnswers.ts
@@ -118,6 +118,7 @@ const connectAnswers: AnswersConnector = function connectAnswers(
       nbHits = 1,
       renderDebounceTime = 100,
       searchDebounceTime = 100,
+      // @MAJOR: this can default to false
       escapeHTML = true,
       extraParameters = {},
     } = widgetParams || {};

diff --git a/packages/instantsearch.js/src/connectors/autocomplete/connectAutocomplete.ts b/packages/instantsearch.js/src/connectors/autocomplete/connectAutocomplete.ts
@@ -87,7 +87,10 @@ const connectAutocomplete: AutocompleteConnector = function connectAutocomplete(
   checkRendering(renderFn, withUsage());
 
   return (widgetParams) => {
-    const { escapeHTML = true } = widgetParams || {};
+    const {
+      // @MAJOR: this can default to false
+      escapeHTML = true,
+    } = widgetParams || {};
 
     warning(
       !(widgetParams as any).indices,

diff --git a/packages/instantsearch.js/src/connectors/hits/connectHits.ts b/packages/instantsearch.js/src/connectors/hits/connectHits.ts
@@ -82,6 +82,7 @@ const connectHits: HitsConnector = function connectHits(
 
   return (widgetParams) => {
     const {
+      // @MAJOR: this can default to false
       escapeHTML = true,
       transformItems = ((items) => items) as NonNullable<
         HitsConnectorParams['transformItems']

diff --git a/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts b/packages/instantsearch.js/src/connectors/infinite-hits/connectInfiniteHits.ts
@@ -198,6 +198,7 @@ const connectInfiniteHits: InfiniteHitsConnector = function connectInfiniteHits(
 
   return (widgetParams) => {
     const {
+      // @MAJOR: this can default to false
       escapeHTML = true,
       transformItems = ((items) => items) as NonNullable<
         InfiniteHitsConnectorParams['transformItems']

diff --git a/packages/instantsearch.js/src/lib/utils/escape-highlight.ts b/packages/instantsearch.js/src/lib/utils/escape-highlight.ts
@@ -13,6 +13,7 @@ export const TAG_REPLACEMENT = {
   highlightPostTag: '</mark>',
 };
 
+// @MAJOR: in the future, this should only escape, not replace
 function replaceTagsAndEscape(value: string): string {
   return escape(value)
     .replace(

diff --git a/packages/instantsearch.js/src/lib/utils/getHighlightedParts.ts b/packages/instantsearch.js/src/lib/utils/getHighlightedParts.ts
@@ -1,6 +1,7 @@
 import { TAG_REPLACEMENT } from './escape-highlight';
 
 export function getHighlightedParts(highlightedValue: string) {
+  // @MAJOR: this should use TAG_PLACEHOLDER
   const { highlightPostTag, highlightPreTag } = TAG_REPLACEMENT;
 
   const splitByPreTag = highlightedValue.split(highlightPreTag);