fix: terminals

Author: antfu

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

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

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

@@ -34,7 +34,7 @@ onMounted(async () => {
     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)
+      term.writeln(chunk)
   }
 
   props.terminal.terminal = term

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

@@ -1,8 +1,7 @@
-import type { DevToolsRpcClientFunctions, DevToolsTerminalSessionStreamChunkEvent } from '@vitejs/devtools-kit'
+import type { DevToolsRpcClientFunctions, DevToolsTerminalSessionBase, DevToolsTerminalSessionStreamChunkEvent } from '@vitejs/devtools-kit'
 import type { DocksContext } from '@vitejs/devtools-kit/client'
 import type { Terminal } from '@xterm/xterm'
 import type { Reactive } from 'vue'
-import type { DevToolsTerminalSessionBase } from '../../../../../kit/src'
 import { reactive } from 'vue'
 
 export interface TerminalState {
@@ -16,7 +15,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
   if (_terminalsMap) {
     return _terminalsMap
   }
-  const map = _terminalsMap = reactive(new Map())
+  const map: Reactive<Map<string, TerminalState>> = _terminalsMap = reactive(new Map())
   async function udpateTerminals() {
     const terminals = await context.rpc.$call('vite:internal:terminals:list')
 
@@ -51,7 +50,7 @@ export function useTerminals(context: DocksContext): Reactive<Map<string, Termin
       }
       terminal.buffer?.push(...data.chunks)
       for (const chunk of data.chunks)
-        terminal.terminal?.write(chunk)
+        terminal.terminal?.writeln(chunk)
     },
   })
   udpateTerminals()

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

@@ -88,16 +88,11 @@ export class DevToolsTerminalHost implements DevToolsTerminalHostType {
     const { exec } = await import('tinyexec')
 
     let controller: ReadableStreamDefaultController<string> | undefined
-    const buffer = new ReadableStream<string>({
-      async start(_controller) {
+    const stream = new ReadableStream<string>({
+      start(_controller) {
         controller = _controller
       },
     })
-    const writer = new WritableStream<string>({
-      write(chunk) {
-        controller?.enqueue(chunk)
-      },
-    })
 
     function createChildProcess() {
       const cp = exec(
@@ -116,14 +111,12 @@ export class DevToolsTerminalHost implements DevToolsTerminalHostType {
         },
       )
 
-      const stream = new ReadableStream<string>({
-        async start(controller) {
-          for await (const chunk of cp) {
-            controller.enqueue(chunk)
-          }
-        },
-      })
-      stream.pipeTo(writer)
+      ;(async () => {
+        for await (const chunk of cp) {
+          controller?.enqueue(chunk)
+        }
+      })()
+
       return cp
     }
 
@@ -141,14 +134,14 @@ export class DevToolsTerminalHost implements DevToolsTerminalHostType {
     const session: DevToolsChildProcessTerminalSession = {
       ...terminal,
       status: 'running',
-      stream: buffer,
+      stream,
       type: 'child-process',
       executeOptions,
       getChildProcess: () => cp?.process,
       terminate,
       restart,
     }
-    this.sessions.set(session.id, session)
+    this.register(session)
 
     return Promise.resolve(session)
   }