Merge remote-tracking branch 'origin/main' into antfu/self-inspect-plugin

Author: antfu

docs/guide/index.md

@@ -36,32 +36,19 @@ Install or upgrade your Vite to the beta version 13+:
 }
 ```
 
-Install the required DevTools plugin for both client modes:
+Install the required DevTools package:
 
 ```bash
 pnpm add -D @vitejs/devtools
 ```
 
-Vite DevTools supports two client modes: embedded and standalone. You can choose the mode in your Vite config.
+Vite DevTools has two client modes. Configure one mode at a time.
 
-Use embedded mode:
+### Standalone mode
 
-```ts [vite.config.ts] twoslash
-import { DevTools } from '@vitejs/devtools'
-import { defineConfig } from 'vite'
+The DevTools client runs in a standalone window (no user app).
 
-export default defineConfig({
-  plugins: [
-    DevTools(),
-  ],
-  build: {
-    rolldownOptions: {
-      devtools: {}, // enable devtools mode
-    },
-  }
-})
-```
-Or use standalone mode:
+Configure `vite.config.ts`:
 
 ```ts [vite.config.ts] twoslash
 import { defineConfig } from 'vite'
@@ -73,19 +60,45 @@ export default defineConfig({
 })
 ```
 
-Run a Vite build to generate Rolldown build metadata. In standalone mode, DevTools also starts a local server to host the client after the build completes.
+Run:
 
 ```bash
 pnpm build
 ```
 
+After the build completes, open the DevTools URL shown in the terminal.
 
-If you're using embedded mode, start your app and open the DevTools panel in the browser:
+### Embedded mode
+
+The DevTools client runs inside an embedded floating panel.
+
+Configure `vite.config.ts`:
+
+```ts [vite.config.ts] twoslash
+import { DevTools } from '@vitejs/devtools'
+import { defineConfig } from 'vite'
+
+export default defineConfig({
+  plugins: [
+    DevTools(),
+  ],
+  build: {
+    rolldownOptions: {
+      devtools: {}, // enable devtools mode
+    },
+  }
+})
+```
+
+Run:
 
 ```bash
+pnpm build
 pnpm dev
 ```
 
+Then open your app in the browser and open the DevTools panel.
+
 ## What's Next?
 
 Now that you have Vite DevTools set up, you can:

package.json

@@ -56,7 +56,6 @@
     "magic-string": "catalog:build",
     "nano-staged": "catalog:devtools",
     "nuxt": "catalog:build",
-    "nuxt-eslint-auto-explicit-import": "catalog:devtools",
     "p-limit": "catalog:deps",
     "simple-git-hooks": "catalog:devtools",
     "tsdown": "catalog:build",

packages/core/playground/vite.config.ts

@@ -149,23 +149,34 @@ export default defineConfig({
             initialValue: { count: 1 },
           })
 
-          // eslint-disable-next-line unimport/auto-insert
-          setInterval(() => {
-            counterState.mutate((current) => {
-              current.count = (current.count + 1) % 5
-            })
-            const count = counterState.value().count
+          counterState.on('updated', (newState) => {
             ctx.docks.update({
               id: 'counter',
               type: 'action',
-              icon: `material-symbols:counter-${count}`,
-              title: `Counter ${count}`,
-              // TODO: HMR?
+              icon: `material-symbols:counter-${newState.count}`,
+              title: `Counter ${newState.count}`,
               action: ctx.utils.createSimpleClientScript(`() => {
-                alert('Counter ${count}')
+                alert('Counter ${newState.count}')
               }`),
             })
-          }, 1000)
+          })
+
+          // setInterval(() => {
+          //   counterState.mutate((current) => {
+          //     current.count = (current.count + 1) % 5
+          //   })
+          //   const count = counterState.value().count
+          //   ctx.docks.update({
+          //     id: 'counter',
+          //     type: 'action',
+          //     icon: `material-symbols:counter-${count}`,
+          //     title: `Counter ${count}`,
+          //     // TODO: HMR?
+          //     action: ctx.utils.createSimpleClientScript(`() => {
+          //       alert('Counter ${count}')
+          //     }`),
+          //   })
+          // }, 1000)
         },
       },
     },

packages/core/src/client/webcomponents/components/Dock.vue

@@ -75,14 +75,14 @@ context.rpc.events.on('rpc:is-trusted:updated', (isTrusted) => {
     context.docks.switchEntry(null)
 })
 
-const isPopupEntryVisible = computed(() => isDockPopupEntryVisible())
+const isPopupEntryVisible = computed(() => isDockPopupEntryVisible(context.clientType))
 const groupedEntries = computed(() => {
   if (isPopupEntryVisible.value)
     return context.docks.groupedEntries
   return filterPopupDockEntry(context.docks.groupedEntries)
 })
 
