vue-instantsearch 4.3.1 → 4.4.0

package/src/components/RelevantSort.vue

@@ -36,7 +36,14 @@ export default {
   name: 'AisRelevantSort',
   mixins: [
     createSuitMixin({ name: 'RelevantSort' }),
-    createWidgetMixin({ connector: connectRelevantSort }),
+    createWidgetMixin(
+      {
+        connector: connectRelevantSort,
+      },
+      {
+        $$widgetType: 'ais.relevantSort',
+      }
+    ),
   ],
   methods: {
     refine() {

package/src/components/SearchBox.vue

@@ -77,7 +77,14 @@ import SearchInput from './SearchInput.vue';
 export default {
   name: 'AisSearchBox',
   mixins: [
-    createWidgetMixin({ connector: connectSearchBox }),
+    createWidgetMixin(
+      {
+        connector: connectSearchBox,
+      },
+      {
+        $$widgetType: 'ais.searchBox',
+      }
+    ),
     createSuitMixin({ name: 'SearchBox' }),
   ],
   components: {

package/src/components/SortBy.vue

@@ -35,7 +35,12 @@ export default {
   name: 'AisSortBy',
   mixins: [
     createSuitMixin({ name: 'SortBy' }),
-    createWidgetMixin({ connector: connectSortBy }),
+    createWidgetMixin(
+      { connector: connectSortBy },
+      {
+        $$widgetType: 'ais.sortBy',
+      }
+    ),
 
     createPanelConsumerMixin({
       mapStateToCanRefine: state => state.hasNoResults === false,

package/src/components/StateResults.vue

@@ -25,7 +25,14 @@ import connectStateResults from '../connectors/connectStateResults';
 export default {
   name: 'AisStateResults',
   mixins: [
-    createWidgetMixin({ connector: connectStateResults }),
+    createWidgetMixin(
+      {
+        connector: connectStateResults,
+      },
+      {
+        $$widgetType: 'ais.stateResults',
+      }
+    ),
     createSuitMixin({ name: 'StateResults' }),
   ],
   computed: {

package/src/components/Stats.vue

@@ -20,7 +20,12 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisStats',
   mixins: [
-    createWidgetMixin({ connector: connectStats }),
+    createWidgetMixin(
+      { connector: connectStats },
+      {
+        $$widgetType: 'ais.stats',
+      }
+    ),
     createSuitMixin({ name: 'Stats' }),
   ],
   computed: {

package/src/components/ToggleRefinement.vue

@@ -41,7 +41,14 @@ export default {
   name: 'AisToggleRefinement',
   mixins: [
     createSuitMixin({ name: 'ToggleRefinement' }),
-    createWidgetMixin({ connector: connectToggleRefinement }),
+    createWidgetMixin(
+      {
+        connector: connectToggleRefinement,
+      },
+      {
+        $$widgetType: 'ais.toggleRefinement',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine,
     }),

package/src/components/VoiceSearch.vue

@@ -84,7 +84,14 @@ import { createWidgetMixin } from '../mixins/widget';
 export default {
   name: 'AisVoiceSearch',
   mixins: [
-    createWidgetMixin({ connector: connectVoiceSearch }),
+    createWidgetMixin(
+      {
+        connector: connectVoiceSearch,
+      },
+      {
+        $$widgetType: 'ais.voiceSearch',
+      }
+    ),
     createSuitMixin({ name: 'VoiceSearch' }),
   ],
   props: {

package/src/components/__tests__/__snapshots__/Pagination.js.snap

@@ -19,49 +19,49 @@ exports[`renders correctly another page 1`] = `
         ‹
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
@@ -105,49 +105,49 @@ exports[`renders correctly first page 1`] = `
         ‹
       </span>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >
         1
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         2
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         3
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
@@ -193,49 +193,49 @@ exports[`renders correctly last page 1`] = `
         ‹
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         4
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         5
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         6
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         7
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         8
       </a>
     </li>
-    <li class="ais-Pagination-item">
+    <li class="ais-Pagination-item ais-Pagination-item--page">
       <a class="ais-Pagination-link"
          href="#"
       >
         9
       </a>
     </li>
-    <li class="ais-Pagination-item ais-Pagination-item--selected">
+    <li class="ais-Pagination-item ais-Pagination-item--page ais-Pagination-item--selected">
       <a class="ais-Pagination-link"
          href="#"
       >

package/src/mixins/__tests__/widget.test.js

@@ -333,3 +333,105 @@ describe('on child index', () => {
     expect(wrapper.vm.state).toEqual(state);
   });
 });
+
+describe('general', () => {
+  it('sets additional properties to widget', () => {
+    const instance = createFakeInstance();
+    const widget = { render: () => {} };
+    const factory = jest.fn(() => widget);
+    const connector = jest.fn(() => factory);
+    const widgetParams = {
+      attribute: 'brand',
+    };
+    const additionalProperties = { $$widgetType: 'ais.fakeWidget' };
+    const Test = createFakeComponent({
+      mixins: [createWidgetMixin({ connector }, additionalProperties)],
+      computed: {
+        widgetParams() {
+          return widgetParams;
+        },
+      },
+    });
+
+    mount(Test, {
+      provide: {
+        $_ais_instantSearchInstance: instance,
+      },
+    });
+
+    expect(connector).toHaveBeenCalled();
+    expect(factory).toHaveBeenCalledWith(widgetParams);
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.addWidgets.mock.calls[0][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+  });
+
+  it('sets additional properties to widget when it recreates', async () => {
+    const instance = createFakeInstance();
+    const widget = {
+      render: () => {},
+      dispose: () => {},
+    };
+    const factory = jest.fn(() => widget);
+    const connector = jest.fn(() => factory);
+    const widgetParams = {
+      attribute: 'brand',
+    };
+    const additionalProperties = { $$widgetType: 'ais.fakeWidget' };
+
+    const Test = createFakeComponent({
+      mixins: [createWidgetMixin({ connector }, additionalProperties)],
+      data: () => ({
+        widgetParams,
+      }),
+    });
+
+    const nextWidgetParams = {
+      attribute: 'price',
+    };
+
+    const wrapper = mount(Test, {
+      provide: {
+        $_ais_instantSearchInstance: instance,
+      },
+    });
+
+    // Simulate render
+    await wrapper.setData({
+      state: { items: [] },
+    });
+
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.addWidgets.mock.calls[0][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+
+    // Simulate widget params update
+    await wrapper.setData({
+      widgetParams: nextWidgetParams,
+    });
+
+    expect(wrapper.vm.state).toBe(null);
+
+    expect(instance.mainIndex.removeWidgets).toHaveBeenCalledTimes(1);
+    expect(instance.mainIndex.removeWidgets).toHaveBeenCalledWith([widget]);
+
+    expect(factory).toHaveBeenCalledTimes(2);
+    expect(factory).toHaveBeenCalledWith(nextWidgetParams);
+
+    expect(instance.mainIndex.addWidgets).toHaveBeenCalledTimes(2);
+    expect(instance.mainIndex.addWidgets.mock.calls[1][0]).toEqual([
+      {
+        ...widget,
+        ...additionalProperties,
+      },
+    ]);
+  });
+});

package/src/mixins/widget.js

@@ -1,7 +1,11 @@
+import { _objectSpread } from '../util/polyfills';
 import { isVue3 } from '../util/vue-compat';
 import { warn } from '../util/warn';
 
-export const createWidgetMixin = ({ connector } = {}) => ({
+export const createWidgetMixin = (
+  { connector } = {},
+  additionalProperties = {}
+) => ({
   inject: {
     instantSearchInstance: {
       from: '$_ais_instantSearchInstance',
@@ -27,7 +31,10 @@ export const createWidgetMixin = ({ connector } = {}) => ({
   created() {
     if (typeof connector === 'function') {
       this.factory = connector(this.updateState, () => {});
-      this.widget = this.factory(this.widgetParams);
+      this.widget = _objectSpread(
+        this.factory(this.widgetParams),
+        additionalProperties
+      );
       this.getParentIndex().addWidgets([this.widget]);
 
       if (
@@ -66,7 +73,10 @@ Read more on using connectors: https://alg.li/vue-custom`
       handler(nextWidgetParams) {
         this.state = null;
         this.getParentIndex().removeWidgets([this.widget]);
-        this.widget = this.factory(nextWidgetParams);
+        this.widget = _objectSpread(
+          this.factory(nextWidgetParams),
+          additionalProperties
+        );
         this.getParentIndex().addWidgets([this.widget]);
       },
       deep: true,

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

@@ -660,6 +660,60 @@ Array [
         await renderToString(wrapper);
       });
 
+      it('forwards nuxt', async () => {
+        const searchClient = createFakeClient();
+
+        let nuxt = 0;
+        // every time the function gets called, we get a different "nuxt"
+        // this can be used to assert both "nuxt" objects are equal
+        const getNuxtCounter = () => ++nuxt;
+
+        // there are two renders of App, each with an assertion
+        expect.assertions(2);
+
+        const App = {
+          mixins: [
+            {
+              beforeCreate() {
+                this.$nuxt = getNuxtCounter();
+              },
+            },
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          data() {
+            expect(this.$nuxt).toEqual(1);
+            return {};
+          },
+          render: renderCompat(h =>
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+            ])
+          ),
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [forceIsServerMixin],
+          render: renderCompat(h => h(App)),
+        });
+
+        await renderToString(wrapper);
+      });
+
       it('searches only once', async () => {
         const searchClient = createFakeClient();
         const app = {
@@ -719,6 +773,82 @@ Array [
     },
   },
 ]
+`);
+      });
+
+      it('works when component is at root (and therefore has no $vnode)', async () => {
+        const searchClient = createFakeClient();
+        let mainIndex;
+
+        const app = {
+          render: renderCompat(h =>
+            /**
+             * This code triggers this warning in Vue 3:
+             * > Non-function value encountered for default slot. Prefer function slots for better performance.
+             *
+             * To fix it, replace the third argument
+             * > [h(...), h(...)]
+             * with
+             * > { default: () => [h(...), h(...)] }
+             *
+             * but it's not important (and not compatible in vue2), we're leaving it as-is.
+             */
+            h(InstantSearchSsr, {}, [
+              h(Configure, {
+                attrs: {
+                  hitsPerPage: 100,
+                },
+              }),
+              h(SearchBox),
+            ])
+          ),
+        };
+
+        const wrapper = createSSRApp({
+          mixins: [
+            forceIsServerMixin,
+            createServerRootMixin({
+              searchClient,
+              indexName: 'hello',
+            }),
+          ],
+          serverPrefetch() {
+            return this.instantsearch.findResultsState({
+              component: this,
+              renderToString,
+            });
+          },
+          created() {
+            mainIndex = this.instantsearch.mainIndex;
+          },
+          render: renderCompat(h => h(app)),
+        });
+
+        await renderToString(wrapper);
+
+        expect(mainIndex.getWidgetState()).toMatchInlineSnapshot(`
+Object {
+  "hello": Object {
+    "configure": Object {
+      "hitsPerPage": 100,
+    },
+  },
+}
+`);
+
+        expect(searchClient.search).toHaveBeenCalledTimes(1);
+        expect(searchClient.search.mock.calls[0][0]).toMatchInlineSnapshot(`
+Array [
+  Object {
+    "indexName": "hello",
+    "params": Object {
+      "facets": Array [],
+      "hitsPerPage": 100,
+      "query": "",
+      "tagFilters": "",
+    },
+  },
+]
 `);
       });
     }
@@ -803,8 +933,9 @@ Array [
         hello: serialized,
       });
 
-      // TODO: assert that this is expect.any(AlgoliaSearchHelper), but test fails
-      // even though it's an object with all the right properties (including constructor)
+      expect(instantsearch.mainIndex.getHelper()).toEqual(
+        expect.any(AlgoliaSearchHelper)
+      );
       expect(instantsearch.mainIndex.getHelper()).not.toBeNull();
     });
 

package/src/util/createInstantSearchComponent.js

@@ -1,7 +1,7 @@
 import { createSuitMixin } from '../mixins/suit';
 import { version } from '../../package.json'; // rollup does pick only what needed from json
 import { _objectSpread } from './polyfills';
-import { isVue3, version as vueVersion } from '../util/vue-compat';
+import { isVue3, version as vueVersion } from './vue-compat';
 
 export const createInstantSearchComponent = component =>
   _objectSpread(

package/src/util/createServerRootMixin.js

@@ -1,5 +1,5 @@
 import instantsearch from 'instantsearch.js/es';
-import { isVue3, isVue2, Vue2, createSSRApp } from '../util/vue-compat';
+import { isVue3, isVue2, Vue2, createSSRApp } from './vue-compat';
 import { warn } from './warn';
 
 function walkIndex(indexWidget, visit) {
@@ -41,7 +41,7 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
   if (isVue3) {
     const appOptions = Object.assign({}, componentInstance.$options, options);
-    appOptions.mixins = [...appOptions.mixins, ...mixins];
+    appOptions.mixins = [...mixins, ...(appOptions.mixins || [])];
     app = createSSRApp(appOptions);
     if (componentInstance.$router) {
       app.use(componentInstance.$router);
@@ -56,7 +56,10 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
     const Extended = componentInstance.$vnode
       ? componentInstance.$vnode.componentOptions.Ctor.extend(options)
-      : Vue2.component(Object.assign({}, componentInstance.$options, options));
+      : Vue2.component(
+          options.name,
+          Object.assign({}, componentInstance.$options, options)
+        );
 
     app = new Extended({
       propsData: componentInstance.$options.propsData,
@@ -101,6 +104,13 @@ function augmentInstantSearch(instantSearchOptions, cloneComponent) {
         app = cloneComponent(component, {
           mixins: [
             {
+              beforeCreate() {
+                if (component.$nuxt) {
+                  // In case of Nuxt (3), we ensure the context is shared between
+                  // the real and cloned component
+                  this.$nuxt = component.$nuxt;
+                }
+              },
               created() {
                 instance = this.instantsearch;
 

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

@@ -1,9 +1,9 @@
 /*
   By default, we maintain this repository based on Vue 2.
-  That's why this file is exporting from `index-2`,
+  That's why this file is exporting from `index-vue2`,
   which includes all the variables and methods for Vue 2.
   When `scripts/build-vue3.sh` runs, it will replace with
-  > export * from './index-3';
+  > export * from './index-vue3';
   and revert it back after finished.
 */
-export * from './index-2';
+export * from './index-vue2';