Skip to content

Commit 7731a46

Browse files
antfuantfu
committed
refactor
1 parent b10ce63 commit 7731a46

File tree

10 files changed

+63
-36
lines changed

10 files changed

+63
-36
lines changed

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
11
<script setup lang="ts">
2-
import type { DevToolsDockEntryWithBuiltin } from '@vitejs/devtools-kit'
2+
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
33
import { toRefs } from 'vue'
44
import DockEntry from './DockEntry.vue'
55
66
const props = defineProps<{
7-
entries: DevToolsDockEntryWithBuiltin[]
8-
selected: DevToolsDockEntryWithBuiltin | null
7+
entries: DevToolsDockEntry[]
8+
selected: DevToolsDockEntry | null
99
isVertical: boolean
1010
}>()
1111
1212
const emit = defineEmits<{
13-
(e: 'select', entry: DevToolsDockEntryWithBuiltin): void
13+
(e: 'select', entry: DevToolsDockEntry): void
1414
}>()
1515
1616
const { selected, isVertical, entries } = toRefs(props)
1717
18-
function toggleDockEntry(dock: DevToolsDockEntryWithBuiltin) {
18+
function toggleDockEntry(dock: DevToolsDockEntry) {
1919
if (selected.value?.id === dock.id)
2020
emit('select', undefined!)
2121
else

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

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
33
import type { DocksContext } from '@vitejs/devtools-kit/client'
44
import type { CSSProperties } from 'vue'
55
import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
6+
import ViewBuiltinTerminals from './ViewBuiltinTerminals.vue'
67
import ViewCustomRenderer from './ViewCustomRenderer.vue'
78
import ViewIframe from './ViewIframe.vue'
89
import ViewLauncher from './ViewLauncher.vue'
@@ -17,7 +18,21 @@ defineProps<{
1718
</script>
1819

1920
<template>
20-
<template v-if="entry.type === 'action'" />
21+
<template v-if="entry.type === '~builtin'">
22+
<ViewBuiltinTerminals
23+
v-if="entry.id === '~terminals'"
24+
:context
25+
:entry
26+
/>
27+
<div v-else>
28+
Unknown builtin entry: {{ entry }}
29+
</div>
30+
</template>
31+
32+
<!-- Entry for Actions -->
33+
<template v-else-if="entry.type === 'action'" />
34+
35+
<!-- User-defined entries -->
2136
<ViewIframe
2237
v-else-if="entry.type === 'iframe'"
2338
:context

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,5 +81,5 @@ export async function createDocksContext(
8181
clientType,
8282
})
8383

84-
return _docksContext
84+
return _docksContext!
8585
}

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
1+
import type { DevToolsDockEntry, DevToolsRpcClientFunctions, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
22
import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage } from '@vitejs/devtools-kit/client'
33
import type { Ref, ShallowRef } from 'vue'
44
import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
@@ -16,6 +16,15 @@ export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
1616
}
1717
}
1818

19+
export const builtinDocksEntries: DevToolsViewBuiltin[] = [
20+
Object.freeze({
21+
type: '~builtin',
22+
id: '~terminals',
23+
title: 'Terminals',
24+
icon: 'ph:terminal-duotone',
25+
}),
26+
]
27+
1928
export function createDockEntryState(
2029
entry: DevToolsDockEntry,
2130
selected: Ref<DevToolsDockEntry | null>,
@@ -59,7 +68,10 @@ export async function useDocksEntries(rpcReturn: ClientRpcReturn): Promise<Ref<D
5968
}
6069
const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
6170
async function updateDocksEntries() {
62-
dockEntries.value = (await rpcReturn.rpc.$call('vite:internal:docks:list')).map(entry => Object.freeze(entry))
71+
dockEntries.value = [
72+
...(await rpcReturn.rpc.$call('vite:internal:docks:list')).map(entry => Object.freeze(entry)),
73+
...builtinDocksEntries,
74+
]
6375
// eslint-disable-next-line no-console
6476
console.log('[VITE DEVTOOLS] Docks Entries Updated', [...dockEntries.value])
6577
}

‎packages/core/src/client/webcomponents/state/setup-script.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
1+
import type { DevToolsDockUserEntry } from '@vitejs/devtools-kit'
22
import type { DockClientScriptContext } from '@vitejs/devtools-kit/client'
33

