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() 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 @@ 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 @@ 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 @@