feat(recommend): support escapeHTML in recommend widgets (#6199)

algolia · May 21, 2024 · 720e700 · 720e700
1 parent d24870b
commit 720e700
Show file tree

Hide file tree

Showing 21 changed files with 339 additions and 13 deletions.
diff --git a/...c/connectors/frequently-bought-together/__tests__/connectFrequentlyBoughtTogether-test.ts b/...c/connectors/frequently-bought-together/__tests__/connectFrequentlyBoughtTogether-test.ts
@@ -86,6 +86,7 @@ describe('connectFrequentlyBoughtTogether', () => {
         maxRecommendations: 10,
         threshold: 95,
         queryParameters: { userToken: 'token' },
+        escapeHTML: false,
       });
 
       // @ts-expect-error

diff --git a/...antsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts b/...antsearch.js/src/connectors/frequently-bought-together/connectFrequentlyBoughtTogether.ts
@@ -2,6 +2,8 @@ import {
   createDocumentationMessageGenerator,
   checkRendering,
   noop,
+  escapeHits,
+  TAG_PLACEHOLDER,
 } from '../../lib/utils';
 
 import type { Connector, TransformItems, Hit, BaseHit } from '../../types';
@@ -50,6 +52,13 @@ export type FrequentlyBoughtTogetherConnectorParams<
     'page' | 'hitsPerPage' | 'offset' | 'length'
   >;
 
+  /**
+   * Whether to escape HTML tags from items string values.
+   *
+   * @default true
+   */
+  escapeHTML?: boolean;
+
   /**
    * Function to transform the items passed to the templates.
    */
@@ -75,6 +84,8 @@ const connectFrequentlyBoughtTogether: FrequentlyBoughtTogetherConnector =
 
     return (widgetParams) => {
       const {
+        // @MAJOR: this can default to false
+        escapeHTML = true,
         transformItems = ((items) => items) as NonNullable<
           FrequentlyBoughtTogetherConnectorParams['transformItems']
         >,
@@ -123,6 +134,10 @@ const connectFrequentlyBoughtTogether: FrequentlyBoughtTogetherConnector =
             return { items: [], widgetParams };
           }
 
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+
           const transformedItems = transformItems(results.hits, {
             results: results as RecommendResultItem,
           });
@@ -142,7 +157,10 @@ const connectFrequentlyBoughtTogether: FrequentlyBoughtTogetherConnector =
                 objectID,
                 threshold,
                 maxRecommendations,
-                queryParameters,
+                queryParameters: {
+                  ...queryParameters,
+                  ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+                },
                 $$id: this.$$id!,
               }),
             state

diff --git a/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts b/packages/instantsearch.js/src/connectors/looking-similar/connectLookingSimilar.ts
@@ -2,6 +2,8 @@ import {
   createDocumentationMessageGenerator,
   checkRendering,
   noop,
+  escapeHits,
+  TAG_PLACEHOLDER,
 } from '../../lib/utils';
 
 import type { Connector, TransformItems, Hit, BaseHit } from '../../types';
