refactor(kit): refactor components

Author: antfu

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

@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type { DevToolsDockState } from '../webcomponents/components/DockProps'
+import type { DevToolsDockState } from '../webcomponents/types/DockProps'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useLocalStorage } from '@vueuse/core'
-import { computed, markRaw, ref, shallowRef, useTemplateRef, watchEffect } from 'vue'
+import { computed, markRaw, ref, shallowRef, useTemplateRef } from 'vue'
 import DockEntries from '../webcomponents/components/DockEntries.vue'
 import VitePlus from '../webcomponents/components/icons/VitePlus.vue'
-import { IframeManager } from '../webcomponents/components/IframeManager'
 import ViewEntry from '../webcomponents/components/ViewEntry.vue'
 import { useStateHandlers } from '../webcomponents/state/state'
+import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
 
 const { rpc } = await getDevToolsRpcClient()
 
@@ -32,12 +32,8 @@ const state = useLocalStorage<DevToolsDockState>(
   { mergeDefaults: true },
 )
 
-const iframes = markRaw(new IframeManager())
-const iframesContainer = useTemplateRef<HTMLDivElement>('iframesContainer')
-
-watchEffect(() => {
-  iframes.setContainer(iframesContainer.value!)
-}, { flush: 'sync' })
+const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
+const presistedDoms = markRaw(new PresistedDomViewsManager(viewsContainer))
 
 const isDragging = ref(false)
 const entry = computed(() => state.value.dockEntry || docks.value[0])
@@ -60,15 +56,15 @@ const { selectDockEntry } = useStateHandlers(state, docks, rpc, 'standalone')
       />
     </div>
     <div>
-      <div id="iframes-container" ref="iframesContainer" />
+      <div id="vite-devtools-views-container" ref="viewsContainer" />
       <ViewEntry
-        v-if="entry && iframesContainer"
+        v-if="entry && viewsContainer"
         :key="entry.id"
         :state="state"
         :entry="entry"
         :is-dragging="isDragging"
         :is-resizing="false"
-        :iframes="iframes"
+        :presisted-doms="presistedDoms"
       />
     </div>
   </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DockProps } from './DockProps'
+import type { DockProps } from '../types/DockProps'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
 import { useStateHandlers } from '../state/state'

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

@@ -1,5 +1,5 @@
 import type { VueElementConstructor } from 'vue'
-import type { DockProps } from './DockProps'
+import type { DockProps } from '../types/DockProps'
 import { defineCustomElement } from 'vue'
 import css from '../.generated/css'
 import Component from './DockEmbedded.vue'

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

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { DevToolsRpcClient } from '@vitejs/devtools-kit/client'
-import type { DevToolsDockState } from './DockProps'
+import type { DevToolsDockState } from '../types/DockProps'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingTooltip from './FloatingTooltip.vue'

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { CSSProperties } from 'vue'
-import type { DevToolsDockState } from './DockProps'
+import type { DevToolsDockState } from '../types/DockProps'
 import { useElementBounding, useWindowSize } from '@vueuse/core'
