Merge pull request #1627 from Kobzol/type-check-vue

Type-check Vue components, not just TypeScript files

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,