vue-instantsearch 4.3.2 → 4.4.1

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: {
@@ -141,6 +149,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: {

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

@@ -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 = {
@@ -879,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);
@@ -104,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';