Update scroll-behavior dependency

.babelrc

@@ -1,6 +1,8 @@
 {
   "presets": [
-    ["es2015", { "loose": true }],
+    ["latest", {
+      "es2015": { "loose": true }
+    }],
     "stage-1",
     "react"
   ],

.eslintrc

@@ -1,10 +1,9 @@
 {
-  "extends": "airbnb",
-  "parser": "babel-eslint",
+  "extends": "4catalyzer-react",
+  "env": {
+    "browser": true
+  },
   "globals": {
     "__DEV__": false
-  },
-  "rules": {
-    "max-len": [2, 79]
   }
 }

karma.conf.js

@@ -1,10 +1,10 @@
-const webpack = require('webpack');
+const webpack = require('webpack'); // eslint-disable-line import/no-extraneous-dependencies
 
-module.exports = config => {
+module.exports = (config) => {
   const { env } = process;
 
   config.set({
-    frameworks: ['mocha'],
+    frameworks: ['mocha', 'sinon-chai'],
 
     files: ['test/index.js'],
 

package.json

@@ -30,45 +30,51 @@
   },
   "homepage": "https://github.com/taion/react-router-scroll#readme",
   "dependencies": {
-    "history": "^2.1.2",
-    "scroll-behavior": "^0.8.0",
+    "scroll-behavior": "^0.9.0",
     "warning": "^3.0.0"
   },
   "peerDependencies": {
+    "history": "^2.0.0 || ^3.0.0",
     "react": "^0.14.0 || ^15.0.0",
+    "react-dom": "^0.14.0 || ^15.0.0",
     "react-router": "^2.3.0 || ^3.0.0"
   },
   "devDependencies": {
-    "babel-cli": "^6.11.4",
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.2.4",
+    "babel-cli": "^6.18.0",
+    "babel-core": "^6.18.2",
+    "babel-eslint": "^7.1.0",
+    "babel-loader": "^6.2.7",
     "babel-plugin-add-module-exports": "^0.2.1",
     "babel-plugin-dev-expression": "^0.2.1",
-    "babel-polyfill": "^6.13.0",
-    "babel-preset-es2015": "^6.13.2",
-    "babel-preset-react": "^6.11.1",
-    "babel-preset-stage-1": "^6.13.0",
+    "babel-polyfill": "^6.16.0",
+    "babel-preset-latest": "^6.16.0",
+    "babel-preset-react": "^6.16.0",
+    "babel-preset-stage-1": "^6.16.0",
     "chai": "^3.5.0",
-    "cross-env": "^2.0.0",
-    "dom-helpers": "^2.4.0",
-    "eslint": "^2.13.1",
-    "eslint-config-airbnb": "^9.0.1",
-    "eslint-plugin-import": "^1.12.0",
-    "eslint-plugin-jsx-a11y": "^1.5.5",
-    "eslint-plugin-react": "^5.2.2",
-    "karma": "^1.1.2",
-    "karma-chrome-launcher": "^1.0.1",
+    "cross-env": "^3.1.3",
+    "dirty-chai": "^1.2.2",
+    "dom-helpers": "^3.0.0",
+    "eslint": "^3.9.1",
+    "eslint-config-4catalyzer-react": "^0.1.3",
+    "eslint-plugin-import": "^1.16.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.5.0",
+    "history": "^2.1.2",
+    "karma": "^1.3.0",
+    "karma-chrome-launcher": "^2.0.0",
     "karma-firefox-launcher": "^1.0.0",
-    "karma-mocha": "^1.1.1",
-    "karma-mocha-reporter": "^2.1.0",
+    "karma-mocha": "^1.2.0",
+    "karma-mocha-reporter": "^2.2.0",
+    "karma-sinon-chai": "^1.2.4",
     "karma-sourcemap-loader": "^0.3.7",
-    "karma-webpack": "^1.7.0",
-    "mocha": "^3.0.1",
-    "react": "^15.3.0",
-    "react-dom": "^15.3.0",
-    "react-router": "^2.6.1",
+    "karma-webpack": "^1.8.0",
+    "mocha": "^3.1.2",
+    "react": "^15.3.2",
+    "react-dom": "^15.3.2",
+    "react-router": "^2.8.1",
     "rimraf": "^2.5.4",
-    "webpack": "^1.13.1"
+    "sinon": "^1.17.6",
+    "sinon-chai": "^2.8.0",
+    "webpack": "^1.13.3"
   }
 }

src/ScrollBehaviorContext.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import ScrollBehavior from 'scroll-behavior/lib/ScrollBehavior';
+import ScrollBehavior from 'scroll-behavior';
+
+import StateStorage from './StateStorage';
 
 const propTypes = {
   shouldUpdateScroll: React.PropTypes.func,
@@ -16,12 +18,14 @@ class ScrollBehaviorContext extends React.Component {
     super(props, context);
 
     const { routerProps } = props;
+    const { router } = routerProps;
 
-    this.scrollBehavior = new ScrollBehavior(
-      routerProps.router,
-      () => this.props.routerProps.location,
-      this.shouldUpdateScroll,
-    );
+    this.scrollBehavior = new ScrollBehavior({
+      addTransitionHook: router.listenBefore,
+      stateStorage: new StateStorage(router),
+      getCurrentLocation: () => this.props.routerProps.location,
+      shouldUpdateScroll: this.shouldUpdateScroll,
+    });
 
     this.scrollBehavior.updateScroll(null, routerProps);
   }
@@ -53,15 +57,15 @@ class ScrollBehaviorContext extends React.Component {
       return true;
     }
 
-    // Hack to allow accessing scrollBehavior.readPosition().
+    // Hack to allow accessing scrollBehavior._stateStorage.
     return shouldUpdateScroll.call(
-      this.scrollBehavior, prevRouterProps, routerProps
+      this.scrollBehavior, prevRouterProps, routerProps,
     );
   };
 
   registerElement = (key, element, shouldUpdateScroll) => {
     this.scrollBehavior.registerElement(
-      key, element, shouldUpdateScroll, this.props.routerProps
+      key, element, shouldUpdateScroll, this.props.routerProps,
     );
   };
 

src/ScrollContainer.js

@@ -27,33 +27,32 @@ class ScrollContainer extends React.Component {
   componentDidMount() {
     this.context.scrollBehavior.registerElement(
       this.props.scrollKey,
-      ReactDOM.findDOMNode(this),
-      this.shouldUpdateScroll
+      ReactDOM.findDOMNode(this), // eslint-disable-line react/no-find-dom-node
+      this.shouldUpdateScroll,
     );
 
     // Only keep around the current DOM node in development, as this is only
     // for emitting the appropriate warning.
     if (__DEV__) {
-      this.domNode = ReactDOM.findDOMNode(this);
+      this.domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
     }
   }
 
   componentWillReceiveProps(nextProps) {
     warning(
       nextProps.scrollKey === this.props.scrollKey,
-      'ScrollContainer: <ScrollContainer> does not support changing scrollKey.'
+      '<ScrollContainer> does not support changing scrollKey.',
     );
   }
 
   componentDidUpdate() {
     if (__DEV__) {
       const prevDomNode = this.domNode;
-      this.domNode = ReactDOM.findDOMNode(this);
+      this.domNode = ReactDOM.findDOMNode(this); // eslint-disable-line react/no-find-dom-node
 
       warning(
         this.domNode === prevDomNode,
-        'ScrollContainer: <ScrollContainer> does not support changing DOM ' +
-        'node.'
+        '<ScrollContainer> does not support changing DOM node.',
       );
     }
   }
@@ -68,11 +67,11 @@ class ScrollContainer extends React.Component {
       return true;
     }
 
-    // Hack to allow accessing scrollBehavior.readPosition().
+    // Hack to allow accessing scrollBehavior._stateStorage.
     return shouldUpdateScroll.call(
       this.context.scrollBehavior.scrollBehavior,
       prevRouterProps,
-      routerProps
+      routerProps,
     );
   };
 

src/StateStorage.js

@@ -0,0 +1,23 @@
+import { readState, saveState } from 'history/lib/DOMStateStorage';
+
+const STATE_KEY_PREFIX = '@@scroll|';
+
+export default class StateStorage {
+  constructor(router) {
+    this.getFallbackLocationKey = router.createPath;
+  }
+
+  read(location, key) {
+    return readState(this.getStateKey(location, key));
+  }
+
+  save(location, key, value) {
+    saveState(this.getStateKey(location, key), value);
+  }
+
+  getStateKey(location, key) {
+    const locationKey = location.key || this.getFallbackLocationKey(location);
+    const stateKeyBase = `${STATE_KEY_PREFIX}${locationKey}`;
+    return key == null ? stateKeyBase : `${stateKeyBase}|${key}`;
+  }
+}

test/.eslintrc

@@ -2,7 +2,12 @@
   "env": {
     "mocha": true
   },
+  "globals": {
+    "expect": false
+  },
   "rules": {
-    "no-unused-expressions": 0
+    "import/no-extraneous-dependencies": ["error", {
+      "devDependencies": true
+    }]
   }
 }

test/ScrollContainer.test.js

@@ -1,4 +1,3 @@
-import { expect } from 'chai';
 import scrollTop from 'dom-helpers/query/scrollTop';
 import createBrowserHistory from 'history/lib/createBrowserHistory';
 import createHashHistory from 'history/lib/createHashHistory';
@@ -9,9 +8,9 @@ import { applyRouterMiddleware, Router, useRouterHistory } from 'react-router';
 import useScroll from '../src/useScroll';
 import ScrollContainer from '../src/ScrollContainer';
 
-import {
-  createElementRoutes, createHashHistoryWithoutKey, ScrollableComponent,
-} from './fixtures';
+import { ScrollableComponent } from './components';
+import { createHashHistoryWithoutKey } from './histories';
+import { createElementRoutes } from './routes';
 import run from './run';
 
 describe('<ScrollContainer>', () => {
@@ -34,15 +33,15 @@ describe('<ScrollContainer>', () => {
     createBrowserHistory,
     createHashHistory,
     createHashHistoryWithoutKey,
-  ].forEach(createHistory => {
+  ].forEach((createHistory) => {
     let history;
 
     beforeEach(() => {
       history = useRouterHistory(createHistory)();
     });
 
     describe(createHistory.name, () => {
-      it('should have correct default behavior', done => {
+      it('should have correct default behavior', (done) => {
         const Page = () => (
           <ScrollContainer scrollKey="container">
             <ScrollableComponent />
@@ -71,11 +70,11 @@ describe('<ScrollContainer>', () => {
             render={applyRouterMiddleware(useScroll(() => false))}
             onUpdate={run(steps)}
           />,
-          container
+          container,
         );
       });
 
-      it('should have support custom behavior', done => {
+      it('should have support custom behavior', (done) => {
         const Page = () => (
           <ScrollContainer
             scrollKey="container"
@@ -107,7 +106,7 @@ describe('<ScrollContainer>', () => {
             render={applyRouterMiddleware(useScroll(() => false))}
             onUpdate={run(steps)}
           />,
-          container
+          container,
         );
       });
     });

test/components.js

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function ScrollableComponent() {
+  return (
+    <div style={{ width: 100, height: 100, overflow: 'hidden' }}>
+      <div style={{ width: 20000, height: 20000 }} />
+    </div>
+  );
+}

test/histories.js

@@ -0,0 +1,8 @@
+import createHashHistory from 'history/lib/createHashHistory';
+
+export function createHashHistoryWithoutKey() {
+  // Avoid persistence of stored data from previous tests.
+  window.sessionStorage.clear();
+
+  return createHashHistory({ queryKey: false });
+}

test/index.js

@@ -1,4 +1,8 @@
 import 'babel-polyfill';
 
+import dirtyChai from 'dirty-chai';
+
+global.chai.use(dirtyChai);
+
 const testsContext = require.context('.', true, /\.test\.js$/);
 testsContext.keys().forEach(testsContext);

test/fixtures.js → test/routes.js

@@ -1,14 +1,6 @@
-import createHashHistory from 'history/lib/createHashHistory';
 import React from 'react';
 import { IndexRoute, Route } from 'react-router';
 
-export function createHashHistoryWithoutKey() {
-  // Avoid persistence of stored data from previous tests.
-  window.sessionStorage.clear();
-
-  return createHashHistory({ queryKey: false });
-}
-
 function Page1() {
   return (
     <div style={{ width: 20000, height: 20000 }} />
@@ -35,14 +27,6 @@ export const asyncRoutes = [
   <Route path="/page2" onEnter={asyncOnEnter} component={Page2} />,
 ];
 
-export function ScrollableComponent() {
-  return (
-    <div style={{ width: 100, height: 100, overflow: 'hidden' }}>
-      <div style={{ width: 20000, height: 20000 }} />
-    </div>
-  );
-}
-
 export function createElementRoutes(Page) {
   return (
     <Route path="/" component={Page}>