perf(ui/dev): bump eslint to v9

.vscode/settings.json

@@ -1,4 +1,48 @@
 {
+  // 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": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  "eslint.runtime": "node",
+
+  // 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",
+    "toml",
+    "xml"
+  ],
+
   "cSpell.words": [
     "akismet",
     "artalk",

docs/landing/package.json

@@ -11,7 +11,6 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "update:readme": "npx tsx ./scripts/update-readme.ts"
   },
@@ -25,11 +24,7 @@
   "devDependencies": {
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.8.0",
-    "@typescript-eslint/parser": "^7.8.0",
     "@vitejs/plugin-react-swc": "^3.6.0",
-    "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.6",
     "sass": "^1.76.0",
     "typescript": "^5.4.5",
     "vite": "^5.2.11"

docs/landing/tsconfig.json

@@ -20,6 +20,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": ["src"],
+  "include": ["src", "scripts"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }

eslint.config.mjs

@@ -0,0 +1,179 @@
+// @ts-check
+import path from 'node:path'
+import url from 'node:url'
+
+import { fixupPluginRules } from '@eslint/compat'
+// eslint-disable-next-line import-x/namespace
+import { FlatCompat } from '@eslint/eslintrc'
+import eslintJs from '@eslint/js'
+import pluginTS from '@typescript-eslint/eslint-plugin'
+import eslintConfigPrettier from 'eslint-config-prettier'
+import pluginFunctional from 'eslint-plugin-functional/flat'
+import pluginImportX from 'eslint-plugin-import-x'
+import pluginReact from 'eslint-plugin-react'
+import pluginReactHooks from 'eslint-plugin-react-hooks'
+import pluginReactRefresh from 'eslint-plugin-react-refresh'
+import pluginVue from 'eslint-plugin-vue'
+import globals from 'globals'
+import eslintTs from 'typescript-eslint'
+import vueParser from 'vue-eslint-parser'
+
+const __dirname = path.dirname(url.fileURLToPath(import.meta.url))
+const tsProjects = ['./tsconfig.base.json', './ui/*/tsconfig.json', './docs/*/tsconfig.json']
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: eslintJs.configs.recommended,
+})
+
+export default eslintTs.config(
+  eslintJs.configs.recommended,
+  ...eslintTs.configs.recommended,
+  // @ts-expect-error the type of `pluginVue` is not compatible with the latest `eslint` v9 package yet
+  ...pluginVue.configs['flat/recommended'],
+  // FIXME: TypeError SEE https://github.com/amilajack/eslint-plugin-compat/pull/609#issuecomment-2123734301
+  // ...compat.extends('plugin:compat/recommended'),
+  // {
+  //   ...pluginFunctional.configs.recommended,
+  //   // FIXME: https://github.com/eslint-functional/eslint-plugin-functional/issues/766#issuecomment-1904715609
+  //   rules: {
+  //     ...pluginFunctional.configs.recommended.rules,
+  //     'functional/immutable-data': 'off',
+  //     'functional/no-return-void': 'off',
+  //   },
+  // },
+
+  /* Global Ignores */
+  {
+    // `ignores` key must been defined in a separate object without any other keys
+    // see https://eslint.org/docs/latest/use/configure/ignore#ignoring-files
+    // and https://github.com/eslint/eslint/discussions/18304
+    ignores: [
+      '**/node_modules',
+      '**/dist',
+      'public',
+      'local',
+      'test',
+      '**/.vitepress/cache',
+      '**/*.config.js',
+      '**/*.config.ts',
+      '**/*.d.ts',
+    ],
+  },
+
+  /* TypeScript */
+  {
+    files: ['**/*.{ts,mts,cts,tsx,js,mjs,cjs,vue}'],
+    languageOptions: {
+      parser: vueParser,
+      parserOptions: {
+        parser: eslintTs.parser,
+        project: tsProjects,
+        tsconfigRootDir: __dirname,
+        globals: {
+          ...globals.browser,
+        },
+        ecmaFeatures: {
+          jsx: true,
+        },
+        sourceType: 'module',
+        extraFileExtensions: ['.vue'],
+      },
+    },
+    plugins: {
+      '@typescript-eslint': pluginTS,
+      'import-x': pluginImportX,
+    },
+    rules: {
+      ...pluginImportX.configs.recommended.rules,
+      '@typescript-eslint/no-explicit-any': 'off',
+      '@typescript-eslint/no-unused-vars': 'off',
+      'import-x/no-named-as-default-member': 'off',
+      'import-x/default': 'off', // FIXME: No default export found in imported module "react", SEE https://github.com/import-js/eslint-plugin-import/issues/1800
+      'import-x/order': [
+        'warn',
+        {
+          'newlines-between': 'always',
+          alphabetize: {
+            order: 'asc',
+          },
+        },
+      ],
+      // 'import-x/no-default-export': 'warn'
+    },
+    settings: {
+      'import-x/parsers': {
+        '@typescript-eslint/parser': ['.ts', '.tsx'],
+      },
+      'import-x/resolver': {
+        typescript: {
+          project: tsProjects,
+        },
+        node: true,
+      },
+      polyfills: ['AbortController'],
+    },
+  },
+
+  /* Vue */
+  {
+    files: ['**/*.vue'],
+    languageOptions: {
+      globals: {
+        // Auto Imports Support
+        // SEE https://eslint.vuejs.org/user-guide/#auto-imports-support
+        // SEE https://github.com/antfu/eslint-config/blob/e32301ac398896f20e1ec1f4f10a334687f8afc8/src/configs/vue.ts#L40-L55
+        computed: 'readonly',
+        defineEmits: 'readonly',
+        defineExpose: 'readonly',
+        defineProps: 'readonly',
+        onMounted: 'readonly',
+        onUnmounted: 'readonly',
+        reactive: 'readonly',
+        ref: 'readonly',
+        shallowReactive: 'readonly',
+        shallowRef: 'readonly',
+        toRef: 'readonly',
+        toRefs: 'readonly',
+        watch: 'readonly',
+        watchEffect: 'readonly',
+        onUpdated: 'readonly',
+        onBeforeMount: 'readonly',
+        onBeforeUnmount: 'readonly',
+        onBeforeUpdate: 'readonly',
+        useRoute: 'readonly',
+        useRouter: 'readonly',
+        useStore: 'readonly',
+        useI18n: 'readonly',
+      },
+    },
+    rules: {},
+  },
+
+  /* React */
+  {
+    files: ['**/*.tsx'],
+    plugins: {
+      react: pluginReact,
+      // @ts-expect-error SEE https://github.com/facebook/react/issues/28313
+      'react-hooks': fixupPluginRules(pluginReactHooks),
+      'react-refresh': pluginReactRefresh,
+    },
+    rules: {
+      ...pluginReact.configs.recommended.rules,
+      ...pluginReact.configs['jsx-runtime'].rules,
+      ...pluginReactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': 'warn',
+    },
+    languageOptions: {
+      ...pluginReact.configs.recommended.languageOptions,
+    },
+    settings: {
+      react: {
+        version: '18.3',
+      },
+    },
+  },
+
+  eslintConfigPrettier, // disable conflicting rules with Prettier
+)