build: upgrade deps

package.json

@@ -24,21 +24,21 @@
     "@babel/runtime": "^7.12.5",
     "@hsjs/react-cache": "0.0.0-alpha.aa94237",
     "@reach/tooltip": "^0.12.1",
-    "@sentry/browser": "^5.28.0",
+    "@sentry/browser": "^5.29.2",
     "chart.js": "^2.9.2",
     "clsx": "^1.1.0",
-    "core-js": "^3.8.1",
+    "core-js": "^3.8.2",
     "date-fns": "^2.16.0",
-    "fontsource-open-sans": "^3.0.9",
+    "fontsource-open-sans": "^4.0.0",
-    "fontsource-roboto-mono": "^3.0.3",
+    "fontsource-roboto-mono": "^4.0.0",
-    "framer-motion": "^2.9.5",
+    "framer-motion": "^3.1.2",
     "history": "^5.0.0",
     "i18next": "^19.8.4",
     "i18next-browser-languagedetector": "^6.0.1",
     "i18next-http-backend": "^1.0.21",
     "immer": "^8.0.0",
     "invariant": "^2.2.4",
-    "lodash-es": "^4.17.14",
+    "lodash-es": "^4.17.20",
     "memoize-one": "^5.1.1",
     "modern-normalize": "^1.0.0",
     "prop-types": "^15.5.10",
@@ -46,15 +46,15 @@
     "react-dom": "0.0.0-experimental-94c0244ba",
     "react-feather": "^2.0.9",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^11.7.4",
+    "react-i18next": "^11.8.5",
     "react-icons": "^4.1.0",
     "react-modal": "^3.12.1",
-    "react-query": "^2.26.3",
+    "react-query": "^3.5.9",
     "react-router": "6.0.0-beta.0",
     "react-router-dom": "6.0.0-beta.0",
     "react-switch": "^5.0.1",
     "react-table": "^7.6.2",
-    "react-tabs": "^3.1.0",
+    "react-tabs": "^3.1.2",
     "react-tiny-fab": "^4.0.2",
     "react-window": "^1.8.5",
     "recoil": "^0.1.2",
@@ -67,68 +67,70 @@
     "workbox-strategies": "^6.0.2"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.9",
+    "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.7.4",
     "@babel/plugin-proposal-do-expressions": "^7.7.4",
     "@babel/plugin-syntax-dynamic-import": "^7.7.4",
-    "@babel/plugin-transform-runtime": "^7.11.0",
+    "@babel/plugin-transform-runtime": "^7.12.10",
-    "@babel/preset-env": "^7.12.7",
+    "@babel/preset-env": "^7.12.11",
     "@babel/preset-flow": "^7.7.4",
-    "@babel/preset-react": "^7.12.7",
+    "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@types/invariant": "^2.2.33",
-    "@types/jest": "^26.0.16",
+    "@types/jest": "^26.0.19",
-    "@types/lodash-es": "^4.17.3",
+    "@types/lodash-es": "^4.17.4",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
     "@types/react-modal": "^3.10.6",
     "@types/react-tabs": "^2.3.2",
-    "@typescript-eslint/eslint-plugin": "^4.9.0",
+    "@types/react-window": "^1.8.2",
-    "@typescript-eslint/parser": "^4.9.0",
+    "@typescript-eslint/eslint-plugin": "^4.11.1",
-    "autoprefixer": "^10.0.4",
+    "@typescript-eslint/parser": "^4.11.1",
+    "autoprefixer": "^10.1.0",
     "babel-eslint": "10.x",
     "babel-loader": "^8.2.2",
     "clean-webpack-plugin": "^3.0.0",
-    "copy-webpack-plugin": "^6.3.2",
+    "copy-webpack-plugin": "^7.0.0",
     "css-loader": "^5.0.1",
     "css-minimizer-webpack-plugin": "^1.1.5",
     "cssnano": "^4.1.7",
