feat: pinia panel (#621)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/devtools/client/app.vue

@@ -5,6 +5,7 @@ import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import './styles/global.css'
 import { useEyeDropper } from '@vueuse/core'
 import { setupClientRPC } from './setup/client-rpc'
+import { setupVueDevTools } from './setup/vue-devtools'
 import { splitScreenAvailable } from '~/composables/storage'
 
 if (process.client)
@@ -27,6 +28,7 @@ useHead({
   ],
 })
 
+setupVueDevTools()
 setupClientRPC()
 
 const client = useClient()

packages/devtools/client/composables/vue-devtools.ts

@@ -0,0 +1,22 @@
+import { activeAppRecord, connected } from '../setup/vue-devtools'
+
+export function useVueDevToolsState() {
+  return {
+    activeAppRecord,
+    connected,
+  }
+}
+
+export function onVueDevToolsConnected(callback: () => void) {
+  if (connected.value) {
+    callback()
+  }
+  else {
+    const stop = watch(connected, (value) => {
+      if (value) {
+        stop()
+        callback()
+      }
+    })
+  }
+}

packages/devtools/client/pages/modules/pinia.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { Pinia } from '@vue/devtools-applet'
+import '@vue/devtools-applet/style.css'
+
+const { connected } = useVueDevToolsState()
+
+definePageMeta({
+  icon: 'i-logos-pinia',
+  title: 'Pinia',
+  layout: 'full',
+  show() {
+    const configs = useServerConfig()
+    return () => configs.value?.modules?.includes('@pinia/nuxt')
+  },
+})
+</script>
+
+<template>
+  <div class="h-full w-full">
+    <Pinia v-if="connected" />
+    <NLoading v-else>
+      Connecting....
+    </NLoading>
+  </div>
+</template>

packages/devtools/client/setup/vue-devtools.ts

@@ -0,0 +1,65 @@
+import { HandShakeServer, getDevToolsState, initDevToolsSeparateWindow, initDevToolsSeparateWindowBridge, onDevToolsStateUpdated, setupDevToolsBridge } from '@vue/devtools-core'
+import type { AppRecord } from '@vue/devtools-kit'
+import { toggleHighPerfMode } from '@vue/devtools-kit'
+
+export type DevtoolsBridgeAppRecord = Pick<AppRecord, 'name' | 'id' | 'version' | 'routerId' | 'moduleDetectives'>
+
+const appConnected = ref(false)
+const clientConnected = ref(false)
+const appRecords = ref<Array<DevtoolsBridgeAppRecord>>([])
+const activeAppRecordId = ref<string | null>(null)
+export const connected = computed(() => appConnected.value && clientConnected.value)
+export const activeAppRecord = computed(() => appRecords.value.find(r => r.id === activeAppRecordId.value))
+
+export function initVueDevToolsState() {
+  getDevToolsState().then((data) => {
+    if (!data)
+      return
+    appConnected.value = data.connected
+    clientConnected.value = data.clientConnected
+    appRecords.value = data.appRecords
+    activeAppRecordId.value = data.activeAppRecordId
+  })
+
+  onDevToolsStateUpdated((data) => {
+    if (!data)
+      return
+    appConnected.value = data.connected
+    clientConnected.value = data.clientConnected
+    appRecords.value = data.appRecords
+    activeAppRecordId.value = data.activeAppRecordId
+  })
+
+  return {
+    appRecords,
+    activeAppRecord,
+  }
+}
+
+export function setupVueDevTools() {
+  const state = useDevToolsFrameState()
+
+  const isInPopup = window.__NUXT_DEVTOOLS_IS_POPUP__
+
+  watchEffect(() => {
+    if (isInPopup)
+      toggleHighPerfMode(false)
+    else
+      toggleHighPerfMode(!state.value?.open)
+  })
+
+  initDevToolsSeparateWindow({
+    onConnected(channel) {
+      const bridge = initDevToolsSeparateWindowBridge(channel)
+      setupDevToolsBridge(bridge)
+      new HandShakeServer(bridge).onnConnect().then(() => {
+        bridge.emit('devtools:client-ready')
+        initVueDevToolsState()
+      })
+      bridge.on('disconnect', () => {
+        channel.close()
+        initDevToolsSeparateWindow()
+      })
+    },
+  })
+}

packages/devtools/package.json

@@ -47,6 +47,9 @@
     "@nuxt/devtools-kit": "workspace:*",
     "@nuxt/devtools-wizard": "workspace:*",
     "@nuxt/kit": "^3.11.1",
+    "@vue/devtools-applet": "^7.0.19",
+    "@vue/devtools-core": "^7.0.19",
+    "@vue/devtools-kit": "^7.0.19",
     "birpc": "^0.2.17",
     "consola": "^3.2.3",
     "destr": "^2.0.3",

packages/devtools/src/integrations/vue-devtools.ts

@@ -0,0 +1,28 @@
+import { addVitePlugin } from '@nuxt/kit'
+import { join } from 'pathe'
+import type { NuxtDevtoolsServerContext } from '../types'
+import { runtimeDir } from '../dirs'
+
+export function setup({ nuxt }: NuxtDevtoolsServerContext) {
+  if (!nuxt.options.dev || nuxt.options.test)
+    return
+
+  addVitePlugin({
+    name: 'vue:devtools',
+    async resolveId(importee: string) {
+      if (importee.startsWith('virtual:vue-devtools-path:')) {
+        const resolved = importee.replace('virtual:vue-devtools-path:', join(runtimeDir, 'vue-devtools/'))
+        return resolved
+      }
+    },
+    transform(code, id) {
+      const [filename] = id.split('?', 2)
+      const appendTo = /\/entry\.m?js$/
+
+      if (appendTo.test(filename))
+        code = `import 'virtual:vue-devtools-path:overlay.mjs';\n${code}`
+
+      return code
+    },
+  })
+}

packages/devtools/src/module-main.ts

@@ -185,6 +185,8 @@ window.__NUXT_DEVTOOLS_TIME_METRIC__.appInit = Date.now()
 
   await import('./integrations/plugin-metrics').then(({ setup }) => setup(ctx))
 
+  await import('./integrations/vue-devtools').then(({ setup }) => setup(ctx))
+
   if (options.viteInspect !== false)
     await import('./integrations/vite-inspect').then(({ setup }) => setup(ctx))
 

packages/devtools/src/runtime/vue-devtools/overlay.mjs

@@ -0,0 +1,6 @@
+import { devtools } from '@vue/devtools-kit'
+import { initAppSeparateWindow } from '@vue/devtools-core'
+
+devtools.init()
+
+initAppSeparateWindow()

playgrounds/tab-pinia/.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

playgrounds/tab-pinia/app.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <NuxtLayout>
+    <NuxtPage />
+  </NuxtLayout>
+</template>
+
+<style>
+html.dark {
+  background: #050505;
+}
+</style>

playgrounds/tab-pinia/assets/main.css

@@ -0,0 +1 @@
+@import '@exampledev/new.css';