Update to eslint.config.js

frontend/e2e/axe.test.ts

@@ -43,12 +43,9 @@ const rules = [
   { id: "region", selector: ":not([role='listbox']" },
 ];
 
-type Test = Parameters<typeof test>[1];
-
-/** generic page axe test */
-const checkPage =
-  (path: string, selector?: string): Test =>
-  async ({ page, browserName }) => {
+/** Reusable test for each page */
+const checkPage = (title: string, path: string, selector?: string) =>
+  test(title, async ({ page, browserName }) => {
     test.skip(browserName !== "chromium", "Only test Axe on chromium");
 
     /** navigate to page */
@@ -74,25 +71,27 @@ const checkPage =
     const violations = await getViolations(page);
     const violationsMessage = JSON.stringify(violations, null, 2);
     expect(violationsMessage).toBe("[]");
-  };
+  });
 
-/** check all pages */
-for (const path of paths) test("Accessibility check " + path, checkPage(path));
+for (const path of paths) checkPage("Accessibility check " + path, path);
 
-/** extra testbed component tests */
-test(
+checkPage(
   "Accessibility check /testbed (select single)",
-  checkPage("/testbed", ".select-single button"),
+  "/testbed",
+  ".select-single button",
 );
-test(
+checkPage(
   "Accessibility check /testbed (select multi)",
-  checkPage("/testbed", ".select-multi button"),
+  "/testbed",
+  ".select-multi button",
 );
-test(
+checkPage(
   "Accessibility check /testbed (select tags)",
-  checkPage("/testbed", ".select-tags input"),
+  "/testbed",
+  ".select-tags input",
 );
-test(
+checkPage(
   "Accessibility check /testbed (select autocomplete)",
-  checkPage("/testbed", ".select-autocomplete input"),
+  "/testbed",
+  ".select-autocomplete input",
 );

frontend/e2e/text-annotator.test.ts

@@ -1,7 +1,7 @@
 import { expect, test } from "@playwright/test";
 import { log } from "../playwright.config";
 /** https://github.com/microsoft/playwright/issues/23662 */
-import example from "../src/pages/explore/text-annotator.json";
+import example from "../src/pages/explore/text-annotator.json" with { type: "json" };
 
 log();
 

frontend/eslint.config.js

@@ -0,0 +1,86 @@
+import url from "url";
+import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended";
+import pluginVue from "eslint-plugin-vue";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import prettierConfig from "@vue/eslint-config-prettier";
+import {
+  defineConfigWithVueTs,
+  vueTsConfigs,
+} from "@vue/eslint-config-typescript";
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+});
+
+export default defineConfigWithVueTs(
+  compat.extends(
+    "plugin:vuejs-accessibility/recommended",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier/skip-formatting",
+  ),
+  eslintPluginPrettierRecommended,
+  pluginVue.configs["flat/recommended"],
+  prettierConfig,
+  vueTsConfigs.recommended,
+  {
+    ignores: [
+      "node_modules",
+      "dist",
+      "public/mockServiceWorker.js",
+      "src/api/model.ts",
+    ],
+  },
+  /** Additional Configuration */
+  {
+    languageOptions: {
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "script",
+      },
+    },
+    files: [
+      "**/*.js",
+      "**/*.cjs",
+      "**/*.mjs",
+      "**/*.ts",
+      "**/*.tsx",
+      "**/*.vue",
+    ],
+    /** Override rules */
+    rules: {
+      "max-len": ["error", { code: 120 }],
+      "no-constant-binary-expression": ["off"],
+      "prefer-const": "off",
+      "@typescript-eslint/no-empty-object-type": ["warn"],
+      "@typescript-eslint/no-unused-expressions": ["off"],
+      "@typescript-eslint/no-unused-vars": ["off"],
+      "prettier/prettier": ["warn", {}, { usePrettierrc: true }],
+      "vue/attribute-hyphenation": [
+        "warn",
+        "always",
+        { ignore: ["selectedFilters"] },
+      ],
+      "vue/no-v-html": ["off"],
+      "vue/no-v-text-v-html-on-component": ["off"],
+      "vuejs-accessibility/anchor-has-content": [
+        "error",
+        {
+          accessibleDirectives: ["tooltip"],
+        },
+      ],
+      "vuejs-accessibility/label-has-for": [
+        "error",
+        {
+          required: {
+            some: ["nesting", "id"],
+          },
+          allowChildren: true,
+        },
+      ],
+      "vuejs-accessibility/mouse-events-have-key-events": ["off"],
+    },
+  },
+);

frontend/fixtures/index.ts

@@ -14,7 +14,7 @@ import phenotypeExplorerCompare from "./phenotype-explorer-compare.json";
 import phenotypeExplorerMulticompare from "./phenotype-explorer-multi-compare.json";
 import phenotypeExplorerSearch from "./phenotype-explorer-search.json";
 import search from "./search.json";
-import textAnnotator from "./text-annotator.json";
+import textAnnotator from "./text-annotator.json" with { type: "json" };
 import uptime from "./uptime.json";
 
 /** api calls to be mocked with fixture data */

frontend/package.json

@@ -1,71 +1,72 @@
 {
   "name": "monarch-app",
+  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "lint": "eslint . --ext .vue,.ts,.js,.cjs,.mjs --fix && prettier --write \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
+    "lint": "eslint . --fix && prettier --write \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
     "test": "bun run test:types && bun run test:lint && bun run test:unit && bun run test:e2e",
     "test:types": "vue-tsc --noEmit -p tsconfig.json --composite false",
-    "test:lint": "eslint . --ext .vue,.ts,.js,.cjs,.mjs && prettier --check \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
+    "test:lint": "eslint . && prettier --check \"**/*.{vue,ts,js,css,scss,json,yaml,svg,md}\"",
     "test:unit": "vitest run",
     "test:e2e": "playwright test"
   },
   "dependencies": {
-    "@floating-ui/dom": "^1.6.3",
-    "@fortawesome/fontawesome-svg-core": "^6.5.1",
-    "@fortawesome/free-brands-svg-icons": "^6.5.1",
-    "@fortawesome/free-regular-svg-icons": "^6.5.1",
-    "@fortawesome/free-solid-svg-icons": "^6.5.1",
-    "@fortawesome/vue-fontawesome": "^3.0.6",
-    "@sentry/browser": "^7.105.0",
-    "@sentry/vue": "^7.105.0",
-    "@vueuse/core": "^10.9.0",
-    "apexcharts": "^3.46.0",
+    "@floating-ui/dom": "^1.7.1",
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-brands-svg-icons": "^6.7.2",
+    "@fortawesome/free-regular-svg-icons": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@sentry/browser": "^9.28.1",
+    "@sentry/vue": "^9.28.1",
+    "@vueuse/core": "^13.3.0",
+    "apexcharts": "^4.7.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "lodash": "^4.17.21",
-    "micromark": "^4.0.0",
+    "micromark": "^4.0.2",
     "normalize.css": "^8.0.1",
     "tippy.js": "^6.3.7",
-    "ua-parser-js": "^1.0.37",
-    "vue": "^3.4.21",
-    "vue-gtag": "^2.0.1",
+    "ua-parser-js": "^2.0.3",
+    "vue": "^3.5.16",
+    "vue-gtag": "^3.5.1",
     "vue-hotjar": "^1.4.0",
-    "vue-router": "^4.3.0",
-    "vue-tippy": "^6.4.1",
-    "vue3-apexcharts": "~1.4.4"
+    "vue-router": "^4.5.1",
+    "vue-tippy": "^6.7.1",
+    "vue3-apexcharts": "^1.8.0"
   },
   "devDependencies": {
-    "@ianvs/prettier-plugin-sort-imports": "^4.1.1",
-    "@playwright/test": "~1.39.0",
-    "@tsconfig/node20": "^20.1.2",
+    "@ianvs/prettier-plugin-sort-imports": "^4.4.2",
+    "@playwright/test": "~1.52.0",
+    "@tsconfig/node20": "^20.1.5",
     "@types/body-scroll-lock": "^3.1.2",
     "@types/dom-to-image": "^2.6.7",
-    "@types/jsdom": "^21.1.6",
-    "@types/lodash": "^4.14.202",
-    "@types/node": "20.11.24",
+    "@types/jsdom": "^21.1.7",
+    "@types/lodash": "^4.17.17",
+    "@types/node": "^22.15.31",
     "@types/ua-parser-js": "^0.7.39",
-    "@vitejs/plugin-vue": "^4.6.2",
-    "@vue/eslint-config-prettier": "^9.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
-    "@vue/test-utils": "2.4.4",
-    "@vue/tsconfig": "^0.5.1",
-    "axe-playwright": "^2.0.1",
-    "eslint": "^8.57.0",
-    "eslint-plugin-vue": "^9.22.0",
-    "eslint-plugin-vuejs-accessibility": "^2.2.1",
-    "jsdom": "^24.0.0",
-    "msw": "^2.2.2",
-    "postcss": "^8.4.35",
-    "prettier": "^3.2.5",
-    "prettier-plugin-css-order": "^2.0.1",
-    "prettier-plugin-jsdoc": "^1.3.0",
-    "sass": "^1.71.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/eslint-config-prettier": "^10.2.0",
+    "@vue/eslint-config-typescript": "^14.5.0",
+    "@vue/test-utils": "2.4.6",
+    "@vue/tsconfig": "^0.7.0",
+    "axe-playwright": "^2.1.0",
+    "eslint": "^9.28.0",
+    "eslint-plugin-vue": "^10.2.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "jsdom": "^26.1.0",
+    "msw": "^2.10.2",
+    "postcss": "^8.5.5",
+    "prettier": "^3.5.3",
+    "prettier-plugin-css-order": "^2.1.2",
+    "prettier-plugin-jsdoc": "^1.3.2",
+    "sass": "^1.89.2",
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^1.3.1",
-    "vue-tsc": "^2.0.4"
+    "vitest": "^3.2.3",
+    "vue-tsc": "^2.2.10"
   },
   "msw": {
     "workerDirectory": "public"