vue-instantsearch 4.8.9 → 4.9.0

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.8.9",
+  "version": "4.9.0",
   "files": [
     "vue2",
     "vue3",
@@ -35,7 +35,7 @@
     "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "4.54.0",
+    "instantsearch.js": "4.55.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "419aa9869727dceeb49dfc5289a0b9241e0e5827"
+  "gitHead": "c483ae31e1e615be61dffb5d0bc04a4927960a67"
 }

package/src/__tests__/common.test.js

@@ -8,6 +8,7 @@ import {
   createMenuTests,
   createPaginationTests,
   createInfiniteHitsTests,
+  createHitsTests,
 } from '@instantsearch/tests';
 
 import { nextTick, mountApp } from '../../test/utils';
@@ -22,6 +23,8 @@ import {
   AisInfiniteHits,
   AisSearchBox,
   createWidgetMixin,
+  AisHits,
+  AisIndex,
 } from '../instantsearch';
 jest.unmock('instantsearch.js/es');
 
@@ -128,7 +131,146 @@ createInfiniteHitsTests(async ({ instantSearchOptions, widgetParams }) => {
       render: renderCompat((h) =>
         h(AisInstantSearch, { props: instantSearchOptions }, [
           h(AisSearchBox),
-          h(AisInfiniteHits, { props: widgetParams }),
+          h(AisInfiniteHits, {
+            attrs: { id: 'main-hits' },
+            props: widgetParams,
+            scopedSlots: {
+              item: ({ item: hit, sendEvent }) =>
+                h(
+                  'div',
+                  {
+                    attrs: {
+                      'data-testid': `main-hits-top-level-${hit.__position}`,
+                    },
+                  },
+                  [
+                    hit.objectID,
+                    h('button', {
+                      attrs: {
+                        'data-testid': `main-hits-convert-${hit.__position}`,
+                      },
+                      on: {
+                        click: () => sendEvent('conversion', hit, 'Converted'),
+                      },
+                    }),
+                    h('button', {
+                      attrs: {
+                        'data-testid': `main-hits-click-${hit.__position}`,
+                      },
+                      on: {
+                        click: () => sendEvent('click', hit, 'Clicked'),
+                      },
+                    }),
+                  ]
+                ),
+            },
+          }),
+          h(AisIndex, { props: { indexName: 'nested' } }, [
+            h(AisInfiniteHits, {
+              attrs: { id: 'nested-hits' },
+              scopedSlots: {
+                item: ({ item: hit, sendEvent }) =>
+                  h(
+                    'div',
+                    {
+                      attrs: {
+                        'data-testid': `nested-hits-top-level-${hit.__position}`,
+                      },
+                    },
+                    [
+                      hit.objectID,
+                      h('button', {
+                        attrs: {
+                          'data-testid': `nested-hits-click-${hit.__position}`,
+                        },
+                        on: {
+                          click: () =>
+                            sendEvent('click', hit, 'Clicked nested'),
+                        },
+                      }),
+                    ]
+                  ),
+              },
+            }),
+          ]),
+          h(GlobalErrorSwallower),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});
+
+createHitsTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisSearchBox),
+          h(AisHits, {
+            attrs: { id: 'main-hits' },
+            props: widgetParams,
+            scopedSlots: {
+              item: ({ item: hit, sendEvent }) =>
+                h(
+                  'div',
+                  {
+                    attrs: {
+                      'data-testid': `main-hits-top-level-${hit.__position}`,
+                    },
+                  },
+                  [
+                    hit.objectID,
+                    h('button', {
+                      attrs: {
+                        'data-testid': `main-hits-convert-${hit.__position}`,
+                      },
+                      on: {
+                        click: () => sendEvent('conversion', hit, 'Converted'),
+                      },
+                    }),
+                    h('button', {
+                      attrs: {
+                        'data-testid': `main-hits-click-${hit.__position}`,
+                      },
+                      on: {
+                        click: () => sendEvent('click', hit, 'Clicked'),
+                      },
+                    }),
+                  ]
+                ),
+            },
+          }),
+          h(AisIndex, { props: { indexName: 'nested' } }, [
+            h(AisHits, {
+              attrs: { id: 'nested-hits' },
+              scopedSlots: {
+                item: ({ item: hit, sendEvent }) =>
+                  h(
+                    'div',
+                    {
+                      attrs: {
+                        'data-testid': `nested-hits-top-level-${hit.__position}`,
+                      },
+                    },
+                    [
+                      hit.objectID,
+                      h('button', {
+                        attrs: {
+                          'data-testid': `nested-hits-click-${hit.__position}`,
+                        },
+                        on: {
+                          click: () =>
+                            sendEvent('click', hit, 'Clicked nested'),
+                        },
+                      }),
+                    ]
+                  ),
+              },
+            }),
+          ]),
           h(GlobalErrorSwallower),
         ])
       ),

package/src/components/Hits.vue

@@ -10,12 +10,14 @@
           v-for="(item, itemIndex) in items"
           :key="item.objectID"
           :class="suit('item')"
+          @click="state.sendEvent('click:internal', item, 'Hit Clicked')"
         >
           <slot
             name="item"
             :item="item"
             :index="itemIndex"
             :insights="state.insights"
+            :send-event="state.sendEvent"
           >
             objectID: {{ item.objectID }}, index: {{ itemIndex }}
           </slot>

package/src/components/InfiniteHits.vue

@@ -34,12 +34,14 @@
           v-for="(item, index) in items"
           :class="suit('item')"
           :key="item.objectID"
