Skip to content

Commit 0b678da

Browse files
antfuantfu
committed
feat(kit)!: refactor client script API, support custom renderer
1 parent 739fc7c commit 0b678da

15 files changed

Lines changed: 157 additions & 149 deletions

File tree

‎packages/core/playground/vite.config.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,11 +59,12 @@ export default defineConfig({
5959
ctx.docks.register({
6060
type: 'custom-render',
6161
renderer: ctx.utils.createSimpleClientScript((ctx) => {
62-
if (!ctx.current.elPanel) {
62+
if (!ctx.current.domElements.panel) {
6363
// eslint-disable-next-line no-alert
6464
alert('No panel element found!')
6565
}
6666
const el = document.createElement('div')
67+
el.style.padding = '16px'
6768
el.textContent = 'Hello from custom render dock!'
6869

6970
const btn = document.createElement('button')
@@ -73,7 +74,7 @@ export default defineConfig({
7374
alert('Button clicked in custom render dock!')
7475
}
7576
el.appendChild(btn)
76-
ctx.current.elPanel?.appendChild(el)
77+
ctx.current.domElements.panel?.appendChild(el)
7778
}),
7879
id: 'custom-render',
7980
title: 'Custom',

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

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { DocksContext } from '../webcomponents/state/dock'
2+
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
44
import { markRaw, useTemplateRef } from 'vue'
55
import DockEntries from '../webcomponents/components/DockEntries.vue'
@@ -22,7 +22,7 @@ const context: DocksContext = await createDocksContext(
2222
rpc,
2323
)
2424
25-
context.selected ||= context.dockEntries[0] || null
25+
context.docks.selected ||= context.docks.entries[0] || null
2626
2727
const { selectDockEntry } = useStateHandlers(context)
2828
</script>
@@ -34,19 +34,19 @@ const { selectDockEntry } = useStateHandlers(context)
3434
<VitePlus class="w-7 h-7 ma" />
3535
</div>
3636
<DockEntries
37-
:entries="context.dockEntries"
37+
:entries="context.docks.entries"
3838
class="transition duration-200 p2"
3939
:is-vertical="false"
40-
:selected="context.selected"
40+
:selected="context.docks.selected"
4141
@select="selectDockEntry"
4242
/>
4343
</div>
4444
<div>
4545
<div id="vite-devtools-views-container" ref="viewsContainer" />
4646
<ViewEntry
47-
v-if="context.selected && viewsContainer"
48-
:key="context.selected.id"
49-
:entry="context.selected"
47+
v-if="context.docks.selected && viewsContainer"
48+
:key="context.docks.selected.id"
49+
:entry="context.docks.selected"
5050
:context
5151
:presisted-doms="presistedDoms"
5252
/>

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

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { DocksContext } from '../state/dock'
2+
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'
55
import { useStateHandlers } from '../state/state'
@@ -8,13 +8,12 @@ import BracketLeft from './icons/BracketLeft.vue'
88
import BracketRight from './icons/BracketRight.vue'
99
import VitePlusCore from './icons/VitePlusCore.vue'
1010
11-
// Here we directly destructure is as we don't expect context to be changed
1211
const props = defineProps<{
1312
context: DocksContext
1413
}>()
15-
const context = props.context
1614
17-
const isDragging = defineModel<boolean>('isDragging', { default: false })
15+
// Here we directly destructure is as we don't expect context to be changed
16+
const context = props.context
1817
1918
const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
2019
@@ -47,6 +46,9 @@ const SNAP_THRESHOLD = 2
4746
const dockEl = useTemplateRef<HTMLDivElement>('dockEl')
4847
const anchorEl = useTemplateRef<HTMLDivElement>('anchorEl')
4948
49+
const recalculateCounter = ref(0)
50+
const isHovering = ref(false)
51+
5052
const windowSize = reactive({
5153
width: window.innerWidth,
5254
height: window.innerHeight,
@@ -57,7 +59,7 @@ const mousePosition = reactive({ x: 0, y: 0 })
5759
function onPointerDown(e: PointerEvent) {
5860
if (!dockEl.value)
5961
return
60-
isDragging.value = true
62+
context.panel.isDragging = true
6163
const { left, top, width, height } = dockEl.value!.getBoundingClientRect()
6264
draggingOffset.x = e.clientX - left - width / 2
6365
draggingOffset.y = e.clientY - top - height / 2
@@ -73,7 +75,7 @@ onMounted(() => {
7375
})
7476
7577
useEventListener(window, 'pointermove', (e: PointerEvent) => {
76-
if (!isDragging.value)
78+
if (!context.panel.isDragging)
7779
return
7880
7981
const store = context.panel.store
@@ -109,10 +111,10 @@ onMounted(() => {
109111
store.top = snapToPoints(y / window.innerHeight * 100)
110112
})
111113
useEventListener(window, 'pointerup', () => {
112-
isDragging.value = false
114+
context.panel.isDragging = false
113115
})
114116
useEventListener(window, 'pointerleave', () => {
115-
isDragging.value = false
117+
context.panel.isDragging = false
116118
})
117119
})
118120
@@ -130,9 +132,6 @@ function clamp(value: number, min: number, max: number) {
130132
return Math.min(Math.max(value, min), max)
131133
}
132134
133-
const recalculateCounter = ref(0)
134-
const isHovering = ref(false)
135-
136135
const anchorPos = computed(() => {
137136
// eslint-disable-next-line ts/no-unused-expressions
138137
recalculateCounter.value
@@ -191,7 +190,7 @@ const isMinimized = computed(() => {
191190
return true
192191
// @ts-expect-error compatibility
193192
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
194-
return !isDragging.value
193+
return !context.panel.isDragging
195194
&& !context.panel.store.open
196195
&& !isHovering.value
197196
&& !isTouchDevice
@@ -216,7 +215,7 @@ const panelStyle = computed(() => {
216215
style.opacity = 0
217216
style.pointerEvents = 'none'
218217
}
219-
if (isDragging.value)
218+
if (context.panel.isDragging)
220219
style.transition = 'none !important'
221220
return style
222221
})
@@ -244,7 +243,7 @@ onMounted(() => {
244243
<div
245244
v-if="!isSafari"
246245
id="vite-devtools-glowing"
247-
:class="isDragging ? 'op60!' : ''"
246+
:class="context.panel.isDragging ? 'op60!' : ''"
248247
/>
249248
<div
250249
id="vite-devtools-dock-container"
@@ -267,19 +266,19 @@ onMounted(() => {
267266
:class="isMinimized ? 'op100' : 'op0'"
268267
/>
269268
<DockEntries
270-
:entries="context.dockEntries"
269+
:entries="context.docks.entries"
271270
class="transition duration-200 flex items-center w-full h-full justify-center"
272271
:class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
273272
:is-vertical="context.panel.isVertical"
274-
:selected="context.selected"
273+
:selected="context.docks.selected"
275274
@select="selectDockEntry"
276275
/>
277276
</div>
278277
</div>
279278
<slot
280279
:context="context"
281280
:dock-el="dockEl"
282-
:selected="context.selected"
281+
:selected="context.docks.selected"
283282
:panel-margins="panelMargins"
284283
/>
285284
</div>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1+
import type { DocksContext } from '@vitejs/devtools-kit/client'
12
import type { VueElementConstructor } from 'vue'
2-
import type { DocksContext } from '../state/dock'
33
import { defineCustomElement } from 'vue'
44
import css from '../.generated/css'
55
import Component from './DockEmbedded.vue'

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { DocksContext } from '../state/dock'
2+
import type { DocksContext } from '@vitejs/devtools-kit/client'
33
import Dock from './Dock.vue'
44
import DockPanel from './DockPanel.vue'
55
import FloatingTooltip from './FloatingTooltip.vue'

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
3+
import type { DocksContext } from '@vitejs/devtools-kit/client'
34
import type { CSSProperties } from 'vue'
4-
import type { DocksContext } from '../state/dock'
55
import { useElementBounding, useWindowSize } from '@vueuse/core'
66
import { computed, markRaw, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue'
77
import { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
@@ -162,7 +162,7 @@ onMounted(() => {
162162

163163
<template>
164164
<div
165-
v-show="context.selected"
165+
v-show="context.docks.selected"
166166
ref="dockPanel"
167167
class="bg-glass rounded-lg border border-base shadow"
168168
:style="iframeStyle"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang="ts">
2-
import type { DocksPanelContext } from '../state/dock'
2+
import type { DocksPanelContext } from '@vitejs/devtools-kit/client'
33
import { useEventListener } from '@vueuse/core'
44
import { ref, watch } from 'vue'
55

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DevToolsViewCustomRender } from '@vitejs/devtools-kit'
3+
import type { DocksContext } from '@vitejs/devtools-kit/client'
34
import type { CSSProperties } from 'vue'
4-
import type { DocksContext } from '../state/dock'
55
import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
66
import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
77
@@ -21,7 +21,9 @@ onMounted(() => {
2121
holder.element.style.outline = 'none'
2222
Object.assign(holder.element.style, props.divStyle)
2323
24-
// TODO: send the element
24+
const entryState = props.context.docks.getStateById(props.entry.id)
25+
if (entryState)
26+
entryState.domElements.panel = holder.element
2527
2628
holder.mount(viewFrame.value!)
2729
isLoading.value = false

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
3+
import type { DocksContext } from '@vitejs/devtools-kit/client'
34
import type { CSSProperties } from 'vue'
4-
import type { DocksContext } from '../state/dock'
55
import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
66
import ViewCustomRenderer from './ViewCustomRenderer.vue'
77
import ViewIframe from './ViewIframe.vue'

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang="ts">
22
import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
3+
import type { DocksContext } from '@vitejs/devtools-kit/client'
34
import type { CSSProperties } from 'vue'
4-
import type { DocksContext } from '../state/dock'
55
import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
66
import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
77
@@ -24,6 +24,10 @@ onMounted(() => {
2424
if (!holder.element.src)
2525
holder.element.src = props.entry.url
2626
27+
const entryState = props.context.docks.getStateById(props.entry.id)
28+
if (entryState)
29+
entryState.domElements.iframe = holder.element
30+
2731
holder.mount(viewFrame.value!)
2832
isLoading.value = false
2933
nextTick(() => {

0 commit comments

Comments
 (0)