From 14f769d229a81c6b4d07f65e0c273f8bc977862c Mon Sep 17 00:00:00 2001
From: Ammar Bandukwala <ammar@ammar.io>
Date: Fri, 25 Aug 2023 12:46:14 -0500
Subject: [PATCH] fix(site): use WebGL renderer for terminal (#9320)

---
 site/package.json                            |  1 +
 site/pnpm-lock.yaml                          | 11 +++++++++++
 site/src/AppRouter.tsx                       |  2 +-
 site/src/pages/TerminalPage/TerminalPage.tsx |  8 ++++----
 4 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/site/package.json b/site/package.json
index 6f49efce97..a2230d5769 100644
--- 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
index 6892f56aa2..f137e12289 100644
--- a/site/pnpm-lock.yaml
+++ b/site/pnpm-lock.yaml
@@ -231,6 +231,9 @@ dependencies:
   xterm-addon-web-links:
     specifier: 0.8.0
     version: 0.8.0(xterm@5.2.1)
+  xterm-addon-webgl:
+    specifier: 0.15.0
+    version: 0.15.0(xterm@5.2.1)
   yup:
     specifier: 1.2.0
     version: 1.2.0
@@ -14221,6 +14224,14 @@ packages:
       xterm: 5.2.1
     dev: false
 
+  /xterm-addon-webgl@0.15.0(xterm@5.2.1):
+    resolution: {integrity: sha512-ZLcqogMFHr4g/YRhcCh3xE8tTklnyut/M+O/XhVsFBRB/YCvYhPdLQ5/AQk54V0wjWAQpa8CF3W8DVR9OqyMCg==}
+    peerDependencies:
+      xterm: ^5.0.0
+    dependencies:
+      xterm: 5.2.1
+    dev: false
+
   /xterm@5.2.1:
     resolution: {integrity: sha512-cs5Y1fFevgcdoh2hJROMVIWwoBHD80P1fIP79gopLHJIE4kTzzblanoivxTiQ4+92YM9IxS36H1q0MxIJXQBcA==}
     dev: false
diff --git a/site/src/AppRouter.tsx b/site/src/AppRouter.tsx
index c1f222d90c..785048fe72 100644
--- 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
index 8522daa2d3..61c3501976 100644
--- 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)