fix(helpers): deprecate highlight helpers

These are superseded by the components in html tagged templates

Author: Haroenv

packages/instantsearch.js/src/helpers/highlight.ts

@@ -15,12 +15,22 @@ export type HighlightOptions = {
 
 const suit = component('Highlight');
 
+/**
+ * @deprecated use html tagged templates and the Highlight component instead
+ */
 export default function highlight({
   attribute,
   highlightedTagName = 'mark',
   hit,
   cssClasses = {},
 }: HighlightOptions): string {
+  warning(
+    false,
+    `\`instantsearch.highlight\` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the \`Highlight\` component.
+
+For more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates`
+  );
+
   const highlightAttributeResult = getPropertyByPath(
     hit._highlightResult,
     attribute

packages/instantsearch.js/src/helpers/reverseHighlight.ts

@@ -22,12 +22,22 @@ export type ReverseHighlightOptions = {
 
 const suit = component('ReverseHighlight');
 
+/**
+ * @deprecated use html tagged templates and the ReverseHighlight component instead
+ */
 export default function reverseHighlight({
   attribute,
   highlightedTagName = 'mark',
   hit,
   cssClasses = {},
 }: ReverseHighlightOptions): string {
+  warning(
+    false,
+    `\`instantsearch.reverseHighlight\` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the \`ReverseHighlight\` component.
+
+For more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates`
+  );
+
   const highlightAttributeResult = getPropertyByPath(
     hit._highlightResult,
     attribute

packages/instantsearch.js/src/helpers/reverseSnippet.ts

@@ -22,12 +22,22 @@ export type ReverseSnippetOptions = {
 
 const suit = component('ReverseSnippet');
 
+/**
+ * @deprecated use html tagged templates and the ReverseSnippet component instead
+ */
 export default function reverseSnippet({
   attribute,
   highlightedTagName = 'mark',
   hit,
   cssClasses = {},
 }: ReverseSnippetOptions): string {
+  warning(
+    false,
+    `\`instantsearch.reverseSnippet\` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the \`ReverseSnippet\` component.
+
+For more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates`
+  );
+
   const snippetAttributeResult = getPropertyByPath(
     hit._snippetResult,
     attribute

packages/instantsearch.js/src/helpers/snippet.ts

@@ -15,12 +15,22 @@ export type SnippetOptions = {
 
 const suit = component('Snippet');
 
+/**
+ * @deprecated use html tagged templates and the Snippet component instead
+ */
 export default function snippet({
   attribute,
   highlightedTagName = 'mark',
   hit,
   cssClasses = {},
 }: SnippetOptions): string {
+  warning(
+    false,
+    `\`instantsearch.snippet\` function has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the \`Snippet\` component.
+
+For more information, visit https://www.algolia.com/doc/guides/building-search-ui/upgrade-guides/js/?client=html+tagged+templates#upgrade-templates`
+  );
+
   const snippetAttributeResult = getPropertyByPath(
     hit._snippetResult,
     attribute

packages/instantsearch.js/src/index.ts

@@ -25,9 +25,14 @@ type InstantSearchModule = {
   stateMappings: typeof stateMappings;
 
   createInfiniteHitsSessionStorageCache: typeof createInfiniteHitsSessionStorageCache;
+
+  /** @deprecated use html tagged templates and the Highlight component instead */
   highlight: typeof helpers.highlight;
+  /** @deprecated use html tagged templates and the ReverseHighlight component instead */
   reverseHighlight: typeof helpers.reverseHighlight;
+  /** @deprecated use html tagged templates and the Snippet component instead */
   snippet: typeof helpers.snippet;
+  /** @deprecated use html tagged templates and the ReverseSnippet component instead */
   reverseSnippet: typeof helpers.reverseSnippet;
 
   /**