From 92ddb4f711edd2109dec0ca618a2fd7add18df3b Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 1 Jul 2024 19:38:15 +0000 Subject: [PATCH 1/4] chore: update xterm --- site/package.json | 14 +-- site/pnpm-lock.yaml | 124 +++++++++---------- site/src/pages/TerminalPage/TerminalPage.tsx | 18 +-- 3 files changed, 78 insertions(+), 78 deletions(-) diff --git a/site/package.json b/site/package.json index 013977b1ac079..7b8c8cb130d3a 100644 --- 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", @@ -89,12 +94,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": { @@ -120,6 +119,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 index 1075770a149a1..88430889e678c 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -57,6 +57,24 @@ dependencies: '@types/file-saver': specifier: 2.0.7 version: 2.0.7 + '@xterm/addon-canvas': + specifier: 0.7.0 + version: 0.7.0(@xterm/xterm@5.5.0) + '@xterm/addon-fit': + specifier: 0.10.0 + version: 0.10.0(@xterm/xterm@5.5.0) + '@xterm/addon-unicode11': + specifier: 0.8.0 + version: 0.8.0(@xterm/xterm@5.5.0) + '@xterm/addon-web-links': + specifier: 0.11.0 + version: 0.11.0(@xterm/xterm@5.5.0) + '@xterm/addon-webgl': + specifier: 0.18.0 + version: 0.18.0(@xterm/xterm@5.5.0) + '@xterm/xterm': + specifier: 5.5.0 + version: 5.5.0 ansi-to-html: specifier: 0.7.2 version: 0.7.2 @@ -186,24 +204,6 @@ dependencies: uuid: specifier: 9.0.0 version: 9.0.0 - xterm: - specifier: 5.2.0 - version: 5.2.0 - xterm-addon-canvas: - specifier: 0.5.0 - version: 0.5.0(xterm@5.2.0) - xterm-addon-fit: - specifier: 0.8.0 - version: 0.8.0(xterm@5.2.0) - xterm-addon-unicode11: - specifier: 0.6.0 - version: 0.6.0(xterm@5.2.0) - xterm-addon-web-links: - specifier: 0.9.0 - version: 0.9.0(xterm@5.2.0) - xterm-addon-webgl: - specifier: 0.16.0 - version: 0.16.0(xterm@5.2.0) yup: specifier: 1.3.2 version: 1.3.2 @@ -5813,6 +5813,50 @@ packages: resolution: {integrity: sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==} dev: false + /@xterm/addon-canvas@0.7.0(@xterm/xterm@5.5.0): + resolution: {integrity: sha512-LF5LYcfvefJuJ7QotNRdRSPc9YASAVDeoT5uyXS/nZshZXjYplGXRECBGiznwvhNL2I8bq1Lf5MzRwstsYQ2Iw==} + peerDependencies: + '@xterm/xterm': ^5.0.0 + dependencies: + '@xterm/xterm': 5.5.0 + dev: false + + /@xterm/addon-fit@0.10.0(@xterm/xterm@5.5.0): + resolution: {integrity: sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==} + peerDependencies: + '@xterm/xterm': ^5.0.0 + dependencies: + '@xterm/xterm': 5.5.0 + dev: false + + /@xterm/addon-unicode11@0.8.0(@xterm/xterm@5.5.0): + resolution: {integrity: sha512-LxinXu8SC4OmVa6FhgwsVCBZbr8WoSGzBl2+vqe8WcQ6hb1r6Gj9P99qTNdPiFPh4Ceiu2pC8xukZ6+2nnh49Q==} + peerDependencies: + '@xterm/xterm': ^5.0.0 + dependencies: + '@xterm/xterm': 5.5.0 + dev: false + + /@xterm/addon-web-links@0.11.0(@xterm/xterm@5.5.0): + resolution: {integrity: sha512-nIHQ38pQI+a5kXnRaTgwqSHnX7KE6+4SVoceompgHL26unAxdfP6IPqUTSYPQgSwM56hsElfoNrrW5V7BUED/Q==} + peerDependencies: + '@xterm/xterm': ^5.0.0 + dependencies: + '@xterm/xterm': 5.5.0 + dev: false + + /@xterm/addon-webgl@0.18.0(@xterm/xterm@5.5.0): + resolution: {integrity: sha512-xCnfMBTI+/HKPdRnSOHaJDRqEpq2Ugy8LEj9GiY4J3zJObo3joylIFaMvzBwbYRg8zLtkO0KQaStCeSfoaI2/w==} + peerDependencies: + '@xterm/xterm': ^5.0.0 + dependencies: + '@xterm/xterm': 5.5.0 + dev: false + + /@xterm/xterm@5.5.0: + resolution: {integrity: sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==} + dev: false + /@yarnpkg/esbuild-plugin-pnp@3.0.0-rc.15(esbuild@0.18.20): resolution: {integrity: sha512-kYzDJO5CA9sy+on/s2aIW0411AklfCi8Ck/4QDivOqsMKpStZA2SsR+X27VTggGwpStWaLrjJcDcdDMowtG8MA==} engines: {node: '>=14.15.0'} @@ -13764,50 +13808,6 @@ packages: resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==} engines: {node: '>=0.4'} - /xterm-addon-canvas@0.5.0(xterm@5.2.0): - resolution: {integrity: sha512-QOo/eZCMrCleAgMimfdbaZCgmQRWOml63Ued6RwQ+UTPvQj3Av9QKx3xksmyYrDGRO/AVRXa9oNuzlYvLdmoLQ==} - peerDependencies: - xterm: ^5.0.0 - dependencies: - xterm: 5.2.0 - dev: false - - /xterm-addon-fit@0.8.0(xterm@5.2.0): - resolution: {integrity: sha512-yj3Np7XlvxxhYF/EJ7p3KHaMt6OdwQ+HDu573Vx1lRXsVxOcnVJs51RgjZOouIZOczTsskaS+CpXspK81/DLqw==} - peerDependencies: - xterm: ^5.0.0 - dependencies: - xterm: 5.2.0 - dev: false - - /xterm-addon-unicode11@0.6.0(xterm@5.2.0): - resolution: {integrity: sha512-5pkb8YoS/deRtNqQRw8t640mu+Ga8B2MG3RXGQu0bwgcfr8XiXIRI880TWM49ICAHhTmnOLPzIIBIjEnCq7k2A==} - peerDependencies: - xterm: ^5.0.0 - dependencies: - xterm: 5.2.0 - dev: false - - /xterm-addon-web-links@0.9.0(xterm@5.2.0): - resolution: {integrity: sha512-LIzi4jBbPlrKMZF3ihoyqayWyTXAwGfu4yprz1aK2p71e9UKXN6RRzVONR0L+Zd+Ik5tPVI9bwp9e8fDTQh49Q==} - peerDependencies: - xterm: ^5.0.0 - dependencies: - xterm: 5.2.0 - dev: false - - /xterm-addon-webgl@0.16.0(xterm@5.2.0): - resolution: {integrity: sha512-E8cq1AiqNOv0M/FghPT+zPAEnvIQRDbAbkb04rRYSxUym69elPWVJ4sv22FCLBqM/3LcrmBLl/pELnBebVFKgA==} - peerDependencies: - xterm: ^5.0.0 - dependencies: - xterm: 5.2.0 - dev: false - - /xterm@5.2.0: - resolution: {integrity: sha512-C1NXTZYfXPTXzF7uw7Ao6/IFGrtAkHv4e/PCQRpgYHyMobvaRs3nJNGK32hX/skdMUQJ6yhSnyzfmWCQwG9qvg==} - dev: false - /y18n@5.0.8: resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==} engines: {node: '>=10'} diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index 4d99b3e4862f7..f7ac8b967f532 100644 --- 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 { Terminal } from "@xterm/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 { 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(null); // The terminal is maintained as a state to trigger certain effects when it // updates. - const [terminal, setTerminal] = useState(); + const [terminal, setTerminal] = useState(); const [connectionStatus, setConnectionStatus] = useState("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, From 9aceff798b46ca210e8c22d8cca881932867ec95 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 1 Jul 2024 19:43:42 +0000 Subject: [PATCH 2/4] =?UTF-8?q?=F0=9F=A7=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- site/pnpm-lock.yaml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml index 88430889e678c..be142343d3f59 100644 --- a/site/pnpm-lock.yaml +++ b/site/pnpm-lock.yaml @@ -54,9 +54,6 @@ dependencies: '@tanstack/react-query-devtools': specifier: 4.35.3 version: 4.35.3(@tanstack/react-query@4.35.3)(react-dom@18.2.0)(react@18.2.0) - '@types/file-saver': - specifier: 2.0.7 - version: 2.0.7 '@xterm/addon-canvas': specifier: 0.7.0 version: 0.7.0(@xterm/xterm@5.5.0) @@ -275,6 +272,9 @@ devDependencies: '@types/express': specifier: 4.17.17 version: 4.17.17 + '@types/file-saver': + specifier: 2.0.7 + version: 2.0.7 '@types/jest': specifier: 29.5.2 version: 29.5.2 @@ -5275,7 +5275,7 @@ packages: /@types/file-saver@2.0.7: resolution: {integrity: sha512-dNKVfHd/jk0SkR/exKGj2ggkB45MAkzvWCaqLUUgkyjITkGNzH8H+yUwr+BLJUBjZOe9w8X3wgmXhZDRg1ED6A==} - dev: false + dev: true /@types/find-cache-dir@3.2.1: resolution: {integrity: sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw==} From 9f49358059ddb3c4f580435c8b20e656e760b410 Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 1 Jul 2024 19:50:46 +0000 Subject: [PATCH 3/4] :| --- site/src/pages/TerminalPage/TerminalPage.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/src/pages/TerminalPage/TerminalPage.tsx b/site/src/pages/TerminalPage/TerminalPage.tsx index f7ac8b967f532..4027c04e78b74 100644 --- a/site/src/pages/TerminalPage/TerminalPage.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.tsx @@ -1,11 +1,11 @@ import "@xterm/xterm/css/xterm.css"; import type { Interpolation, Theme } from "@emotion/react"; -import { Terminal } from "@xterm/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 { Terminal } from "@xterm/xterm"; import { type FC, useCallback, useEffect, useRef, useState } from "react"; import { Helmet } from "react-helmet-async"; import { useQuery } from "react-query"; From 896eb7dd2dd92e112b6a511e2ac08180e6e2d9af Mon Sep 17 00:00:00 2001 From: McKayla Washburn Date: Mon, 1 Jul 2024 21:47:14 +0000 Subject: [PATCH 4/4] fix e2e test --- site/e2e/tests/webTerminal.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/site/e2e/tests/webTerminal.spec.ts b/site/e2e/tests/webTerminal.spec.ts index d4221ae036db3..f0bac8f5a3849 100644 --- 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,