The great summer package update (gitpod-io#20)

Author: filiptronicek

.gitpod.Dockerfile

@@ -1,5 +1,5 @@
 FROM gitpod/workspace-node
-RUN bash -c 'VERSION="16.19.0" \
+RUN bash -c 'VERSION="20.15.1" \
     && source $HOME/.nvm/nvm.sh && nvm install $VERSION \
     && nvm use $VERSION && nvm alias default $VERSION'
 

.nvmrc

@@ -1 +1 @@
-v16.19.0
+v20.15.1

Dockerfile

@@ -2,7 +2,7 @@
 # Licensed under the GNU Affero General Public License (AGPL).
 # See License-AGPL.txt in the project root for license information.
 
-FROM node:16 as ide_installer
+FROM node:20 as ide_installer
 
 ARG XTERM_COMMIT
 

package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview",
     "start": "yarn package && node dist/index.cjs",
     "package:client": "rimraf out/ && yarn build && mkdir -p out/ && cp -r index.html dist/ assets/ out/",
-    "package:server": "ncc build -m server.cjs -o dist/",
+    "package:server": "ncc build -m server.cjs -o dist/ --target es2022 --source-map",
     "inject-commit": "git rev-parse HEAD > dist/commit.txt",
     "package": "yarn build && yarn package:server && yarn inject-commit"
   },
@@ -28,36 +28,39 @@
   "homepage": "https://github.com/gitpod-io/xterm-web-ide#readme",
   "dependencies": {
     "@gitpod/gitpod-protocol": "^0.1.5-main.6983",
+    "@xterm/addon-attach": "^0.11.0",
+    "@xterm/addon-canvas": "^0.7.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/addon-ligatures": "^0.9.0",
+    "@xterm/addon-unicode11": "^0.8.0",
+    "@xterm/addon-web-links": "^0.11.0",
+    "@xterm/addon-webgl": "^0.18.0",
+    "@xterm/xterm": "^5.5.0",
     "buffer": "^6.0.3",
-    "express-rate-limit": "^6.7.0",
+    "express-rate-limit": "^7.3.1",
     "fetch-retry": "^5.0.3",
-    "node": "16",
-    "reconnecting-websocket": "^4.4.0",
-    "xterm": "^5.1.0",
-    "xterm-addon-attach": "^0.8.0",
-    "xterm-addon-canvas": "^0.4.0-beta.7",
-    "xterm-addon-fit": "^0.7.0",
-    "xterm-addon-web-links": "^0.8.0",
-    "xterm-addon-webgl": "^0.15.0-beta.7"
+    "lodash": "^4.17.21",
+    "node": "20",
+    "reconnecting-websocket": "^4.4.0"
   },
   "devDependencies": {
-    "@open-wc/building-rollup": "^2.2.1",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-terser": "^0.4.0",
-    "@rollup/plugin-typescript": "^11.0.0",
-    "@vercel/ncc": "^0.36.1",
+    "@open-wc/building-rollup": "^3.0.2",
+    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@types/lodash": "^4.17.7",
+    "@types/node": "^20.14.11",
+    "@vercel/ncc": "^0.38.1",
     "deepmerge": "^4.3.0",
-    "express": "^4.18.2",
+    "express": "^4.19.2",
     "express-ws": "^5.0.2",
-    "node-pty": "^0.10.1",
+    "node-pty": "^1.0.0",
     "rimraf": "^4.1.2",
-    "rollup": "^3.15.0",
+    "rollup": "^4.19.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
-    "rollup-plugin-polyfill-node": "^0.12.0",
+    "rollup-plugin-polyfill-node": "^0.13.0",
     "sass": "^1.58.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.5.3",
-    "xterm-addon-ligatures": "^0.6.0",
-    "xterm-addon-unicode11": "^0.5.0"
+    "typescript": "^5.5.3",
+    "vite": "^5.3.4"
   }
 }

server.cjs

