feat: improve state handling

packages/devtools-kit/src/_types/client-api.ts

@@ -53,7 +53,10 @@ export interface NuxtDevtoolsHostClient {
   getClientPluginMetrics(): PluginMetric[]
 
   reloadPage(): void
-  closeDevTools(): void
+
+  close(): void
+  open(): void
+  toggle(): void
 
   /**
    * Popup the DevTools frame into Picture-in-Picture mode

packages/devtools/client/app.vue

@@ -45,7 +45,7 @@ watch(
 
 addEventListener('keydown', (e) => {
   if (e.code === 'KeyD' && e.altKey) {
-    client.value?.closeDevTools()
+    client.value?.close()
     e.preventDefault()
   }
 })

packages/devtools/src/runtime/plugins/view/FrameBox.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { PANEL_MAX, PANEL_MIN, closeDevTools, popupWindow, state } from './state'
+import { PANEL_MAX, PANEL_MIN, popupWindow, state } from './state'
 import { useEventListener } from './utils'
-import '../../../types/global'
 
 const props = defineProps<{
   client: NuxtDevtoolsHostClient
@@ -31,7 +30,7 @@ useEventListener(window, 'keydown', (e: KeyboardEvent) => {
   if (e.key === 'Escape' && props.client.inspector?.isEnabled.value) {
     e.preventDefault()
     props.client.inspector?.disable()
-    closeDevTools()
+    props.client.close()
   }
 })
 

packages/devtools/src/runtime/plugins/view/Main.vue

@@ -2,7 +2,7 @@
 import type { CSSProperties } from 'vue'
 import { computed, onMounted, reactive, ref } from 'vue'
 import type { NuxtDevtoolsHostClient } from '../../../types'
-import { state, toggleDevTools } from './state'
+import { state } from './state'
 import { millisecondToHumanreadable, useEventListener } from './utils'
 import FrameBox from './FrameBox.vue'
 
@@ -223,7 +223,12 @@ const time = computed(() => {
   >
     <div class="nuxt-devtools-glowing" :style="isDragging ? 'opacity: 0.6 !important' : ''" />
     <div ref="panelEl" class="nuxt-devtools-panel" @pointerdown="onPointerDown">
-      <button class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button" title="Toggle Nuxt DevTools" @click="toggleDevTools">
+      <button
+        class="nuxt-devtools-icon-button nuxt-devtools-nuxt-button"
+        title="Toggle Nuxt DevTools"
+        :style="state.open ? '' : 'filter:saturate(0)'"
+        @click="client.toggle()"
+      >
         <svg
           viewBox="0 0 324 324" fill="none" xmlns="http://www.w3.org/2000/svg"
           style="margin-top:-1px; height: 1.2em; width: 1.2em;"

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

@@ -1,9 +1,9 @@
 import type { Ref } from 'vue'
-import { computed, createApp, h, markRaw, ref, shallowReactive, shallowRef, watch } from 'vue'
+import { computed, createApp, h, markRaw, nextTick, ref, shallowReactive, shallowRef, watch } from 'vue'
 import { createHooks } from 'hookable'
 import type { NuxtDevtoolsHostClient } from '../../../types'
 import Main from './Main.vue'
-import { closeDevTools, popupWindow, state, toggleDevTools } from './state'
+import { popupWindow, state } from './state'
 
 // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
 // @ts-ignore tsconfig
@@ -39,7 +39,33 @@ export async function setupDevToolsClient({
     reloadPage() {
       location.reload()
     },
-    closeDevTools,
+    toggle() {
+      if (state.value.open)
+        client.close()
+      else
+        client.open()
+    },
+    close() {
+      if (!state.value.open)
+        return
+      state.value.open = false
+      if (popupWindow.value) {
+        try {
+          popupWindow.value.close()
+        }
+        catch (e) {
+        }
+        popupWindow.value = null
+      }
+    },
+    open() {
+      if (state.value.open)
+        return
+      state.value.open = true
+      nextTick(() => {
+        client.updateClient()
+      })
+    },
     inspector: getInspectorInstance(),
     colorMode,
     getIframe,
@@ -69,10 +95,10 @@ export async function setupDevToolsClient({
       iframe.id = 'nuxt-devtools-iframe'
       iframe.src = initialUrl
       iframe.setAttribute('data-v-inspector-ignore', 'true')
-      iframe.addEventListener('load', async () => {
+      iframe.onload = async () => {
         await waitForClientInjection()
         client.updateClient()
-      })
+      }
     }
 
     return iframe
@@ -180,29 +206,29 @@ export async function setupDevToolsClient({
       }) as Window
       const style = pip.document.createElement('style')
       style.innerHTML = `
-          body {
-            margin: 0;
-            padding: 0;
-          }
-          iframe {
-            width: 100vw;
-            height: 100vh;
-            border: none;
-            outline: none;
-          }
-        `
+        body {
+          margin: 0;
+          padding: 0;
+        }
+        iframe {
+          width: 100vw;
+          height: 100vh;
+          border: none;
+          outline: none;
+        }
+      `
       pip.__NUXT_DEVTOOLS_DISABLE__ = true
+      pip.__NUXT_DEVTOOLS_IS_POPUP__ = true
+      pip.document.title = 'Nuxt DevTools'
       pip.document.head.appendChild(style)
       pip.document.body.appendChild(iframe)
       pip.addEventListener('resize', () => {
         state.value.width = Math.round(pip.innerWidth / window.innerWidth * 100)
         state.value.height = Math.round(pip.innerHeight / window.innerHeight * 100)
       })
       pip.addEventListener('pagehide', () => {
-        closeDevTools()
-      })
-      pip.addEventListener('close', () => {
-        closeDevTools()
+        popupWindow.value = null
+        pip.close()
       })
     }
   }
@@ -217,7 +243,7 @@ export async function setupDevToolsClient({
   // Shortcut to toggle devtools
   addEventListener('keydown', (e) => {
     if (e.code === 'KeyD' && e.altKey && e.shiftKey)
-      toggleDevTools()
+      client.close()
   })
 
   const app = createApp({

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

@@ -1,4 +1,4 @@
-import { ref, shallowRef, watch } from 'vue'
+import { shallowRef } from 'vue'
 import type { DevToolsFrameState } from '../../../types'
 import { useObjectStorage } from './utils'
 
@@ -18,34 +18,3 @@ export const state = useObjectStorage<DevToolsFrameState>('nuxt-devtools-frame-s
   position: 'bottom',
   closeOnOutsideClick: false,
 })
-
-export const isInitialized = ref(state.value.open)
-if (!isInitialized.value) {
-  watch(() => state.value.open, (open) => {
-    if (open)
-      isInitialized.value = open
-  })
-}
-
-export function toggleDevTools() {
-  if (state.value.open)
-    closeDevTools()
-  else
-    openDevTools()
-}
-
-export function closeDevTools() {
-  state.value.open = false
-  if (popupWindow.value) {
-    try {
-      popupWindow.value.close()
-    }
-    catch (e) {
-    }
-    popupWindow.value = null
-  }
-}
-
-export function openDevTools() {
-  state.value.open = true
-}

packages/devtools/src/types/global.ts

@@ -37,6 +37,13 @@ declare global {
      */
     __NUXT_DEVTOOLS_DISABLE__?: boolean
 
+    /**
+     * Is popup mode
+     *
+     * @internal
+     */
+    __NUXT_DEVTOOLS_IS_POPUP__?: boolean
+
     /**
      * Vue Inspector client
      */

playgrounds/empty/nuxt.config.ts

@@ -2,5 +2,6 @@
 export default defineNuxtConfig({
   modules: [
     '../../local',
+    // '@nuxt/devtools',
   ],
 })

playgrounds/module-starter/client/pages/index.vue

@@ -45,7 +45,7 @@ onDevtoolsClientConnected((client) => {
         <NButton
           n="green"
           class="mt-4"
-          @click="client!.host.closeDevTools()"
+          @click="client!.host.close()"
         >
           Close DevTools
         </NButton>