Chore: use pnpm

.github/workflows/node.yml

@@ -8,25 +8,18 @@ jobs:
     steps:
     - name: Checkout Dashboard code
       uses: actions/checkout@v2
+    - uses: pnpm/action-setup@v2
+      with:
+        version: latest
     - name: Setup Nodejs
       uses: actions/setup-node@v2
       with:
         node-version: '16.x'
-    - name: Get yarn cache directory path
+        cache: pnpm
-      id: yarn-cache-dir-path
-      run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-    - name: Reuse Cache
-      uses: actions/cache@v2
-      id: yarn-cache
-      with:
-        path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-        key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          ${{ runner.os }}-yarn-
     - name: Install package and build
       run: |
-        yarn
+        pnpm install
-        yarn build
+        pnpm build
     - name: Deploy
       uses: crazy-max/ghaction-github-pages@v2
       with:

.gitignore

@@ -4,11 +4,3 @@ node_modules/
 src/**/*.jsx
 tests/__coverage__/
 tests/**/*.jsx
-
-.yarn/*
-!.yarn/patches
-!.yarn/releases
-!.yarn/plugins
-!.yarn/sdks
-!.yarn/versions
-.pnp.*

package.json

@@ -27,15 +27,15 @@
     "devDependencies": {
         "@babel/eslint-parser": "^7.15.7",
         "@types/lodash-es": "^4.17.5",
-        "@types/node": "^16.9.6",
+        "@types/node": "^16.10.2",
-        "@types/react": "^17.0.24",
+        "@types/react": "^17.0.26",
         "@types/react-dom": "^17.0.9",
         "@types/react-router-dom": "^5.3.0",
         "@types/react-table": "^7.7.5",
         "@types/react-virtualized-auto-sizer": "^1.0.1",
         "@types/react-window": "^1.8.5",
-        "@typescript-eslint/eslint-plugin": "^4.31.2",
+        "@typescript-eslint/eslint-plugin": "^4.32.0",
-        "@typescript-eslint/parser": "^4.31.2",
+        "@typescript-eslint/parser": "^4.32.0",
         "@vitejs/plugin-react": "^1.0.1",
         "eslint": "^7.32.0",
         "eslint-config-react-app": "^6.0.0",
@@ -46,19 +46,19 @@
         "eslint-plugin-jsx-a11y": "^6.4.1",
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-promise": "^5.1.0",
-        "eslint-plugin-react": "^7.26.0",
+        "eslint-plugin-react": "^7.26.1",
         "eslint-plugin-react-hooks": "^4.2.0",
         "sass": "^1.42.1",
         "type-fest": "^2.3.4",
         "typescript": "^4.4.3",
-        "vite": "^2.6.0-beta.2",
+        "vite": "^2.6.2",
         "vite-plugin-pwa": "^0.11.2",
-        "vite-plugin-windicss": "^1.4.5",
+        "vite-plugin-windicss": "^1.4.8",
         "vite-tsconfig-paths": "^3.3.14",
-        "windicss": "^3.1.7"
+        "windicss": "^3.1.8"
     },
     "dependencies": {
-        "axios": "^0.21.4",
+        "axios": "^0.22.0",
         "classnames": "^2.3.1",
         "dayjs": "^1.10.7",
         "eventemitter3": "^4.0.7",

vite.config.ts

@@ -4,32 +4,35 @@ import { VitePWA } from 'vite-plugin-pwa'
 import windiCSS from 'vite-plugin-windicss'
 import tsConfigPath from 'vite-tsconfig-paths'
 
-export default defineConfig({
+export default defineConfig(
-    plugins: [
+    env => ({
-        react({ babel: { compact: false } }),
+        plugins: [
-        tsConfigPath(),
+            // only use react-fresh
-        windiCSS(),
+            env.mode === 'development' && react(),
-        VitePWA({
+            tsConfigPath(),
-            injectRegister: 'inline',
+            windiCSS(),
-            manifest: {
+            VitePWA({
-                icons: [{
+                injectRegister: 'inline',
-                    src: '//cdn.jsdelivr.net/gh/Dreamacro/clash-dashboard/src/assets/Icon.png',
+                manifest: {
-                    sizes: '512x512',
+                    icons: [{
-                    type: 'image/png',
+                        src: '//cdn.jsdelivr.net/gh/Dreamacro/clash-dashboard/src/assets/Icon.png',
-                }],
+                        sizes: '512x512',
-                start_url: '/',
+                        type: 'image/png',
-                short_name: 'Clash Dashboard',
+                    }],
-                name: 'Clash Dashboard',
+                    start_url: '/',
-            },
+                    short_name: 'Clash Dashboard',
-        }),
+                    name: 'Clash Dashboard',
-    ],
+                },
-    base: './',
+            }),
-    css: {
+        ],
-        preprocessorOptions: {
+        base: './',
-            scss: {
+        css: {
-                additionalData: '@use "sass:math"; @import "src/styles/variables.scss";',
+            preprocessorOptions: {
+                scss: {
+                    additionalData: '@use "sass:math"; @import "src/styles/variables.scss";',
+                },
             },
         },
-    },
+        build: { reportCompressedSize: false },
-    build: { reportCompressedSize: false },
+    }),
-})
+)