vue-instantsearch 4.13.8 → 4.15.0

package/package.json

@@ -16,7 +16,7 @@
     "autocomplete"
   ],
   "license": "MIT",
-  "version": "4.13.8",
+  "version": "4.15.0",
   "files": [
     "vue2",
     "vue3",
@@ -32,10 +32,12 @@
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006 -c .storybook",
     "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider 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"
+    "test:exports:vue3": "node ./test/module/vue3/is-es-module.mjs && node ./test/module/vue3/is-cjs-module.cjs",
+    "watch:es": "yarn --silent build --watch"
   },
   "dependencies": {
-    "instantsearch.js": "4.65.0",
+    "instantsearch-ui-components": "0.4.0",
+    "instantsearch.js": "4.66.1",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
@@ -59,8 +61,8 @@
     "@vue/server-renderer": "3.2.47",
     "@vue/test-utils": "1.3.0",
     "@vue/test-utils2": "npm:@vue/test-utils@2.0.0-rc.11",
-    "algoliasearch": "4.14.3",
-    "algoliasearch-helper": "3.16.2",
+    "algoliasearch": "4.22.1",
+    "algoliasearch-helper": "3.17.0",
     "instantsearch.css": "8.1.0",
     "rollup": "1.32.1",
     "rollup-plugin-babel": "4.4.0",
@@ -87,5 +89,5 @@
     "vuex": "3.5.1",
     "vuex4": "npm:vuex@4.0.0"
   },
-  "gitHead": "084aff3d29e15cea8125076c46fb753c83d4dcad"
+  "gitHead": "d309ca3333476a842be080fcb01b8be925aad204"
 }

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

@@ -25,6 +25,7 @@ import {
   AisSortBy,
   AisStats,
   AisRatingMenu,
+  AisNumericMenu,
 } from '../instantsearch';
 import { renderCompat } from '../util/vue-compat';
 
@@ -421,6 +422,21 @@ const testSetups = {
 
     await nextTick();
   },
