fix(client, bridge): update pinia status when module loaded (#244)

Author: Azurewarth0920

packages/client/src/pages/pinia.vue

@@ -5,6 +5,7 @@ import { useDevToolsBridgeRpc } from '@vue/devtools-core'
 import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
 import { Pane, Splitpanes } from 'splitpanes'
 
+const inspectorId = 'pinia'
 const bridgeRpc = useDevToolsBridgeRpc()
 
 const selected = ref('')
@@ -16,7 +17,7 @@ const state = ref<{
 }>({})
 
 function getPiniaState(nodeId: string) {
-  bridgeRpc.getInspectorState({ inspectorId: 'pinia', nodeId }).then(({ data }) => {
+  bridgeRpc.getInspectorState({ inspectorId, nodeId }).then(({ data }) => {
     state.value = data
   })
 }
@@ -33,12 +34,22 @@ watch(selected, () => {
 createCollapseContext('inspector-state')
 
 onDevToolsClientConnected(() => {
-  bridgeRpc.getInspectorTree({ inspectorId: 'pinia', filter: '' }).then(({ data }) => {
-    tree.value = data
-    if (!selected.value && data.length) {
-      selected.value = data[0].id
+  const getPiniaInspectorTree = () => {
+    bridgeRpc.getInspectorTree({ inspectorId, filter: '' }).then(({ data }) => {
+      tree.value = data
+      if (!selected.value && data.length)
+        selected.value = data[0].id
       getPiniaState(data[0].id)
-    }
+    })
+  }
+  getPiniaInspectorTree()
+
+  bridgeRpc.on.componentUpdated((id) => {
+    if (id !== inspectorId)
+      return
+    getPiniaInspectorTree()
+  }, {
+    inspectorId,
   })
 
   bridgeRpc.on.inspectorTreeUpdated((data) => {
@@ -50,7 +61,7 @@ onDevToolsClientConnected(() => {
       getPiniaState(data.data[0].id)
     }
   }, {
-    inspectorId: 'pinia',
+    inspectorId,
   })
 
   bridgeRpc.on.inspectorStateUpdated((data) => {
@@ -59,7 +70,7 @@ onDevToolsClientConnected(() => {
 
     state.value = data
   }, {
-    inspectorId: 'pinia',
+    inspectorId,
   })
 })
 </script>
@@ -77,7 +88,7 @@ onDevToolsClientConnected(() => {
           <InspectorState
             v-for="(item, key) in state" :id="key"
             :key="key"
-            inspector-id="pinia"
+            :inspector-id="inspectorId"
             :node-id="selected" :data="item" :name="`${key}`"
           />
         </div>

packages/core/src/bridge/devtools.ts

@@ -100,6 +100,11 @@ export class BridgeRpc {
         } as T)
       })
     },
+    componentUpdated(cb: (id?: string) => void, options: { inspectorId: string }) {
+      devtoolsBridge.value.on(BridgeEvents.COMPONENT_UPDATED, () => {
+        cb(options?.inspectorId)
+      })
+    },
     devtoolsStateUpdated(cb) {
       devtoolsBridge.value.on(BridgeEvents.DEVTOOLS_STATE_UPDATED, (payload) => {
         cb(parse(payload))

packages/core/src/bridge/types.ts

@@ -16,6 +16,8 @@ export enum BridgeEvents {
   SEND_INSPECTOR_TREE = 'inspector-tree:send',
   // inspector state
   SEND_INSPECTOR_STATE = 'inspector-state:send',
+  // component updated
+  COMPONENT_UPDATED = 'component:updated',
 
   // edit related things (components/pinia/route, etc...) they are all fired the same event
   // so that we can decouple the specific logic to the `devtools-kit` package.

packages/core/src/bridge/user-app.ts

@@ -175,6 +175,11 @@ export function registerBridgeRpc(bridge: BridgeInstanceType) {
       bridge.emit(BridgeEvents.SEND_INSPECTOR_TREE, payload)
     })
 
+    // component updated
+    devtools.api.on.componentUpdated(() => {
+      bridge.emit(BridgeEvents.COMPONENT_UPDATED)
+    })
+
     // inspector state updated
     devtools.api.on.sendInspectorState((payload) => {
       bridge.emit(BridgeEvents.SEND_INSPECTOR_STATE, payload)

packages/devtools-kit/src/api/api.ts

@@ -156,7 +156,10 @@ export class DevToolsPluginApi {
     apiHooks.callHook(DevToolsEvents.VISIT_COMPONENT_TREE, ...params)
   }
 
-  notifyComponentUpdate() {}
+  notifyComponentUpdate() {
+    apiHooks.callHook(DevToolsEvents.COMPONENT_UPDATED)
+  }
+
   now() {
     return nowFn()
   }

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

@@ -13,6 +13,7 @@ export enum DevToolsEvents {
   DEVTOOLS_CONNECTED_UPDATED = 'devtools:connected-updated',
   ROUTER_INFO_UPDATED = 'router-info:updated',
   COMPONENT_STATE_INSPECT = 'component-state:inspect',
+  COMPONENT_UPDATED = 'component:updated',
   TOGGLE_COMPONENT_HIGHLIGHTER = 'component-highlighter:toggle',
   GET_COMPONENT_BOUNDING_RECT = 'component-bounding-rect:get',
   SCROLL_TO_COMPONENT = 'scroll-to-component',
@@ -60,6 +61,7 @@ export interface DevToolsEvent {
   [DevToolsEvents.CUSTOM_TABS_UPDATED]: (payload: CustomTab[]) => void
   // custom command
   [DevToolsEvents.CUSTOM_COMMANDS_UPDATED]: (payload: CustomCommand[]) => void
+  [DevToolsEvents.COMPONENT_UPDATED]: () => void
 }
 
 export type DevToolsEventParams<T extends keyof DevToolsEvent> = Parameters<DevToolsEvent[T]>

packages/devtools-kit/src/api/on.ts

@@ -28,6 +28,9 @@ export const on = {
     apiHooks.hook(DevToolsEvents.EDIT_INSPECTOR_STATE, fn)
   },
   editComponentState() {},
+  componentUpdated(fn: DevToolsEvent[DevToolsEvents.COMPONENT_UPDATED]) {
+    apiHooks.hook(DevToolsEvents.COMPONENT_UPDATED, fn)
+  },
   // #endregion compatible with old devtools
 
   // router