refactor: bridge messaging (#268)

Author: webfansplz

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() {