fix(core): standalone mode plugins injection

Author: antfu

packages/core/package.json

@@ -45,6 +45,7 @@
     "dev:standalone": "cd src/client/standalone && vite dev",
     "prepack": "pnpm build",
     "play": "DEBUG='vite:devtools:*' pnpm -C playground run dev",
+    "play:standlone": "DEBUG='vite:devtools:*' pnpm -C playground run dev:standalone",
     "cli": "DEBUG='vite:devtools:*' tsx src/node/cli.ts",
     "play:build": "pnpm -C playground run build"
   },

packages/core/playground/package.json

@@ -5,6 +5,7 @@
   "private": true,
   "scripts": {
     "dev": "VITE_DEVTOOLS_LOCAL_DEV=true vite",
+    "dev:standlone": "DEBUG='vite:devtools:*' VITE_DEVTOOLS_LOCAL_DEV=true tsx ../src/node/cli.ts",
     "build": "vite build && vite-devtools"
   }
 }

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

@@ -1,10 +1,10 @@
 /// <reference types="vite/client" />
 /// <reference lib="dom" />
 
-import type { DockPanelState } from '../webcomponents'
+import type { DockPanelStorage } from '../webcomponents'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useLocalStorage } from '@vueuse/core'
-import { createDockContext } from '../webcomponents'
+import { createDocksContext } from '../webcomponents'
 
 export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
@@ -19,7 +19,7 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC Functions', rpcFunctions)
 
