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{eventsasinspectorEvents,hasDataasinspectorHasData,stateasinspectorState}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({
 
 constprops=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',()=>{
 constparent=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)=>{
 consturl=(easany)?.detail?.[0]
 if(url)
-client.hooks.callHook('host:inspector:click',url)
+awaitclient.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({
 
 returninspector=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 @@
 importtype{VueElementConstructor}from'vue'
-importtype{NuxtDevToolsInspectorProps}from'./Props'
 import{defineCustomElement}from'vue'
 importcssfrom'../.generated/css'
 importComponentfrom'./NuxtDevtoolsFrame.vue'
 
-exportconstNuxtDevtoolsFrame=defineCustomElement({
- ...Component,
-shadowRoot: true,
-styles: [css],
-}asany)asVueElementConstructor<{props: NuxtDevToolsInspectorProps}>
+exportconstNuxtDevtoolsFrame=defineCustomElement(
+Component,
+{
+shadowRoot: true,
+styles: [css],
+},
+)asVueElementConstructor
 
 customElements.define('nuxt-devtools-frame',NuxtDevtoolsFrame)

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

@@ -4,10 +4,12 @@ import { defineCustomElement } from 'vue'
 importcssfrom'../.generated/css'
 importComponentfrom'./NuxtDevtoolsInspectPanel.vue'
 
-exportconstNuxtDevtoolsInspectPanel=defineCustomElement({
- ...Component,
-shadowRoot: true,
-styles: [css],
-}asany)asVueElementConstructor<{props: NuxtDevToolsInspectorProps}>
+exportconstNuxtDevtoolsInspectPanel=defineCustomElement(
+Component,
+{
+shadowRoot: true,
+styles: [css],
+},
+)asVueElementConstructor<{props: NuxtDevToolsInspectorProps}>
 
 customElements.define('nuxt-devtools-inspect-panel',NuxtDevtoolsInspectPanel)

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

@@ -93,7 +93,8 @@ async function openInEditor() {
  <divref="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"
  >
  <divclass="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'
 
 exportinterfaceNuxtDevToolsInspectorProps{
 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.
+ <ahref="https://nuxt.com">Nuxt</a>
+ </p>
+ <button@click="handleClick">
+ Click me
+ </button>
 </template>
 
 <style>