algolia · dhayab · May 21, 2024 · Apr 4, 2024 · Apr 15, 2024 · Apr 15, 2024
diff --git a/.gitignore b/.gitignore
@@ -30,6 +30,7 @@ scripts/*/CHANGELOG.md
 # private files
 .env
 .idea/
+.vscode/
 
 # Caches
 .eslintcache

diff --git a/babel.config.js b/babel.config.js
@@ -79,6 +79,9 @@ module.exports = (api) => {
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',
+
+            // false positive (spread)
+            'Object.getOwnPropertyDescriptors',
           ];
           if (defaultShouldInject && !exclude.includes(name)) {
             throw new Error(

diff --git a/bundlesize.config.json b/bundlesize.config.json
@@ -2,35 +2,35 @@
   "files": [
     {
       "path": "packages/algoliasearch-helper/dist/algoliasearch.helper.js",
-      "maxSize": "40.25 kB"
+      "maxSize": "41.25 kB"
     },
     {
       "path": "packages/algoliasearch-helper/dist/algoliasearch.helper.min.js",
-      "maxSize": "12.75 kB"
+      "maxSize": "13.25 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "77.75 kB"
+      "maxSize": "81.5 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "171.25 kB"
+      "maxSize": "177.25 kB"
     },
     {
       "path": "packages/react-instantsearch-core/dist/umd/ReactInstantSearchCore.min.js",
-      "maxSize": "48.5 kB"
+      "maxSize": "50 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/ReactInstantSearch.min.js",
-      "maxSize": "59.5 kB"
+      "maxSize": "62.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "66.75 kB"
+      "maxSize": "67.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "67 kB"
+      "maxSize": "67.75 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",
@@ -54,11 +54,11 @@
     },
     {
       "path": "./packages/instantsearch.css/themes/reset-min.css",
-      "maxSize": "1 kB"
+      "maxSize": "1.25 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite.css",
-      "maxSize": "4.5 kB"
+      "maxSize": "4.60 kB"
     },
     {
       "path": "./packages/instantsearch.css/themes/satellite-min.css",

diff --git a/examples/js/getting-started/package.json b/examples/js/getting-started/package.json
@@ -3,8 +3,8 @@
   "version": "1.3.0",
   "private": true,
   "scripts": {
-    "start": "BABEL_ENV=parcel parcel index.html --port 3000",
-    "build": "BABEL_ENV=parcel parcel build index.html",
+    "start": "BABEL_ENV=parcel parcel index.html products.html --port 3000",
+    "build": "BABEL_ENV=parcel parcel build index.html products.html",
     "lint": "eslint .",
     "lint:fix": "npm run lint -- --fix"
   },

diff --git a/examples/js/getting-started/products.html b/examples/js/getting-started/products.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
+
+    <link rel="shortcut icon" href="./favicon.png" />
+
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+    <link rel="stylesheet" href="./src/index.css" />
+    <link rel="stylesheet" href="./src/app.css" />
+
+    <title>InstantSearch.js — Getting started</title>
+  </head>
+
+  <body>
+    <header class="header">
+      <h1 class="header-title">
+        <a href="/">Getting started</a>
+      </h1>
+      <p class="header-subtitle">
+        using
+        <a href="https://github.com/algolia/instantsearch">
+          InstantSearch.js
+        </a>
+      </p>
+    </header>
+
+    <div class="container">
+      <a href="/">← Back to search</a>
+      <div id="hits"></div>
+      <div id="related-products"></div>
+    </div>
+
+    <script type="module" src="./src/products.js"></script>
+  </body>
+</html>
diff --git a/examples/js/getting-started/src/app.css b/examples/js/getting-started/src/app.css
@@ -58,3 +58,43 @@
   margin: 2rem auto;
   text-align: center;
 }
+
+#related-products,
+.ais-Hits--single {
+  margin-top: 1rem;
+}
+
+.ais-Hits--single article {
+  display: flex;
+  gap: 1rem;
+}
+
+.ais-Hits--single img {
+  width: 150px;
+  height: 150px;
+  object-fit: contain;
+  flex-shrink: 0;
+}
+
+.ais-RelatedProducts-list {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 1rem;
+}
+
+.ais-RelatedProducts-item {
+  align-items: start;
+}
+
+.ais-RelatedProducts-item img {
+  width: 100%;
+  height: 100px;
+  object-fit: contain;
+}
+
+.ais-RelatedProducts-item article {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+}
diff --git a/examples/js/getting-started/src/app.js b/examples/js/getting-started/src/app.js
@@ -29,8 +29,13 @@ search.addWidgets([
     templates: {
       item: (hit, { html, components }) => html`
         <article>
-          <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
+          <h1>
+            <a href="/products.html?pid=${hit.objectID}"
+              >${components.Highlight({ hit, attribute: 'name' })}</a
+            >
+          </h1>
           <p>${components.Highlight({ hit, attribute: 'description' })}</p>
+          <a href="/products.html?pid=${hit.objectID}">See product</a>
         </article>
       `,
     },

diff --git a/examples/js/getting-started/src/products.js b/examples/js/getting-started/src/products.js
@@ -0,0 +1,58 @@
+import algoliasearch from 'algoliasearch/lite';
+import instantsearch from 'instantsearch.js';
+import { configure, hits, relatedProducts } from 'instantsearch.js/es/widgets';
+
+const searchParams = new URLSearchParams(document.location.search);
+
+const pid = searchParams.get('pid');
+
+const searchClient = algoliasearch(
+  'latency',
+  '6be0576ff61c053d5f9a3225e2a90f76'
+);
+
+const search = instantsearch({
+  indexName: 'instant_search',
+  searchClient,
+  insights: true,
+});
+
+search.addWidgets([
+  hits({
+    container: '#hits',
+    templates: {
+      item: (hit, { html, components }) => html`
+        <article>
+          <img src="${hit.image}" />
+          <div>
+            <h1>${components.Highlight({ hit, attribute: 'name' })}</h1>
+            <p>${components.Highlight({ hit, attribute: 'description' })}</p>
+          </div>
+        </article>
+      `,
+    },
+    cssClasses: { root: 'ais-Hits--single' },
+  }),
+  relatedProducts({
+    container: '#related-products',
+    objectIDs: [pid],
+    maxRecommendations: 4,
+    templates: {
+      item: (hit, { html }) => html`
+        <article>
+          <div>
+            <img src="${hit.image}" />
+            <h2>${hit.name}</h2>
+          </div>
+          <a href="/products.html?pid=${hit.objectID}">See product</a>
+        </article>
+      `,
+    },
+  }),
+  configure({
+    hitsPerPage: 1,
+    filters: `objectID:${pid}`,
+  }),
+]);
+
+search.start();
diff --git a/packages/algoliasearch-helper/index.d.ts b/packages/algoliasearch-helper/index.d.ts
@@ -16,6 +16,7 @@ import type {
   RelatedProductsQuery as RecommendRelatedProductsQuery,
   TrendingFacetsQuery as RecommendTrendingFacetsQuery,
   TrendingItemsQuery as RecommendTrendingItemsQuery,
+  RecommendQueriesResponse,
 } from '@algolia/recommend';
 
 /**
@@ -42,7 +43,7 @@ declare namespace algoliasearchHelper {
     state: SearchParameters;
     recommendState: RecommendParameters;
     lastResults: SearchResults | null;
-    lastRecommendResults: unknown | null; // TODO: Define type in dedicated PR
+    lastRecommendResults: RecommendResults | null;
     derivedHelpers: DerivedHelper[];
 
     on(
@@ -309,11 +310,11 @@ declare namespace algoliasearchHelper {
      */
     removeExclude(facet: string, value: string): this;
     removeTag(value: string): this;
