feat(kit)!: refactor client script API, support custom renderer

antfu · antfu · commit 0b678dac06c1 · 2025-11-08T05:33:54.000+09:00
diff --git a/packages/core/playground/vite.config.ts b/packages/core/playground/vite.config.ts
@@ -59,11 +59,12 @@ export default defineConfig({
           ctx.docks.register({
             type: 'custom-render',
             renderer: ctx.utils.createSimpleClientScript((ctx) => {
-              if (!ctx.current.elPanel) {
+              if (!ctx.current.domElements.panel) {
                 // eslint-disable-next-line no-alert
                 alert('No panel element found!')
               }
               const el = document.createElement('div')
+              el.style.padding = '16px'
               el.textContent = 'Hello from custom render dock!'
 
               const btn = document.createElement('button')
@@ -73,7 +74,7 @@ export default defineConfig({
                 alert('Button clicked in custom render dock!')
               }
               el.appendChild(btn)
-              ctx.current.elPanel?.appendChild(el)
+              ctx.current.domElements.panel?.appendChild(el)
             }),
             id: 'custom-render',
             title: 'Custom',
diff --git a/packages/core/src/client/standalone/App.vue b/packages/core/src/client/standalone/App.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DocksContext } from '../webcomponents/state/dock'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { markRaw, useTemplateRef } from 'vue'
 import DockEntries from '../webcomponents/components/DockEntries.vue'
@@ -22,7 +22,7 @@ const context: DocksContext = await createDocksContext(
   rpc,
 )
 
-context.selected ||= context.dockEntries[0] || null
+context.docks.selected ||= context.docks.entries[0] || null
 
 const { selectDockEntry } = useStateHandlers(context)
 </script>
@@ -34,19 +34,19 @@ const { selectDockEntry } = useStateHandlers(context)
         <VitePlus class="w-7 h-7 ma" />
       </div>
       <DockEntries
-        :entries="context.dockEntries"
+        :entries="context.docks.entries"
         class="transition duration-200 p2"
         :is-vertical="false"
-        :selected="context.selected"
+        :selected="context.docks.selected"
         @select="selectDockEntry"
       />
     </div>
     <div>
       <div id="vite-devtools-views-container" ref="viewsContainer" />
       <ViewEntry
-        v-if="context.selected && viewsContainer"
-        :key="context.selected.id"
-        :entry="context.selected"
+        v-if="context.docks.selected && viewsContainer"
+        :key="context.docks.selected.id"
+        :entry="context.docks.selected"
         :context
         :presisted-doms="presistedDoms"
       />
diff --git a/packages/core/src/client/webcomponents/components/Dock.vue b/packages/core/src/client/webcomponents/components/Dock.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DocksContext } from '../state/dock'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { useStateHandlers } from '../state/state'
@@ -8,13 +8,12 @@ import BracketLeft from './icons/BracketLeft.vue'
 import BracketRight from './icons/BracketRight.vue'
 import VitePlusCore from './icons/VitePlusCore.vue'
 
-// Here we directly destructure is as we don't expect context to be changed
 const props = defineProps<{
   context: DocksContext
 }>()
-const context = props.context
 
-const isDragging = defineModel<boolean>('isDragging', { default: false })
+// Here we directly destructure is as we don't expect context to be changed
+const context = props.context
 
 const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
 
@@ -47,6 +46,9 @@ const SNAP_THRESHOLD = 2
 const dockEl = useTemplateRef<HTMLDivElement>('dockEl')
 const anchorEl = useTemplateRef<HTMLDivElement>('anchorEl')
 
+const recalculateCounter = ref(0)
+const isHovering = ref(false)
+
 const windowSize = reactive({
   width: window.innerWidth,
   height: window.innerHeight,
@@ -57,7 +59,7 @@ const mousePosition = reactive({ x: 0, y: 0 })
 function onPointerDown(e: PointerEvent) {
   if (!dockEl.value)
     return
-  isDragging.value = true
+  context.panel.isDragging = true
   const { left, top, width, height } = dockEl.value!.getBoundingClientRect()
   draggingOffset.x = e.clientX - left - width / 2
   draggingOffset.y = e.clientY - top - height / 2
@@ -73,7 +75,7 @@ onMounted(() => {
   })
 
   useEventListener(window, 'pointermove', (e: PointerEvent) => {
-    if (!isDragging.value)
+    if (!context.panel.isDragging)
       return
 
     const store = context.panel.store
@@ -109,10 +111,10 @@ onMounted(() => {
     store.top = snapToPoints(y / window.innerHeight * 100)
   })
   useEventListener(window, 'pointerup', () => {
-    isDragging.value = false
+    context.panel.isDragging = false
   })
   useEventListener(window, 'pointerleave', () => {
-    isDragging.value = false
+    context.panel.isDragging = false
   })
 })
 
@@ -130,9 +132,6 @@ function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
 }
 
-const recalculateCounter = ref(0)
-const isHovering = ref(false)
-
 const anchorPos = computed(() => {
   // eslint-disable-next-line ts/no-unused-expressions
   recalculateCounter.value
@@ -191,7 +190,7 @@ const isMinimized = computed(() => {
     return true
   // @ts-expect-error compatibility
   const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
-  return !isDragging.value
+  return !context.panel.isDragging
     && !context.panel.store.open
     && !isHovering.value
     && !isTouchDevice
@@ -216,7 +215,7 @@ const panelStyle = computed(() => {
     style.opacity = 0
     style.pointerEvents = 'none'
   }
-  if (isDragging.value)
+  if (context.panel.isDragging)
     style.transition = 'none !important'
   return style
 })
@@ -244,7 +243,7 @@ onMounted(() => {
     <div
       v-if="!isSafari"
       id="vite-devtools-glowing"
-      :class="isDragging ? 'op60!' : ''"
+      :class="context.panel.isDragging ? 'op60!' : ''"
     />
     <div
       id="vite-devtools-dock-container"
@@ -267,19 +266,19 @@ onMounted(() => {
           :class="isMinimized ? 'op100' : 'op0'"
         />
         <DockEntries
-          :entries="context.dockEntries"
+          :entries="context.docks.entries"
           class="transition duration-200 flex items-center w-full h-full justify-center"
           :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="context.panel.isVertical"
-          :selected="context.selected"
+          :selected="context.docks.selected"
           @select="selectDockEntry"
         />
       </div>
     </div>
     <slot
       :context="context"
       :dock-el="dockEl"
-      :selected="context.selected"
+      :selected="context.docks.selected"
       :panel-margins="panelMargins"
     />
   </div>
diff --git a/packages/core/src/client/webcomponents/components/DockEmbedded.ts b/packages/core/src/client/webcomponents/components/DockEmbedded.ts
@@ -1,5 +1,5 @@
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { VueElementConstructor } from 'vue'
-import type { DocksContext } from '../state/dock'
 import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './DockEmbedded.vue'
diff --git a/packages/core/src/client/webcomponents/components/DockEmbedded.vue b/packages/core/src/client/webcomponents/components/DockEmbedded.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DocksContext } from '../state/dock'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingTooltip from './FloatingTooltip.vue'
diff --git a/packages/core/src/client/webcomponents/components/DockPanel.vue b/packages/core/src/client/webcomponents/components/DockPanel.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
-import type { DocksContext } from '../state/dock'
 import { useElementBounding, useWindowSize } from '@vueuse/core'
 import { computed, markRaw, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue'
 import { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
@@ -162,7 +162,7 @@ onMounted(() => {
 
 <template>
   <div
-    v-show="context.selected"
+    v-show="context.docks.selected"
     ref="dockPanel"
     class="bg-glass rounded-lg border border-base shadow"
     :style="iframeStyle"
diff --git a/packages/core/src/client/webcomponents/components/DockPanelResizer.vue b/packages/core/src/client/webcomponents/components/DockPanelResizer.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DocksPanelContext } from '../state/dock'
+import type { DocksPanelContext } from '@vitejs/devtools-kit/client'
 import { useEventListener } from '@vueuse/core'
 import { ref, watch } from 'vue'
 
diff --git a/packages/core/src/client/webcomponents/components/ViewCustomRenderer.vue b/packages/core/src/client/webcomponents/components/ViewCustomRenderer.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsViewCustomRender } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
-import type { DocksContext } from '../state/dock'
 import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
@@ -21,7 +21,9 @@ onMounted(() => {
   holder.element.style.outline = 'none'
   Object.assign(holder.element.style, props.divStyle)
 
-  // TODO: send the element
+  const entryState = props.context.docks.getStateById(props.entry.id)
+  if (entryState)
+    entryState.domElements.panel = holder.element
 
   holder.mount(viewFrame.value!)
   isLoading.value = false
diff --git a/packages/core/src/client/webcomponents/components/ViewEntry.vue b/packages/core/src/client/webcomponents/components/ViewEntry.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
-import type { DocksContext } from '../state/dock'
 import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import ViewCustomRenderer from './ViewCustomRenderer.vue'
 import ViewIframe from './ViewIframe.vue'
diff --git a/packages/core/src/client/webcomponents/components/ViewIframe.vue b/packages/core/src/client/webcomponents/components/ViewIframe.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
+import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { CSSProperties } from 'vue'
-import type { DocksContext } from '../state/dock'
 import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
@@ -24,6 +24,10 @@ onMounted(() => {
   if (!holder.element.src)
     holder.element.src = props.entry.url
 
+  const entryState = props.context.docks.getStateById(props.entry.id)
+  if (entryState)
+    entryState.domElements.iframe = holder.element
+
   holder.mount(viewFrame.value!)
   isLoading.value = false
   nextTick(() => {
diff --git a/packages/core/src/client/webcomponents/state/dock.ts b/packages/core/src/client/webcomponents/state/dock.ts
@@ -1,18 +1,8 @@
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
+import type { DevToolsRpcClient, DockEntryState, DockPanelStorage, DocksContext } from '@vitejs/devtools-kit/client'
 import type { Ref } from 'vue'
 import { computed, reactive, ref, shallowRef } from 'vue'
 
-export interface DockPanelStorage {
-  width: number
-  height: number
-  top: number
-  left: number
-  position: 'left' | 'right' | 'bottom' | 'top'
-  open: boolean
-  inactiveTimeout: number
-}
-
 export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   return {
     width: 80,
@@ -25,29 +15,29 @@ export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   }
 }
 
-export interface DocksContext {
-  readonly clientType: 'embedded' | 'standalone'
-  readonly rpc: DevToolsRpcClient
-  panel: DocksPanelContext
-  dockEntries: DevToolsDockEntry[]
-  selected: DevToolsDockEntry | null
-}
-
-export interface DocksPanelContext {
-  store: DockPanelStorage
-  isDragging: boolean
-  isResizing: boolean
-  readonly isVertical: boolean
-}
-
 export async function createDocksContext(
   clientType: 'embedded' | 'standalone',
   rpc: DevToolsRpcClient,
   panelStore?: Ref<DockPanelStorage>,
 ): Promise<DocksContext> {
+  const selected = ref<DevToolsDockEntry | null>(null)
   const dockEntries = shallowRef((await rpc['vite:core:list-dock-entries']()).map(entry => Object.freeze(entry)))
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] Docks Entries', [...dockEntries.value])
+  // TODO: get board case from rpc when entries updates
+  const dockEntryStateMap = reactive(new Map<string, DockEntryState>())
+  for (const entry of dockEntries.value) {
+    dockEntryStateMap.set(
+      entry.id,
+      reactive({
+        entryMeta: entry,
+        get isActive() {
+          return selected.value?.id === entry.id
+        },
+        domElements: {},
+      }),
+    )
+  }
 
   panelStore ||= ref(DEFAULT_DOCK_PANEL_STORE())
 
@@ -58,9 +48,25 @@ export async function createDocksContext(
       isResizing: false,
       isVertical: computed(() => panelStore.value.position === 'left' || panelStore.value.position === 'right'),
     },
-    dockEntries,
+    docks: {
+      selected,
+      entries: dockEntries.value,
+      entryToStateMap: dockEntryStateMap,
+      getStateById: (id: string) => dockEntryStateMap.get(id),
+      switchEntry: async (id: string | null) => {
+        if (id === null) {
+          selected.value = null
+          return true
+        }
+        const entry = dockEntries.value.find(e => e.id === id)
+        if (!entry)
+          return false
+        selected.value = entry
+        // TODO: run action
+        return true
+      },
+    },
     rpc,
     clientType,
-    selected: null,
   })
 }
diff --git a/packages/core/src/client/webcomponents/state/state.ts b/packages/core/src/client/webcomponents/state/state.ts
diff --git a/packages/kit/src/client/client-script.ts b/packages/kit/src/client/client-script.ts
diff --git a/packages/kit/src/client/docks.ts b/packages/kit/src/client/docks.ts
diff --git a/packages/kit/src/client/index.ts b/packages/kit/src/client/index.ts
