fix: inspector interaction

Author: antfu

packages/devtools/src/runtime/plugins/view/client.ts

@@ -13,7 +13,7 @@ import { setIframeServerContext } from '@vue/devtools-kit'
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
 import { events as inspectorEvents, hasData as inspectorHasData, state as inspectorState } from 'vite-plugin-vue-tracer/client/overlay'
-import { computed, markRaw, reactive, ref, shallowReactive, shallowRef, toRef, watch } from 'vue'
+import { computed, markRaw, nextTick, reactive, ref, shallowReactive, shallowRef, toRef, watch } from 'vue'
 
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 import { settings } from '../../settings'
@@ -191,6 +191,7 @@ export async function setupDevToolsClient({
 
     const props = reactive<NuxtDevToolsInspectorProps>({
       mouse: { x: 0, y: 0 },
+      hasParent: false,
       matched: undefined,
     })
 
@@ -203,33 +204,40 @@ export async function setupDevToolsClient({
     component.addEventListener('close', () => {
       props.matched = undefined
       inspectorState.isEnabled = false
+      inspectorState.isVisible = false
     })
     component.addEventListener('selectParent', () => {
       const parent = inspectorState.main?.getParent()
       if (parent) {
         inspectorState.main = parent
         props.matched = parent
+        nextTick(() => {
+          props.hasParent = !!inspectorState.main?.getParent()
+        })
       }
     })
     // eslint-disable-next-line ts/ban-ts-comment
     // @ts-ignore WebComponent types
-    component.addEventListener('openInEditor', (e) => {
+    component.addEventListener('openInEditor', async (e) => {
       const url = (e as any)?.detail?.[0]
       if (url)
-        client.hooks.callHook('host:inspector:click', url)
+        await client.hooks.callHook('host:inspector:click', url)
     })
 
     inspectorEvents.on('hover', () => {
       inspectorState.isFocused = false
+      props.hasParent = !!inspectorState.main?.getParent()
     })
     inspectorEvents.on('disabled', () => {
       inspectorState.isVisible = false
       client?.hooks.callHook('host:inspector:close')
     })
     inspectorEvents.on('enabled', () => {
       inspectorState.isVisible = true
+      inspectorState.isEnabled = true
     })
     inspectorEvents.on('click', async (info, e) => {
+      inspectorState.isEnabled = false
       inspectorState.isFocused = true
       inspectorState.isVisible = true
 
@@ -246,15 +254,18 @@ export async function setupDevToolsClient({
 
     return inspector = markRaw({
       isAvailable,
-      isEnabled: toRef(inspectorState, 'isEnabled'),
+      isEnabled: toRef(inspectorState, 'isVisible'),
       enable: () => {
+        inspectorState.isVisible = true
         inspectorState.isEnabled = true
       },
       disable: () => {
+        inspectorState.isVisible = false
         inspectorState.isEnabled = false
       },
       toggle: () => {
         inspectorState.isEnabled = !inspectorState.isEnabled
+        inspectorState.isVisible = inspectorState.isEnabled
       },
     })
   }

packages/devtools/src/webcomponents/.generated/css.ts

@@ -1,13 +1,14 @@
 import type { VueElementConstructor } from 'vue'
-import type { NuxtDevToolsInspectorProps } from './Props'
 import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './NuxtDevtoolsFrame.vue'
 
-export const NuxtDevtoolsFrame = defineCustomElement({
-  ...Component,
-  shadowRoot: true,
-  styles: [css],
-} as any) as VueElementConstructor<{ props: NuxtDevToolsInspectorProps }>
+export const NuxtDevtoolsFrame = defineCustomElement(
+  Component,
+  {
+    shadowRoot: true,
+    styles: [css],
+  },
+) as VueElementConstructor
 
 customElements.define('nuxt-devtools-frame', NuxtDevtoolsFrame)

packages/devtools/src/webcomponents/components/NuxtDevtoolsFrame.ts

@@ -4,10 +4,12 @@ import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './NuxtDevtoolsInspectPanel.vue'
 
-export const NuxtDevtoolsInspectPanel = defineCustomElement({
-  ...Component,
-  shadowRoot: true,
-  styles: [css],
-} as any) as VueElementConstructor<{ props: NuxtDevToolsInspectorProps }>
+export const NuxtDevtoolsInspectPanel = defineCustomElement(
+  Component,
+  {
+    shadowRoot: true,
+    styles: [css],
+  },
+) as VueElementConstructor<{ props: NuxtDevToolsInspectorProps }>
 
 customElements.define('nuxt-devtools-inspect-panel', NuxtDevtoolsInspectPanel)

packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.ts

@@ -93,7 +93,8 @@ async function openInEditor() {
     <div ref="draggingEl" class="flex items-center gap-2 p2">
       <button
         title="Go to parent"
-        class="flex items-center text-sm font-mono op50 hover:text-green6 hover:op100"
+        class="flex items-center text-sm font-mono op50 disabled:pointer-events-none hover:text-green6 hover:op100 disabled:op10!"
+        :disabled="!props.hasParent"
         @click="selectParent"
       >
         <div class="i-ph-arrow-bend-left-up-duotone text-lg" />

packages/devtools/src/webcomponents/components/NuxtDevtoolsInspectPanel.vue

@@ -2,5 +2,6 @@ import type { ElementTraceInfo } from 'vite-plugin-vue-tracer/client/record'
 
 export interface NuxtDevToolsInspectorProps {
   matched?: ElementTraceInfo
+  hasParent?: boolean
   mouse: { x: number, y: number }
 }

packages/devtools/src/webcomponents/components/Props.ts

@@ -1,5 +1,19 @@
+<script setup lang="ts">
+function handleClick() {
+  // eslint-disable-next-line no-console
+  console.log('clicked')
+}
+</script>
+
 <template>
-  <div>Hello</div>
+  <h1>Hello</h1>
+  <p>
+    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.
+    <a href="https://nuxt.com">Nuxt</a>
+  </p>
+  <button @click="handleClick">
+    Click me
+  </button>
 </template>
 
 <style>