From 7b41e0bd92fbb7979dfac66ca035737582371123 Mon Sep 17 00:00:00 2001
From: Fan Pei <fanpei920@gmail.com>
Date: Mon, 29 Jul 2024 11:21:02 +0900
Subject: [PATCH] feat: Perform saving on client side

---
 packages/applet/src/utils/search.ts            |  8 ++++++++
 packages/client/src/composables/select.ts      | 18 ++++++++++++++++++
 packages/client/src/pages/components.vue       |  5 +++++
 .../src/pages/custom-inspector-tab-view.vue    |  8 +++++++-
 packages/client/src/pages/pinia.vue            |  8 +++++++-
 packages/client/src/pages/router.vue           |  8 +++++++-
 6 files changed, 52 insertions(+), 3 deletions(-)

diff --git a/packages/applet/src/utils/search.ts b/packages/applet/src/utils/search.ts
index 3ba452a6a..08a330835 100644
--- a/packages/applet/src/utils/search.ts
+++ b/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)
+}
diff --git a/packages/client/src/composables/select.ts b/packages/client/src/composables/select.ts
index df68e63b7..b9f487b46 100644
--- a/packages/client/src/composables/select.ts
+++ b/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,
+  }
+}
diff --git a/packages/client/src/pages/components.vue b/packages/client/src/pages/components.vue
index c042e417a..03cb42e27 100644
--- a/packages/client/src/pages/components.vue
+++ b/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>
diff --git a/packages/client/src/pages/custom-inspector-tab-view.vue b/packages/client/src/pages/custom-inspector-tab-view.vue
index 47238e392..1ddf33475 100644
--- a/packages/client/src/pages/custom-inspector-tab-view.vue
+++ b/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>
diff --git a/packages/client/src/pages/pinia.vue b/packages/client/src/pages/pinia.vue
index 11d7d1c9c..86e224edc 100644
--- a/packages/client/src/pages/pinia.vue
+++ b/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>
diff --git a/packages/client/src/pages/router.vue b/packages/client/src/pages/router.vue
index a53e3402d..3a0a5525f 100644
--- a/packages/client/src/pages/router.vue
+++ b/packages/client/src/pages/router.vue
@@ -1,8 +1,11 @@
 <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
@@ -10,5 +13,8 @@ const inspectorId = computed(() => vueRouterInspector.value?.id)
 </script>
 
 <template>
-  <RouterPanel :id="inspectorId" />
+  <RouterPanel
+    :id="inspectorId" :saved-selected-id="savedSelectedId"
+    @on-select-id="saveSelectedId"
+  />
 </template>