fix(deps): upgrade Vite DevTools to 0.5.1, fix e2e client-context global (#1069)

Co-authored-by: Anthony Fu <github@antfu.me>

Author: antfubot

pnpm-lock.yaml

@@ -41,7 +41,7 @@ allowBuilds:
   vue-demi: true
 
 refs:
-  devframe: &devframe ^0.9.2
+  devframe: &devframe ^0.9.4
   # Nuxt 5 nightly. Its own `@nuxt/vite-builder-nightly` already requires
   # `vite@^8.1.5`, so this and the `vite` ref below move together.
   #
@@ -64,7 +64,7 @@ refs:
   shiki: &shiki ^4.4.3
   unocss: &unocss ^66.7.5
   vite: &vite ^8.2.1
-  vite-devtools: &vite-devtools ^0.5.0
+  vite-devtools: &vite-devtools ^0.5.1
   vue: &vue ^3.5.41
   vueuse: &vueuse ^14.4.0
 overrides:
@@ -84,25 +84,13 @@ overrides:
   chokidar: ^5.0.0
   devframe: *devframe
   esbuild: ^0.28.2
-  # `unplugin-vue-markdown@32.0.0` depends on its own `markdown-exit
-  # ^1.0.0-beta.9`, a different prerelease tuple than the `^1.1.0-beta.2`
-  # `packages/devtools` depends on directly — semver won't let one satisfy
-  # the other, so without this override pnpm resolves and ships two copies
-  # of the engine. Force both onto the version this workspace uses directly.
   markdown-exit: ^1.1.0-beta.2
   rollup: ^4.62.4
   semver: ^7.8.5
   typescript: ^6.0.3
   unimport: ^6.4.0
   vite: *vite
   vue: *vue
-  # `@nuxt/module-builder@1.0.3` bundles `mkdist@2.4.1`, whose own
-  # `vue-sfc-transformer` dependency is pinned to `^0.1.17` — but
-  # `resolutionMode: highest` otherwise hoists mkdist's copy up to
-  # `@nuxt/module-builder`'s own newer `^0.2.3` want, and mkdist's `.vue`
-  # transform silently breaks under that mismatch (it wrote compiled output
-  # into `packages/devtools/src/runtime/**` instead of `dist/`, clobbering
-  # `auth/index.html` in the process). Pin to what mkdist itself needs.
   vue-sfc-transformer: ^0.2.5
   vue-tsc: ^3.3.10
 catalogs:

pnpm-workspace.yaml

@@ -28,17 +28,17 @@ async function ensureDockReady(page: Page): Promise<void> {
     { timeout: 30_000 },
   )
   await page.waitForFunction(
-    () => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.rpc),
+    () => Boolean((globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__?.rpc),
     null,
     { timeout: 30_000 },
   )
   await page.evaluate(() => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    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.waitForFunction(
-    () => Boolean((globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__?.docks?.entries?.length),
+    () => Boolean((globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__?.docks?.entries?.length),
     null,
     { timeout: 30_000 },
   )

tests/e2e/fixtures/devtools.ts

@@ -13,13 +13,13 @@ test('reports a missing editor binary without starting a process', async ({ page
   await openDevTools()
 
   await page.waitForFunction((id) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     return ctx?.docks?.entries?.some((entry: any) => entry.id === id)
   }, CODE_SERVER_DOCK_ID, { timeout: 30_000 })
 
   // Open the Code Server member the way a user would.
   await page.evaluate(async (id) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     await ctx.docks.switchEntry(id)
   }, CODE_SERVER_DOCK_ID)
 
@@ -30,7 +30,7 @@ test('reports a missing editor binary without starting a process', async ({ page
 
   // Opening the member performs detection only — it must not launch a process.
   const status = await page.evaluate(async (rpcName) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     return ctx.rpc.call(rpcName)
   }, CODE_SERVER_STATUS_RPC)
   expect((status as any).server.status).toBe('stopped')
@@ -45,20 +45,20 @@ test('launches an installed Code Server with authenticated iframe handoff', asyn
   await page.goto('/')
   await openDevTools()
   await page.waitForFunction((id) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     return ctx?.docks?.entries?.some((entry: any) => entry.id === id)
   }, CODE_SERVER_DOCK_ID, { timeout: 30_000 })
 
   await page.evaluate(async (id) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     await ctx.docks.switchEntry(id)
   }, CODE_SERVER_DOCK_ID)
   const launcher = page.frameLocator(`iframe[src*="${CODE_SERVER_DOCK_ID}"]`)
   await launcher.getByRole('button', { name: 'Launch editor' }).click()
 
   await expect.poll(async () => {
     return page.evaluate(async (rpcName) => {
-      const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+      const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
       return ctx.rpc.call(rpcName)
     }, CODE_SERVER_STATUS_RPC)
   }, { timeout: 60_000 }).toMatchObject({
@@ -67,7 +67,7 @@ test('launches an installed Code Server with authenticated iframe handoff', asyn
   })
 
   const runningStatus = await page.evaluate(async (rpcName) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     return ctx.rpc.call(rpcName)
   }, CODE_SERVER_STATUS_RPC) as any
   const serverPort = String(runningStatus.server.port)

tests/e2e/specs/code-server.spec.ts

@@ -8,7 +8,7 @@ const EXAMPLE_SOURCE_ID = 'devframes:plugin:data-inspector:example'
 
 async function inspectorSources(page: any): Promise<string[]> {
   return page.evaluate(async () => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     const sources = await ctx.rpc.call('devframes:plugin:data-inspector:sources')
     return (sources as { id: string }[]).map(s => s.id)
   })
@@ -29,7 +29,7 @@ test('exposes the live Nuxt application as a data source and hides the demo sour
 
   // Querying the live source returns data (the integration is wired end to end).
   const results = await page.evaluate(async (sourceId) => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     const nuxt = await ctx.rpc.call('devframes:plugin:data-inspector:query', sourceId, 'nuxt')
     const vite = await ctx.rpc.call('devframes:plugin:data-inspector:query', sourceId, 'vite')
     return { nuxt, vite }

tests/e2e/specs/data-inspector.spec.ts

@@ -23,7 +23,7 @@ test('registers a single Nuxt entry (no duplicate from the SSR Vite context)', a
   // group. There is no user-visible proxy for "how many groups registered", so
   // this is the one place we read the dock registry — kept to a single count.
   const nuxtGroups = await page.evaluate(() => {
-    const ctx = (globalThis as any).__VITE_DEVTOOLS_CLIENT_CONTEXT__
+    const ctx = (globalThis as any).__DEVFRAME_HUB_CLIENT_CONTEXT__
     return ctx.docks.entries.filter((entry: any) => entry.id === 'nuxt').length
   })
   expect(nuxtGroups).toBe(1)