feat(client): Restore accessed route after page refreshing

packages/applet/src/modules/components/index.vue

@@ -16,9 +16,12 @@ import ComponentTree from '~/components/tree/TreeViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { createSelectedContext } from '~/composables/select'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
-import { searchDeepInObject } from '~/utils'
+import { getValidNodeId, searchDeepInObject } from '~/utils'
 
-const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd'])
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd', 'onSelectId'])
 // responsive layout
 const splitpanesRef = ref<HTMLDivElement>()
 const splitpanesReady = ref(false)
@@ -133,7 +136,7 @@ async function getComponentsInspectorTree(filter = '') {
   return rpc.value.getInspectorTree({ inspectorId, filter }).then((data) => {
     const res = parse(data)
     tree.value = res
-    activeComponentId.value = tree.value?.[0]?.id
+    activeComponentId.value = getValidNodeId(tree.value, props.savedSelectedId) || tree.value?.[0]?.id
     expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     componentTreeLoaded.value = true
   })
@@ -163,6 +166,7 @@ function getComponentState(id: string) {
 
 watch(activeComponentId, (id) => {
   getComponentState(id)
+  emit('onSelectId', id)
   if (componentRenderCodeVisible.value) {
     getComponentRenderCode()
   }

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

@@ -11,9 +11,17 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
+import { getValidNodeId } from '~/utils'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('custom-inspector-state')
 
@@ -118,16 +126,17 @@ function clearInspectorState() {
 watch(selected, () => {
   clearInspectorState()
   getInspectorState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
+      selected.value = getValidNodeId(tree.value, props.savedSelectedId) || data[0].id
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
-      getInspectorState(data[0].id)
+      getInspectorState(selected.value)
     }
   })
 }

packages/applet/src/modules/custom-inspector/index.vue

@@ -11,9 +11,10 @@ import { createCustomInspectorStateContext } from '~/composables/custom-inspecto
 
 const props = defineProps<{
   id: string
+  savedSelectedId?: string
 }>()
+const emit = defineEmits(['loadError', 'onSelectId'])
 
-const emit = defineEmits(['loadError'])
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
 
@@ -74,13 +75,17 @@ watch(() => props.id, () => {
 onUnmounted(() => {
   rpc.value.unhighlight()
 })
+
+function handleSelectId(id: string) {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
     <div v-if="loading">
       <AppConnecting />
     </div>
-    <VirtualRouterView v-else />
+    <VirtualRouterView v-else :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>

packages/applet/src/modules/pinia/components/store/Index.vue

@@ -10,9 +10,16 @@ import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
 import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
-
+import { getValidNodeId } from '~/utils'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('pinia-store-state')
 
@@ -116,15 +123,16 @@ function clearPiniaState() {
 watch(selected, () => {
   clearPiniaState()
   getPiniaState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getPiniaInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getPiniaState(data[0].id)
+      selected.value = getValidNodeId(tree.value, props.savedSelectedId) || data[0].id
+      getPiniaState(selected.value)
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     }
   })

packages/applet/src/modules/pinia/index.vue

@@ -4,6 +4,13 @@ import Store from './components/store/Index.vue'
 import Timeline from './components/timeline/Index.vue'
 import { registerVirtualRouter } from '~/composables/virtual-router'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { VirtualRouterView } = registerVirtualRouter([
   {
     path: '/store',
@@ -26,10 +33,14 @@ const { VirtualRouterView } = registerVirtualRouter([
 ], {
   defaultRoutePath: '/store',
 })
+
+const handleSelectId = (id: string) => {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
-    <VirtualRouterView />
+    <VirtualRouterView :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>

packages/applet/src/modules/router/components/routes/Index.vue

@@ -11,8 +11,16 @@ import Empty from '~/components/basic/Empty.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import { createExpandedContext } from '~/composables/toggle-expanded'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
+import { getValidNodeId } from '~/utils'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 
+const props = defineProps<{
+  savedSelectedId?: string
+}>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('routes-state')
 
@@ -90,15 +98,16 @@ function clearRoutesState() {
 watch(selected, () => {
   clearRoutesState()
   getRoutesState(selected.value)
+  emit('onSelectId', selected.value)
 })
 
 const getRoutesInspectorTree = () => {
   rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
-      selected.value = data[0].id
-      getRoutesState(data[0].id)
+      selected.value = getValidNodeId(data, props.savedSelectedId) || data[0].id
+      getRoutesState(selected.value)
       expandedTreeNodes.value = getNodesByDepth(treeNodeLinkedList.value, 1)
     }
   })

packages/applet/src/modules/router/index.vue

@@ -9,7 +9,12 @@ import { createCustomInspectorStateContext } from '~/composables/custom-inspecto
 
 const props = defineProps<{
   id: string
+  savedSelectedId?: string
 }>()
+const emit = defineEmits<{
+  (e: 'onSelectId', id: string): void
+}>()
+
 const inspectorState = createCustomInspectorStateContext()
 const loading = ref(false)
 const { VirtualRouterView, restoreRouter } = registerVirtualRouter([
@@ -61,10 +66,14 @@ watch(() => props.id, (v) => {
     getInspectorInfo()
   }
 })
+
+const handleSelectId = (id: string) => {
+  emit('onSelectId', id)
+}
 </script>
 
 <template>
   <div h-full w-full>
-    <VirtualRouterView />
+    <VirtualRouterView :saved-selected-id="savedSelectedId" @on-select-id="handleSelectId" />
   </div>
 </template>

packages/applet/src/utils/search.ts

@@ -1,4 +1,5 @@
 import { INFINITY, NAN, NEGATIVE_INFINITY, UNDEFINED, isPlainObject } from '@vue/devtools-kit'
+import type { CustomInspectorNode } from '@vue/devtools-kit'
 
 /**
  * Searches a key or value in the object, with a maximum deepness
@@ -132,3 +133,10 @@ function internalSearchArray(array, searchTerm, seen, depth) {
   }
   return match
 }
+
+/**
+ * Recursively search for target tree Id in nodes and there children
+ */
+export function getValidNodeId(treeNode: CustomInspectorNode[], targetId?: string) {
+  return treeNode.some(({ id: treeNodeId, children }) => (children && getValidNodeId(children, targetId)) || treeNodeId === targetId) && (targetId as string)
+}

packages/client/src/composables/select.ts

@@ -44,3 +44,21 @@ export function useSelectWithContext(groupId: string, id: string, onSelect?: (id
     toggleSelected,
   }
 }
+
+export function useDefaultSelect() {
+  const router = useRouter()
+  const route = useRoute()
+
+  function saveSelectedId(id: string) {
+    router.push({
+      params: {
+        id,
+      },
+    })
+  }
+
+  return {
+    saveSelectedId,
+    savedSelectedId: route.params.id as string,
+  }
+}

packages/client/src/main.ts

@@ -28,15 +28,15 @@ import '~/assets/styles/main.css'
 const routes = [
   { path: '/', component: Index },
   { path: '/overview', component: Overview },
-  { path: '/components', component: Components },
-  { path: '/pinia', component: PiniaPage },
-  { path: '/router', component: RouterPage },
+  { path: '/components/:id?', component: Components },
+  { path: '/pinia/:id?', component: PiniaPage },
+  { path: '/router/:id?', component: RouterPage },
   { path: '/pages', component: Pages },
   { path: '/assets', component: Assets },
   { path: '/graph', component: Graph },
   { path: '/settings', component: Settings },
   { path: `/${CUSTOM_TAB_VIEW}/:name`, component: CustomTabView },
-  { path: `/${CUSTOM_INSPECTOR_TAB_VIEW}/:name`, component: CustomInspectorTabView },
+  { path: `/${CUSTOM_INSPECTOR_TAB_VIEW}/:name/:id?`, component: CustomInspectorTabView },
 ]
 
 const router = createRouter({

packages/client/src/pages/components.vue

@@ -3,6 +3,7 @@ import { Components as ComponentsPanel } from '@vue/devtools-applet'
 import '@vue/devtools-applet/style.css'
 import { rpc } from '@vue/devtools-core'
 import { openInEditor } from '../composables/open-in-editor'
+import { useDefaultSelect } from '../composables/select'
 
 function onInspectComponentStart() {
   rpc.value.emit('toggle-panel', false)
@@ -11,12 +12,16 @@ function onInspectComponentStart() {
 function onInspectComponentEnd() {
   rpc.value.emit('toggle-panel', true)
 }
+
+const { saveSelectedId, savedSelectedId } = useDefaultSelect()
 </script>
 
 <template>
   <ComponentsPanel
+    :saved-selected-id="savedSelectedId"
     @open-in-editor="openInEditor"
     @on-inspect-component-start="onInspectComponentStart"
     @on-inspect-component-end="onInspectComponentEnd"
+    @on-select-id="saveSelectedId"
   />
 </template>

packages/client/src/pages/custom-inspector-tab-view.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { CustomInspector as CustomInspectorPanel } from '@vue/devtools-applet'
+import { useDefaultSelect } from '../composables/select'
 import '@vue/devtools-applet/style.css'
 
 const route = useRoute()
@@ -13,6 +14,8 @@ function onLoadError() {
     router.replace('/overview')
   }, 2000)
 }
+
+const { saveSelectedId, savedSelectedId } = useDefaultSelect()
 </script>
 
 <template>
@@ -27,5 +30,8 @@ function onLoadError() {
       </p>
     </div>
   </div>
-  <CustomInspectorPanel v-else :id="route.params.name" @load-error="onLoadError" />
+  <CustomInspectorPanel
+    v-else :id="(route.params.name as string)" :saved-selected-id="savedSelectedId" @load-error="onLoadError"
+    @on-select-id="saveSelectedId"
+  />
 </template>

packages/client/src/pages/pinia.vue

@@ -1,8 +1,14 @@
 <script setup lang="ts">
 import { Pinia as PiniaPanel } from '@vue/devtools-applet'
+import { useDefaultSelect } from '../composables/select'
 import '@vue/devtools-applet/style.css'
+
+const { saveSelectedId, savedSelectedId } = useDefaultSelect()
 </script>
 
 <template>
-  <PiniaPanel />
+  <PiniaPanel
+    :saved-selected-id="savedSelectedId"
+    @on-select-id="saveSelectedId"
+  />
 </template>

packages/client/src/pages/router.vue

@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import { Router as RouterPanel, useCustomInspector } from '@vue/devtools-applet'
+import { useDefaultSelect } from '../composables/select'
 import '@vue/devtools-applet/style.css'
 
 const { registeredInspector } = useCustomInspector()
+const { saveSelectedId, savedSelectedId } = useDefaultSelect()
+
 // @ts-expect-error skip type check
 const vueRouterInspector = computed(() => registeredInspector.value?.find(item => item.packageName === 'vue-router'))
 // @ts-expect-error skip type check
 const inspectorId = computed(() => vueRouterInspector.value?.id)
 </script>
 
 <template>
-  <RouterPanel :id="inspectorId" />
+  <RouterPanel
+    :id="inspectorId" :saved-selected-id="savedSelectedId"
+    @on-select-id="saveSelectedId"
+  />
 </template>