refactor(client): add type CustomInspectorTab (#1082)

Author: skirtles-code

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,26 +46,33 @@ 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'
       return
     }
     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)

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,

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

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
+}