Type-check Vue components, not just TypeScript files

Before, only TypeScript files were checked, but most of the frontend code is actually in Vue components. This PR fixes that, and also resolves a few issues found by the type-checker in Vue components.

Author: Kobzol

site/frontend/package-lock.json

@@ -6,7 +6,7 @@
     "watch": "parcel watch --no-hmr",
     "build": "parcel build",
     "fmt": "prettier --write src",
-    "check": "tsc -p tsconfig.json --noEmit && prettier --check src"
+    "check": "vue-tsc -p tsconfig.json --noEmit && prettier --check src"
   },
   "author": "",
   "license": "MIT",
@@ -16,7 +16,8 @@
     "@types/highcharts": "^7.0.0",
     "@types/msgpack-lite": "^0.1.8",
     "prettier": "2.8.8",
-    "typescript": "^5.0.2"
+    "typescript": "^5.0.2",
+    "vue-tsc": "^1.8.3"
   },
   "dependencies": {
     "highcharts": "6.0.7",

site/frontend/package.json

@@ -159,14 +159,14 @@ function prettifyRawNumber(number: number): string {
             </td>
             <td v-if="showRawData" class="numeric">
               <a v-bind:href="detailedQueryRawDataLink(commitA, comparison)">
-                <abbr :title="comparison.datumA">{{
+                <abbr :title="comparison.datumA.toString()">{{
                   prettifyRawNumber(comparison.datumA)
                 }}</abbr>
               </a>
             </td>
             <td v-if="showRawData" class="numeric">
               <a v-bind:href="detailedQueryRawDataLink(commitB, comparison)">
-                <abbr :title="comparison.datumB">{{
+                <abbr :title="comparison.datumB.toString()">{{
                   prettifyRawNumber(comparison.datumB)
                 }}</abbr>
               </a>

site/frontend/src/pages/compare/compile/comparisons-table.vue

@@ -90,12 +90,12 @@ function prettifyRawNumber(number: number): string {
               </div>
             </td>
             <td v-if="showRawData" class="numeric">
-              <abbr :title="comparison.datumA">{{
+              <abbr :title="comparison.datumA.toString()">{{
                 prettifyRawNumber(comparison.datumA)
               }}</abbr>
             </td>
             <td v-if="showRawData" class="numeric">
-              <abbr :title="comparison.datumB">{{
+              <abbr :title="comparison.datumB.toString()">{{
                 prettifyRawNumber(comparison.datumB)
               }}</abbr>
             </td>

site/frontend/src/pages/compare/runtime/comparisons-table.vue

@@ -15,8 +15,8 @@ const formattedValue = computed((): string => {
 });
 const padSpaces = computed((): string => {
   const value = formattedValue.value;
-  if (value.length < this.padWidth) {
-    return "&nbsp;".repeat(this.padWidth - value.length);
+  if (value.length < props.padWidth) {
+    return "&nbsp;".repeat(props.padWidth - value.length);
   }
   return "";
 });

site/frontend/src/pages/compare/summary/percent-value.vue

@@ -51,7 +51,7 @@ function SummaryTable({summary}: {summary: SummaryGroup}) {
             </td>
             <td>
               <SummaryPercentValue
-                className={percentClass(summary.all.average)}
+                class={percentClass(summary.all.average)}
                 value={summary.all.average}
               />
             </td>

site/frontend/src/pages/compare/tabs.vue

@@ -2,6 +2,7 @@
   "compilerOptions": {
     "lib": ["es2020", "dom"],
     "target": "es2017",
+    "module": "es2022",
     "moduleResolution": "node",
     "rootDir": "src",
     "esModuleInterop": true,