@@ -49,6 +51,12 @@ export type LookingSimilarConnectorParams<THit extends BaseHit = BaseHit> = {
     PlainSearchParameters,
     'page' | 'hitsPerPage' | 'offset' | 'length'
   >;
+  /**
+   * Whether to escape HTML tags from items string values.
+   *
+   * @default true
+   */
+  escapeHTML?: boolean;
   /**
    * Function to transform the items passed to the templates.
    */
@@ -71,6 +79,8 @@ const connectLookingSimilar: LookingSimilarConnector =
 
     return function LookingSimilar(widgetParams) {
       const {
+        // @MAJOR: this can default to false
+        escapeHTML = true,
         objectIDs,
         maxRecommendations,
         threshold,
@@ -120,6 +130,10 @@ const connectLookingSimilar: LookingSimilarConnector =
             return { items: [], widgetParams };
           }
 
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+
           return {
             items: transformItems(results.hits, {
               results: results as RecommendResultItem,
@@ -140,8 +154,14 @@ const connectLookingSimilar: LookingSimilarConnector =
                 objectID,
                 maxRecommendations,
                 threshold,
-                fallbackParameters,
-                queryParameters,
+                fallbackParameters: {
+                  ...fallbackParameters,
+                  ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+                },
+                queryParameters: {
+                  ...queryParameters,
+                  ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+                },
                 $$id: this.$$id!,
               }),
             state

diff --git a/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts b/packages/instantsearch.js/src/connectors/related-products/connectRelatedProducts.ts
@@ -2,6 +2,8 @@ import {
   createDocumentationMessageGenerator,
   checkRendering,
   noop,
+  escapeHits,
+  TAG_PLACEHOLDER,
 } from '../../lib/utils';
 
 import type { Connector, TransformItems, Hit, BaseHit } from '../../types';
@@ -49,6 +51,12 @@ export type RelatedProductsConnectorParams<THit extends BaseHit = BaseHit> = {
     PlainSearchParameters,
     'page' | 'hitsPerPage' | 'offset' | 'length'
   >;
+  /**
+   * Whether to escape HTML tags from items string values.
+   *
+   * @default true
+   */
+  escapeHTML?: boolean;
   /**
    * Function to transform the items passed to the templates.
    */
@@ -72,6 +80,8 @@ const connectRelatedProducts: RelatedProductsConnector =
 
     return function relatedProducts(widgetParams) {
       const {
+        // @MAJOR: this can default to false
+        escapeHTML = true,
         objectIDs,
         maxRecommendations,
         threshold,
@@ -121,6 +131,10 @@ const connectRelatedProducts: RelatedProductsConnector =
             return { items: [], widgetParams };
           }
 
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+
           return {
             items: transformItems(results.hits, {
               results: results as RecommendResultItem,
@@ -141,8 +155,14 @@ const connectRelatedProducts: RelatedProductsConnector =
                 objectID,
                 maxRecommendations,
                 threshold,
-                fallbackParameters,
-                queryParameters,
+                fallbackParameters: {
+                  ...fallbackParameters,
+                  ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+                },
+                queryParameters: {
+                  ...queryParameters,
+                  ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+                },
                 $$id: this.$$id!,
               }),
             state

diff --git a/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts b/packages/instantsearch.js/src/connectors/trending-items/connectTrendingItems.ts
@@ -2,6 +2,8 @@ import {
   createDocumentationMessageGenerator,
   checkRendering,
   noop,
+  escapeHits,
+  TAG_PLACEHOLDER,
 } from '../../lib/utils';
 
 import type { Connector, TransformItems, Hit, BaseHit } from '../../types';
@@ -57,6 +59,12 @@ export type TrendingItemsConnectorParams<THit extends BaseHit = BaseHit> = (
     PlainSearchParameters,
     'page' | 'hitsPerPage' | 'offset' | 'length'
   >;
+  /**
+   * Whether to escape HTML tags from items string values.
+   *
+   * @default true
+   */
+  escapeHTML?: boolean;
   /**
    * Function to transform the items passed to the templates.
    */
@@ -85,6 +93,8 @@ const connectTrendingItems: TrendingItemsConnector =
         threshold,
         fallbackParameters,
         queryParameters,
+        // @MAJOR: this can default to false
+        escapeHTML = true,
         transformItems = ((items) => items) as NonNullable<
           TrendingItemsConnectorParams['transformItems']
         >,
@@ -125,6 +135,10 @@ const connectTrendingItems: TrendingItemsConnector =
             return { items: [], widgetParams };
           }
 
+          if (escapeHTML && results.hits.length > 0) {
+            results.hits = escapeHits(results.hits);
+          }
+
           return {
             items: transformItems(results.hits, {
               results: results as RecommendResultItem,
@@ -144,8 +158,14 @@ const connectTrendingItems: TrendingItemsConnector =
             facetValue,
             maxRecommendations,
             threshold,
-            fallbackParameters,
-            queryParameters,
+            fallbackParameters: {
+              ...fallbackParameters,
+              ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+            },
+            queryParameters: {
+              ...queryParameters,
+              ...(escapeHTML ? TAG_PLACEHOLDER : {}),
+            },
             $$id: this.$$id!,
           });
         },

diff --git a/...es/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx b/...es/instantsearch.js/src/widgets/frequently-bought-together/frequently-bought-together.tsx
@@ -177,6 +177,7 @@ const frequentlyBoughtTogether: FrequentlyBoughtTogetherWidget =
       maxRecommendations,
       queryParameters,
       threshold,
+      escapeHTML,
       transformItems,
       templates = {},
       cssClasses = {},
@@ -205,6 +206,7 @@ const frequentlyBoughtTogether: FrequentlyBoughtTogetherWidget =
         maxRecommendations,
         queryParameters,
         threshold,
+        escapeHTML,
         transformItems,
       }),
       $$widgetType: 'ais.frequentlyBoughtTogether',

diff --git a/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx b/packages/instantsearch.js/src/widgets/looking-similar/looking-similar.tsx
@@ -175,6 +175,7 @@ const lookingSimilar: LookingSimilarWidget = function lookingSimilar(
     queryParameters,
     fallbackParameters,
     threshold,
+    escapeHTML,
     transformItems,
     templates = {},
     cssClasses = {},
@@ -203,6 +204,7 @@ const lookingSimilar: LookingSimilarWidget = function lookingSimilar(
       queryParameters,
       fallbackParameters,
       threshold,
+      escapeHTML,
       transformItems,
     }),
     $$widgetType: 'ais.lookingSimilar',

diff --git a/packages/instantsearch.js/src/widgets/related-products/related-products.tsx b/packages/instantsearch.js/src/widgets/related-products/related-products.tsx
@@ -186,6 +186,7 @@ const relatedProducts: RelatedProductsWidget = function relatedProducts(
     queryParameters,
     fallbackParameters,
     threshold,
+    escapeHTML,
     transformItems,
     templates = {},
     cssClasses = {},
@@ -215,6 +216,7 @@ const relatedProducts: RelatedProductsWidget = function relatedProducts(
       queryParameters,
       fallbackParameters,
       threshold,
+      escapeHTML,
       transformItems,
     }),
     $$widgetType: 'ais.relatedProducts',

diff --git a/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx b/packages/instantsearch.js/src/widgets/trending-items/trending-items.tsx
@@ -185,6 +185,7 @@ const trendingItems: TrendingItemsWidget = function trendingItems(
     queryParameters,
     fallbackParameters,
     threshold,
+    escapeHTML,
     transformItems,
     templates = {},
     cssClasses = {},
@@ -217,6 +218,7 @@ const trendingItems: TrendingItemsWidget = function trendingItems(
       queryParameters,
       fallbackParameters,
       threshold,
+      escapeHTML,
       transformItems,
     }),
     $$widgetType: 'ais.trendingItems',

diff --git a/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx b/packages/react-instantsearch/src/widgets/FrequentlyBoughtTogether.tsx
@@ -43,6 +43,7 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
   maxRecommendations,
   threshold,
   queryParameters,
+  escapeHTML,
   transformItems,
   itemComponent,
   headerComponent,
@@ -56,6 +57,7 @@ export function FrequentlyBoughtTogether<THit extends BaseHit = BaseHit>({
       maxRecommendations,
       threshold,
       queryParameters,
+      escapeHTML,
       transformItems,
     },
     { $$widgetType: 'ais.frequentlyBoughtTogether' }

diff --git a/packages/react-instantsearch/src/widgets/LookingSimilar.tsx b/packages/react-instantsearch/src/widgets/LookingSimilar.tsx
@@ -40,6 +40,7 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
   threshold,
   queryParameters,
   fallbackParameters,
+  escapeHTML,
   transformItems,
   itemComponent,
   headerComponent,
@@ -54,6 +55,7 @@ export function LookingSimilar<THit extends BaseHit = BaseHit>({
       threshold,
       queryParameters,
       fallbackParameters,
+      escapeHTML,
       transformItems,
     },
     { $$widgetType: 'ais.lookingSimilar' }

diff --git a/packages/react-instantsearch/src/widgets/RelatedProducts.tsx b/packages/react-instantsearch/src/widgets/RelatedProducts.tsx
@@ -40,6 +40,7 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
   threshold,
   fallbackParameters,
   queryParameters,
+  escapeHTML,
   transformItems,
   itemComponent,
   headerComponent,
@@ -54,6 +55,7 @@ export function RelatedProducts<TItem extends BaseHit = BaseHit>({
       threshold,
       fallbackParameters,
       queryParameters,
+      escapeHTML,
       transformItems,
     },
     { $$widgetType: 'ais.relatedProducts' }

diff --git a/packages/react-instantsearch/src/widgets/TrendingItems.tsx b/packages/react-instantsearch/src/widgets/TrendingItems.tsx
@@ -41,6 +41,7 @@ export function TrendingItems<TItem extends BaseHit = BaseHit>({
   threshold,
   fallbackParameters,
   queryParameters,
+  escapeHTML,
   transformItems,
   itemComponent,
   headerComponent,
@@ -58,6 +59,7 @@ export function TrendingItems<TItem extends BaseHit = BaseHit>({
       threshold,
       fallbackParameters,
       queryParameters,
+      escapeHTML,
       transformItems,
     },
     { $$widgetType: 'ais.trendingItems' }

diff --git a/tests/common/connectors/frequently-bought-together/options.ts b/tests/common/connectors/frequently-bought-together/options.ts
@@ -47,6 +47,7 @@ export function createOptionsTests(
           maxRecommendations: 2,
           threshold: 3,
           queryParameters: { analytics: true },
+          escapeHTML: false,
         },
       };
 

diff --git a/tests/common/connectors/looking-similar/options.ts b/tests/common/connectors/looking-similar/options.ts
@@ -46,6 +46,7 @@ export function createOptionsTests(
           threshold: 3,
           fallbackParameters: { facetFilters: ['test1'] },
           queryParameters: { analytics: true },
+          escapeHTML: false,
         },
       };
 

diff --git a/tests/common/connectors/related-products/options.ts b/tests/common/connectors/related-products/options.ts
@@ -46,6 +46,7 @@ export function createOptionsTests(
           threshold: 3,
           fallbackParameters: { facetFilters: ['test1'] },
           queryParameters: { analytics: true },
+          escapeHTML: false,
         },
       };
 

diff --git a/tests/common/connectors/trending-items/options.ts b/tests/common/connectors/trending-items/options.ts
@@ -27,6 +27,7 @@ export function createOptionsTests(
           threshold: 3,
           fallbackParameters: { facetFilters: ['test1'] },
           queryParameters: { analytics: true },
+          escapeHTML: false,
         },
       };