vue-instantsearch 4.18.1 → 4.19.1

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.18.1",
+  "version": "4.19.1",
   "files": [
     "vue2",
     "vue3",
@@ -36,8 +36,8 @@
     "watch:es": "yarn --silent build --watch"
   },
   "dependencies": {
-    "instantsearch-ui-components": "0.7.0",
-    "instantsearch.js": "4.73.1",
+    "instantsearch-ui-components": "0.8.0",
+    "instantsearch.js": "4.73.3",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -62,8 +62,8 @@
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
     "algoliasearch": "4.23.2",
-    "algoliasearch-helper": "3.22.2",
-    "instantsearch.css": "8.3.0",
+    "algoliasearch-helper": "3.22.3",
+    "instantsearch.css": "8.4.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
     "rollup-plugin-buble": "0.19.6",
@@ -89,5 +89,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "45dae35640d80a10e371990d653be2ec65e35ed8"
+  "gitHead": "86b33c675f38136d4ef3479891edc21338614b40"
 }

package/src/__tests__/common-widgets.test.js

@@ -589,12 +589,8 @@ const testOptions = {
   createBreadcrumbWidgetTests: undefined,
   createMenuWidgetTests: undefined,
   createPaginationWidgetTests: undefined,
-  createInfiniteHitsWidgetTests: {
-    skippedTests: { 'banner option': true },
-  },
-  createHitsWidgetTests: {
-    skippedTests: { 'banner option': true },
-  },
+  createInfiniteHitsWidgetTests: undefined,
+  createHitsWidgetTests: undefined,
   createRangeInputWidgetTests: undefined,
   createRatingMenuWidgetTests: undefined,
   createInstantSearchWidgetTests: undefined,

package/src/components/Hits.js

@@ -19,6 +19,10 @@ export default {
     createSuitMixin({ name: 'Hits' }),
   ],
   props: {
+    showBanner: {
+      type: Boolean,
+      default: true,
+    },
     escapeHTML: {
       type: Boolean,
       default: true,
@@ -31,6 +35,7 @@ export default {
   computed: {
     widgetParams() {
       return {
+        showBanner: this.showBanner,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,
       };
@@ -43,6 +48,7 @@ export default {
 
     const defaultSlot = getScopedSlot(this, 'default');
     const itemSlot = getScopedSlot(this, 'item');
+    const bannerSlot = getScopedSlot(this, 'banner');
 
     const itemComponent = ({
       hit,
@@ -78,7 +84,7 @@ export default {
 
     // We only want to render the default slot
     // if no other slots are defined
-    if (!itemSlot && defaultSlot) {
+    if (!itemSlot && !bannerSlot && defaultSlot) {
       return h(
         'div',
         {
@@ -88,6 +94,7 @@ export default {
         },
         [
           defaultSlot({
+            banner: this.state.banner,
             items: this.state.items,
             insights: this.state.insights,
             sendEvent: this.state.sendEvent,
@@ -99,11 +106,16 @@ export default {
     return h(createHitsComponent({ createElement: h }), {
       hits: this.state.items,
       itemComponent,
+      banner: this.showBanner ? this.state.banner : undefined,
+      bannerComponent: bannerSlot,
       sendEvent: this.state.sendEvent,
       classNames: this.classNames && {
         root: this.classNames['ais-Hits'],
         list: this.classNames['ais-Hits-list'],
         item: this.classNames['ais-Hits-item'],
+        bannerRoot: this.classNames['ais-Hits-banner'],
+        bannerImage: this.classNames['ais-Hits-banner-image'],
+        bannerLink: this.classNames['ais-Hits-banner-link'],
       },
     });
   }),

package/src/components/InfiniteHits.vue

@@ -22,6 +22,7 @@
     <slot
       :items="state.items"
       :results="state.results"
+      :banner="state.banner"
       :is-last-page="state.isLastPage"
       :refine-previous="refinePrevious"
       :refine-next="refineNext"
@@ -29,6 +30,32 @@
       :insights="state.insights"
       :send-event="state.sendEvent"
     >
+      <template
+        v-if="showBanner && state.banner && state.banner.image.urls[0].url"
+      >
+        <slot name="banner" :banner="state.banner">
+          <aside :class="suit('banner')">
+            <a
+              v-if="state.banner.link"
+              :href="state.banner.link.url"
+              :target="state.banner.link.target"
+              :class="suit('banner-link')"
+            >
+              <img
+                :src="state.banner.image.urls[0].url"
+                :alt="state.banner.image.title"
+                :class="suit('banner-image')"
+              />
+            </a>
+            <img
+              v-else
+              :src="state.banner.image.urls[0].url"
+              :alt="state.banner.image.title"
+              :class="suit('banner-image')"
+            />
+          </aside>
+        </slot>
+      </template>
       <ol :class="suit('list')">
         <li
           v-for="(item, index) in state.items"
@@ -91,6 +118,10 @@ export default {
     createSuitMixin({ name: 'InfiniteHits' }),
   ],
   props: {
+    showBanner: {
+      type: Boolean,
+      default: true,
+    },
     showPrevious: {
       type: Boolean,
       default: false,
@@ -111,6 +142,7 @@ export default {
   computed: {
     widgetParams() {
       return {
+        showBanner: this.showBanner,
         showPrevious: this.showPrevious,
         escapeHTML: this.escapeHTML,
         transformItems: this.transformItems,

package/src/components/__tests__/Hits.js

@@ -14,6 +14,20 @@ const defaultState = {
   sendEvent: jest.fn(),
 };
 
+it('accepts a showBanner prop', () => {
+  __setState({
+    ...defaultState,
+  });
+
+  const wrapper = mount(Hits, {
+    propsData: {
+      showBanner: true,
+    },
+  });
+
+  expect(wrapper.vm.widgetParams.showBanner).toBe(true);
+});
+
 it('accepts an escapeHTML prop', () => {
   __setState({
     ...defaultState,
@@ -28,6 +42,37 @@ it('accepts an escapeHTML prop', () => {
   expect(wrapper.vm.widgetParams.escapeHTML).toBe(true);
 });
 
+it('exposes banner prop to the banner slot', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+    },
+  });
+
+  const wrapper = mount(
+    {
+      components: { Hits },
+      template: `
+      <Hits>
+        <template v-slot:banner="{ banner }">
+          <img :src=banner.image.urls[0].url />
+        </template>
+      </Hits>
+    `,
+    },
+    {
+      propsData: {
+        showBanner: true,
+      },
+    }
+  );
+  const img = wrapper.find('img');
+  expect(img.attributes('src')).toBe('https://via.placeholder.com/550x250');
+});
+
 it('exposes insights prop to the default slot', async () => {
   const insights = jest.fn();
   __setState({

package/src/components/__tests__/InfiniteHits.js

@@ -11,6 +11,7 @@ jest.mock('../../mixins/widget');
 
 const defaultState = {
   widgetParams: {
+    showBanner: true,
     showPrevious: false,
     escapeHTML: true,
     transformItems: (items) => items,
@@ -86,6 +87,79 @@ it('renders correctly with a custom item rendering', () => {
   expect(wrapper.html()).toMatchSnapshot();
 });
 
+it('renders correctly with banner data', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `<InfiniteHits />`,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+it('renders correctly with banner data and custom banner rendering', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `
+      <InfiniteHits>
+        <template v-slot:banner="{ banner }">
+          <img :src="banner.image.urls[0].url" />
+        </template>
+      </InfiniteHits>
+    `,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+it('does not render a banner when showBanner is false', () => {
+  __setState({
+    ...defaultState,
+    banner: {
+      image: {
+        urls: [{ url: 'https://via.placeholder.com/550x250' }],
+      },
+      link: {
+        url: 'https://www.algolia.com',
+      },
+    },
+    widgetParams: {
+      ...defaultState.widgetParams,
+      showBanner: false,
+    },
+  });
+
+  const wrapper = mount({
+    components: { InfiniteHits },
+    template: `<InfiniteHits />`,
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
 it('exposes insights prop to the default slot', async () => {
   const insights = jest.fn();
 

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

@@ -1,5 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`does not render a banner when showBanner is false 1`] = `
+<div class="ais-InfiniteHits">
+  <aside class="ais-InfiniteHits-banner">
+    <a class="ais-InfiniteHits-banner-link"
+       href="https://www.algolia.com"
+    >
+      <img class="ais-InfiniteHits-banner-image"
+           src="https://via.placeholder.com/550x250"
+      >
+    </a>
+  </aside>
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;
+
 exports[`renders correctly with a custom item rendering 1`] = `
 <div class="ais-InfiniteHits">
   <ol class="ais-InfiniteHits-list">
@@ -56,3 +90,63 @@ exports[`renders correctly with a custom rendering 1`] = `
   </div>
 </div>
 `;
+
+exports[`renders correctly with banner data 1`] = `
+<div class="ais-InfiniteHits">
+  <aside class="ais-InfiniteHits-banner">
+    <a class="ais-InfiniteHits-banner-link"
+       href="https://www.algolia.com"
+    >
+      <img class="ais-InfiniteHits-banner-image"
+           src="https://via.placeholder.com/550x250"
+      >
+    </a>
+  </aside>
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;
+
+exports[`renders correctly with banner data and custom banner rendering 1`] = `
+<div class="ais-InfiniteHits">
+  <img src="https://via.placeholder.com/550x250">
+  <ol class="ais-InfiniteHits-list">
+    <li class="ais-InfiniteHits-item">
+      objectID: 00001, index: 0
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00002, index: 1
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00003, index: 2
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00004, index: 3
+    </li>
+    <li class="ais-InfiniteHits-item">
+      objectID: 00005, index: 4
+    </li>
+  </ol>
+  <button class="ais-InfiniteHits-loadMore">
+    Show more results
+  </button>
+</div>
+`;

package/src/util/__tests__/createServerRootMixin.test.js

@@ -315,10 +315,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
               });
 
               expect(state.hello).toEqual({
-                requestParams: {
-                  hitsPerPage: 100,
-                  query: '',
-                },
+                requestParams: [
+                  {
+                    hitsPerPage: 100,
+                    query: '',
+                  },
+                ],
                 results: [
                   {
                     query: '',
@@ -342,10 +344,12 @@ See documentation: https://www.algolia.com/doc/api-reference/widgets/instantsear
 
               // Parent's widgets state should not be merged into nested index state
               expect(state.nestedIndex).toEqual({
-                requestParams: {
-                  hitsPerPage: 100,
-                  query: '',
-                },
+                requestParams: [
+                  {
+                    hitsPerPage: 100,
+                    query: '',
+                  },
+                ],
                 results: [
                   {
                     query: '',

package/src/util/__tests__/renderCompat.test.js

@@ -0,0 +1,52 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { mount } from '../../../test/utils';
+import { renderCompat } from '../vue-compat';
+
+describe('renderCompat', () => {
+  it('should handle function components that return multiple children', () => {
+    const wrapper = mount({
+      render: renderCompat((h) => {
+        function Component({ text }) {
+          return h(
+            'div',
+            { attrs: { 'data-text': text } },
+            h('span', {}, ['1']),
+            h('span', {}, '2')
+          );
+        }
+        return h(Component, { text: 'Hello world' });
+      }),
+    });
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      <div data-text="Hello world">
+        <span>
+          1
+        </span>
+        <span>
+          2
+        </span>
+      </div>
+    `);
+  });
+
+  it('should map props to attrs when using a HTML tag', () => {
+    const wrapper = mount({
+      render: renderCompat((h) => {
+        return h('img', {
+          src: 'http://algolia.com/image.png',
+          alt: 'Some image',
+        });
+      }),
+    });
+
+    expect(wrapper.html()).toMatchInlineSnapshot(`
+      <img src="http://algolia.com/image.png"
+           alt="Some image"
+      >
+    `);
+  });
+});

package/src/util/vue-compat/index-vue2.js

@@ -21,6 +21,23 @@ const augmentCreateElement =
       );
     }
 
+    if (typeof tag === 'string') {
+      const { on, style, attrs, domProps, nativeOn, key, ...rest } = props;
+      return createElement(
+        tag,
+        {
+          class: className || props.class,
+          attrs: attrs || rest,
+          on,
+          nativeOn,
+          style,
+          domProps,
+          key,
+        },
+        children
+      );
+    }
+
     return createElement(
       tag,
       Object.assign(props, { class: className || props.class }),