fix: component tree format

nuxt · Jan 9, 2025 · f4017f3 · f4017f3
1 parent 3b2c84c
commit f4017f3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 473 deletions.
diff --git a/packages/devtools/client/composables/rpc.ts b/packages/devtools/client/composables/rpc.ts
@@ -3,11 +3,11 @@ import { useDebounce } from '@vueuse/core'
 import { createBirpc } from 'birpc'
 import { parse, stringify } from 'flatted'
 import { tryCreateHotContext } from 'vite-hot-client'
-import { ref } from 'vue'
+import { ref, shallowRef } from 'vue'
 import { WS_EVENT_NAME } from '../../src/constant'
 
 export const wsConnecting = ref(false)
-export const wsError = ref<any>()
+export const wsError = shallowRef<any>()
 export const wsConnectingDebounced = useDebounce(wsConnecting, 2000)
 
 const connectPromise = connectVite()

diff --git a/packages/devtools/src/integrations/vite-inspect.ts b/packages/devtools/src/integrations/vite-inspect.ts
@@ -30,7 +30,16 @@ export async function setup({ nuxt, rpc }: NuxtDevtoolsServerContext) {
   }), nuxt)
 
   async function getComponentsRelationships() {
-    const modules = (await api?.rpc.list())?.modules || []
+    const meta = await api?.rpc.getMetadata()
+    const modules = (
+      meta
+        ? await api?.rpc.getModulesList({
+          vite: meta?.instances[0].vite,
+          env: meta?.instances[0].environments[0],
+        })
+        : null
+    ) || []
+
     const components = await rpc.functions.getComponents() || []
     const vueModules = modules.filter((m) => {
       const plainId = m.id.replace(/\?v=\w+$/, '')