Update dependencies, including xterm.js

Author: ekzhang

package-lock.json

@@ -12,12 +12,12 @@
     "format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
   },
   "dependencies": {
-    "@fontsource-variable/inter": "^5.0.3",
+    "@fontsource-variable/inter": "^5.0.8",
     "@rgossiaux/svelte-headlessui": "^2.0.0",
     "@tldraw/vec": "^1.9.2",
     "@use-gesture/vanilla": "^10.2.27",
     "buffer": "^6.0.3",
-    "cbor-x": "^1.5.3",
+    "cbor-x": "^1.5.4",
     "firacode": "^6.2.0",
     "fontfaceobserver": "^2.3.0",
     "lodash-es": "^4.17.21",
@@ -26,29 +26,29 @@
     "svelte": "^3.59.2",
     "svelte-feather-icons": "^4.0.1",
     "xterm-addon-image": "^0.5.0",
-    "xterm-addon-web-links": "^0.8.0",
-    "xterm-addon-webgl": "^0.15.0"
+    "xterm-addon-web-links": "^0.9.0",
+    "xterm-addon-webgl": "^0.16.0"
   },
   "devDependencies": {
-    "@sveltejs/adapter-static": "2.0.2",
-    "@sveltejs/kit": "1.21.0",
-    "@types/lodash-es": "^4.17.7",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "autoprefixer": "^10.4.14",
+    "@sveltejs/adapter-static": "^2.0.3",
+    "@sveltejs/kit": "^1.24.1",
+    "@types/lodash-es": "^4.17.9",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
+    "autoprefixer": "^10.4.15",
     "cssnano": "^6.0.1",
-    "eslint": "^8.44.0",
-    "eslint-config-prettier": "^8.8.0",
+    "eslint": "^8.49.0",
+    "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.24",
+    "postcss": "^8.4.29",
     "postcss-load-config": "^4.0.1",
     "prettier": "2.8.8",
     "prettier-plugin-svelte": "2.10.1",
-    "svelte-check": "^3.4.4",
+    "svelte-check": "^3.5.1",
     "svelte-preprocess": "^5.0.4",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.6.0",
-    "typescript": "~5.1.6",
-    "vite": "^4.3.9"
+    "tailwindcss": "^3.3.3",
+    "tslib": "^2.6.2",
+    "typescript": "~5.2.2",
+    "vite": "^4.4.9"
   }
 }

package.json

@@ -404,9 +404,7 @@
         <div
           class="absolute w-5 h-5 -bottom-1 -right-1 cursor-nwse-resize"
           on:mousedown={(event) => {
-            const canvasEl = termElements[id].querySelector(
-              "canvas.xterm-cursor-layer",
-            );
+            const canvasEl = termElements[id].querySelector(".xterm-screen");
             if (canvasEl) {
               resizing = id;
               const r = canvasEl.getBoundingClientRect();

src/lib/Session.svelte

@@ -74,7 +74,13 @@
 
   function handleWheelSkipXTerm(event: WheelEvent) {
     event.preventDefault(); // Stop native macOS Chrome zooming on pinch.
+
+    // We stop the event from propagating to the main `.xterm` terminal element,
+    // so the xterm.js's event handlers do not fire and scroll the buffer.
     event.stopPropagation();
+
+    // However, we still want it to propagate upward to our pan/zoom handlers,
+    // so we re-dispatch the event higher up, skipping xterm.
     termEl?.dispatchEvent(new WheelEvent(event.type, event));
   }
 
@@ -162,10 +168,9 @@
     });
 
     // Hack: We artificially disable scrolling when the terminal is not focused.
-    const cursorLayer = termEl.querySelector(
-      ".xterm-cursor-layer",
-    )! as HTMLDivElement;
-    cursorLayer.addEventListener("wheel", handleWheelSkipXTerm);
+    // ("termEl" > div.terminal.xterm > div.xterm-screen)
+    const screenEl = termEl.querySelector(".xterm-screen")! as HTMLDivElement;
+    screenEl.addEventListener("wheel", handleWheelSkipXTerm);
 
     const focusObserver = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
@@ -176,7 +181,7 @@
           // The "focus" class is set directly by xterm.js, but there isn't any way to listen for it.
           const target = mutation.target as HTMLElement;
           const isFocused = target.classList.contains("focus");
-          setFocused(isFocused, cursorLayer);
+          setFocused(isFocused, screenEl);
         }
       }
     });