vite-plugin-vue-devtools 0.4.12 → 0.5.0

package/src/node/views/Main.vue

@@ -4,7 +4,8 @@ import { computed, ref } from 'vue'
 // @ts-expect-error virtual module
 import vueDevToolsOptions from 'virtual:vue-devtools-options'
 import Frame from './FrameBox.vue'
-import { useIframe, useInspector, usePanelVisible, usePiPMode, usePosition } from './composables'
+import ComponentInspector from './ComponentInspector.vue'
+import { useHighlightComponent, useIframe, useInspector, usePanelVisible, usePiPMode, usePosition } from './composables'
 import { checkIsSafari, useColorScheme, usePreferredColorScheme, warn } from './utils'
 
 const props = defineProps({
@@ -88,6 +89,7 @@ const { iframe, getIframe } = useIframe(clientUrl, async () => {
 
 // Picture-in-Picture mode
 const { popup } = usePiPMode(getIframe, hook)
+const { overlayVisible, name: componentName, bounds, highlight, unHighlight } = useHighlightComponent()
 
 async function setupClient(iframe: HTMLIFrameElement) {
   const injection: any = iframe?.contentWindow?.__VUE_DEVTOOLS_VIEW__
@@ -109,14 +111,15 @@ async function setupClient(iframe: HTMLIFrameElement) {
           panelState.value.viewMode = 'xs'
       },
       toggle: togglePanelVisible,
-      togglePosition(position) {
-        if (position === 'popup')
-          popup()
-      },
+      popup,
     },
     openInEditor: openInEditor.value ?? (() => {
       warn('Unable to load inspector, open-in-editor is not available.')
     }),
+    componentInspector: {
+      highlight,
+      unHighlight,
+    },
   })
 }
 
@@ -279,6 +282,8 @@ collectHookBuffer()
       :view-mode="panelState.viewMode"
     />
   </div>
+  <!-- component inspector -->
+  <ComponentInspector v-if="overlayVisible" :bounds="bounds" :name="componentName" />
 </template>
 
 <style scoped>

package/src/node/views/composables.ts

@@ -15,6 +15,13 @@ interface DevToolsFrameState {
   closeOnOutsideClick: boolean
 }
 
+interface ComponentInspectorBounds {
+  width: number
+  height: number
+  top: number
+  left: number
+}
+
 // ---- state ----
 export const PANEL_PADDING = 10
 export const PANEL_MIN = 20
@@ -435,3 +442,36 @@ export function usePosition(panelEl: Ref<HTMLElement | undefined>) {
     iframeStyle,
   }
 }
+
+// ---- useHighlightComponent ----
+
+export function useHighlightComponent() {
+  const name = ref('')
+  const overlayVisible = ref(false)
+  const initialBounds = {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0,
+  }
+  const bounds = ref<ComponentInspectorBounds>(initialBounds)
+
+  function highlight(_name: string, _bounds: ComponentInspectorBounds) {
+    name.value = _name
+    bounds.value = _bounds
+    overlayVisible.value = true
+  }
+
+  function unHighlight() {
+    bounds.value = initialBounds
+    overlayVisible.value = false
+  }
+
+  return {
+    name,
+    overlayVisible,
+    bounds,
+    highlight,
+    unHighlight,
+  }
+}