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>