From 240c9f9615f8d3695b3e0e69ea8dafbec3e31ac1 Mon Sep 17 00:00:00 2001
From: Anthony Fu <github@antfu.me>
Date: Fri, 20 Sep 2024 15:52:23 +0200
Subject: [PATCH] chore: fix type check

---
 packages/devtools-ui-kit/src/components/NDarkToggle.vue  | 2 +-
 .../devtools/client/components/BuildAnalyzeDetails.vue   | 7 +++++--
 packages/devtools/client/components/DataSchemaDrawer.vue | 4 ++--
 packages/devtools/client/components/StateEditor.vue      | 7 ++++---
 packages/devtools/client/composables/utils.ts            | 3 ++-
 packages/devtools/client/pages/modules/analyze-build.vue | 9 +++++++--
 6 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/devtools-ui-kit/src/components/NDarkToggle.vue b/packages/devtools-ui-kit/src/components/NDarkToggle.vue
index 63f569a67..2b9086b34 100644
--- a/packages/devtools-ui-kit/src/components/NDarkToggle.vue
+++ b/packages/devtools-ui-kit/src/components/NDarkToggle.vue
@@ -16,6 +16,7 @@ const isDark = computed<boolean>({
 })
 
 const isAppearanceTransition = typeof document !== 'undefined'
+// @ts-expect-error document.startViewTransition can be undefined
   && document.startViewTransition
   && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
@@ -35,7 +36,6 @@ function toggle(event?: MouseEvent) {
     Math.max(x, innerWidth - x),
     Math.max(y, innerHeight - y),
   )
-  // @ts-expect-error: Transition API
   const transition = document.startViewTransition(async () => {
     isDark.value = !isDark.value
     await nextTick()
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index 15feb3829..7e56f183e 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -5,7 +5,6 @@ import { formatTimeAgo } from '@vueuse/core'
 import { computed, ref } from 'vue'
 import { ensureDevAuthToken } from '~/composables/dev-auth'
 import { rpc } from '~/composables/rpc'
-import { formatDuration } from '~/composables/utils'
 
 const props = defineProps<{
   current: AnalyzeBuildMeta
@@ -31,6 +30,10 @@ const tabs = computed(() => {
 
 const selectedTab = ref(tabs.value[0])
 
+function getDuration(build: AnalyzeBuildMeta) {
+  return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
+}
+
 function formatFileSize(bytes: number) {
   if (bytes < 1024)
     return `${bytes}B`
@@ -81,7 +84,7 @@ async function clear(name: string) {
           <div text-sm op50>
             Build duration
           </div>
-          <div>{{ formatDuration(current) }}</div>
+          <div>{{ getDuration(current) }}</div>
         </div>
         <template v-if="current.size?.clientBundle">
           <div i-carbon-cics-program text-xl />
diff --git a/packages/devtools/client/components/DataSchemaDrawer.vue b/packages/devtools/client/components/DataSchemaDrawer.vue
index 95ac8f283..617086b0f 100644
--- a/packages/devtools/client/components/DataSchemaDrawer.vue
+++ b/packages/devtools/client/components/DataSchemaDrawer.vue
@@ -17,7 +17,7 @@ const language = computed(() => languages.find(l => l.displayName === selectedLa
 // TODO: use localStorage
 const options = ref(language.value?.optionDefinitions.filter(o => typeof o.defaultValue === 'boolean'))
 
-const generatedJson = computedAsync(async () => {
+const generatedJson = computedAsync<string>(async () => {
   // eslint-disable-next-line ts/no-unused-expressions
   counter.value
 
@@ -70,7 +70,7 @@ watch(selectedLang, () => {
 const copy = useCopy()
 
 function copyToClipboard() {
-  copy(generatedJson.value)
+  copy(generatedJson.value || '')
 }
 </script>
 
diff --git a/packages/devtools/client/components/StateEditor.vue b/packages/devtools/client/components/StateEditor.vue
index a5e02fe21..9752f5b96 100644
--- a/packages/devtools/client/components/StateEditor.vue
+++ b/packages/devtools/client/components/StateEditor.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import type { useVModel, watchPausable } from '@vueuse/core'
+import type { watchPausable } from '@vueuse/core'
+import { useVModel } from '@vueuse/core'
 import JsonEditorVue from 'json-editor-vue'
-import { nextTick, onMounted, readonly, shallowRef, watch } from 'vue'
+import { nextTick, onMounted, shallowRef, watch } from 'vue'
 import { getColorMode } from '~/composables/client'
 
 const props = defineProps<{
@@ -116,7 +117,7 @@ async function refresh() {
         :main-menu-bar="false"
         :navigation-bar="false"
         :status-bar="false"
-        :read-only="readonly"
+        :read-only="props.readonly"
         :indentation="2"
         :tab-size="2"
       />
diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
index 56c21f978..86bf047f9 100644
--- a/packages/devtools/client/composables/utils.ts
+++ b/packages/devtools/client/composables/utils.ts
@@ -117,7 +117,8 @@ export function getSocialPreviewCard(
   }
 }
 
-export function formatDuration(ms: number) {
+export function formatDuration(ms: number | string) {
+  ms = Number(ms)
   if (Number.isNaN(ms) || ms < 0)
     return '-'
   if (ms < 1)
diff --git a/packages/devtools/client/pages/modules/analyze-build.vue b/packages/devtools/client/pages/modules/analyze-build.vue
index 70b040571..648e671a6 100644
--- a/packages/devtools/client/pages/modules/analyze-build.vue
+++ b/packages/devtools/client/pages/modules/analyze-build.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import type { AnalyzeBuildMeta } from '~/../src/types'
 import { useRouter } from '#app/composables/router'
 import { definePageMeta } from '#imports'
 import { createTemplatePromise, formatTimeAgo } from '@vueuse/core'
@@ -11,7 +12,7 @@ import { registerCommands } from '~/composables/state-commands'
 import { useCurrentTerminalId } from '~/composables/state-routes'
 import { processAnalyzeBuildInfo } from '~/composables/state-subprocess'
 import { telemetry } from '~/composables/telemetry'
-import { formatDuration, useSessionState } from '~/composables/utils'
+import { useSessionState } from '~/composables/utils'
 
 definePageMeta({
   icon: 'carbon-edge-node',
@@ -53,6 +54,10 @@ async function start() {
 
 const terminalId = useCurrentTerminalId()
 
+function getDuration(build: AnalyzeBuildMeta) {
+  return `${((build.endTime - build.startTime) / 1000).toFixed(1)}s`
+}
+
 function gotoTerminal() {
   if (processAnalyzeBuildInfo.value?.processId) {
     terminalId.value = processAnalyzeBuildInfo.value.processId
@@ -83,7 +88,7 @@ registerCommands(() => [
             <code>{{ build.name }}</code>
             <div flex="~ gap-1 items-center wrap" w-full text-sm op60>
               <div i-carbon-time />
-              <span>{{ formatDuration(build) }}</span>
+              <span>{{ getDuration(build) }}</span>
               <div flex-auto />
               <span>{{ formatTimeAgo(new Date(build.endTime)) }}</span>
             </div>