vue-instantsearch 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,14 @@
+# [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)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "files": [
     "vue2",
     "vue3",
@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.45.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.75 kB"
+      "maxSize": "57.25 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "58.00 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/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/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/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/__tests__/StateResults.js

@@ -13,6 +13,8 @@ it('renders explanation if no slot is used', () => {
     state: {
       query: 'this is the query',
     },
+    status: 'idle',
+    error: undefined,
   });
   const wrapper = mount(StateResults);
   expect(wrapper.html()).toMatchSnapshot();
@@ -39,6 +41,8 @@ it('gives state & results to default slot', () => {
   __setState({
     state,
     results,
+    status: 'idle',
+    error: undefined,
   });
 
   mount(StateResults, {
@@ -47,6 +51,8 @@ it('gives state & results to default slot', () => {
         expect(props).toEqual(expect.objectContaining(results));
         expect(props.results).toEqual(results);
         expect(props.state).toEqual(state);
+        expect(props.status).toEqual('idle');
+        expect(props.error).toEqual(undefined);
       },
     },
   });

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

@@ -731,7 +731,7 @@ exports[`default render renders correctly a sub categories selected 1`] = `
 <div class="ais-HierarchicalMenu">
   <ul class="ais-HierarchicalMenu-list ais-HierarchicalMenu-list--lvl0">
     <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected">
-      <a class="ais-HierarchicalMenu-link">
+      <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
         <span class="ais-HierarchicalMenu-label">
           Apple
         </span>
@@ -761,7 +761,7 @@ exports[`default render renders correctly a sub categories selected 1`] = `
           </a>
         </li>
         <li class="ais-HierarchicalMenu-item ais-HierarchicalMenu-item--parent ais-HierarchicalMenu-item--selected">
-          <a class="ais-HierarchicalMenu-link">
+          <a class="ais-HierarchicalMenu-link ais-HierarchicalMenu-link--selected">
             <span class="ais-HierarchicalMenu-label">
               MacBook
             </span>

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

@@ -20,5 +20,11 @@ exports[`renders explanation if no slot is used 1`] = `
   "query"
 ]
   </pre>
+  <pre>
+    status: idle
+  </pre>
+  <pre>
+    error:
+  </pre>
 </div>
 `;

package/src/mixins/__mocks__/widget.js

@@ -22,6 +22,16 @@ export const createWidgetMixin = jest.fn(() => ({
     return {
       state,
       widget,
+      instantSearchInstance: {
+        status: 'idle',
+        error: undefined,
+        addListener: () => {},
+        removeListener: () => {},
+      },
+      getParentIndex: () => ({
+        getResults: () => null,
+        getHelper: () => null,
+      }),
     };
   },
 }));

package/src/util/createInstantSearchComponent.js

@@ -30,6 +30,13 @@ export const createInstantSearchComponent = component =>
               'Please open a new issue: https://github.com/algolia/vue-instantsearch/issues/new?template=feature.md'
           );
         },
+        onStateChange() {
+          throw new Error(
+            'onStateChange configuration can not be changed dynamically at this point.' +
+              '\n\n' +
+              'Please open a new issue: https://github.com/algolia/vue-instantsearch/issues/new?template=feature.md'
+          );
+        },
         searchFunction(searchFunction) {
           // private InstantSearch.js API:
           this.instantSearchInstance._searchFunction = searchFunction;