feat(insights): add "insights" option for automatic events

bundlesize.config.json

@@ -2,11 +2,11 @@
   "files": [
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.production.min.js",
-      "maxSize": "74 kB"
+      "maxSize": "74.25 kB"
     },
     {
       "path": "./packages/instantsearch.js/dist/instantsearch.development.js",
-      "maxSize": "160 kB"
+      "maxSize": "165 kB"
     },
     {
       "path": "packages/react-instantsearch/dist/umd/Core.min.js",
@@ -26,11 +26,11 @@
     },
     {
       "path": "packages/react-instantsearch-hooks/dist/umd/ReactInstantSearchHooks.min.js",
-      "maxSize": "42.25 kB"
+      "maxSize": "44.50 kB"
     },
     {
       "path": "packages/react-instantsearch-hooks-web/dist/umd/ReactInstantSearchHooksDOM.min.js",
-      "maxSize": "51.50 kB"
+      "maxSize": "53.50 kB"
     },
     {
       "path": "packages/react-instantsearch-dom/dist/umd/ReactInstantSearchDOM.min.js",
@@ -42,11 +42,11 @@
     },
     {
       "path": "packages/vue-instantsearch/vue2/umd/index.js",
-      "maxSize": "60 kB"
+      "maxSize": "62 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue3/umd/index.js",
-      "maxSize": "60.25 kB"
+      "maxSize": "62.25 kB"
     },
     {
       "path": "packages/vue-instantsearch/vue2/cjs/index.js",

examples/js/calendar-widget/app.js

@@ -10,6 +10,7 @@ const search = instantsearch({
   indexName: 'concert_events_instantsearchjs',
   searchClient: algoliasearch('latency', '059c79ddd276568e990286944276464a'),
   routing: true,
+  insights: true,
 });
 
 search.addWidgets([

examples/js/e-commerce/src/search.ts

@@ -29,6 +29,7 @@ const search = instantsearch({
   searchClient,
   indexName: 'instant_search',
   routing: getRouting({ indexName: 'instant_search' }),
+  insights: true,
 });
 
 search.addWidgets([

examples/js/getting-started/src/app.js

@@ -17,6 +17,7 @@ const searchClient = algoliasearch(
 const search = instantsearch({
   indexName: 'instant_search',
   searchClient,
+  insights: true,
 });
 
 search.addWidgets([

examples/js/media/src/search.ts

@@ -26,6 +26,7 @@ const search = instantsearch({
   routing: {
     stateMapping: singleIndex('PROD_algolia_blog'),
   },
+  insights: true,
 });
 
 const datesDesktop = createDates({

examples/js/tourism/search.js

@@ -15,6 +15,7 @@ const search = instantsearch({
   searchClient: algoliasearch('latency', '6be0576ff61c053d5f9a3225e2a90f76'),
   indexName: 'airbnb',
   routing: true,
+  insights: true,
 });
 
 search.addWidgets([

examples/react-hooks/default-theme/src/App.tsx

@@ -60,6 +60,7 @@ export function App() {
       searchClient={searchClient}
       indexName="instant_search"
       routing={true}
+      insights={true}
     >
       <Configure ruleContexts={[]} />
 

examples/react-hooks/default-theme/src/components/Refresh.tsx

@@ -4,6 +4,7 @@ import './Refresh.css';
 
 export function Refresh() {
   const { refresh } = useInstantSearch();
+
   return (
     <button
       className="Refresh"

examples/react-hooks/e-commerce/App.tsx

@@ -84,6 +84,7 @@ export function App() {
       searchClient={searchClient}
       indexName={indexName}
       routing={routing}
+      insights={true}
     >
       <header className="header" ref={headerRef}>
         <p className="header-logo">

examples/react-hooks/getting-started/src/App.tsx

@@ -36,7 +36,11 @@ export function App() {
       </header>
 
       <div className="container">
-        <InstantSearch searchClient={searchClient} indexName="instant_search">
+        <InstantSearch
+          searchClient={searchClient}
+          indexName="instant_search"
+          insights={true}
+        >
           <Configure hitsPerPage={8} />
           <div className="search-panel">
             <div className="search-panel__filters">

examples/react-hooks/next-routing/pages/index.tsx

@@ -68,6 +68,7 @@ export default function HomePage({ serverState, url }: HomePageProps) {
             serverUrl: url,
           }),
         }}
+        insights={true}
       >
         <div className="Container">
           <div>

examples/react-hooks/next/pages/index.tsx

@@ -58,6 +58,7 @@ export default function HomePage({ serverState, url }: HomePageProps) {
             singletonRouter,
           }),
         }}
+        insights={true}
       >
         <div className="Container">
           <div>

examples/react-hooks/ssr/src/App.js

@@ -42,6 +42,7 @@ function App({ serverState, location }) {
             },
           }),
         }}
+        insights={true}
       >
         <Configure hitsPerPage={10} />
 

examples/vue/default-theme/src/App.vue

@@ -4,6 +4,7 @@
       :search-client="searchClient"
       index-name="instant_search"
       :routing="routing"
+      :insights="true"
     >
       <ais-configure :hits-per-page.camel="16" />
 

examples/vue/e-commerce/src/App.vue

@@ -4,6 +4,7 @@
       :search-client="searchClient"
       index-name="instant_search"
       :routing="routing"
+      :insights="true"
     >
       <ais-configure
         :attributes-to-snippet.camel="['description:10']"

examples/vue/getting-started/src/App.vue

@@ -18,6 +18,7 @@
       <ais-instant-search
         :search-client="searchClient"
         index-name="instant_search"
+        :insights="true"
       >
         <ais-configure :hits-per-page.camel="8" />
         <div class="search-panel">

examples/vue/media/src/App.vue

@@ -3,6 +3,7 @@
     :search-client="searchClient"
     index-name="movies"
     :routing="routing"
+    :insights="true"
   >
     <header class="navbar">
       <img

examples/vue/nuxt/pages/search.vue

@@ -67,6 +67,7 @@ export default {
     createServerRootMixin({
       searchClient,
       indexName: 'instant_search',
+      insights: true,
       initialUiState: {
         // eslint-disable-next-line camelcase
         instant_search: {

examples/vue/ssr/src/main.js

@@ -39,6 +39,7 @@ export async function createApp({
       createServerRootMixin({
         searchClient,
         indexName: 'instant_search',
+        insights: true,
         routing: {
           router: {
             read() {

packages/instantsearch.js/package.json

@@ -38,7 +38,7 @@
     "htm": "^3.0.0",
     "preact": "^10.10.0",
     "qs": "^6.5.1 < 6.10",
-    "search-insights": "^2.1.0"
+    "search-insights": "^2.6.0"
   },
   "peerDependencies": {
     "algoliasearch": ">= 3.1 < 6"

packages/instantsearch.js/src/__tests__/common.test.tsx

@@ -8,6 +8,7 @@ import {
   createPaginationTests,
   createMenuTests,
   createInfiniteHitsTests,
+  createHitsTests,
 } from '@instantsearch/tests';
 
 import instantsearch from '../index.es';
@@ -19,6 +20,8 @@ import {
   pagination,
   infiniteHits,
   searchBox,
+  hits,
+  index,
 } from '../widgets';
 
 createHierarchicalMenuTests(({ instantSearchOptions, widgetParams }) => {
@@ -120,9 +123,117 @@ createInfiniteHitsTests(({ instantSearchOptions, widgetParams }) => {
         container: document.body.appendChild(document.createElement('div')),
       }),
       infiniteHits({
+        container: document.body.appendChild(
+          Object.assign(document.createElement('div'), {
+            id: 'main-hits',
+          })
+        ),
+        templates: {
+          item: (hit, { html, sendEvent }) =>
+            html`<div data-testid=${`main-hits-top-level-${hit.__position}`}>
+              ${hit.objectID}
+              <button
+                data-testid=${`main-hits-convert-${hit.__position}`}
+                onClick=${() => sendEvent('conversion', hit, 'Converted')}
+              >
+                convert
+              </button>
+              <button
+                data-testid=${`main-hits-click-${hit.__position}`}
+                onClick=${() => sendEvent('click', hit, 'Clicked')}
+              >
+                click
+              </button>
+            </div>`,
+        },
+        ...widgetParams,
+      }),
+      index({ indexName: 'nested' }).addWidgets([
+        infiniteHits({
+          container: document.body.appendChild(
+            Object.assign(document.createElement('div'), {
+              id: 'nested-hits',
+            })
+          ),
+          templates: {
+            item: (hit, { html, sendEvent }) =>
+              html`<div
+                data-testid=${`nested-hits-top-level-${hit.__position}`}
+              >
+                ${hit.objectID}
+                <button
+                  data-testid=${`nested-hits-click-${hit.__position}`}
+                  onClick=${() => sendEvent('click', hit, 'Clicked nested')}
+                >
+                  click
+                </button>
+              </div>`,
+          },
+        }),
+      ]),
+    ])
+    .on('error', () => {
+      /*
+       * prevent rethrowing InstantSearch errors, so tests can be asserted.
+       * IRL this isn't needed, as the error doesn't stop execution.
+       */
+    })
+    .start();
+});
+
+createHitsTests(({ instantSearchOptions, widgetParams }) => {
+  instantsearch(instantSearchOptions)
+    .addWidgets([
+      searchBox({
         container: document.body.appendChild(document.createElement('div')),
+      }),
+      hits({
+        container: document.body.appendChild(
+          Object.assign(document.createElement('div'), {
+            id: 'main-hits',
+          })
+        ),
+        templates: {
+          item: (hit, { html, sendEvent }) =>
+            html`<div data-testid=${`main-hits-top-level-${hit.__position}`}>
+              ${hit.objectID}
+              <button
+                data-testid=${`main-hits-convert-${hit.__position}`}
+                onClick=${() => sendEvent('conversion', hit, 'Converted')}
+              >
+                convert
+              </button>
+              <button
+                data-testid=${`main-hits-click-${hit.__position}`}
+                onClick=${() => sendEvent('click', hit, 'Clicked')}
+              >
+                click
+              </button>
+            </div>`,
+        },
         ...widgetParams,
       }),
+      index({ indexName: 'nested' }).addWidgets([
+        hits({
+          container: document.body.appendChild(
+            Object.assign(document.createElement('div'), {
+              id: 'nested-hits',
+            })
+          ),
+          templates: {
+            item: (hit, { html, sendEvent }) =>
+              html`<div data-testid=${`nested-hits-${hit.__position}`}>
+                ${hit.objectID}
+                <button
+                  data-testid=${`nested-hits-click-${hit.__position}`}
+                  onClick=${() => sendEvent('click', hit, 'Clicked nested')}
+                >
+                  click
+                </button>
+              </div>`,
+          },
+        }),
+      ]),
     ])
     .on('error', () => {
       /*