build: upgrade deps

.eslintrc.yml

@@ -23,6 +23,7 @@ globals:
   __DEV__: true
 
 rules:
+  '@typescript-eslint/no-empty-interface': 'off'
   '@typescript-eslint/interface-name-prefix': 'off'
   '@typescript-eslint/explicit-function-return-type': 'off'
   '@typescript-eslint/no-explicit-any': 'off'

babel.config.js

@@ -5,7 +5,7 @@ const presets = [
       modules: false,
       // see also zloirock/core-js https://bit.ly/2JLnrgw
       useBuiltIns: 'usage',
-      corejs: '3.7',
+      corejs: '3.8.1',
       // new in babel 7.9.0 https://babeljs.io/blog/2020/03/16/7.9.0
       bugfixes: true,
     },

package.json

@@ -23,11 +23,11 @@
   "dependencies": {
     "@babel/runtime": "^7.12.5",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
-    "@reach/tooltip": "^0.11.2",
+    "@reach/tooltip": "^0.12.1",
     "@sentry/browser": "^5.28.0",
     "chart.js": "^2.9.2",
     "clsx": "^1.1.0",
-    "core-js": "^3.8.0",
+    "core-js": "^3.8.1",
     "date-fns": "^2.16.0",
     "fontsource-open-sans": "^3.0.9",
     "fontsource-roboto-mono": "^3.0.3",
@@ -47,7 +47,7 @@
     "react-feather": "^2.0.9",
     "react-helmet": "^6.1.0",
     "react-i18next": "^11.7.4",
-    "react-icons": "^3.10.0",
+    "react-icons": "^4.1.0",
     "react-modal": "^3.12.1",
     "react-query": "^2.26.3",
     "react-router": "6.0.0-beta.0",
@@ -55,16 +55,16 @@
     "react-switch": "^5.0.1",
     "react-table": "^7.6.2",
     "react-tabs": "^3.1.0",
-    "react-tiny-fab": "^3.5.0",
+    "react-tiny-fab": "^4.0.2",
     "react-window": "^1.8.5",
     "recoil": "^0.1.2",
     "regenerator-runtime": "^0.13.7",
     "reselect": "^4.0.0",
-    "workbox-core": "^5.1.4",
+    "workbox-core": "^6.0.2",
-    "workbox-expiration": "^5.1.4",
+    "workbox-expiration": "^6.0.2",
-    "workbox-precaching": "^5.1.4",
+    "workbox-precaching": "^6.0.2",
-    "workbox-routing": "^5.1.4",
+    "workbox-routing": "^6.0.2",
-    "workbox-strategies": "^5.1.4"
+    "workbox-strategies": "^6.0.2"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -84,7 +84,6 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
     "@types/react-modal": "^3.10.6",
-    "@types/react-table": "^7.0.25",
     "@types/react-tabs": "^2.3.2",
     "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@typescript-eslint/parser": "^4.9.0",
@@ -96,9 +95,9 @@
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^1.1.5",
     "cssnano": "^4.1.7",
-    "eslint": "^7.14.0",
+    "eslint": "^7.15.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^6.11.0",
+    "eslint-config-prettier": "^7.0.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-flowtype": "^5.2.0",
@@ -110,15 +109,15 @@
     "eslint-plugin-simple-import-sort": "^6.0.1",
     "file-loader": "^6.1.1",
     "fork-ts-checker-notifier-webpack-plugin": "^3.0.0",
-    "fork-ts-checker-webpack-plugin": "^6.0.4",
+    "fork-ts-checker-webpack-plugin": "^6.0.5",
     "html-webpack-plugin": "^4.5.0",
-    "mini-css-extract-plugin": "^1.3.1",
+    "mini-css-extract-plugin": "^1.3.2",
-    "postcss": "^8.1.10",
+    "postcss": "^8.1.14",
     "postcss-custom-media": "^7.0.8",
     "postcss-extend-rule": "^3.0.0",
     "postcss-import": "^13.0.0",
     "postcss-loader": "^4.1.0",
-    "postcss-nested": "^5.0.0",
+    "postcss-nested": "^5.0.2",
     "postcss-simple-vars": "^6.0.0",
     "prettier": "^2.2.1",
     "react-refresh": "^0.9.0",
@@ -127,11 +126,11 @@
     "terser-webpack-plugin": "^5.0.0",
     "ts-loader": "^8.0.11",
     "typescript": "^4.1.2",
-    "webpack": "^5.9.0",
+    "webpack": "^5.10.0",
     "webpack-bundle-analyzer": "^4.2.0",
     "webpack-cli": "^4.2.0",
     "webpack-dev-middleware": "^4.0.2",
     "webpack-hot-middleware": "^2.22.2",
-    "workbox-webpack-plugin": "^5.1.4"
+    "workbox-webpack-plugin": "^6.0.2"
   }
 }

