From 705bc2f9d6c99ae5d44ee0cfff2d6af9a646615f Mon Sep 17 00:00:00 2001 From: SleepWalker Date: Sat, 9 Nov 2019 19:26:46 +0200 Subject: [PATCH] Initial attempt to setup hmr --- babel.config.js | 7 ++--- package.json | 2 ++ src/App.js | 28 +++++++++++++++++++ src/index.js | 38 ++++++++----------------- webpack.config.js | 12 ++++---- yarn.lock | 71 ++++++++++++++++++++++++++++++++++++++++++++--- 6 files changed, 117 insertions(+), 41 deletions(-) create mode 100644 src/App.js diff --git a/babel.config.js b/babel.config.js index b75d02a..3a244b9 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,9 +1,5 @@ module.exports = { - presets: [ - '@babel/preset-react', - '@babel/preset-flow', - ['@babel/preset-env'] - ], + presets: ['@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', diff --git a/package.json b/package.json index fe52732..6adc775 100644 --- a/package.json +++ b/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", diff --git a/src/App.js b/src/App.js new file mode 100644 index 0000000..41bde37 --- /dev/null +++ b/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}) => ( + + + + + + null} + /> + + + + + +); + +export default hot(App); diff --git a/src/index.js b/src/index.js index ea206af..99aa942 100644 --- a/src/index.js +++ b/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 RootPage from 'pages/root/RootPage'; -import SuccessOauthPage from 'pages/auth/SuccessOauthPage'; +import { loadScript, debounce } from 'functions'; + +import App from './App'; history.init(); @@ -33,27 +29,15 @@ authFlow.setStore(store); Promise.all([ userFactory(store), font.load(['Roboto', 'Roboto Condensed']) -]) - .then(() => { - ReactDOM.render( - - - - - - null} /> - - - - - , - document.getElementById('app') - ); +]).then(() => { + ReactDOM.render( + , + document.getElementById('app') + ); - initAnalytics(); - }); + initAnalytics(); +}); -import { loadScript, debounce } from 'functions'; const trackPageView = debounce(_trackPageView); function initAnalytics() { if (!window.ga) { diff --git a/webpack.config.js b/webpack.config.js index 035aa0a..92835b5 100644 --- a/webpack.config.js +++ b/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 }; diff --git a/yarn.lock b/yarn.lock index b9ce545..0d20307 100644 --- a/yarn.lock +++ b/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==