html: upgrade to xterm 5.0

html/package.json

@@ -50,11 +50,12 @@
     "file-saver": "^2.0.5",
     "preact": "^10.11.2",
     "whatwg-fetch": "^3.6.2",
-    "xterm": "^4.19.0",
-    "xterm-addon-fit": "^0.5.0",
-    "xterm-addon-image": "^0.1.3",
-    "xterm-addon-web-links": "^0.6.0",
-    "xterm-addon-webgl": "^0.12.0",
+    "xterm": "^5.0.0",
+    "xterm-addon-canvas": "^0.2.0",
+    "xterm-addon-fit": "^0.6.0",
+    "xterm-addon-image": "^0.2.0",
+    "xterm-addon-web-links": "^0.7.0",
+    "xterm-addon-webgl": "^0.13.0",
     "zmodem.js": "^0.1.10"
   }
 }

html/src/components/app.tsx

@@ -42,6 +42,7 @@ const termOptions = {
         brightCyan: '#37e6e8',
         brightWhite: '#f1f1f0',
     } as ITheme,
+    allowProposedApi: true,
 } as ITerminalOptions;
 
 export class App extends Component {

html/src/components/terminal/index.tsx

@@ -1,8 +1,9 @@
 import { bind } from 'decko';
 import { Component, h } from 'preact';
-import { ITerminalOptions, RendererType, Terminal } from 'xterm';
-import { FitAddon } from 'xterm-addon-fit';
+import { ITerminalOptions, Terminal } 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 { ImageAddon } from 'xterm-addon-image';
 import { OverlayAddon } from './overlay';
@@ -36,8 +37,10 @@ const enum Command {
     RESUME = '3',
 }
 
+export type RendererType = 'dom' | 'canvas' | 'webgl';
+
 export interface ClientOptions {
-    rendererType: 'dom' | 'canvas' | 'webgl';
+    rendererType: RendererType;
     disableLeaveAlert: boolean;
     disableResizeOverlay: boolean;
     titleFixed: string;
@@ -61,6 +64,7 @@ export class Xterm extends Component<Props> {
     private overlayAddon: OverlayAddon;
     private zmodemAddon: ZmodemAddon;
     private webglAddon: WebglAddon;
+    private canvasAddon: CanvasAddon;
 
     private socket: WebSocket;
     private token: string;
@@ -212,9 +216,16 @@ export class Xterm extends Component<Props> {
     }
 
     @bind
-    private setRendererType(value: 'webgl' | RendererType) {
+    private setRendererType(value: RendererType) {
         const { terminal } = this;
-
+        const disposeCanvasRenderer = () => {
+            try {
+                this.canvasAddon?.dispose();
+            } catch {
+                // ignore
+            }
+            this.canvasAddon = undefined;
+        };
         const disposeWebglRenderer = () => {
             try {
                 this.webglAddon?.dispose();
@@ -223,33 +234,50 @@ export class Xterm extends Component<Props> {
             }
             this.webglAddon = undefined;
         };
+        const enableCanvasRenderer = () => {
+            if (this.canvasAddon) return;
+            this.canvasAddon = new CanvasAddon();
+            disposeWebglRenderer();
+            try {
+                this.terminal.loadAddon(this.canvasAddon);
+                console.log(`[ttyd] canvas renderer loaded`);
+            } catch (e) {
+                console.log(`[ttyd] canvas renderer could not be loaded, falling back to dom renderer`, e);
+                disposeCanvasRenderer();
+            }
+        };
+        const enableWebglRenderer = () => {
+            if (this.webglAddon) return;
+            this.webglAddon = new WebglAddon();
+            disposeCanvasRenderer();
+            try {
+                this.webglAddon.onContextLoss(() => {
+                    this.webglAddon?.dispose();
+                });
+                terminal.loadAddon(this.webglAddon);
+                console.log(`[ttyd] WebGL renderer loaded`);
+            } catch (e) {
+                console.log(`[ttyd] WebGL renderer could not be loaded, falling back to canvas renderer`, e);
+                disposeWebglRenderer();
+                enableCanvasRenderer();
+            }
+        };
 
         switch (value) {
-            case 'webgl':
-                if (this.webglAddon) return;
-                try {
-                    if (window.WebGL2RenderingContext && document.createElement('canvas').getContext('webgl2')) {
-                        this.webglAddon = new WebglAddon();
-                        this.webglAddon.onContextLoss(() => {
-                            disposeWebglRenderer();
-                        });
-                        terminal.loadAddon(this.webglAddon);
-                        console.log(`[ttyd] WebGL renderer enabled`);
-                    }
-                } catch (e) {
-                    console.warn(`[ttyd] webgl2 init error`, e);
-                }
+            case 'canvas':
+                enableCanvasRenderer();
                 break;
+            case 'webgl':
+                enableWebglRenderer();
+                break;
+            case 'dom':
             default:
-                disposeWebglRenderer();
-                console.log(`[ttyd] option: rendererType=${value}`);
-                terminal.options.rendererType = value;
                 break;
         }
     }
 
     @bind
-    private applyOptions(options: any) {
+    private applyOptions(options: ITerminalOptions) {
         const { terminal, fitAddon } = this;
 
         Object.keys(options).forEach(key => {
@@ -373,7 +401,8 @@ export class Xterm extends Component<Props> {
                 break;
             case Command.SET_PREFERENCES:
                 const prefs = JSON.parse(textDecoder.decode(data));
-                this.applyOptions(Object.assign({}, this.props.clientOptions, prefs));
+                const options = Object.assign({}, this.props.clientOptions, prefs) as ITerminalOptions;
+                this.applyOptions(options);
                 break;
             default:
                 console.warn(`[ttyd] unknown command: ${cmd}`);

html/src/components/zmodem/index.tsx

@@ -84,7 +84,7 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
 
     @bind
     private zmodemReset() {
-        this.terminal.setOption('disableStdin', false);
+        this.terminal.options.disableStdin = false;
 
         if (this.keyDispose) {
             this.keyDispose.dispose();
@@ -127,7 +127,7 @@ export class ZmodemAddon extends Component<Props, State> implements ITerminalAdd
     @bind
     private zmodemDetect(detection: Zmodem.Detection): void {
         const { terminal, receiveFile, zmodemReset } = this;
-        terminal.setOption('disableStdin', true);
+        terminal.options.disableStdin = true;
 
         this.keyDispose = terminal.onKey(e => {
             const event = e.domEvent;

html/yarn.lock

@@ -7246,30 +7246,35 @@ xtend@~4.0.0, xtend@~4.0.1:
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-xterm-addon-fit@^0.5.0:
-  version "0.5.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-fit/-/xterm-addon-fit-0.5.0.tgz#2d51b983b786a97dcd6cde805e700c7f913bc596"
-  integrity sha512-DsS9fqhXHacEmsPxBJZvfj2la30Iz9xk+UKjhQgnYNkrUIN5CYLbw7WEfz117c7+S86S/tpHPfvNxJsF5/G8wQ==
+xterm-addon-canvas@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-canvas/-/xterm-addon-canvas-0.2.0.tgz#ba0080d4071f172f94e8c0b5e6151dd7e386f1a1"
+  integrity sha512-b4tMT05US9Rlqv6R0XZTHsfq8MRKzwxITwpvckuod/l4lokcCokHPbgpYAytOgrzqkzWjYI+Ol8en6cMGf8ncg==
 
-xterm-addon-image@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/xterm-addon-image/-/xterm-addon-image-0.1.3.tgz#20593d93b51ab3408debb31f66f8700a2e60ed2d"
-  integrity sha512-9J+DnI/MlanAv+gaaTcTXcqXK8fU/FYiWbaL0C5+YY2lbflpGSk7XV4K95txbix4AdV85RfIDByUm7VJZRWs8g==
-
-xterm-addon-web-links@^0.6.0:
+xterm-addon-fit@^0.6.0:
   version "0.6.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-web-links/-/xterm-addon-web-links-0.6.0.tgz#0296cb6c99588847894670d998c9ea6a6aeb26ee"
-  integrity sha512-H6XzjWWZu8FBo+fnYpxdPk9w5M6drbsvwPEJZGRS38MihiQaVFpKlCMKdfRgDbKGE530tw1yH54rhpZfHgt2/A==
+  resolved "https://registry.npmmirror.com/xterm-addon-fit/-/xterm-addon-fit-0.6.0.tgz#142e1ce181da48763668332593fc440349c88c34"
+  integrity sha512-9/7A+1KEjkFam0yxTaHfuk9LEvvTSBi0PZmEkzJqgafXPEXL9pCMAVV7rB09sX6ATRDXAdBpQhZkhKj7CGvYeg==
 
-xterm-addon-webgl@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/xterm-addon-webgl/-/xterm-addon-webgl-0.12.0.tgz#2fba8d31890a122adafa1c2fb945482e2ae12973"
-  integrity sha512-3P5ihdjPnxH6Wrvqjki9UD+duoVrp1fvnO/pSpXP2F1L2GwY6TDNExgj8Yg141vMCNgQbcVqmsTLYEYZxjY92A==
+xterm-addon-image@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-image/-/xterm-addon-image-0.2.0.tgz#47f58a522c7d21c7b2fc7a2d18aff324461974f1"
+  integrity sha512-rGbwUcwnJQqN1LTdEhqUS83xtBpApUWOJISjN/Efbg8TplqdXsHOVDmEcnLvhBn5cCzAZIqD2OZaan1+cI7mWA==
 
-xterm@^4.19.0:
-  version "4.19.0"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-4.19.0.tgz#c0f9d09cd61de1d658f43ca75f992197add9ef6d"
-  integrity sha512-c3Cp4eOVsYY5Q839dR5IejghRPpxciGmLWWaP9g+ppfMeBChMeLa1DCA+pmX/jyDZ+zxFOmlJL/82qVdayVoGQ==
+xterm-addon-web-links@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-web-links/-/xterm-addon-web-links-0.7.0.tgz#dceac36170605f9db10a01d716bd83ee38f65c17"
+  integrity sha512-6PqoqzzPwaeSq22skzbvyboDvSnYk5teUYEoKBwMYvhbkwOQkemZccjWHT5FnNA8o1aInTc4PRYAl4jjPucCKA==
+
+xterm-addon-webgl@^0.13.0:
+  version "0.13.0"
+  resolved "https://registry.npmmirror.com/xterm-addon-webgl/-/xterm-addon-webgl-0.13.0.tgz#b1d42ec454390ad8595aa8c8dde714b98a5eb896"
+  integrity sha512-xL4qBQWUHjFR620/8VHCtrTMVQsnZaAtd1IxFoiKPhC63wKp6b+73a45s97lb34yeo57PoqZhE9Jq5pB++ksPQ==
+
+xterm@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmmirror.com/xterm/-/xterm-5.0.0.tgz#0af50509b33d0dc62fde7a4ec17750b8e453cc5c"
+  integrity sha512-tmVsKzZovAYNDIaUinfz+VDclraQpPUnAME+JawosgWRMphInDded/PuY0xmU5dOhyeYZsI0nz5yd8dPYsdLTA==
 
 y18n@^3.2.1:
   version "3.2.2"