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 index fc3b342..7262796 100644 --- 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)( { 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 index dc83f6c..fba254f 100644 --- 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 index 7aebd99..123da09 100644 --- 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', ]),