@@ -20,7 +20,7 @@ const config = {
 
 const rateLimiter = rateLimit({
   windowMs: 60 * 1000,
-  max: 50,
+  limit: 50,
   message: "Too many requests from this IP, please try again after 1 minute",
   standardHeaders: true,
   legacyHeaders: false,
@@ -107,7 +107,6 @@ function startServer() {
   });
 
   app.post('/terminals/:pid/size', rateLimiter, (req, res) => {
-
     if (!req.query.cols || !req.query.rows) {
       res.statusCode = 400;
       res.send('`cols` and `rows` are required');

src/client.ts

@@ -4,18 +4,19 @@ import type { IDEFrontendState } from '@gitpod/gitpod-protocol/lib/ide-frontend-
 
 import type ReconnectingWebSocket from "reconnecting-websocket";
 import fetchBuilder from "fetch-retry";
-import type { Terminal, ITerminalOptions, ITerminalAddon } from "xterm";
+import type { Terminal, ITerminalOptions, ITerminalAddon } from "@xterm/xterm";
 
-import { AttachAddon } from "xterm-addon-attach";
-import { FitAddon } from "xterm-addon-fit";
+import { AttachAddon } from "@xterm/addon-attach";
+import { FitAddon } from "@xterm/addon-fit";
 
 import { resizeRemoteTerminal } from "./lib/remote";
 import { IXtermWindow } from "./lib/types";
 import { webLinksHandler } from "./lib/addons";
 import { initiateRemoteCommunicationChannelSocket } from "./lib/remote";
 import { Emitter } from '@gitpod/gitpod-protocol/lib/util/event';
 import { DisposableCollection } from '@gitpod/gitpod-protocol/lib/util/disposable';
-import { debounce, isWindows } from './lib/helpers';
+import { isWindows } from './lib/helpers';
+import debounce from "lodash/debounce"
 
 const onDidChangeState = new Emitter<void>();
 let state: IDEFrontendState = "initializing" as IDEFrontendState;
@@ -24,11 +25,11 @@ const maxReconnectionRetries = 50;
 
 const fetchOptions = {
     retries: maxReconnectionRetries,
-    retryDelay: (attempt: number, _error: Error, _response: Response) => {
+    retryDelay: (attempt: number, _error: Error | null, _response: Response | null) => {
         return Math.pow(1.25, attempt) * 200;
     },
-    retryOn: (attempt: number, error: Error, response: Response) => {
-        if (error !== null || response.status >= 400) {
+    retryOn: (attempt: number, error: Error | null, response: Response | null) => {
+        if (error !== null || (response?.status ?? 0) >= 400) {
             console.log(`retrying, attempt number ${attempt + 1}, ${(Math.pow(1.25, attempt) * 300) / 1000}`);
             return true;
         } else {
@@ -59,17 +60,17 @@ export const webSocketSettings: ReconnectingWebSocket['_options'] = {
 const extraTerminalAddons: { [key: string]: ITerminalAddon } = {};
 
 (async () => {
-    extraTerminalAddons['ligatures'] = new (await import("xterm-addon-ligatures")).LigaturesAddon();
-    extraTerminalAddons['unicode'] = new (await import("xterm-addon-unicode11")).Unicode11Addon();
-    extraTerminalAddons['webLinks'] = new (await import("xterm-addon-web-links")).WebLinksAddon(webLinksHandler);
+    extraTerminalAddons['ligatures'] = new (await import("@xterm/addon-ligatures")).LigaturesAddon();
+    extraTerminalAddons['unicode'] = new (await import("@xterm/addon-unicode11")).Unicode11Addon();
+    extraTerminalAddons['webLinks'] = new (await import("@xterm/addon-web-links")).WebLinksAddon(webLinksHandler);
 })()
 
 async function initAddons(term: Terminal): Promise<void> {
     for (const addon of Object.values(extraTerminalAddons)) {
         term.loadAddon(addon);
     }
 
-    const webglRenderer = new (await import("xterm-addon-webgl")).WebglAddon;
+    const webglRenderer = new (await import("@xterm/addon-webgl")).WebglAddon;
     try {
         term.loadAddon(webglRenderer);
         console.debug("Loaded webgl renderer");
@@ -79,7 +80,7 @@ async function initAddons(term: Terminal): Promise<void> {
     } catch (e) {
         console.warn(`Webgl renderer could not be loaded. Falling back to the canvas renderer type.`, e);
         webglRenderer.dispose();
-        const canvasRenderer = new (await import("xterm-addon-canvas")).CanvasAddon;
+        const canvasRenderer = new (await import("@xterm/addon-canvas")).CanvasAddon;
         term.loadAddon(canvasRenderer);
     }
 
@@ -133,7 +134,7 @@ async function createTerminal(element: HTMLElement, toDispose: DisposableCollect
         element.removeChild(element.children[0]);
     }
 
-    const { Terminal } = (await import("xterm"));
+    const { Terminal } = (await import("@xterm/xterm"));
 
     term = new Terminal({
         windowsMode: isWindows,
@@ -191,7 +192,7 @@ async function createTerminal(element: HTMLElement, toDispose: DisposableCollect
         throw new Error("Couldn't set up a remote connection to the terminal process");
     }
 
-    const debouncedUpdateTerminalSize = debounce(() => updateTerminalSize(term), 200, true);
+    const debouncedUpdateTerminalSize = debounce(() => updateTerminalSize(term), 200, { trailing: true });
     window.onresize = () => debouncedUpdateTerminalSize();
 
     return { terminal: term, socket: terminalSocket };

src/lib/helpers.ts

@@ -1,34 +1,2 @@
-/**
- * Debounces a function by limiting the rate at which it is called.
- * The debounced function will be called immediately when first called,
- * and then at most once every `wait` milliseconds during subsequent calls.
- * If `trailing` is set to `true`, the function will also be called once
- * after the last event is triggered.
- *
- * @param {() => void} func - The function to be debounced.
- * @param {number} wait - The number of milliseconds to wait before allowing the function to be called again.
- * @param {boolean} trailing - Whether to call the function once after the last event is triggered.
- * @returns {() => void} - The debounced function.
- */
-export const debounce = (func: () => void, wait: number, trailing: boolean): () => void => {
-    let timeout: NodeJS.Timeout | null = null;
-
-    return () => {
-        const later = () => {
-            timeout = null;
-            if (trailing) {
-                func();
-            }
-        };
-
-        if (timeout === null) {
-            func();
-        } else {
-            clearTimeout(timeout);
-        }
-        timeout = setTimeout(later, wait);
-    };
-}
-
 export const isWindows =
     ["Windows", "Win16", "Win32", "WinCE"].includes(navigator.platform);

src/lib/types.ts

@@ -1,10 +1,10 @@
-import { AttachAddon } from 'xterm-addon-attach';
-import { FitAddon } from 'xterm-addon-fit';
-import { WebLinksAddon } from 'xterm-addon-web-links';
-import { WebglAddon } from 'xterm-addon-webgl';
-import { Unicode11Addon } from 'xterm-addon-unicode11';
-import { LigaturesAddon } from 'xterm-addon-ligatures';
-import { Terminal } from 'xterm';
+import { AttachAddon } from '@xterm/addon-attach';
+import { FitAddon } from '@xterm/addon-fit';
+import { WebLinksAddon } from '@xterm/addon-web-links';
+import { WebglAddon } from '@xterm/addon-webgl';
+import { Unicode11Addon } from '@xterm/addon-unicode11';
+import { LigaturesAddon } from '@xterm/addon-ligatures';
+import { Terminal } from '@xterm/xterm';
 import ReconnectingWebSocket from 'reconnecting-websocket';
 
 export type AddonType = "attach" | "fit" | "unicode11" | "web-links" | "webgl" | "ligatures";