vue-instantsearch 3.6.0 → 3.9.0

package/src/components/DynamicWidgets.js

@@ -0,0 +1,87 @@
+import { createWidgetMixin } from '../mixins/widget';
+import { EXPERIMENTAL_connectDynamicWidgets } from 'instantsearch.js/es/connectors';
+import { createSuitMixin } from '../mixins/suit';
+
+function getWidgetAttribute(vnode) {
+  const props = vnode.componentOptions && vnode.componentOptions.propsData;
+  if (props) {
+    if (props.attribute) {
+      return props.attribute;
+    }
+    if (Array.isArray(props.attributes)) {
+      return props.attributes[0];
+    }
+  }
+
+  const children =
+    vnode.componentOptions && vnode.componentOptions.children
+      ? vnode.componentOptions.children
+      : vnode.children;
+
+  if (Array.isArray(children)) {
+    // return first child with a truthy attribute
+    return children.reduce(
+      (acc, curr) => acc || getWidgetAttribute(curr),
+      undefined
+    );
+  }
+
+  return undefined;
+}
+
+export default {
+  name: 'AisExperimentalDynamicWidgets',
+  mixins: [
+    createWidgetMixin({ connector: EXPERIMENTAL_connectDynamicWidgets }),
+    createSuitMixin({ name: 'DynamicWidgets' }),
+  ],
+  props: {
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  render(createElement) {
+    const components = new Map();
+    (this.$slots.default || []).forEach(vnode => {
+      const attribute = getWidgetAttribute(vnode);
+      if (attribute) {
+        components.set(
+          attribute,
+          createElement(
+            'div',
+            { key: attribute, class: [this.suit('widget')] },
+            [vnode]
+          )
+        );
+      }
+    });
+
+    // by default, render everything, but hidden so that the routing doesn't disappear
+    if (!this.state) {
+      const allComponents = [];
+      components.forEach(component => allComponents.push(component));
+
+      return createElement(
+        'div',
+        { attrs: { hidden: true }, class: [this.suit()] },
+        allComponents
+      );
+    }
+
+    return createElement(
+      'div',
+      { class: [this.suit()] },
+      this.state.attributesToRender.map(attribute => components.get(attribute))
+    );
+  },
+  computed: {
+    widgetParams() {
+      return {
+        transformItems: this.transformItems,
+        // we do not pass "widgets" to the connector, since Vue is in charge of rendering
+        widgets: [],
+      };
+    },
+  },
+};

package/src/components/HierarchicalMenu.vue

@@ -11,6 +11,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :toggle-show-more="state.toggleShowMore"
+      :send-event="state.sendEvent"
     >
       <hierarchical-menu-list
         :items="state.items"
@@ -67,11 +68,11 @@ export default {
     },
     limit: {
       type: Number,
-      default: 10,
+      default: undefined,
     },
     showMoreLimit: {
       type: Number,
-      default: 20,
+      default: undefined,
     },
     showMore: {
       type: Boolean,
@@ -79,27 +80,23 @@ export default {
     },
     sortBy: {
       type: [Array, Function],
-      default() {
-        return ['name:asc'];
-      },
+      default: undefined,
     },
     separator: {
       type: String,
-      default: ' > ',
+      default: undefined,
     },
     rootPath: {
       type: String,
-      default: null,
+      default: undefined,
     },
     showParentLevel: {
       type: Boolean,
-      default: true,
+      default: undefined,
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   computed: {

package/src/components/Highlighter.vue

@@ -27,10 +27,22 @@ export default {
       type: String,
       default: 'mark',
     },
-    suit: { type: Function, required: true },
-    highlightProperty: { type: String, required: true },
-    preTag: { type: String, required: true },
-    postTag: { type: String, required: true },
+    suit: {
+      type: Function,
+      required: true,
+    },
+    highlightProperty: {
+      type: String,
+      required: true,
+    },
+    preTag: {
+      type: String,
+      required: true,
+    },
+    postTag: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {

package/src/components/Hits.vue

@@ -6,6 +6,7 @@
     <slot
       :items="items"
       :insights="state.insights"
+      :send-event="state.sendEvent"
     >
       <ol :class="suit('list')">
         <li
@@ -43,9 +44,7 @@ export default {
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   computed: {

package/src/components/HitsPerPage.vue

@@ -43,13 +43,10 @@ export default {
     items: {
       type: Array,
       required: true,
-      default: () => [],
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   data() {

package/src/components/InfiniteHits.vue

@@ -26,6 +26,7 @@
       :refine-next="refineNext"
       :refine="refineNext"
       :insights="state.insights"
+      :send-event="state.sendEvent"
     >
       <ol :class="suit('list')">
         <li
@@ -81,9 +82,7 @@ export default {
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
     cache: {
       type: Object,

package/src/components/InstantSearch.js

@@ -16,14 +16,14 @@ export default createInstantSearchComponent({
     },
     insightsClient: {
       type: Function,
-      required: false,
+      default: undefined,
     },
     indexName: {
       type: String,
       required: true,
     },
     routing: {
-      default: null,
+      default: undefined,
       validator(value) {
         if (
           typeof value === 'boolean' ||
@@ -39,19 +39,19 @@ export default createInstantSearchComponent({
     },
     stalledSearchDelay: {
       type: Number,
-      default: 200,
+      default: undefined,
     },
     searchFunction: {
       type: Function,
-      default: null,
+      default: undefined,
     },
     initialUiState: {
       type: Object,
-      required: false,
+      default: undefined,
     },
     apiKey: {
       type: String,
-      default: null,
+      default: undefined,
       validator(value) {
         if (value) {
           warn(oldApiWarning);
@@ -61,7 +61,7 @@ export default createInstantSearchComponent({
     },
     appId: {
       type: String,
-      default: null,
+      default: undefined,
       validator(value) {
         if (value) {
           warn(oldApiWarning);
@@ -69,6 +69,10 @@ export default createInstantSearchComponent({
         return false;
       },
     },
+    middlewares: {
+      type: Array,
+      default: null,
+    },
   },
   data() {
     return {

package/src/components/Menu.vue

@@ -11,6 +11,7 @@
       :refine="state.refine"
       :createURL="state.createURL"
       :toggle-show-more="state.toggleShowMore"
+      :send-event="state.sendEvent"
     >
       <ul :class="suit('list')">
         <li
@@ -71,11 +72,11 @@ export default {
     // },
     limit: {
       type: Number,
-      default: 10,
+      default: undefined,
     },
     showMoreLimit: {
       type: Number,
-      default: 20,
+      default: undefined,
     },
     showMore: {
       type: Boolean,
@@ -83,15 +84,11 @@ export default {
     },
     sortBy: {
       type: [Array, Function],
-      default() {
-        return ['count:desc', 'name:asc'];
-      },
+      default: undefined,
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   computed: {

package/src/components/MenuSelect.vue

@@ -8,6 +8,7 @@
       :can-refine="state.canRefine"
       :refine="refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <select
         :class="suit('select')"
@@ -62,9 +63,7 @@ export default {
     },
     sortBy: {
       type: [Array, Function],
-      default() {
-        return ['name:asc'];
-      },
+      default: undefined,
     },
     transformItems: {
       type: Function,

package/src/components/NumericMenu.vue

@@ -8,6 +8,7 @@
       :can-refine="canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <ul :class="[suit('list')]">
         <li
@@ -58,9 +59,7 @@ export default {
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   computed: {

package/src/components/Pagination.vue

@@ -182,7 +182,7 @@ export default {
   props: {
     padding: {
       type: Number,
-      default: 3,
+      default: undefined,
       validator(value) {
         return value > 0;
       },

package/src/components/QueryRuleContext.js

@@ -18,7 +18,7 @@ export default {
     transformRuleContexts: {
       type: Function,
       required: false,
-      default: ruleContexts => ruleContexts,
+      default: undefined,
     },
   },
   computed: {

package/src/components/QueryRuleCustomData.vue

@@ -36,7 +36,7 @@ export default {
     transformItems: {
       type: Function,
       required: false,
-      default: items => items,
+      default: undefined,
     },
   },
   computed: {

package/src/components/RangeInput.vue

@@ -8,6 +8,7 @@
       :refine="refine"
       :can-refine="canRefine"
       :range="state.range"
+      :send-event="state.sendEvent"
     >
       <form
         :class="suit('form')"
@@ -79,11 +80,13 @@ export default {
     min: {
       type: Number,
       required: false,
+      // @major: remove this default
       default: -Infinity,
     },
     max: {
       type: Number,
       required: false,
+      // @major: remove this default
       default: Infinity,
     },
     precision: {

package/src/components/RatingMenu.vue

@@ -7,6 +7,7 @@
       :items="state.items"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -98,7 +99,7 @@ export default {
     },
     max: {
       type: Number,
-      default: 5,
+      default: undefined,
     },
   },
   computed: {

package/src/components/RefinementList.vue

@@ -17,6 +17,7 @@
       :createURL="state.createURL"
       :is-from-search="state.isFromSearch"
       :can-refine="state.canRefine"
+      :send-event="state.sendEvent"
     >
       <div
         :class="suit('searchBox')"
@@ -121,12 +122,12 @@ export default {
     },
     searchable: {
       type: Boolean,
-      default: false,
+      default: undefined,
     },
     searchablePlaceholder: {
-      default: 'Search here…',
       type: String,
       required: false,
+      default: 'Search here…',
     },
     operator: {
       default: 'or',
@@ -137,28 +138,28 @@ export default {
     },
     limit: {
       type: Number,
-      default: 10,
       required: false,
+      default: undefined,
     },
     showMoreLimit: {
       type: Number,
-      default: 20,
       required: false,
+      default: undefined,
     },
     showMore: {
       type: Boolean,
-      default: false,
       required: false,
+      default: false,
     },
     sortBy: {
       type: [Array, Function],
-      default: () => ['isRefined', 'count:desc', 'name:asc'],
       required: false,
+      default: undefined,
     },
     transformItems: {
       type: Function,
-      default: items => items,
       required: false,
+      default: undefined,
     },
   },
   data() {

package/src/components/SortBy.vue

@@ -48,9 +48,7 @@ export default {
     },
     transformItems: {
       type: Function,
-      default(items) {
-        return items;
-      },
+      default: undefined,
     },
   },
   computed: {

package/src/components/ToggleRefinement.vue

@@ -8,6 +8,7 @@
       :can-refine="canRefine"
       :refine="state.refine"
       :createURL="state.createURL"
+      :send-event="state.sendEvent"
     >
       <label :class="suit('label')">
         <input
@@ -62,8 +63,6 @@ export default {
     off: {
       type: [String, Number, Boolean, Array],
       required: false,
-      // explicit otherwise Vue coerces the default value
-      // to false because of the `Boolean` prop type
       default: undefined,
     },
   },