feat: add component inspect button to the sidebar

nuxt · May 8, 2023 · 512d852 · 512d852
1 parent b35ebb0
commit 512d852
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 1 deletion.
diff --git a/packages/devtools-kit/src/_types/custom-tabs.ts b/packages/devtools-kit/src/_types/custom-tabs.ts
@@ -114,6 +114,7 @@ export interface ModuleBuiltinTab {
   category?: TabCategory
   show?: () => any
   badge?: () => number | string | undefined
+  onClick?: () => void
 }
 
 export type ModuleTabInfo = ModuleCustomTab | ModuleBuiltinTab
diff --git a/packages/devtools/client/components/SideNavItem.vue b/packages/devtools/client/components/SideNavItem.vue
@@ -21,6 +21,7 @@ const isActive = computed(() => route.path.startsWith(tabPath.value))
       hover="bg-active" relative
       h-10 w-10 select-none items-center justify-center rounded-xl p1 text-secondary
       exact-active-class="!text-primary bg-active"
+      @click="'onClick' in tab && tab.onClick?.()"
     >
       <TabIcon
         text-xl

diff --git a/packages/devtools/client/composables/state.ts b/packages/devtools/client/composables/state.ts
@@ -87,6 +87,7 @@ export function useAllTabs() {
   const customTabs = useCustomTabs()
   const settings = useDevToolsSettings()
   const router = useRouter()
+  const client = useClient()
 
   const builtin = computed(() => [
     ...router.getRoutes()
@@ -100,6 +101,21 @@ export function useAllTabs() {
           ...i.meta,
         }
       }),
+    {
+      name: 'builtin-inspector',
+      title: 'Inspect Vue components',
+      icon: 'i-carbon-select-window',
+      category: 'app',
+      show() {
+        return !!client.value?.inspector?.instance
+      },
+      onClick() {
+        if (!client.value?.inspector?.instance)
+          return
+        client.value.inspector.enable()
+        router.push('/__inspecting')
+      },
+    },
     ...(customTabs.value || []).filter(i => i.name.startsWith('builtin-')),
   ])
 

diff --git a/packages/devtools/client/plugins/global.ts b/packages/devtools/client/plugins/global.ts
@@ -19,8 +19,10 @@ export default defineNuxtPlugin(() => {
           client.value = { ...client.value }
       })
       _client.hooks.hook('host:inspector:close', () => {
+        if (router.currentRoute.value.path === '/modules/custom-builtin-vscode')
+          return
         if (router.currentRoute.value.path === '/__inspecting')
-          router.replace('/modules/components')
+          router.go(-1)
       })
       _client.hooks.hook('host:inspector:update', (data) => {
         inspectorData.value = data