Initial attempt to setup hmr

babel.config.js

@@ -1,9 +1,5 @@
 module.exports = {
-    presets: [
+    presets: ['@babel/preset-react', '@babel/preset-flow', ['@babel/preset-env']],
-        '@babel/preset-react',
-        '@babel/preset-flow',
-        ['@babel/preset-env']
-    ],
     plugins: [
         '@babel/plugin-syntax-dynamic-import',
         '@babel/plugin-proposal-function-bind',
@@ -18,6 +14,7 @@ module.exports = {
     ],
     env: {
         webpack: {
+            plugins: ['react-hot-loader/babel'],
             presets: [
                 [
                     '@babel/preset-env',

package.json

@@ -42,6 +42,7 @@
     "build:dll": "node ./scripts/build-dll.js"
   },
   "dependencies": {
+    "@hot-loader/react-dom": "^16.11.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.0.8",
     "debounce": "^1.0.0",
@@ -54,6 +55,7 @@
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
     "react-helmet": "^5.0.0",
+    "react-hot-loader": "^4.12.16",
     "react-intl": "^2.7.2",
     "react-motion": "^0.5.0",
     "react-redux": "^7.1.3",

src/App.js

@@ -0,0 +1,28 @@
+// @flow
+import React from 'react';
+import { hot } from 'react-hot-loader/root';
+import { Provider as ReduxProvider } from 'react-redux';
+import { Router, Route, Switch } from 'react-router-dom';
+import { IntlProvider } from 'components/i18n';
+import AuthFlowRoute from 'containers/AuthFlowRoute';
+import RootPage from 'pages/root/RootPage';
+import SuccessOauthPage from 'pages/auth/SuccessOauthPage';
+
+const App = ({store, browserHistory}) => (
+    <ReduxProvider store={store}>
+        <IntlProvider>
+            <Router history={browserHistory}>
+                <Switch>
+                    <Route path="/oauth2/code/success" component={SuccessOauthPage} />
+                    <AuthFlowRoute
+                        path="/oauth2/:version(v\d+)/:clientId?"
+                        component={() => null}
+                    />
+                    <Route path="/" component={RootPage} />
+                </Switch>
+            </Router>
+        </IntlProvider>
+    </ReduxProvider>
+);
+
+export default hot(App);

src/index.js

@@ -1,13 +1,9 @@
 import 'polyfills';
+import 'react-hot-loader';
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-
-import { Provider as ReduxProvider } from 'react-redux';
-import { Router, Route, Switch } from 'react-router-dom';
-
 import { factory as userFactory } from 'components/user/factory';
-import { IntlProvider } from 'components/i18n';
 import authFlow from 'services/authFlow';
 import storeFactory from 'storeFactory';
 import bsodFactory from 'components/ui/bsod/factory';
@@ -15,9 +11,9 @@ import loader from 'services/loader';
 import logger from 'services/logger';
 import font from 'services/font';
 import history, { browserHistory } from 'services/history';
-import AuthFlowRoute from 'containers/AuthFlowRoute';
+import { loadScript, debounce } from 'functions';
-import RootPage from 'pages/root/RootPage';
+
-import SuccessOauthPage from 'pages/auth/SuccessOauthPage';
+import App from './App';
 
 history.init();
 
@@ -33,27 +29,15 @@ authFlow.setStore(store);
 Promise.all([
     userFactory(store),
     font.load(['Roboto', 'Roboto Condensed'])
-])
+]).then(() => {
-    .then(() => {
+    ReactDOM.render(
-        ReactDOM.render(
+        <App store={store} browserHistory={browserHistory} />,
-            <ReduxProvider store={store}>
+        document.getElementById('app')
-                <IntlProvider>
+    );
-                    <Router history={browserHistory}>
-                        <Switch>
-                            <Route path="/oauth2/code/success" component={SuccessOauthPage} />
-                            <AuthFlowRoute path="/oauth2/:version(v\d+)/:clientId?" component={() => null} />
-                            <Route path="/" component={RootPage} />
-                        </Switch>
-                    </Router>
-                </IntlProvider>
-            </ReduxProvider>,
-            document.getElementById('app')
-        );
 
-        initAnalytics();
+    initAnalytics();
-    });
+});
 
-import { loadScript, debounce } from 'functions';
 const trackPageView = debounce(_trackPageView);
 function initAnalytics() {
     if (!window.ga) {

webpack.config.js

@@ -39,6 +39,8 @@ if (isTest) {
 const smp = new SpeedMeasurePlugin();
 
 const webpackConfig = {
+    mode: isProduction ? 'production' : 'development',
+
     cache: true,
 
     entry: {
@@ -53,7 +55,10 @@ const webpackConfig = {
 
     resolve: {
         modules: [rootPath, 'node_modules'],
-        extensions: ['.js', '.jsx', '.json']
+        extensions: ['.js', '.jsx', '.json'],
+        alias: {
+            'react-dom': '@hot-loader/react-dom'
+        }
     },
 
     externals: isTest
@@ -281,9 +286,6 @@ if (isProduction) {
 }
 
 if (!isProduction && !isTest) {
-    // TODO: review HMR integration
-    // webpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
-
     webpackConfig.devServer = {
         host: 'localhost',
         port: 8080,
@@ -294,7 +296,7 @@ if (!isProduction && !isTest) {
                 secure: false // allow self-signed certs
             }
         },
-        // hot: true,
+        hot: true,
         inline: true,
         historyApiFallback: true
     };

yarn.lock

@@ -1213,6 +1213,16 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@hot-loader/react-dom@^16.11.0":
+  version "16.11.0"
+  resolved "https://registry.yarnpkg.com/@hot-loader/react-dom/-/react-dom-16.11.0.tgz#c0b483923b289db5431516f56ee2a69448ebf9bd"
+  integrity sha512-cIOVB8YgT4EVCNiXK+gGuYl6adW/TKlW3N7GvgY5QgpL2NTWagF/oJxVscHSdR3O7NjJsoxdseB5spqwCHNIhA==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    prop-types "^15.6.2"
+    scheduler "^0.17.0"
+
 "@sinonjs/commons@^1", "@sinonjs/commons@^1.0.2", "@sinonjs/commons@^1.4.0":
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.4.0.tgz#7b3ec2d96af481d7a0321252e7b1c94724ec5a78"
@@ -1282,11 +1292,24 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.10.tgz#51babf9c7deadd5343620055fc8aff7995c8b031"
   integrity sha512-LcsGbPomWsad6wmMNv7nBLw7YYYyfdYcz6xryKYQhx89c3XXan+8Q6AJ43G5XDIaklaVkK3mE4fCb0SBvMiPSQ==
 
+"@types/prop-types@*":
+  version "15.7.3"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
+  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+
 "@types/q@^1.5.1":
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
+"@types/react@^15.0.0 || ^16.0.0":
+  version "16.9.11"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.11.tgz#70e0b7ad79058a7842f25ccf2999807076ada120"
+  integrity sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==
+  dependencies:
+    "@types/prop-types" "*"
+    csstype "^2.2.0"
+
 "@types/sizzle@2.3.2":
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/@types/sizzle/-/sizzle-2.3.2.tgz#a811b8c18e2babab7d542b3365887ae2e4d9de47"
@@ -3300,7 +3323,7 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.6.7:
+csstype@^2.2.0, csstype@^2.6.7:
   version "2.6.7"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.7.tgz#20b0024c20b6718f4eda3853a1f5a1cce7f5e4a5"
   integrity sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==
@@ -3681,6 +3704,11 @@ dom-serializer@0, dom-serializer@~0.1.0, dom-serializer@~0.1.1:
     domelementtype "^1.3.0"
     entities "^1.1.1"
 
+dom-walk@^0.1.0:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018"
+  integrity sha1-ZyIm3HTI95mtNTB9+TaroRrNYBg=
+
 domain-browser@^1.1.1:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc"
@@ -4475,7 +4503,7 @@ fast-json-stable-stringify@^2.0.0:
   resolved "https://registry.yarnpkg.com/fast-json-stable-stringify/-/fast-json-stable-stringify-2.0.0.tgz#d5142c0caee6b1189f87d3a76111064f86c8bbf2"
   integrity sha1-1RQsDK7msRifh9OnYREGT4bIu/I=
 
-fast-levenshtein@~2.0.4:
+fast-levenshtein@^2.0.6, fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha1-PYpcZog6FqMMqGQ+hR8Zuqd5eRc=
@@ -5010,6 +5038,14 @@ global-prefix@^3.0.0:
     kind-of "^6.0.2"
     which "^1.3.1"
 
+global@^4.3.0:
+  version "4.4.0"
+  resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
+  integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
+  dependencies:
+    min-document "^2.19.0"
+    process "^0.11.10"
+
 globals@^11.1.0:
   version "11.10.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.10.0.tgz#1e09776dffda5e01816b3bb4077c8b59c24eaa50"
@@ -6889,6 +6925,13 @@ mimic-fn@^2.0.0, mimic-fn@^2.1.0:
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-2.1.0.tgz#7ed2c2ccccaf84d3ffcb7a69b57711fc2083401b"
   integrity sha512-OqbOk5oEQeAZ8WXWydlu9HJjz9WVdEIvamMCcXmuqUYjTknH/sqsWvhQ3vgwKFRR1HpjvNBKQ37nbJgYzGqGcg==
 
+min-document@^2.19.0:
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/min-document/-/min-document-2.19.0.tgz#7bd282e3f5842ed295bb748cdd9f1ffa2c824685"
+  integrity sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=
+  dependencies:
+    dom-walk "^0.1.0"
+
 mini-create-react-context@^0.3.0:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/mini-create-react-context/-/mini-create-react-context-0.3.2.tgz#79fc598f283dd623da8e088b05db8cddab250189"
@@ -8455,7 +8498,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.5.4, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -8729,6 +8772,21 @@ react-helmet@^5.0.0:
     react-fast-compare "^2.0.2"
     react-side-effect "^1.1.0"
 
+react-hot-loader@^4.12.16:
+  version "4.12.16"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-4.12.16.tgz#353bd07fbb08f791b5720535f86b0a8f9b651317"
+  integrity sha512-KC33uTBacgdunMtfpZFP2pgPpyvKIcCwuh0XmWESbeFrkWLqUtCFN91zyaTdU5OiAM982+E8xh1gjE5EINumaw==
+  dependencies:
+    "@types/react" "^15.0.0 || ^16.0.0"
+    fast-levenshtein "^2.0.6"
+    global "^4.3.0"
+    hoist-non-react-statics "^3.3.0"
+    loader-utils "^1.1.0"
+    prop-types "^15.6.1"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
+    source-map "^0.7.3"
+
 react-intl@^2.7.2:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/react-intl/-/react-intl-2.9.0.tgz#c97c5d17d4718f1575fdbd5a769f96018a3b1843"
@@ -8755,6 +8813,11 @@ react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-motion@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316"
@@ -9593,7 +9656,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.0.1:
+shallowequal@^1.0.1, shallowequal@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==