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'
 
 constRESERVED_ARGS=['--auth','--bind-addr','--cookie-suffix']asconst
 constRESERVED_ENV=['PASSWORD','HASHED_PASSWORD']asconst
@@ -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.
-returnmountDevframe(kitasany,mountedDefinition,{
+// `ctx.install` (from the hub context the Vite kit extends) serves the
+// definition's SPA, synthesizes its iframe dock, and runs its `setup`.
+returnkit.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'
 importtype{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.
 constdefinition=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.
-returnmountDevframe(kitasany,definition,{
+// `ctx.install` (from the hub context the Vite kit extends) serves the
+// definition's SPA, synthesizes its iframe dock, and runs its `setup`.
+returnkit.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'
 
 exportdefaultdefineNuxtPlugin(()=>{
-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.
+constscript=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
 
 constmocks=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,
-}))
-
 functionfakeContext(moduleOptions: Record<string,any>={}){
 consthooks=createHooks()
 constnuxt={
@@ -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)=>{
 awaitdefinition.setup({cwd: '/project'})
 })
 })
@@ -114,7 +110,7 @@ describe('code server setup', () => {
 awaitnuxt.callHook('devtools:ready',{}asany)
 
 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,
 }))
 
-constkit={id: 'kit'}
+constkit={id: 'kit',install: mocks.install}
 awaitnuxt.callHook('devtools:ready',kitasany)
-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)
 
-constready=nuxt.callHook('devtools:ready',{id: 'kit'}asany)
+constready=nuxt.callHook('devtools:ready',{id: 'kit',install: mocks.install}asany)
 awaitvi.waitFor(()=>{
 expect(mocks.setupCodeServer).toHaveBeenCalledOnce()
 })