refactor: bridge messaging (#268)

packages/client/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { defineDevToolsAction, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
+import { checkVueInspectorDetected, enableVueInspector, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
 import { isInChromePanel } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
 
@@ -70,16 +70,6 @@ watchEffect(() => {
 const { copy } = useCopy()
 const eyeDropper = useEyeDropper({})
 
-const checkVueInspectorDetected = defineDevToolsAction<boolean>('devtools:check-vue-inspector-detected', async (devtools) => {
-  return !!await devtools?.api?.getVueInspector?.()
-})
-
-const enableVueInspector = defineDevToolsAction('devtools:enable-vue-inspector', async (devtools) => {
-  const inspector = await devtools?.api?.getVueInspector?.()
-  if (inspector)
-    await inspector.enable()
-})
-
 checkVueInspectorDetected().then((detected) => {
   if (detected) {
     vueInspectorDetected.value = true

packages/client/src/components/assets/AssetDetails.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
 import type { AssetInfo, CodeSnippet, ImageMeta } from '@vue/devtools-core'
-import { callViteServerAction, useDevToolsState } from '@vue/devtools-core'
+import { callViteServerAction, openInEditor, useDevToolsState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 
 const props = defineProps<{
@@ -15,7 +15,6 @@ const getImageMeta = callViteServerAction<ImageMeta>('assets:get-image-meta')
 const getTextAssetContent = callViteServerAction<string>('assets:get-text-asset-content')
 const asset = useVModel(props, 'modelValue', emit, { passive: true })
 
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const imageMeta = computedAsync(() => {
   if (asset.value.type !== 'image')
@@ -139,7 +138,7 @@ const supportsPreview = computed(() => {
                 icon="i-carbon-launch"
                 action flex-none
                 :border="false"
-                @click="_openInEditor(asset.filePath)"
+                @click="openInEditor(asset.filePath)"
               />
             </div>
           </td>

packages/client/src/components/common/DockingPanel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueButton, VueDarkToggle, VueIcon, VueSelect } from '@vue/devtools-ui'
 import { isInChromePanel } from '@vue/devtools-shared'
-import { defineDevToolsAction, useDevToolsState } from '@vue/devtools-core'
+import { toggleApp, useDevToolsState } from '@vue/devtools-core'
 
 // #region view mode
 const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
@@ -35,10 +35,6 @@ const appRecords = computed(() => devtoolsState.appRecords.value.map(app => ({
 const activeAppRecordId = ref(devtoolsState.activeAppRecordId.value)
 const activeAppRecordName = computed(() => appRecords.value.find(app => app.value === activeAppRecordId.value)?.label ?? '')
 
-const toggleApp = defineDevToolsAction('devtools:toggle-app', async (devtools, id: string) => {
-  await devtools.api.toggleApp(id)
-})
-
 watch(activeAppRecordId, (id) => {
   toggleApp(`${id}`).then(() => {
     router.push('/overview').then(() => {

packages/client/src/components/graph/GraphDrawer.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { VueButton, VueDrawer, showVueNotification } from '@vue/devtools-ui'
-import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor, useDevToolsState } from '@vue/devtools-core'
 
 defineProps<{
   top?: HTMLElement

packages/client/src/components/inspector/InspectorDataField/Actions.vue

@@ -4,7 +4,7 @@ import { VueButton, VueDropdown, VueDropdownButton, VueIcon, VTooltip as vToolti
 import { getRaw } from '@vue/devtools-kit'
 import type { InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import type { ButtonProps } from '@vue/devtools-ui/dist/types/src/components/Button'
-import { defineDevToolsAction } from '@vue/devtools-core'
+import { editInspectorState } from '@vue/devtools-core'
 import type { EditorAddNewPropType, EditorInputValidType } from '../../../composables/inspector'
 
 const props = withDefaults(defineProps<{
@@ -22,10 +22,6 @@ defineEmits<{
   addNewProp: [type: EditorAddNewPropType]
 }>()
 
-const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
-  devtools.api.editInspectorState(payload)
-})
-
 const state = useStateEditorContext()
 
 const { copy, isSupported } = useClipboard()

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

@@ -2,7 +2,7 @@
 import type { InspectorCustomState, InspectorState, InspectorStateEditorPayload } from '@vue/devtools-kit'
 import { isArray, isObject, sortByKey } from '@vue/devtools-shared'
 import { formatInspectorStateValue, getInspectorStateValueType, getRaw, toEdit, toSubmit } from '@vue/devtools-kit'
-import { defineDevToolsAction } from '@vue/devtools-core'
+import { editInspectorState } from '@vue/devtools-core'
 import { VueButton, VueIcon, VTooltip as vTooltip } from '@vue/devtools-ui'
 import Actions from './InspectorDataField/Actions.vue'
 import type { EditorAddNewPropType } from '~/composables/inspector'
@@ -115,10 +115,6 @@ watch(() => editing.value, (v) => {
   }
 })
 
-const editInspectorState = defineDevToolsAction('devtools:edit-inspector-state', (devtools, payload: InspectorStateEditorPayload) => {
-  devtools.api.editInspectorState(payload)
-})
-
 function submit() {
   const data = props.data
   editInspectorState({

packages/client/src/components/pages/RoutesTable.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { VueBadge } from '@vue/devtools-ui'
 import type { RouteRecordNormalized } from 'vue-router'
-import { useDevToolsState } from '@vue/devtools-core'
+import { openInEditor, useDevToolsState } from '@vue/devtools-core'
 
 const props = defineProps<{
   pages: RouteRecordNormalized[]
@@ -17,7 +17,6 @@ const sorted = computed(() => {
   return [...props.pages].sort((a, b) => a.path.localeCompare(b.path))
 })
 
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 const state = useDevToolsState()
 </script>
@@ -67,7 +66,7 @@ const state = useDevToolsState()
                   v-if="(item.file || item.meta?.file) && state.vitePluginDetected.value && _vueInspectorDetected"
                   text-sm op40 hover="op100 text-primary-400"
                   title="Open in editor"
-                  @click="_openInEditor((item.file || item.meta?.file) as string)"
+                  @click="openInEditor((item.file || item.meta?.file) as string)"
                 >
                   <div i-carbon-script-reference />
                 </button>

packages/client/src/composables/open-in-editor.ts

@@ -1,6 +1 @@
-import { defineDevToolsAction } from '@vue/devtools-core'
-
 export const vueInspectorDetected = ref(false)
-export const openInEditor = defineDevToolsAction('devtools:open-in-editor', (devtools, file: string) => {
-  devtools.api.openInEditor({ file })
-})

packages/client/src/composables/state-commands.ts

@@ -1,7 +1,7 @@
 import { randomStr } from '@vue/devtools-shared'
 import { CustomCommand } from '@vue/devtools-kit'
 import { MaybeRefOrGetter } from 'vue'
-import { defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
+import { onCustomCommandsUpdated, useDevToolsState } from '@vue/devtools-core'
 
 export interface CommandItem {
   id: string
@@ -21,12 +21,6 @@ function uniqueById(items: CommandItem[]): CommandItem[] {
 const registeredCommands = reactive(new Map<string, MaybeRefOrGetter<CommandItem[]>>())
 let removeCommandsUpdatedListener: (() => void) | null = null
 
-const onCustomCommandsUpdated = defineDevToolsListener<CustomCommand[]>((devtools, callback) => {
-  devtools.api.on.customCommandsUpdated((payload) => {
-    callback(payload)
-  })
-})
-
 // @unocss-include
 export function useCommands() {
   const { enabledFlattenTabs } = useAllTabs()

packages/client/src/composables/state-tab.ts

@@ -1,4 +1,4 @@
-import { defineDevToolsListener, useDevToolsState } from '@vue/devtools-core'
+import { onCustomTabsUpdated, useDevToolsState } from '@vue/devtools-core'
 import type { MaybeRef } from 'vue'
 import type { CustomTab } from '@vue/devtools-kit'
 import { isInElectron } from '@vue/devtools-shared'
@@ -22,11 +22,6 @@ export interface CategorizedCategory {
 
 export type CategorizedTabs = [CategorizedCategory, CategorizedTab[]][]
 
-const onCustomTabsUpdated = defineDevToolsListener<CustomTab[]>((devtools, callback) => {
-  devtools.api.on.customTabsUpdated((payload) => {
-    callback(payload)
-  })
-})
 let removeTabsUpdatedListener: (() => void) | null = null
 
 export function useAllTabs() {

packages/client/src/pages/components.vue

@@ -1,5 +1,18 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener, useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
+import {
+  getComponentBoundingRect as getComponentBoundingRectAction,
+  getInspectorState,
+  getInspectorTree,
+  inspectComponentInspector as inspectComponentInspectorAction,
+  onInspectorStateUpdated,
+  onInspectorTreeUpdated,
+  openInEditor,
+  scrollToComponent as scrollToComponentAction,
+  toggleComponentInspector as toggleComponentInspectorAction,
+  updateInspectorTreeId,
+  useDevToolsBridge,
+  useDevToolsState,
+} from '@vue/devtools-core'
 
 import type { ComponentBoundingRect, ComponentTreeNode, InspectorState } from '@vue/devtools-kit'
 import { parse } from '@vue/devtools-kit'
@@ -12,47 +25,6 @@ const bridge = useDevToolsBridge()
 const treeNode = ref<ComponentTreeNode[]>([])
 const activeComponentId = ref('')
 
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getComponentBoundingRectAction = defineDevToolsAction('devtools:get-component-bounding-rect', (devtools, payload) => {
-  return devtools.api.getComponentBoundingRect(payload)
-})
-
-const inspectComponentInspectorAction = defineDevToolsAction('devtools:inspect-component-inspector', (devtools) => {
-  return devtools.api.inspectComponentInspector()
-})
-
-const toggleComponentInspectorAction = defineDevToolsAction('devtools:toggle-component-inspector', (devtools, payload) => {
-  return devtools.api.toggleComponentInspector(payload)
-})
-
-const scrollToComponentAction = defineDevToolsAction('devtools:scroll-to-component', (devtools, payload) => {
-  return devtools.api.scrollToComponent(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
-const updateInspectorTreeId = defineDevToolsAction('devtools:update-inspector-tree-id', (devtools, payload) => {
-  devtools.context.activeInspectorTreeId = payload
-})
-
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
-const _openInEditor = openInEditor
 const _vueInspectorDetected = computed(() => vueInspectorDetected.value)
 
 // UX related state
@@ -125,7 +97,7 @@ function initSelectedComponent(treeNode: ComponentTreeNode[]) {
 function getComponentBoundingRect(id: string) {
   return new Promise<ComponentBoundingRect>((resolve) => {
     getComponentBoundingRectAction({ inspectorId: 'components', instanceId: id }).then((data) => {
-      resolve(parse(data))
+      resolve(parse(data!))
     })
   })
 }
@@ -147,7 +119,7 @@ function getComponentTree(filterText?: string) {
   return new Promise<void>((resolve) => {
     getInspectorTree({ inspectorId: 'components', filter: filterText }).then((_data) => {
       const isNoComponentTreeCollapsed = !Object.keys(componentTreeCollapseMap.value).length
-      const data = parse(_data)
+      const data = parse(_data!)
       treeNode.value = data
       isNoComponentTreeCollapsed && (componentTreeCollapseMap.value = normalizeComponentTreeCollapsed(data))
       initSelectedComponent(data)
@@ -182,7 +154,7 @@ function scrollToComponent(id: string) {
 function inspectComponentInspector() {
   bridge.value.emit('toggle-panel', false)
   inspectComponentInspectorAction().then((_data) => {
-    const data = JSON.parse(_data)
+    const data = JSON.parse(_data!)
     selectedComponentTree.value = data.id
     selectComponentTree(data.id)
     const linkedList = componentTreeLinkedList.value[data.id]
@@ -333,7 +305,7 @@ const devtoolsState = useDevToolsState()
               icon="i-carbon-launch"
               action flex-none
               :border="false"
-              @click="_openInEditor(selectedComponentFilePath)"
+              @click="openInEditor(selectedComponentFilePath)"
             />
           </div>
         </div>

packages/client/src/pages/i18n.vue

@@ -1,5 +1,11 @@
 <script setup lang="ts">
-import { defineDevToolsAction, defineDevToolsListener } from '@vue/devtools-core'
+import {
+  getInspectorState,
+  getInspectorTree,
+  onInspectorStateUpdated,
+  onInspectorTreeUpdated,
+  unhighlightElement,
+} from '@vue/devtools-core'
 
 // eslint-disable-next-line ts/no-import-type-side-effects
 import { type InspectorNodeTag, type InspectorState } from '@vue/devtools-kit'
@@ -16,36 +22,12 @@ const state = ref<{
   getters?: InspectorState[]
 }>({})
 
-const unhighlightElement = defineDevToolsAction('devtools:unhighlight-element', (devtools, payload) => {
-  return devtools.api.unhighlightElement()
-})
-
-const getInspectorTree = defineDevToolsAction('devtools:inspector-tree', (devtools, payload) => {
-  return devtools.api.getInspectorTree(payload)
-})
-
-const getInspectorState = defineDevToolsAction('devtools:inspector-state', (devtools, payload) => {
-  return devtools.api.getInspectorState(payload)
-})
-
 function getI18nState(nodeId: string) {
   getInspectorState({ inspectorId: INSPECTOR_ID, nodeId }).then((data) => {
-    state.value = parse(data)
+    state.value = parse(data!)
   })
 }
 
-const onInspectorTreeUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorTree((payload) => {
-    callback(payload)
-  })
-})
-
-const onInspectorStateUpdated = defineDevToolsListener<string>((devtools, callback) => {
-  devtools.api.on.sendInspectorState((payload) => {
-    callback(payload)
-  })
-})
-
 function clearI18nState() {
   state.value = {}
 }
@@ -59,7 +41,7 @@ createCollapseContext('inspector-state')
 
 onDevToolsClientConnected(() => {
   getInspectorTree({ inspectorId: INSPECTOR_ID, filter: '' }).then((_data) => {
-    const data = parse(_data)
+    const data = parse(_data!)
     tree.value = data
     if (!selected.value && data.length) {
       selected.value = data[0].id