fix(perf): only compute snappoints when step is provided (#2699)

* chore: do not uglify in dev + better banner
* fix(perf): only compute snappoints when step is provided

This keeps the snapping as it snaps points to the rounded number if
no snappoints are provided. Until rheostat provides a lazy way to fix
the snappoints, there will also be a risk of having an "out of memory"
error because the range of values is too big. There is an open issue
opened for adding this new API: airbnb/rheostat#14

Fix #2662

* chore: fix lint
* chore: fix lint

Author: bobylito

scripts/serve.sh

@@ -10,4 +10,4 @@
 # folder through a local web server.
 
 yarn
-NODE_ENV=production webpack-dev-server --config ./scripts/webpack.config.js --content-base dist/
+NODE_ENV=development webpack-dev-server --config ./scripts/webpack.config.js --content-base dist/

scripts/webpack.config.js

@@ -11,7 +11,12 @@ const UnminifiedWebpackPlugin = require('unminified-webpack-plugin');
 const extractCSS = new ExtractTextPlugin('instantsearch.css');
 const extractTheme = new ExtractTextPlugin('instantsearch-theme-algolia.css');
 
-const { NODE_ENV = 'development', VERSION = 'UNRELEASED' } = process.env;
+const {
+  NODE_ENV = 'development',
+  VERSION = `UNRELEASED / generated at: ${new Date().toUTCString()}`,
+} = process.env;
+
+const noop = () => ({ apply: () => undefined });
 
 module.exports = {
   devtool: 'source-map',
@@ -76,24 +81,26 @@ module.exports = {
     new webpack.optimize.AggressiveMergingPlugin(),
     new webpack.optimize.ModuleConcatenationPlugin(),
 
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        comparisons: false,
-      },
-      output: {
-        comments: false,
-        ascii_only: true,
-      },
-      sourceMap: true,
-    }),
+    NODE_ENV === 'production'
+      ? new webpack.optimize.UglifyJsPlugin({
+          compress: {
+            warnings: false,
+            comparisons: false,
+          },
+          output: {
+            comments: false,
+            ascii_only: true,
+          },
+          sourceMap: true,
+        })
+      : noop,
 
     new webpack.BannerPlugin(
       `instantsearch.js ${VERSION} | © Algolia Inc. and other contributors; Licensed MIT | github.com/algolia/instantsearch.js`
     ),
 
     // Generate un-minified js along with UglifyJsPlugin
-    new UnminifiedWebpackPlugin(),
+    NODE_ENV === 'production' ? new UnminifiedWebpackPlugin() : noop,
 
     new HappyPack({
       loaders: ['babel-loader'],

src/components/Slider/Slider.js

@@ -55,6 +55,7 @@ export class RawSlider extends Component {
 
   // creates an array of values where the slider should snap to
   computeSnapPoints({ min, max, step }) {
+    if (!step) return undefined;
     return [...range(min, max, step), max];
   }
 

src/widgets/range-slider/__tests__/__snapshots__/range-slider-test.js.snap

@@ -16,7 +16,7 @@ exports[`rangeSlider widget usage max option will use the results min when only
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={false}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -57,7 +57,7 @@ exports[`rangeSlider widget usage min option sets the right range 1`] = `
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={false}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -98,7 +98,7 @@ exports[`rangeSlider widget usage min option will use the results max when only
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={false}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -143,7 +143,7 @@ exports[`rangeSlider widget usage should \`collapse\` when options is provided 1
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={true}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -184,7 +184,7 @@ exports[`rangeSlider widget usage should \`shouldAutoHideContainer\` when range
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={true}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -225,7 +225,7 @@ exports[`rangeSlider widget usage should render without results 1`] = `
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={true}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -266,7 +266,7 @@ exports[`rangeSlider widget usage with results calls twice ReactDOM.render 1`] =
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={false}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {
@@ -307,7 +307,7 @@ exports[`rangeSlider widget usage with results calls twice ReactDOM.render 2`] =
   pips={true}
   refine={[Function]}
   shouldAutoHideContainer={false}
-  step={1}
+  step={undefined}
   templateProps={
     Object {
       "templates": Object {

src/widgets/range-slider/range-slider.js

@@ -125,9 +125,9 @@ rangeSlider({
  * @property  {boolean} [autoHideContainer=true] Hide the container when no refinements available.
  * @property  {RangeSliderCssClasses} [cssClasses] CSS classes to add to the wrapping elements.
  * @property  {boolean} [pips=true] Show slider pips.
- * @property  {number} [step=1] Every handle move will jump that number of steps.
  * @property  {number} [precision = 0] Number of digits after decimal point to use.
  * @property  {boolean|RangeSliderCollapsibleOptions} [collapsible=false] Hide the widget body and footer when clicking on header.
+ * @property  {number} [step] Every handle move will jump that number of steps.
  * @property  {number} [min] Minimal slider value, default to automatically computed from the result set.
  * @property  {number} [max] Maximal slider value, defaults to automatically computed from the result set.
  */
@@ -171,7 +171,7 @@ export default function rangeSlider(
     max,
     templates = defaultTemplates,
     cssClasses: userCssClasses = {},
-    step = 1,
+    step,
     pips = true,
     precision = 0,
     tooltips = true,