vue-instantsearch 4.7.0 → 4.7.2

package/README.md

@@ -1,3 +1,15 @@
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+**Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
+
+- [Vue InstantSearch](#vue-instantsearch)
+- [Documentation](#documentation)
+- [Installation](#installation)
+- [Troubleshooting](#troubleshooting)
+- [Contributing, dev, release](#contributing-dev-release)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+
 [![Vue InstantSearch logo][logo]][website]
 
 InstantSearch projects: **Vue InstantSearch**
@@ -41,9 +53,9 @@ Encountering an issue? Before reaching out to support, we recommend heading to o
 
 We welcome all contributors, from casual to regular. You are only
 one command away to start the developer environment,
-[read our CONTRIBUTING guide](.github/CONTRIBUTING.md).
+[read our CONTRIBUTING guide](CONTRIBUTING.md).
 
-[logo]: .github/vue-instantsearch-readme.png
+[logo]: vue-instantsearch-readme.png
 [website]: https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/vue/
 [getting-started-guide]: https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue/
 [algolia-website]: https://www.algolia.com/

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "files": [
     "vue2",
     "vue3",
@@ -25,28 +25,17 @@
   "main": "vue2/cjs",
   "module": "vue2/es",
   "sideEffects": false,
-  "repository": "https://github.com/algolia/vue-instantsearch",
+  "repository": "https://github.com/algolia/instantsearch.js",
   "scripts": {
     "prebuild": "rm -rf vue2 vue3",
     "build": "rollup -c",
-    "storybook": "start-storybook -p 9001 -c .storybook",
-    "storybook:build": "build-storybook -c .storybook -o website/stories",
-    "examples:build": "yarn build && ./examples/build.sh",
-    "website:build": "yarn storybook:build && yarn examples:build && ./scripts/clean-node-modules.sh",
-    "test": "jest",
-    "test:build": "yarn build && bundlesize",
-    "test:update": "jest --updateSnapshot",
-    "test:watch": "jest --watch",
-    "test:e2e": "yarn test:e2e:local",
-    "test:e2e:local": "wdio wdio.local.conf.js",
-    "test:e2e:saucelabs": "wdio wdio.saucelabs.conf.js",
-    "lint": "eslint --ext .js,.vue .",
-    "lint:fix": "eslint --ext .js,.vue . --fix",
-    "format": "prettier --write '**/*.{js,md,vue,css}'",
-    "release": "shipjs prepare"
+    "storybook": "start-storybook -p 6006 -c .storybook",
+    "storybook:build": "build-storybook -c .storybook -o ../../website/stories/vue",
+    "test:exports": "node ./test/module/vue2/is-es-module.mjs && node ./test/module/vue2/is-cjs-module.cjs",
+    "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs"
   },
   "dependencies": {
-    "instantsearch.js": "^4.47.0",
+    "instantsearch.js": "^4.49.4",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -64,45 +53,15 @@
     }
   },
   "devDependencies": {
-    "@babel/core": "^7.17.0",
-    "@storybook/addon-actions": "3.4.11",
-    "@storybook/addon-knobs": "3.4.11",
-    "@storybook/addon-options": "3.4.11",
-    "@storybook/vue": "3.4.11",
-    "@vue/compiler-sfc": "3.0.11",
-    "@vue/test-utils": "1.2.1",
+    "@babel/core": "7.15.5",
+    "@storybook/vue": "5.3.9",
+    "@vue/compiler-sfc": "3.1.2",
+    "@vue/server-renderer": "3.1.2",
+    "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
-    "@wdio/cli": "^5.11.13",
-    "@wdio/jasmine-framework": "^5.11.0",
-    "@wdio/junit-reporter": "^5.11.7",
-    "@wdio/local-runner": "^5.11.13",
-    "@wdio/sauce-service": "^5.11.1",
-    "@wdio/selenium-standalone-service": "^5.11.2",
-    "@wdio/spec-reporter": "^5.11.7",
-    "@wdio/static-server-service": "^5.11.0",
-    "algoliasearch": "4.0.1",
-    "algoliasearch-helper": "^3.10.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "babel-preset-es2015": "6.24.1",
-    "bundlesize": "0.17.1",
-    "concurrently": "4.1.0",
-    "conventional-changelog-cli": "2.0.12",
-    "eslint": "5.14.1",
-    "eslint-config-algolia": "13.2.3",
-    "eslint-config-prettier": "3.1.0",
-    "eslint-plugin-import": "2.16.0",
-    "eslint-plugin-jest": "22.3.0",
-    "eslint-plugin-prettier": "3.0.0",
-    "eslint-plugin-vue": "4.7.1",
-    "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v2.0.2",
-    "instantsearch.css": "7.3.1",
-    "jest": "23.6.0",
-    "jest-serializer-html": "7.1.0",
-    "jest-vue-preprocessor": "1.4.0",
-    "jest-watch-typeahead": "0.2.1",
-    "lodash": "4.17.19",
-    "prettier": "1.14.3",
+    "algoliasearch": "4.14.3",
+    "algoliasearch-helper": "3.11.2",
+    "instantsearch.css": "8.0.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-buble": "0.19.6",
@@ -112,62 +71,19 @@
     "rollup-plugin-node-resolve": "5.2.0",
     "rollup-plugin-replace": "2.1.0",
     "rollup-plugin-terser": "4.0.4",
-    "rollup-plugin-vue2": "npm:rollup-plugin-vue@3.0.0",
+    "rollup-plugin-vue2": "npm:rollup-plugin-vue@4.3.2",
     "rollup-plugin-vue3": "npm:rollup-plugin-vue@6.0.0",
-    "rollup-watch": "4.3.1",
-    "shipjs": "0.20.0-beta.3",
-    "vue": "2.6.0",
+    "vue": "2.7.14",
     "vue-autosuggest": "1.8.1",
-    "vue-jest": "2.6.0",
-    "vue-json-tree": "0.3.3",
     "vue-loader": "14.2.2",
     "vue-router": "3.4.3",
     "vue-router4": "npm:vue-router@4.0.0",
-    "vue-server-renderer": "^2.6.11",
+    "vue-server-renderer": "2.7.14",
     "vue-slider-component": "3.0.15",
-    "vue-template-compiler": "2.6.0",
+    "vue-template-compiler": "2.7.14",
     "vuetify": "1.5.3",
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "bundlesize": [
-    {
-      "path": "./vue2/umd/index.js",
-      "maxSize": "57.25 kB"
-    },
-    {
-      "path": "./vue3/umd/index.js",
-      "maxSize": "58.25 kB"
-    },
-    {
-      "path": "./vue2/cjs/index.js",
-      "maxSize": "17.00 kB"
-    },
-    {
-      "path": "./vue3/cjs/index.js",
-      "maxSize": "18.50 kB"
-    }
-  ],
-  "resolutions": {
-    "brotli-size": "4.0.0"
-  },
-  "jest": {
-    "setupTestFrameworkScriptFile": "./jest.setup.js",
-    "moduleFileExtensions": [
-      "js",
-      "vue"
-    ],
-    "transformIgnorePatterns": [
-      "node_modules/(?!(instantsearch\\.js|vue-json-tree))"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest",
-      "^.+\\.vue$": "vue-jest"
-    },
-    "testURL": "https://example.com",
-    "watchPlugins": [
-      "jest-watch-typeahead/filename",
-      "jest-watch-typeahead/testname"
-    ]
-  }
+  "gitHead": "4c473604508a865a2488e064fdd3a415f416d14a"
 }

package/src/__tests__/index.js

@@ -1,3 +1,9 @@
+/**
+ * @jest-environment jsdom
+ */
+
+/* eslint-disable jest/no-conditional-expect */
+
 import {
   isVue3,
   isVue2,
@@ -5,6 +11,7 @@ import {
   createApp,
   renderCompat,
 } from '../util/vue-compat';
+import { mount } from '../../test/utils';
 import InstantSearch from '../instantsearch';
 import { AisInstantSearch } from '../widgets';
 
@@ -39,7 +46,7 @@ function getAllComponents() {
 
     try {
       suitClass = mixins
-        .find(mixin => mixin.methods && mixin.methods.suit)
+        .find((mixin) => mixin.methods && mixin.methods.suit)
         .methods.suit();
     } catch (e) {
       /* no suit class, so will fail the assertions */
@@ -76,7 +83,7 @@ function getAllComponents() {
       }
 
       const Component = {
-        render: renderCompat(h =>
+        render: renderCompat((h) =>
           h(
             AisInstantSearch,
             {
@@ -101,10 +108,12 @@ function getAllComponents() {
 
       let vm;
       if (isVue2) {
-        vm = new Vue2(Component).$mount();
+        const wrapper = mount(Component);
+        vm = wrapper.vm;
       } else if (isVue3) {
         vm = createApp(Component).mount(document.createElement('div'));
       }
+
       widget = vm.$refs.widgetComponent.widget;
     } catch (e) {
       /* no widget, so will fail the assertions */

package/src/components/Autocomplete.vue

@@ -1,14 +1,13 @@
 <template>
-  <div
-    :class="suit()"
-    v-if="state"
-  >
+  <div :class="suit()" v-if="state">
     <slot
       :refine="state.refine"
       :current-refinement="state.currentRefinement"
       :indices="state.indices"
     >
-      <p>This widget doesn't render anything without a filled in default slot.</p>
+      <p>
+        This widget doesn't render anything without a filled in default slot.
+      </p>
       <p>query, function to refine and results are provided.</p>
       <pre>refine: Function</pre>
       <pre>currentRefinement: "{{ state.currentRefinement }}"</pre>

package/src/components/Breadcrumb.vue

@@ -10,7 +10,12 @@
       :createURL="state.createURL"
     >
       <ul :class="suit('list')">
-        <li :class="[suit('item'), !state.items.length && suit('item', 'selected')]">
+        <li
+          :class="[
+            suit('item'),
+            !state.items.length && suit('item', 'selected'),
+          ]"
+        >
           <a
             v-if="Boolean(state.items.length)"
             :href="state.createURL()"
@@ -28,10 +33,7 @@
           :key="item.label"
           :class="[suit('item'), isLastItem(index) && suit('item', 'selected')]"
         >
-          <span
-            :class="suit('separator')"
-            aria-hidden="true"
-          >
+          <span :class="suit('separator')" aria-hidden="true">
             <slot name="separator">></slot>
           </span>
           <a
@@ -39,7 +41,8 @@
             :href="state.createURL(item.value)"
             :class="suit('link')"
             @click.prevent="state.refine(item.value)"
-          >{{ item.label }}</a>
+            >{{ item.label }}</a
+          >
           <span v-else>{{ item.label }}</span>
         </li>
       </ul>

package/src/components/ClearRefinements.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="state"
-    :class="suit()"
-  >
+  <div v-if="state" :class="suit()">
     <slot
       :can-refine="canRefine"
       :refine="state.refine"
@@ -14,7 +11,7 @@
         :disabled="!canRefine"
         @click.prevent="state.refine"
       >
-        <slot name="resetLabel">Clear refinements</slot>
+        <slot name="resetLabel"> Clear refinements </slot>
       </button>
     </slot>
   </div>

package/src/components/Configure.js

@@ -24,7 +24,7 @@ export default {
       };
     },
   },
-  render: renderCompat(function(h) {
+  render: renderCompat(function (h) {
     const slot = isVue3 ? this.$slots.default : this.$scopedSlots.default;
 
     if (!this.state || !slot) {

package/src/components/CurrentRefinements.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    :class="[suit(), noRefinement && suit('','noRefinement')]"
-    v-if="state"
-  >
+  <div :class="[suit(), noRefinement && suit('', 'noRefinement')]" v-if="state">
     <slot
       :refine="state.refine"
       :items="state.items"
@@ -33,7 +30,9 @@
                 :createURL="state.createURL"
               >
                 <span :class="suit('categoryLabel')">
-                  <q v-if="refinement.attribute === 'query'">{{ refinement.label }}</q>
+                  <q v-if="refinement.attribute === 'query'">{{
+                    refinement.label
+                  }}</q>
                   <template v-else>
                     {{ refinement.label }}
                   </template>
@@ -106,10 +105,8 @@ export default {
     capitalize(value) {
       if (!value) return '';
       return (
-        value
-          .toString()
-          .charAt(0)
-          .toLocaleUpperCase() + value.toString().slice(1)
+        value.toString().charAt(0).toLocaleUpperCase() +
+        value.toString().slice(1)
       );
     },
   },

package/src/components/DynamicWidgets.js

@@ -66,10 +66,10 @@ export default {
       default: undefined,
     },
   },
-  render: renderCompat(function(h) {
+  render: renderCompat(function (h) {
     const components = new Map();
 
-    (getDefaultSlot(this) || []).forEach(vnode => {
+    (getDefaultSlot(this) || []).forEach((vnode) => {
       const attribute = getWidgetAttribute(vnode);
       if (attribute) {
         components.set(
@@ -82,7 +82,7 @@ export default {
     // by default, render everything, but hidden so that the routing doesn't disappear
     if (!this.state) {
       const allComponents = [];
-      components.forEach(component => allComponents.push(component));
+      components.forEach((component) => allComponents.push(component));
 
       return h(
         'div',
@@ -99,7 +99,9 @@ export default {
     return h(
       'div',
       { class: [this.suit()] },
-      this.state.attributesToRender.map(attribute => components.get(attribute))
+      this.state.attributesToRender.map((attribute) =>
+        components.get(attribute)
+      )
     );
   }),
   computed: {

package/src/components/HierarchicalMenu.vue

@@ -25,15 +25,14 @@
         v-if="showMore"
         :class="[
           suit('showMore'),
-          !state.canToggleShowMore && suit('showMore', 'disabled')
+          !state.canToggleShowMore && suit('showMore', 'disabled'),
         ]"
         :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore"
       >
-        <slot
-          name="showMoreLabel"
-          :is-showing-more="state.isShowingMore"
-        >{{ state.isShowingMore ? 'Show less' : 'Show more' }}</slot>
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
+          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
+        </slot>
       </button>
     </slot>
   </div>

package/src/components/HierarchicalMenuList.vue

@@ -3,7 +3,7 @@
     :class="[
       suit('list'),
       level > 0 && suit('list', 'child'),
-      suit('list', `lvl${level}`)
+      suit('list', `lvl${level}`),
     ]"
   >
     <li
@@ -12,15 +12,12 @@
       :class="[
         suit('item'),
         item.data && suit('item', 'parent'),
-        item.isRefined && suit('item', 'selected')
+        item.isRefined && suit('item', 'selected'),
       ]"
     >
       <a
         :href="createURL(item.value)"
-        :class="[
-          suit('link'),
-          item.isRefined && suit('link', 'selected')
-        ]"
+        :class="[suit('link'), item.isRefined && suit('link', 'selected')]"
         @click.prevent="refine(item.value)"
       >
         <span :class="suit('label')">{{ item.label }}</span>

package/src/components/Highlighter.vue

@@ -5,22 +5,21 @@
       :class="[isHighlighted && suit('highlighted')]"
       :key="index"
       :is="isHighlighted ? highlightedTagName : TextNode"
-    >{{ value }}</component>
+      >{{ value }}</component
+    >
   </span>
 </template>
 
 <script>
-import { isVue3 } from '../util/vue-compat';
+import { getDefaultSlot, renderCompat, isVue3 } from '../util/vue-compat';
 import { parseAlgoliaHit } from '../util/parseAlgoliaHit';
 
 const TextNode = isVue3
   ? (props, context) => context.slots.default()
   : {
-      functional: true,
-      render(createElement, context) {
-        const slots = context.slots();
-        return slots.default;
-      },
+      render: renderCompat(function () {
+        return getDefaultSlot(this);
+      }),
     };
 
 export default {

package/src/components/Hits.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    v-if="state"
-    :class="suit()"
-  >
+  <div v-if="state" :class="suit()">
     <slot
       :items="items"
       :insights="state.insights"
@@ -19,7 +16,9 @@
             :item="item"
             :index="itemIndex"
             :insights="state.insights"
-          >objectID: {{ item.objectID }}, index: {{ itemIndex }}</slot>
+          >
+            objectID: {{ item.objectID }}, index: {{ itemIndex }}
+          </slot>
         </li>
       </ol>
     </slot>

package/src/components/HitsPerPage.vue

@@ -1,25 +1,20 @@
 <template>
-  <div
-    v-if="state"
-    :class="suit()"
-  >
+  <div v-if="state" :class="suit()">
     <slot
       :items="state.items"
       :refine="state.refine"
-      :hasNoResults="state.hasNoResults"
-      :canRefine="state.canRefine"
+      :has-no-results="state.hasNoResults"
+      :can-refine="state.canRefine"
     >
-      <select
-        :class="suit('select')"
-        v-model="selected"
-        @change="handleChange"
-      >
+      <select :class="suit('select')" v-model="selected" @change="handleChange">
         <option
           v-for="item in state.items"
           :key="item.value"
           :class="suit('option')"
           :value="item.value"
-        >{{ item.label }}</option>
+        >
+          {{ item.label }}
+        </option>
       </select>
     </slot>
   </div>
@@ -57,7 +52,7 @@ export default {
   },
   data() {
     return {
-      selected: this.items.find(item => item.default === true).value,
+      selected: this.items.find((item) => item.default === true).value,
     };
   },
   computed: {

package/src/components/Index.js

@@ -34,7 +34,7 @@ export default {
       required: false,
     },
   },
-  render: renderCompat(function(h) {
+  render: renderCompat(function (h) {
     return h('div', {}, getDefaultSlot(this));
   }),
   computed: {

package/src/components/InfiniteHits.vue

@@ -1,9 +1,5 @@
 <template>
-  <div
-    v-if="state"
-    :class="suit()"
-  >
-
+  <div v-if="state" :class="suit()">
     <slot
       v-if="showPrevious"
       name="loadPrevious"
@@ -12,10 +8,15 @@
       :is-first-page="state.isFirstPage"
     >
       <button
-        :class="[suit('loadPrevious'), state.isFirstPage && suit('loadPrevious', 'disabled')]"
+        :class="[
+          suit('loadPrevious'),
+          state.isFirstPage && suit('loadPrevious', 'disabled'),
+        ]"
         :disabled="state.isFirstPage"
         @click="refinePrevious()"
-      >Show previous results</button>
+      >
+        Show previous results
+      </button>
     </slot>
 
     <slot
@@ -39,7 +40,9 @@
             :item="item"
             :index="index"
             :insights="state.insights"
-          >objectID: {{ item.objectID }}, index: {{ index }}</slot>
+          >
+            objectID: {{ item.objectID }}, index: {{ index }}
+          </slot>
         </li>
       </ol>
 
@@ -51,10 +54,15 @@
         :is-last-page="state.isLastPage"
       >
         <button
-          :class="[suit('loadMore'), state.isLastPage && suit('loadMore', 'disabled')]"
+          :class="[
+            suit('loadMore'),
+            state.isLastPage && suit('loadMore', 'disabled'),
+          ]"
           :disabled="state.isLastPage"
           @click="refineNext()"
-        >Show more results</button>
+        >
+          Show more results
+        </button>
       </slot>
     </slot>
   </div>

package/src/components/InstantSearch.js

@@ -93,7 +93,7 @@ export default createInstantSearchComponent({
       }),
     };
   },
-  render: renderCompat(function(h) {
+  render: renderCompat(function (h) {
     return h(
       'div',
       {

package/src/components/InstantSearchSsr.js

@@ -15,7 +15,7 @@ export default createInstantSearchComponent({
       instantSearchInstance: this.$_ais_ssrInstantSearchInstance,
     };
   },
-  render: renderCompat(function(h) {
+  render: renderCompat(function (h) {
     return h(
       'div',
       {

package/src/components/Menu.vue

@@ -32,14 +32,16 @@
 
       <button
         v-if="showShowMoreButton"
-        :class="[suit('showMore'), !state.canToggleShowMore && suit('showMore', 'disabled')]"
+        :class="[
+          suit('showMore'),
+          !state.canToggleShowMore && suit('showMore', 'disabled'),
+        ]"
         :disabled="!state.canToggleShowMore"
         @click.prevent="state.toggleShowMore()"
       >
-        <slot
-          name="showMoreLabel"
-          :is-showing-more="state.isShowingMore"
-        >{{ state.isShowingMore ? 'Show less' : 'Show more' }}</slot>
+        <slot name="showMoreLabel" :is-showing-more="state.isShowingMore">
+          {{ state.isShowingMore ? 'Show less' : 'Show more' }}
+        </slot>
       </button>
     </slot>
   </div>