Skip to content

Commit 4866cb0

Browse files
antfuantfu
committed
refactor
1 parent b4e9f2d commit 4866cb0

10 files changed

Lines changed: 156 additions & 146 deletions

File tree

‎packages/core/src/client/inject/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
import type { DockPanelStorage } from '@vitejs/devtools-kit/client'
55
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
66
import { useLocalStorage } from '@vueuse/core'
7-
import { createDocksContext } from '../webcomponents'
7+
import { createDocksContext } from '../webcomponents/state/context'
88

99
export async function init(): Promise<void> {
1010
// eslint-disable-next-line no-console

‎packages/core/src/client/standalone/App.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import { markRaw, useTemplateRef } from 'vue'
55
import DockEntries from '../webcomponents/components/DockEntries.vue'
66
import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
77
import ViewEntry from '../webcomponents/components/ViewEntry.vue'
8-
import { createDocksContext } from '../webcomponents/state/dock'
9-
import { useStateHandlers } from '../webcomponents/state/state'
8+
import { useStateHandlers } from '../webcomponents/state/__todo-refactor'
9+
import { createDocksContext } from '../webcomponents/state/context'
1010
import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
1111
1212
const rpcReturn = await getDevToolsRpcClient()

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { useEventListener, useScreenSafeArea } from '@vueuse/core'
44
import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
5-
import { useStateHandlers } from '../state/state'
5+
import { useStateHandlers } from '../state/__todo-refactor'
66
import DockEntries from './DockEntries.vue'
77
import BracketLeft from './icons/BracketLeft.vue'
88
import BracketRight from './icons/BracketRight.vue'

‎packages/core/src/client/webcomponents/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
export * from './components/DockEmbedded'
2-
export * from './state/dock'
2+
export * from './state/docks'
33
export * from './utils/PresistedDomViewsManager'

‎packages/core/src/client/webcomponents/state/__todo-refactor.ts‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
2+
import type { DockClientScriptContext, DocksContext } from '@vitejs/devtools-kit/client'
3+
import { reactive, toRefs } from 'vue'
4+
import { executeSetupScript } from './setup-script'
5+
6+
// TODO: refactor away of this
7+
export function useStateHandlers(
8+
context: DocksContext,
9+
) {
10+
async function selectDockEntry(entry?: DevToolsDockEntry) {
11+
if (!entry) {
12+
context.panel.store.open = false
13+
context.docks.selectedId = null
14+
return
15+
}
16+
if (context.docks.selectedId === entry.id) {
17+
return
18+
}
19+
20+
const current = context.docks.getStateById(entry.id)!
21+
22+
const scriptContext: DockClientScriptContext = reactive({
23+
...toRefs(context) as any,
24+
current,
25+
})
26+
27+
// If has import script, run it
28+
if (
29+
(entry.type === 'action')
30+
|| (entry.type === 'custom-render')
31+
|| (entry.type === 'iframe' && entry.clientScript)
32+
) {
33+
await executeSetupScript(entry, scriptContext)
34+
}
35+
36+
context.docks.selectedId = entry.id
37+
context.panel.store.open = true
38+
}
39+
40+
return {
41+
selectDockEntry,
42+
}
43+
}

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

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import type { ClientRpcReturn, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
2+
import type { Ref } from 'vue'
3+
import { computed, markRaw, reactive, ref, watchEffect } from 'vue'
4+
import { createDockEntryState, DEFAULT_DOCK_PANEL_STORE, useDocksEntries } from './docks'
5+
6+
let _docksContext: DocksContext | undefined
7+
export async function createDocksContext(
8+
clientType: 'embedded' | 'standalone',
9+
rpcReturn: ClientRpcReturn,
10+
panelStore?: Ref<DockPanelStorage>,
11+
): Promise<DocksContext> {
12+
if (_docksContext) {
13+
return _docksContext
14+
}
15+
16+
const selectedId = ref<string | null>(null)
17+
const dockEntries = await useDocksEntries(rpcReturn)
18+
const selected = computed(() => dockEntries.value.find(entry => entry.id === selectedId.value) ?? null)
19+
20+
const dockEntryStateMap: Map<string, DockEntryState> = reactive(new Map())
21+
watchEffect(() => {
22+
for (const entry of dockEntries.value) {
23+
if (dockEntryStateMap.has(entry.id)) {
24+
dockEntryStateMap.get(entry.id)!.entryMeta = entry
25+
continue
26+
}
27+
dockEntryStateMap.set(
28+
entry.id,
29+
createDockEntryState(entry, selected),
30+
)
31+
}
32+
})
33+
34+
panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE())
35+
36+
_docksContext = reactive({
37+
panel: {
38+
store: panelStore,
39+
isDragging: false,
40+
isResizing: false,
41+
isVertical: computed(() => panelStore.value.position === 'left' || panelStore.value.position === 'right'),
42+
},
43+
docks: {
44+
selectedId,
45+
selected,
46+
entries: dockEntries,
47+
entryToStateMap: markRaw(dockEntryStateMap),
48+
getStateById: (id: string) => dockEntryStateMap.get(id),
49+
switchEntry: async (id: string | null) => {
50+
if (id === null) {
51+
selectedId.value = null
52+
return true
53+
}
54+
const entry = dockEntries.value.find(e => e.id === id)
55+
if (!entry)
56+
return false
57+
selectedId.value = entry.id
58+
// TODO: run action
59+
return true
60+
},
61+
},
62+
rpc: rpcReturn.rpc,
63+
clientRpc: rpcReturn.clientRpc,
64+
clientType,
65+
})
66+
67+
return _docksContext
68+
}

packages/core/src/client/webcomponents/state/dock.ts renamed to packages/core/src/client/webcomponents/state/docks.ts

Lines changed: 3 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
2-
import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
2+
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'
5-
import { computed, markRaw, reactive, ref, shallowRef, watch, watchEffect } from 'vue'
5+
import { markRaw, reactive, shallowRef, watch } from 'vue'
66

77
export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
88
return {
@@ -16,7 +16,7 @@ export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
1616
}
1717
}
1818

