fix: redundant re-render and loss of collapsed state for inspector tree/state component (#124)

Author: Azurewarth0920

packages/client/src/components/inspector/InspectorStateField.vue

@@ -16,10 +16,10 @@ const props = withDefaults(defineProps<{
 
 const state = useStateEditorContext()
 const bridgeRpc = useDevToolsBridgeRpc()
-const value = formatInspectorStateValue(props.data.value)
-const type = getInspectorStateValueType(props.data.value)
+const value = computed(() => formatInspectorStateValue(props.data.value))
+const type = computed(() => getInspectorStateValueType(props.data.value))
 const stateFormatClass = computed(() => {
-  if (type === 'custom')
+  if (type.value === 'custom')
     return `state-format-${(props.data.value as InspectorCustomState)._custom?.type}`
 
   else
@@ -38,7 +38,7 @@ const normalizedValue = computed(() => {
     return ''
   }
   else {
-    const result = `<span class="state-value-${type}">${value}</span>`
+    const result = `<span class="state-value-${type.value}">${value.value}</span>`
     if (stateTypeName)
       return `${result} <span class="text-gray-500">(${stateTypeName})</span>`
 
@@ -48,7 +48,7 @@ const normalizedValue = computed(() => {
 
 const rawValue = computed(() => {
   let value = props.data.value
-  const isCustom = type === 'custom'
+  const isCustom = type.value === 'custom'
   let inherit = {}
   if (isCustom) {
     const data = props.data.value as InspectorCustomState
@@ -84,7 +84,7 @@ const normalizedChildField = computed(() => {
       editable: props.data.editable,
       creating: false,
     }))
-    if (type !== 'custom')
+    if (type.value !== 'custom')
       value = sortByKey(value)
   }
   else {

packages/client/src/pages/components.vue

@@ -138,6 +138,7 @@ function inspectComponentInspector() {
 // #endregion
 
 function selectComponentTree(id: string) {
+  clearComponentState()
   getComponentState(id)
   activeComponentId.value = id
 }
@@ -170,6 +171,10 @@ function getComponentState(id: string) {
   })
 }
 
+function clearComponentState() {
+  activeComponentState.value = {}
+}
+
 // #endregion
 
 onDevToolsClientConnected(() => {
@@ -182,7 +187,10 @@ onDevToolsClientConnected(() => {
       return
 
     treeNode.value = data.data
-    componentTreeCollapseMap.value = normalizeComponentTreeCollapsed(data.data)
+    componentTreeCollapseMap.value = {
+      ...normalizeComponentTreeCollapsed(data.data),
+      ...componentTreeCollapseMap.value,
+    }
     initSelectedComponent(data.data)
   }, {
     inspectorId: 'components',
@@ -257,9 +265,9 @@ const devtoolsState = useDevToolsState()
           </div>
         </div>
         <p class="x-divider" />
-        <div h-0 grow overflow-auto p-2 class="no-scrollbar">
+        <div :key="selectedComponentTree" h-0 grow overflow-auto p-2 class="no-scrollbar">
           <InspectorState
-            v-for="(state, key) in activeComponentState" :id="key" :key="key + Date.now()"
+            v-for="(state, key) in activeComponentState" :id="key" :key="key"
             :node-id="activeComponentId" :data="state" :name="`${key}`" inspector-id="components"
           />
         </div>

packages/client/src/pages/pinia.vue

@@ -12,6 +12,7 @@ const tree = ref<{ id: string, label: string, tags: InspectorNodeTag[] }[]>([])
 const state = ref<{
   inspectorId?: string
   state?: InspectorState[]
+  getters?: InspectorState[]
 }>({})
 
 function getPiniaState(nodeId: string) {
@@ -20,7 +21,12 @@ function getPiniaState(nodeId: string) {
   })
 }
 
+function clearPiniaState() {
+  state.value = {}
+}
+
 watch(selected, () => {
+  clearPiniaState()
   getPiniaState(selected.value)
 })
 
@@ -67,10 +73,10 @@ onDevToolsClientConnected(() => {
         </div>
       </Pane>
       <Pane flex flex-col>
-        <div h-0 grow overflow-auto p-2 class="no-scrollbar">
+        <div :key="selected" h-0 grow overflow-auto p-2 class="no-scrollbar">
           <InspectorState
             v-for="(item, key) in state" :id="key"
-            :key="key + Date.now()"
+            :key="key"
             inspector-id="pinia"
             :node-id="selected" :data="item" :name="`${key}`"
           />

packages/client/src/pages/router.vue

@@ -25,7 +25,12 @@ function getRouterState(nodeId: string) {
   })
 }
 
+function clearRouterState() {
+  state.value = {}
+}
+
 watch(selected, () => {
+  clearRouterState()
   getRouterState(selected.value)
 })
 
@@ -70,10 +75,10 @@ onDevToolsClientConnected(() => {
         </div>
       </Pane>
       <Pane flex flex-col>
-        <div h-0 grow overflow-auto p-2 class="no-scrollbar">
+        <div :key="selected" h-0 grow overflow-auto p-2 class="no-scrollbar">
           <InspectorState
             v-for="(item, key) in state" :id="key"
-            :key="key + Date.now()" :data="item" :name="`${key}`"
+            :key="key" :data="item" :name="`${key}`"
             inspector-id="router"
           />
         </div>