Skip to content

Commit f73b7d7

Browse files
antfuantfu
committed
feat(kit): improve standalone ui and dock
1 parent abe0359 commit f73b7d7

14 files changed

Lines changed: 279 additions & 115 deletions

File tree

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

Lines changed: 31 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,11 @@ import type { DevToolsDockState } from '../webcomponents/components/DockProps'
33
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
44
import { useLocalStorage } from '@vueuse/core'
55
import { computed, markRaw, ref, useTemplateRef, watchEffect } from 'vue'
6-
import Dock from '../webcomponents/components/Dock.vue'
6+
import DockEntries from '../webcomponents/components/DockEntries.vue'
7+
import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
78
import { IframeManager } from '../webcomponents/components/IframeManager'
89
import ViewEntry from '../webcomponents/components/ViewEntry.vue'
10+
import { useStateHandlers } from '../webcomponents/state/state'
911
1012
const { rpc } = await getDevToolsRpcClient()
1113
@@ -39,22 +41,35 @@ watchEffect(() => {
3941
4042
const isDragging = ref(false)
4143
const entry = computed(() => state.value.dockEntry || docks[0])
44+
45+
const { selectDockEntry } = useStateHandlers(state)
4246
</script>
4347

4448
<template>
45-
<div id="iframes-container" ref="iframesContainer" />
46-
<Dock
47-
v-model:is-dragging="isDragging"
48-
:state="state"
49-
:docks="docks"
50-
/>
51-
<ViewEntry
52-
v-if="entry && iframesContainer"
53-
:key="entry.id"
54-
:state="state"
55-
:entry="entry"
56-
:is-dragging="isDragging"
57-
:is-resizing="false"
58-
:iframes="iframes"
59-
/>
49+
<div class="h-screen w-screen of-hidden grid cols-[max-content_1fr]">
50+
<div class="border-r border-base flex flex-col">
51+
<div class="p2 border-b border-base flex">
52+
<VitePlus class="w-7 h-7 ma" />
53+
</div>
54+
<DockEntries
55+
:entries="docks"
56+
class="transition duration-200 p2"
57+
:is-vertical="false"
58+
:selected="state.dockEntry"
59+
@select="selectDockEntry"
60+
/>
61+
</div>
62+
<div>
63+
<div id="iframes-container" ref="iframesContainer" />
64+
<ViewEntry
65+
v-if="entry && iframesContainer"
66+
:key="entry.id"
67+
:state="state"
68+
:entry="entry"
69+
:is-dragging="isDragging"
70+
:is-resizing="false"
71+
:iframes="iframes"
72+
/>
73+
</div>
74+
</div>
6075
</template>

‎packages/core/src/client/standalone/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
<title>Vite DevTools</title>
77
<meta name="description" content="Vite DevTools" />
88
</head>
9-
<body class="font-sans dark:text-white dark:bg-hex-121212">
9+
<body class="font-sans dark:text-white dark:bg-black">
1010
<div id="app"></div>
1111
<script type="module" src="./main.ts"></script>
1212
</body>

‎packages/core/src/client/webcomponents/.generated/css.ts‎

Lines changed: 1 addition & 1 deletion
Large diffs are not rendered by default.

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

Lines changed: 6 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script setup lang="ts">
2-
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
3-
import type { ImportScriptContext } from '@vitejs/devtools-kit/client'
42
import type { DockProps } from './DockProps'
53
import { useEventListener, useScreenSafeArea } from '@vueuse/core'
64
import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
5+
import { useStateHandlers } from '../state/state'
76
import DockEntries from './DockEntries.vue'
87
import BracketLeft from './icons/BracketLeft.vue'
98
import BracketRight from './icons/BracketRight.vue'
@@ -218,64 +217,7 @@ const panelStyle = computed(() => {
218217
return style
219218
})
220219
221-
function importScript(entry: DevToolsDockEntry): Promise<(context: ImportScriptContext) => void | Promise<void>> {
222-
const id = entry.id
223-
return import(/* @vite-ignore */ ['/.devtools', 'imports'].join('-'))
224-
.then((module) => {
225-
const importsMap = module.importsMap as Record<string, () => Promise<() => void>>
226-
const importFn = importsMap[id]
227-
if (!importFn) {
228-
return Promise.reject(new Error(`[VITE DEVTOOLS] No import found for id: ${id}`))
229-
}
230-
return importFn()
231-
})
232-
.catch((error) => {
233-
// TODO: maybe popup a error toast here?
234-
// TODO: A unified logger API
235-
console.error('[VITE DEVTOOLS] Error executing import action', error)
236-
return Promise.reject(error)
237-
})
238-
}
239-
240-
function onSelected(entry?: DevToolsDockEntry) {
241-
if (!entry) {
242-
state.value.open = false
243-
state.value.dockEntry = undefined
244-
return
245-
}
246-
247-
const scriptContext: ImportScriptContext = reactive({
248-
dockEntry: entry,
249-
// @ts-expect-error cast for unwraping
250-
dockState: computed<'active' | 'inactive'>({
251-
get() {
252-
return state.value.dockEntry?.id === entry.id ? 'active' : 'inactive'
253-
},
254-
set(val) {
255-
if (val === 'active')
256-
state.value.dockEntry = entry
257-
else if (state.value.dockEntry?.id === entry.id)
258-
state.value.dockEntry = undefined
259-
},
260-
}),
261-
hidePanel() {
262-
state.value.open = false
263-
},
264-
})
265-
266-
// If it's an action, run and return (early exit)
267-
if (entry?.type === 'action') {
268-
return importScript(entry).then(fn => fn(scriptContext))
269-
}
270-
271-
state.value.dockEntry = entry
272-
state.value.open = true
273-
274-
// If has import script, run it
275-
if (entry.import) {
276-
importScript(entry).then(fn => fn(scriptContext))
277-
}
278-
}
220+
const { selectDockEntry } = useStateHandlers(state)
279221
280222
onMounted(() => {
281223
bringUp()
@@ -298,7 +240,7 @@ onMounted(() => {
298240
<div
299241
v-if="!isSafari"
300242
id="vite-devtools-glowing"
301-
:style="isDragging ? 'opacity: 0.6 !important' : ''"
243+
:class="isDragging ? 'op60!' : ''"
302244
/>
303245
<div
304246
id="vite-devtools-dock-container"
@@ -322,18 +264,19 @@ onMounted(() => {
322264
/>
323265
<DockEntries
324266
:entries="docks"
325-
class="transition duration-200"
267+
class="transition duration-200 flex items-center w-full h-full justify-center"
326268
:class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
327269
:is-vertical="isVertical"
328270
:selected="state.dockEntry"
329-
@select="onSelected"
271+
@select="selectDockEntry"
330272
/>
331273
</div>
332274
</div>
333275
<slot
334276
:dock-el="dockEl"
335277
:panel-margins="panelMargins"
336278
:state="state"
279+
:is-dragging="isDragging"
337280
:entry="state.dockEntry?.type === 'action' ? undefined : state.dockEntry"
338281
/>
339282
</div>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ defineProps<{
1616
:state="state"
1717
:docks="docks"
1818
>
19-
<template #default="{ dockEl, entry, panelMargins }">
19+
<template #default="{ dockEl, entry, panelMargins, isDragging }">
2020
<DockPanel
2121
:dock-el="dockEl!"
2222
:state="state"
23+
:is-dragging="isDragging"
2324
:panel-margins="panelMargins"
2425
:entry="entry"
2526
/>

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

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
2424
</script>
2525

2626
<template>
27-
<div
28-
class="vite-devtools-dock-entries flex items-center w-full h-full justify-center transition-opacity duration-300"
29-
>
27+
<div>
3028
<DockEntry
3129
v-for="dock of entries"
3230
:key="dock.id"

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
<script setup lang="ts">
22
import { computed } from 'vue'
3+
import VitePlusCore from './icons/VitePlusCore.vue'
34
45
const props = defineProps<{
56
icon: string
67
title?: string
78
}>()
89
910
function getIconUrl(str: string, color: 'dark' | 'light') {
10-
if (str.includes('/'))
11+
if (str.includes('/') || str.startsWith('data:') || str.startsWith('builtin:'))
1112
return str
1213
const match = str.match(/^([\w-]+):([\w-]+)$/)
1314
if (match) {
@@ -26,7 +27,8 @@ const icon = computed(() => {
2627
</script>
2728

2829
<template>
29-
<picture>
30+
<VitePlusCore v-if="icon.light === 'builtin:vite-plus-core'" />
31+
<picture v-else>
3032
<source :srcset="icon.dark" media="(prefers-color-scheme: dark)">
3133
<source :srcset="icon.light" media="(prefers-color-scheme: light)">
3234
<img

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

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,11 @@ const props = defineProps<{
1616
}>()
1717
1818
const { state, entry, panelMargins } = toRefs(props)
19+
const windowSize = reactive(useWindowSize())
20+
const isResizing = ref(false)
21+
const isHovering = ref(false)
22+
const isDragging = defineModel<boolean>('isDragging', { default: false })
23+
const mousePosition = reactive({ x: 0, y: 0 })
1924
2025
const dockPanel = useTemplateRef<HTMLDivElement>('dockPanel')
2126
const iframesContainer = useTemplateRef<HTMLDivElement>('iframesContainer')
@@ -26,13 +31,6 @@ watchEffect(() => {
2631
iframes.setContainer(iframesContainer.value!)
2732
}, { flush: 'sync' })
2833
29-
const windowSize = reactive(useWindowSize())
30-
const isDragging = ref(false)
31-
const isResizing = ref(false)
32-
const isHovering = ref(false)
33-
34-
const mousePosition = reactive({ x: 0, y: 0 })
35-
3634
function clamp(value: number, min: number, max: number) {
3735
return Math.min(Math.max(value, min), max)
3836
}
@@ -165,7 +163,6 @@ onMounted(() => {
165163
<template>
166164
<div
167165
v-show="entry"
168-
id="vite-devtools-dock-panel"
169166
ref="dockPanel"
170167
class="bg-glass rounded-lg border border-base shadow"
171168
:style="iframeStyle"
@@ -187,7 +184,6 @@ onMounted(() => {
187184
:iframe-style="{
188185
border: '1px solid #8883',
189186
borderRadius: '0.5rem',
190-
zIndex: '2147483645',
191187
}"
192188
rounded
193189
/>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ watchEffect(() => {
7676
<template>
7777
<div
7878
v-if="box.text"
79-
class="vite-devtools-floating-title z-[2147483645] text-xs transition-all duration-300 w-max bg-glass border border-base rounded px2 fixed p1"
79+
class="z-floating-tooltip text-xs transition-all duration-300 w-max bg-glass border border-base rounded px2 fixed p1"
8080
:class="current ? 'op100' : 'op0 pointer-events-none'"
8181
:style="style"
8282
>

0 commit comments

Comments
 (0)