-import { computed, markRaw, onMounted, reactive, ref, toRefs, useTemplateRef, watchEffect } from 'vue'
+import { computed, markRaw, onMounted, reactive, ref, toRefs, useTemplateRef } from 'vue'
+import { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import DockPanelResizer from './DockPanelResizer.vue'
-import { IframeManager } from './IframeManager'
 import ViewEntry from './ViewEntry.vue'
 
 const props = defineProps<{
@@ -23,13 +23,8 @@ const isDragging = defineModel<boolean>('isDragging', { default: false })
 const mousePosition = reactive({ x: 0, y: 0 })
 
 const dockPanel = useTemplateRef<HTMLDivElement>('dockPanel')
-const iframesContainer = useTemplateRef<HTMLDivElement>('iframesContainer')
-
-const iframes = markRaw(new IframeManager())
-
-watchEffect(() => {
-  iframes.setContainer(iframesContainer.value!)
-}, { flush: 'sync' })
+const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
+const presistedDoms = markRaw(new PresistedDomViewsManager(viewsContainer))
 
 function clamp(value: number, min: number, max: number) {
   return Math.min(Math.max(value, min), max)
@@ -174,22 +169,22 @@ onMounted(() => {
       :entry
     />
     <ViewEntry
-      v-if="entry && iframesContainer"
+      v-if="entry && viewsContainer"
       :key="entry.id"
       :state="state"
       :is-dragging="isDragging"
       :is-resizing="isResizing"
       :entry="entry"
-      :iframes="iframes"
+      :presisted-doms="presistedDoms"
       :iframe-style="{
         border: '1px solid #8883',
         borderRadius: '0.5rem',
       }"
       rounded
     />
     <div
-      id="vite-devtools-iframe-container"
-      ref="iframesContainer"
+      id="vite-devtools-views-container"
+      ref="viewsContainer"
       class="absolute inset-0"
     />
   </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DevToolsDockState } from './DockProps'
+import type { DevToolsDockState } from '../types/DockProps'
 import { toRefs, useEventListener } from '@vueuse/core'
 import { ref, watch } from 'vue'
 

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

@@ -1,16 +1,16 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { CSSProperties } from 'vue'
-import type { DevToolsDockState } from './DockProps'
-import type { IframeManager } from './IframeManager'
+import type { DevToolsDockState } from '../types/DockProps'
+import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import ViewIframe from './ViewIframe.vue'
 
 defineProps<{
   state?: DevToolsDockState
   isDragging: boolean
   isResizing: boolean
   entry: DevToolsDockEntry
-  iframes: IframeManager
+  presistedDoms: PresistedDomViewsManager
   iframeStyle?: CSSProperties
 }>()
 </script>
@@ -22,7 +22,7 @@ defineProps<{
     :is-dragging="isDragging"
     :is-resizing="isResizing"
     :entry="entry"
-    :iframes="iframes"
+    :presisted-doms="presistedDoms"
     :iframe-style="iframeStyle"
   />
   <div v-else>

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

@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import type { DevToolsViewIframe } from '@vitejs/devtools-kit'
 import type { CSSProperties } from 'vue'
-import type { DevToolsDockState } from './DockProps'
-import type { IframeManager } from './IframeManager'
+import type { DevToolsDockState } from '../types/DockProps'
+import type { PresistedDomViewsManager } from '../utils/PresistedDomViewsManager'
 import { nextTick, onMounted, onUnmounted, ref, useTemplateRef, watch, watchEffect } from 'vue'
 
 const props = defineProps<{
   state?: DevToolsDockState
   isDragging: boolean
   isResizing: boolean
   entry: DevToolsViewIframe
-  iframes: IframeManager
+  presistedDoms: PresistedDomViewsManager
   iframeStyle?: CSSProperties
 }>()
 
 const isLoading = ref(true)
 const viewFrame = useTemplateRef<HTMLDivElement>('viewFrame')
 
 onMounted(() => {
-  const holder = props.iframes.getIframeHolder(props.entry.id)
-  holder.iframe.style.boxShadow = 'none'
-  holder.iframe.style.outline = 'none'
-  Object.assign(holder.iframe.style, props.iframeStyle)
+  const holder = props.presistedDoms.getOrCreateHolder(props.entry.id, 'iframe')
+  holder.element.style.boxShadow = 'none'
+  holder.element.style.outline = 'none'
+  Object.assign(holder.element.style, props.iframeStyle)
 
-  if (!holder.iframe.src)
-    holder.iframe.src = props.entry.url
+  if (!holder.element.src)
+    holder.element.src = props.entry.url
 
   holder.mount(viewFrame.value!)
   isLoading.value = false
@@ -42,15 +42,15 @@ onMounted(() => {
 
   watchEffect(
     () => {
-      holder.iframe.style.pointerEvents = (props.isDragging || props.isResizing) ? 'none' : 'auto'
+      holder.element.style.pointerEvents = (props.isDragging || props.isResizing) ? 'none' : 'auto'
     },
     { flush: 'sync' },
   )
 })
 
 onUnmounted(() => {
-  const iframe = props.iframes.getIframeHolder(props.entry.id)
-  iframe.unmount()
+  const holder = props.presistedDoms.getHolder(props.entry.id, 'iframe')
+  holder?.unmount()
 })
 </script>
 

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

@@ -1,3 +1,3 @@
 export * from './components/DockEmbedded'
-export * from './components/DockProps'
-export * from './components/IframeManager'
+export * from './types/DockProps'
+export * from './utils/PresistedDomViewsManager'