19-
function createDockEntryState(
19+
export function createDockEntryState(
2020
entry: DevToolsDockEntry,
2121
selected: Ref<DevToolsDockEntry | null>,
2222
): DockEntryState {
@@ -71,67 +71,3 @@ export async function useDocksEntries(rpcReturn: ClientRpcReturn): Promise<Ref<D
7171
await updateDocksEntries()
7272
return dockEntries
7373
}
74-
75-
let _docksContext: DocksContext | undefined
76-
export async function createDocksContext(
77-
clientType: 'embedded' | 'standalone',
78-
rpcReturn: ClientRpcReturn,
79-
panelStore?: Ref<DockPanelStorage>,
80-
): Promise<DocksContext> {
81-
if (_docksContext) {
82-
return _docksContext
83-
}
84-
85-
const selectedId = ref<string | null>(null)
86-
const dockEntries = await useDocksEntries(rpcReturn)
87-
const selected = computed(() => dockEntries.value.find(entry => entry.id === selectedId.value) ?? null)
88-
89-
const dockEntryStateMap: Map<string, DockEntryState> = reactive(new Map())
90-
watchEffect(() => {
91-
for (const entry of dockEntries.value) {
92-
if (dockEntryStateMap.has(entry.id)) {
93-
dockEntryStateMap.get(entry.id)!.entryMeta = entry
94-
continue
95-
}
96-
dockEntryStateMap.set(
97-
entry.id,
98-
createDockEntryState(entry, selected),
99-
)
100-
}
101-
})
102-
103-
panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE())
104-
105-
_docksContext = reactive({
106-
panel: {
107-
store: panelStore,
108-
isDragging: false,
109-
isResizing: false,
110-
isVertical: computed(() => panelStore.value.position === 'left' || panelStore.value.position === 'right'),
111-
},
112-
docks: {
113-
selectedId,
114-
selected,
115-
entries: dockEntries,
116-
entryToStateMap: markRaw(dockEntryStateMap),
117-
getStateById: (id: string) => dockEntryStateMap.get(id),
118-
switchEntry: async (id: string | null) => {
119-
if (id === null) {
120-
selectedId.value = null
121-
return true
122-
}
123-
const entry = dockEntries.value.find(e => e.id === id)
124-
if (!entry)
125-
return false
126-
selectedId.value = entry.id
127-
// TODO: run action
128-
return true
129-
},
130-
},
131-
rpc: rpcReturn.rpc,
132-
clientRpc: rpcReturn.clientRpc,
133-
clientType,
134-
})
135-
136-
return _docksContext
137-
}

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

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
2+
import type { DockClientScriptContext } from '@vitejs/devtools-kit/client'
3+
4+
function _executeSetupScript(
5+
entry: DevToolsDockEntry,
6+
context: DockClientScriptContext,
7+
): Promise<void> {
8+
const id = `${entry.type}:${entry.id}`
9+
return import(/* @vite-ignore */['/.devtools', 'imports'].join('-'))
10+
.then((module) => {
11+
const importsMap = module.importsMap as Record<string, () => Promise<(context: DockClientScriptContext) => void>>
12+
const importFn = importsMap[id]
13+
if (!importFn) {
14+
return Promise.reject(new Error(`[VITE DEVTOOLS] No import found for id: ${id}`))
15+
}
16+
return importFn().then(fn => fn(context))
17+
})
18+
.catch((error) => {
19+
// TODO: maybe popup a error toast here?
20+
// TODO: A unified logger API
21+
console.error('[VITE DEVTOOLS] Error executing import action', error)
22+
return Promise.reject(error)
23+
})
24+
}
25+
const _setupPromises = new Map<string, Promise<void>>()
26+
export function executeSetupScript(
27+
entry: DevToolsDockEntry,
28+
context: DockClientScriptContext,
29+
): Promise<void> {
30+
if (_setupPromises.has(entry.id))
31+
return _setupPromises.get(entry.id)!
32+
const promise = _executeSetupScript(entry, context)
33+
_setupPromises.set(entry.id, promise)
34+
return promise
35+
}

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

Lines changed: 0 additions & 72 deletions
This file was deleted.

‎packages/core/src/node/context.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { DevToolsDockHost } from './host-docks'
77
import { RpcFunctionsHost } from './host-functions'
88
import { DevToolsTerminalHost } from './host-terminals'
99
import { DevToolsViewHost } from './host-views'
10-
import { builtinRpcFunctions } from './rpc'
10+
import { builtinRpcDecalrations } from './rpc'
1111

1212
const debug = Debug('vite:devtools:context')
1313

@@ -38,7 +38,7 @@ export async function createDevToolsContext(
3838
context.terminals = terminalsHost
3939

4040
// Build-in function to list all RPC functions
41-
for (const fn of builtinRpcFunctions) {
41+
for (const fn of builtinRpcDecalrations) {
4242
rpcHost.register(fn)
4343
}
4444

0 commit comments

Comments
 (0)