-    "eslint": "^7.15.0",
+    "eslint": "^7.17.0",
     "eslint-config-airbnb-base": "^14.2.1",
-    "eslint-config-prettier": "^7.0.0",
+    "eslint-config-prettier": "^7.1.0",
     "eslint-config-react-app": "^6.0.0",
     "eslint-import-resolver-webpack": "^0.13.0",
     "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jest": "^24.1.3",
     "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-react": "^7.21.4",
+    "eslint-plugin-react": "^7.22.0",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-simple-import-sort": "^6.0.1",
+    "eslint-plugin-simple-import-sort": "^7.0.0",
+    "express": "^4.17.1",
     "file-loader": "^6.1.1",
     "fork-ts-checker-notifier-webpack-plugin": "^3.0.0",
-    "fork-ts-checker-webpack-plugin": "^6.0.5",
+    "fork-ts-checker-webpack-plugin": "^6.0.8",
-    "html-webpack-plugin": "^4.5.0",
+    "html-webpack-plugin": "^4.5.1",
-    "mini-css-extract-plugin": "^1.3.2",
+    "mini-css-extract-plugin": "^1.3.3",
-    "postcss": "^8.1.14",
+    "postcss": "^8.2.2",
     "postcss-custom-media": "^7.0.8",
     "postcss-extend-rule": "^3.0.0",
-    "postcss-import": "^13.0.0",
+    "postcss-import": "^14.0.0",
     "postcss-loader": "^4.1.0",
-    "postcss-nested": "^5.0.2",
+    "postcss-nested": "^5.0.3",
-    "postcss-simple-vars": "^6.0.0",
+    "postcss-simple-vars": "^6.0.2",
     "prettier": "^2.2.1",
     "react-refresh": "^0.9.0",
     "resize-observer-polyfill": "^1.5.1",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^5.0.0",
-    "ts-loader": "^8.0.11",
+    "ts-loader": "^8.0.13",
-    "typescript": "^4.1.2",
+    "typescript": "^4.1.3",
-    "webpack": "^5.10.0",
+    "webpack": "^5.11.1",
-    "webpack-bundle-analyzer": "^4.2.0",
+    "webpack-bundle-analyzer": "^4.3.0",
-    "webpack-cli": "^4.2.0",
+    "webpack-cli": "^4.3.1",
     "webpack-dev-middleware": "^4.0.2",
     "webpack-hot-middleware": "^2.22.2",
     "workbox-webpack-plugin": "^6.0.2"

src/components/Root.tsx

@@ -1,11 +1,13 @@
 import './Root.css';
 
 import React, { lazy, Suspense } from 'react';
+import { QueryClientProvider } from 'react-query';
 import { PartialRouteObject } from 'react-router';
 import { HashRouter as Router, useRoutes } from 'react-router-dom';
 import { RecoilRoot } from 'recoil';
 import { About } from 'src/components/about/About';
 import { Head } from 'src/components/shared/Head';
+import { queryClient } from 'src/misc/query';
 
 import { actions, initialState } from '../store';
 import APIConfig from './APIConfig';
