build: upgrade deps

README.md

@@ -4,18 +4,10 @@
 
 > Yet Another [Clash](https://github.com/Dreamacro/clash) [Dashboard](https://github.com/Dreamacro/clash-dashboard)
 
-The site [http://yacd.haishan.me](http://yacd.haishan.me) is served with HTTP not HTTPS is because many browsers blocking request to HTTP resources from a HTTPS website. If you think it's not safe or has security concern, you can actually download the [zip of the gh-pages](https://github.com/haishanh/yacd/archive/gh-pages.zip), unzip and open `index.html` directly.
+The site [http://yacd.haishan.me](http://yacd.haishan.me) is served with HTTP not HTTPS is because many browsers block requests to HTTP resources from a HTTPS website. If you think it's not safe, you could just download the [zip of the gh-pages](https://github.com/haishanh/yacd/archive/gh-pages.zip), unzip and open or serve `index.html` directly.
 
 [Docker image](https://hub.docker.com/r/haishanh/yacd) is also available as `haishanh/yacd`.
 
-Extra note for Firefox users:
-
-**yacd** is using the [Fetch (Web) API][fetch-api] to stream chunked API response from Clash to draw the traffic chart. But currently the streaming feature in Firefox needs to be turned on manually. Here is how to:
-
-Visit `about:config`, search for `dom.streams.enabled` and `javascript.options.streams`, double click those items to turn them on.
-
-[fetch-api]: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
-
 ## Development
 
 ```sh

babel.config.js

@@ -10,7 +10,7 @@ const presets = [
       bugfixes: true,
     },
   ],
-  '@babel/preset-react',
+  ['@babel/preset-react', { runtime: 'automatic' }],
   '@babel/preset-flow',
   '@babel/preset-typescript',
 ];

package.json

@@ -34,37 +34,37 @@
   "dependencies": {
     "@babel/runtime": "^7.11.2",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
-    "@sentry/browser": "^5.23.0",
+    "@sentry/browser": "^5.25.0",
     "chart.js": "^2.9.2",
     "clsx": "^1.1.0",
     "core-js": "^3.6.2",
     "date-fns": "^2.16.0",
-    "framer-motion": "^2.6.13",
+    "fontsource-open-sans": "^3.0.9",
+    "fontsource-roboto-mono": "^3.0.3",
+    "framer-motion": "^2.8.0",
     "history": "^5.0.0",
     "immer": "^7.0.9",
     "invariant": "^2.2.4",
     "lodash-es": "^4.17.14",
     "memoize-one": "^5.1.1",
     "modern-normalize": "^1.0.0",
     "prop-types": "^15.5.10",
-    "react": "0.0.0-experimental-241c4467e",
-    "react-dom": "0.0.0-experimental-241c4467e",
+    "react": "0.0.0-experimental-94c0244ba",
+    "react-dom": "0.0.0-experimental-94c0244ba",
     "react-feather": "^2.0.3",
     "react-icons": "^3.10.0",
     "react-modal": "^3.11.1",
-    "react-query": "^2.17.0",
+    "react-query": "^2.23.1",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
     "react-switch": "^5.0.1",
-    "react-table": "^7.5.0",
+    "react-table": "^7.6.0",
     "react-tabs": "^3.1.0",
     "react-tiny-fab": "^3.5.0",
     "react-window": "^1.8.5",
-    "recoil": "^0.0.10",
+    "recoil": "^0.0.13",
     "regenerator-runtime": "^0.13.7",
-    "reselect": "^4.0.0",
-    "typeface-open-sans": "^0.0.75",
-    "typeface-roboto-mono": "^0.0.75"
+    "reselect": "^4.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -79,54 +79,54 @@
     "@hsjs/react-refresh-webpack-plugin": "^0.1.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.2",
     "@types/invariant": "^2.2.33",
-    "@types/jest": "^26.0.9",
+    "@types/jest": "^26.0.14",
     "@types/lodash-es": "^4.17.3",
-    "@types/react": "^16.9.48",
+    "@types/react": "^16.9.51",
     "@types/react-dom": "^16.9.8",
-    "@typescript-eslint/eslint-plugin": "^4.1.0",
-    "@typescript-eslint/parser": "^4.1.0",
-    "autoprefixer": "^9.8.6",
+    "@typescript-eslint/eslint-plugin": "^4.4.0",
+    "@typescript-eslint/parser": "^4.4.0",
+    "autoprefixer": "^10.0.0",
     "babel-eslint": "10.x",
     "babel-loader": "^8.0.5",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.0.4",
+    "copy-webpack-plugin": "^6.2.1",
     "css-loader": "^4.3.0",
     "cssnano": "^4.1.7",
-    "eslint": "^7.9.0",
+    "eslint": "^7.11.0",
     "eslint-config-airbnb-base": "^14.1.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-config-react-app": "^5.2.1",
-    "eslint-import-resolver-webpack": "^0.12.2",
+    "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-flowtype": "^5.2.0",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jest": "^24.0.1",
+    "eslint-plugin-import": "^2.22.1",
+    "eslint-plugin-jest": "^24.1.0",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react": "^7.21.4",
     "eslint-plugin-react-hooks": "^4.1.2",
     "eslint-plugin-simple-import-sort": "^5.0.3",
-    "file-loader": "^6.0.0",
+    "file-loader": "^6.1.1",
     "fork-ts-checker-notifier-webpack-plugin": "^3.0.0",
     "fork-ts-checker-webpack-plugin": "^5.2.0",
-    "html-webpack-plugin": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
     "husky": "^4.3.0",
-    "lint-staged": "^10.2.13",
-    "mini-css-extract-plugin": "^0.11.2",
-    "postcss": "^7.0.32",
+    "lint-staged": "^10.4.0",
+    "mini-css-extract-plugin": "^0.12.0",
+    "postcss": "^8.1.1",
     "postcss-custom-media": "^7.0.8",
     "postcss-extend-rule": "^3.0.0",
     "postcss-import": "^12.0.1",
-    "postcss-loader": "^4.0.1",
-    "postcss-nested": "^4.2.3",
-    "postcss-simple-vars": "^5.0.2",
-    "prettier": "^2.1.1",
+    "postcss-loader": "^4.0.4",
+    "postcss-nested": "^5.0.0",
+    "postcss-simple-vars": "^6.0.0",
+    "prettier": "^2.1.2",
     "react-refresh": "^0.8.2",
     "resize-observer-polyfill": "^1.5.1",
-    "style-loader": "^1.2.1",
-    "terser-webpack-plugin": "^4.2.0",
-    "ts-loader": "^8.0.3",
-    "typescript": "^4.0.2",
-    "webpack": "^4.44.1",
-    "webpack-bundle-analyzer": "^3.6.0",
+    "style-loader": "^1.3.0",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^8.0.4",
+    "typescript": "4.1.0-beta",
+    "webpack": "^4.44.2",
+    "webpack-bundle-analyzer": "^3.9.0",
     "webpack-cli": "^3.3.12",
     "webpack-dev-middleware": "^3.7.2",
     "webpack-hot-middleware": "^2.22.2"

src/app.js

@@ -10,9 +10,7 @@ const rootEl = document.getElementById('app');
 
 Modal.setAppElement(rootEl);
 
-// ReactDOM.render(<Root />, rootEl);
-const { createRoot } = ReactDOM;
-const root = createRoot(rootEl);
+const root = ReactDOM.unstable_createRoot(rootEl);
 root.render(<Root />);
 
 // eslint-disable-next-line no-console

src/components/Root.css

@@ -1,39 +1,38 @@
+/* roboto-mono-latin-400-normal*/
 @font-face {
   font-family: 'Roboto Mono';
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: local('Roboto Mono Regular '), local('Roboto Mono-Regular'),
-    url('../../node_modules/typeface-roboto-mono/files/roboto-mono-latin-400.woff2')
-      format('woff2');
+  src: url('../../node_modules/fontsource-roboto-mono/files/roboto-mono-latin-400-normal.woff2')
+    format('woff2');
 }
 
+/* cat node_modules/fontsource-open-sans/latin-400-normal.css */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-display: swap;
   font-weight: 400;
-  src: local('Open Sans Regular '), local('Open Sans-Regular'),
-    url('../../node_modules/typeface-open-sans/files/open-sans-latin-400.woff2')
+  src: local('Open Sans Regular'), local('OpenSans-Regular'),
+    url('../../node_modules/fontsource-open-sans/files/open-sans-latin-400-normal.woff2')
       format('woff2');
 }
 
+/* cat node_modules/fontsource-open-sans/latin-700-normal.css */
 @font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-display: swap;
   font-weight: 700;
-  src: local('Open Sans Bold '), local('Open Sans-Bold'),
-    url('../../node_modules/typeface-open-sans/files/open-sans-latin-700.woff2')
+  src: local('Open Sans Bold'), local('OpenSans-Bold'),
+    url('../../node_modules/fontsource-open-sans/files/open-sans-latin-700-normal.woff2')
       format('woff2');
 }
 
 .relative {
   position: relative;
 }
-/* .absolute { */
-/*   position: absolute; */
-/* } */
 
 .border-left,
 .border-top,