44
function _executeSetupScript(
5-
entry: DevToolsDockEntry,
5+
entry: DevToolsDockUserEntry,
66
context: DockClientScriptContext,
77
): Promise<void> {
88
const id = `${entry.type}:${entry.id}`
@@ -24,7 +24,7 @@ function _executeSetupScript(
2424
}
2525
const _setupPromises = new Map<string, Promise<void>>()
2626
export function executeSetupScript(
27-
entry: DevToolsDockEntry,
27+
entry: DevToolsDockUserEntry,
2828
context: DockClientScriptContext,
2929
): Promise<void> {
3030
if (_setupPromises.has(entry.id))

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ export interface TerminalState {
1010
}
1111

1212
let _terminalsRef: ShallowRef<TerminalState[]> | undefined
13-
export async function useTerminals(context: DocksContext): Promise<Ref<TerminalState[]>> {
13+
export function useTerminals(context: DocksContext): Ref<TerminalState[]> {
1414
if (_terminalsRef) {
1515
return _terminalsRef
1616
}
@@ -31,6 +31,6 @@ export async function useTerminals(context: DocksContext): Promise<Ref<TerminalS
3131
type: 'action',
3232
handler: () => udpateTerminals(),
3333
})
34-
await udpateTerminals()
34+
udpateTerminals()
3535
return terminals
3636
}

‎packages/core/src/node/__tests__/host-docks.test.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DevToolsDockEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
1+
import type { DevToolsDockUserEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
22
import { describe, expect, it } from 'vitest'
33
import { DevToolsDockHost } from '../host-docks'
44

@@ -8,7 +8,7 @@ describe('devToolsDockHost', () => {
88
describe('register() collision detection', () => {
99
it('should register a new dock successfully', () => {
1010
const host = new DevToolsDockHost(mockContext)
11-
const dock: DevToolsDockEntry = {
11+
const dock: DevToolsDockUserEntry = {
1212
type: 'iframe',
1313
id: 'test-dock',
1414
title: 'Test Dock',
@@ -22,14 +22,14 @@ describe('devToolsDockHost', () => {
2222

2323
it('should throw error when registering duplicate dock ID', () => {
2424
const host = new DevToolsDockHost(mockContext)
25-
const dock1: DevToolsDockEntry = {
25+
const dock1: DevToolsDockUserEntry = {
2626
type: 'iframe',
2727
id: 'duplicate-dock',
2828
title: 'First Dock',
2929
icon: 'icon1',
3030
url: 'http://localhost:3001',
3131
}
32-
const dock2: DevToolsDockEntry = {
32+
const dock2: DevToolsDockUserEntry = {
3333
type: 'iframe',
3434
id: 'duplicate-dock',
3535
title: 'Second Dock',
@@ -46,7 +46,7 @@ describe('devToolsDockHost', () => {
4646

4747
it('should include the duplicate ID in error message', () => {
4848
const host = new DevToolsDockHost(mockContext)
49-
const dock: DevToolsDockEntry = {
49+
const dock: DevToolsDockUserEntry = {
5050
type: 'custom-render',
5151
id: 'my-special-panel',
5252
title: 'Special Panel',
@@ -88,7 +88,7 @@ describe('devToolsDockHost', () => {
8888
describe('update() existence validation', () => {
8989
it('should throw error when updating non-existent dock', () => {
9090
const host = new DevToolsDockHost(mockContext)
91-
const dock: DevToolsDockEntry = {
91+
const dock: DevToolsDockUserEntry = {
9292
type: 'iframe',
9393
id: 'nonexistent',
9494
title: 'Does Not Exist',
@@ -104,14 +104,14 @@ describe('devToolsDockHost', () => {
104104

105105
it('should update existing dock successfully', () => {
106106
const host = new DevToolsDockHost(mockContext)
107-
const dock1: DevToolsDockEntry = {
107+
const dock1: DevToolsDockUserEntry = {
108108
type: 'iframe',
109109
id: 'update-test',
110110
title: 'Original Title',
111111
icon: 'original',
112112
url: 'http://localhost:3001',
113113
}
114-
const dock2: DevToolsDockEntry = {
114+
const dock2: DevToolsDockUserEntry = {
115115
type: 'iframe',
116116
id: 'update-test',
117117
title: 'Updated Title',

‎packages/core/src/node/host-docks.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import type { DevToolsDockEntry, DevToolsDockHost as DevToolsDockHostType, DevToolsNodeContext } from '@vitejs/devtools-kit'
1+
import type { DevToolsDockHost as DevToolsDockHostType, DevToolsDockUserEntry, DevToolsNodeContext } from '@vitejs/devtools-kit'
22
import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
33

44
export class DevToolsDockHost implements DevToolsDockHostType {
@@ -10,19 +10,19 @@ export class DevToolsDockHost implements DevToolsDockHostType {
1010
) {
1111
}
1212

13-
values(): DevToolsDockEntry[] {
13+
values(): DevToolsDockUserEntry[] {
1414
return Array.from(this.views.values())
1515
}
1616

17-
register(view: DevToolsDockEntry, force?: boolean): void {
17+
register(view: DevToolsDockUserEntry, force?: boolean): void {
1818
if (this.views.has(view.id) && !force) {
1919
throw new Error(`Dock with id "${view.id}" is already registered`)
2020
}
2121
this.views.set(view.id, view)
2222
this.events.emit('dock:entry:updated', view)
2323
}
2424

25-
update(view: DevToolsDockEntry): void {
25+
update(view: DevToolsDockUserEntry): void {
2626
if (!this.views.has(view.id)) {
2727
throw new Error(`Dock with id "${view.id}" is not registered. Use register() to add new docks.`)
2828
}

‎packages/kit/src/client/docks.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import type { RpcFunctionsCollector } from 'birpc-x'
22
import type { Raw } from 'vue'
3-
import type { DevToolsDockEntry, DevToolsRpcClientFunctions, EventEmitter } from '../types'
3+
import type { DevToolsDockEntry, DevToolsDockUserEntry, DevToolsRpcClientFunctions, EventEmitter } from '../types'
44
import type { DevToolsRpcClient } from './rpc'
55

66
export interface DockPanelStorage {
@@ -83,7 +83,7 @@ export interface DockEntryState {
8383
export interface DockEntryStateEvents {
8484
'entry:activated': () => void
8585
'entry:deactivated': () => void
86-
'entry:updated': (newMeta: DevToolsDockEntry) => void
86+
'entry:updated': (newMeta: DevToolsDockUserEntry) => void
8787
'dom:panel:mounted': (panel: HTMLDivElement) => void
8888
'dom:iframe:mounted': (iframe: HTMLIFrameElement) => void
8989
}

‎packages/kit/src/types/docks.ts‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import type { EventEmitter } from './events'
22

33
export interface DevToolsDockHost {
4-
views: Map<string, DevToolsDockEntry>
4+
views: Map<string, DevToolsDockUserEntry>
55
events: EventEmitter<{
6-
'dock:entry:updated': (entry: DevToolsDockEntry) => void
6+
'dock:entry:updated': (entry: DevToolsDockUserEntry) => void
77
}>
88

9-
register: (entry: DevToolsDockEntry) => void
10-
update: (entry: DevToolsDockEntry) => void
11-
values: () => DevToolsDockEntry[]
9+
register: (entry: DevToolsDockUserEntry) => void
10+
update: (entry: DevToolsDockUserEntry) => void
11+
values: () => DevToolsDockUserEntry[]
1212
}
1313

1414
// TODO: refine categories more clearly
@@ -89,9 +89,9 @@ export interface DevToolsViewCustomRender extends DevToolsDockEntryBase {
8989

9090
export interface DevToolsViewBuiltin extends DevToolsDockEntryBase {
9191
type: '~builtin'
92-
name: '~terminals' | '~logs'
92+
id: '~terminals' | '~logs'
9393
}
9494

95-
export type DevToolsDockEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender | DevToolsViewLauncher
95+
export type DevToolsDockUserEntry = DevToolsViewIframe | DevToolsViewAction | DevToolsViewCustomRender | DevToolsViewLauncher
9696

97-
export type DevToolsDockEntryWithBuiltin = DevToolsDockEntry | DevToolsViewBuiltin
97+
export type DevToolsDockEntry = DevToolsDockUserEntry | DevToolsViewBuiltin

0 commit comments

Comments
 (0)