src/components/ConnectionTable.tsx

@@ -24,7 +24,7 @@ const columns = [
   { Header: 'Type', accessor: 'type' },
 ];
 
-function renderCell(cell) {
+function renderCell(cell: { column: { id: string }; value: number }) {
   switch (cell.column.id) {
     case 'start':
       return formatDistance(cell.value, 0);

src/components/Connections.tsx

@@ -243,7 +243,7 @@ function Conn({ apiConfig }) {
                       }
                     : {}
                 }
-                position={fabPosition}
+                style={fabPosition}
                 text={isRefreshPaused ? 'Resume Refresh' : 'Pause Refresh'}
                 onClick={toggleIsRefreshPaused}
               >

src/components/Root.css

@@ -89,6 +89,7 @@
     Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
     'PingFang SC', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
   --color-focus-blue: #1a73e8;
+  --btn-bg: #387cec;
 }
 
 body {

src/components/Rules.tsx

@@ -9,6 +9,8 @@ import { fetchRules } from 'src/api/rules';
 import { RuleProviderItem } from 'src/components/rules/RuleProviderItem';
 import { TextFilter } from 'src/components/rules/TextFilter';
 import { ruleFilterText } from 'src/store/rules';
+import { State } from 'src/store/types';
+import type { ClashAPIConfig } from 'src/types';
 
 import useRemainingViewPortHeight from '../hooks/useRemainingViewPortHeight';
 import { getClashAPIConfig } from '../store/app';
@@ -22,7 +24,7 @@ const { memo, useMemo, useCallback } = React;
 
 const paddingBottom = 30;
 
-function itemKey(index, { rules, provider }) {
+function itemKey(index: number, { rules, provider }) {
   const providerQty = provider.names.length;
 
   if (index < providerQty) {
@@ -33,7 +35,7 @@ function itemKey(index, { rules, provider }) {
 }
 
 function getItemSizeFactory({ provider }) {
-  return function getItemSize(idx) {
+  return function getItemSize(idx: number) {
     const providerQty = provider.names.length;
     if (idx < providerQty) {
       // provider
@@ -67,16 +69,20 @@ const Row = memo(({ index, style, data }) => {
   );
 }, areEqual);
 
-const mapState = (s) => ({
+const mapState = (s: State) => ({
   apiConfig: getClashAPIConfig(s),
 });
 
 export default connect(mapState)(Rules);
 
-function useRuleAndProvider(apiConfig) {
+function useRuleAndProvider(apiConfig: ClashAPIConfig) {
-  const { data: rules } = useQuery(['/rules', apiConfig], fetchRules, {
+  const { data: rules, isFetching } = useQuery(
+    ['/rules', apiConfig],
+    fetchRules,
+    {
       suspense: true,
-  });
+    }
+  );
   const { data: provider } = useQuery(
     ['/providers/rules', apiConfig],
     fetchRuleProviders,
@@ -85,11 +91,12 @@ function useRuleAndProvider(apiConfig) {
 
   const [filterText] = useRecoilState(ruleFilterText);
   if (filterText === '') {
-    return { rules, provider };
+    return { rules, provider, isFetching };
   } else {
     const f = filterText.toLowerCase();
     return {
       rules: rules.filter((r) => r.payload.toLowerCase().indexOf(f) >= 0),
+      isFetching,
       provider: {
         byName: provider.byName,
         names: provider.names.filter((t) => t.toLowerCase().indexOf(f) >= 0),
@@ -141,7 +148,7 @@ function Rules({ apiConfig }) {
       <Fab
         icon={refreshIcon}
         text="Refresh"
-        position={fabPosition}
+        style={fabPosition}
         onClick={invalidateQueries}
       />
     </div>

src/components/proxies/Proxies.module.css

@@ -34,30 +34,3 @@
     padding: 10px 40px;
   }
 }
-
-.spining {
-  position: relative;
-  border-radius: 50%;
-  background: linear-gradient(60deg, #e66465, #9198e5);
-}
-.spining:before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  border: 2px solid transparent;
-  border-top-color: currentColor;
-  border-radius: 50%;
-  animation: spining_keyframes 1s linear infinite;
-}
-
-@keyframes spining_keyframes {
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

src/components/proxies/Proxies.tsx

@@ -15,7 +15,7 @@ import {
 import Button from '../Button';
 import ContentHeader from '../ContentHeader';
 import BaseModal from '../shared/BaseModal';
-import { Fab, position as fabPosition } from '../shared/Fab';
+import { Fab, IsFetching, position as fabPosition } from '../shared/Fab';
 import { connect, useStoreActions } from '../StateProvider';
 import Equalizer from '../svg/Equalizer';
 import { ClosePrevConns } from './ClosePrevConns';
@@ -121,10 +121,18 @@ function Proxies({
       <ProxyProviderList items={proxyProviders} />
       <div style={{ height: 60 }} />
       <Fab
-        icon={isTestingLatency ? <ColorZap /> : <Zap width={16} height={16} />}
+        icon={
+          isTestingLatency ? (
+            <IsFetching>
+              <Zap width={16} height={16} />
+            </IsFetching>
+          ) : (
+            <Zap width={16} height={16} />
+          )
+        }
         onClick={requestDelayAllFn}
         text={t('Test Latency')}
-        position={fabPosition}
+        style={fabPosition}
       />
       <BaseModal
         isOpen={showModalClosePrevConns}
@@ -139,23 +147,6 @@ function Proxies({
   );
 }
 
-function ColorZap() {
-  return (
-    <div
-      className={s0.spining}
-      style={{
-        width: 48,
-        height: 48,
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }}
-    >
-      <Zap width={16} height={16} />
-    </div>
-  );
-}
-
 const mapState = (s) => ({
   apiConfig: getClashAPIConfig(s),
   groupNames: getProxyGroupNames(s),

src/components/rules/RuleProviderItem.module.css

@@ -31,6 +31,7 @@
 }
 .isRotating {
   animation: rotating 3s infinite linear;
+  animation-fill-mode: forwards;
 }
 
 @keyframes rotating {

src/components/shared/Fab.module.css

@@ -0,0 +1,33 @@
+.spining {
+  position: relative;
+  border-radius: 50%;
+  background: linear-gradient(60deg, #e66465, #9198e5);
+
+  width: 48px;
+  height: 48px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.spining:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  border: 2px solid transparent;
+  border-top-color: currentColor;
+  border-radius: 50%;
+  animation: spining_keyframes 1s linear infinite;
+}
+
+@keyframes spining_keyframes {
+  0% {
+    transform: rotate(0);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

src/components/shared/Fab.ts

@@ -1,10 +0,0 @@
-import './rtf.css';
-
-import { Action, Fab } from 'react-tiny-fab';
-
-export const position = {
-  right: 10,
-  bottom: 10,
-};
-
-export { Fab, Action };

src/components/shared/Fab.tsx

@@ -0,0 +1,17 @@
+import './rtf.css';
+
+import * as React from 'react';
+import { Action, Fab } from 'react-tiny-fab/dist';
+
+import s from './Fab.module.css';
+
+export function IsFetching({ children }: { children: React.ReactNode }) {
+  return <span className={s.spining}>{children}</span>;
+}
+
+export const position = {
+  right: 10,
+  bottom: 10,
+};
+
+export { Fab, Action };

src/components/shared/rtf.css

@@ -11,13 +11,7 @@
   padding-left: 0;
   list-style: none;
 }
-.rtf.open .rtf--mb > * {
-  /* transform-origin: center center; */
-  /* transform: rotate(360deg); */
-  transition: ease-in-out transform 0.2s;
-}
 .rtf.open .rtf--mb {
-  background: rgba(56, 124, 236, 0.92);
   box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
     0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
 }
@@ -114,10 +108,10 @@
 }
 
 .rtf--mb {
-  height: 48px;
   width: 48px;
+  height: 48px;
+  background: var(--btn-bg);
   z-index: 9999;
-  background: #387cec;
   display: inline-flex;
   justify-content: center;
   align-items: center;

src/custom.d.ts

@@ -20,3 +20,47 @@ declare const process = {
     PUBLIC_URL: string,
   },
 };
+
+declare module 'react-table' {
+  interface TableOptions {}
+
+  interface Empty {}
+
+  interface SortByToggleProps {}
+
+  interface Header {
+    getHeaderProps(p: SortByToggleProps): { role?: string };
+    getSortByToggleProps(): SortByToggleProps;
+    render(x: string): string;
+    isSorted: boolean;
+    isSortedDesc: boolean;
+  }
+
+  interface HeaderGroup {
+    getHeaderGroupProps(): { role?: string };
+    headers: Header[];
+  }
+
+  interface Cell {
+    getCellProps(): { role?: string };
+
+    column: { id: string };
+    value: number;
+  }
+
+  interface Row {
+    cells: Cell[];
+  }
+
+  export function useTable(
+    options: TableOptions,
+    useSortBy: useSortBy
+  ): {
+    headerGroups: HeaderGroup[];
+    getTableProps(): { role?: string };
+    rows: Row[];
+    prepareRow(r: Row): void;
+  };
+
+  export function useSortBy(): Empty;
+}

src/index.template.ejs

@@ -1,15 +1,15 @@
 <!DOCTYPE html>
-<html lang="en">
+<html>
   <head>
-  <meta charset="UTF-8">
+    <meta charset="UTF-8" />
-  <link rel="shortcut icon" href="yacd.ico">
+    <link rel="shortcut icon" href="yacd.ico" />
-  <link rel="icon" type="image/png" sizes="64x64" href="yacd-64.png">
+    <link rel="icon" type="image/png" sizes="64x64" href="yacd-64.png" />
-  <link rel="icon" type="image/png" sizes="128x128" href="yacd-128.png">
+    <link rel="icon" type="image/png" sizes="128x128" href="yacd-128.png" />
-  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-  <meta name=viewport content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <meta name="application-name" content="yacd">
+    <meta name="application-name" content="yacd" />
-  <meta name="description" content="Yet Another Clash Dashboard">
+    <meta name="description" content="Yet Another Clash Dashboard" />
-  <meta name="theme-color" content="#202020">
+    <meta name="theme-color" content="#202020" />
     <title><%= htmlWebpackPlugin.options.title %></title>
   </head>
   <body>

src/misc/i18n.ts

@@ -32,6 +32,7 @@ i18next
 
         switch (url) {
           case '/__zh/translation.json':
+          case '/__zh-CN/translation.json':
             p = allLocales.zh;
             break;
           case '/__en/translation.json':
@@ -47,7 +48,7 @@ i18next
         }
       },
     },
-    supportedLngs: ['en', 'zh'],
+    supportedLngs: ['en', 'zh-CN'],
     fallbackLng: 'en',
     interpolation: {
       escapeValue: false,