feat(applet): set state tab as default page for custom inspector (#471)

Co-authored-by: arlo <webfansplz@gmail.com>

Author: alexzhang1030

Diff for: packages/applet/src/composables/custom-inspector-state.ts

@@ -9,7 +9,7 @@ type CustomInspectorState = Partial<{
   timelineLayerIds: string[]
 }>
 
-const VueDevToolsStateSymbol: InjectionKey<Ref<CustomInspectorState>> = Symbol('VueDevToolsCustomInspectorStateSymbol')
+const VueDevToolsStateSymbol: InjectionKey<Ref<CustomInspectorState>> = Symbol.for('VueDevToolsCustomInspectorStateSymbol')
 
 export function useCustomInspectorState() {
   return inject(VueDevToolsStateSymbol)!

Diff for: packages/applet/src/composables/virtual-router.ts

@@ -6,9 +6,19 @@ export interface VirtualRoute { path: string, component: Component, icon?: strin
 const VirtualRouteKey: InjectionKey<Ref<{ path: string }>> = Symbol('VirtualRouteKey')
 const VirtualRoutesKey: InjectionKey<ComputedRef<VirtualRoute[]>> = Symbol('VirtualRoutesKey')
 
-export function registerVirtualRouter(routes: MaybeRef<VirtualRoute[]>) {
+export function registerVirtualRouter<
+  const Routes extends VirtualRoute[],
+  RoutePaths extends Routes[number]['path'] = Routes[number]['path'],
+>(
+  routes: MaybeRef<Routes>,
+  props?: {
+    defaultRoutePath?: RoutePaths
+  },
+) {
+  const defaultRoutePath = props?.defaultRoutePath ?? toValue(routes)[0].path
+
   const route = ref<{ path: string, icon?: string }>({
-    path: '/',
+    path: defaultRoutePath,
   })
 
   const _routes = computed(() => toValue(routes))
@@ -27,7 +37,7 @@ export function registerVirtualRouter(routes: MaybeRef<VirtualRoute[]>) {
   })
 
   function restoreRouter() {
-    route.value.path = '/'
+    route.value.path = defaultRoutePath
   }
 
   provide(VirtualRouteKey, route)

Diff for: packages/applet/src/modules/custom-inspector/components/Home.vue renamed to packages/applet/src/modules/custom-inspector/components/About.vue

@@ -5,6 +5,7 @@ import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core
 import { parse } from '@vue/devtools-kit'
 import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
 import { vTooltip } from '@vue/devtools-ui'
+import { until } from '@vueuse/core'
 import Navbar from '~/components/basic/Navbar.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -130,7 +131,8 @@ const getInspectorTree = () => {
     }
   })
 }
-getInspectorTree()
+
+until(inspectorId).toBeTruthy().then(getInspectorTree)
 
 function onInspectorTreeUpdated(_data: string) {
   const data = parse(_data) as {

Diff for: packages/applet/src/modules/custom-inspector/components/state/Index.vue

@@ -2,7 +2,7 @@
 import { computed, onUnmounted, ref, watch } from 'vue'
 import { onRpcConnected, rpc } from '@vue/devtools-core'
 
-import Home from './components/Home.vue'
+import About from './components/About.vue'
 import State from './components/state/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import AppConnecting from '~/components/basic/AppConnecting.vue'
@@ -19,12 +19,6 @@ const loading = ref(false)
 
 const routes = computed(() => {
   return [
-    {
-      path: '/',
-      name: 'Home',
-      component: Home,
-      icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
-    },
     {
       path: '/state',
       name: 'State',
@@ -37,10 +31,18 @@ const routes = computed(() => {
       component: Timeline,
       icon: 'i-mdi:timeline-clock-outline',
     }),
+    {
+      path: '/about',
+      name: 'About',
+      component: About,
+      icon: 'https://raw.githubusercontent.com/TanStack/query/main/packages/vue-query/media/vue-query.svg',
+    },
   ].filter(Boolean) as VirtualRoute[]
 })
 
-const { VirtualRouterView, restoreRouter } = registerVirtualRouter(routes)
+const { VirtualRouterView, restoreRouter } = registerVirtualRouter(routes, {
+  defaultRoutePath: '/state',
+})
 
 function getInspectorInfo() {
   loading.value = true

Diff for: packages/applet/src/modules/custom-inspector/index.vue

@@ -1,18 +1,10 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-
-import Home from './components/Home.vue'
+import About from './components/About.vue'
 import Store from './components/store/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
 
 const { VirtualRouterView } = registerVirtualRouter([
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    icon: 'i-logos-pinia',
-  },
   {
     path: '/store',
     name: 'Store',
@@ -25,9 +17,15 @@ const { VirtualRouterView } = registerVirtualRouter([
     component: Timeline,
     icon: 'i-mdi:timeline-clock-outline',
   },
-])
-
-const routePath = ref('/')
+  {
+    path: '/',
+    name: 'About',
+    component: About,
+    icon: 'i-logos-pinia',
+  },
+], {
+  defaultRoutePath: '/store',
+})
 </script>
 
 <template>

Diff for: packages/applet/src/modules/pinia/components/Home.vue renamed to packages/applet/src/modules/pinia/components/About.vue

@@ -4,6 +4,7 @@ import { Pane, Splitpanes } from 'splitpanes'
 import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
 import type { CustomInspectorNode, CustomInspectorState } from '@vue/devtools-kit'
+import { until } from '@vueuse/core'
 import Navbar from '~/components/basic/Navbar.vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
@@ -102,7 +103,8 @@ const getRoutesInspectorTree = () => {
     }
   })
 }
-getRoutesInspectorTree()
+
+until(inspectorId).toBeTruthy().then(getRoutesInspectorTree)
 
 function onInspectorTreeUpdated(_data: string) {
   const data = parse(_data) as {

Diff for: packages/applet/src/modules/pinia/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { onRpcConnected, rpc } from '@vue/devtools-core'
-import Home from './components/Home.vue'
+import About from './components/About.vue'
 import Routes from './components/routes/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
@@ -13,12 +13,6 @@ const props = defineProps<{
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
 const { VirtualRouterView, restoreRouter } = registerVirtualRouter([
-  {
-    path: '/',
-    name: 'Home',
-    component: Home,
-    icon: 'i-ri-route-line',
-  },
   {
     path: '/routes',
     name: 'Routes',
@@ -31,7 +25,15 @@ const { VirtualRouterView, restoreRouter } = registerVirtualRouter([
     component: Timeline,
     icon: 'i-mdi:timeline-clock-outline',
   },
-])
+  {
+    path: '/about',
+    name: 'About',
+    component: About,
+    icon: 'i-ri-route-line',
+  },
+], {
+  defaultRoutePath: '/routes',
+})
 
 function getInspectorInfo() {
   loading.value = true