fix: redirect devtools mount path to trailing slash

Author: onmax

packages/core/src/node/__tests__/plugins-server.test.ts

@@ -1,6 +1,6 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import { describe, expect, it } from 'vitest'
-import { renderDockImportsMap } from '../plugins/server'
+import { redirectDevToolsMountPath, renderDockImportsMap } from '../plugins/server'
 
 describe('renderDockImportsMap', () => {
   it('uses default importName when omitted', () => {
@@ -55,3 +55,78 @@ describe('renderDockImportsMap', () => {
     expect(code).toContain('r["renderPanel"]')
   })
 })
+
+describe('redirectDevToolsMountPath', () => {
+  function callRedirect(url: string, originalUrl = url) {
+    let statusCode: number | undefined
+    let location: string | undefined
+    let ended = false
+    let nextCalled = false
+
+    redirectDevToolsMountPath(
+      { originalUrl, url } as any,
+      {
+        set statusCode(value: number) {
+          statusCode = value
+        },
+        get statusCode() {
+          return statusCode ?? 200
+        },
+        setHeader(name: string, value: string) {
+          if (name === 'Location') {
+            location = value
+          }
+        },
+        end() {
+          ended = true
+        },
+      } as any,
+      () => {
+        nextCalled = true
+      },
+    )
+
+    return {
+      ended,
+      location,
+      nextCalled,
+      statusCode,
+    }
+  }
+
+  it('redirects the mounted devtools root to the canonical trailing slash URL', () => {
+    expect(callRedirect('/', '/.devtools')).toEqual({
+      ended: true,
+      location: '/.devtools/',
+      nextCalled: false,
+      statusCode: 302,
+    })
+  })
+
+  it('preserves the query string when redirecting the mounted devtools root', () => {
+    expect(callRedirect('/?foo=bar', '/.devtools?foo=bar')).toEqual({
+      ended: true,
+      location: '/.devtools/?foo=bar',
+      nextCalled: false,
+      statusCode: 302,
+    })
+  })
+
+  it('passes through the canonical trailing slash URL', () => {
+    expect(callRedirect('/', '/.devtools/')).toEqual({
+      ended: false,
+      location: undefined,
+      nextCalled: true,
+      statusCode: undefined,
+    })
+  })
+
+  it('passes through devtools subpaths', () => {
+    expect(callRedirect('/auth', '/.devtools/auth')).toEqual({
+      ended: false,
+      location: undefined,
+      nextCalled: true,
+      statusCode: undefined,
+    })
+  })
+})

packages/core/src/node/plugins/server.ts

@@ -1,8 +1,9 @@
 import type { ClientScriptEntry, DevToolsDockEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
-import type { Plugin } from 'vite'
+import type { Connect, Plugin } from 'vite'
 import {
   DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID,
   DEVTOOLS_MOUNT_PATH,
+  DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH,
 } from '@vitejs/devtools-kit/constants'
 import { createDevToolsContext } from '../context'
 import { createDevToolsMiddleware } from '../server'
@@ -34,6 +35,18 @@ export function renderDockImportsMap(docks: Iterable<DevToolsDockEntry>): string
   ].join('\n')
 }
 
+export const redirectDevToolsMountPath: Connect.NextHandleFunction = (req, res, next) => {
+  const originalUrl = req.originalUrl ?? req.url
+  if (originalUrl === DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH || originalUrl?.startsWith(`${DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH}?`)) {
+    res.statusCode = 302
+    res.setHeader('Location', `${DEVTOOLS_MOUNT_PATH}${originalUrl.slice(DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH.length)}`)
+    res.end()
+    return
+  }
+
+  next()
+}
+
 export function DevToolsServer(): Plugin {
   let context: DevToolsNodeContext
   return {
@@ -54,6 +67,7 @@ export function DevToolsServer(): Plugin {
         },
         context,
       })
+      viteDevServer.middlewares.use(DEVTOOLS_MOUNT_PATH_NO_TRAILING_SLASH, redirectDevToolsMountPath)
       viteDevServer.middlewares.use(DEVTOOLS_MOUNT_PATH, middleware)
     },
     resolveId(id) {