fix: resolve devtools client runtime errors (#1075)

Author: antfu

packages/devtools/build.config.ts

@@ -1,7 +1,10 @@
+import { writeFile } from 'node:fs/promises'
 import { defineBuildConfig } from 'unbuild'
 import Vue from 'unplugin-vue/rollup'
 import { buildCSS } from './src/webcomponents/scripts/build-css'
 
+const WEB_COMPONENTS_STUB = new URL('./dist/webcomponents/index.mjs', import.meta.url)
+
 export default defineBuildConfig({
   entries: [
     'src/module',
@@ -39,5 +42,16 @@ export default defineBuildConfig({
         return
       options.plugins.push(Vue())
     },
+    'build:done': async (ctx) => {
+      if (!ctx.options.stub)
+        return
+
+      // unbuild's default stub loads TypeScript through jiti. This entry is
+      // imported by the browser-side inspector plugin, where that Node-only
+      // loader cannot run. Vite can transform the source entry directly while
+      // developing this workspace; published builds still receive the bundled
+      // web component above.
+      await writeFile(WEB_COMPONENTS_STUB, `export * from '../../src/webcomponents/index.ts'\n`)
+    },
   },
 })

packages/devtools/client/app.vue

@@ -152,7 +152,7 @@ registerCommands(() => [
       Connecting....
     </NLoading>
     <div
-      v-else
+      v-show="!waiting"
       id="nuxt-devtools-app"
       class="grid grid-cols-[1fr]"
       h-full h-screen of-hidden rounded-xl bg-base font-sans

packages/devtools/client/composables/npm.ts

@@ -17,7 +17,7 @@ export function usePackageUpdate(name: string, options?: NpmCommandOptions): Ret
 }
 
 export function useNuxtVersion() {
-  return useAsyncState('npm:check:nuxt', () => rpc.checkForUpdateFor('nuxt'))
+  return usePackageUpdate('nuxt').info
 }
 
 export function satisfyNuxtVersion(range: string) {

packages/devtools/client/nuxt.config.ts

@@ -102,6 +102,14 @@ export default defineNuxtConfig({
 
   vite: {
     warmupEntry: false,
+    vue: {
+      // floating-vue still implements its poppers with Options API mixins,
+      // computed properties, and methods. Keep that runtime enabled even when
+      // Nuxt's application defaults change.
+      features: {
+        optionsAPI: true,
+      },
+    },
     $client: {
       build: {
         target: 'esnext',

packages/devtools/client/pages/index.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { definePageMeta } from '#imports'
+
+definePageMeta({
+  redirect: '/modules/overview',
+})
+</script>
+
+<template>
+  <div />
+</template>

packages/devtools/package.json

@@ -54,6 +54,7 @@
     }
   },
   "dependencies": {
+    "@devframes/hub": "catalog:prod",
     "@devframes/plugin-code-server": "catalog:prod",
     "@devframes/plugin-data-inspector": "catalog:prod",
     "@nuxt/devtools-kit": "workspace:*",

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

@@ -4,8 +4,8 @@ import type { $Fetch } from 'ofetch'
 import type { Ref } from 'vue'
 
 import type { Router } from 'vue-router'
+import { getDevframeClientContext } from '@devframes/hub/client'
 import { NuxtDevtoolsInspectPanel } from '@nuxt/devtools/webcomponents'
-import { getDevToolsClientContext } from '@vitejs/devtools-kit/client'
 
 import { createHooks } from 'hookable'
 import { debounce } from 'perfect-debounce'
@@ -17,14 +17,14 @@ import { useAppConfig } from '#imports'
 
 import { initTimelineMetrics } from '../../function-metrics-helpers'
 
-// The `Nuxt` dock group id (see `NUXT_DEVTOOLS_GROUP_ID`). Activating the group
-// auto-opens its `defaultChildId` (the shared-frame anchor). The anchor iframe
-// dock (`nuxt:devtools`) hosts the one kept-alive client iframe that all tab
-// members soft-navigate within.
-const NUXT_DOCK_GROUP_ID = 'nuxt'
+// Host controls must update the visible Devframe viewer context, rather than
+// Vite's separate dock-registration context. Target the shared-frame anchor
+// explicitly so open/navigate always mounts the one kept-alive client iframe
+// used by every Nuxt tab.
+const NUXT_DOCK_ANCHOR_ID = 'nuxt:devtools'
 
-function getViteDevToolsContext() {
-  return getDevToolsClientContext() as any
+function getDevframeContext() {
+  return getDevframeClientContext() as any
 }
 
 const clientRef = shallowRef<NuxtDevtoolsHostClient>()
@@ -56,27 +56,27 @@ export async function setupDevToolsClient({
 
     devtools: {
       toggle() {
-        const ctx = getViteDevToolsContext()
+        const ctx = getDevframeContext()
         if (ctx)
-          ctx.docks.toggleEntry(NUXT_DOCK_GROUP_ID)
+          ctx.docks.toggleEntry(NUXT_DOCK_ANCHOR_ID)
       },
       close() {
-        const ctx = getViteDevToolsContext()
+        const ctx = getDevframeContext()
         if (ctx)
-          ctx.panel.store.open = false
+          ctx.panel.session.open = false
       },
       open() {
-        const ctx = getViteDevToolsContext()
+        const ctx = getDevframeContext()
         if (ctx) {
-          ctx.panel.store.open = true
-          ctx.docks.switchEntry(NUXT_DOCK_GROUP_ID)
+          ctx.panel.session.open = true
+          ctx.docks.switchEntry(NUXT_DOCK_ANCHOR_ID)
         }
       },
       async navigate(path: string) {
-        const ctx = getViteDevToolsContext()
+        const ctx = getDevframeContext()
         if (ctx) {
-          ctx.panel.store.open = true
-          ctx.docks.switchEntry(NUXT_DOCK_GROUP_ID)
+          ctx.panel.session.open = true
+          ctx.docks.switchEntry(NUXT_DOCK_ANCHOR_ID)
         }
         await client.hooks.callHook('host:action:navigate', path)
       },

pnpm-lock.yaml

@@ -199,6 +199,7 @@ catalogs:
   inlined:
     package-manager-detector: ^1.8.0
   prod:
+    '@devframes/hub': *devframe
     '@devframes/plugin-code-server': *devframe
     '@devframes/plugin-data-inspector': *devframe
     '@nuxt/kit': *nuxt-kit

pnpm-workspace.yaml

@@ -17,10 +17,10 @@ interface DevToolsFixtures {
 }
 
 // e2e servers run with `VITE_DEVTOOLS_DISABLE_CLIENT_AUTH=true`, which trusts the
-// *server* peer (so RPC is allowed) but never flips the *client-side* trust flag.
-// Until it does, Vite DevTools never subscribes to the dock list, so no dock —
-// and therefore no Nuxt group — ever appears. Nudge the flag here. This is purely
-// test-environment plumbing; it is not something the tests assert on.
+// *server* peer (so RPC is allowed), but the client can still initialize before
+// that state is reflected locally. Complete the handshake through Devframe's
+// public API before waiting for docks. This is purely test-environment plumbing;
+// it is not something the tests assert on.
 async function ensureDockReady(page: Page): Promise<void> {
   await page.waitForFunction(
     () => Boolean((globalThis as any).__NUXT_DEVTOOLS_HOST__?.devtools),
@@ -32,11 +32,16 @@ async function ensureDockReady(page: Page): Promise<void> {
     null,
     { timeout: 30_000 },
   )
-  await page.evaluate(() => {
-    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
-    if (ctx?.rpc && !ctx.rpc.isTrusted)
-      ctx.rpc.events?.emit?.('rpc:is-trusted:updated', true)
+  await page.evaluate(async () => {
+    const rpc = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__?.rpc
+    if (rpc && !rpc.isTrusted)
+      await rpc.requestTrust()
   })
+  await page.waitForFunction(
+    () => Boolean((globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__?.rpc?.isTrusted),
+    null,
+    { timeout: 30_000 },
+  )
   await page.waitForFunction(
     () => Boolean((globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__?.docks?.entries?.length),
     null,