Merge branch 'develop' into test/e2e

.circleci/config.yml

@@ -23,7 +23,7 @@ aliases:
 defaults: &defaults
   working_directory: ~/instantsearchjs
   docker:
-    - image: circleci/node:8.15.1@sha256:ef1a0c468510c5f3de8fe9dbccb7dfaf29d7e21086e7db2bb59cdc811b30ae80
+    - image: circleci/node:8.16.1@sha256:b8afd692a39511825ad59010cb5f472a5eeac9d4cbea7a9bcac4a2cd77dbf2a2
 
 version: 2
 jobs:

.nvmrc

@@ -1 +1 @@
-8.16.0
+8.16.1

examples/e-commerce/src/ui.ts

@@ -1,9 +1,9 @@
-const filtersButtons = [
-  ...document.querySelectorAll('[data-action="open-overlay"]'),
-];
-const closeOverlayButtons = [
-  ...document.querySelectorAll('[data-action="close-overlay"]'),
-];
+const filtersButtons = Array.prototype.slice.call(
+  document.querySelectorAll('[data-action="open-overlay"]')
+);
+const closeOverlayButtons = Array.prototype.slice.call(
+  document.querySelectorAll('[data-action="close-overlay"]')
+);
 const header = document.querySelector('#header');
 const resultsContainer = document.querySelector('.container-results');
 

examples/e-commerce/src/widgets/HitsPerPage.ts

