vue-instantsearch 4.3.3 → 4.4.2

package/src/components/SearchBox.vue

@@ -20,6 +20,7 @@
         :reset-title="resetTitle"
         :class-names="classNames"
         v-model="currentRefinement"
+        ref="searchInput"
       >
         <template
           v-slot:loading-indicator
@@ -77,7 +78,14 @@ import SearchInput from './SearchInput.vue';
 export default {
   name: 'AisSearchBox',
   mixins: [
-    createWidgetMixin({ connector: connectSearchBox }),
+    createWidgetMixin(
+      {
+        connector: connectSearchBox,
+      },
+      {
+        $$widgetType: 'ais.searchBox',
+      }
+    ),
     createSuitMixin({ name: 'SearchBox' }),
   ],
   components: {
@@ -112,6 +120,10 @@ export default {
       type: String,
       default: undefined,
     },
+    queryHook: {
+      type: Function,
+      default: undefined,
+    },
   },
   data() {
     return {
@@ -121,6 +133,11 @@ export default {
     };
   },
   computed: {
+    widgetParams() {
+      return {
+        queryHook: this.queryHook,
+      };
+    },
     isControlled() {
       return (
         typeof this.value !== 'undefined' ||
@@ -141,6 +158,14 @@ export default {
           this.$emit('update:modelValue', this.model);
           this.state.refine(this.model);
         }
+
+        // we return the local value if the input is focused to avoid
+        // concurrent updates when typing
+        const { searchInput } = this.$refs;
+        if (searchInput && searchInput.isFocused()) {
+          return this.localValue;
+        }
+
         return this.model || this.state.query || '';
       },
       set(val) {

package/src/components/SearchInput.vue

@@ -170,6 +170,9 @@ export default {
     };
   },
   methods: {
+    isFocused() {
+      return document.activeElement === this.$refs.input;
+    },
     onFormSubmit() {
       const input = this.$refs.input;
       input.blur();

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: {
@@ -93,6 +100,14 @@ export default {
       required: false,
       default: undefined,
     },
+    language: {
+      type: String,
+      default: undefined,
+    },
+    additionalQueryParameters: {
+      type: Object,
+      default: undefined,
+    },
     buttonTitle: {
       type: String,
       required: false,
@@ -123,6 +138,8 @@ export default {
     widgetParams() {
       return {
         searchAsYouSpeak: this.searchAsYouSpeak,
+        language: this.language,
+        additionalQueryParameters: this.additionalQueryParameters,
       };
     },
     errorNotAllowed() {

package/src/components/__tests__/SearchBox.js

@@ -147,6 +147,21 @@ test('refine on empty string on form reset', async () => {
   expect(state.refine).toHaveBeenCalledWith('');
 });
 
+test('keep local query when out of sync and input is focused', async () => {
+  const state = { ...defaultState, refine: jest.fn() };
+  __setState(state);
+
+  const wrapper = mount(SearchBox, { attachTo: document.body });
+  const input = wrapper.find('.ais-SearchBox-input');
+  input.element.focus();
+  await input.setValue('hello');
+
+  await wrapper.setData({ state: { query: 'hel' } });
+
+  expect(input.element.value).toBe('hello');
+  expect(state.refine).toHaveBeenLastCalledWith('hello');
+});
+
 test('overriding slots', () => {
   __setState({
     ...defaultState,

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

@@ -933,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/createServerRootMixin.js

@@ -41,7 +41,7 @@ function defaultCloneComponent(componentInstance, { mixins = [] } = {}) {
 
   if (isVue3) {
     const appOptions = Object.assign({}, componentInstance.$options, options);
-    appOptions.mixins = [...mixins, ...appOptions.mixins];
+    appOptions.mixins = [...mixins, ...(appOptions.mixins || [])];
     app = createSSRApp(appOptions);
     if (componentInstance.$router) {
       app.use(componentInstance.$router);