fix(site): use WebGL renderer for terminal (#9320)

ammario · web-flow · commit 14f769d229a8 · 2023-08-25T12:46:14.000-05:00
diff --git a/site/package.json b/site/package.json
@@ -105,6 +105,7 @@
     "xterm-addon-fit": "0.7.0",
     "xterm-addon-unicode11": "0.5.0",
     "xterm-addon-web-links": "0.8.0",
+    "xterm-addon-webgl": "0.15.0",
     "yup": "1.2.0"
   },
   "devDependencies": {
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
@@ -322,7 +322,7 @@ export const AppRouter: FC = () => {
             {/* Terminal and CLI auth pages don't have the dashboard layout */}
             <Route
               path="/:username/:workspace/terminal"
-              element={<TerminalPage renderer="canvas" />}
+              element={<TerminalPage renderer="webgl" />}
             />
             <Route path="cli-auth" element={<CliAuthenticationPage />} />
           </Route>
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -7,7 +7,7 @@ import { useNavigate, useParams, useSearchParams } from "react-router-dom"
 import { colors } from "theme/colors"
 import { v4 as uuidv4 } from "uuid"
 import * as XTerm from "xterm"
-import { CanvasAddon } from "xterm-addon-canvas"
+import { WebglAddon } from "xterm-addon-webgl"
 import { FitAddon } from "xterm-addon-fit"
 import { WebLinksAddon } from "xterm-addon-web-links"
 import { Unicode11Addon } from "xterm-addon-unicode11"
@@ -58,7 +58,7 @@ const useTerminalWarning = ({ agent }: { agent?: WorkspaceAgent }) => {
 }
 
 type TerminalPageProps = React.PropsWithChildren<{
-  renderer: "canvas" | "dom"
+  renderer: "webgl" | "dom"
 }>
 
 const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
@@ -187,8 +187,8 @@ const TerminalPage: FC<TerminalPageProps> = ({ renderer }) => {
       },
     })
     // DOM is the default renderer.
-    if (renderer === "canvas") {
-      terminal.loadAddon(new CanvasAddon())
+    if (renderer === "webgl") {
+      terminal.loadAddon(new WebglAddon())
     }
     const fitAddon = new FitAddon()
     setFitAddon(fitAddon)
