vue-instantsearch 4.3.3 → 4.4.0

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+# [4.4.0](https://github.com/algolia/vue-instantsearch/compare/v4.3.3...v4.4.0) (2022-06-28)
+
+
+### Bug Fixes
+
+* **ais-hierarchical-menu:** show full hierarchical parent values ([#1126](https://github.com/algolia/vue-instantsearch/issues/1126)) ([51aadf0](https://github.com/algolia/vue-instantsearch/commit/51aadf076e7116637c2046ff903279cafc5222c7))
+* **pagination:** add page class for "page" item ([#1129](https://github.com/algolia/vue-instantsearch/issues/1129)) ([afacf8b](https://github.com/algolia/vue-instantsearch/commit/afacf8b3a9b8f3c99a15c9a31d2524f66142c67f))
+* **ssr:** allow component without mixins to be extended ([#1127](https://github.com/algolia/vue-instantsearch/issues/1127)) ([3b8b887](https://github.com/algolia/vue-instantsearch/commit/3b8b887e918b8f59d92c73b6c57bd6836a99b771))
+
+
+### Features
+
+* **core:** update instantsearch ([69a3aa8](https://github.com/algolia/vue-instantsearch/commit/69a3aa805a3e8f309d4a058c6c2a5c4534eed7ef))
+* **widgets:** pass $$widgetType ([#1121](https://github.com/algolia/vue-instantsearch/issues/1121)) ([7696acc](https://github.com/algolia/vue-instantsearch/commit/7696acc8a30c40c682f3b7df2e82803c388a377f))
+
+
+
 ## [4.3.3](https://github.com/algolia/vue-instantsearch/compare/v4.3.2...v4.3.3) (2022-02-10)
 
 

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.3.3",
+  "version": "4.4.0",
   "files": [
     "vue2",
     "vue3",
@@ -46,7 +46,7 @@
     "release": "shipjs prepare"
   },
   "dependencies": {
-    "instantsearch.js": "^4.37.2",
+    "instantsearch.js": "^4.43.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.7.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.00 kB"
+      "maxSize": "56.50 kB"
     },
     {
       "path": "./vue3/umd/index.js",
-      "maxSize": "57.00 kB"
+      "maxSize": "57.75 kB"
     },
     {
       "path": "./vue2/cjs/index.js",

package/src/__tests__/index.js

@@ -1,9 +1,24 @@
-import { isVue3, Vue2, createApp } from '../util/vue-compat';
+import {
+  isVue3,
+  isVue2,
+  Vue2,
+  createApp,
+  renderCompat,
+} from '../util/vue-compat';
 import InstantSearch from '../instantsearch';
+import { AisInstantSearch } from '../widgets';
 
 const renderlessComponents = ['AisExperimentalConfigureRelatedItems'];
+const nonWidgetComponents = [
+  'AisInstantSearch',
+  'AisInstantSearchSsr',
+  'AisHighlight',
+  'AisSnippet',
+  'AisPanel',
+  'AisPoweredBy',
+];
 
-it('should have `name` the same as the suit class name everywhere', () => {
+function getAllComponents() {
   let calls;
   if (isVue3) {
     const app = createApp();
@@ -16,37 +31,129 @@ it('should have `name` the same as the suit class name everywhere', () => {
     calls = Vue2.component.mock.calls;
   }
 
-  const allInstalledComponents = calls.filter(
-    ([installedName]) => !renderlessComponents.includes(installedName)
-  );
-  const components = allInstalledComponents.map(
-    ([installedName, { name, mixins }]) => {
-      let suitClass = `Error! ${name} is missing the suit classes`;
-
-      try {
-        suitClass = mixins
-          .find(mixin => mixin.methods && mixin.methods.suit)
-          .methods.suit();
-      } catch (e) {
-        /* no suit class, so will fail the assertions */
+  return calls.map(([installedName, call]) => {
+    const { name, mixins } = call;
+    let suitClass = `Error! ${name} is missing the suit classes`;
+    let widget = `Error! ${name} is missing the widget`;
+
+    try {
+      suitClass = mixins
+        .find(mixin => mixin.methods && mixin.methods.suit)
+        .methods.suit();
+    } catch (e) {
+      /* no suit class, so will fail the assertions */
+    }
+
+    try {
+      if (nonWidgetComponents.includes(name)) {
+        throw new Error('not a widget');
       }
 
-      return {
-        installedName,
-        name,
-        suitClass,
+      const props = {};
+      if (name === 'AisHierarchicalMenu' || name === 'AisBreadcrumb') {
+        props.attributes = ['attr'];
+      } else if (name === 'AisExperimentalConfigureRelatedItems') {
+        props.hit = {};
+        props.matchingPatterns = {};
+      } else if (name === 'AisToggleRefinement') {
+        props.attribute = 'attr';
+        props.label = 'label';
+        props.value = 'value';
+      } else if (name === 'AisSortBy') {
+        props.items = [];
+      } else if (name === 'AisNumericMenu') {
+        props.items = [{ label: 'start', start: 1 }];
+        props.attribute = 'attr';
+      } else if (name === 'AisHitsPerPage') {
+        props.items = [{ default: true, label: 'ten', value: 10 }];
+      } else if (name === 'AisQueryRuleContext') {
+        props.trackedFilters = {};
+      } else if (name === 'AisIndex') {
+        props.indexName = 'indexName';
+      } else {
+        props.attribute = 'attr';
+      }
+
+      const Component = {
+        render: renderCompat(h =>
+          h(
+            AisInstantSearch,
+            {
+              props: {
+                indexName: 'instant_search',
+                searchClient: {
+                  search() {
+                    return new Promise({ results: [] });
+                  },
+                },
+              },
+            },
+            [
+              h(call, {
+                props,
+                ref: 'widgetComponent',
+              }),
+            ]
+          )
+        ),
       };
+
+      let vm;
+      if (isVue2) {
+        vm = new Vue2(Component).$mount();
+      } else if (isVue3) {
+        vm = createApp(Component).mount(document.createElement('div'));
+      }
+      widget = vm.$refs.widgetComponent.widget;
+    } catch (e) {
+      /* no widget, so will fail the assertions */
+    }
+
+    return {
+      installedName,
+      name,
+      suitClass,
+      widget,
+    };
+  });
+}
+
+const components = getAllComponents();
+
+describe('DOM component', () => {
+  test.each(
+    components.filter(
+      ({ name }) => renderlessComponents.includes(name) === false
+    )
+  )(
+    '$name should have the same `name` as suit class',
+    ({ name, installedName, suitClass }) => {
+      expect(installedName).toBe(name);
+      if (name === 'AisInstantSearchSsr') {
+        expect(suitClass).toBe(`ais-InstantSearch`);
+      } else if (name === 'AisExperimentalDynamicWidgets') {
+        expect(suitClass).toBe(`ais-DynamicWidgets`);
+      } else {
+        expect(suitClass).toBe(`ais-${name.substr(3)}`);
+      }
     }
   );
+});
 
-  components.forEach(({ name, installedName, suitClass }) => {
-    expect(installedName).toBe(name);
-    if (name === 'AisInstantSearchSsr') {
-      expect(suitClass).toBe(`ais-InstantSearch`);
-    } else if (name === 'AisExperimentalDynamicWidgets') {
-      expect(suitClass).toBe(`ais-DynamicWidgets`);
+describe('installed widget', () => {
+  test.each(
+    components.filter(
+      ({ name }) => nonWidgetComponents.includes(name) === false
+    )
+  )('sets widgetType $name', ({ name, widget }) => {
+    if (name === 'AisExperimentalDynamicWidgets') {
+      expect(widget.$$widgetType).toBe('ais.dynamicWidgets');
+    } else if (name === 'AisExperimentalConfigureRelatedItems') {
+      expect(widget.$$widgetType).toBe('ais.configureRelatedItems');
     } else {
-      expect(suitClass).toBe(`ais-${name.substr(3)}`);
+      expect(widget.$$widgetType).toBe(
+        `ais.${name[3].toLowerCase()}${name.substr(4)}`
+      );
     }
   });
 });

package/src/components/Autocomplete.vue

@@ -28,7 +28,14 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisAutocomplete',
   mixins: [
-    createWidgetMixin({ connector: connectAutocomplete }),
+    createWidgetMixin(
+      {
+        connector: connectAutocomplete,
+      },
+      {
+        $$widgetType: 'ais.autocomplete',
+      }
+    ),
     createSuitMixin({ name: 'Autocomplete' }),
   ],
   props: {

package/src/components/Breadcrumb.vue

@@ -56,7 +56,14 @@ import { createWidgetMixin } from '../mixins/widget';
 export default {
   name: 'AisBreadcrumb',
   mixins: [
-    createWidgetMixin({ connector: connectBreadcrumb }),
+    createWidgetMixin(
+      {
+        connector: connectBreadcrumb,
+      },
+      {
+        $$widgetType: 'ais.breadcrumb',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => Boolean(state.canRefine),
     }),

package/src/components/ClearRefinements.vue

@@ -29,7 +29,14 @@ import { createWidgetMixin } from '../mixins/widget';
 export default {
   name: 'AisClearRefinements',
   mixins: [
-    createWidgetMixin({ connector: connectClearRefinements }),
+    createWidgetMixin(
+      {
+        connector: connectClearRefinements,
+      },
+      {
+        $$widgetType: 'ais.clearRefinements',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => Boolean(state.hasRefinements),
     }),

package/src/components/Configure.js

@@ -8,7 +8,14 @@ export default {
   name: 'AisConfigure',
   mixins: [
     createSuitMixin({ name: 'Configure' }),
-    createWidgetMixin({ connector: connectConfigure }),
+    createWidgetMixin(
+      {
+        connector: connectConfigure,
+      },
+      {
+        $$widgetType: 'ais.configure',
+      }
+    ),
   ],
   computed: {
     widgetParams() {

package/src/components/ConfigureRelatedItems.js

@@ -5,7 +5,14 @@ export default {
   inheritAttrs: false,
   name: 'AisExperimentalConfigureRelatedItems',
   mixins: [
-    createWidgetMixin({ connector: EXPERIMENTAL_connectConfigureRelatedItems }),
+    createWidgetMixin(
+      {
+        connector: EXPERIMENTAL_connectConfigureRelatedItems,
+      },
+      {
+        $$widgetType: 'ais.configureRelatedItems',
+      }
+    ),
   ],
   props: {
     hit: {

package/src/components/CurrentRefinements.vue

@@ -63,7 +63,14 @@ export default {
   name: 'AisCurrentRefinements',
   mixins: [
     createSuitMixin({ name: 'CurrentRefinements' }),
-    createWidgetMixin({ connector: connectCurrentRefinements }),
+    createWidgetMixin(
+      {
+        connector: connectCurrentRefinements,
+      },
+      {
+        $$widgetType: 'ais.currentRefinements',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state =>
         Boolean(state.items) && state.items.length > 0,

package/src/components/DynamicWidgets.js

@@ -42,7 +42,14 @@ function getWidgetAttribute(vnode) {
 export default {
   name: 'AisDynamicWidgets',
   mixins: [
-    createWidgetMixin({ connector: connectDynamicWidgets }),
+    createWidgetMixin(
+      {
+        connector: connectDynamicWidgets,
+      },
+      {
+        $$widgetType: 'ais.dynamicWidgets',
+      }
+    ),
     createSuitMixin({ name: 'DynamicWidgets' }),
   ],
   props: {

package/src/components/HierarchicalMenu.vue

@@ -53,7 +53,14 @@ export default {
   name: 'AisHierarchicalMenu',
   mixins: [
     createSuitMixin({ name: 'HierarchicalMenu' }),
-    createWidgetMixin({ connector: connectHierarchicalMenu }),
+    createWidgetMixin(
+      {
+        connector: connectHierarchicalMenu,
+      },
+      {
+        $$widgetType: 'ais.hierarchicalMenu',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine,
     }),

package/src/components/Hits.vue

@@ -34,7 +34,14 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisHits',
   mixins: [
-    createWidgetMixin({ connector: connectHitsWithInsights }),
+    createWidgetMixin(
+      {
+        connector: connectHitsWithInsights,
+      },
+      {
+        $$widgetType: 'ais.hits',
+      }
+    ),
     createSuitMixin({ name: 'Hits' }),
   ],
   props: {

package/src/components/HitsPerPage.vue

@@ -34,7 +34,14 @@ export default {
   name: 'AisHitsPerPage',
   mixins: [
     createSuitMixin({ name: 'HitsPerPage' }),
-    createWidgetMixin({ connector: connectHitsPerPage }),
+    createWidgetMixin(
+      {
+        connector: connectHitsPerPage,
+      },
+      {
+        $$widgetType: 'ais.hitsPerPage',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => state.hasNoResults === false,
     }),

package/src/components/Index.js

@@ -10,7 +10,12 @@ export default {
   name: 'AisIndex',
   mixins: [
     createSuitMixin({ name: 'Index' }),
-    createWidgetMixin({ connector: connectIndex }),
+    createWidgetMixin(
+      { connector: connectIndex },
+      {
+        $$widgetType: 'ais.index',
+      }
+    ),
   ],
   provide() {
     return {

package/src/components/InfiniteHits.vue

@@ -68,7 +68,14 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisInfiniteHits',
   mixins: [
-    createWidgetMixin({ connector: connectInfiniteHitsWithInsights }),
+    createWidgetMixin(
+      {
+        connector: connectInfiniteHitsWithInsights,
+      },
+      {
+        $$widgetType: 'ais.infiniteHits',
+      }
+    ),
     createSuitMixin({ name: 'InfiniteHits' }),
   ],
   props: {

package/src/components/Menu.vue

@@ -55,7 +55,12 @@ export default {
   name: 'AisMenu',
   mixins: [
     createSuitMixin({ name: 'Menu' }),
-    createWidgetMixin({ connector: connectMenu }),
+    createWidgetMixin(
+      { connector: connectMenu },
+      {
+        $$widgetType: 'ais.menu',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => Boolean(state.canRefine),
     }),

package/src/components/MenuSelect.vue

@@ -47,7 +47,12 @@ export default {
   name: 'AisMenuSelect',
   mixins: [
     createSuitMixin({ name: 'MenuSelect' }),
-    createWidgetMixin({ connector: connectMenu }),
+    createWidgetMixin(
+      { connector: connectMenu },
+      {
+        $$widgetType: 'ais.menuSelect',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => Boolean(state.canRefine),
     }),

package/src/components/NumericMenu.vue

@@ -42,7 +42,14 @@ import { createSuitMixin } from '../mixins/suit';
 export default {
   name: 'AisNumericMenu',
   mixins: [
-    createWidgetMixin({ connector: connectNumericMenu }),
+    createWidgetMixin(
+      {
+        connector: connectNumericMenu,
+      },
+      {
+        $$widgetType: 'ais.numericMenu',
+      }
+    ),
     createSuitMixin({ name: 'NumericMenu' }),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => state.hasNoResults === false,

package/src/components/Pagination.vue

@@ -78,6 +78,7 @@
         <li
           :class="{
             [suit('item')]: true,
+            [suit('item', 'page')]: true,
             [suit('item', 'selected')]: state.currentRefinement === page
           }"
           v-for="page in state.pages"
@@ -174,7 +175,14 @@ export default {
   name: 'AisPagination',
   mixins: [
     createSuitMixin({ name: 'Pagination' }),
-    createWidgetMixin({ connector: connectPagination }),
+    createWidgetMixin(
+      {
+        connector: connectPagination,
+      },
+      {
+        $$widgetType: 'ais.pagination',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => state.nbPages > 1,
     }),

package/src/components/QueryRuleContext.js

@@ -6,9 +6,14 @@ export default {
   name: 'AisQueryRuleContext',
   mixins: [
     createSuitMixin({ name: 'QueryRuleContext' }),
-    createWidgetMixin({
-      connector: connectQueryRules,
-    }),
+    createWidgetMixin(
+      {
+        connector: connectQueryRules,
+      },
+      {
+        $$widgetType: 'ais.queryRuleContext',
+      }
+    ),
   ],
   props: {
     trackedFilters: {

package/src/components/QueryRuleCustomData.vue

@@ -28,9 +28,14 @@ export default {
   name: 'AisQueryRuleCustomData',
   mixins: [
     createSuitMixin({ name: 'QueryRuleCustomData' }),
-    createWidgetMixin({
-      connector: connectQueryRules,
-    }),
+    createWidgetMixin(
+      {
+        connector: connectQueryRules,
+      },
+      {
+        $$widgetType: 'ais.queryRuleCustomData',
+      }
+    ),
   ],
   props: {
     transformItems: {

package/src/components/RangeInput.vue

@@ -67,7 +67,14 @@ export default {
   name: 'AisRangeInput',
   mixins: [
     createSuitMixin({ name: 'RangeInput' }),
-    createWidgetMixin({ connector: connectRange }),
+    createWidgetMixin(
+      {
+        connector: connectRange,
+      },
+      {
+        $$widgetType: 'ais.rangeInput',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine,
     }),

package/src/components/RatingMenu.vue

@@ -87,7 +87,14 @@ export default {
   name: 'AisRatingMenu',
   mixins: [
     createSuitMixin({ name: 'RatingMenu' }),
-    createWidgetMixin({ connector: connectRatingMenu }),
+    createWidgetMixin(
+      {
+        connector: connectRatingMenu,
+      },
+      {
+        $$widgetType: 'ais.ratingMenu',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => state.hasNoResults === false,
     }),

package/src/components/RefinementList.vue

@@ -110,7 +110,14 @@ export default {
   components: { SearchInput, AisHighlight },
   mixins: [
     createSuitMixin({ name: 'RefinementList' }),
-    createWidgetMixin({ connector: connectRefinementList }),
+    createWidgetMixin(
+      {
+        connector: connectRefinementList,
+      },
+      {
+        $$widgetType: 'ais.refinementList',
+      }
+    ),
     createPanelConsumerMixin({
       mapStateToCanRefine: state => Boolean(state.canRefine),
     }),

package/src/components/RelevantSort.vue

@@ -36,7 +36,14 @@ export default {
   name: 'AisRelevantSort',
   mixins: [
     createSuitMixin({ name: 'RelevantSort' }),
-    createWidgetMixin({ connector: connectRelevantSort }),
+    createWidgetMixin(
+      {
+        connector: connectRelevantSort,
+      },
+      {
+        $$widgetType: 'ais.relevantSort',
+      }
+    ),
   ],
   methods: {
     refine() {

package/src/components/SearchBox.vue

@@ -77,7 +77,14 @@ import SearchInput from './SearchInput.vue';
 export default {
   name: 'AisSearchBox',
   mixins: [
-    createWidgetMixin({ connector: connectSearchBox }),
+    createWidgetMixin(
+      {
+        connector: connectSearchBox,
+      },
+      {
+        $$widgetType: 'ais.searchBox',
+      }
+    ),
     createSuitMixin({ name: 'SearchBox' }),
   ],
   components: {

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: {