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,38 +145,35 @@ export default function TrafficChart() {
   const { hostname, port, secret } = useStoreState(getClashAPIConfig);
   const theme = useStoreState(getTheme);
 
-  useEffect(
-    () => {
-      const ctx = document.getElementById('trafficChart').getContext('2d');
-      const traffic = fetchData({ hostname, port, secret });
-      const upProps = getUploadProps(theme);
-      const downProps = getDownloadProps(theme);
-      const data = {
-        labels: traffic.labels,
-        datasets: [
-          {
-            ...upProps,
-            data: traffic.up
-          },
-          {
-            ...downProps,
-            data: traffic.down
-          }
-        ]
-      };
-      const c = new Chart(ctx, {
-        type: 'line',
-        data,
-        options
-      });
-      const unsubscribe = traffic.subscribe(() => c.update());
-      return () => {
-        unsubscribe();
-        c.destroy();
-      };
-    },
-    [hostname, port, secret, theme]
-  );
+  useEffect(() => {
+    const ctx = document.getElementById('trafficChart').getContext('2d');
+    const traffic = fetchData({ hostname, port, secret });
+    const upProps = getUploadProps(theme);
+    const downProps = getDownloadProps(theme);
+    const data = {
+      labels: traffic.labels,
+      datasets: [
+        {
+          ...upProps,
+          data: traffic.up
+        },
+        {
+          ...downProps,
+          data: traffic.down
+        }
+      ]
+    };
+    const c = new Chart(ctx, {
+      type: 'line',
+      data,
+      options
+    });
+    const unsubscribe = traffic.subscribe(() => c.update());
+    return () => {
+      unsubscribe();
+      c.destroy();
+    };
+  }, [hostname, port, secret, theme]);
 
   return (
     <div style={chartWrapperStyle}>