feat: Perform saving on client side

Author: Azurewarth0920

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/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>