chore: update xterm (#13752)

aslilac · web-flow · commit b1e7498e7752 · 2024-07-02T09:29:34.000-06:00
diff --git a/site/e2e/tests/webTerminal.spec.ts b/site/e2e/tests/webTerminal.spec.ts
@@ -54,7 +54,7 @@ test("web terminal", async ({ context, page }) => {
   // try-catch is used temporarily to find the root cause: https://github.com/coder/coder/actions/runs/6176958762/job/16767089943
   try {
     await terminal.waitForSelector(
-      'div.xterm-rows div:text-matches("hello123456")',
+      'div.xterm-rows span:text-matches("hello123456")',
       {
         state: "visible",
         timeout: 10 * 1000,
diff --git a/site/package.json b/site/package.json
@@ -45,7 +45,12 @@
     "@mui/system": "5.14.0",
     "@mui/utils": "5.14.11",
     "@tanstack/react-query-devtools": "4.35.3",
-    "@types/file-saver": "2.0.7",
+    "@xterm/xterm": "5.5.0",
+    "@xterm/addon-canvas": "0.7.0",
+    "@xterm/addon-fit": "0.10.0",
+    "@xterm/addon-unicode11": "0.8.0",
+    "@xterm/addon-web-links": "0.11.0",
+    "@xterm/addon-webgl": "0.18.0",
     "ansi-to-html": "0.7.2",
     "axios": "1.6.0",
     "canvas": "2.11.0",
@@ -88,12 +93,6 @@
     "undici": "6.19.2",
     "unique-names-generator": "4.7.1",
     "uuid": "9.0.0",
-    "xterm": "5.2.0",
-    "xterm-addon-canvas": "0.5.0",
-    "xterm-addon-fit": "0.8.0",
-    "xterm-addon-unicode11": "0.6.0",
-    "xterm-addon-web-links": "0.9.0",
-    "xterm-addon-webgl": "0.16.0",
     "yup": "1.3.2"
   },
   "devDependencies": {
@@ -119,6 +118,7 @@
     "@types/chroma-js": "2.4.0",
     "@types/color-convert": "2.0.0",
     "@types/express": "4.17.17",
+    "@types/file-saver": "2.0.7",
     "@types/jest": "29.5.2",
     "@types/lodash": "4.14.196",
     "@types/node": "18.19.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx
@@ -1,16 +1,16 @@
-import "xterm/css/xterm.css";
+import "@xterm/xterm/css/xterm.css";
 import type { Interpolation, Theme } from "@emotion/react";
+import { CanvasAddon } from "@xterm/addon-canvas";
+import { FitAddon } from "@xterm/addon-fit";
+import { Unicode11Addon } from "@xterm/addon-unicode11";
+import { WebLinksAddon } from "@xterm/addon-web-links";
+import { WebglAddon } from "@xterm/addon-webgl";
+import { Terminal } from "@xterm/xterm";
 import { type FC, useCallback, useEffect, useRef, useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useQuery } from "react-query";
 import { useNavigate, useParams, useSearchParams } from "react-router-dom";
 import { v4 as uuidv4 } from "uuid";
-import * as XTerm from "xterm";
-import { CanvasAddon } from "xterm-addon-canvas";
-import { FitAddon } from "xterm-addon-fit";
-import { Unicode11Addon } from "xterm-addon-unicode11";
-import { WebLinksAddon } from "xterm-addon-web-links";
-import { WebglAddon } from "xterm-addon-webgl";
 import { deploymentConfig } from "api/queries/deployment";
 import {
   workspaceByOwnerAndName,
@@ -45,7 +45,7 @@ const TerminalPage: FC = () => {
   const terminalWrapperRef = useRef<HTMLDivElement>(null);
   // The terminal is maintained as a state to trigger certain effects when it
   // updates.
-  const [terminal, setTerminal] = useState<XTerm.Terminal>();
+  const [terminal, setTerminal] = useState<Terminal>();
   const [connectionStatus, setConnectionStatus] =
     useState<ConnectionStatus>("initializing");
   const [searchParams] = useSearchParams();
@@ -104,7 +104,7 @@ const TerminalPage: FC = () => {
     if (!terminalWrapperRef.current || config.isLoading) {
       return;
     }
-    const terminal = new XTerm.Terminal({
+    const terminal = new Terminal({
       allowProposedApi: true,
       allowTransparency: true,
       disableStdin: false,

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@ test("web terminal", async ({ context, page }) => {`
`54`	`54`	`// try-catch is used temporarily to find the root cause: https://github.com/coder/coder/actions/runs/6176958762/job/16767089943`
`55`	`55`	`try {`
`56`	`56`	`await terminal.waitForSelector(`
`57`		`- 'div.xterm-rows div:text-matches("hello123456")',`
	`57`	`+ 'div.xterm-rows span:text-matches("hello123456")',`
`58`	`58`	`{`
`59`	`59`	`state: "visible",`
`60`	`60`	`timeout: 10 * 1000,`