From bc6ceeafa17cd6853b09aef4e1428cf1c970895d Mon Sep 17 00:00:00 2001
From: skirtle <65301168+skirtles-code@users.noreply.github.com>
Date: Thu, 2 Apr 2026 02:59:18 +0100
Subject: [PATCH] refactor(client): add type `CustomInspectorTab`

---
 .../src/components/common/SplitScreen.vue       | 17 ++++++++++++-----
 .../src/composables/custom-inspector-tabs.ts    |  6 +++---
 .../src/pages/custom-inspector-tab-view.vue     |  1 -
 packages/client/src/types/tab.ts                |  4 ++++
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/packages/client/src/components/common/SplitScreen.vue b/packages/client/src/components/common/SplitScreen.vue
index 5e05f86d1..0763351da 100644
--- a/packages/client/src/components/common/SplitScreen.vue
+++ b/packages/client/src/components/common/SplitScreen.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
+import type { CustomInspectorTab, ModuleBuiltinTab } from '~/types'
 import { CustomInspector as CustomInspectorComponent } from '@vue/devtools-applet'
 import { CustomTab } from '@vue/devtools-kit'
 import { vTooltip, VueButton, VueCard, VueDropdown } from '@vue/devtools-ui'
-import { ModuleBuiltinTab } from '~/types'
 
 function close() {
   devtoolsClientState.value.splitScreen.enabled = false
@@ -46,18 +46,25 @@ function getRouteTabName() {
   return route.path
 }
 
+function isCustomTab(tab: ModuleBuiltinTab | CustomTab): tab is CustomTab {
+  return !!(tab as CustomTab).view
+}
+
+function isCustomInspectorTab(tab: ModuleBuiltinTab): tab is CustomInspectorTab {
+  return tab.path.startsWith(CUSTOM_INSPECTOR_TAB_VIEW)
+}
+
 watch(
   () => currentTab.value,
   (tab) => {
     if (!tab)
       return
-    // check if is a custom tab
-    if ((tab as CustomTab).view) {
+    if (isCustomTab(tab)) {
       customTabName.value = tab.name
       customTabType.value = 'custom-tab'
       return
     }
-    if ((tab as ModuleBuiltinTab).path.startsWith(CUSTOM_INSPECTOR_TAB_VIEW)) {
+    if (isCustomInspectorTab(tab)) {
       customTabName.value = tab.name
       customPluginId.value = tab.pluginId
       customTabType.value = 'custom-inspector'
@@ -65,7 +72,7 @@ watch(
     }
     customTabName.value = null
     const routes = router.getRoutes()
-    const matched = routes.find(route => route.path === `/${(tab as ModuleBuiltinTab).path}`)
+    const matched = routes.find(route => route.path === `/${tab.path}`)
     const component = matched?.components?.default
     if (typeof component === 'function')
       PageComponent.value = defineAsyncComponent(component as any)
diff --git a/packages/client/src/composables/custom-inspector-tabs.ts b/packages/client/src/composables/custom-inspector-tabs.ts
index 58ded7a73..06622ab1a 100644
--- a/packages/client/src/composables/custom-inspector-tabs.ts
+++ b/packages/client/src/composables/custom-inspector-tabs.ts
@@ -1,13 +1,13 @@
 import type { CustomInspectorType } from '@vue/devtools-applet'
-import type { ModuleBuiltinTab } from '~/types/tab'
+import type { CustomInspectorTab } from '~/types/tab'
 
 import { useCustomInspector } from '@vue/devtools-applet'
 
 export function useCustomInspectorTabs() {
   const { registeredInspector } = useCustomInspector()
 
-  const customInspectorTabs = computed<ModuleBuiltinTab[]>(() => {
-    return registeredInspector.value.map((inspector: CustomInspectorType, index) => {
+  const customInspectorTabs = computed(() => {
+    return registeredInspector.value.map((inspector: CustomInspectorType, index): CustomInspectorTab => {
       return {
         order: index,
         name: inspector.id,
diff --git a/packages/client/src/pages/custom-inspector-tab-view.vue b/packages/client/src/pages/custom-inspector-tab-view.vue
index 641e3fd29..577c7f3b9 100644
--- a/packages/client/src/pages/custom-inspector-tab-view.vue
+++ b/packages/client/src/pages/custom-inspector-tab-view.vue
@@ -6,7 +6,6 @@ const route = useRoute()
 const router = useRouter()
 const loadError = ref(false)
 const customInspectorTabs = useCustomInspectorTabs()
-// @ts-expect-error skip type check
 const pluginId = computed(() => customInspectorTabs.value.find(tab => tab.name === route.params.name)?.pluginId)
 function onLoadError() {
   loadError.value = true
diff --git a/packages/client/src/types/tab.ts b/packages/client/src/types/tab.ts
index 469bbc9fd..c6be50cfe 100644
--- a/packages/client/src/types/tab.ts
+++ b/packages/client/src/types/tab.ts
@@ -9,3 +9,7 @@ export interface ModuleBuiltinTab extends Pick<CustomTab, 'name' | 'icon' | 'tit
   badge?: () => MaybeRefOrGetter<number | string | undefined>
   onClick?: () => void
 }
+
+export interface CustomInspectorTab extends ModuleBuiltinTab {
+  pluginId: string
+}