[Experimental] Update to eslint.config.js

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 vueTsEslintConfig from "@vue/eslint-config-typescript";
+
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  // allConfig: js.configs.all,
+});
+
+export default [
+  /** Extend recommended configs */
+  ...compat.extends(
+    "plugin:vue/vue3-recommended",
+    "plugin:vuejs-accessibility/recommended",
+    "eslint:recommended",
+    "@vue/eslint-config-prettier/skip-formatting",
+  ),
+  ...pluginVue.configs["flat/recommended"],
+  ...vueTsEslintConfig(),
+  eslintPluginPrettierRecommended,
+  prettierConfig,
+  {
+    ignores: [
+      "node_modules",
+      "dist",
+      "mockServiceWorker.js",
+      "src/api/model.ts",
+    ],
+  },
+  /** 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.6.12",
+    "@fortawesome/fontawesome-svg-core": "^6.7.1",
+    "@fortawesome/free-brands-svg-icons": "^6.7.1",
+    "@fortawesome/free-regular-svg-icons": "^6.7.1",
+    "@fortawesome/free-solid-svg-icons": "^6.7.1",
+    "@fortawesome/vue-fontawesome": "^3.0.8",
+    "@sentry/browser": "^8.42.0",
+    "@sentry/vue": "^8.42.0",
+    "@vueuse/core": "^11.3.0",
+    "apexcharts": "^4.1.0",
     "body-scroll-lock": "4.0.0-beta.0",
     "lodash": "^4.17.21",
-    "micromark": "^4.0.0",
+    "micromark": "^4.0.1",
     "normalize.css": "^8.0.1",
     "tippy.js": "^6.3.7",
-    "ua-parser-js": "^1.0.37",
-    "vue": "^3.4.21",
+    "ua-parser-js": "^1.0.39",
+    "vue": "^3.5.13",
     "vue-gtag": "^2.0.1",
     "vue-hotjar": "^1.4.0",
-    "vue-router": "^4.3.0",
-    "vue-tippy": "^6.4.1",
+    "vue-router": "^4.5.0",
+    "vue-tippy": "^6.5.0",
     "vue3-apexcharts": "~1.4.4"
   },
   "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.0",
+    "@playwright/test": "~1.48.2",
+    "@tsconfig/node20": "^20.1.4",
     "@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.13",
+    "@types/node": "22.9.0",
     "@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",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/eslint-config-prettier": "^10.1.0",
+    "@vue/eslint-config-typescript": "^14.1.4",
+    "@vue/test-utils": "2.4.6",
+    "@vue/tsconfig": "^0.6.0",
+    "axe-playwright": "^2.0.3",
+    "eslint": "^9.16.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "eslint-plugin-vuejs-accessibility": "^2.4.1",
+    "jsdom": "^25.0.1",
+    "msw": "^2.6.6",
+    "postcss": "^8.4.49",
+    "prettier": "^3.4.1",
+    "prettier-plugin-css-order": "^2.1.2",
     "prettier-plugin-jsdoc": "^1.3.0",
-    "sass": "^1.71.1",
-    "typescript": "^5.3.3",
-    "vite": "^5.1.4",
+    "sass": "^1.81.0",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
     "vite-svg-loader": "^5.1.0",
-    "vitest": "^1.3.1",
-    "vue-tsc": "^2.0.4"
+    "vitest": "^2.1.8",
+    "vue-tsc": "^2.1.10"
   },
   "msw": {
     "workerDirectory": "public"

frontend/public/mockServiceWorker.js

@@ -8,8 +8,8 @@
  * - Please do NOT serve this file on production.
  */
 
-const PACKAGE_VERSION = '2.2.13'
-const INTEGRITY_CHECKSUM = '26357c79639bfa20d64c0efca2a87423'
+const PACKAGE_VERSION = '2.6.6'
+const INTEGRITY_CHECKSUM = 'ca7800994cc8bfb5eb961e037c877074'
 const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
 const activeClientIds = new Set()
 
@@ -62,7 +62,12 @@ self.addEventListener('message', async function (event) {
 
       sendToClient(client, {
         type: 'MOCKING_ENABLED',
-        payload: true,
+        payload: {
+          client: {
+            id: client.id,
+            frameType: client.frameType,
+          },
+        },
       })
       break
     }
@@ -155,6 +160,10 @@ async function handleRequest(event, requestId) {
 async function resolveMainClient(event) {
   const client = await self.clients.get(event.clientId)
 
+  if (activeClientIds.has(event.clientId)) {
+    return client
+  }
+
   if (client?.frameType === 'top-level') {
     return client
   }
@@ -183,12 +192,14 @@ async function getResponse(event, client, requestId) {
   const requestClone = request.clone()
 
   function passthrough() {
-    const headers = Object.fromEntries(requestClone.headers.entries())
-
-    // Remove internal MSW request header so the passthrough request
-    // complies with any potential CORS preflight checks on the server.
-    // Some servers forbid unknown request headers.
-    delete headers['x-msw-intention']
+    // Cast the request headers to a new Headers instance
+    // so the headers can be manipulated with.
+    const headers = new Headers(requestClone.headers)
+
+    // Remove the "accept" header value that marked this request as passthrough.
+    // This prevents request alteration and also keeps it compliant with the
+    // user-defined CORS policies.
+    headers.delete('accept', 'msw/passthrough')
 
     return fetch(requestClone, { headers })
   }

frontend/src/components/AppGallery.vue

@@ -53,7 +53,7 @@ $phone: 600px;
   grid-auto-rows: 1fr;
   place-content: center;
   // when content doesn't fill first row, limit width of gallery so that cell size is same as if first row was full
-  // e.g. on team page, so portraits in groups with only 1-2 members aren't bigger than portraits in groups with 3+ members
+  // e.g. team page, so portraits in groups with only 1-2 members aren't bigger than portraits in groups with 3+ members
   max-width: calc(
     (var(--cell)) * var(--content-cols) + (var(--content-cols) - 1) * var(--gap)
   );

frontend/src/components/AppNodeText.vue

@@ -66,12 +66,12 @@ const replacementTags = new Map([
     "sup" as ReplacedTag,
     {
       regex: /(<sup>).*?(<\/sup>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
+      createSurroundingEl(isSvg: boolean) {
         return isSvg
           ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
           : document.createElement("sup");
       },
-      afterMount(isSvg: Boolean, el: Element) {
+      afterMount(isSvg: boolean, el: Element) {
         if (!isSvg) return;
         el.setAttribute("dy", "-1ex");
         el.classList.add("svg-superscript");
@@ -100,12 +100,12 @@ const replacementTags = new Map([
     "i" as ReplacedTag,
     {
       regex: /(<i>).*?(<\/i>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
+      createSurroundingEl(isSvg: boolean) {
         return isSvg
           ? document.createElementNS("http://www.w3.org/2000/svg", "tspan")
           : document.createElement("i");
       },
-      afterMount(isSvg: Boolean, el: Element) {
+      afterMount(isSvg: boolean, el: Element) {
         if (!isSvg) return;
         el.classList.add("svg-italic");
       },
@@ -115,12 +115,12 @@ const replacementTags = new Map([
     "a" as ReplacedTag,
     {
       regex: /(<a href="http[^"]+">).*?(<\/a>)/dg,
-      createSurroundingEl(isSvg: Boolean) {
+      createSurroundingEl(isSvg: boolean) {
         return isSvg
           ? document.createElementNS("http://www.w3.org/2000/svg", "a")
           : document.createElement("a");
       },
-      afterMount(isSvg: Boolean, el: Element) {
+      afterMount(isSvg: boolean, el: Element) {
         // The previous sibling will be the text node containing the string
         // <a href="http...">. Slice it to get the value of the href.
         const tagTextNode = el.previousSibling!;

frontend/src/components/AppTextbox.vue

@@ -3,7 +3,7 @@
 -->
 
 <template>
-  <label class="label">
+  <label class="label" for="textbox">
     <div v-if="title" class="title">
       {{ title }}
       <AppIcon v-if="required" icon="asterisk" class="asterisk" />

frontend/src/composables/use-param.ts

@@ -70,12 +70,9 @@ export function useParam<T>(
       /** get updated value from url object */
       let newValue = "";
       /** if single value */
-      // @ts-expect-error
       if (typeof url.value[key] === "string") newValue = url.value[key];
       /** if multi-value, pick first */
-      // @ts-expect-error
       if (Array.isArray(url.value[key]) && url.value[key][0])
-        // @ts-expect-error
         newValue = url.value[key][0];
 
       /**
@@ -105,9 +102,7 @@ export function useParam<T>(
 
       /** set url value */
       if (newValue) {
-        // @ts-expect-error
         if (Array.isArray(url.value[key]) && url.value[key][0])
-          // @ts-expect-error
           url.value[key][0] = newValue;
         else url.value[key] = newValue;
         /** if "empty", such as empty string or array, delete param from url */

frontend/src/pages/PageTestbed.vue

@@ -22,6 +22,7 @@
   </AppSection>
 
   <!-- phenogrid -->
+  <!-- eslint-disable max-len -->
   <AppSection>
     <AppHeading>Phenogrid - Multicompare mode</AppHeading>
     <iframe
@@ -30,6 +31,7 @@
       frameBorder="0"
       src="/phenogrid-multi-compare?subjects=HP:0002616,HP:0001763,HP:0004944,HP:0010749,HP:0001533,HP:0002020,HP:0012450&object-sets=HP:0002616,HP:0001763,HP:0000767,HP:0000023,HP:0002108,HP:0000490,HP:0000545,HP:0100785,HP:0000268&object-sets=HP:0002616,HP:0001763,HP:0004944,HP:0010749,HP:0001533,HP:0002020,HP:0012450,HP:0003394,HP:0003771,HP:0012378,HP:0001278,HP:0002827,HP:0002829,HP:0002999,HP:0003010&object-sets=HP:0002616,HP:0001763,HP:0000767,HP:0000023,HP:0002108,HP:0000490,HP:0000545,HP:0100785,HP:0000268,HP:0001634,HP:0001653,HP:0001659,HP:0002360,HP:0003179,HP:0004970,HP:0005059,HP:0002705,HP:0012432,HP:0007800,HP:0001704"
     ></iframe>
+    <!-- eslint-enable max-len -->
 
     <AppButton text="Send Message" @click="postPhenogridMulti" />
   </AppSection>
@@ -68,7 +70,7 @@
   <!-- textbox component -->
   <AppSection>
     <AppHeading>Textbox</AppHeading>
-    <label>
+    <label for="input">
       <AppInput v-model="input" placeholder="Raw input" />
     </label>
     <AppTextbox v-model="input" icon="search" placeholder="Single line input" />