wip: terminals

Author: antfu

packages/core/package.json

@@ -73,6 +73,8 @@
     "@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/webcomponents/.generated/css.ts

@@ -0,0 +1,65 @@
+<!-- eslint-disable vue/no-mutating-props -->
+<script setup lang="ts">
+import type { DocksContext } from '@vitejs/devtools-kit/client'
+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'
+
+const props = defineProps<{
+  context: DocksContext
+  terminal: TerminalState
+}>()
+
+const container = ref<HTMLElement>()
+let term: Terminal
+
+onMounted(async () => {
+  term = markRaw(new Terminal({
+    convertEol: true,
+    cols: 80,
+    screenReaderMode: true,
+  }))
+  const fitAddon = new FitAddon()
+  term.loadAddon(fitAddon)
+  term.open(container.value!)
+  fitAddon.fit()
+
+  useEventListener(window, 'resize', () => {
+    fitAddon.fit()
+  })
+
+  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.write(chunk)
+  }
+
+  props.terminal.terminal = term
+})
+
+// async function clear() {
+//   rpc.runTerminalAction(await ensureDevAuthToken(), props.id, 'clear')
+//   term?.clear()
+// }
+
+// async function restart() {
+//   rpc.runTerminalAction(await ensureDevAuthToken(), props.id, 'restart')
+// }
+
+// async function terminate() {
+//   rpc.runTerminalAction(await ensureDevAuthToken(), props.id, 'terminate')
+// }
+</script>
+
+<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()" />
+    <span text-sm op50>{{ info?.description }}</span>
+  </div> -->
+</template>

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

@@ -1,16 +1,39 @@
 <script setup lang="ts">
 import type { DocksContext } from '@vitejs/devtools-kit/client'
+import type { TerminalState } from '../state/terminals'
+import { shallowRef } from 'vue'
 import { useTerminals } from '../state/terminals'
+import ViewBuiltinTerminalPanel from './ViewBuiltinTerminalPanel.vue'
 
 const props = defineProps<{
   context: DocksContext
 }>()
 
 const terminals = useTerminals(props.context)
+const selectedTerminal = shallowRef<TerminalState | null>(null)
 </script>
 
 <template>
-  <div>
-    {{ terminals }}
+  <div class="w-full h-full grid-cols-[max-content_1fr]">
+    <div class="border-base border-b">
+      <button
+        v-for="terminal of terminals.values()"
+        :key="terminal.info.id"
+        class="px3 py2 border-r border-base hover:bg-active"
+        @click="selectedTerminal = terminal"
+      >
+        {{ terminal.info.title }}
+      </button>
+    </div>
+    <div class="h-full flex relative">
+      <ViewBuiltinTerminalPanel
+        v-if="selectedTerminal"
+        :context
+        :terminal="selectedTerminal"
+      />
+      <div v-else class="flex items-center justify-center h-full text-center">
+        Select a terminal tab to start
+      </div>
+    </div>
   </div>
 </template>

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

