Swapped react-router-scroll with react-router-scroll-async

rocjs · Dec 21, 2016 · f0c4a28 · f0c4a28
1 parent f0ee11e
commit f0c4a28
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 21 deletions.
diff --git a/extensions/roc-package-web-app-react/app/client/create-client.js b/extensions/roc-package-web-app-react/app/client/create-client.js
@@ -10,7 +10,7 @@ import createHistory from 'history/lib/createBrowserHistory';
 import { supportsHistory } from 'history/lib/DOMUtils';
 import debug from 'debug';
 import { useRedial } from 'react-router-redial';
-import useScroll from 'react-router-scroll/lib/useScroll';
+import useScroll from 'react-router-scroll-async/lib/useScroll';
 
 import { rocConfig } from '../shared/universal-config';
 
@@ -163,19 +163,24 @@ export default function createClient({ createRoutes, createStore, mountNode }) {
             ));
         }
 
+        let updateScroll = () => {};
+
         const finalComponent = compose(createComponent)(
             <Router
                 history={history}
                 routes={routes}
                 render={applyRouterMiddleware(
-                    useScroll(),
+                    useScroll({
+                        updateScroll: (cb) => { updateScroll = cb; },
+                    }),
                     useRedial({
                         locals,
                         initialLoading,
                         beforeTransition: rocConfig.runtime.fetch.client.beforeTransition,
                         afterTransition: rocConfig.runtime.fetch.client.afterTransition,
                         parallel: rocConfig.runtime.fetch.client.parallel,
-                    })
+                        onCompleted: (type) => type === 'beforeTransition' && updateScroll(),
+                    }),
                 )}
             />
         );

diff --git a/extensions/roc-package-web-app-react/package.json b/extensions/roc-package-web-app-react/package.json
@@ -41,7 +41,7 @@
     "react-router": "~2.8.1",
     "react-router-redial": "~0.3.0",
     "react-router-redux": "~4.0.2",
-    "react-router-scroll": "~0.3.2",
+    "react-router-scroll-async": "~0.5.0",
     "react-server-status": "~1.0.0",
     "redial": "~0.5.0",
     "redux": "~3.4.0",

diff --git a/extensions/roc-package-web-app-react/src/roc/index.js b/extensions/roc-package-web-app-react/src/roc/index.js
@@ -1,10 +1,13 @@
 import { generateDependencies } from 'roc';
+import { warn } from 'roc/log/default/large';
 
 import config from '../config/roc.config';
 import meta from '../config/roc.config.meta';
 
 const packageJSON = require('../../package.json');
 
+let warnForReactRouterScroll = true;
+
 export default {
     config,
     meta,
@@ -15,23 +18,43 @@ export default {
         require.resolve('roc-plugin-react'),
     ],
     dependencies: {
-        exports: generateDependencies(packageJSON, [
-            'history',
-            'intl',
-            'intl-locales-supported',
-            'react-helmet',
-            'react-redux',
-            'react-router',
-            'react-router-redux',
-            'react-server-status',
-            'redial',
-            'redux-saga',
-            'react-router-redial',
-            'react-router-scroll',
-            'redux',
-            'redux-thunk',
-            'roc-package-web-app',
-        ]),
+        exports: {
+            ...generateDependencies(packageJSON, [
+                'history',
+                'intl',
+                'intl-locales-supported',
+                'react-helmet',
+                'react-redux',
+                'react-router',
+                'react-router-redux',
+                'react-server-status',
+                'redial',
+                'redux-saga',
+                'react-router-redial',
+                'react-router-scroll-async',
+                'redux',
+                'redux-thunk',
+                'roc-package-web-app',
+            ]),
+            'react-router-scroll': {
+                version: 'DEPRECATED - Use react-router-scroll-async',
+                resolve: ({ request }) => {
+                    // We will currently write out this two times, once when we build the application with webpack
+                    // and once when we run it in Node. A nice way to give the warnings we print out more substance
+                    // is to provide the instance that the function is running in, something we could provide.
+                    if (warnForReactRouterScroll) {
+                        warn(
+                            'react-router-scroll is deprecated, please change references to react-router-scroll-async',
+                            'Deprecation'
+                        );
+                    }
+                    warnForReactRouterScroll = false;
+                    return require.resolve(
+                        request.replace('react-router-scroll', 'react-router-scroll-async')
+                    );
+                },
+            },
+        },
         uses: generateDependencies(packageJSON, [
             'nunjucks',
         ]),