-    removeFrequentlyBoughtTogether(id: string): this;
-    removeRelatedProducts(id: string): this;
-    removeTrendingItems(id: string): this;
-    removeTrendingFacets(id: string): this;
-    removeLookingSimilar(id: string): this;
+    removeFrequentlyBoughtTogether(id: number): this;
+    removeRelatedProducts(id: number): this;
+    removeTrendingItems(id: number): this;
+    removeTrendingFacets(id: number): this;
+    removeLookingSimilar(id: number): this;
     toggleFacetExclusion(facet: string, value: string): this;
     /**
      * @deprecated since version 2.4.0, see {@link AlgoliaSearchHelper#toggleFacetExclusion}
@@ -402,15 +403,15 @@ declare namespace algoliasearchHelper {
       event: 'recommend:result',
       cb: (res: {
         recommend: {
-          results: unknown | null; // TODO: Define type in dedicated PR
+          results: RecommendResults | null;
           state: RecommendParameters;
         };
       }) => void
     ): this;
     on(event: 'error', cb: (res: { error: Error }) => void): this;
 
     lastResults: SearchResults | null;
-    lastRecommendResults: unknown | null; // TODO: Define type in dedicated PR
+    lastRecommendResults: RecommendResults | null;
     detach(): void;
     getModifiedState(): SearchParameters;
     getModifiedRecommendState(): RecommendParameters;
@@ -1568,7 +1569,7 @@ declare namespace algoliasearchHelper {
   export type RecommendParametersWithId<
     T extends PlainRecommendParameters = PlainRecommendParameters
   > = T & {
-    $$id: string;
+    $$id: number;
   };
 
   export type RecommendParametersOptions = {
@@ -1579,7 +1580,7 @@ declare namespace algoliasearchHelper {
     params: RecommendParametersWithId[];
     constructor(opts?: RecommendParametersOptions);
     addParams(params: RecommendParametersWithId): RecommendParameters;
-    removeParams(id: string): RecommendParameters;
+    removeParams(id: number): RecommendParameters;
     addFrequentlyBoughtTogether(
       params: RecommendParametersWithId<FrequentlyBoughtTogetherQuery>
     ): RecommendParameters;
@@ -1596,6 +1597,20 @@ declare namespace algoliasearchHelper {
       params: RecommendParametersWithId<LookingSimilarQuery>
     ): RecommendParameters;
   }
+
+  type RecommendResponse<TObject> =
+    RecommendQueriesResponse<TObject>['results'];
+
+  type RecommendResultItem<TObject = any> = RecommendResponse<TObject>[0];
+
+  export class RecommendResults<T = any> {
+    constructor(state: RecommendParameters, results: RecommendResponse<T>);
+
+    _state: RecommendParameters;
+    _rawResults: RecommendResponse<T>;
+
+    [index: number]: RecommendResultItem<T>;
+  }
 }
 
 export = algoliasearchHelper;
diff --git a/packages/algoliasearch-helper/src/RecommendParameters/index.js b/packages/algoliasearch-helper/src/RecommendParameters/index.js
@@ -23,15 +23,8 @@ RecommendParameters.prototype = {
 
   addParams: function (params) {
     var newParams = this.params.slice();
-    var existingParamsIndex = this.params.findIndex(function (currentParams) {
-      return currentParams.$$id === params.$$id;
-    });
 
-    if (existingParamsIndex !== -1) {
-      newParams.splice(existingParamsIndex, 1, params);
-    } else {
-      newParams.push(params);
-    }
+    newParams.push(params);
 
     return new RecommendParameters({ params: newParams });
   },
@@ -74,13 +67,17 @@ RecommendParameters.prototype = {
     );
   },
 
-  _buildQueries: function (indexName) {
-    return this.params.map(function (params) {
-      var query = Object.assign({}, params, { indexName: indexName });
-      delete query.$$id;
+  _buildQueries: function (indexName, cache) {
+    return this.params
+      .filter(function (params) {
+        return cache[params.$$id] === undefined;
+      })
+      .map(function (params) {
+        var query = Object.assign({}, params, { indexName: indexName });
+        delete query.$$id;
 
-      return query;
-    });
+        return query;
+      });
   },
 };