fix(client,kit): message passing parse error (#277)

Author: webfansplz

packages/client/src/pages/components.vue

@@ -211,7 +211,7 @@ function normalizeComponentState(data: { state?: InspectorState[] }) {
 
 function getComponentState(id: string) {
   getInspectorState({ inspectorId: 'components', nodeId: id }).then((data) => {
-    activeComponentState.value = normalizeComponentState(parse(data))
+    activeComponentState.value = normalizeComponentState(parse(data!))
   })
 }
 
@@ -226,8 +226,7 @@ onDevToolsClientConnected(() => {
   getComponentTree().then(() => {
     loaded.value = true
   })
-  onInspectorTreeUpdated((_data) => {
-    const data = parse(_data)
+  onInspectorTreeUpdated((data) => {
     if (!data?.data.length || data.inspectorId !== inspectorId)
       return
 
@@ -240,8 +239,7 @@ onDevToolsClientConnected(() => {
   })
 
   // state
-  onInspectorStateUpdated((_data) => {
-    const data = parse(_data)
+  onInspectorStateUpdated((data) => {
     if (data.inspectorId !== inspectorId)
       return
 

packages/client/src/pages/i18n.vue

@@ -49,22 +49,18 @@ onDevToolsClientConnected(() => {
     }
   })
 
-  onInspectorTreeUpdated((_data) => {
-    const data = parse(_data)
-
+  onInspectorTreeUpdated((data) => {
     if (!data?.data.length)
       return
-    tree.value = data.data
+    tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
     if (!selected.value && data.data.length) {
       selected.value = data.data[0].id
       getI18nState(data.data[0].id)
     }
   })
 
-  onInspectorStateUpdated((_data) => {
-    const data = parse(_data)
-
-    if (!data || !data.state.length || data.inspectorId !== INSPECTOR_ID)
+  onInspectorStateUpdated((data) => {
+    if (!data || !data?.state?.length || data.inspectorId !== INSPECTOR_ID)
       return
 
     state.value = {

packages/client/src/pages/overview.vue

@@ -36,8 +36,7 @@ onDevToolsClientConnected(() => {
     const data = parse(_data!)
     componentCount.value = normalizeComponentCount(data)
   })
-  onInspectorTreeUpdated((_data) => {
-    const data = parse(_data)
+  onInspectorTreeUpdated((data) => {
     if (!data?.data?.length || data.inspectorId !== 'components')
       return
     componentCount.value = normalizeComponentCount(data.data)

packages/client/src/pages/pinia.vue

@@ -42,25 +42,23 @@ onDevToolsClientConnected(() => {
     }
   })
 
-  onInspectorTreeUpdated((_data) => {
-    const data = parse(_data)
+  onInspectorTreeUpdated((data) => {
     if (!data?.data.length || data.inspectorId !== inspectorId)
       return
-    tree.value = data.data
+    tree.value = data.data as unknown as { id: string, label: string, tags: InspectorNodeTag[] }[]
     if (!selected.value && data.data.length) {
       selected.value = data.data[0].id
       getPiniaState(data.data[0].id)
     }
   })
 
-  onInspectorStateUpdated((_data) => {
-    const data = parse(_data)
+  onInspectorStateUpdated((data) => {
     if (!data || !data?.state?.length || data.inspectorId !== inspectorId)
       return
 
     state.value = {
       state: data.state,
-      getters: data.getters,
+      getters: data.getters!,
     }
   })
 })

packages/client/src/pages/router.vue

@@ -43,21 +43,17 @@ onDevToolsClientConnected(() => {
     }
   })
 
-  onInspectorTreeUpdated((_data) => {
-    const data = parse(_data)
-
-    if (!data?.data?.length || data.inspectorId !== inspectorId)
+  onInspectorTreeUpdated((data) => {
+    if (!data?.data?.length || data.inspectorId !== inspectorId.value)
       return
-    tree.value = data.data
+    tree.value = data.data as unknown as { id: string, label: string }[]
     if (!selected.value && data.data.length) {
       selected.value = data.data[0].id
       getRouterState(data.data[0].id)
     }
   })
 
-  onInspectorStateUpdated((_data) => {
-    const data = parse(_data)
-
+  onInspectorStateUpdated((data) => {
     if (!data || !data.state || data.inspectorId !== inspectorId.value)
       return
 

packages/core/src/bridge-events/devtools-actions.ts

@@ -1,4 +1,5 @@
 import type { InspectorStateEditorPayload } from '@vue/devtools-kit'
+import { stringify } from '@vue/devtools-kit'
 import { defineDevToolsAction } from '../bridge'
 
 export const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
@@ -23,8 +24,9 @@ export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (dev
   devtools.api.openInEditor({ file })
 })
 
-export const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
+export const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', async (devtools, payload) => {
+  const res = await devtools.api.getInspectorTree(payload)
+  return stringify(res) as string
 })
 
 export const getComponentBoundingRect = defineDevToolsAction('devtools:get-component-bounding-rect', (devtools, payload) => {
@@ -43,8 +45,9 @@ export const scrollToComponent = defineDevToolsAction('devtools:scroll-to-compon
   return devtools.api.scrollToComponent(payload)
 })
 
-export const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
+export const getInspectorState = defineDevToolsAction('devtools:inspector-state', async (devtools, payload) => {
+  const res = await devtools.api.getInspectorState(payload)
+  return stringify(res) as string
 })
 
 export const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspector-tree-id', (devtools, payload) => {

packages/core/src/bridge-events/devtools-listeners.ts

@@ -1,4 +1,4 @@
-import type { CustomCommand, CustomTab, DevToolsState, RouterInfo, TimelineEvent } from '@vue/devtools-kit'
+import type { ComponentTreeNode, CustomCommand, CustomTab, DevToolsState, InspectorState, RouterInfo, TimelineEvent } from '@vue/devtools-kit'
 import { defineDevToolsListener } from '../bridge'
 
 export const onDevToolsStateUpdated = defineDevToolsListener<DevToolsState & { vueVersion: string }>('devtools:on-state-updated', (devtools, callback) => {
@@ -52,13 +52,13 @@ export const onCustomCommandsUpdated = defineDevToolsListener<CustomCommand[]>('
   })
 })
 
-export const onInspectorTreeUpdated = defineDevToolsListener<string>('devtools:on-inspector-tree-updated', (devtools, callback) => {
+export const onInspectorTreeUpdated = defineDevToolsListener<{ inspectorId: string, data: ComponentTreeNode[] }>('devtools:on-inspector-tree-updated', (devtools, callback) => {
   devtools.api.on.sendInspectorTree((payload) => {
     callback(payload)
   })
 })
 
-export const onInspectorStateUpdated = defineDevToolsListener<string>('devtools:on-inspector-state-updated', (devtools, callback) => {
+export const onInspectorStateUpdated = defineDevToolsListener<{ inspectorId: string, state?: InspectorState[], getters?: InspectorState[] }>('devtools:on-inspector-state-updated', (devtools, callback) => {
   devtools.api.on.sendInspectorState((payload) => {
     callback(payload)
   })

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

@@ -4,9 +4,9 @@ import { toggleActiveAppRecord } from '../core/app-record'
 import type { VueAppInstance } from '../types'
 import { highlight as highlightElement, inspectComponentHighLighter, scrollToComponent, toggleComponentHighLighter, unhighlight as unhighlightElement } from '../core/component-highlighter'
 import { devtoolsContext } from '../state'
-import { now as nowFn, parse, stringify } from '../shared'
+import { now as nowFn, stringify } from '../shared'
 import { StateEditor } from '../core/component/state/editor'
-import type { InspectorStateEditorPayload } from '../core/component/types'
+import type { ComponentTreeNode, InspectorStateEditorPayload } from '../core/component/types'
 import { addCustomTab } from '../core/custom-tab'
 import type { CustomTab } from '../core/custom-tab/types'
 import { addCustomCommand, removeCustomCommand } from '../core/custom-command'
@@ -82,7 +82,7 @@ export class DevToolsPluginApi {
       }, DevToolsEvents.GET_INSPECTOR_TREE)
     })
 
-    return stringify(_payload.rootNodes) as string
+    return _payload.rootNodes as ComponentTreeNode[]
   }
 
   getInspectorState(payload: { inspectorId?: string, nodeId?: string } = {}) {
@@ -105,7 +105,7 @@ export class DevToolsPluginApi {
     const state = _payload.state
 
     delete state.instance
-    return stringify(state) as string
+    return state
   }
 
   async editInspectorState(payload: InspectorStateEditorPayload) {
@@ -125,10 +125,11 @@ export class DevToolsPluginApi {
       const res = await this.getInspectorTree({
         inspectorId,
       })
-      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_TREE, stringify({
+
+      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_TREE, {
         inspectorId,
-        data: parse(res),
-      }) as string)
+        data: res,
+      })
     }
   }
 
@@ -139,7 +140,7 @@ export class DevToolsPluginApi {
         inspectorId,
         nodeId: inspector.nodeId,
       })
-      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_STATE, stringify({ ...parse(res), inspectorId }) as string)
+      apiHooks.callHook(DevToolsEvents.SEND_INSPECTOR_STATE, { ...res, inspectorId })
     }
   }
 

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

@@ -47,7 +47,7 @@ export interface DevToolsEvent {
     instanceData: InspectorStateApiPayload['state']
   }) => void
   [DevToolsEvents.GET_INSPECTOR_TREE]: (payload: InspectorTreeApiPayload) => void
-  [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: string) => void
+  [DevToolsEvents.SEND_INSPECTOR_TREE]: (payload: { inspectorId: string, data: InspectorTreeApiPayload['rootNodes'] }) => void
   [DevToolsEvents.GET_INSPECTOR_STATE]: (payload: InspectorStateApiPayload) => void
   [DevToolsEvents.EDIT_INSPECTOR_STATE]: (payload: InspectorStateEditorPayload) => void
   [DevToolsEvents.SEND_INSPECTOR_STATE]: (payload: string) => void