feat(client): add color picker and inspector commands (#162)

Author: webfansplz

packages/client/src/App.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import { useDevToolsBridge, useDevToolsState } from '@vue/devtools-core'
+import { useDevToolsBridge, useDevToolsBridgeRpc, useDevToolsState } from '@vue/devtools-core'
 import { isInChromePanel } from '@vue/devtools-shared'
 import { Pane, Splitpanes } from 'splitpanes'
 
@@ -11,6 +11,7 @@ useColorMode()
 const router = useRouter()
 const route = useRoute()
 const { connected, clientConnected } = useDevToolsState()
+const bridgeRpc = useDevToolsBridgeRpc()
 const clientState = devtoolsClientState
 
 const viewMode = inject<Ref<'overlay' | 'panel'>>('viewMode', ref('overlay'))
@@ -66,6 +67,40 @@ watchEffect(() => {
   activeAppRecords.value = devtoolsState.appRecords.value
   activeAppRecordId.value = devtoolsState.activeAppRecordId.value
 })
+
+// register commands
+const { copy } = useCopy()
+const eyeDropper = useEyeDropper({})
+
+bridgeRpc?.isVueInspectorDetected?.()?.then(({ data }) => {
+  if (data) {
+    registerCommands(() =>
+      [{
+        id: 'action:vue-inspector',
+        title: 'Inspector',
+        icon: 'i-carbon-select-window',
+        action: async () => {
+          bridge.value.emit('toggle-panel', false)
+          await bridgeRpc.enableVueInspector()
+        },
+      }],
+    )
+  }
+})
+registerCommands(() => [
+  ...(eyeDropper.isSupported.value
+    ? [{
+        id: 'action:eye-dropper',
+        title: 'Color Picker',
+        icon: 'i-carbon-eyedropper',
+        action: async () => {
+          const { sRGBHex } = await eyeDropper.open() || {}
+          if (sRGBHex)
+            copy(sRGBHex)
+        },
+      }]
+    : []),
+])
 </script>
 
 <template>

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

@@ -12,6 +12,12 @@ export interface CommandItem {
   action: () => void | CommandItem[] | Promise<CommandItem[] | void>
 }
 
+function uniqueById(items: CommandItem[]): CommandItem[] {
+  const unique = new Map<number | string, CommandItem>()
+  items.forEach(item => unique.set(item.id, item))
+  return Array.from(unique.values())
+}
+
 const registeredCommands = reactive(new Map<string, MaybeRefOrGetter<CommandItem[]>>())
 
 // @unocss-include
@@ -68,13 +74,13 @@ export function useCommands() {
     }))
 
   return computed(() => {
-    return [
+    return uniqueById([
       ...fixedCommands,
       ...tabCommands.value,
       ...resolveCustomCommands(customCommands.value),
       ...Array.from(registeredCommands.values())
         .flatMap(i => toValue(i)),
-    ]
+    ])
   })
 }
 

packages/core/src/bridge/core.ts

@@ -83,6 +83,8 @@ export const bridgeRpcEvents = {
   editState: 'edit-inspector-state',
   openInEditor: 'open-in-editor',
   toggleApp: 'toggle-app',
+  isVueInspectorDetected: 'vue-inspector:detected',
+  enableVueInspector: 'vue-inspector:enable',
 } as const
 
 export type BridgeRpcEvents = typeof bridgeRpcEvents
@@ -112,6 +114,8 @@ export interface BridgeRpcEventPayload {
   [bridgeRpcEvents.editState]: InspectorStateEditorPayload
   [bridgeRpcEvents.openInEditor]: string
   [bridgeRpcEvents.toggleApp]: string
+  [bridgeRpcEvents.isVueInspectorDetected]: boolean
+  [bridgeRpcEvents.enableVueInspector]: null
 }
 
 export class BridgeRpcCore {
@@ -122,7 +126,7 @@ export class BridgeRpcCore {
 
   on<E extends BridgeRpcEventName>(
     eventName: E,
-    handler: (payload?: BridgeRpcEventPayload[E]) => Promise<string | void> | string,
+    handler: (payload?: BridgeRpcEventPayload[E]) => Promise<boolean | string | void> | string,
   ) {
     this.bridge.on(`${eventName}:req`, async (payload?: BridgeRpcEventPayload[E]) => {
       const res = await handler(payload)

packages/core/src/bridge/devtools.ts

@@ -139,6 +139,14 @@ export class BridgeRpc {
     return devtoolsBridge.rpc.emit<void>(bridgeRpcEvents.openInEditor, JSON.stringify(payload))
   }
 
+  static async isVueInspectorDetected() {
+    return devtoolsBridge.rpc.emit<{ data: boolean }>(bridgeRpcEvents.isVueInspectorDetected)
+  }
+
+  static async enableVueInspector() {
+    return devtoolsBridge.rpc.emit<void>(bridgeRpcEvents.enableVueInspector)
+  }
+
   static async toggleApp(id: string) {
     return devtoolsBridge.rpc.emit<void>(bridgeRpcEvents.toggleApp, id)
   }

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

@@ -89,6 +89,18 @@ export function registerBridgeRpc(bridge: BridgeInstanceType) {
     return devtools.api.openInEditor(JSON.parse(payload!))
   })
 
+  // get vue inspector
+  bridgeRpcCore.on(bridgeRpcEvents.isVueInspectorDetected, async () => {
+    return !!await devtools.api.getVueInspector()
+  })
+
+  // enable vue inspector
+  bridgeRpcCore.on(bridgeRpcEvents.enableVueInspector, async () => {
+    const inspector = await devtools.api.getVueInspector()
+    if (inspector)
+      await inspector.enable()
+  })
+
   // route matched
   bridgeRpcCore.on(bridgeRpcEvents.routeMatched, (payload) => {
     const c = console.warn