Try xterm renderer addons for terminal (#436)

Author: matthewlouisbrockman

bun.lock

@@ -94,6 +94,9 @@
     "@vercel/analytics": "^1.5.0",
     "@vercel/otel": "^2.1.2",
     "@vercel/speed-insights": "^1.2.0",
+    "@xterm/addon-canvas": "^0.7.0",
+    "@xterm/addon-fit": "^0.11.0",
+    "@xterm/addon-webgl": "^0.19.0",
     "@xterm/xterm": "^6.0.0",
     "cheerio": "^1.0.0",
     "chrono-node": "^2.8.4",

package.json

@@ -1,3 +1,6 @@
+import { CanvasAddon } from '@xterm/addon-canvas'
+import { FitAddon } from '@xterm/addon-fit'
+import { WebglAddon } from '@xterm/addon-webgl'
 import '@xterm/xterm/css/xterm.css'
 import { Terminal as XTerm } from '@xterm/xterm'
 import { useCallback, useEffect, useRef } from 'react'
@@ -27,12 +30,14 @@ export function useTerminalInstance({
   onResize,
 }: UseTerminalInstanceOptions) {
   const xtermRef = useRef<XTerm | null>(null)
+  const fitAddonRef = useRef<FitAddon | null>(null)
   const terminalContainerRef = useRef<HTMLDivElement | null>(null)
   const terminalTranscriptRef = useRef(INITIAL_TERMINAL_TEXT)
   const terminalSizeRef = useRef({ cols: DEFAULT_COLS, rows: DEFAULT_ROWS })
   const decoderRef = useRef(new TextDecoder())
 
   const resizeTerminal = useCallback(() => {
+    fitAddonRef.current?.fit()
     const nextSize = calculateTerminalSize(
       terminalContainerRef.current,
       xtermRef.current
@@ -99,26 +104,71 @@ export function useTerminalInstance({
       theme: TERMINAL_THEME,
     })
 
+    const fitAddon = new FitAddon()
+    let rendererAddon: WebglAddon | CanvasAddon | undefined
+    let contextLossSubscription: { dispose: () => void } | undefined
+
     xtermRef.current = terminal
+    fitAddonRef.current = fitAddon
+    terminal.loadAddon(fitAddon)
     terminal.open(container)
-    terminal.write(terminalTranscriptRef.current)
+
+    try {
+      const webglAddon = new WebglAddon()
+      const webglContextLossSubscription = webglAddon.onContextLoss(() => {
+        webglContextLossSubscription.dispose()
+        webglAddon.dispose()
+        if (rendererAddon === webglAddon) {
+          rendererAddon = undefined
+        }
+        if (contextLossSubscription === webglContextLossSubscription) {
+          contextLossSubscription = undefined
+        }
+      })
+      contextLossSubscription = webglContextLossSubscription
+      rendererAddon = webglAddon
+      terminal.loadAddon(webglAddon)
+    } catch {
+      contextLossSubscription?.dispose()
+      contextLossSubscription = undefined
+      rendererAddon?.dispose()
+      try {
+        rendererAddon = new CanvasAddon()
+        terminal.loadAddon(rendererAddon)
+      } catch {
+        rendererAddon?.dispose()
+        rendererAddon = undefined
+      }
+    }
+
     const dataSubscription = terminal.onData(onInput)
+    terminal.write(terminalTranscriptRef.current, () => {
+      terminal.scrollToBottom()
+    })
 
     requestAnimationFrame(() => {
       resizeTerminal()
       terminal.focus()
+      terminal.scrollToBottom()
     })
     const resizeTimer = window.setTimeout(() => {
       resizeTerminal()
+      terminal.scrollToBottom()
     }, 100)
 
     return () => {
       window.clearTimeout(resizeTimer)
       dataSubscription.dispose()
+      contextLossSubscription?.dispose()
+      rendererAddon?.dispose()
+      fitAddon.dispose()
       terminal.dispose()
       if (xtermRef.current === terminal) {
         xtermRef.current = null
       }
+      if (fitAddonRef.current === fitAddon) {
+        fitAddonRef.current = null
+      }
     }
   }, [onInput, resizeTerminal])