chore(deps): ⬆️ upgrade deps (#42)

* chore(deps): ⬆️ upgrade deps

* chore: update tsconfig.json

.eslintrc

@@ -1,10 +0,0 @@
-{
-  "extends": [
-    "@antfu"
-  ],
-
-  "rules": {
-    "brace-style": "off",
-    "@typescript-eslint/brace-style": "off"
-  }
-}

.vscode/settings.json

@@ -1,7 +1,41 @@
 {
+  // Enable the ESlint flat config support
+  "eslint.experimental.useFlatConfig": true,
+
+  // Disable the default formatter, use eslint instead
   "prettier.enable": false,
   "editor.formatOnSave": false,
+
+  // Auto fix
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true
+    "source.fixAll": "explicit",
-  }
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off" },
+    { "rule": "*-indent", "severity": "off" },
+    { "rule": "*-spacing", "severity": "off" },
+    { "rule": "*-spaces", "severity": "off" },
+    { "rule": "*-order", "severity": "off" },
+    { "rule": "*-dangle", "severity": "off" },
+    { "rule": "*-newline", "severity": "off" },
+    { "rule": "*quotes", "severity": "off" },
+    { "rule": "*semi", "severity": "off" }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml"
+  ]
 }

auto-imports.d.ts

@@ -1,4 +1,8 @@
-// Generated by 'unplugin-auto-import'
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
@@ -56,6 +60,7 @@ declare global {
   const toRaw: typeof import('vue')['toRaw']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
   const triggerRef: typeof import('vue')['triggerRef']
   const unref: typeof import('vue')['unref']
   const useAttrs: typeof import('vue')['useAttrs']
@@ -72,3 +77,8 @@ declare global {
   const watchPostEffect: typeof import('vue')['watchPostEffect']
   const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+}

build/mock/createMockServer.js

@@ -1,11 +1,13 @@
-const { join } = require('path')
+/* eslint-disable node/prefer-global/process */
-const url = require('url')
+const { join } = require('node:path')
+const url = require('node:url')
 const chokidar = require('chokidar')
 const signale = require('signale')
 const { match } = require('path-to-regexp')
 const { initMock, getMatchMock } = require('./getMockData')
 const { winPath } = require('./utils')
 const { configBabelRegister } = require('./registerBabel')
+
 let watcher
 function getPaths(cwd) {
   const winCwd = winPath(cwd)
@@ -95,7 +97,8 @@ module.exports = function (opts) {
           let queryParams = {}
 
           if (req.url)
-            // eslint-disable-next-line n/no-deprecated-api
+
+            // eslint-disable-next-line node/no-deprecated-api
             queryParams = url.parse(req.url, true)
 
           const reqUrl = queryParams.pathname

build/mock/getMockData.js

@@ -1,9 +1,11 @@
-const path = require('path')
+const path = require('node:path')
 const glob = require('glob')
 const { pathToRegexp } = require('path-to-regexp')
 const signale = require('signale')
 const { winPath } = require('./utils')
+
 let _mockconfig = {}
+// eslint-disable-next-line node/prefer-global/process
 const cwd = process.cwd()
 let mockList = []
 // 获取mock文件列表

build/mock/registerBabel.js

@@ -1,6 +1,8 @@
-const { join, isAbsolute } = require('path')
+/* eslint-disable node/prefer-global/process */
-const { existsSync } = require('fs')
+const { join, isAbsolute } = require('node:path')
+const { existsSync } = require('node:fs')
 const { winPath } = require('./utils')
+
 let files = null
 
 function initFiles(cwd) {

components.d.ts

@@ -1,11 +1,11 @@
-// generated by unplugin-vue-components
+/* eslint-disable */
-// We suggest you to commit this file into source control
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     Chart: typeof import('./src/components/chart/index.vue')['default']
     VanButton: typeof import('vant/es')['Button']

eslint.config.js

@@ -0,0 +1,3 @@
+const antfu = require('@antfu/eslint-config').default
+
+module.exports = antfu()

package.json

@@ -17,59 +17,59 @@
   },
   "dependencies": {
     "@vant/touch-emulator": "^1.4.0",
-    "@vant/use": "^1.5.1",
+    "@vant/use": "^1.6.0",
-    "axios": "^1.4.0",
+    "axios": "^1.5.1",
-    "echarts": "^5.4.2",
+    "echarts": "^5.4.3",
     "lodash-es": "^4.17.21",
     "nprogress": "^0.2.0",
-    "pinia": "^2.1.3",
+    "pinia": "^2.1.7",
-    "pinia-plugin-persistedstate": "^3.1.0",
+    "pinia-plugin-persistedstate": "^3.2.0",
     "resize-detector": "^0.3.0",
     "store": "^2.0.12",
-    "vant": "^4.4.1",
+    "vant": "^4.7.2",
     "vconsole": "^3.15.1",
-    "vue": "^3.3.4",
+    "vue": "^3.3.6",
-    "vue-router": "^4.2.2",
+    "vue-router": "^4.2.5",
     "vue-router-better-scroller": "^0.0.0"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^0.33.1",
+    "@antfu/eslint-config": "1.0.0-beta.28",
-    "@babel/core": "^7.22.1",
+    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.22.4",
+    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/preset-typescript": "^7.23.2",
-    "@babel/register": "^7.21.0",
+    "@babel/register": "^7.22.15",
-    "@types/lodash-es": "^4.17.7",
+    "@types/lodash-es": "^4.17.10",
-    "@types/node": "^18.16.16",
+    "@types/node": "^20.8.7",
-    "@types/nprogress": "^0.2.0",
+    "@types/nprogress": "^0.2.2",
-    "@types/store": "^2.0.2",
+    "@types/store": "^2.0.4",
-    "@vitejs/plugin-legacy": "^3.0.2",
+    "@vitejs/plugin-legacy": "^4.1.1",
-    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vitejs/plugin-vue-jsx": "^3.0.2",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
-    "babel-plugin-module-resolver": "^4.1.0",
+    "babel-plugin-module-resolver": "^5.0.0",
     "commitizen": "^4.3.0",
-    "consola": "^2.15.3",
+    "consola": "^3.2.3",
     "cross-env": "^7.0.3",
     "cz-emoji-chinese": "^0.3.1",
-    "eslint": "^8.42.0",
+    "eslint": "^8.52.0",
     "husky": "^8.0.3",
-    "less": "^4.1.3",
+    "less": "^4.2.0",
     "mockjs": "^1.1.0",
     "path-to-regexp": "^6.2.1",
-    "plop": "^3.1.2",
+    "plop": "^4.0.0",
-    "postcss-mobile-forever": "^3.3.2",
+    "postcss-mobile-forever": "^4.0.0",
-    "rollup": "^3.24.0",
+    "rollup": "^4.1.4",
-    "rollup-plugin-visualizer": "^5.9.0",
+    "rollup-plugin-visualizer": "^5.9.2",
     "signale": "^1.4.0",
     "slash2": "^2.0.0",
-    "terser": "^5.17.7",
+    "terser": "^5.22.0",
-    "typescript": "^4.9.5",
+    "typescript": "^5.2.2",
-    "unplugin-auto-import": "^0.12.2",
+    "unplugin-auto-import": "^0.16.6",
-    "unplugin-vue-components": "^0.22.12",
+    "unplugin-vue-components": "^0.25.2",
-    "vite": "^4.3.9",
+    "vite": "^4.5.0",
-    "vite-plugin-vconsole": "^1.3.1",
+    "vite-plugin-vconsole": "^2.0.1",
-    "vitest": "^0.25.8",
+    "vitest": "^0.34.6",
-    "vue-tsc": "^1.6.5"
+    "vue-tsc": "^1.8.19"
   },
   "pnpm": {
     "peerDependencyRules": {

plop-templates/component/prompt.js

@@ -7,8 +7,7 @@ module.exports = {
     name: 'name',
     message: 'component name please',
     validate: notEmpty('name'),
-  },
+  }, {
-  {
     type: 'checkbox',
     name: 'blocks',
     message: 'Blocks:',
@@ -16,26 +15,22 @@ module.exports = {
       name: '<template>',
       value: 'template',
       checked: true,
-    },
+    }, {
-    {
       name: '<script>',
       value: 'script',
       checked: true,
-    },
+    }, {
-    {
       name: 'style',
       value: 'style',
       checked: true,
-    },
+    }],
-    ],
     validate(value) {
       if (!value.includes('script') && !value.includes('template'))
         return 'Components require at least a <script> or <template> tag.'
 
       return true
     },
-  },
+  }],
-  ],
   actions: (data) => {
     const name = '{{properCase name}}'
     const actions = [{

plop-templates/view/prompt.js

@@ -7,8 +7,7 @@ module.exports = {
     name: 'name',
     message: 'view name please',
     validate: notEmpty('name'),
-  },
+  }, {
-  {
     type: 'checkbox',
     name: 'blocks',
     message: 'Blocks:',
@@ -16,26 +15,22 @@ module.exports = {
       name: '<template>',
       value: 'template',
       checked: true,
-    },
+    }, {
-    {
       name: '<script>',
       value: 'script',
       checked: true,
-    },
+    }, {
-    {
       name: 'style',
       value: 'style',
       checked: true,
-    },
+    }],
-    ],
     validate(value) {
       if (!value.includes('script') && !value.includes('template'))
         return 'View require at least a <script> or <template> tag.'
 
       return true
     },
-  },
+  }],
-  ],
   actions: (data) => {
     const name = '{{name}}'
     const actions = [{

plopfile.js

@@ -1,5 +1,6 @@
 const viewGenerator = require('./plop-templates/view/prompt')
 const componentGenerator = require('./plop-templates/component/prompt')
+
 module.exports = function (plop) {
   plop.setGenerator('view', viewGenerator)
   plop.setGenerator('component', componentGenerator)

scripts/verifyCommit.js

@@ -1,4 +1,5 @@
-const msg = require('fs').readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()
+const msg = require('node:fs').readFileSync('.git/COMMIT_EDITMSG', 'utf-8').trim()
+
 const commitRE = /^(revert: )?(feat|fix|docs|dx|style|refactor|perf|test|workflow|build|ci|chore|types|wip|release)(\(.+\))?: .{1,50}/
 const mergeRe = /^(Merge pull request|Merge branch)/
 
@@ -6,8 +7,10 @@ if (!commitRE.test(msg)) {
   if (!mergeRe.test(msg)) {
     console.log('git commit unpass')
     console.error('git commit error, needs title(scope): desc')
+    // eslint-disable-next-line node/prefer-global/process
     process.exit(1)
   }
-} else {
+}
+else {
   console.log('git commit pass')
 }

src/App.vue

@@ -24,7 +24,7 @@ provide('isRealDark', computed(() => theme.value === 'dark'))
 </script>
 
 <template>
-  <van-config-provider :theme="theme">
+  <VanConfigProvider :theme="theme">
-    <router-view />
+    <RouterView />
-  </van-config-provider>
+  </VanConfigProvider>
 </template>

src/components/chart/index.vue

@@ -14,13 +14,13 @@ echarts.registerTheme('dark-chart', dark)
 const chartDom = ref<HTMLDivElement>()
 let chart: ECharts | null = null
 const isRealDark = inject('isRealDark', ref(false))
-const resizeChart = () => {
+function resizeChart() {
   chart?.resize()
 }
 
 const resize = debounce(resizeChart, 300)
 
-const disposeChart = () => {
+function disposeChart() {
   if (chartDom.value)
     removeListener(chartDom.value, resize)
 
@@ -28,7 +28,7 @@ const disposeChart = () => {
   chart = null
 }
 
-const initChart = () => {
+function initChart() {
   disposeChart()
   if (chartDom.value) {
     // init echarts

src/env.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="vite/client" />
 
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue';
+  import type { DefineComponent } from 'vue'
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+
-  const component: DefineComponent<{}, {}, any>;
+  // eslint-disable-next-line ts/ban-types
-  export default component;
+  const component: DefineComponent<{}, {}, any>
+  export default component
 }

src/router/index.ts

@@ -7,6 +7,7 @@ import 'nprogress/nprogress.css'
 import mian from '@/views/index.vue'
 import mock from '@/views/mock/index.vue'
 import charts from '@/views/charts/index.vue'
+
 NProgress.configure({ showSpinner: true, parent: '#app' })
 
 // 定义路由，每个路由都需要映射到一个组件
@@ -30,6 +31,7 @@ const routes = [
 
 // 创建路由实例并传递 `routes` 配置
 const router = createRouter({
+  // eslint-disable-next-line node/prefer-global/process
   history: createWebHistory(process.env.VUE_APP_PUBLIC_PATH),
   routes,
 })

src/typing.ts

@@ -1,2 +1,3 @@
 import type { Ref } from 'vue'
+
 export type MaybeRef<T> = T | Ref<T>

src/utils/hooks/useFetchData.ts

@@ -57,7 +57,7 @@ export const defaultContext: Context<any> = {
 }
 
 // 如果请求数据中，没有分页，仅单列表数据，可以使用该方法进行包装，免去重复写请求方法
-export const wrap = (req: () => Promise<any[]>): (() => Promise<ReponseData<any>>) => {
+export function wrap(req: () => Promise<any[]>): (() => Promise<ReponseData<any>>) {
   return () =>
     req().then((res) => {
       const data = res
@@ -69,7 +69,7 @@ export const wrap = (req: () => Promise<any[]>): (() => Promise<ReponseData<any>
     })
 }
 
-const filterNoValidValue = (obj: Record<string, any> = {}) => {
+function filterNoValidValue(obj: Record<string, any> = {}) {
   const newObj = {}
   Object.keys(obj).forEach((k) => {
     if (obj[k] !== undefined && obj[k] !== '' && obj[k] !== null)
@@ -79,9 +79,7 @@ const filterNoValidValue = (obj: Record<string, any> = {}) => {
   return newObj
 }
 
-export const useFetchData = <T extends ReponseData<any>>(
+export function useFetchData<T extends ReponseData<any>>(getData: (params?: RequestParams) => Promise<T>, context: MaybeRef<{
-  getData: (params?: RequestParams) => Promise<T>,
-  context: MaybeRef<{
   stripe?: boolean
   current?: number
   pageSize?: number
@@ -91,15 +89,13 @@ export const useFetchData = <T extends ReponseData<any>>(
     [key: string]: any
   }>
   [key: string]: any
-  }> = reactive({ ...defaultContext }),
+}> = reactive({ ...defaultContext }), options?: {
-  options?: {
   current?: number
   pageSize?: number
   onLoad?: (dataSource: T['data']) => void
   onRequestError?: (e: Error) => void
   pagination?: boolean
-  },
+}): UseFetchDataAction<T> {
-): UseFetchDataAction<T> => {
   const state = reactive({ ...defaultContext } as Context<T>)
   const mergeContext = isReactive(context) || isRef(context) ? context : ref(context)
   watch(

src/utils/request.ts

@@ -13,6 +13,7 @@ export const REQUEST_TOKEN_KEY = 'Access-Token'
 // 创建 axios 实例
 const request = axios.create({
   // API 请求的默认前缀
+  // eslint-disable-next-line node/prefer-global/process
   baseURL: process.env.VUE_APP_API_BASE_URL,
   timeout: 6000, // 请求超时时间
 })
@@ -24,7 +25,7 @@ export type RequestError = AxiosError<{
 }>
 
 // 异常拦截处理器
-const errorHandler = (error: RequestError): Promise<any> => {
+function errorHandler(error: RequestError): Promise<any> {
   if (error.response) {
     const { data = {}, status, statusText } = error.response
     // 403 无权限
@@ -48,7 +49,7 @@ const errorHandler = (error: RequestError): Promise<any> => {
 }
 
 // 请求拦截器
-const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> => {
+function requestHandler(config: InternalAxiosRequestConfig): InternalAxiosRequestConfig | Promise<InternalAxiosRequestConfig> {
   const savedToken = localStorage.get(STORAGE_TOKEN_KEY)
   // 如果 token 存在
   // 让每个请求携带自定义 token, 请根据实际情况修改
@@ -62,7 +63,7 @@ const requestHandler = (config: InternalAxiosRequestConfig): InternalAxiosReques
 request.interceptors.request.use(requestHandler, errorHandler)
 
 // 响应拦截器
-const responseHandler = (response: { data: any }) => {
+function responseHandler(response: { data: any }) {
   return response.data
 }
 

src/views/charts/index.vue

@@ -63,7 +63,7 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <van-nav-bar title="📊 charts" left-arrow fixed @click-left="onClickLeft" />
+  <VanNavBar title="📊 charts" left-arrow fixed @click-left="onClickLeft" />
 
   <div class="container">
     <div class="chart">
@@ -105,4 +105,3 @@ const onClickLeft = () => history.back()
   }
 }
 </style>
-

src/views/index.vue

@@ -21,26 +21,26 @@ watch(checked, (val) => {
 <template>
   <div class="container">
     <div class="logo" />
-    <van-cell-group title="一个集成最新技术栈、完整干净的移动端模板" inset>
+    <VanCellGroup title="一个集成最新技术栈、完整干净的移动端模板" inset>
-      <van-cell center title="🌗 暗黑模式">
+      <VanCell center title="🌗 暗黑模式">
         <template #right-icon>
-          <van-switch v-model="checked" size="18px" />
+          <VanSwitch v-model="checked" size="18px" />
         </template>
-      </van-cell>
+      </VanCell>
 
-      <van-cell title="💿 mock 指南" to="mock" is-link />
+      <VanCell title="💿 mock 指南" to="mock" is-link />
 
-      <van-cell title="📊 charts 演示" to="charts" is-link />
+      <VanCell title="📊 charts 演示" to="charts" is-link />
 
-      <van-cell center>
+      <VanCell center>
         <template #title>
           <span class="custom-title">🎨 欢迎补充</span>
-          <van-tag type="primary">
+          <VanTag type="primary">
             PR
-          </van-tag>
+          </VanTag>
         </template>
-      </van-cell>
+      </VanCell>
-    </van-cell-group>
+    </VanCellGroup>
   </div>
 </template>
 

src/views/mock/index.vue

@@ -3,7 +3,7 @@ import { queryProse } from '@/api'
 
 const messages = ref<string>('')
 
-const pull = () => {
+function pull() {
   queryProse().then((res) => {
     messages.value = res.prose
   })
@@ -17,7 +17,7 @@ const onClickLeft = () => history.back()
 </script>
 
 <template>
-  <van-nav-bar title="💿 mock 指南" left-arrow fixed @click-left="onClickLeft" />
+  <VanNavBar title="💿 mock 指南" left-arrow fixed @click-left="onClickLeft" />
 
   <div class="container">
     <div class="data-label">
@@ -27,15 +27,15 @@ const onClickLeft = () => history.back()
       <div v-if="messages">
         {{ messages }}
       </div>
-      <van-empty v-else description="暂无数据" />
+      <VanEmpty v-else description="暂无数据" />
     </div>
 
-    <van-button round block type="primary" @click="pull">
+    <VanButton round block type="primary" @click="pull">
       请求
-    </van-button>
+    </VanButton>
-    <van-button round block type="default" @click="reset">
+    <VanButton round block type="default" @click="reset">
       清空
-    </van-button>
+    </VanButton>
   </div>
 </template>
 

tests/index.spec.ts

@@ -1,4 +1,3 @@
-test('first test', () => {
+it('first test', () => {
   expect(1 + 1).toBe(2)
 })
-

tsconfig.json

@@ -1,27 +1,27 @@
 {
   "compilerOptions": {
     "target": "esnext",
-    "module": "esnext",
     "jsx": "preserve",
-    "importHelpers": true,
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
-    "moduleResolution": "node",
+    "experimentalDecorators": true,
-    "allowJs": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "sourceMap": true,
     "baseUrl": ".",
-    "types": ["node"],
+    "module": "esnext",
+    "moduleResolution": "node",
     "paths": {
       "@/*": ["src/*"]
     },
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "types": ["node"],
+    "allowJs": true,
     "strictNullChecks": false,
-    "experimentalDecorators": true,
-    "noUnusedParameters": true,
-    "noUnusedLocals": true,
     "noImplicitAny": false,
-    "skipLibCheck": true,
+    "noUnusedLocals": true,
-    "importsNotUsedAsValues": "preserve"
+    "noUnusedParameters": true,
+    "importHelpers": true,
+    "sourceMap": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true,
+    "skipLibCheck": true
   },
   "include": [
     "src/App.vue",

vite.config.ts

@@ -1,4 +1,5 @@
-import path from 'path'
+/* eslint-disable node/prefer-global/process */
+import path from 'node:path'
 import { loadEnv } from 'vite'
 import type { ConfigEnv, UserConfig } from 'vite'
 
@@ -81,13 +82,9 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
         plugins: [
           autoprefixer(),
           viewport({
-            rootSelector: '#app',
+            appSelector: '#app',
             viewportWidth: 375,
-            maxDisplayWidth: undefined,
+            maxDisplayWidth: 600,
-            border: false,
-            disableMobile: false,
-            disableDesktop: false,
-            disableLandscape: false,
           }),
         ],
       },