feat: basic terminals support (#136)

Author: antfu

eslint.config.js

@@ -12,3 +12,6 @@ export default antfu({
       'no-console': 'off',
     },
   })
+  .removeRules(
+    'vue/no-template-shadow',
+  )

package.json

@@ -44,6 +44,7 @@
     "@types/ws": "catalog:types",
     "@typescript-eslint/utils": "catalog:devtools",
     "@unocss/eslint-config": "catalog:devtools",
+    "@vueuse/core": "catalog:frontend",
     "ansis": "catalog:deps",
     "bumpp": "catalog:devtools",
     "esbuild": "catalog:build",

packages/core/package.json

@@ -62,17 +62,19 @@
     "debug": "catalog:deps",
     "launch-editor": "catalog:deps",
     "mlly": "catalog:deps",
-    "nanoevents": "catalog:deps",
     "open": "catalog:deps",
     "pathe": "catalog:deps",
     "perfect-debounce": "catalog:deps",
     "sirv": "catalog:deps",
+    "tinyexec": "catalog:deps",
     "ws": "catalog:deps"
   },
   "devDependencies": {
     "@vitejs/devtools": "workspace:*",
     "@vitejs/devtools-vite": "workspace:*",
     "@vitejs/plugin-vue": "catalog:build",
+    "@xterm/addon-fit": "catalog:frontend",
+    "@xterm/xterm": "catalog:frontend",
     "tsdown": "catalog:build",
     "typescript": "catalog:devtools",
     "unplugin-vue": "catalog:build",

packages/core/playground/vite.config.ts

@@ -102,6 +102,14 @@ export default defineConfig({
             launcher: {
               title: 'Launcher My Cool App',
               onLaunch: async () => {
+                await ctx.terminals.startChildProcess({
+                  command: 'vite',
+                  args: ['dev'],
+                  cwd: process.cwd(),
+                }, {
+                  id: 'vite-run',
+                  title: 'Vite Run',
+                })
                 await new Promise(resolve => setTimeout(resolve, 1000))
 
                 ctx.docks.update({

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

@@ -4,7 +4,7 @@
 import type { DockPanelStorage } from '@vitejs/devtools-kit/client'
 import { getDevToolsRpcClient } from '@vitejs/devtools-kit/client'
 import { useLocalStorage } from '@vueuse/core'
-import { createDocksContext } from '../webcomponents'
+import { createDocksContext } from '../webcomponents/state/context'
 
 export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
@@ -16,7 +16,7 @@ export async function init(): Promise<void> {
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC', rpc)
 
-  const rpcFunctions = await rpc.$call('vite:core:list-rpc-functions')
+  const rpcFunctions = await rpc.$call('vite:internal:rpc:server:list')
   // eslint-disable-next-line no-console
   console.log('[VITE DEVTOOLS] RPC Functions', rpcFunctions)
 

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

@@ -5,8 +5,7 @@ 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 { createDocksContext } from '../webcomponents/state/dock'
-import { useStateHandlers } from '../webcomponents/state/state'
+import { createDocksContext } from '../webcomponents/state/context'
 import { PersistedDomViewsManager } from '../webcomponents/utils/PersistedDomViewsManager'
 
 const rpcReturn = await getDevToolsRpcClient()
@@ -24,8 +23,6 @@ const context: DocksContext = await createDocksContext(
 )
 
 context.docks.selectedId ||= context.docks.entries[0]?.id ?? null
-
-const { selectDockEntry } = useStateHandlers(context)
 </script>
 
 <template>
@@ -39,7 +36,7 @@ const { selectDockEntry } = useStateHandlers(context)
         class="transition duration-200 p2"
         :is-vertical="false"
         :selected="context.docks.selected"
-        @select="selectDockEntry"
+        @select="(e) => context.docks.switchEntry(e?.id)"
       />
     </div>
     <div>

packages/core/src/client/webcomponents/.generated/css.ts

@@ -2,7 +2,6 @@
 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'
 import DockEntries from './DockEntries.vue'
 import BracketLeft from './icons/BracketLeft.vue'
 import BracketRight from './icons/BracketRight.vue'
@@ -17,7 +16,7 @@ const context = props.context
 
 const isSafari = navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')
 
-const PANEL_MARGIN = 5
+const PANEL_MARGIN = 2
 const panelMargins = reactive({
   left: PANEL_MARGIN,
   top: PANEL_MARGIN,
@@ -220,8 +219,6 @@ const panelStyle = computed(() => {
   return style
 })
 
-const { selectDockEntry } = useStateHandlers(context)
-
 onMounted(() => {
   bringUp()
   recalculateCounter.value++
@@ -277,7 +274,7 @@ onMounted(() => {
           :class="isMinimized ? 'opacity-0 pointer-events-none' : 'opacity-100'"
           :is-vertical="context.panel.isVertical"
           :selected="context.docks.selected"
-          @select="selectDockEntry"
+          @select="(e) => context.docks.switchEntry(e?.id)"
         />
       </div>
     </div>

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

@@ -25,14 +25,15 @@ function toggleDockEntry(dock: DevToolsDockEntry) {
 
 <template>
   <div>
-    <DockEntry
-      v-for="dock of entries"
-      :key="dock.id"
-      :dock
-      :is-selected="selected?.id === dock.id"
-      :is-dimmed="selected ? (selected.id !== dock.id) : false"
-      :is-vertical="isVertical"
-      @click="toggleDockEntry(dock)"
-    />
+    <template v-for="dock of entries" :key="dock.id">
+      <DockEntry
+        v-if="!dock.isHidden"
+        :dock
+        :is-selected="selected?.id === dock.id"
+        :is-dimmed="selected ? (selected.id !== dock.id) : false"
+        :is-vertical="isVertical"
+        @click="toggleDockEntry(dock)"
+      />
+    </template>
   </div>
 </template>

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

@@ -1,12 +1,12 @@
 <script setup lang="ts">
-import type { DevToolsDockEntry } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntryBase } from '@vitejs/devtools-kit'
 import { useEventListener } from '@vueuse/core'
 import { useTemplateRef } from 'vue'
 import { setFloatingTooltip } from '../state/floating-tooltip'
 import DockIcon from './DockIcon.vue'
 
 const props = defineProps<{
-  dock: DevToolsDockEntry
+  dock: DevToolsDockEntryBase
   isSelected?: boolean
   isDimmed?: boolean
   isVertical?: boolean