refactor: upgrade eslint and fix lint and type errors (#1600)

commitlint.config.ts

@@ -6,12 +6,13 @@ const getSubDirectories = (dir: string): string[] =>
   fs
     .readdirSync(dir)
     .filter((item) => fs.statSync(path.join(dir, item)).isDirectory())
-const packages = getSubDirectories(path.resolve(__dirname, 'packages'))
+
+const PACKAGES = getSubDirectories(path.resolve(__dirname, 'packages'))
 
 export default {
   extends: ['@commitlint/config-conventional'],
   rules: {
-    'scope-enum': [2, 'always', [...packages, 'e2e']],
+    'scope-enum': [2, 'always', [...PACKAGES, 'e2e']],
     'footer-max-line-length': [0],
   },
 } satisfies UserConfig

e2e/docs/.vuepress/plugins/foo/fooPlugin.ts

@@ -1,11 +1,8 @@
 import { getDirname, path } from 'vuepress/utils'
 
-const __dirname = getDirname(import.meta.url)
+const DIRNAME = getDirname(import.meta.url)
 
 export const fooPlugin = {
   name: 'test-plugin',
-  clientConfigFile: path.resolve(
-    __dirname,
-    './nonDefaultExportClientConfig.js',
-  ),
+  clientConfigFile: path.resolve(DIRNAME, './nonDefaultExportClientConfig.js'),
 }

e2e/docs/.vuepress/theme/client/config.ts

@@ -8,20 +8,22 @@ import NotFound from './layouts/NotFound.vue'
 import './styles/index.scss'
 
 export default defineClientConfig({
-  enhance({ app, router }) {
+  enhance() {
     // ...
   },
 
   setup() {
     // ...
   },
 
+  /* eslint-disable @typescript-eslint/no-unsafe-assignment -- vue sfc type info is not available in eslint scope */
   layouts: {
     CssModulesLayout,
     CustomLayout,
     Layout,
     NotFound,
   },
+  /* eslint-enable @typescript-eslint/no-unsafe-assignment */
 
   rootComponents: [RootComponentFromTheme],
 })

e2e/docs/.vuepress/theme/client/layouts/Layout.vue

@@ -21,4 +21,6 @@ const siteData = useSiteData()
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+// ...
+</style>

e2e/docs/.vuepress/theme/node/e2eTheme.ts

@@ -1,26 +1,24 @@
-import type { Page, Theme } from 'vuepress/core'
+import type { Theme } from 'vuepress/core'
 import { getDirname, path } from 'vuepress/utils'
 
-const __dirname = getDirname(import.meta.url)
+const DIRNAME = getDirname(import.meta.url)
 
-export const e2eTheme = (): Theme => {
-  return {
-    name: '@vuepress/theme-e2e',
+export const e2eTheme = (): Theme => ({
+  name: '@vuepress/theme-e2e',
 
-    alias: {
-      // ...
-    },
+  alias: {
+    // ...
+  },
 
-    define: {
-      // ...
-    },
+  define: {
+    // ...
+  },
 
-    clientConfigFile: path.resolve(__dirname, '../client/config.ts'),
+  clientConfigFile: path.resolve(DIRNAME, '../client/config.ts'),
 
-    extendsPage: (page: Page) => {
-      // ...
-    },
+  extendsPage: () => {
+    // ...
+  },
 
-    plugins: [],
-  }
-}
+  plugins: [],
+})

e2e/modules/conditional-exports/types.d.ts

@@ -1,2 +1,2 @@
-declare const str: string
-export default str
+declare const STR: string
+export default STR

e2e/playwright.config.ts

@@ -1,16 +1,16 @@
 import { defineConfig, devices } from '@playwright/test'
-import { BASE, BUNDLER, isCI, isDev } from './utils/env'
+import { BASE, BUNDLER, IS_CI, IS_DEV } from './utils/env'
 
-const commandPart1 = isDev ? 'docs:dev' : 'docs:build'
-const commandPart2 = BUNDLER === 'vite' ? '' : `-${BUNDLER}`
-const commandPart3 = isDev ? '' : ' && pnpm docs:serve'
+const COMMAND_PART1 = IS_DEV ? 'docs:dev' : 'docs:build'
+const COMMAND_PART2 = BUNDLER === 'vite' ? '' : `-${BUNDLER}`
+const COMMAND_PART3 = IS_DEV ? '' : ' && pnpm docs:serve'
 
 export default defineConfig({
   testDir: 'tests',
-  forbidOnly: isCI,
-  reporter: isCI ? 'github' : 'line',
-  retries: isCI ? 2 : 0,
-  workers: isDev ? 1 : undefined,
+  forbidOnly: IS_CI,
+  reporter: IS_CI ? 'github' : 'line',
+  retries: IS_CI ? 2 : 0,
+  workers: IS_DEV ? 1 : undefined,
   projects: [
     {
       name: 'chromium',
@@ -22,8 +22,8 @@ export default defineConfig({
     trace: 'on-first-retry',
   },
   webServer: {
-    command: `pnpm docs:clean && pnpm ${commandPart1}${commandPart2}${commandPart3}`,
+    command: `pnpm docs:clean && pnpm ${COMMAND_PART1}${COMMAND_PART2}${COMMAND_PART3}`,
     url: 'http://127.0.0.1:9080',
-    reuseExistingServer: !isCI,
+    reuseExistingServer: !IS_CI,
   },
 })

e2e/tests/hmr.spec.ts

@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { isDev } from '../utils/env'
+import { IS_DEV } from '../utils/env'
 import { readSourceMarkdown, writeSourceMarkdown } from '../utils/source'
 
 const hmrUpdateTitle = async (): Promise<void> => {
@@ -33,7 +33,7 @@ const hmrRestore = async (): Promise<void> => {
   )
 }
 
-if (isDev) {
+if (IS_DEV) {
   test.beforeEach(async () => {
     await hmrRestore()
   })

e2e/tests/imports/conditional-exports.spec.ts

@@ -8,8 +8,8 @@ test('should load different files correctly', async ({ page }) => {
 
   if (COMMAND === 'build') {
     expect(
-      await page.evaluate(() =>
-        fetch('./conditional-exports.html').then((res) => res.text()),
+      await page.evaluate(async () =>
+        fetch('./conditional-exports.html').then(async (res) => res.text()),
       ),
     ).toContain('<p>node-mjs</p>')
   }

e2e/tests/router/navigate-by-link.spec.ts

@@ -8,7 +8,7 @@ test.beforeEach(async ({ page }) => {
 test.describe('markdown links', () => {
   test('should navigate to home correctly', async ({ page }) => {
     await page.locator('#markdown-links + ul > li > a').nth(0).click()
-    await expect(page).toHaveURL(`${BASE}`)
+    await expect(page).toHaveURL(BASE)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
 
@@ -46,7 +46,7 @@ test.describe('markdown links', () => {
 test.describe('html links', () => {
   test('should navigate to home correctly', async ({ page }) => {
     await page.locator('#html-links + p > a').nth(0).click()
-    await expect(page).toHaveURL(`${BASE}`)
+    await expect(page).toHaveURL(BASE)
     await expect(page.locator('#home-h2')).toHaveText('Home H2')
   })
 

e2e/tests/router/navigate-by-router.spec.ts

@@ -7,7 +7,7 @@ test.beforeEach(async ({ page }) => {
 
 test('should navigate to home correctly', async ({ page }) => {
   await page.locator('#home').click()
-  await expect(page).toHaveURL(`${BASE}`)
+  await expect(page).toHaveURL(BASE)
   await expect(page.locator('#home-h2')).toHaveText('Home H2')
 })
 

e2e/tests/router/resolve-route-query-hash.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-const testCases = [
+const TEST_CASES = [
   {
     path: '/?query=1',
     notFound: false,
@@ -28,8 +28,11 @@ test('should resolve routes when including both the query and hash', async ({
 
   for (const [index, li] of listItemsLocator.entries()) {
     const textContent = await li.textContent()
-    const resolvedRoute = JSON.parse(/: (\{.*\})\s*$/.exec(textContent!)![1])
-    expect(resolvedRoute.path).toEqual(testCases[index].path)
-    expect(resolvedRoute.notFound).toEqual(testCases[index].notFound)
+    const resolvedRoute = JSON.parse(
+      /: (\{.*\})\s*$/.exec(textContent!)![1],
+    ) as { path: string; notFound: boolean }
+
+    expect(resolvedRoute.path).toEqual(TEST_CASES[index].path)
+    expect(resolvedRoute.notFound).toEqual(TEST_CASES[index].notFound)
   }
 })

e2e/tests/router/resolve-route.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test'
 
-const testCases = [
+const TEST_CASES = [
   {
     selector: '#index',
     expected: {
@@ -54,13 +54,19 @@ const testCases = [
 test('should resolve routes correctly', async ({ page }) => {
   await page.goto('router/resolve-route.html')
 
-  for (const { selector, expected } of testCases) {
+  for (const { selector, expected } of TEST_CASES) {
     const listItemsLocator = await page
       .locator(`.e2e-theme-content ${selector} + ul > li`)
       .all()
     for (const li of listItemsLocator) {
       const textContent = await li.textContent()
-      const resolvedRoute = JSON.parse(/: (\{.*\})\s*$/.exec(textContent!)![1])
+      const resolvedRoute = JSON.parse(
+        /: (\{.*\})\s*$/.exec(textContent!)![1],
+      ) as {
+        path: string
+        meta: Record<string, unknown>
+        notFound: boolean
+      }
       expect(resolvedRoute.path).toEqual(expected.path)
       expect(resolvedRoute.meta).toStrictEqual(expected.meta)
       expect(resolvedRoute.notFound).toEqual(expected.notFound)

e2e/utils/env.ts

@@ -2,6 +2,6 @@ export const BASE = process.env.E2E_BASE ?? '/'
 export const BUNDLER = process.env.E2E_BUNDLER ?? 'vite'
 export const COMMAND = process.env.E2E_COMMAND ?? 'dev'
 
-export const isDev = COMMAND === 'dev'
-export const isProd = COMMAND === 'build'
-export const isCI = !!process.env.CI
+export const IS_DEV = COMMAND === 'dev'
+export const IS_PROD = COMMAND === 'build'
+export const IS_CI = !!process.env.CI

e2e/utils/source.ts

@@ -1,17 +1,14 @@
 import { fs, getDirname, path } from 'vuepress/utils'
 
-const __dirname = getDirname(import.meta.url)
+const DIRNAME = getDirname(import.meta.url)
 
 const resolveSourceMarkdownPath = (...args: string[]): string =>
-  path.resolve(__dirname, '../docs', ...args)
+  path.resolve(DIRNAME, '../docs', ...args)
 
-export const readSourceMarkdown = async (filePath: string): Promise<string> => {
-  return fs.readFile(resolveSourceMarkdownPath(filePath), 'utf-8')
-}
+export const readSourceMarkdown = async (filePath: string): Promise<string> =>
+  fs.readFile(resolveSourceMarkdownPath(filePath), 'utf-8')
 
 export const writeSourceMarkdown = async (
   filePath: string,
   content: string,
-): Promise<void> => {
-  return fs.writeFile(resolveSourceMarkdownPath(filePath), content)
-}
+): Promise<void> => fs.writeFile(resolveSourceMarkdownPath(filePath), content)

eslint.config.js

@@ -0,0 +1,41 @@
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { vuepress } from 'eslint-config-vuepress'
+
+const ROOT = path.resolve(fileURLToPath(import.meta.url), '..')
+const E2E_DIR = path.resolve(ROOT, 'e2e')
+const PACKAGES_DIRS = fs
+  .readdirSync(path.resolve(ROOT, 'packages'))
+  .map((item) => `./packages/${item}`)
+
+export default vuepress(
+  {
+    imports: {
+      packageDir: [ROOT, E2E_DIR, ...PACKAGES_DIRS],
+    },
+    typescript: {
+      overrides: {
+        '@typescript-eslint/no-dynamic-delete': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
+        'no-underscore-dangle': [
+          'warn',
+          { allow: ['_context', '_pageChunk', '_registeredComponents'] },
+        ],
+      },
+    },
+    vue: {
+      overrides: {
+        'no-useless-assignment': 'off', // TODO: false positive in vue sfc
+      },
+    },
+  },
+  {
+    files: ['**/tests/**'],
+    rules: {
+      'import/no-unresolved': 'off',
+      'no-console': 'off',
+      'prefer-template': 'off',
+    },
+  },
+)

package.json

@@ -8,8 +8,8 @@
     "check-types": "vue-tsc --noEmit",
     "clean": "pnpm --parallel --stream clean",
     "format": "prettier --write .",
-    "lint": "eslint --ext .cjs,.js,.ts,.vue . && prettier --check .",
-    "lint:fix": "eslint --fix --ext .cjs,.js,.ts,.vue . && prettier --write .",
+    "lint": "eslint . && prettier --check .",
+    "lint:fix": "eslint --fix . && prettier --write .",
     "prepare": "husky",
     "release": "pnpm release:check && pnpm release:version && pnpm release:publish",
     "release:changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
@@ -39,16 +39,15 @@
     "@vitest/coverage-istanbul": "^2.0.5",
     "bumpp": "^9.5.1",
     "conventional-changelog-cli": "^5.0.0",
-    "eslint": "^8.57.0",
-    "eslint-config-vuepress": "^4.10.1",
-    "eslint-config-vuepress-typescript": "^4.10.1",
+    "eslint": "^9.9.0",
+    "eslint-config-vuepress": "^5.1.2",
     "husky": "^9.1.4",
     "lint-staged": "^15.2.9",
     "prettier": "^3.3.3",
-    "prettier-config-vuepress": "^4.4.0",
+    "prettier-config-vuepress": "^5.0.0",
     "rimraf": "^6.0.1",
     "sort-package-json": "^2.10.0",
-    "tsconfig-vuepress": "^4.5.0",
+    "tsconfig-vuepress": "^5.0.0",
     "tsup": "^8.2.4",
     "typescript": "^5.5.4",
     "vite": "~5.4.0",