vue-instantsearch 4.8.10 → 4.10.0

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.8.10",
+  "version": "4.10.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.1",
+    "instantsearch.js": "4.56.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -60,7 +60,7 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.14.3",
-    "algoliasearch-helper": "3.11.3",
+    "algoliasearch-helper": "3.13.0",
     "instantsearch.css": "8.0.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "1f81b61cf0e78aeb7022d5e9eca0d49de727dc64"
+  "gitHead": "ea054eab1484a3d167db83bc768f6ea134add5f9"
 }

package/src/__tests__/common.test.js

@@ -8,6 +8,8 @@ import {
   createMenuTests,
   createPaginationTests,
   createInfiniteHitsTests,
+  createHitsTests,
+  createRangeInputTests,
 } from '@instantsearch/tests';
 
 import { nextTick, mountApp } from '../../test/utils';
@@ -22,6 +24,9 @@ import {
   AisInfiniteHits,
   AisSearchBox,
   createWidgetMixin,
+  AisHits,
+  AisIndex,
+  AisRangeInput,
 } from '../instantsearch';
 jest.unmock('instantsearch.js/es');
 
@@ -128,7 +133,162 @@ 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),
+        ])
+      ),
+    },
+    document.body.appendChild(document.createElement('div'))
+  );
+
+  await nextTick();
+});
+
+createRangeInputTests(async ({ instantSearchOptions, widgetParams }) => {
+  mountApp(
+    {
+      render: renderCompat((h) =>
+        h(AisInstantSearch, { props: instantSearchOptions }, [
+          h(AisRangeInput, { props: widgetParams }),
           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

@@ -66,23 +66,6 @@ describe('createServerRootMixin', () => {
       ).toThrowErrorMatchingInlineSnapshot(`
 "The \`searchClient\` option is required.
 
-See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
-`);
-    });
-
-    it('requires indexName', () => {
-      expect(() =>
-        createSSRApp({
-          mixins: [
-            createServerRootMixin({
-              searchClient: createFakeClient(),
-              indexName: undefined,
-            }),
-          ],
-        })
-      ).toThrowErrorMatchingInlineSnapshot(`
-"The \`indexName\` option is required.
-
 See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsearch/js/"
 `);
     });
@@ -1133,7 +1116,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/createInstantSearchComponent.js

@@ -23,7 +23,7 @@ export const createInstantSearchComponent = (component) =>
           this.instantSearchInstance.helper.setClient(searchClient).search();
         },
         indexName(indexName) {
-          this.instantSearchInstance.helper.setIndex(indexName).search();
+          this.instantSearchInstance.helper.setIndex(indexName || '').search();
         },
         stalledSearchDelay(stalledSearchDelay) {
           // private InstantSearch.js API:

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);