@@ -19,6 +19,7 @@ const MINIFY = true
 
 export async function buildCSS() {
   const reset = await fs.readFile(resolveModulePath('@unocss/reset/tailwind.css'), 'utf-8')
+  const xtermCss = await fs.readFile(resolveModulePath('@xterm/xterm/css/xterm.css'), 'utf-8')
   const files = await glob(GLOBS, {
     cwd: SRC_DIR,
     absolute: true,
@@ -45,6 +46,7 @@ export async function buildCSS() {
   const unoResult = await generater.generate(tokens)
   const input = [
     reset,
+    xtermCss,
     userStyle.toString(),
     unoResult.css,
   ].join('\n')

packages/core/src/client/webcomponents/scripts/build-css.ts

@@ -1,36 +1,60 @@
-import type { DevToolsRpcClientFunctions } from '@vitejs/devtools-kit'
+import type { DevToolsRpcClientFunctions, DevToolsTerminalSessionStreamChunkEvent } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
-import type { Ref, ShallowRef } from 'vue'
+import type { Terminal } from '@xterm/xterm'
+import type { Reactive } from 'vue'
 import type { DevToolsTerminalSessionBase } from '../../../../../kit/src'
-import { shallowRef } from 'vue'
+import { reactive } from 'vue'
 
 export interface TerminalState {
   info: DevToolsTerminalSessionBase
-  buffer?: string[] | null
+  buffer: string[] | null
+  terminal: Terminal | null
 }
 
-let _terminalsRef: ShallowRef<TerminalState[]> | undefined
-export function useTerminals(context: DocksContext): Ref<TerminalState[]> {
-  if (_terminalsRef) {
-    return _terminalsRef
+let _terminalsMap: Reactive<Map<string, TerminalState>> | undefined
+export function useTerminals(context: DocksContext): Reactive<Map<string, TerminalState>> {
+  if (_terminalsMap) {
+    return _terminalsMap
   }
-  const terminals = _terminalsRef = shallowRef<TerminalState[]>([])
+  const map = _terminalsMap = reactive(new Map())
   async function udpateTerminals() {
-    terminals.value = (await context.rpc.$call('vite:internal:terminals:list'))
-      .map((info) => {
-        return {
-          info: Object.freeze(info),
-          buffer: null,
-        }
+    const terminals = await context.rpc.$call('vite:internal:terminals:list')
+
+    for (const terminal of terminals) {
+      if (map.has(terminal.id)) {
+        map.get(terminal.id)!.info = Object.freeze(terminal)
+        continue
+      }
+      map.set(terminal.id, {
+        info: Object.freeze(terminal),
+        buffer: null,
+        terminal: null,
       })
+    }
+
     // eslint-disable-next-line no-console
-    console.log('[VITE DEVTOOLS] Terminals Updated', [...terminals.value])
+    console.log('[VITE DEVTOOLS] Terminals Updated', [...map.values()])
   }
   context.clientRpc.register({
     name: 'vite:internal:terminals:updated' satisfies keyof DevToolsRpcClientFunctions,
     type: 'action',
     handler: () => udpateTerminals(),
   })
+  context.clientRpc.register({
+    name: 'vite:internal:terminals:stream-chunk' satisfies keyof DevToolsRpcClientFunctions,
+    type: 'action',
+    handler: (data: DevToolsTerminalSessionStreamChunkEvent) => {
+      const terminal = map.get(data.id)
+      if (!terminal) {
+        console.warn(`[VITE DEVTOOLS] Terminal with id "${data.id}" not found`)
+        return
+      }
+      terminal.buffer?.push(...data.chunks)
+      for (const chunk of data.chunks)
+        terminal.terminal?.write(chunk)
+    },
+  })
   udpateTerminals()
-  return terminals
+
+  return map
 }

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

@@ -10,6 +10,7 @@ export default defineConfig({
     {
       'color-base': 'color-neutral-800 dark:color-neutral-200',
       'bg-base': 'bg-white dark:bg-#111',
+      'bg-active': 'bg-#8881',
       'bg-secondary': 'bg-#eee dark:bg-#222',
       'border-base': 'border-#8882',
       'ring-base': 'ring-#8882',

packages/core/src/client/webcomponents/uno.config.ts

@@ -80,7 +80,7 @@ export class DevToolsTerminalHost implements DevToolsTerminalHostType {
 
   async startChildProcess(
     executeOptions: DevToolsChildProcessExecuteOptions,
-    terminal: DevToolsTerminalSessionBase,
+    terminal: Omit<DevToolsTerminalSessionBase, 'status'>,
   ): Promise<DevToolsChildProcessTerminalSession> {
     if (this.sessions.has(terminal.id)) {
       throw new Error(`Terminal session with id "${terminal.id}" already registered`)

packages/core/src/node/host-terminals.ts

@@ -19,7 +19,7 @@ export interface DevToolsTerminalHost {
 
   startChildProcess: (
     executeOptions: DevToolsChildProcessExecuteOptions,
-    terminal: DevToolsTerminalSessionBase,
+    terminal: Omit<DevToolsTerminalSessionBase, 'status'>,
   ) => Promise<DevToolsChildProcessTerminalSession>
 }