feat: improve terminals

Author: antfu

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

@@ -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

@@ -5,7 +5,7 @@ import type { TerminalState } from '../state/terminals'
 import { useEventListener } from '@vueuse/core'
 import { FitAddon } from '@xterm/addon-fit'
 import { Terminal } from '@xterm/xterm'
-import { markRaw, onMounted, ref } from 'vue'
+import { markRaw, nextTick, onMounted, onUnmounted, ref } from 'vue'
 
 const props = defineProps<{
   context: DocksContext
@@ -30,14 +30,24 @@ onMounted(async () => {
     fitAddon.fit()
   })
 
+  nextTick(() => {
+    fitAddon.fit()
+  })
+
+  props.terminal.terminal = term
+
   if (props.terminal.buffer == null) {
     const { buffer } = await props.context.rpc.$call('vite:internal:terminals:read', props.terminal.info.id)
     props.terminal.buffer = markRaw(buffer)
-    for (const chunk of buffer)
-      term.writeln(chunk)
   }
 
-  props.terminal.terminal = term
+  for (const chunk of props.terminal.buffer)
+    term.writeln(chunk)
+})
+
+onUnmounted(() => {
+  term.dispose()
+  props.terminal.terminal = null
 })
 
 // async function clear() {
@@ -57,9 +67,9 @@ onMounted(async () => {
 <template>
   <div ref="container" class="h-full w-full of-auto bg-black" />
   <!-- <div border="t base" flex="~ gap-2" items-center p2>
-    <NButton title="Clear" icon="i-carbon-clean" :border="false" @click="clear()" />
-    <NButton v-if="info?.restartable" title="Restart" icon="carbon-renew" :border="false" @click="restart()" />
-    <NButton v-if="info?.terminatable" title="Terminate" icon="carbon-delete" :border="false" @click="terminate()" />
+    <button title="Clear" icon="i-carbon-clean" :border="false" @click="clear()" />
+    <button v-if="info?.restartable" title="Restart" icon="carbon-renew" :border="false" @click="restart()" />
+    <button v-if="info?.terminatable" title="Terminate" icon="carbon-delete" :border="false" @click="terminate()" />
     <span text-sm op50>{{ info?.description }}</span>
   </div> -->
 </template>

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

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { TerminalState } from '../state/terminals'
+import { watchImmediate } from '@vueuse/core'
 import { shallowRef } from 'vue'
 import { useTerminals } from '../state/terminals'
+import DockIcon from './DockIcon.vue'
 import ViewBuiltinTerminalPanel from './ViewBuiltinTerminalPanel.vue'
 
 const props = defineProps<{
@@ -11,28 +13,40 @@ const props = defineProps<{
 
 const terminals = useTerminals(props.context)
 const selectedTerminal = shallowRef<TerminalState | null>(null)
+
+watchImmediate(
+  terminals,
+  () => {
+    if (selectedTerminal.value == null && terminals.size > 0) {
+      selectedTerminal.value = terminals.values().next().value!
+    }
+  },
+)
 </script>
 
 <template>
-  <div class="w-full h-full grid-cols-[max-content_1fr]">
-    <div class="border-base border-b">
+  <div class="w-full h-full grid grid-rows-[max-content_1fr]">
+    <div class="border-base border-b rounded-t overflow-x-auto">
       <button
         v-for="terminal of terminals.values()"
         :key="terminal.info.id"
-        class="px3 py2 border-r border-base hover:bg-active"
+        class="px3 py1.5 border-r border-base hover:bg-active text-sm flex items-center gap-1"
+        :class="{ 'bg-active': selectedTerminal?.info.id === terminal.info.id }"
         @click="selectedTerminal = terminal"
       >
-        {{ terminal.info.title }}
+        <DockIcon :icon="terminal.info.icon || 'ph:terminal-duotone'" />
+        <span>{{ terminal.info.title }}</span>
       </button>
     </div>
-    <div class="h-full flex relative">
+    <div class="h-full w-full flex relative">
       <ViewBuiltinTerminalPanel
         v-if="selectedTerminal"
+        :key="selectedTerminal.info.id"
         :context
         :terminal="selectedTerminal"
       />
-      <div v-else class="flex items-center justify-center h-full text-center">
-        Select a terminal tab to start
+      <div v-else class="flex items-center justify-center h-full w-full text-center">
+        <div>Select a terminal tab to start</div>
       </div>
     </div>
   </div>

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

@@ -1,4 +1,4 @@
-import type { DevToolsDockEntry, DevToolsRpcClientFunctions, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
+import type { DevToolsDockEntry, DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
 import type { ClientRpcReturn, DockEntryState, DockEntryStateEvents, DockPanelStorage } from '@vitejs/devtools-kit/client'
 import type { Ref, ShallowRef } from 'vue'
 import { createEventEmitter } from '@vitejs/devtools-kit/utils/events'
@@ -16,15 +16,6 @@ export function DEFAULT_DOCK_PANEL_STORE(): DockPanelStorage {
   }
 }
 
-export const builtinDocksEntries: DevToolsViewBuiltin[] = [
-  Object.freeze({
-    type: '~builtin',
-    id: '~terminals',
-    title: 'Terminals',
-    icon: 'ph:terminal-duotone',
-  }),
-]
-
 export function createDockEntryState(
   entry: DevToolsDockEntry,
   selected: Ref<DevToolsDockEntry | null>,
@@ -68,10 +59,8 @@ export async function useDocksEntries(rpcReturn: ClientRpcReturn): Promise<Ref<D
   }
   const dockEntries = _docksEntriesRef = shallowRef<DevToolsDockEntry[]>([])
   async function updateDocksEntries() {
-    dockEntries.value = [
-      ...(await rpcReturn.rpc.$call('vite:internal:docks:list')).map(entry => Object.freeze(entry)),
-      ...builtinDocksEntries,
-    ]
+    dockEntries.value = (await rpcReturn.rpc.$call('vite:internal:docks:list'))
+      .map(entry => Object.freeze(entry))
     // eslint-disable-next-line no-console
     console.log('[VITE DEVTOOLS] Docks Entries Updated', [...dockEntries.value])
   }

packages/core/src/client/webcomponents/state/docks.ts

@@ -16,7 +16,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
     return _terminalsMap
   }
   const map: Reactive<Map<string, TerminalState>> = _terminalsMap = reactive(new Map())
-  async function udpateTerminals() {
+  async function updateTerminals() {
     const terminals = await context.rpc.$call('vite:internal:terminals:list')
 
     for (const terminal of terminals) {
@@ -37,7 +37,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
   context.clientRpc.register({
     name: 'vite:internal:terminals:updated' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',
-    handler: () => udpateTerminals(),
+    handler: () => updateTerminals(),
   })
   context.clientRpc.register({
     name: 'vite:internal:terminals:stream-chunk' satisfies keyof DevToolsRpcClientFunctions,
@@ -53,7 +53,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
         terminal.terminal?.writeln(chunk)
     },
   })
-  udpateTerminals()
+  updateTerminals()
 
   return map
 }

packages/core/src/client/webcomponents/state/terminals.ts

@@ -48,6 +48,8 @@ export async function createDevToolsContext(
   }, 10))
   terminalsHost.events.on('terminal:session:updated', debounce(() => {
     rpcHost.boardcast.$callOptional('vite:internal:terminals:updated')
+    // New terminals might affect the visibility of the terminals dock entry, we trigger it here as well
+    rpcHost.boardcast.$callOptional('vite:internal:docks:updated')
   }, 10))
   terminalsHost.events.on('terminal:session:stream-chunk', (data) => {
     rpcHost.boardcast.$callOptional('vite:internal:terminals:stream-chunk', data)

packages/core/src/node/context.ts

@@ -1,11 +1,27 @@
+import type { DevToolsDockEntry, DevToolsViewBuiltin } from '@vitejs/devtools-kit'
 import { defineRpcFunction } from '@vitejs/devtools-kit'
 
 export const docksList = defineRpcFunction({
   name: 'vite:internal:docks:list',
   type: 'static',
   setup: (context) => {
+    const builtinDocksEntries: DevToolsViewBuiltin[] = [
+      {
+        type: '~builtin',
+        id: '~terminals',
+        title: 'Terminals',
+        icon: 'ph:terminal-duotone',
+        get isHidden() {
+          return context.terminals.sessions.size === 0
+        },
+      },
+    ]
+
     return {
-      handler: () => Array.from(context.docks.values()),
+      handler: (): DevToolsDockEntry[] => [
+        ...Array.from(context.docks.values()),
+        ...builtinDocksEntries,
+      ],
     }
   },
 })

packages/core/src/node/rpc/internal/docks-list.ts

@@ -33,6 +33,11 @@ export interface DevToolsDockEntryBase {
    * @default 'default'
    */
   category?: DevToolsDockEntryCategory
+  /**
+   * Whether the entry should be hidden from the user.
+   * @default false
+   */
+  isHidden?: boolean
 }
 
 export interface ClientScriptEntry {

packages/kit/src/types/docks.ts

@@ -1,4 +1,5 @@
 import type { ChildProcess } from 'node:child_process'
+import type { DevToolsDockEntryIcon } from './docks'
 import type { EventEmitter } from './events'
 
 export interface DevToolsTerminalSessionStreamChunkEvent {
@@ -30,6 +31,7 @@ export interface DevToolsTerminalSessionBase {
   title: string
   description?: string
   status: DevToolsTerminalStatus
+  icon?: DevToolsDockEntryIcon
 }
 
 export interface DevToolsTerminalSession extends DevToolsTerminalSessionBase {