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

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