chore: upgrade deps

also, log message on build ready with webpack dev middleware hook

package.json

@@ -30,6 +30,7 @@
   "dependencies": {
     "@babel/polyfill": "^7.2.3",
     "@babel/runtime": "^7.1.5",
+    "@hsjs/react-cache": "0.0.0-alpha.aa94237",
     "@sentry/browser": "^4.4.2",
     "chart.js": "^2.7.3",
     "classnames": "^2.2.6",
@@ -39,9 +40,8 @@
     "memoize-one": "^5.0.0",
     "modern-normalize": "^0.5.0",
     "prop-types": "^15.5.10",
-    "react": "16.7.0-alpha.2",
-    "react-cache": "2.0.0-alpha.1",
-    "react-dom": "16.7.0-alpha.2",
+    "react": "16.8.1",
+    "react-dom": "16.8.1",
     "react-modal": "^3.8.1",
     "react-router-dom": "4.4.0-beta.4",
     "react-window": "^1.5.0",
@@ -70,29 +70,29 @@
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^2.0.1",
     "cssnano": "^4.1.7",
-    "eslint": "^5.12.0",
-    "eslint-import-resolver-webpack": "^0.10.1",
-    "eslint-plugin-import": "2.14.0",
+    "eslint": "^5.13.0",
+    "eslint-import-resolver-webpack": "^0.11.0",
+    "eslint-plugin-import": "^2.16.0",
     "eslint-plugin-jest": "^22.0.0",
     "eslint-plugin-react": "7.11.1",
-    "eslint-plugin-react-hooks": "^0.0.0",
+    "eslint-plugin-react-hooks": "^1.0.1",
     "file-loader": "^3.0.0",
     "html-webpack-plugin": "^3.2.0",
     "husky": "^1.3.0",
-    "lint-staged": "^8.0.2",
+    "lint-staged": "^8.1.3",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.10.0",
     "postcss-loader": "^3.0.0",
-    "prettier": "^1.15.1",
+    "prettier": "^1.16.4",
     "react-hot-loader": "^4.6.3",
     "sass-loader": "^7.0.1",
     "style-loader": "^0.23.0",
     "svg-sprite-loader": "^4.1.2",
-    "terser-webpack-plugin": "^1.1.0",
-    "webpack": "^4.28.4",
+    "terser-webpack-plugin": "^1.2.2",
+    "webpack": "^4.29.3",
     "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.2.1",
-    "webpack-dev-middleware": "^3.5.0",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-middleware": "^3.5.2",
     "webpack-hot-middleware": "^2.22.2"
   }
 }

server.js

@@ -37,8 +37,10 @@ const stats = {
 
 const options = { publicPath, stats };
 
-app.use(devMiddleware(compiler, options));
-app.use(hotMiddleware(compiler));
+const wdm = devMiddleware(compiler, options);
+const whm = hotMiddleware(compiler);
+app.use(wdm);
+app.use(whm);
 
 app.use('*', (req, res, next) => {
   const filename = path.join(compiler.outputPath, 'index.html');
@@ -54,3 +56,10 @@ app.use('*', (req, res, next) => {
 app.listen(port, '0.0.0.0', () => {
   console.log('\n>> Listening at http://0.0.0.0:' + port + '\n');
 });
+
+wdm.waitUntilValid(() => {
+  console.log('\n===> Build ready at:\n');
+  console.log(`  http://0.0.0.0:${port}`);
+  console.log(`  http://127.0.0.1:${port}`);
+  console.log(`  http://localhost:${port}`);
+});

src/app.js

@@ -7,8 +7,10 @@ import Root from './components/Root';
 
 Modal.setAppElement('#app');
 
+const { unstable_createRoot: createRoot } = ReactDOM;
+
 // use async React
-const root = ReactDOM.createRoot(document.getElementById('app'));
+const root = createRoot(document.getElementById('app'));
 root.render(<Root />);
 
 // const render = (Component, props = {}) => {

src/components/TrafficChart.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import prettyBytes from 'm/pretty-bytes';
 import { fetchData } from '../api/traffic';
-import { unstable_createResource as createResource } from 'react-cache';
+import { unstable_createResource as createResource } from '@hsjs/react-cache';
 import { useStoreState } from 'm/store';
 import { getClashAPIConfig, getTheme } from 'd/app';
 
@@ -145,8 +145,7 @@ export default function TrafficChart() {
   const { hostname, port, secret } = useStoreState(getClashAPIConfig);
   const theme = useStoreState(getTheme);
 
-  useEffect(
-    () => {
+  useEffect(() => {
     const ctx = document.getElementById('trafficChart').getContext('2d');
     const traffic = fetchData({ hostname, port, secret });
     const upProps = getUploadProps(theme);
@@ -174,9 +173,7 @@ export default function TrafficChart() {
       unsubscribe();
       c.destroy();
     };
-    },
-    [hostname, port, secret, theme]
-  );
+  }, [hostname, port, secret, theme]);
 
   return (
     <div style={chartWrapperStyle}>