-const splitedEntries = computed(() => {
+const splitEntries = computed(() => {
   return docksSplitGroupsWithCapacity(groupedEntries.value, 5)
 })
 
@@ -330,18 +330,18 @@ onMounted(() => {
         >
           <DockEntriesWithCategories
             :context="context"
-            :groups="splitedEntries.visible"
+            :groups="splitEntries.visible"
             :is-vertical="context.panel.isVertical"
             :selected="selectedEntry"
             @select="(e) => context.docks.switchEntry(e?.id)"
           />
 
-          <template v-if="splitedEntries.overflow.length > 0">
+          <template v-if="splitEntries.overflow.length > 0">
             <div class="border-base m1 h-20px w-px border-r-1.5" />
             <DockOverflowButton
               :context="context"
               :is-vertical="context.panel.isVertical"
-              :groups="splitedEntries.overflow"
+              :groups="splitEntries.overflow"
               :selected="selectedEntry"
               @select="(e) => context.docks.switchEntry(e?.id)"
             />

packages/core/src/client/webcomponents/components/DockStandalone.ts

@@ -4,20 +4,11 @@ import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './DockStandalone.vue'
 
-const forcedColorModeCss = `
-:host([data-vite-devtools-color-mode='dark']) {
-  color-scheme: dark;
-}
-:host([data-vite-devtools-color-mode='light']) {
-  color-scheme: light;
-}
-`
-
 export const DockStandalone = defineCustomElement(
   Component,
   {
     shadowRoot: true,
-    styles: [css, forcedColorModeCss],
+    styles: [css],
   },
 ) as VueElementConstructor<{
   context: DocksContext

packages/core/src/client/webcomponents/components/DockStandalone.vue

@@ -31,7 +31,7 @@ watch(
 )
 
 const groupedEntries = computed(() => {
-  if (isDockPopupEntryVisible())
+  if (isDockPopupEntryVisible('standalone'))
     return context.docks.groupedEntries
 
   return filterPopupDockEntry(context.docks.groupedEntries)

packages/core/src/client/webcomponents/state/__tests__/popup.test.ts

@@ -1,33 +1,30 @@
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
 import { setDocksOverflowPanel, useDocksOverflowPanel } from '../floating-tooltip'
-import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, isRunningInDockPopupWindow, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
+import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
 
 const {
   DockStandaloneElementMock,
   dockStandaloneCtorCalls,
   dockElementRemoveMock,
-  dockElementSetAttributeMock,
 } = vi.hoisted(() => {
   const dockElementRemoveMock = vi.fn()
-  const dockElementSetAttributeMock = vi.fn()
   const dockStandaloneCtorCalls: Array<{ context: DocksContext }> = []
   class DockStandaloneElementMock {
     context: DocksContext
     remove: () => void
-    setAttribute: (name: string, value: string) => void
+    style: Record<string, string>
     constructor({ context }: { context: DocksContext }) {
       this.context = context
       this.remove = dockElementRemoveMock
-      this.setAttribute = dockElementSetAttributeMock
+      this.style = {}
       dockStandaloneCtorCalls.push({ context })
     }
   }
   return {
     DockStandaloneElementMock: DockStandaloneElementMock as unknown as new (props: { context: DocksContext }) => HTMLElement,
     dockStandaloneCtorCalls,
     dockElementRemoveMock,
-    dockElementSetAttributeMock,
   }
 })
 
@@ -135,7 +132,6 @@ describe('dock popup state', () => {
     setDockStandaloneLoaderForTest(async () => DockStandaloneElementMock)
     dockStandaloneCtorCalls.length = 0
     dockElementRemoveMock.mockClear()
-    dockElementSetAttributeMock.mockClear()
     ;(globalThis as { window?: any }).window = {
       innerWidth: 1200,
       innerHeight: 800,
@@ -149,7 +145,7 @@ describe('dock popup state', () => {
 
   it('returns null when the API is unavailable', async () => {
     expect(isDockPopupSupported()).toBe(false)
-    expect(isDockPopupEntryVisible()).toBe(false)
+    expect(isDockPopupEntryVisible('embedded')).toBe(false)
     const popup = await openDockPopup(createMockContext())
     expect(popup).toBeNull()
     expect(useIsDockPopupOpen().value).toBe(false)
@@ -160,21 +156,15 @@ describe('dock popup state', () => {
     const requestWindow = vi.fn().mockResolvedValue(popup)
     ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow }
 
-    expect(isDockPopupEntryVisible()).toBe(true)
+    expect(isDockPopupEntryVisible('embedded')).toBe(true)
     await openDockPopup(createMockContext())
-    expect(isDockPopupEntryVisible()).toBe(false)
+    expect(isDockPopupEntryVisible('embedded')).toBe(false)
   })
 
   it('hides popup entry when running inside popup window', () => {
     ;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow: vi.fn() }
-    ;(window as Window & { document?: unknown }).document = {
-      documentElement: {
-        hasAttribute: vi.fn((name: string) => name === 'data-vite-devtools-popup-window'),
-      },
-    } as any
 
-    expect(isRunningInDockPopupWindow()).toBe(true)
-    expect(isDockPopupEntryVisible()).toBe(false)
+    expect(isDockPopupEntryVisible('standalone')).toBe(false)
   })
 
   it('filters popup entry from grouped entries', () => {
@@ -220,7 +210,6 @@ describe('dock popup state', () => {
     expect(appRoot).toBeTruthy()
     expect(appRoot.id).toBe('vite-devtools-popup-root')
     expect(appRoot.appended).toHaveLength(1)
-    expect(dockElementSetAttributeMock).toHaveBeenCalledWith('data-vite-devtools-color-mode', 'light')
   })
 
   it('hides dock overflow panel when opening popup', async () => {

packages/core/src/client/webcomponents/state/context.ts

@@ -65,7 +65,7 @@ export async function createDocksContext(
 
     // If the action is in a popup, delegate to the main frame
     if (entry.type === 'action') {
-      const delegated = await triggerMainFrameDockAction(entry.id)
+      const delegated = await triggerMainFrameDockAction(clientType, entry.id)
       if (delegated != null)
         return false
     }
@@ -135,7 +135,7 @@ export async function createDocksContext(
     clientType,
   })
 
-  registerMainFrameDockActionHandler(async (id) => {
+  registerMainFrameDockActionHandler(clientType, async (id) => {
     const entry = dockEntries.value.find(e => e.id === id)
     if (!entry || entry.type !== 'action')
       return false

packages/core/src/client/webcomponents/state/popup.ts

@@ -19,7 +19,6 @@ const PANEL_MAX_SIZE = 100
 const POPUP_MIN_WIDTH = 320
 const POPUP_MIN_HEIGHT = 240
 const POPUP_DOCK_ID = '~popup'
-const POPUP_WINDOW_ATTRIBUTE = 'data-vite-devtools-popup-window'
 const MAIN_FRAME_ACTION_HANDLER_KEY = '__VITE_DEVTOOLS_TRIGGER_DOCK_ACTION__'
 
 const popupWindow = shallowRef<Window | null>(null)
@@ -81,9 +80,7 @@ function resolveColorMode(): ColorMode {
 }
 
 function applyPopupColorMode(popup: Window, mode: ColorMode) {
-  popup.document.documentElement?.setAttribute('data-vite-devtools-color-mode', mode)
   popup.document.documentElement?.style.setProperty('color-scheme', mode)
-  popupDockElement?.setAttribute('data-vite-devtools-color-mode', mode)
 }
 
 function setupPopupColorModeSync(popup: Window): () => void {
@@ -177,7 +174,6 @@ async function mountStandaloneApp(context: DocksContext, popup: Window) {
   ].join('\n')
 
   popup.document.title = 'Vite DevTools'
-  popup.document.documentElement?.setAttribute(POPUP_WINDOW_ATTRIBUTE, '')
   popup.document.head?.appendChild(baseStyle)
   popup.document.body.textContent = ''
 
@@ -194,30 +190,26 @@ export function isDockPopupSupported(): boolean {
   return !!getDocumentPictureInPicture()?.requestWindow
 }
 
-export function isRunningInDockPopupWindow(): boolean {
-  if (typeof window === 'undefined')
-    return false
-  return !!window.document?.documentElement?.hasAttribute?.(POPUP_WINDOW_ATTRIBUTE)
-}
-
 export function registerMainFrameDockActionHandler(
+  clientType: 'embedded' | 'standalone',
   handler: MainFrameDockActionHandler,
 ) {
   if (typeof window === 'undefined') {
     return
   }
-  if (isRunningInDockPopupWindow()) {
+  if (clientType === 'standalone') {
     return
   }
   ;(window as Window & { [MAIN_FRAME_ACTION_HANDLER_KEY]?: MainFrameDockActionHandler })[MAIN_FRAME_ACTION_HANDLER_KEY] = handler
 }
 
 export async function triggerMainFrameDockAction(
+  clientType: 'embedded' | 'standalone',
   entryId: string,
 ): Promise<boolean | undefined> {
   if (typeof window === 'undefined')
     return undefined
-  if (!isRunningInDockPopupWindow())
+  if (clientType !== 'standalone')
     return undefined
 
   try {
@@ -234,8 +226,8 @@ export async function triggerMainFrameDockAction(
   }
 }
 
-export function isDockPopupEntryVisible(): boolean {
-  return isDockPopupSupported() && !isPopupOpen.value && !isRunningInDockPopupWindow()
+export function isDockPopupEntryVisible(clientType: 'embedded' | 'standalone'): boolean {
+  return isDockPopupSupported() && !isPopupOpen.value && clientType !== 'standalone'
 }
 
 export function filterPopupDockEntry(