feat: update action

Author: antfu

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

@@ -5,15 +5,31 @@ import { createSharedState } from '@vitejs/devtools-kit/utils/shared-state'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 import { createDocksContext } from '../context'
 
-const { requestDockPopupOpenMock } = vi.hoisted(() => {
+const {
+  executeSetupScriptMock,
+  registerMainFrameDockActionHandlerMock,
+  requestDockPopupOpenMock,
+  triggerMainFrameDockActionMock,
+} = vi.hoisted(() => {
   return {
+    executeSetupScriptMock: vi.fn(),
+    registerMainFrameDockActionHandlerMock: vi.fn(),
     requestDockPopupOpenMock: vi.fn(),
+    triggerMainFrameDockActionMock: vi.fn(),
   }
 })
 
 vi.mock('../popup', () => {
   return {
+    registerMainFrameDockActionHandler: registerMainFrameDockActionHandlerMock,
     requestDockPopupOpen: requestDockPopupOpenMock,
+    triggerMainFrameDockAction: triggerMainFrameDockActionMock,
+  }
+})
+
+vi.mock('../setup-script', () => {
+  return {
+    executeSetupScript: executeSetupScriptMock,
   }
 })
 
@@ -43,7 +59,12 @@ function createMockRpc(entries: DevToolsDockEntry[] = []): DevToolsRpcClient {
 
 describe('dock popup entry switching', () => {
   beforeEach(() => {
+    executeSetupScriptMock.mockReset()
+    executeSetupScriptMock.mockResolvedValue(undefined)
+    registerMainFrameDockActionHandlerMock.mockClear()
     requestDockPopupOpenMock.mockClear()
+    triggerMainFrameDockActionMock.mockReset()
+    triggerMainFrameDockActionMock.mockResolvedValue(undefined)
   })
 
   it('routes popup entry through popup request event flow', async () => {
@@ -58,4 +79,77 @@ describe('dock popup entry switching', () => {
     expect(context.panel.store.open).toBe(false)
     expect(context.docks.selectedId).toBeNull()
   })
+
+  it('registers action handler bridge on main frame context', async () => {
+    const actionEntry: DevToolsDockEntry = {
+      type: 'action',
+      id: 'action-main-bridge',
+      title: 'Action',
+      icon: 'test',
+      action: {
+        importFrom: 'test',
+        importName: 'default',
+      },
+    }
+    const rpc = createMockRpc([actionEntry])
+    const context = await createDocksContext('embedded', rpc)
+
+    expect(registerMainFrameDockActionHandlerMock).toHaveBeenCalledTimes(1)
+    const handler = registerMainFrameDockActionHandlerMock.mock.calls[0]?.[0]
+    expect(handler).toBeTypeOf('function')
+
+    const result = await handler?.('action-main-bridge')
+
+    expect(result).toBe(true)
+    expect(executeSetupScriptMock).toHaveBeenCalledTimes(1)
+    expect(context.docks.selectedId).toBe('action-main-bridge')
+  })
+
+  it('delegates popup action click to main frame handler', async () => {
+    triggerMainFrameDockActionMock.mockResolvedValue(true)
+    const actionEntry: DevToolsDockEntry = {
+      type: 'action',
+      id: 'action-popup-delegated',
+      title: 'Action',
+      icon: 'test',
+      action: {
+        importFrom: 'test',
+        importName: 'default',
+      },
+    }
+    const rpc = createMockRpc([actionEntry])
+    const context = await createDocksContext('embedded', rpc)
+
+    const result = await context.docks.switchEntry('action-popup-delegated')
+
+    expect(result).toBe(true)
+    expect(triggerMainFrameDockActionMock).toHaveBeenCalledWith('action-popup-delegated')
+    expect(executeSetupScriptMock).not.toHaveBeenCalled()
+    expect(context.panel.store.open).toBe(false)
+    expect(context.docks.selectedId).toBeNull()
+  })
+
+  it('falls back to local action handler when main frame delegation is unavailable', async () => {
+    triggerMainFrameDockActionMock.mockResolvedValue(undefined)
+    const actionEntry: DevToolsDockEntry = {
+      type: 'action',
+      id: 'action-popup-fallback',
+      title: 'Action',
+      icon: 'test',
+      action: {
+        importFrom: 'test',
+        importName: 'default',
+      },
+    }
+    const rpc = createMockRpc([actionEntry])
+    const context = await createDocksContext('embedded', rpc)
+
+    const result = await context.docks.switchEntry('action-popup-fallback')
+
+    expect(result).toBe(true)
+    expect(triggerMainFrameDockActionMock).toHaveBeenCalledWith('action-popup-fallback')
+    expect(executeSetupScriptMock).toHaveBeenCalledTimes(1)
+    expect(context.panel.store.open).toBe(true)
+    expect(context.docks.selectedId).toBe('action-popup-fallback')
+  })
 })

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

@@ -7,7 +7,7 @@ import { computed, markRaw, reactive, ref, toRefs, watchEffect } from 'vue'
 import { BUILTIN_ENTRIES } from '../constants'
 import { docksGroupByCategories } from './dock-settings'
 import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, sharedStateToRef, useDocksEntries } from './docks'
-import { requestDockPopupOpen } from './popup'
+import { registerMainFrameDockActionHandler, requestDockPopupOpen, triggerMainFrameDockAction } from './popup'
 import { executeSetupScript } from './setup-script'
 
 const docksContextByRpc = new WeakMap<DevToolsRpcClient, DocksContext>()
@@ -63,6 +63,13 @@ export async function createDocksContext(
     if (!entry)
       return false
 
+    // If the action is in a popup, delegate to the main frame
+    if (entry.type === 'action') {
+      const delegated = await triggerMainFrameDockAction(entry.id)
+      if (delegated != null)
+        return false
+    }
+
     // If has import script, run it
     if (
       (entry.type === 'action')
@@ -128,6 +135,13 @@ export async function createDocksContext(
     clientType,
   })
 
+  registerMainFrameDockActionHandler(async (id) => {
+    const entry = dockEntries.value.find(e => e.id === id)
+    if (!entry || entry.type !== 'action')
+      return false
+    return switchEntry(entry.id)
+  })
+
   docksContextByRpc.set(rpc, docksContext)
   return docksContext
 }

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

@@ -12,13 +12,15 @@ type ColorMode = 'dark' | 'light'
 interface DockPopupEvents {
   'popup:open-requested': (context: DocksContext) => void
 }
+type MainFrameDockActionHandler = (entryId: string) => Promise<boolean> | boolean
 
 const PANEL_MIN_SIZE = 20
 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)
 const isPopupOpen = shallowRef(false)
@@ -198,6 +200,40 @@ export function isRunningInDockPopupWindow(): boolean {
   return !!window.document?.documentElement?.hasAttribute?.(POPUP_WINDOW_ATTRIBUTE)
 }
 
+export function registerMainFrameDockActionHandler(
+  handler: MainFrameDockActionHandler,
+) {
+  if (typeof window === 'undefined') {
+    return
+  }
+  if (isRunningInDockPopupWindow()) {
+    return
+  }
+  ;(window as Window & { [MAIN_FRAME_ACTION_HANDLER_KEY]?: MainFrameDockActionHandler })[MAIN_FRAME_ACTION_HANDLER_KEY] = handler
+}
+
+export async function triggerMainFrameDockAction(
+  entryId: string,
+): Promise<boolean | undefined> {
+  if (typeof window === 'undefined')
+    return undefined
+  if (!isRunningInDockPopupWindow())
+    return undefined
+
+  try {
+    const opener = window.opener as (Window & { [MAIN_FRAME_ACTION_HANDLER_KEY]?: MainFrameDockActionHandler }) | null
+    if (!opener || opener.closed)
+      return undefined
+    const handler = opener[MAIN_FRAME_ACTION_HANDLER_KEY]
+    if (typeof handler !== 'function')
+      return undefined
+    return await handler(entryId)
+  }
+  catch {
+    return undefined
+  }
+}
+
 export function isDockPopupEntryVisible(): boolean {
   return isDockPopupSupported() && !isPopupOpen.value && !isRunningInDockPopupWindow()
 }

packages/kit/src/constants.ts

@@ -8,7 +8,7 @@ export const DEVTOOLS_DIRNAME = '.devtools'
 export const DEVTOOLS_CONNECTION_META_FILENAME = '.connection.json'
 export const DEVTOOLS_RPC_DUMP_MANIFEST_FILENAME = '.rpc-dump/index.json'
 export const DEVTOOLS_DOCK_IMPORTS_FILENAME = '.client-imports.js'
-export const DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID = '/.devtools/client-imports'
+export const DEVTOOLS_DOCK_IMPORTS_VIRTUAL_ID = '/.devtools-client-imports.js'
 export const DEVTOOLS_RPC_DUMP_DIRNAME = '.rpc-dump'
 
 export const DEFAULT_CATEGORIES_ORDER: Record<string, number> = {