Skip to content

Commit 50a5138

Browse files
antfuantfu
authored
fix(core): avoid introduce extra attrs in the popup component (#192)
1 parent db4751d commit 50a5138

File tree

5 files changed

+17
-45
lines changed

5 files changed

+17
-45
lines changed

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,11 @@ import { defineCustomElement } from 'vue'
44
import css from '../.generated/css'
55
import Component from './DockStandalone.vue'
66

7-
const forcedColorModeCss = `
8-
:host([data-vite-devtools-color-mode='dark']) {
9-
color-scheme: dark;
10-
}
11-
:host([data-vite-devtools-color-mode='light']) {
12-
color-scheme: light;
13-
}
14-
`
15-
167
export const DockStandalone = defineCustomElement(
178
Component,
189
{
1910
shadowRoot: true,
20-
styles: [css, forcedColorModeCss],
11+
styles: [css],
2112
},
2213
) as VueElementConstructor<{
2314
context: DocksContext

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ watch(
3131
)
3232
3333
const groupedEntries = computed(() => {
34-
if (isDockPopupEntryVisible())
34+
if (isDockPopupEntryVisible('standalone'))
3535
return context.docks.groupedEntries
3636
3737
return filterPopupDockEntry(context.docks.groupedEntries)

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

Lines changed: 7 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,30 @@
11
import type { DocksContext } from '@vitejs/devtools-kit/client'
22
import { afterAll, beforeEach, describe, expect, it, vi } from 'vitest'
33
import { setDocksOverflowPanel, useDocksOverflowPanel } from '../floating-tooltip'
4-
import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, isRunningInDockPopupWindow, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
4+
import { closeDockPopup, filterPopupDockEntry, isDockPopupEntryVisible, isDockPopupSupported, openDockPopup, setDockStandaloneLoaderForTest, useDockPopupWindow, useIsDockPopupOpen } from '../popup'
55

66
const {
77
DockStandaloneElementMock,
88
dockStandaloneCtorCalls,
99
dockElementRemoveMock,
10-
dockElementSetAttributeMock,
1110
} = vi.hoisted(() => {
1211
const dockElementRemoveMock = vi.fn()
13-
const dockElementSetAttributeMock = vi.fn()
1412
const dockStandaloneCtorCalls: Array<{ context: DocksContext }> = []
1513
class DockStandaloneElementMock {
1614
context: DocksContext
1715
remove: () => void
18-
setAttribute: (name: string, value: string) => void
16+
style: Record<string, string>
1917
constructor({ context }: { context: DocksContext }) {
2018
this.context = context
2119
this.remove = dockElementRemoveMock
22-
this.setAttribute = dockElementSetAttributeMock
20+
this.style = {}
2321
dockStandaloneCtorCalls.push({ context })
2422
}
2523
}
2624
return {
2725
DockStandaloneElementMock: DockStandaloneElementMock as unknown as new (props: { context: DocksContext }) => HTMLElement,
2826
dockStandaloneCtorCalls,
2927
dockElementRemoveMock,
30-
dockElementSetAttributeMock,
3128
}
3229
})
3330

@@ -135,7 +132,6 @@ describe('dock popup state', () => {
135132
setDockStandaloneLoaderForTest(async () => DockStandaloneElementMock)
136133
dockStandaloneCtorCalls.length = 0
137134
dockElementRemoveMock.mockClear()
138-
dockElementSetAttributeMock.mockClear()
139135
;(globalThis as { window?: any }).window = {
140136
innerWidth: 1200,
141137
innerHeight: 800,
@@ -149,7 +145,7 @@ describe('dock popup state', () => {
149145

150146
it('returns null when the API is unavailable', async () => {
151147
expect(isDockPopupSupported()).toBe(false)
152-
expect(isDockPopupEntryVisible()).toBe(false)
148+
expect(isDockPopupEntryVisible('embedded')).toBe(false)
153149
const popup = await openDockPopup(createMockContext())
154150
expect(popup).toBeNull()
155151
expect(useIsDockPopupOpen().value).toBe(false)
@@ -160,21 +156,15 @@ describe('dock popup state', () => {
160156
const requestWindow = vi.fn().mockResolvedValue(popup)
161157
;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow }
162158

163-
expect(isDockPopupEntryVisible()).toBe(true)
159+
expect(isDockPopupEntryVisible('embedded')).toBe(true)
164160
await openDockPopup(createMockContext())
165-
expect(isDockPopupEntryVisible()).toBe(false)
161+
expect(isDockPopupEntryVisible('embedded')).toBe(false)
166162
})
167163

168164
it('hides popup entry when running inside popup window', () => {
169165
;(window as Window & { documentPictureInPicture?: unknown }).documentPictureInPicture = { requestWindow: vi.fn() }
170-
;(window as Window & { document?: unknown }).document = {
171-
documentElement: {
172-
hasAttribute: vi.fn((name: string) => name === 'data-vite-devtools-popup-window'),
173-
},
174-
} as any
175166

176-
expect(isRunningInDockPopupWindow()).toBe(true)
177-
expect(isDockPopupEntryVisible()).toBe(false)
167+
expect(isDockPopupEntryVisible('standalone')).toBe(false)
178168
})
179169

180170
it('filters popup entry from grouped entries', () => {
@@ -220,7 +210,6 @@ describe('dock popup state', () => {
220210
expect(appRoot).toBeTruthy()
221211
expect(appRoot.id).toBe('vite-devtools-popup-root')
222212
expect(appRoot.appended).toHaveLength(1)
223-
expect(dockElementSetAttributeMock).toHaveBeenCalledWith('data-vite-devtools-color-mode', 'light')
224213
})
225214

226215
it('hides dock overflow panel when opening popup', async () => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export async function createDocksContext(
6565

6666
// If the action is in a popup, delegate to the main frame
6767
if (entry.type === 'action') {
68-
const delegated = await triggerMainFrameDockAction(entry.id)
68+
const delegated = await triggerMainFrameDockAction(clientType, entry.id)
6969
if (delegated != null)
7070
return false
7171
}
@@ -135,7 +135,7 @@ export async function createDocksContext(
135135
clientType,
136136
})
137137

138-
registerMainFrameDockActionHandler(async (id) => {
138+
registerMainFrameDockActionHandler(clientType, async (id) => {
139139
const entry = dockEntries.value.find(e => e.id === id)
140140
if (!entry || entry.type !== 'action')
141141
return false

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

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const PANEL_MAX_SIZE = 100
1919
const POPUP_MIN_WIDTH = 320
2020
const POPUP_MIN_HEIGHT = 240
2121
const POPUP_DOCK_ID = '~popup'
22-
const POPUP_WINDOW_ATTRIBUTE = 'data-vite-devtools-popup-window'
2322
const MAIN_FRAME_ACTION_HANDLER_KEY = '__VITE_DEVTOOLS_TRIGGER_DOCK_ACTION__'
2423

2524
const popupWindow = shallowRef<Window | null>(null)
@@ -81,9 +80,7 @@ function resolveColorMode(): ColorMode {
8180
}
8281

8382
function applyPopupColorMode(popup: Window, mode: ColorMode) {
84-
popup.document.documentElement?.setAttribute('data-vite-devtools-color-mode', mode)
8583
popup.document.documentElement?.style.setProperty('color-scheme', mode)
86-
popupDockElement?.setAttribute('data-vite-devtools-color-mode', mode)
8784
}
8885

8986
function setupPopupColorModeSync(popup: Window): () => void {
@@ -177,7 +174,6 @@ async function mountStandaloneApp(context: DocksContext, popup: Window) {
177174
].join('\n')
178175

179176
popup.document.title = 'Vite DevTools'
180-
popup.document.documentElement?.setAttribute(POPUP_WINDOW_ATTRIBUTE, '')
181177
popup.document.head?.appendChild(baseStyle)
182178
popup.document.body.textContent = ''
183179

@@ -194,30 +190,26 @@ export function isDockPopupSupported(): boolean {
194190
return !!getDocumentPictureInPicture()?.requestWindow
195191
}
196192

197-
export function isRunningInDockPopupWindow(): boolean {
198-
if (typeof window === 'undefined')
199-
return false
200-
return !!window.document?.documentElement?.hasAttribute?.(POPUP_WINDOW_ATTRIBUTE)
201-
}
202-
203193
export function registerMainFrameDockActionHandler(
194+
clientType: 'embedded' | 'standalone',
204195
handler: MainFrameDockActionHandler,
205196
) {
206197
if (typeof window === 'undefined') {
207198
return
208199
}
209-
if (isRunningInDockPopupWindow()) {
200+
if (clientType === 'standalone') {
210201
return
211202
}
212203
;(window as Window & { [MAIN_FRAME_ACTION_HANDLER_KEY]?: MainFrameDockActionHandler })[MAIN_FRAME_ACTION_HANDLER_KEY] = handler
213204
}
214205

215206
export async function triggerMainFrameDockAction(
207+
clientType: 'embedded' | 'standalone',
216208
entryId: string,
217209
): Promise<boolean | undefined> {
218210
if (typeof window === 'undefined')
219211
return undefined
220-
if (!isRunningInDockPopupWindow())
212+
if (clientType !== 'standalone')
221213
return undefined
222214

223215
try {
@@ -234,8 +226,8 @@ export async function triggerMainFrameDockAction(
234226
}
235227
}
236228

237-
export function isDockPopupEntryVisible(): boolean {
238-
return isDockPopupSupported() && !isPopupOpen.value && !isRunningInDockPopupWindow()
229+
export function isDockPopupEntryVisible(clientType: 'embedded' | 'standalone'): boolean {
230+
return isDockPopupSupported() && !isPopupOpen.value && clientType !== 'standalone'
239231
}
240232

241233
export function filterPopupDockEntry(

0 commit comments

Comments
 (0)