@@ -24,7 +24,7 @@ export const hitsPerPage = hitsPerPageWidget({
 export function getFallbackHitsPerPageRoutingValue(
   hitsPerPageValue: string
 ): string | undefined {
-  if (items.map(item => item.value).includes(Number(hitsPerPageValue))) {
+  if (items.map(item => item.value).indexOf(Number(hitsPerPageValue)) !== -1) {
     return hitsPerPageValue;
   }
 

examples/e-commerce/src/widgets/SortBy.ts

@@ -24,7 +24,7 @@ export const sortBy = sortByWidget({
 export function getFallbackSortByRoutingValue(
   sortByValue: string
 ): string | undefined {
-  if (items.map(item => item.value).includes(sortByValue)) {
+  if (items.map(item => item.value).indexOf(sortByValue) !== -1) {
     return sortByValue;
   }
 

package.json

@@ -68,9 +68,9 @@
     "@babel/preset-env": "7.5.5",
     "@babel/preset-react": "7.0.0",
     "@babel/preset-typescript": "7.3.3",
-    "@storybook/addon-actions": "5.1.10",
-    "@storybook/html": "5.1.10",
-    "@storybook/theming": "5.1.10",
+    "@storybook/addon-actions": "5.1.11",
+    "@storybook/html": "5.1.11",
+    "@storybook/theming": "5.1.11",
     "@types/algoliasearch-helper": "2.26.1",
     "@types/classnames": "^2.2.7",
     "@types/enzyme": "^3.1.15",
@@ -92,7 +92,7 @@
     "@wdio/static-server-service": "5.11.0",
     "algoliasearch": "3.33.0",
     "babel-eslint": "10.0.2",
-    "babel-jest": "24.8.0",
+    "babel-jest": "24.9.0",
     "babel-loader": "8.0.6",
     "babel-plugin-inline-replace-variables": "1.3.1",
     "babel-plugin-module-resolver": "3.2.0",
@@ -112,14 +112,14 @@
     "eslint-import-resolver-webpack": "0.11.1",
     "eslint-plugin-import": "2.18.2",
     "eslint-plugin-jasmine": "2.10.1",
-    "eslint-plugin-jest": "22.15.0",
+    "eslint-plugin-jest": "22.15.1",
     "eslint-plugin-prettier": "3.1.0",
     "eslint-plugin-react": "7.14.3",
     "inquirer": "6.5.1",
     "instantsearch-e2e-tests": "algolia/instantsearch-e2e-tests#v1.0.0",
-    "jest": "24.8.0",
-    "jest-diff": "24.8.0",
-    "jest-environment-jsdom": "24.8.0",
+    "jest": "24.9.0",
+    "jest-diff": "24.9.0",
+    "jest-environment-jsdom": "24.9.0",
     "jest-environment-jsdom-global": "1.2.0",
     "jest-watch-typeahead": "0.3.1",
     "jsdom-global": "3.0.2",
@@ -138,7 +138,7 @@
     "semver": "6.3.0",
     "shelljs": "0.8.3",
     "typescript": "3.5.3",
-    "webpack": "4.39.1"
+    "webpack": "4.39.2"
   },
   "bundlesize": [
     {

src/connectors/infinite-hits/connectInfiniteHits.ts

@@ -50,61 +50,6 @@ const withUsage = createDocumentationMessageGenerator({
   connector: true,
 });
 
-/**
- * @typedef {Object} InfiniteHitsRenderingOptions
- * @property {Array<Object>} hits The aggregated matched hits from Algolia API of all pages.
- * @property {Object} results The complete results response from Algolia API.
- * @property {function} showMore Loads the next page of hits.
- * @property {boolean} isLastPage Indicates if the last page of hits has been reached.
- * @property {Object} widgetParams All original widget options forwarded to the `renderFn`.
- */
-
-/**
- * @typedef {Object} CustomInfiniteHitsWidgetOptions
- * @property {boolean} [escapeHTML = true] Whether to escape HTML tags from `hits[i]._highlightResult`.
- * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
- */
-
-/**
- * **InfiniteHits** connector provides the logic to create custom widgets that will render an continuous list of results retrieved from Algolia.
- *
- * This connector provides a `InfiniteHitsRenderingOptions.showMore()` function to load next page of matched results.
- * @type {Connector}
- * @param {function(InfiniteHitsRenderingOptions, boolean)} renderFn Rendering function for the custom **InfiniteHits** widget.
- * @param {function} unmountFn Unmount function called when the widget is disposed.
- * @return {function(CustomInfiniteHitsWidgetOptions)} Re-usable widget factory for a custom **InfiniteHits** widget.
- * @example
- * // custom `renderFn` to render the custom InfiniteHits widget
- * function renderFn(InfiniteHitsRenderingOptions, isFirstRendering) {
- *   if (isFirstRendering) {
- *     InfiniteHitsRenderingOptions.widgetParams.containerNode
- *       .html('<div id="hits"></div><button id="show-more">Load more</button>');
- *
- *     InfiniteHitsRenderingOptions.widgetParams.containerNode
- *       .find('#show-more')
- *       .on('click', function(event) {
- *         event.preventDefault();
- *         InfiniteHitsRenderingOptions.showMore();
- *       });
- *   }
- *
- *   InfiniteHitsRenderingOptions.widgetParams.containerNode.find('#hits').html(
- *     InfiniteHitsRenderingOptions.hits.map(function(hit) {
- *       return '<div>' + hit._highlightResult.name.value + '</div>';
- *     })
- *   );
- * };
- *
- * // connect `renderFn` to InfiniteHits logic
- * var customInfiniteHits = instantsearch.connectors.connectInfiniteHits(renderFn);
- *
- * // mount widget on the page
- * search.addWidget(
- *   customInfiniteHits({
- *     containerNode: $('#custom-infinite-hits-container'),
- *   })
- * );
- */
 const connectInfiniteHits: InfiniteHitsConnector = (
   renderFn,
   unmountFn = noop

src/types/widget.ts

@@ -111,6 +111,6 @@ export type WidgetFactory<TWidgetParams> = (
   widgetParams: TWidgetParams
 ) => Widget;
 
-export type Template<TTemplateItem> =
+export type Template<TTemplateData = void> =
   | string
-  | ((item: TTemplateItem) => string);
+  | ((data: TTemplateData) => string);

src/widgets/infinite-hits/infinite-hits.tsx

@@ -19,6 +19,7 @@ import {
   Template,
   Hit,
   InsightsClientWrapper,
+  SearchResults,
 } from '../../types';
 
 const withUsage = createDocumentationMessageGenerator({
@@ -28,32 +29,91 @@ const suit = component('InfiniteHits');
 const InfiniteHitsWithInsightsListener = withInsightsListener(InfiniteHits);
 
 export type InfiniteHitsCSSClasses = {
+  /**
+   * The root element of the widget.
+   */
   root: string | string[];
+  /**
+   * The root container without results.
+   */
   emptyRoot: string | string[];
-  item: string | string[];
+  /**
+   * The list of results.
+   */
   list: string | string[];
+  /**
+   * The list item.
+   */
+  item: string | string[];
+  /**
+   * The “Show previous” button.
+   */
   loadPrevious: string | string[];
+  /**
+   * The disabled “Show previous” button.
+   */
   disabledLoadPrevious: string | string[];
+  /**
+   * The “Show more” button.
+   */
   loadMore: string | string[];
+  /**
+   * The disabled “Show more” button.
+   */
   disabledLoadMore: string | string[];
 };
 
 export type InfiniteHitsTemplates = {
-  empty: Template<void>;
-  showPreviousText: Template<void>;
-  showMoreText: Template<void>;
+  /**
+   * The template to use when there are no results.
+   */
+  empty: Template<{ results: SearchResults }>;
+  /**
+   * The template to use for the “Show previous” label.
+   */
+  showPreviousText: Template;
+  /**
+   * The template to use for the “Show more” label.
+   */
+  showMoreText: Template;
+  /**
+   * The template to use for each result.
+   */
   item: Template<Hit>;
 };
 
 export type InfiniteHitsRendererWidgetParams = {
+  /**
+   * Escapes HTML entities from hits string values.
+   *
+   * @default `true`
+   */
   escapeHTML: boolean;
-  transformItems: (items: any[]) => any[];
+  /**
+   * Enable the button to load previous results.
+   *
+   * @default `false`
+   */
   showPrevious: boolean;
+  /**
+   * Receives the items, and is called before displaying them.
+   * Useful for mapping over the items to transform, and remove or reorder them.
+   */
+  transformItems: (items: any[]) => any[];
 };
 
 interface InfiniteHitsWidgetParams extends InfiniteHitsRendererWidgetParams {
+  /**
+   * The CSS Selector or `HTMLElement` to insert the widget into.
+   */
   container: string | HTMLElement;
+  /**
+   * The CSS classes to override.
+   */
   cssClasses?: Partial<InfiniteHitsCSSClasses>;
+  /**
+   * The templates to use for the widget.
+   */
   templates?: Partial<InfiniteHitsTemplates>;
 }
 
@@ -104,56 +164,6 @@ const renderer = ({
   );
 };
 
-/**
- * @typedef {Object} InfiniteHitsTemplates
- * @property {string|function} [empty = "No results"] Template used when there are no results.
- * @property {string|function} [showMoreText = "Show more results"] Template used for the "load more" button.
- * @property {string|function} [item = ""] Template used for each result. This template will receive an object containing a single record.
- */
-
-/**
- * @typedef {object} InfiniteHitsCSSClasses
- * @property {string|string[]} [root] CSS class to add to the wrapping element.
- * @property {string|string[]} [emptyRoot] CSS class to add to the wrapping element when no results.
- * @property {string|string[]} [list] CSS class to add to the list of results.
- * @property {string|string[]} [item] CSS class to add to each result.
- * @property {string|string[]} [loadMore] CSS class to add to the load more button.
- * @property {string|string[]} [disabledLoadMore] CSS class to add to the load more button when disabled.
- */
-
-/**
- * @typedef {Object} InfiniteHitsWidgetOptions
- * @property  {string|HTMLElement} container CSS Selector or HTMLElement to insert the widget.
- * @property  {InfiniteHitsTemplates} [templates] Templates to use for the widget.
- * @property  {InfiniteHitsCSSClasses} [cssClasses] CSS classes to add.
- * @property {boolean} [escapeHTML = true] Escape HTML entities from hits string values.
- * @property {function(object[]):object[]} [transformItems] Function to transform the items passed to the templates.
- */
-
-/**
- * Display the list of results (hits) from the current search.
- *
- * This widget uses the infinite hits pattern. It contains a button that
- * will let the user load more results to the list. This is particularly
- * handy on mobile implementations.
- * @type {WidgetFactory}
- * @devNovel InfiniteHits
- * @category basic
- * @param {InfiniteHitsWidgetOptions} $0 The options for the InfiniteHits widget.
- * @return {Widget} Creates a new instance of the InfiniteHits widget.
- * @example
- * search.addWidget(
- *   instantsearch.widgets.infiniteHits({
- *     container: '#infinite-hits-container',
- *     templates: {
- *       empty: 'No results',
- *       showMoreText: 'Show more results',
- *       item: '<strong>Hit {{objectID}}</strong>: {{{_highlightResult.name.value}}}'
- *     },
- *     transformItems: items => items.map(item => item),
- *   })
- * );
- */
 const infiniteHits: InfiniteHits = (
   {
     container,