docs: IE11 support (example + mentions) (#3021)

* docs(examples): load polyfill.io
* docs(readme): add polyfill complete URL
* docs(usage): add browser support section
* docs: emphasises last two browser versions
* chore: remove lodash.includes
* test(functional): update polyfill

README.md

@@ -117,7 +117,9 @@ Start by [adding widgets](https://community.algolia.com/instantsearch.js/v2/widg
 
 ## Browser support
 
-We support the last **two versions of major browsers**. To support [IE11](https://en.wikipedia.org/wiki/Internet_Explorer_11), we recommend using [polyfill.io](https://polyfill.io).
+We support the **last two versions of major browsers** (Chrome, Edge, Firefox, Safari).
+
+To support [IE11](https://en.wikipedia.org/wiki/Internet_Explorer_11), we recommend loading [polyfill.io](https://polyfill.io) with the following URL `https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes`
 
 ## Contributing
 

docgen/layouts/example.pug

@@ -7,6 +7,7 @@ head
   link(href='https://fonts.googleapis.com/css?family=Roboto', rel='stylesheet', type='text/css')
   link(rel='stylesheet', href='instantsearch.min.css')
   link(rel='stylesheet', type='text/css', href='main.css')
+  script(src='https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes')
   script(src='instantsearch.min.js')
 body
   | !{contents}

docgen/src/guides/usage.md.hbs

@@ -82,3 +82,13 @@ const search = instantsearch({ ... });
 search.addWidget(searchBox({ ... }));
 search.addWidget(connectSearchBox(function() { ... })({ ... }))
 ```
+
+## Browser support
+
+We support the **last two versions of major browsers** (Chrome, Edge, Firefox, Safari).
+
+To support [IE11](https://en.wikipedia.org/wiki/Internet_Explorer_11), we recommend loading [polyfill.io](https://polyfill.io): 
+
+```html
+<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
+```

functional-tests/app/index.html

@@ -6,9 +6,7 @@
   <title>Instant search demo built with instantsearch.js</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap.min.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.5/css/bootstrap-theme.min.css">
-  <!--[if lte IE 9]>
-  <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
-  <![endif]-->
+  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,Array.prototype.includes"></script>
   <link rel="stylesheet" href="./instantsearch.min.css">
   <link rel="stylesheet" href="./style.css">
 </head>

src/components/Slider/Pit.js

@@ -1,12 +1,11 @@
 import React from 'preact-compat';
 import PropTypes from 'prop-types';
-import includes from 'lodash/includes';
 import cx from 'classnames';
 
 const Pit = ({ style, children }) => {
   // first, end & middle
   const positionValue = Math.round(parseFloat(style.left));
-  const shouldDisplayValue = includes([0, 50, 100], positionValue);
+  const shouldDisplayValue = [0, 50, 100].includes(positionValue);
 
   // Children could be an array, unwrap the value if it's the case
   // see: https://github.com/developit/preact-compat/issues/436

src/connectors/numeric-refinement-list/connectNumericRefinementList.js

@@ -1,4 +1,3 @@
-import includes from 'lodash/includes';
 import _isFinite from 'lodash/isFinite';
 
 import { checkRendering } from '../../lib/utils.js';
@@ -358,7 +357,6 @@ function refine(state, attributeName, options, facetValue) {
 
 function hasNumericRefinement(currentRefinements, operator, value) {
   const hasOperatorRefinements = currentRefinements[operator] !== undefined;
-  const includesValue = includes(currentRefinements[operator], value);
 
-  return hasOperatorRefinements && includesValue;
+  return hasOperatorRefinements && currentRefinements[operator].includes(value);
 }