vue-instantsearch 4.8.7 → 4.8.9

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.8.7",
+  "version": "4.8.9",
   "files": [
     "vue2",
     "vue3",
@@ -35,7 +35,7 @@
     "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "4.52.0",
+    "instantsearch.js": "4.54.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -85,5 +85,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "24ab56e4b18d69cc68919f994f8d8a3f1c880d33"
+  "gitHead": "419aa9869727dceeb49dfc5289a0b9241e0e5827"
 }

package/src/components/SearchInput.vue

@@ -38,6 +38,7 @@
     >
       <slot name="submit-icon">
         <svg
+          aria-hidden="true"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
           width="10"
@@ -64,10 +65,10 @@
     >
       <slot name="reset-icon">
         <svg
+          aria-hidden="true"
           role="img"
           xmlns="http://www.w3.org/2000/svg"
-          width="1em"
-          height="1em"
+          style="width: 1em; height: 1em"
           viewBox="0 0 20 20"
           :class="suit('resetIcon')"
         >

package/src/components/__tests__/InstantSearch.js

@@ -2,6 +2,7 @@
  * @jest-environment jsdom
  */
 
+import { createAlgoliaSearchClient } from '@instantsearch/mocks';
 import { isVue3, version as vueVersion } from '../../util/vue-compat';
 import { mount, nextTick } from '../../../test/utils';
 import instantsearch from 'instantsearch.js/es';
@@ -177,6 +178,37 @@ it('Allows a change in `search-client`', async () => {
   expect(helper.search).toHaveBeenCalledTimes(1);
 });
 
+it('warns when the `search-client` changes', async () => {
+  const wrapper = mount(InstantSearch, {
+    propsData: {
+      searchClient: createAlgoliaSearchClient({}),
+      indexName: 'indexName',
+    },
+  });
+
+  const newClient = createAlgoliaSearchClient({});
+
+  await wrapper.setProps({ searchClient: newClient });
+
+  expect(warn).toHaveBeenCalledWith(
+    false,
+    'The `search-client` prop of `<ais-instant-search>` changed between renders, which may cause more search requests than necessary. If this is an unwanted behavior, please provide a stable reference: https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-search-client'
+  );
+});
+
+it('does not warn when the `search-client` does not change', async () => {
+  const wrapper = mount(InstantSearch, {
+    propsData: {
+      searchClient: createAlgoliaSearchClient({}),
+      indexName: 'indexName',
+    },
+  });
+
+  await wrapper.setProps({ indexName: 'indexName2' });
+
+  expect(warn).not.toHaveBeenCalled();
+});
+
 it('Allows a change in `search-function`', async () => {
   const oldValue = () => {};
   const newValue = () => {};

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

@@ -23,7 +23,8 @@ exports[`allows search bar classes override when it's searchable 1`] = `
               title="Search"
               type="submit"
       >
-        <svg class="ais-SearchBox-submitIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-submitIcon"
              height="10"
              role="img"
              viewbox="0 0 40 40"
@@ -41,11 +42,11 @@ exports[`allows search bar classes override when it's searchable 1`] = `
               title="Clear"
               type="reset"
       >
-        <svg class="ais-SearchBox-resetIcon"
-             height="1em"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-resetIcon"
              role="img"
+             style="width: 1em; height: 1em;"
              viewbox="0 0 20 20"
-             width="1em"
              xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"
@@ -281,7 +282,8 @@ exports[`renders correctly when it's searchable 1`] = `
               title="Search"
               type="submit"
       >
-        <svg class="ais-SearchBox-submitIcon"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-submitIcon"
              height="10"
              role="img"
              viewbox="0 0 40 40"
@@ -299,11 +301,11 @@ exports[`renders correctly when it's searchable 1`] = `
               title="Clear"
               type="reset"
       >
-        <svg class="ais-SearchBox-resetIcon"
-             height="1em"
+        <svg aria-hidden="true"
+             class="ais-SearchBox-resetIcon"
              role="img"
+             style="width: 1em; height: 1em;"
              viewbox="0 0 20 20"
-             width="1em"
              xmlns="http://www.w3.org/2000/svg"
         >
           <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"

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

@@ -22,7 +22,8 @@ exports[`renders HTML correctly 1`] = `
             title="Search"
             type="submit"
     >
-      <svg class="ais-SearchBox-submitIcon"
+      <svg aria-hidden="true"
+           class="ais-SearchBox-submitIcon"
            height="10"
            role="img"
            viewbox="0 0 40 40"
@@ -40,11 +41,11 @@ exports[`renders HTML correctly 1`] = `
             title="Clear"
             type="reset"
     >
-      <svg class="ais-SearchBox-resetIcon"
-           height="1em"
+      <svg aria-hidden="true"
+           class="ais-SearchBox-resetIcon"
            role="img"
+           style="width: 1em; height: 1em;"
            viewbox="0 0 20 20"
-           width="1em"
            xmlns="http://www.w3.org/2000/svg"
       >
         <path d="M8.114 10L.944 2.83 0 1.885 1.886 0l.943.943L10 8.113l7.17-7.17.944-.943L20 1.886l-.943.943-7.17 7.17 7.17 7.17.943.944L18.114 20l-.943-.943-7.17-7.17-7.17 7.17-.944.943L0 18.114l.943-.943L8.113 10z"

package/src/util/createInstantSearchComponent.js

@@ -2,6 +2,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 './vue-compat';
+import { warn } from './warn';
 
 export const createInstantSearchComponent = (component) =>
   _objectSpread(
@@ -14,6 +15,11 @@ export const createInstantSearchComponent = (component) =>
       },
       watch: {
         searchClient(searchClient) {
+          warn(
+            false,
+            'The `search-client` prop of `<ais-instant-search>` changed between renders, which may cause more search requests than necessary. If this is an unwanted behavior, please provide a stable reference: https://www.algolia.com/doc/api-reference/widgets/instantsearch/vue/#widget-param-search-client'
+          );
+
           this.instantSearchInstance.helper.setClient(searchClient).search();
         },
         indexName(indexName) {