-  const state = useLocalStorage<DockPanelState>(
+  const state = useLocalStorage<DockPanelStorage>(
     'vite-devtools-dock-state',
     {
       width: 80,
@@ -28,12 +28,12 @@ export async function init(): Promise<void> {
       left: 0,
       position: 'left',
       open: false,
-      minimizePanelInactive: 3_000,
+      inactiveTimeout: 3_000,
     },
     { mergeDefaults: true },
   )
 
-  const context = await createDockContext(
+  const context = await createDocksContext(
     'embedded',
     rpc,
     state,

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DockContext } from '../webcomponents/state/dock'
+import type { DocksContext } from '../webcomponents/state/dock'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 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 { createDocksContext } from '../webcomponents/state/dock'
 import { useStateHandlers } from '../webcomponents/state/state'
 import { PresistedDomViewsManager } from '../webcomponents/utils/PresistedDomViewsManager'
 
@@ -17,7 +17,7 @@ console.log('[VITE DEVTOOLS] RPC', rpc)
 const viewsContainer = useTemplateRef<HTMLElement>('viewsContainer')
 const presistedDoms = markRaw(new PresistedDomViewsManager(viewsContainer))
 
-const context: DockContext = await createDockContext(
+const context: DocksContext = await createDocksContext(
   'standalone',
   rpc,
 )

packages/core/src/client/standalone/vite.config.ts

@@ -14,20 +14,6 @@ export default defineConfig({
   plugins: [
     Vue(),
     UnoCSS(),
-    {
-      name: 'local',
-      devtools: {
-        setup(ctx) {
-          ctx.docks.register({
-            title: 'Local',
-            icon: 'https://upload.wikimedia.org/wikipedia/commons/9/95/Vue.js_Logo_2.svg',
-            id: 'local',
-            type: 'iframe',
-            url: 'https://antfu.me',
-          })
-        },
-      },
-    },
     {
       name: 'setup',
       async configureServer(viteDevServer) {

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { DockContext } from '../state/dock'
+import type { DocksContext } from '../state/dock'
 import { useEventListener, useScreenSafeArea } from '@vueuse/core'
 import { computed, onMounted, reactive, ref, useTemplateRef, watchEffect } from 'vue'
 import { useStateHandlers } from '../state/state'
@@ -10,7 +10,7 @@ import VitePlusCore from './icons/VitePlusCore.vue'
 
 // Here we directly destructure is as we don't expect context to be changed
 const props = defineProps<{
-  context: DockContext
+  context: DocksContext
 }>()
 const context = props.context
 
@@ -76,6 +76,7 @@ onMounted(() => {
     if (!isDragging.value)
       return
 
+    const store = context.panel.store
     const centerX = window.innerWidth / 2
     const centerY = window.innerHeight / 2
 
@@ -96,16 +97,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)
 
-    context.state.position = deg >= TL && deg <= TR
+    store.position = deg >= TL && deg <= TR
       ? 'top'
       : deg >= TR && deg <= BR
         ? 'right'
         : deg >= BR && deg <= BL
           ? 'bottom'
           : 'left'
 
-    context.state.left = snapToPoints(x / window.innerWidth * 100)
-    context.state.top = snapToPoints(y / window.innerHeight * 100)
+    store.left = snapToPoints(x / window.innerWidth * 100)
+    store.top = snapToPoints(y / window.innerHeight * 100)
   })
   useEventListener(window, 'pointerup', () => {
     isDragging.value = false
@@ -131,19 +132,20 @@ function clamp(value: number, min: number, max: number) {
 
 const recalculateCounter = ref(0)
 const isHovering = ref(false)
-const isVertical = computed(() => context.state.position === 'left' || context.state.position === 'right')
 
 const anchorPos = computed(() => {
   // eslint-disable-next-line ts/no-unused-expressions
   recalculateCounter.value
 
+  const store = context.panel.store
+
   const halfWidth = (dockEl.value?.clientWidth || 0) / 2
   const halfHeight = (dockEl.value?.clientHeight || 0) / 2
 
-  const left = context.state.left * windowSize.width / 100
-  const top = context.state.top * windowSize.height / 100
+  const left = store.left * windowSize.width / 100
+  const top = store.top * windowSize.height / 100
 
-  switch (context.state.position) {
+  switch (store.position) {
     case 'top':
       return {
         left: clamp(left, halfWidth + panelMargins.left, windowSize.width - halfWidth - panelMargins.right),
@@ -171,29 +173,29 @@ const anchorPos = computed(() => {
 let _timer: ReturnType<typeof setTimeout> | null = null
 function bringUp() {
   isHovering.value = true
-  if (context.state.minimizePanelInactive < 0)
+  if (context.panel.store.inactiveTimeout < 0)
     return
   if (_timer)
     clearTimeout(_timer)
   _timer = setTimeout(() => {
     isHovering.value = false
-  }, +context.state.minimizePanelInactive || 0)
+  }, +context.panel.store.inactiveTimeout || 0)
 }
 
 const isHidden = computed(() => false)
 
 const isMinimized = computed(() => {
-  if (context.state.minimizePanelInactive < 0)
+  if (context.panel.store.inactiveTimeout < 0)
     return false
-  if (context.state.minimizePanelInactive === 0)
+  if (context.panel.store.inactiveTimeout === 0)
     return true
   // @ts-expect-error compatibility
   const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0
   return !isDragging.value
-    && !context.state.open
+    && !context.panel.store.open
     && !isHovering.value
     && !isTouchDevice
-    && context.state.minimizePanelInactive
+    && context.panel.store.inactiveTimeout
 })
 
 const anchorStyle = computed(() => {
@@ -206,7 +208,7 @@ const anchorStyle = computed(() => {
 
 const panelStyle = computed(() => {
   const style: any = {
-    transform: isVertical.value
+    transform: context.panel.isVertical
       ? `translate(-50%, -50%) rotate(90deg)`
       : `translate(-50%, -50%)`,
   }
@@ -233,8 +235,8 @@ onMounted(() => {
     ref="anchorEl"
     :style="[anchorStyle]"
     :class="{
-      'vite-devtools-horizontal': !isVertical,
-      'vite-devtools-vertical': isVertical,
+      'vite-devtools-horizontal': !context.panel.isVertical,
+      'vite-devtools-vertical': context.panel.isVertical,
       'vite-devtools-minimized': isMinimized,
     }"
     @mousemove="bringUp"
@@ -258,7 +260,7 @@ onMounted(() => {
         />
         <BracketRight
           class="vite-devtools-dock-bracket absolute right--1 top-1/2 translate-y--1/2 bottom-0 w-2.5 op75 transition-opacity duration-300"
-          :class="isVertical ? 'scale-y--100' : ''"
+          :class="context.panel.isVertical ? 'scale-y--100' : ''"
         />
         <VitePlusCore
           class="w-3 h-3 absolute left-1/2 top-1/2 translate-x--1/2 translate-y--1/2 transition-opacity duration-300"
@@ -268,7 +270,7 @@ onMounted(() => {
           :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"
+          :is-vertical="context.panel.isVertical"
           :selected="context.selected"
           @select="selectDockEntry"
         />

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

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

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

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import type { DockContext } from '../state/dock'
+import type { DocksContext } from '../state/dock'
 import Dock from './Dock.vue'
 import DockPanel from './DockPanel.vue'
 import FloatingTooltip from './FloatingTooltip.vue'
 
 defineProps<{
-  context: DockContext
+  context: DocksContext
 }>()
 </script>
 

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

@@ -1,15 +1,15 @@
 <script setup lang="ts">
 import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
 import type { CSSProperties } from 'vue'
-import type { DockContext } from '../state/dock'
+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'
 import DockPanelResizer from './DockPanelResizer.vue'
 import ViewEntry from './ViewEntry.vue'
 
 const props = defineProps<{
-  context: DockContext
+  context: DocksContext
   selected: DevToolsDockEntry | null
   dockEl?: HTMLDivElement
   panelMargins: { left: number, top: number, right: number, bottom: number }
@@ -34,10 +34,12 @@ const anchorPos = computed(() => {
   const halfWidth = (props.dockEl?.clientWidth || 0) / 2
   const halfHeight = (props.dockEl?.clientHeight || 0) / 2
 
-  const left = context.state.left * windowSize.width / 100
-  const top = context.state.top * windowSize.height / 100
+  const store = context.panel.store
 
-  switch (context.state.position) {
+  const left = store.left * windowSize.width / 100
+  const top = store.top * windowSize.height / 100
+
+  switch (store.position) {
     case 'top':
       return {
         left: clamp(left, halfWidth + panelMargins.value.left, windowSize.width - halfWidth - panelMargins.value.right),
@@ -65,13 +67,13 @@ const anchorPos = computed(() => {
 let _timer: ReturnType<typeof setTimeout> | null = null
 function bringUp() {
   isHovering.value = true
-  if (context.state.minimizePanelInactive < 0)
+  if (context.panel.store.inactiveTimeout < 0)
     return
   if (_timer)
     clearTimeout(_timer)
   _timer = setTimeout(() => {
     isHovering.value = false
-  }, +context.state.minimizePanelInactive || 0)
+  }, +context.panel.store.inactiveTimeout || 0)
 }
 
 const { width: frameWidth, height: frameHeight } = useElementBounding(dockPanel)
@@ -95,22 +97,25 @@ const iframeStyle = computed(() => {
   const maxWidth = windowSize.width - marginHorizontal
   const maxHeight = windowSize.height - marginVertical
 
+  const panel = context.panel
+  const store = panel.store
+
   const style: CSSProperties = {
     position: 'fixed',
     zIndex: -1,
-    pointerEvents: (context.isDragging || context.isResizing) ? 'none' : 'auto',
-    width: `min(${context.state.width}vw, calc(100vw - ${marginHorizontal}px))`,
-    height: `min(${context.state.height}vh, calc(100vh - ${marginVertical}px))`,
+    pointerEvents: (panel.isDragging || panel.isResizing) ? 'none' : 'auto',
+    width: `min(${store.width}vw, calc(100vw - ${marginHorizontal}px))`,
+    height: `min(${store.height}vh, calc(100vh - ${marginVertical}px))`,
   }
 
   const anchor = anchorPos.value
-  const width = Math.min(maxWidth, context.state.width * windowSize.width / 100)
-  const height = Math.min(maxHeight, context.state.height * windowSize.height / 100)
+  const width = Math.min(maxWidth, store.width * windowSize.width / 100)
+  const height = Math.min(maxHeight, store.height * windowSize.height / 100)
 
   const anchorX = anchor?.left || 0
   const anchorY = anchor?.top || 0
 
-  switch (context.state.position) {
+  switch (store.position) {
     case 'top':
     case 'bottom':
       style.left = `${-frameWidth.value / 2}px`
@@ -131,7 +136,7 @@ const iframeStyle = computed(() => {
       break
   }
 
-  switch (context.state.position) {
+  switch (store.position) {
     case 'top':
       style.top = 0
       break
@@ -163,9 +168,7 @@ onMounted(() => {
     :style="iframeStyle"
   >
     <DockPanelResizer
-      v-model:is-resizing="context.isResizing"
-      :is-dragging="context.isDragging"
-      :state="context.state"
+      :panel="context.panel"
     />
     <ViewEntry
       v-if="selected && viewsContainer"