feat(core): refactor vue internals data structure

Author: antfu

packages/core/playground/vite.config.ts

@@ -47,14 +47,38 @@ export default defineConfig({
 
           ctx.docks.register({
             type: 'action',
-            action: ctx.utils.clientEntryFromSimpleFunction(() => {
+            action: ctx.utils.createSimpleClientScript(() => {
               // eslint-disable-next-line no-alert
               alert('Hello, world!')
             }),
             id: 'local2',
             title: 'Local2',
             icon: 'ph:bell-simple-ringing-duotone',
           })
+
+          ctx.docks.register({
+            type: 'custom-render',
+            renderer: ctx.utils.createSimpleClientScript((ctx) => {
+              if (!ctx.current.elPanel) {
+                // eslint-disable-next-line no-alert
+                alert('No panel element found!')
+              }
+              const el = document.createElement('div')
+              el.textContent = 'Hello from custom render dock!'
+
+              const btn = document.createElement('button')
+              btn.textContent = 'Click me'
+              btn.onclick = () => {
+                // eslint-disable-next-line no-alert
+                alert('Button clicked in custom render dock!')
+              }
+              el.appendChild(btn)
+              ctx.current.elPanel?.appendChild(el)
+            }),
+            id: 'custom-render',
+            title: 'Custom',
+            icon: 'ph:newspaper-clipping-duotone',
+          })
         },
       },
     },

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

@@ -1,8 +1,10 @@
 /// <reference types="vite/client" />
 /// <reference lib="dom" />
 
+import type { DockPanelState } from '../webcomponents'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useLocalStorage } from '@vueuse/core'
+import { createDockContext } from '../webcomponents'
 
 export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
@@ -13,15 +15,11 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC', rpc)
 
-  const docks = await rpc['vite:core:list-dock-entries']()
-  // eslint-disable-next-line no-console
-  console.log('[VITE DEVTOOLS] Docks', docks)
-
   const rpcFunctions = await rpc['vite:core:list-rpc-functions']()
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC Functions', rpcFunctions)
 
