poc: batch recommend requests and prevent rerender

.codesandbox/ci.json

@@ -1,5 +1,9 @@
 {
-  "sandboxes": ["/examples/js/multi-clients"],
+  "sandboxes": [
+    "/examples/js/multi-clients",
+    "/examples/react/multi-clients",
+    "/examples/react/next-routing"
+  ],
   "buildCommand": "build --no-private --ignore *-maps --ignore *-native",
   "packages": [
     "packages/instantsearch.js",

babel.config.js

@@ -79,6 +79,12 @@ module.exports = (api) => {
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',
+
+            // Just for the PoC
+            'Array.prototype.flatMap',
+            'Object.entries',
+            'Object.fromEntries',
+            'Array.from',
           ];
           if (defaultShouldInject && !exclude.includes(name)) {
             throw new Error(

examples/js/multi-clients/index.html

@@ -33,6 +33,9 @@ <h1 class="header-title">
       </p>
     </header>
 
+    <div id="fbt"></div>
+    <div id="fbt2"></div>
+
     <div class="container">
       <div class="search-panel">
         <div class="search-panel__filters">

examples/js/multi-clients/src/app.js

@@ -5,10 +5,11 @@ import {
   panel,
   refinementList,
   searchBox,
+  frequentlyBoughtTogether,
 } from 'instantsearch.js/es/widgets';
 
 import { search } from './search';
-import { hitItem } from './templates';
+import { hitItem, recommendItem } from './templates';
 
 search.addWidgets([
   configure({
@@ -33,6 +34,60 @@ search.addWidgets([
   pagination({
     container: '#pagination',
   }),
+  frequentlyBoughtTogether({
+    container: '#fbt',
+    objectIDs: ['M0E20000000EAAK'],
+    cssClasses: { list: 'grid gap-2 grid-cols-3 lg:grid-cols-6' },
+    templates: {
+      item: ({ item, html, sendEvent }) => {
+        return recommendItem({
+          item,
+          html,
+          onAddToCart() {
+            sendEvent('conversion', item, 'Added To Cart', {
+              eventSubtype: 'addToCart',
+              objectData: [
+                {
+                  discount: 0,
+                  price: item.price.value,
+                  quantity: 1,
+                },
+              ],
+              value: item.price.value,
+              currency: item.price.currency,
+            });
+          },
+        });
+      },
+    },
+  }),
+  frequentlyBoughtTogether({
+    container: '#fbt2',
+    objectIDs: ['M0E20000000E1HU'],
+    cssClasses: { list: 'grid gap-2 grid-cols-3 lg:grid-cols-6' },
+    templates: {
+      item: ({ item, html, sendEvent }) => {
+        return recommendItem({
+          item,
+          html,
+          onAddToCart() {
+            sendEvent('conversion', item, 'Added To Cart', {
+              eventSubtype: 'addToCart',
+              objectData: [
+                {
+                  discount: 0,
+                  price: item.price.value,
+                  quantity: 1,
+                },
+              ],
+              value: item.price.value,
+              currency: item.price.currency,
+            });
+          },
+        });
+      },
+    },
+  }),
 ]);
 
 search.start();

examples/js/multi-clients/src/search.js

@@ -1,5 +1,7 @@
 import instantsearch from 'instantsearch.js';
-import { algolia } from '@algolia/client';
+
+// In real life this would come from an @algolia/client package
+import { algolia } from './algolia';
 
 const client = algolia('XX85YRZZMV', '098f71f9e2267178bdfc08cc986d2999');
 

examples/react/multi-clients/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true

examples/react/multi-clients/.gitignore

@@ -0,0 +1,23 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+.parcel-cache
+*.local
+
+# Editor directories and files
+.vscode
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

examples/react/multi-clients/README.md

@@ -0,0 +1,23 @@
+# react-instantsearch-app
+
+[![Edit getting-started](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/algolia/instantsearch/tree/master/examples/react/getting-started)
+
+_This project was generated with [create-instantsearch-app](https://github.com/algolia/instantsearch/tree/master/packages/create-instantsearch-app) by [Algolia](https://algolia.com)._
+
+## Get started
+
+To run this project locally, install the dependencies and run the local server:
+
+```sh
+npm install
+npm start
+```
+
+Alternatively, you may use [Yarn](https://http://yarnpkg.com/):
+
+```sh
+yarn
+yarn start
+```
+
+Open http://localhost:3000 to see your app.

examples/react/multi-clients/index.html

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+
+    <link rel="shortcut icon" href="favicon.png" />
+
+    <!--
+    Do not use @7 in production, use a complete version like x.x.x, see website for latest version:
+    https://www.algolia.com/doc/guides/building-search-ui/installation/react/#load-the-styles
+    -->
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/instantsearch.css@7/themes/satellite-min.css"
+    />
+
+    <title>React InstantSearch — Getting started</title>
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+
+    <div id="root"></div>
+
+    <script type="module">
+      import './src/env.js';
+      import './src/index.tsx';
+    </script>
+  </body>
+</html>

examples/react/multi-clients/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "example-react-instantsearch-multi-clients",
+  "version": "6.46.0",
+  "private": true,
+  "scripts": {
+    "build": "BABEL_ENV=parcel parcel build index.html",
+    "start": "BABEL_ENV=parcel parcel index.html --port 3000"
+  },
+  "dependencies": {
+    "@algolia/recommend": "4.20.0",
+    "algoliasearch": "4.14.3",
+    "instantsearch.js": "4.60.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-instantsearch": "7.3.0"
+  },
+  "devDependencies": {
+    "@parcel/core": "2.10.0",
+    "@parcel/packager-raw-url": "2.10.0",
+    "@parcel/transformer-webmanifest": "2.10.0",
+    "parcel": "2.10.0",
+    "typescript": "5.1.3"
+  }
+}

examples/react/multi-clients/src/App.css

@@ -0,0 +1,71 @@
+body,
+h1 {
+  margin: 0;
+  padding: 0;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
+    Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
+}
+
+em {
+  background: cyan;
+  font-style: normal;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+  padding: 0.5rem 1rem;
+  background-image: linear-gradient(to right, #8e43e7, #00aeff);
+  color: #fff;
+  margin-bottom: 1rem;
+}
+
+.header a {
+  color: #fff;
+  text-decoration: none;
+}
+
+.header-title {
+  font-size: 1.2rem;
+  font-weight: normal;
+}
+
+.header-title::after {
+  content: ' ▸ ';
+  padding: 0 0.5rem;
+}
+
+.header-subtitle {
+  font-size: 1.2rem;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 1rem;
+}
+
+.search-panel {
+  display: flex;
+}
+
+.search-panel__filters {
+  flex: 1;
+}
+
+.search-panel__results {
+  flex: 3;
+}
+
+.searchbox {
+  margin-bottom: 2rem;
+}
+
+.pagination {
+  margin: 2rem auto;
+  text-align: center;
+}