refactor: use xterm.js for display

pd4d10 · Jul 14, 2024 · adcb069 · adcb069
1 parent d5a80ff
commit adcb069
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -48,6 +48,9 @@
     "@types/redux-logger": "^3",
     "@types/universal-analytics": "^0.4.8",
     "@types/uuid": "^10.0.0",
+    "@xterm/addon-canvas": "^0.7.0",
+    "@xterm/addon-fit": "^0.10.0",
+    "@xterm/xterm": "^5.5.0",
     "electron": "^31.2.0",
     "electron-devtools-installer": "^3.2.0",
     "electron-update-notification": "^0.1.0",

diff --git a/src/main/actions.ts b/src/main/actions.ts
@@ -75,7 +75,6 @@ export const debug: ThunkActionCreator<AppInfo> = (app) => async (dispatch) => {
     (isError = false) =>
     (chunk: Buffer) => {
       // TODO: stderr colors
-      console.log(isError);
       dispatch({
         type: "session/logAppended",
         payload: {

diff --git a/src/renderer/session.tsx b/src/renderer/session.tsx
@@ -1,4 +1,5 @@
 import { appSelector, sessionSelector, useSelector } from "./store";
+import { Xterm } from "./xterm";
 import {
   Tabs,
   Tab,
@@ -113,18 +114,22 @@ export const Session: FC = () => {
                   </HTMLTable>
                 </div>
                 <Divider />
-                <Pre
+                <div
                   style={{
                     marginTop: 5,
                     flexGrow: 1,
                     overflow: "auto",
-                    userSelect: "text",
-                    fontFamily:
-                      "SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace",
                   }}
                 >
-                  {session.log}
-                </Pre>
+                  <Xterm
+                    content={session.log}
+                    options={{
+                      fontFamily:
+                        "SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace",
+                      convertEol: true,
+                    }}
+                  />
+                </div>
               </div>
             }
           />

diff --git a/src/renderer/store.ts b/src/renderer/store.ts
@@ -2,10 +2,11 @@ import { reducer, type State } from "../reducer";
 import { composeWithStateSync } from "electron-redux/renderer";
 import * as rr from "react-redux";
 import { applyMiddleware, legacy_createStore } from "redux";
+import logger from "redux-logger";
 
 export const store = legacy_createStore(
   reducer,
-  composeWithStateSync(applyMiddleware()),
+  composeWithStateSync(applyMiddleware(logger)),
 );
 
 export const useSelector = rr.useSelector.withTypes<State>();

diff --git a/src/renderer/xterm.tsx b/src/renderer/xterm.tsx
@@ -0,0 +1,32 @@
+import { CanvasAddon } from "@xterm/addon-canvas";
+import { FitAddon } from "@xterm/addon-fit";
+import { Terminal, type ITerminalOptions } from "@xterm/xterm";
+import "@xterm/xterm/css/xterm.css";
+import { useEffect, useRef, type FC } from "react";
+
+export const Xterm: FC<{ content: string; options?: ITerminalOptions }> = ({
+  content,
+  options,
+}) => {
+  const domRef = useRef<HTMLDivElement>(null);
+  const termRef = useRef<Terminal>();
+
+  useEffect(() => {
+    const term = new Terminal(options);
+    term.loadAddon(new FitAddon());
+    term.loadAddon(new CanvasAddon());
+    term.open(domRef.current!);
+    termRef.current = term;
+
+    return () => {
+      termRef.current?.dispose();
+    };
+  }, []);
+
+  useEffect(() => {
+    termRef.current?.clear();
+    termRef.current?.writeln(content);
+  }, [content]);
+
+  return <div ref={domRef} />;
+};
diff --git a/yarn.lock b/yarn.lock
@@ -1147,6 +1147,21 @@
   resolved "https://registry.npmmirror.com/@xobotyi/scrollbar-width/-/scrollbar-width-1.9.5.tgz#80224a6919272f405b87913ca13b92929bdf3c4d"
   integrity sha512-N8tkAACJx2ww8vFMneJmaAgmjAG1tnVBZJRLRcx061tmsLRZHSEZSLuGWnwPtunsSLvSqXQ2wfp7Mgqg1I+2dQ==
 
+"@xterm/addon-canvas@^0.7.0":
+  version "0.7.0"
+  resolved "https://registry.npmmirror.com/@xterm/addon-canvas/-/addon-canvas-0.7.0.tgz#d3a3835f3634e0106e108661315ae14da23e8dd7"
+  integrity sha512-LF5LYcfvefJuJ7QotNRdRSPc9YASAVDeoT5uyXS/nZshZXjYplGXRECBGiznwvhNL2I8bq1Lf5MzRwstsYQ2Iw==
+
+"@xterm/addon-fit@^0.10.0":
+  version "0.10.0"
+  resolved "https://registry.npmmirror.com/@xterm/addon-fit/-/addon-fit-0.10.0.tgz#bebf87fadd74e3af30fdcdeef47030e2592c6f55"
+  integrity sha512-UFYkDm4HUahf2lnEyHvio51TNGiLK66mqP2JoATy7hRZeXaGMRDr00JiSF7m63vR5WKATF605yEggJKsw0JpMQ==
+
+"@xterm/xterm@^5.5.0":
+  version "5.5.0"
+  resolved "https://registry.npmmirror.com/@xterm/xterm/-/xterm-5.5.0.tgz#275fb8f6e14afa6e8a0c05d4ebc94523ff775396"
+  integrity sha512-hqJHYaQb5OptNunnyAnkHyM8aCjZ1MEIDTQu1iIbbTD/xops91NB5yq1ZK/dC2JDbVWtF23zUtl9JE2NqwT87A==
+
 abbrev@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmmirror.com/abbrev/-/abbrev-1.1.1.tgz#f8f2c887ad10bf67f634f005b6987fed3179aac8"