-  const state = useLocalStorage(
+  const state = useLocalStorage<DockPanelState>(
     'vite-devtools-dock-state',
     {
       width: 80,
@@ -35,15 +33,17 @@ export async function init(): Promise<void> {
     { mergeDefaults: true },
   )
 
+  const context = await createDockContext(
+    'embedded',
+    rpc,
+    state,
+  )
+
   const { DockEmbedded } = import.meta.env.VITE_DEVTOOLS_LOCAL_DEV
     ? await import('../webcomponents')
     : await import('@vitejs/devtools/client/webcomponents')
 
-  const dockEl = new DockEmbedded({
-    state,
-    docks,
-    rpc,
-  })
+  const dockEl = new DockEmbedded({ context })
   document.body.appendChild(dockEl)
 }
 

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DevToolsDockState } from '../webcomponents/types/DockProps'
+import type { DockContext } from '../webcomponents/state/dock'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import { useLocalStorage } from '@vueuse/core'
-import { computed, markRaw, ref, shallowRef, useTemplateRef } from 'vue'
+import { markRaw, useTemplateRef } from 'vue'
 import DockEntries from '../webcomponents/components/DockEntries.vue'
 import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
 import ViewEntry from '../webcomponents/components/ViewEntry.vue'
+import { createDockContext } from '../webcomponents/state/dock'
 import { useStateHandlers } from '../webcomponents/state/state'
 import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
 
@@ -14,31 +14,17 @@ const { rpc } = await getDevToolsRpcClient()
 // eslint-disable-next-line no-console
 console.log('[VITE DEVTOOLS] RPC', rpc)
 
-const docks = shallowRef(await rpc['vite:core:list-dock-entries']())
-// eslint-disable-next-line no-console
-console.log('[VITE DEVTOOLS] Docks', docks)
-
-const state = useLocalStorage<DevToolsDockState>(
-  'vite-devtools-dock-state',
-  {
-    width: 80,
-    height: 80,
-    top: 0,
-    left: 0,
-    position: 'left',
-    open: false,
-    minimizePanelInactive: 3_000,
-  },
-  { mergeDefaults: true },
-)
-
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
 const presistedDoms = markRaw(new PresistedDomViewsManager(viewsContainer))
 
-const isDragging = ref(false)
-const entry = computed(() => state.value.dockEntry || docks.value[0])
+const context: DockContext = await createDockContext(
+  'standalone',
+  rpc,
+)
+
+context.selected ||= context.dockEntries[0] || null
 
-const { selectDockEntry } = useStateHandlers(state, docks, rpc, 'standalone')
+const { selectDockEntry } = useStateHandlers(context)
 </script>
 
 <template>
@@ -48,22 +34,20 @@ const { selectDockEntry } = useStateHandlers(state, docks, rpc, 'standalone')
         <VitePlus class="w-7 h-7 ma" />
       </div>
       <DockEntries
-        :entries="docks"
+        :entries="context.dockEntries"
         class="transition duration-200 p2"
         :is-vertical="false"
-        :selected="state.dockEntry"
+        :selected="context.selected"
         @select="selectDockEntry"
       />
     </div>
     <div>
       <div id="vite-devtools-views-container" ref="viewsContainer" />
       <ViewEntry
-        v-if="entry && viewsContainer"
-        :key="entry.id"
-        :state="state"
-        :entry="entry"
-        :is-dragging="isDragging"
-        :is-resizing="false"
+        v-if="context.selected && viewsContainer"
+        :key="context.selected.id"
+        :entry="context.selected"
+        :context
         :presisted-doms="presistedDoms"
       />
     </div>

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

@@ -1,16 +1,18 @@
 <script setup lang="ts">
-import type { DockProps } from '../types/DockProps'
+import type { DockContext } from '../state/dock'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
-import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
+import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { useStateHandlers } from '../state/state'
 import DockEntries from './DockEntries.vue'
 import BracketLeft from './icons/BracketLeft.vue'
 import BracketRight from './icons/BracketRight.vue'
 import VitePlusCore from './icons/VitePlusCore.vue'
 
-const props = defineProps<DockProps>()
-
-const { state, docks } = toRefs(props)
+// Here we directly destructure is as we don't expect context to be changed
+const props = defineProps<{
+  context: DockContext
+}>()
+const context = props.context
 
 const isDragging = defineModel<boolean>('isDragging', { default: false })
 
@@ -94,16 +96,16 @@ onMounted(() => {
     const BL = Math.atan2(window.innerHeight - HORIZONTAL_MARGIN - centerY, 0 - centerX)
     const BR = Math.atan2(window.innerHeight - HORIZONTAL_MARGIN - centerY, window.innerWidth - centerX)
 
-    state.value.position = deg >= TL && deg <= TR
+    context.state.position = deg >= TL && deg <= TR
       ? 'top'
       : deg >= TR && deg <= BR
         ? 'right'
         : deg >= BR && deg <= BL
           ? 'bottom'
           : 'left'
 
-    state.value.left = snapToPoints(x / window.innerWidth * 100)
-    state.value.top = snapToPoints(y / window.innerHeight * 100)
+    context.state.left = snapToPoints(x / window.innerWidth * 100)
+    context.state.top = snapToPoints(y / window.innerHeight * 100)
   })
   useEventListener(window, 'pointerup', () => {
     isDragging.value = false
@@ -129,7 +131,7 @@ function clamp(value: number, min: number, max: number) {
 
 const recalculateCounter = ref(0)
 const isHovering = ref(false)
-const isVertical = computed(() => state.value.position === 'left' || state.value.position === 'right')
+const isVertical = computed(() => context.state.position === 'left' || context.state.position === 'right')
 
 const anchorPos = computed(() => {
   // eslint-disable-next-line ts/no-unused-expressions
@@ -138,10 +140,10 @@ const anchorPos = computed(() => {
   const halfWidth = (dockEl.value?.clientWidth || 0) / 2
   const halfHeight = (dockEl.value?.clientHeight || 0) / 2
 
-  const left = state.value.left * windowSize.width / 100
-  const top = state.value.top * windowSize.height / 100
+  const left = context.state.left * windowSize.width / 100
+  const top = context.state.top * windowSize.height / 100
 
-  switch (state.value.position) {
+  switch (context.state.position) {
     case 'top':
       return {
         left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
@@ -169,29 +171,29 @@ const anchorPos = computed(() => {
 let _timer: ReturnType<typeof setTimeout> | null = null
 function bringUp() {
   isHovering.value = true
-  if (state.value.minimizePanelInactive < 0)
+  if (context.state.minimizePanelInactive < 0)
     return
   if (_timer)
     clearTimeout(_timer)
   _timer = setTimeout(() => {
     isHovering.value = false
-  }, +state.value.minimizePanelInactive || 0)
+  }, +context.state.minimizePanelInactive || 0)
 }
 
 const isHidden = computed(() => false)
 
 const isMinimized = computed(() => {
-  if (state.value.minimizePanelInactive < 0)
+  if (context.state.minimizePanelInactive < 0)
     return false
-  if (state.value.minimizePanelInactive === 0)
+  if (context.state.minimizePanelInactive === 0)
     return true
   // @ts-expect-error compatibility
   const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
   return !isDragging.value
-    && !state.value.open
+    && !context.state.open
     && !isHovering.value
     && !isTouchDevice
-    && state.value.minimizePanelInactive
+    && context.state.minimizePanelInactive
 })
 
 const anchorStyle = computed(() => {
@@ -217,7 +219,7 @@ const panelStyle = computed(() => {
   return style
 })
 
-const { selectDockEntry } = useStateHandlers(state, docks, props.rpc, 'embedded')
+const { selectDockEntry } = useStateHandlers(context)
 
 onMounted(() => {
   bringUp()
@@ -263,21 +265,20 @@ onMounted(() => {
           :class="isMinimized ? 'op100' : 'op0'"
         />
         <DockEntries
-          :entries="docks"
+          :entries="context.dockEntries"
           class="transition duration-200 flex items-center w-full h-full justify-center"
           :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="isVertical"
-          :selected="state.dockEntry"
+          :selected="context.selected"
           @select="selectDockEntry"
         />
       </div>
     </div>
     <slot
+      :context="context"
       :dock-el="dockEl"
+      :selected="context.selected"
       :panel-margins="panelMargins"
-      :state="state"
-      :is-dragging="isDragging"
-      :entry="state.dockEntry?.type === 'action' ? undefined : state.dockEntry"
     />
   </div>
 </template>

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

@@ -1,5 +1,5 @@
 import type { VueElementConstructor } from 'vue'
-import type { DockProps } from '../types/DockProps'
+import type { DockContext } from '../state/dock'
 import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './DockEmbedded.vue'
@@ -10,6 +10,8 @@ export const DockEmbedded = defineCustomElement(
     shadowRoot: true,
     styles: [css],
   },
-) as VueElementConstructor<DockProps>
+) as VueElementConstructor<{
+  context: DockContext
+}>
 
 customElements.define('vite-devtools-dock-embedded', DockEmbedded)

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

@@ -1,31 +1,22 @@
 <script setup lang="ts">
-import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
-import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import type { DevToolsDockState } from '../types/DockProps'
+import type { DockContext } from '../state/dock'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingTooltip from './FloatingTooltip.vue'
 
 defineProps<{
-  state: DevToolsDockState
-  docks: DevToolsDockEntry[]
-  rpc: DevToolsRpcClient
+  context: DockContext
 }>()
 </script>
 
 <template>
-  <Dock
-    :state="state"
-    :docks="docks"
-    :rpc="rpc"
-  >
-    <template #default="{ dockEl, entry, panelMargins, isDragging }">
+  <Dock :context>
+    <template #default="{ dockEl, panelMargins, selected }">
       <DockPanel
+        :context
+        :selected
         :dock-el="dockEl!"
-        :state="state"
-        :is-dragging="isDragging"
         :panel-margins="panelMargins"
-        :entry="entry"
       />
     </template>
   </Dock>

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

@@ -4,9 +4,9 @@ import { toRefs } from 'vue'
 import DockEntry from './DockEntry.vue'
 
 const props = defineProps<{
-  selected?: DevToolsDockEntry
-  isVertical: boolean
   entries: DevToolsDockEntry[]
+  selected: DevToolsDockEntry | null
+  isVertical: boolean
 }>()
 
 const emit = defineEmits<{
@@ -30,7 +30,7 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
       :key="dock.id"
       :dock
       :is-selected="selected?.id === dock.id"
-      :is-dimmed="selected && (selected.id !== dock.id)"
+      :is-dimmed="selected ? (selected.id !== dock.id) : false"
       :is-vertical="isVertical"
       @click="toggleDockEntry(dock)"
     />