Revert "feat: filter tree/states for custom inspectors (#664)"

This reverts commit dce7c1e.

packages/applet/src/composables/custom-inspector-state.ts

@@ -8,8 +8,6 @@ type CustomInspectorState = Partial<{
   label: string
   logo: string
   timelineLayerIds: string[]
-  treeFilterPlaceholder: string
-  stateFilterPlaceholder: string
 }>
 
 const VueDevToolsStateSymbol: InjectionKey<Ref<CustomInspectorState>> = Symbol.for('VueDevToolsCustomInspectorStateSymbol')

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

@@ -17,7 +17,7 @@ import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 import { createSelectedContext } from '~/composables/select'
 import { createExpandedContext } from '~/composables/toggle-expanded'
-import { filterInspectorState } from '~/utils'
+import { searchDeepInObject } from '~/utils'
 import ComponentRenderCode from './components/RenderCode.vue'
 
 const emit = defineEmits(['openInEditor', 'onInspectComponentStart', 'onInspectComponentEnd'])
@@ -104,14 +104,27 @@ const activeTreeNode = computed(() => {
 })
 const activeTreeNodeFilePath = computed(() => activeTreeNode.value?.file ?? '')
 
-const displayState = computed(() => {
-  return filterInspectorState({
-    state: activeComponentState.value,
-    filterKey: filterStateName.value,
-    processGroup(groupFields) {
-      return flatten(Object.values(groupBy(sortByKey(groupFields), 'stateType')))
-    },
-  })
+const filteredState = computed(() => {
+  const result = {}
+  for (const groupKey in activeComponentState.value) {
+    const group = activeComponentState.value[groupKey]
+    const groupFields = group.filter((el) => {
+      try {
+        return searchDeepInObject({
+          [el.key]: el.value,
+        }, filterStateName.value)
+      }
+      catch (e) {
+        return {
+          [el.key]: e,
+        }
+      }
+    })
+    const normalized = flatten(Object.values(groupBy(sortByKey(groupFields), 'stateType')))
+    if (groupFields.length)
+      result[groupKey] = normalized
+  }
+  return result
 })
 
 const { expanded: expandedTreeNodes } = createExpandedContext()
@@ -344,7 +357,7 @@ function toggleApp(id: string) {
               <i v-if="activeTreeNodeFilePath" v-tooltip.bottom="'Open in Editor'" class="i-carbon-launch h-4 w-4 cursor-pointer hover:(op-70)" @click="openInEditor" />
             </div>
           </div>
-          <RootStateViewer class="no-scrollbar flex-1 select-none overflow-scroll" :data="displayState" :node-id="activeComponentId" :inspector-id="inspectorId" expanded-state-id="component-state" />
+          <RootStateViewer class="no-scrollbar flex-1 select-none overflow-scroll" :data="filteredState" :node-id="activeComponentId" :inspector-id="inspectorId" expanded-state-id="component-state" />
         </div>
         <ComponentRenderCode v-if="componentRenderCodeVisible && componentRenderCode" :code="componentRenderCode" @close="closeComponentRenderCode" />
       </Pane>

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

@@ -2,7 +2,7 @@
 import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
 import { DevToolsMessagingEvents, onRpcConnected, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
-import { vTooltip, VueIcIcon, VueInput } from '@vue/devtools-ui'
+import { vTooltip, VueIcIcon } from '@vue/devtools-ui'
 import { until } from '@vueuse/core'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, onUnmounted, ref, watch } from 'vue'
@@ -13,7 +13,6 @@ import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 import { createExpandedContext } from '~/composables/toggle-expanded'
-import { filterInspectorState } from '~/utils'
 
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('custom-inspector-state')
@@ -33,24 +32,6 @@ const selected = ref('')
 const state = ref<Record<string, CustomInspectorState[]>>({})
 const emptyState = computed(() => !Object.keys(state.value).length)
 
-const inspectorState = useCustomInspectorState()
-
-const filterTreeKey = ref('')
-const filterStateKey = ref('')
-
-watch(filterTreeKey, (value, oldValue) => {
-  if (!value.trim().length && !oldValue.trim().length)
-    return
-  getInspectorTree(value)
-})
-
-const displayState = computed(() => {
-  return filterInspectorState({
-    state: state.value,
-    filterKey: filterStateKey.value,
-  })
-})
-
 // tree
 function dfs(node: { id: string, children?: { id: string }[] }, path: string[] = [], linkedList: string[][] = []) {
   path.push(node.id)
@@ -139,8 +120,8 @@ watch(selected, () => {
   getInspectorState(selected.value)
 })
 
-function getInspectorTree(filter = '') {
-  rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter }).then((_data) => {
+const getInspectorTree = () => {
+  rpc.value.getInspectorTree({ inspectorId: inspectorId.value, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
@@ -151,7 +132,7 @@ function getInspectorTree(filter = '') {
   })
 }
 
-until(inspectorId).toBeTruthy().then(() => getInspectorTree())
+until(inspectorId).toBeTruthy().then(getInspectorTree)
 
 function onInspectorTreeUpdated(_data: string) {
   const data = parse(_data) as {
@@ -198,46 +179,41 @@ onUnmounted(() => {
     <DevToolsHeader :doc-link="customInspectState.homepage!">
       <Navbar />
     </DevToolsHeader>
-    <Empty v-if="!tree.length && !filterTreeKey.trim().length">
-      No Data
-    </Empty>
-    <template v-else>
+    <template v-if="tree.length">
       <Splitpanes class="flex-1 overflow-auto">
         <Pane border="r base" size="40" h-full>
           <div class="h-full flex flex-col p2">
-            <div class="grid grid-cols-[1fr_auto] mb1 items-center gap2 pb1" border="b dashed base">
-              <VueInput v-model="filterTreeKey" :placeholder="inspectorState.treeFilterPlaceholder" />
-              <div v-if="actions?.length" class="flex items-center gap-2 px-1">
+            <div v-if="actions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
+              <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
                   <VueIcIcon :name="`baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
                 </div>
               </div>
             </div>
-            <div v-if="tree.length" class="no-scrollbar flex-1 select-none overflow-scroll">
+            <div class="no-scrollbar flex-1 select-none overflow-scroll">
               <ComponentTree v-model="selected" :data="tree" />
             </div>
-            <Empty v-else>
-              No Data
-            </Empty>
           </div>
         </Pane>
         <Pane size="60">
           <div class="h-full flex flex-col p2">
-            <div class="grid grid-cols-[1fr_auto] mb1 items-center gap2 pb1" border="b dashed base">
-              <VueInput v-model="filterStateKey" :placeholder="inspectorState.stateFilterPlaceholder" />
-              <div v-if="nodeActions?.length" class="flex items-center gap-2 px-1">
+            <div v-if="nodeActions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
+              <div class="flex items-center gap-2 px-1">
                 <div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
                   <VueIcIcon :name="`baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
                 </div>
               </div>
             </div>
-            <RootStateViewer v-if="selected && !emptyState" :data="displayState" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="custom-inspector-state" class="no-scrollbar flex-1 select-none overflow-scroll" />
+            <RootStateViewer v-if="selected && !emptyState" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="custom-inspector-state" class="no-scrollbar flex-1 select-none overflow-scroll" />
             <Empty v-else>
               No Data
             </Empty>
           </div>
         </Pane>
       </Splitpanes>
     </template>
+    <Empty v-else>
+      No Data
+    </Empty>
   </div>
 </template>

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

@@ -68,8 +68,6 @@ function getInspectorInfo() {
         logo: payload?.logo,
         timelineLayerIds: payload?.timelineLayers.map(item => item.id),
         pluginId: props.pluginId,
-        treeFilterPlaceholder: payload.treeFilterPlaceholder,
-        stateFilterPlaceholder: payload.stateFilterPlaceholder,
       }
       inspectorState.value = state
       restoreRouter()

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

@@ -2,7 +2,7 @@
 import type { CustomInspectorNode, CustomInspectorOptions, CustomInspectorState } from '@vue/devtools-kit'
 import { DevToolsMessagingEvents, rpc } from '@vue/devtools-core'
 import { parse } from '@vue/devtools-kit'
-import { vTooltip, VueInput } from '@vue/devtools-ui'
+import { vTooltip } from '@vue/devtools-ui'
 import { Pane, Splitpanes } from 'splitpanes'
 import { computed, onUnmounted, ref, watch } from 'vue'
 import DevToolsHeader from '~/components/basic/DevToolsHeader.vue'
@@ -11,40 +11,21 @@ import Navbar from '~/components/basic/Navbar.vue'
 import RootStateViewer from '~/components/state/RootStateViewer.vue'
 import ComponentTree from '~/components/tree/TreeViewer.vue'
 
-import { useCustomInspectorState } from '~/composables/custom-inspector-state'
 import { createExpandedContext } from '~/composables/toggle-expanded'
-import { filterInspectorState } from '~/utils'
-import { PiniaPluginInspectorId } from '../../constants'
 
 const { expanded: expandedTreeNodes } = createExpandedContext()
 const { expanded: expandedStateNodes } = createExpandedContext('pinia-store-state')
 
-const inspectorId = PiniaPluginInspectorId
+const inspectorId = 'pinia'
 const nodeActions = ref<CustomInspectorOptions['nodeActions']>([])
 const actions = ref<CustomInspectorOptions['nodeActions']>([])
-const inspectorState = useCustomInspectorState()
 
 const selected = ref('')
 const tree = ref<CustomInspectorNode[]>([])
 const treeNodeLinkedList = computed(() => tree.value?.length ? dfs(tree.value?.[0]) : [])
 const flattenedTreeNodes = computed(() => flattenTreeNodes(tree.value))
 const flattenedTreeNodesIds = computed(() => flattenedTreeNodes.value.map(node => node.id))
 const state = ref<Record<string, CustomInspectorState[]>>({})
-const filterStoreKey = ref('')
-const filterStateKey = ref('')
-
-watch(filterStoreKey, (value, oldValue) => {
-  if (!value.trim().length && !oldValue.trim().length)
-    return
-  getPiniaInspectorTree(value)
-})
-
-const displayState = computed(() => {
-  return filterInspectorState({
-    state: state.value,
-    filterKey: filterStateKey.value,
-  })
-})
 
 const emptyState = computed(() => !state.value.state?.length && !state.value.getters?.length)
 
@@ -137,8 +118,8 @@ watch(selected, () => {
   getPiniaState(selected.value)
 })
 
-function getPiniaInspectorTree(filter: string = '') {
-  rpc.value.getInspectorTree({ inspectorId, filter }).then((_data) => {
+const getPiniaInspectorTree = () => {
+  rpc.value.getInspectorTree({ inspectorId, filter: '' }).then((_data) => {
     const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
@@ -203,9 +184,8 @@ onUnmounted(() => {
     <Splitpanes class="flex-1 overflow-auto">
       <Pane border="r base" size="40" h-full>
         <div class="h-full flex flex-col p2">
-          <div class="grid grid-cols-[1fr_auto] mb1 items-center gap2 pb1" border="b dashed base">
-            <VueInput v-model="filterStoreKey" :placeholder="inspectorState.treeFilterPlaceholder" />
-            <div v-if="actions?.length" class="flex items-center gap-2 px-1">
+          <div v-if="actions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
+            <div class="flex items-center gap-2 px-1">
               <div v-for="(action, index) in actions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callAction(index)">
                 <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
               </div>
@@ -218,15 +198,14 @@ onUnmounted(() => {
       </Pane>
       <Pane size="60">
         <div class="h-full flex flex-col p2">
-          <div class="grid grid-cols-[1fr_auto] mb1 items-center gap2 pb1" border="b dashed base">
-            <VueInput v-model="filterStateKey" :placeholder="inspectorState.stateFilterPlaceholder" />
-            <div v-if="nodeActions?.length" class="flex items-center gap-2 px-1">
+          <div v-if="nodeActions?.length" class="mb-1 flex justify-end pb-1" border="b dashed base">
+            <div class="flex items-center gap-2 px-1">
               <div v-for="(action, index) in nodeActions" :key="index" v-tooltip.bottom-end="{ content: action.tooltip }" class="flex items-center gap1" @click="callNodeAction(index)">
                 <i :class="`i-ic-baseline-${action.icon.replace(/\_/g, '-')}`" cursor-pointer op70 text-base hover:op100 />
               </div>
             </div>
           </div>
-          <RootStateViewer v-if="selected && !emptyState" class="no-scrollbar flex-1 select-none overflow-scroll" :data="displayState" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="pinia-store-state" />
+          <RootStateViewer v-if="selected && !emptyState" class="no-scrollbar flex-1 select-none overflow-scroll" :data="state" :node-id="selected" :inspector-id="inspectorId" expanded-state-id="pinia-store-state" />
           <Empty v-else>
             No Data
           </Empty>

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

@@ -1,13 +1,11 @@
 <script setup lang="ts">
 import { onRpcConnected, rpc } from '@vue/devtools-core'
 import { computed, provide, ref } from 'vue'
-import { createCustomInspectorStateContext } from '~/composables/custom-inspector-state'
 import { registerVirtualRouter, VirtualRoute } from '~/composables/virtual-router'
 import About from './components/About.vue'
 import Settings from './components/Settings.vue'
 import Store from './components/store/Index.vue'
 import Timeline from './components/timeline/Index.vue'
-import { PiniaPluginDescriptorId, PiniaPluginInspectorId } from './constants'
 
 const pluginSettings = ref(null)
 provide('pluginSettings', pluginSettings)
@@ -45,10 +43,9 @@ const { VirtualRouterView, restoreRouter } = registerVirtualRouter(routes, {
   defaultRoutePath: '/store',
 })
 
-const inspectorState = createCustomInspectorStateContext()
-
 onRpcConnected(() => {
-  rpc.value.getPluginSettings(PiniaPluginDescriptorId).then((settings) => {
+  const pluginDescriptorId = 'dev.esm.pinia'
+  rpc.value.getPluginSettings(pluginDescriptorId).then((settings) => {
     if (settings.options) {
       // @ts-expect-error skip type check
       pluginSettings.value = settings
@@ -57,14 +54,6 @@ onRpcConnected(() => {
       pluginSettings.value = null
     }
   })
-  rpc.value.getInspectorInfo(PiniaPluginInspectorId).then((payload) => {
-    if (!payload)
-      return
-    inspectorState.value = {
-      stateFilterPlaceholder: payload.stateFilterPlaceholder,
-      treeFilterPlaceholder: payload.treeFilterPlaceholder,
-    }
-  })
 })
 </script>
 

packages/applet/src/utils/search.ts

@@ -1,4 +1,4 @@
-import { CustomInspectorState, INFINITY, isPlainObject, NAN, NEGATIVE_INFINITY, UNDEFINED } from '@vue/devtools-kit'
+import { INFINITY, isPlainObject, NAN, NEGATIVE_INFINITY, UNDEFINED } from '@vue/devtools-kit'
 
 /**
  * Searches a key or value in the object, with a maximum deepness
@@ -132,26 +132,3 @@ function internalSearchArray(array, searchTerm, seen, depth) {
   }
   return match
 }
-
-export function filterInspectorState<T extends CustomInspectorState>(params: {
-  state: Record<string, T[]>
-  filterKey?: string | null | undefined
-  // Each group is a flatten object
-  processGroup?: (item: T[]) => T[]
-}) {
-  const { state, filterKey, processGroup } = params
-  if (!filterKey || !filterKey.trim().length)
-    return state
-  const result = {}
-  for (const groupKey in state) {
-    const group = state[groupKey]
-    const groupFields = group.filter(el => searchDeepInObject({
-      // @ts-expect-error typing weak
-      [el.key]: el.value,
-    }, filterKey))
-    if (groupFields.length) {
-      result[groupKey] = processGroup ? processGroup(groupFields) : groupFields
-    }
-  }
-  return result
-}

packages/devtools-kit/src/ctx/hook.ts

@@ -248,7 +248,7 @@ export function createDevToolsCtxHooks() {
     const _payload = {
       app: plugin.descriptor.app,
       inspectorId,
-      filter: inspector?.treeFilterPlaceholder || '',
+      filter: inspector?.treeFilter || '',
       rootNodes: [],
     }
 

packages/devtools-kit/src/ctx/inspector.ts

@@ -11,8 +11,7 @@ import { devtoolsTimelineLayers } from './timeline'
 interface DevToolsKitInspector {
   options: CustomInspectorOptions
   descriptor: PluginDescriptor
-  treeFilterPlaceholder: string
-  stateFilterPlaceholder: string
+  treeFilter: string
   selectedNodeId: string
   appRecord: unknown
 }
@@ -32,8 +31,7 @@ export function addInspector(inspector: CustomInspectorOptions, descriptor: Plug
   devtoolsInspector.push({
     options: inspector,
     descriptor,
-    treeFilterPlaceholder: inspector.treeFilterPlaceholder ?? 'Search tree...',
-    stateFilterPlaceholder: inspector.stateFilterPlaceholder ?? 'Search state...',
+    treeFilter: '',
     selectedNodeId: '',
     appRecord: getAppRecord(descriptor.app),
   })
@@ -78,8 +76,6 @@ export function getInspectorInfo(id: string) {
     packageName: descriptor.packageName,
     homepage: descriptor.homepage,
     timelineLayers,
-    treeFilterPlaceholder: inspector.treeFilterPlaceholder,
-    stateFilterPlaceholder: inspector.stateFilterPlaceholder,
   }
 }