+  async createNumericMenuWidgetTests({ instantSearchOptions, widgetParams }) {
+    mountApp(
+      {
+        render: renderCompat((h) =>
+          h(AisInstantSearch, { props: instantSearchOptions }, [
+            h(AisNumericMenu, { props: widgetParams }),
+            h(GlobalErrorSwallower),
+          ])
+        ),
+      },
+      document.body.appendChild(document.createElement('div'))
+    );
+
+    await nextTick();
+  },
   async createToggleRefinementWidgetTests({
     instantSearchOptions,
     widgetParams,

package/src/components/Highlight.vue

@@ -12,8 +12,7 @@
 
 <script>
 import { createSuitMixin } from '../mixins/suit';
-
-import AisHighlighter from './Highlighter.vue';
+import AisHighlighter from '../util/vue-compat/Highlighter';
 
 export default {
   name: 'AisHighlight',

package/src/components/Highlighter.js

@@ -0,0 +1,69 @@
+import { createHighlightComponent } from 'instantsearch-ui-components';
+import {
+  getHighlightedParts,
+  getPropertyByPath,
+  unescape,
+} from 'instantsearch.js/es/lib/utils';
+
+import { createElement, Fragment } from '../util/pragma';
+
+const Highlight = createHighlightComponent({ createElement, Fragment });
+
+export default {
+  name: 'AisHighlighter',
+  props: {
+    hit: {
+      type: Object,
+      required: true,
+    },
+    attribute: {
+      type: String,
+      required: true,
+    },
+    highlightedTagName: {
+      type: String,
+      default: 'mark',
+    },
+    suit: {
+      type: Function,
+      required: true,
+    },
+    highlightProperty: {
+      type: String,
+      required: true,
+    },
+    preTag: {
+      type: String,
+      required: true,
+    },
+    postTag: {
+      type: String,
+      required: true,
+    },
+  },
+  render() {
+    const property =
+      getPropertyByPath(this.hit[this.highlightProperty], this.attribute) || [];
+    const properties = Array.isArray(property) ? property : [property];
+
+    const parts = properties.map((singleValue) =>
+      getHighlightedParts(unescape(singleValue.value || '')).map(
+        ({ value, isHighlighted }) => ({
+          // We have to do this because Vue gets rid of TextNodes with a single white space
+          value: value === ' ' ? '  ' : value,
+          isHighlighted,
+        })
+      )
+    );
+
+    return createElement(Highlight, {
+      classNames: {
+        root: this.suit(),
+        highlighted: this.suit('highlighted'),
+      },
+      highlightedTagName: this.highlightedTagName,
+      nonHighlightedTagName: Fragment,
+      parts,
+    });
+  },
+};

package/src/components/Hits.js

@@ -0,0 +1,113 @@
+import { createHitsComponent } from 'instantsearch-ui-components';
+import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
+
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { getScopedSlot, renderCompat } from '../util/vue-compat';
+
+export default {
+  name: 'AisHits',
+  mixins: [
+    createWidgetMixin(
+      {
+        connector: connectHitsWithInsights,
+      },
+      {
+        $$widgetType: 'ais.hits',
+      }
+    ),
+    createSuitMixin({ name: 'Hits' }),
+  ],
+  props: {
+    escapeHTML: {
+      type: Boolean,
+      default: true,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    items() {
+      return this.state.hits;
+    },
+    widgetParams() {
+      return {
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) {
+      return null;
+    }
+
+    const defaultSlot = getScopedSlot(this, 'default');
+    const itemSlot = getScopedSlot(this, 'item');
+
+    const itemComponent = ({
+      hit,
+      index,
+      onClick,
+      onAuxClick,
+      // We don't want to pass the Preact key as a prop
+      key: _key,
+      ...rootProps
+    }) => {
+      return h(
+        'li',
+        {
+          key: hit.objectID,
+          attrs: rootProps,
+          on: {
+            click: onClick,
+            auxclick: onAuxClick,
+          },
+        },
+        [
+          (itemSlot &&
+            itemSlot({
+              item: hit,
+              index,
+              insights: this.state.insights,
+              sendEvent: this.state.sendEvent,
+            })) ||
+            `objectID: ${hit.objectID}, index: ${index}`,
+        ]
+      );
+    };
+
+    // We only want to render the default slot
+    // if no other slots are defined
+    if (!itemSlot && defaultSlot) {
+      return h(
+        'div',
+        {
+          attrs: {
+            class: this.suit(),
+          },
+        },
+        [
+          defaultSlot({
+            items: this.state.hits,
+            insights: this.state.insights,
+            sendEvent: this.state.sendEvent,
+          }),
+        ]
+      );
+    }
+
+    return h(createHitsComponent({ createElement: h }), {
+      hits: this.state.hits,
+      itemComponent,
+      sendEvent: this.state.sendEvent,
+      classNames: this.classNames && {
+        root: this.classNames['ais-Hits'],
+        list: this.classNames['ais-Hits-list'],
+        item: this.classNames['ais-Hits-item'],
+      },
+    });
+  }),
+};

package/src/components/RefinementList.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    :class="[suit(), !state.canRefine && suit('', 'noRefinement')]"
+    :class="[suit(), items.length === 0 && suit('', 'noRefinement')]"
     v-if="state"
   >
     <slot
@@ -19,6 +19,7 @@
       <div :class="suit('searchBox')" v-if="searchable">
         <search-input
           v-model="searchForFacetValues"
+          :show-loading-indicator="true"
           :placeholder="searchablePlaceholder"
           :class-names="classNames"
         />
@@ -30,7 +31,7 @@
       >
         <div :class="suit('noResults')">No results.</div>
       </slot>
-      <ul :class="suit('list')">
+      <ul v-if="items.length > 0" :class="suit('list')">
         <li
           :class="[suit('item'), item.isRefined && suit('item', 'selected')]"
           v-for="item in items"

package/src/components/SearchInput.vue

@@ -47,7 +47,6 @@
         </svg>
       </slot>
     </button>
-
     <button
       type="reset"
       :title="resetTitle"

package/src/components/Snippet.vue

@@ -12,8 +12,7 @@
 
 <script>
 import { createSuitMixin } from '../mixins/suit';
-
-import AisHighlighter from './Highlighter.vue';
+import AisHighlighter from '../util/vue-compat/Highlighter';
 
 export default {
   name: 'AisSnippet',

package/src/components/__tests__/Hits.js

@@ -4,7 +4,7 @@
 
 import { mount } from '../../../test/utils';
 import { __setState } from '../../mixins/widget';
-import Hits from '../Hits.vue';
+import Hits from '../Hits';
 import '../../../test/utils/sortedHtmlSerializer';
 
 jest.mock('../../mixins/widget');

package/src/components/__tests__/NumericMenu.js

@@ -62,57 +62,6 @@ const defaultProps = {
   ],
 };
 
-it('accepts an attribute prop', () => {
-  __setState(defaultState);
-
-  const props = {
-    ...defaultProps,
-  };
-
-  const wrapper = mount(NumericMenu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.attribute).toBe('brand');
-});
-
-it('accepts an items prop', () => {
-  __setState(defaultState);
-
-  const props = {
-    ...defaultProps,
-  };
-
-  const wrapper = mount(NumericMenu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.items).toEqual([
-    { label: 'All' },
-    { label: '<= 10$', end: 10 },
-    { label: '10$ - 100$', start: 10, end: 100 },
-    { label: '100$ - 500$', start: 100, end: 500 },
-    { label: '>= 500$', start: 500 },
-  ]);
-});
-
-it('accepts an transformItems prop', () => {
-  __setState(defaultState);
-
-  const identity = (x) => x;
-
-  const props = {
-    ...defaultProps,
-    transformItems: identity,
-  };
-
-  const wrapper = mount(NumericMenu, {
-    propsData: props,
-  });
-
-  expect(wrapper.vm.widgetParams.transformItems).toBe(identity);
-});
-
 describe('default render', () => {
   it('renders correctly', () => {
     __setState(defaultState);

package/src/util/pragma.js

@@ -0,0 +1,22 @@
+import { h, Fragment } from 'vue';
+
+export const createElement = (tag, props, children) => {
+  if (!children) {
+    return h(tag, props);
+  }
+
+  if (tag === Fragment) {
+    return h(tag, Array.isArray(children) ? children : [children]);
+  }
+
+  // It does work to just pass a string but outputs a warning about performance issues
+  const newChildren =
+    typeof children === 'string' ? { default: () => children } : children;
+  // Passing a `children` prop to a DOM element outputs a warning
+  const newProps =
+    typeof tag === 'string' ? props : Object.assign(props, { children });
+
+  return h(tag, newProps, newChildren);
+};
+
+export { Fragment };

package/src/{components/Highlighter.vue → util/vue-compat/Highlighter/Highlighter-vue2.vue}

@@ -11,16 +11,13 @@
 </template>
 
 <script>
-import { parseAlgoliaHit } from '../util/parseAlgoliaHit';
-import { getDefaultSlot, renderCompat, isVue3 } from '../util/vue-compat';
+import { parseAlgoliaHit } from '../../parseAlgoliaHit';
 
-const TextNode = isVue3
-  ? (props, context) => context.slots.default()
-  : {
-      render: renderCompat(function () {
-        return getDefaultSlot(this);
-      }),
-    };
+const TextNode = {
+  render() {
+    return this.$slots.default;
+  },
+};
 
 export default {
   name: 'AisHighlighter',

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

@@ -0,0 +1 @@
+export { default } from './Highlighter-vue2.vue';

package/src/util/vue-compat/Highlighter/index-vue3.js

@@ -0,0 +1 @@
+export { default } from '../../../components/Highlighter';

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

@@ -0,0 +1 @@
+export { default } from './index-vue2';

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

@@ -7,9 +7,30 @@ const version = Vue.version;
 
 export { Vue, Vue2, isVue2, isVue3, version };
 
+const augmentCreateElement =
+  (createElement) =>
+  (tag, propsWithClassName = {}, children) => {
+    const { className, ...props } = propsWithClassName;
+
+    if (typeof tag === 'function') {
+      return tag(
+        Object.assign(props, {
+          class: className || props.class,
+          children,
+        })
+      );
+    }
+
+    return createElement(
+      tag,
+      Object.assign(props, { class: className || props.class }),
+      [children]
+    );
+  };
+
 export function renderCompat(fn) {
   return function (createElement) {
-    return fn.call(this, createElement);
+    return fn.call(this, augmentCreateElement(createElement));
   };
 }
 
@@ -17,6 +38,10 @@ export function getDefaultSlot(component) {
   return component.$slots.default;
 }
 
+export function getScopedSlot(component, name) {
+  return (component.$scopedSlots || {})[name];
+}
+
 // Vue3-only APIs
 export const computed = undefined;
 export const createApp = undefined;

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

@@ -30,6 +30,9 @@ export function renderCompat(fn) {
       delete flatProps.props;
       delete flatProps.scopedSlots;
       onPropKeys.forEach((key) => delete flatProps.on[key]);
+      if (flatProps.on && Object.keys(flatProps.on).length === 0) {
+        delete flatProps.on;
+      }
 
       return Vue.h(
         tag,
@@ -59,3 +62,7 @@ export function getDefaultSlot(component) {
   // Vue 3 with @vue/compat
   return $slots.default;
 }
+
+export function getScopedSlot(component, name) {
+  return (component.$slots || component.slots || {})[name];
+}

package/src/widgets.js

@@ -6,7 +6,7 @@ export { default as AisExperimentalConfigureRelatedItems } from './components/Co
 export { default as AisCurrentRefinements } from './components/CurrentRefinements.vue';
 export { default as AisHierarchicalMenu } from './components/HierarchicalMenu.vue';
 export { default as AisHighlight } from './components/Highlight.vue';
-export { default as AisHits } from './components/Hits.vue';
+export { default as AisHits } from './components/Hits';
 export { default as AisHitsPerPage } from './components/HitsPerPage.vue';
 export { default as AisIndex } from './components/Index';
 export { default as AisInstantSearch } from './components/InstantSearch';