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'
 importVuefrom'unplugin-vue/rollup'
 import{buildCSS}from'./src/webcomponents/scripts/build-css'
 
+constWEB_COMPONENTS_STUB=newURL('./dist/webcomponents/index.mjs',import.meta.url)
+
 exportdefaultdefineBuildConfig({
 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.
+awaitwriteFile(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-fullh-screenof-hiddenrounded-xlbg-basefont-sans

packages/devtools/client/composables/npm.ts

@@ -17,7 +17,7 @@ export function usePackageUpdate(name: string, options?: NpmCommandOptions): Ret
 }
 
 exportfunctionuseNuxtVersion(){
-returnuseAsyncState('npm:check:nuxt',()=>rpc.checkForUpdateFor('nuxt'))
+returnusePackageUpdate('nuxt').info
 }
 
 exportfunctionsatisfyNuxtVersion(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'
 importtype{Ref}from'vue'
 
 importtype{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.
-constNUXT_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.
+constNUXT_DOCK_ANCHOR_ID='nuxt:devtools'
 
-functiongetViteDevToolsContext(){
-returngetDevToolsClientContext()asany
+functiongetDevframeContext(){
+returngetDevframeClientContext()asany
 }
 
 constclientRef=shallowRef<NuxtDevtoolsHostClient>()
@@ -56,27 +56,27 @@ export async function setupDevToolsClient({
 
 devtools: {
 toggle(){
-constctx=getViteDevToolsContext()
+constctx=getDevframeContext()
 if(ctx)
-ctx.docks.toggleEntry(NUXT_DOCK_GROUP_ID)
+ctx.docks.toggleEntry(NUXT_DOCK_ANCHOR_ID)
 },
 close(){
-constctx=getViteDevToolsContext()
+constctx=getDevframeContext()
 if(ctx)
-ctx.panel.store.open=false
+ctx.panel.session.open=false
 },
 open(){
-constctx=getViteDevToolsContext()
+constctx=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)
 }
 },
 asyncnavigate(path: string){
-constctx=getViteDevToolsContext()
+constctx=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)
 }
 awaitclient.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.
 asyncfunctionensureDockReady(page: Page): Promise<void>{
 awaitpage.waitForFunction(
 ()=>Boolean((globalThisasany).__NUXT_DEVTOOLS_HOST__?.devtools),
@@ -32,11 +32,16 @@ async function ensureDockReady(page: Page): Promise<void> {
 null,
 {timeout: 30_000},
 )
-awaitpage.evaluate(()=>{
-constctx=(globalThisasany).__DEVFRAME_HUB_CLIENT_CONTEXT__
-if(ctx?.rpc&&!ctx.rpc.isTrusted)
-ctx.rpc.events?.emit?.('rpc:is-trusted:updated',true)
+awaitpage.evaluate(async()=>{
+constrpc=(globalThisasany).__DEVFRAME_HUB_CLIENT_CONTEXT__?.rpc
+if(rpc&&!rpc.isTrusted)
+awaitrpc.requestTrust()
 })
+awaitpage.waitForFunction(
+()=>Boolean((globalThisasany).__DEVFRAME_HUB_CLIENT_CONTEXT__?.rpc?.isTrusted),
+null,
+{timeout: 30_000},
+)
 awaitpage.waitForFunction(
 ()=>Boolean((globalThisasany).__DEVFRAME_HUB_CLIENT_CONTEXT__?.docks?.entries?.length),
 null,