vue-instantsearch 4.4.2 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,28 @@
+# [4.6.0](https://github.com/algolia/vue-instantsearch/compare/v4.5.0...v4.6.0) (2022-10-04)
+
+
+### Features
+
+* **ais-hierarchical-menu:** add css class for link of selected menu item ([#1150](https://github.com/algolia/vue-instantsearch/issues/1150)) ([93dfdc1](https://github.com/algolia/vue-instantsearch/commit/93dfdc159d54fe8f3a5e31721e8533c7c0b6ca81))
+* **InstantSearch:** support onStateChange ([#1149](https://github.com/algolia/vue-instantsearch/issues/1149)) ([badf815](https://github.com/algolia/vue-instantsearch/commit/badf8154f0869ea6449091ac97738e1eb491412b)), closes [#1148](https://github.com/algolia/vue-instantsearch/issues/1148)
+* **StateResults:** give access to status and error ([#1151](https://github.com/algolia/vue-instantsearch/issues/1151)) ([03dea3a](https://github.com/algolia/vue-instantsearch/commit/03dea3a2c540ae05202e269dfa1b92cb7583af9b))
+
+
+
+# [4.5.0](https://github.com/algolia/vue-instantsearch/compare/v4.4.2...v4.5.0) (2022-09-07)
+
+
+### Bug Fixes
+
+* **nuxt:** only write $nuxt if it's writable ([#1117](https://github.com/algolia/vue-instantsearch/issues/1117)) ([bdecca9](https://github.com/algolia/vue-instantsearch/commit/bdecca9334322e9405ca21e6c6d51735d3ec042f)), closes [/github.com/algolia/vue-instantsearch/commit/acda29326475bd1b73f12b058a0c02df00b8b239#commitcomment-67430759](https://github.com//github.com/algolia/vue-instantsearch/commit/acda29326475bd1b73f12b058a0c02df00b8b239/issues/commitcomment-67430759)
+
+
+### Features
+
+* **can-refine:** provide `canRefine` for multiple widget slots ([#1141](https://github.com/algolia/vue-instantsearch/issues/1141)) ([424316d](https://github.com/algolia/vue-instantsearch/commit/424316d8c6e23d4573c0d6a63c56ef919da864e1))
+
+
+
 ## [4.4.2](https://github.com/algolia/vue-instantsearch/compare/v4.4.1...v4.4.2) (2022-07-25)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.4.2",
+  "version": "4.6.0",
   "files": [
     "vue2",
     "vue3",
@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.43.0",
+    "instantsearch.js": "^4.47.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -81,7 +81,7 @@
     "@wdio/spec-reporter": "^5.11.7",
     "@wdio/static-server-service": "^5.11.0",
     "algoliasearch": "4.0.1",
-    "algoliasearch-helper": "3.10.0",
+    "algoliasearch-helper": "^3.10.0",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-preset-es2015": "6.24.1",
@@ -133,11 +133,11 @@
   "bundlesize": [
     {
       "path": "./vue2/umd/index.js",
-      "maxSize": "56.50 kB"
+      "maxSize": "57.25 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "57.75 kB"
+      "maxSize": "58.25 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

package/src/__tests__/index.js

@@ -16,6 +16,7 @@ const nonWidgetComponents = [
   'AisSnippet',
   'AisPanel',
   'AisPoweredBy',
+  'AisStateResults',
 ];
 
 function getAllComponents() {

package/src/components/Breadcrumb.vue

@@ -64,9 +64,7 @@ export default {
         $$widgetType: 'ais.breadcrumb',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'Breadcrumb' }),
   ],
   props: {

package/src/components/ClearRefinements.vue

@@ -37,9 +37,7 @@ export default {
         $$widgetType: 'ais.clearRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.hasRefinements),
-    }),
+    createPanelConsumerMixin(),
     createSuitMixin({ name: 'ClearRefinements' }),
   ],
   props: {

package/src/components/CurrentRefinements.vue

@@ -71,10 +71,7 @@ export default {
         $$widgetType: 'ais.currentRefinements',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state =>
-        Boolean(state.items) && state.items.length > 0,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     includedAttributes: {

package/src/components/HierarchicalMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :can-toggle-show-more="state.canToggleShowMore"
       :is-showing-more="state.isShowingMore"
       :refine="state.refine"
@@ -46,9 +46,6 @@ import { createPanelConsumerMixin } from '../mixins/panel';
 import HierarchicalMenuList from './HierarchicalMenuList.vue';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  Boolean(state.items) && state.items.length > 0;
-
 export default {
   name: 'AisHierarchicalMenu',
   mixins: [
@@ -61,9 +58,7 @@ export default {
         $$widgetType: 'ais.hierarchicalMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   components: {
     HierarchicalMenuList,
@@ -120,9 +115,6 @@ export default {
         transformItems: this.transformItems,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

package/src/components/HierarchicalMenuList.vue

@@ -17,7 +17,10 @@
     >
       <a
         :href="createURL(item.value)"
-        :class="suit('link')"
+        :class="[
+          suit('link'),
+          item.isRefined && suit('link', 'selected')
+        ]"
         @click.prevent="refine(item.value)"
       >
         <span :class="suit('label')">{{ item.label }}</span>

package/src/components/HitsPerPage.vue

@@ -7,6 +7,7 @@
       :items="state.items"
       :refine="state.refine"
       :hasNoResults="state.hasNoResults"
+      :canRefine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
         $$widgetType: 'ais.hitsPerPage',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

package/src/components/InstantSearch.js

@@ -46,6 +46,10 @@ export default createInstantSearchComponent({
       type: Function,
       default: undefined,
     },
+    onStateChange: {
+      type: Function,
+      default: undefined,
+    },
     initialUiState: {
       type: Object,
       default: undefined,
@@ -84,6 +88,7 @@ export default createInstantSearchComponent({
         routing: this.routing,
         stalledSearchDelay: this.stalledSearchDelay,
         searchFunction: this.searchFunction,
+        onStateChange: this.onStateChange,
         initialUiState: this.initialUiState,
       }),
     };

package/src/components/Menu.vue

@@ -61,9 +61,7 @@ export default {
         $$widgetType: 'ais.menu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/MenuSelect.vue

@@ -53,9 +53,7 @@ export default {
         $$widgetType: 'ais.menuSelect',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/NumericMenu.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :items="state.items"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -51,9 +51,7 @@ export default {
       }
     ),
     createSuitMixin({ name: 'NumericMenu' }),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -77,9 +75,6 @@ export default {
         items: this.items,
       };
     },
-    canRefine() {
-      return !this.state.hasNoResults;
-    },
   },
 };
 </script>

package/src/components/Pagination.vue

@@ -183,9 +183,7 @@ export default {
         $$widgetType: 'ais.pagination',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.nbPages > 1,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     padding: {

package/src/components/RangeInput.vue

@@ -1,12 +1,12 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :current-refinement="values"
       :refine="refine"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :range="state.range"
       :send-event="state.sendEvent"
     >
@@ -60,9 +60,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state =>
-  state && Boolean(state.range) && state.range.min !== state.range.max;
-
 export default {
   name: 'AisRangeInput',
   mixins: [
@@ -75,9 +72,7 @@ export default {
         $$widgetType: 'ais.rangeInput',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -119,9 +114,6 @@ export default {
         precision: this.precision,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
     step() {
       return 1 / Math.pow(10, this.precision);
     },

package/src/components/RatingMenu.vue

@@ -8,6 +8,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
+      :can-refine="state.canRefine"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -95,9 +96,7 @@ export default {
         $$widgetType: 'ais.ratingMenu',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/RefinementList.vue

@@ -118,9 +118,7 @@ export default {
         $$widgetType: 'ais.refinementList',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => Boolean(state.canRefine),
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {

package/src/components/SortBy.vue

@@ -8,6 +8,7 @@
       :has-no-results="state.hasNoResults"
       :refine="state.refine"
       :current-refinement="state.currentRefinement"
+      :can-refine="state.canRefine"
     >
       <select
         :class="suit('select')"
@@ -42,9 +43,7 @@ export default {
       }
     ),
 
-    createPanelConsumerMixin({
-      mapStateToCanRefine: state => state.hasNoResults === false,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     items: {

package/src/components/StateResults.vue

@@ -12,34 +12,77 @@
       </p>
       <pre>results: {{ Object.keys(state.results) }}</pre>
       <pre>state: {{ Object.keys(state.state) }}</pre>
+      <pre>status: {{ state.status }}</pre>
+      <pre>error: {{ state.error }}</pre>
     </slot>
   </div>
 </template>
 
 <script>
+import { isVue3 } from '../util/vue-compat';
 import { createSuitMixin } from '../mixins/suit';
 import { createWidgetMixin } from '../mixins/widget';
 import { _objectSpread } from '../util/polyfills';
-import connectStateResults from '../connectors/connectStateResults';
 
 export default {
   name: 'AisStateResults',
   mixins: [
-    createWidgetMixin(
-      {
-        connector: connectStateResults,
-      },
-      {
-        $$widgetType: 'ais.stateResults',
-      }
-    ),
+    createWidgetMixin({ connector: true }),
     createSuitMixin({ name: 'StateResults' }),
   ],
+  props: {
+    catchError: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      renderFn: () => {
+        const { status, error } = this.instantSearchInstance;
+        const results = this.getParentIndex().getResults();
+        const helper = this.getParentIndex().getHelper();
+        const state = helper ? helper.state : null;
+
+        // @MAJOR no longer spread this inside `results`
+        this.state = {
+          results,
+          state,
+          status,
+          error,
+        };
+      },
+    };
+  },
+  created() {
+    this.instantSearchInstance.addListener('render', this.renderFn);
+  },
+  [isVue3 ? 'beforeUnmount' : 'beforeDestroy']() {
+    if (this.widget) {
+      this.instantSearchInstance.removeListener('render', this.renderFn);
+      if (this.errorFn) {
+        this.instantSearchInstance.removeListener('error', this.errorFn);
+      }
+    }
+  },
+  watch: {
+    catchError: {
+      immediate: true,
+      handler(catchError) {
+        if (catchError) {
+          this.errorFn = () => {};
+          this.instantSearchInstance.addListener('error', this.errorFn);
+        } else if (this.errorFn) {
+          this.instantSearchInstance.removeListener('error', this.errorFn);
+          this.errorFn = undefined;
+        }
+      },
+    },
+  },
   computed: {
     stateResults() {
-      // @MAJOR: replace v-bind="stateResults" with :state="state.state" :results="state.results"
-      const { state, results } = this.state;
-      return _objectSpread({}, results, { results, state });
+      const { results, state, status, error } = this.state;
+      return _objectSpread({}, results, { results, state, status, error });
     },
   },
 };

package/src/components/ToggleRefinement.vue

@@ -1,11 +1,11 @@
 <template>
   <div
     v-if="state"
-    :class="[suit(), !canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
   >
     <slot
       :value="state.value"
-      :can-refine="canRefine"
+      :can-refine="state.canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
       :send-event="state.sendEvent"
@@ -35,8 +35,6 @@ import { createWidgetMixin } from '../mixins/widget';
 import { createPanelConsumerMixin } from '../mixins/panel';
 import { createSuitMixin } from '../mixins/suit';
 
-const mapStateToCanRefine = state => Boolean(state.value && state.value.count);
-
 export default {
   name: 'AisToggleRefinement',
   mixins: [
@@ -49,9 +47,7 @@ export default {
         $$widgetType: 'ais.toggleRefinement',
       }
     ),
-    createPanelConsumerMixin({
-      mapStateToCanRefine,
-    }),
+    createPanelConsumerMixin(),
   ],
   props: {
     attribute: {
@@ -82,9 +78,6 @@ export default {
         off: this.off,
       };
     },
-    canRefine() {
-      return mapStateToCanRefine(this.state);
-    },
   },
 };
 </script>

package/src/components/__tests__/Breadcrumb.js

@@ -182,31 +182,6 @@ describe('default render', () => {
   });
 });
 
-describe('panel', () => {
-  it('calls the Panel mixin with `canRefine`', async () => {
-    __setState({ ...defaultState });
-
-    const wrapper = mount(Breadcrumb, {
-      propsData: defaultProps,
-    });
-
-    const mapStateToCanRefine = () =>
-      wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-    expect(mapStateToCanRefine()).toBe(true);
-
-    await wrapper.setData({
-      state: {
-        canRefine: false,
-      },
-    });
-
-    expect(mapStateToCanRefine()).toBe(false);
-
-    expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-  });
-});
-
 describe('custom default render', () => {
   const defaultSlot = `
     <template v-slot="{ items, canRefine, refine, createURL }">

package/src/components/__tests__/ClearRefinements.js

@@ -187,26 +187,3 @@ describe('custom resetLabel render', () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 });
-
-it('calls the Panel mixin with `hasRefinement`', async () => {
-  __setState({
-    hasRefinements: true,
-  });
-
-  const wrapper = mount(ClearRefinements);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasRefinements: false,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});

package/src/components/__tests__/CurrentRefinements.js

@@ -167,23 +167,6 @@ describe.each([
   });
 });
 
-it('calls the Panel mixin with `canRefine`', async () => {
-  __setState({ items: [{}] });
-
-  const wrapper = mount(CurrentRefinements);
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({ state: { items: [] } });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('calls `refine` with a refinement', async () => {
   const spies = [jest.fn(), jest.fn()];
 

package/src/components/__tests__/HierarchicalMenu.js

@@ -116,6 +116,7 @@ const defaultState = {
   createURL: () => {},
   isShowingMore: false,
   canToggleShowMore: true,
+  canRefine: true,
   toggleShowMore: () => {},
   sendEvent: () => {},
 };
@@ -266,6 +267,7 @@ describe('default render', () => {
     __setState({
       ...defaultState,
       items: [],
+      canRefine: false,
     });
 
     const wrapper = mount(HierarchicalMenu, {
@@ -466,25 +468,6 @@ describe('default render', () => {
   });
 });
 
-it('calls the Panel mixin with `items.length`', async () => {
-  __setState({ ...defaultState });
-
-  const wrapper = mount(HierarchicalMenu, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({ state: { items: [] } });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});
-
 it('exposes send-event method for insights middleware', async () => {
   const sendEvent = jest.fn();
   __setState({
@@ -574,6 +557,7 @@ describe('custom default render', () => {
     __setState({
       ...defaultState,
       items: [],
+      canRefine: false,
     });
 
     const wrapper = mount({

package/src/components/__tests__/HitsPerPage.js

@@ -76,29 +76,3 @@ it('calls `refine` with the `value` on `change`', async () => {
 
   expect(wrapper.vm.state.refine).toHaveBeenLastCalledWith(20);
 });
-
-it('calls the Panel mixin with `hasNoResults`', async () => {
-  __setState({
-    ...defaultState,
-    hasNoResults: false,
-  });
-
-  const wrapper = mount(HitsPerPage, {
-    propsData: defaultProps,
-  });
-
-  const mapStateToCanRefine = () =>
-    wrapper.vm.mapStateToCanRefine(wrapper.vm.state);
-
-  expect(mapStateToCanRefine()).toBe(true);
-
-  await wrapper.setData({
-    state: {
-      hasNoResults: true,
-    },
-  });
-
-  expect(mapStateToCanRefine()).toBe(false);
-
-  expect(wrapper.vm.mapStateToCanRefine({})).toBe(false);
-});