feat(deps): migrate to Vite DevTools v0.5.0 and Devframe v0.9.2 (#1065)

Co-authored-by: opencode <noreply@opencode.ai>

Author: antfubot

packages/devtools/src/integrations/code-server.ts

@@ -4,7 +4,6 @@ import type { CodeServerIntegrationOptions, NuxtDevtoolsServerContext } from '..
 import { createCodeServerDevframe } from '@devframes/plugin-code-server'
 import { setupCodeServer } from '@devframes/plugin-code-server/node'
 import { deprecate, NUXT_DEVTOOLS_GROUP_ID, onDevtoolsReady } from '@nuxt/devtools-kit'
-import { mountDevframe } from '@vitejs/devtools-kit/node'
 
 const RESERVED_ARGS = ['--auth', '--bind-addr', '--cookie-suffix'] as const
 const RESERVED_ENV = ['PASSWORD', 'HASHED_PASSWORD'] as const
@@ -91,9 +90,9 @@ export function setup(ctx: NuxtDevtoolsServerContext): void {
   })
 
   onDevtoolsReady((kit) => {
-    // `mountDevframe` is re-exported from the hub package while the hook uses
-    // the Vite kit's enriched context type; they are the same runtime object.
-    return mountDevframe(kit as any, mountedDefinition, {
+    // `ctx.install` (from the hub context the Vite kit extends) serves the
+    // definition's SPA, synthesizes its iframe dock, and runs its `setup`.
+    return kit.install(mountedDefinition, {
       dock: {
         groupId: NUXT_DEVTOOLS_GROUP_ID,
         category: 'modules',

packages/devtools/src/integrations/data-inspector.ts

@@ -4,7 +4,6 @@ import type { NuxtDevtoolsServerContext, NuxtServerData } from '../types'
 import type { AnyNitro } from '../utils/nitro-compat'
 import { createDataInspectorDevframe, registerDataSource } from '@devframes/plugin-data-inspector'
 import { deprecate, NUXT_DEVTOOLS_GROUP_ID, onDevtoolsReady } from '@nuxt/devtools-kit'
-import { mountDevframe } from '@vitejs/devtools-kit/node'
 
 /**
  * Live capture of the Nuxt server-side configuration surfaced by the Data
@@ -116,9 +115,9 @@ export function setup(ctx: NuxtDevtoolsServerContext): void {
   // overridden per-mount: group members do not inherit their group's category.
   const definition = createDataInspectorDevframe({ exampleSource: false })
   onDevtoolsReady((kit) => {
-    // `mountDevframe` is re-exported from the hub package while the hook uses
-    // the Vite kit's enriched context type; they are the same runtime object.
-    return mountDevframe(kit as any, definition, {
+    // `ctx.install` (from the hub context the Vite kit extends) serves the
+    // definition's SPA, synthesizes its iframe dock, and runs its `setup`.
+    return kit.install(definition, {
       dock: {
         groupId: NUXT_DEVTOOLS_GROUP_ID,
         category: 'advanced',

packages/devtools/src/module-main.ts

@@ -75,7 +75,10 @@ export async function enableModule(options: ModuleOptions, nuxt: Nuxt) {
     nuxt.options.vite.optimizeDeps ||= {}
     nuxt.options.vite.optimizeDeps.include ||= []
     nuxt.options.vite.optimizeDeps.include.push(
-      'nuxt > @nuxt/devtools > @vitejs/devtools/client/inject',
+      // Vite DevTools 0.5's embedded client is served by the hub as an external
+      // `embedded.js` script (see `runtime/plugins/vite-devtools.client`), so it
+      // is no longer a bundler-resolved `@vitejs/devtools/client/inject` import to
+      // pre-bundle here.
       'nuxt > @nuxt/devtools > @vitejs/devtools-kit/client',
       'nuxt > @nuxt/devtools > error-stack-parser-es',
       'nuxt > @nuxt/devtools > vite-plugin-vue-tracer/client/overlay',

packages/devtools/src/runtime/plugins/vite-devtools.client.ts

@@ -1,5 +1,16 @@
+import { DEVTOOLS_MOUNT_PATH } from '@vitejs/devtools-kit/constants'
 import { defineNuxtPlugin } from '#imports'
 
 export default defineNuxtPlugin(() => {
-  import('@vitejs/devtools/client/inject')
+  // Vite DevTools 0.5 no longer exposes an importable `@vitejs/devtools/client/inject`
+  // entry; its embedded overlay client now ships as `@devframes/hub-ui` and is
+  // served by the hub at `<mount>/embedded.js`. Load it the same way the upstream
+  // `DevToolsInjection` Vite plugin does — a runtime-created module script, rather
+  // than a bundler `import()`, so the hub-served URL stays out of Vite's module
+  // graph and its `import.meta.url`-relative asset fetches (e.g. `branding.json`)
+  // resolve against the real served URL.
+  const script = document.createElement('script')
+  script.type = 'module'
+  script.src = `${DEVTOOLS_MOUNT_PATH}embedded.js`
+  document.body.appendChild(script)
 })

packages/devtools/test/code-server.test.ts

@@ -6,7 +6,7 @@ import { resolveCodeServerOptions, setup } from '../src/integrations/code-server
 
 const mocks = vi.hoisted(() => ({
   createCodeServerDevframe: vi.fn(),
-  mountDevframe: vi.fn(),
+  install: vi.fn(),
   setupCodeServer: vi.fn(),
   dispose: vi.fn(),
 }))
@@ -19,10 +19,6 @@ vi.mock('@devframes/plugin-code-server/node', () => ({
   setupCodeServer: mocks.setupCodeServer,
 }))
 
-vi.mock('@vitejs/devtools-kit/node', () => ({
-  mountDevframe: mocks.mountDevframe,
-}))
-
 function fakeContext(moduleOptions: Record<string, any> = {}) {
   const hooks = createHooks()
   const nuxt = {
@@ -52,7 +48,7 @@ beforeEach(() => {
     setup: vi.fn(),
   }))
   mocks.setupCodeServer.mockResolvedValue({ dispose: mocks.dispose })
-  mocks.mountDevframe.mockImplementation(async (_kit, definition) => {
+  mocks.install.mockImplementation(async (definition) => {
     await definition.setup({ cwd: '/project' })
   })
 })
@@ -114,7 +110,7 @@ describe('code server setup', () => {
     await nuxt.callHook('devtools:ready', {} as any)
 
     expect(mocks.createCodeServerDevframe).not.toHaveBeenCalled()
-    expect(mocks.mountDevframe).not.toHaveBeenCalled()
+    expect(mocks.install).not.toHaveBeenCalled()
   })
 
   it('mounts the plugin in the Nuxt group and disposes its supervisor on close', async () => {
@@ -127,10 +123,9 @@ describe('code server setup', () => {
       serverPort: 9090,
     }))
 
-    const kit = { id: 'kit' }
+    const kit = { id: 'kit', install: mocks.install }
     await nuxt.callHook('devtools:ready', kit as any)
-    expect(mocks.mountDevframe).toHaveBeenCalledWith(
-      kit,
+    expect(mocks.install).toHaveBeenCalledWith(
       expect.objectContaining({ id: 'devframes_plugin_code-server' }),
       {
         dock: {
@@ -157,7 +152,7 @@ describe('code server setup', () => {
     const { ctx, nuxt } = fakeContext()
     setup(ctx)
 
-    const ready = nuxt.callHook('devtools:ready', { id: 'kit' } as any)
+    const ready = nuxt.callHook('devtools:ready', { id: 'kit', install: mocks.install } as any)
     await vi.waitFor(() => {
       expect(mocks.setupCodeServer).toHaveBeenCalledOnce()
     })