chore(eslint): fix all eslint errors

Author: serhalp

app/app.vue

@@ -29,8 +29,8 @@ const handleRequestFormSubmit = async ({
     });
 
     error.value = null;
-    // TODO(serhalp) nuxt doesn't appear to re-export the `FetchError` types from ofetch. Look into
-    // this.
+    // TODO(serhalp) nuxt doesn't appear to re-export the `FetchError` types from ofetch. Look into this.
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } catch (err: any) {
     error.value =
       err?.data?.message ??
@@ -64,7 +64,7 @@ const handleClickClear = (): void => {
     </div>
 
     <div class="flex-btwn run-panels">
-      <RunPanel v-for="run in runs" v-bind="run" />
+      <RunPanel v-for="(run, i) in runs" v-bind="run" :key="i" />
     </div>
   </main>
 

app/components/CacheAnalysis.vue

@@ -24,7 +24,7 @@ const formatDate = (date: Date): string =>
     timeZoneName: "short",
   });
 
-let now = ref(Date.now());
+const now = ref(Date.now());
 
 const cacheAnalysis = computed(() =>
   getCacheAnalysis(props.cacheHeaders, now.value),
@@ -62,19 +62,20 @@ onUnmounted(() => {
           ↓
         </h4>
       </dt>
-      <dd></dd>
+      <dd />
 
-      <template v-for="(
+      <template
+v-for="(
           { cacheName, parameters }, cacheIndex
-        ) in cacheAnalysis.cacheStatus">
+        ) in cacheAnalysis.cacheStatus" :key="cacheIndex">
         <!-- This is a bit of a hack to use the pretty <dt> styling but with sections. -->
         <!-- I should probably just do something custom instead. -->
         <dt class="cache-heading">
           <h4>
             ↳ <em>{{ cacheName }}</em> cache
           </h4>
         </dt>
-        <dd></dd>
+        <dd />
 
         <dt>Hit</dt>
         <dd>{{ parameters.hit ? "✅" : "❌" }}</dd>
@@ -124,7 +125,7 @@ onUnmounted(() => {
           🏁 Response to client
         </h4>
       </dt>
-      <dd></dd>
+      <dd />
 
       <dt>Cacheable</dt>
       <dd>{{ cacheAnalysis.cacheControl.isCacheable ? "✅" : "❌" }}</dd>
@@ -156,27 +157,23 @@ onUnmounted(() => {
       </template>
 
       <template v-if="cacheAnalysis.cacheControl.ttl">
-        <dt>
-          TTL{{
+        <dt>TTL{{
             cacheAnalysis.cacheControl.netlifyCdnTtl ||
               cacheAnalysis.cacheControl.cdnTtl
               ? " (browser)"
               : ""
-          }}
-        </dt>
+          }}</dt>
         <dd :title="formatHumanSeconds(cacheAnalysis.cacheControl.ttl)">
           {{ formatSeconds(cacheAnalysis.cacheControl.ttl) }}
         </dd>
       </template>
 
       <template v-if="cacheAnalysis.cacheControl.cdnTtl">
-        <dt>
-          TTL ({{
+        <dt>TTL ({{
             cacheAnalysis.cacheControl.netlifyCdnTtl
               ? "other CDNs"
               : "Netlify CDN"
-          }})
-        </dt>
+          }})</dt>
         <dd :title="formatHumanSeconds(cacheAnalysis.cacheControl.cdnTtl)">
           {{ formatSeconds(cacheAnalysis.cacheControl.cdnTtl) }}
         </dd>

app/components/RunPanel.vue

@@ -13,8 +13,8 @@ const props = defineProps<{
 
     <small>HTTP {{ props.status }} ({{ props.durationInMs }} ms)</small>
 
-    <CacheAnalysis :cacheHeaders="props.cacheHeaders" />
-    <RawCacheHeaders :cacheHeaders="props.cacheHeaders" />
+    <CacheAnalysis :cache-headers="props.cacheHeaders" />
+    <RawCacheHeaders :cache-headers="props.cacheHeaders" />
   </div>
 </template>