@@ -99,14 +101,16 @@ const Root = () => (
   <ErrorBoundary>
     <RecoilRoot>
       <StateProvider initialState={initialState} actions={actions}>
-        <Router>
+        <QueryClientProvider client={queryClient}>
-          <div className={s0.app}>
+          <Router>
-            <Head />
+            <div className={s0.app}>
-            <Suspense fallback={<Loading2 />}>
+              <Head />
-              <App />
+              <Suspense fallback={<Loading2 />}>
-            </Suspense>
+                <App />
-          </div>
+              </Suspense>
-        </Router>
+            </div>
+          </Router>
+        </QueryClientProvider>
       </StateProvider>
     </RecoilRoot>
   </ErrorBoundary>

src/components/Rules.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { RotateCw } from 'react-feather';
 import { useTranslation } from 'react-i18next';
-import { queryCache, useQuery } from 'react-query';
+import { useQuery, useQueryClient } from 'react-query';
 import { areEqual, VariableSizeList } from 'react-window';
 import { useRecoilState } from 'recoil';
 import { fetchRuleProviders } from 'src/api/rule-provider';
@@ -76,17 +76,11 @@ const mapState = (s: State) => ({
 export default connect(mapState)(Rules);
 
 function useRuleAndProvider(apiConfig: ClashAPIConfig) {
-  const { data: rules, isFetching } = useQuery(
+  const { data: rules, isFetching } = useQuery(['/rules', apiConfig], () =>
-    ['/rules', apiConfig],
+    fetchRules('/rules', apiConfig)
-    fetchRules,
-    {
-      suspense: true,
-    }
   );
-  const { data: provider } = useQuery(
+  const { data: provider } = useQuery(['/providers/rules', apiConfig], () =>
-    ['/providers/rules', apiConfig],
+    fetchRuleProviders('/providers/rules', apiConfig)
-    fetchRuleProviders,
-    { suspense: true }
   );
 
   const [filterText] = useRecoilState(ruleFilterText);
@@ -106,10 +100,11 @@ function useRuleAndProvider(apiConfig: ClashAPIConfig) {
 }
 
 function useInvalidateQueries() {
+  const queryClient = useQueryClient();
   return useCallback(() => {
-    queryCache.invalidateQueries('/rules');
+    queryClient.invalidateQueries('/rules');
-    queryCache.invalidateQueries('/providers/rules');
+    queryClient.invalidateQueries('/providers/rules');
-  }, []);
+  }, [queryClient]);
 }
 
 function Rules({ apiConfig }) {

src/components/about/About.tsx

@@ -43,12 +43,8 @@ function Version({
 }
 
 function AboutImpl(props: Props) {
-  const { data: version } = useQuery(
+  const { data: version } = useQuery(['/version', props.apiConfig], () =>
-    ['/version', props.apiConfig],
+    fetchVersion('/version', props.apiConfig)
-    fetchVersion,
-    {
-      suspense: true,
-    }
   );
   return (
     <>

src/components/rules/RuleProviderItem.tsx

@@ -2,7 +2,7 @@ import cx from 'clsx';
 import { formatDistance } from 'date-fns';
 import * as React from 'react';
 import { RotateCw } from 'react-feather';
-import { queryCache, useMutation } from 'react-query';
+import { useMutation, useQueryClient } from 'react-query';
 import { refreshRuleProviderByName } from 'src/api/rule-provider';
 import Button from 'src/components/Button';
 import { SectionNameType } from 'src/components/shared/Basic';
@@ -14,9 +14,10 @@ function useRefresh(
   name: string,
   apiConfig: ClashAPIConfig
 ): [(ev: React.MouseEvent<HTMLButtonElement>) => unknown, boolean] {
-  const [mutate, { isLoading }] = useMutation(refreshRuleProviderByName, {
+  const queryClient = useQueryClient();
+  const { mutate, isLoading } = useMutation(refreshRuleProviderByName, {
     onSuccess: () => {
-      queryCache.invalidateQueries('/providers/rules');
+      queryClient.invalidateQueries('/providers/rules');
     },
   });
 

src/misc/query.ts

@@ -0,0 +1,11 @@
+import { QueryCache, QueryClient } from 'react-query';
+
+const queryCache = new QueryCache();
+export const queryClient = new QueryClient({
+  queryCache,
+  defaultOptions: {
+    queries: {
+      suspense: true,
+    },
+  },
+});

webpack.config.js

@@ -72,7 +72,7 @@ const plugins = [
     title: 'TypeScript',
     excludeWarnings: false,
   }),
-  new CopyPlugin({ patterns: [{ from: 'assets/*', flatten: true }] }),
+  new CopyPlugin({ patterns: [{ from: 'assets' }] }),
   new CleanWebpackPlugin(),
   // chart.js requires moment
   // and we don't need locale stuff in moment