+          @click="state.sendEvent('click:internal', item, 'Hit Clicked')"
         >
           <slot
             name="item"
             :item="item"
             :index="index"
             :insights="state.insights"
+            :send-event="state.sendEvent"
           >
             objectID: {{ item.objectID }}, index: {{ index }}
           </slot>

package/src/components/InstantSearch.js

@@ -38,6 +38,12 @@ export default createInstantSearchComponent({
         return true;
       },
     },
+    insights: {
+      default: undefined,
+      validator(value) {
+        return typeof value === 'boolean' || typeof value === 'object';
+      },
+    },
     stalledSearchDelay: {
       type: Number,
       default: undefined,
@@ -84,6 +90,7 @@ export default createInstantSearchComponent({
       instantSearchInstance: instantsearch({
         searchClient: this.searchClient,
         insightsClient: this.insightsClient,
+        insights: this.insights,
         indexName: this.indexName,
         routing: this.routing,
         stalledSearchDelay: this.stalledSearchDelay,

package/src/components/__tests__/Hits.js

@@ -11,6 +11,7 @@ jest.mock('../../mixins/widget');
 
 const defaultState = {
   hits: [{ objectID: 'one' }, { objectID: 'two' }],
+  sendEvent: jest.fn(),
 };
 
 it('accepts an escapeHTML prop', () => {

package/src/components/__tests__/InfiniteHits.js

@@ -15,6 +15,7 @@ const defaultState = {
     escapeHTML: true,
     transformItems: (items) => items,
   },
+  sendEvent: jest.fn(),
   hits: [
     {
       objectID: '00001',

package/src/util/__tests__/createServerRootMixin.test.js

@@ -1133,7 +1133,9 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
       const resultsState = createSerializedState();
       const state = new SearchParameters(resultsState.state);
-      const localState = new SearchParameters({ index: 'lol' });
+      const localState = new SearchParameters({
+        index: 'lol',
+      });
       const results = new SearchResults(state, resultsState.results);
 
       instantSearchInstance.hydrate({

package/src/util/createServerRootMixin.js

@@ -1,34 +1,11 @@
 import instantsearch from 'instantsearch.js/es';
+import {
+  waitForResults,
+  getInitialResults,
+} from 'instantsearch.js/es/lib/server';
 import { isVue3, isVue2, Vue2, createSSRApp } from './vue-compat';
 import { warn } from './warn';
 
-function walkIndex(indexWidget, visit) {
-  visit(indexWidget);
-
-  return indexWidget.getWidgets().forEach((widget) => {
-    if (widget.$$type !== 'ais.index') return;
-    visit(widget);
-    walkIndex(widget, visit);
-  });
-}
-
-function searchOnlyWithDerivedHelpers(helper) {
-  return new Promise((resolve, reject) => {
-    helper.searchOnlyWithDerivedHelpers();
-
-    // we assume all derived helpers resolve at least in the same tick
-    helper.derivedHelpers[0].on('result', () => {
-      resolve();
-    });
-
-    helper.derivedHelpers.forEach((derivedHelper) =>
-      derivedHelper.on('error', (e) => {
-        reject(e);
-      })
-    );
-  });
-}
-
 function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
   const options = {
     serverPrefetch: undefined,
@@ -133,24 +110,9 @@ function augmentInstantSearch(instantSearchOptions, cloneComponent) {
         });
       })
       .then(() => renderToString(app))
-      .then(() => searchOnlyWithDerivedHelpers(instance.mainHelper))
+      .then(() => waitForResults(instance))
       .then(() => {
-        initialResults = {};
-        walkIndex(instance.mainIndex, (widget) => {
-          initialResults[widget.getIndexId()] = {
-            // copy just the values of SearchParameters, not the functions
-            state: Object.entries(widget.getHelper().state).reduce(
-              (acc, [key, value]) => {
-                // eslint-disable-next-line no-param-reassign
-                acc[key] = value;
-                return acc;
-              },
-              {}
-            ),
-            results: widget.getResults()._rawResults,
-          };
-        });
-
+        initialResults = getInitialResults(instance.mainIndex);
         search.hydrate(initialResults);
         return search.getState();
       });

package/src/util/vue-compat/index-vue3.js

@@ -9,13 +9,34 @@ export { Vue, Vue2, isVue2, isVue3 };
 
 export function renderCompat(fn) {
   function h(tag, props, children) {
-    if (typeof props === 'object' && (props.attrs || props.props)) {
+    if (
+      typeof props === 'object' &&
+      (props.attrs || props.props || props.scopedSlots || props.on)
+    ) {
       // In vue 3, we no longer wrap with `attrs` or `props` key.
-      const flatProps = Object.assign({}, props, props.attrs, props.props);
+      const flatProps = Object.assign(
+        {},
+        props,
+        props.attrs,
+        props.props,
+        Object.keys(props.on || {}).reduce((acc, key) => {
+          // eslint-disable-next-line no-param-reassign
+          acc[`on${key[0].toUpperCase()}${key.slice(1)}`] = props.on[key];
+          return acc;
+        }, {})
+      );
       delete flatProps.attrs;
       delete flatProps.props;
+      delete flatProps.scopedSlots;
+      delete flatProps.on;
 
-      return Vue.h(tag, flatProps, children);
+      return Vue.h(
+        tag,
+        flatProps,
+        props.scopedSlots
+          ? Object.assign({ default: () => children }, props.scopedSlots)
+          : children
+      );
     }
 
     return Vue.h(tag, props, children);