Merge pull request #303 from x1unix/feat/xterm

Use XTerm for program output

Author: x1unix

README.md

@@ -2,6 +2,7 @@
 
 [![Docker Hub](https://img.shields.io/docker/pulls/x1unix/go-playground.svg)](https://hub.docker.com/r/x1unix/go-playground)
 [![Docker Hub](https://img.shields.io/docker/v/x1unix/go-playground.svg?sort=semver)](https://hub.docker.com/r/x1unix/go-playground)
+[![Better Stack Badge](https://uptime.betterstack.com/status-badges/v1/monitor/100nk.svg)](https://uptime.betterstack.com/?utm_source=status_badge)
 [![Coverage Status](https://coveralls.io/repos/github/x1unix/go-playground/badge.svg?branch=dev)](https://coveralls.io/github/x1unix/go-playground?branch=dev)
 [![Goreportcard](https://goreportcard.com/badge/github.com/x1unix/go-playground)](https://goreportcard.com/report/github.com/x1unix/go-playground)
 [![StandWithUkraine](https://rg.gosu.cc/vshymanskyy/StandWithUkraine/main/badges/StandWithUkraine.svg)](https://github.com/vshymanskyy/StandWithUkraine/blob/main/docs/README.md)
@@ -15,6 +16,7 @@ Improved Go Playground powered by Monaco Editor and React - [https://goplay.tool
 * 🌚 Dark theme
 * 💡 Code autocomplete
 * ⌨️ VIM mode support
+* 🌈 Color and image output
 * 💾 Load and save files
 * 📔 Snippets and tutorials
 * ⚙ Customization (fonts, ligatures, etc)

web/package.json

@@ -11,6 +11,11 @@
     "@types/jest": "^27.4.0",
     "@types/react": "^17.0.39",
     "@types/react-dom": "^17.0.11",
+    "@xterm/addon-canvas": "^0.6.0-beta.1",
+    "@xterm/addon-fit": "^0.9.0-beta.1",
+    "@xterm/addon-image": "^0.7.0-beta.1",
+    "@xterm/addon-webgl": "^0.17.0-beta.1",
+    "@xterm/xterm": "^5.4.0-beta.1",
     "axios": "^1.6.0",
     "circular-dependency-plugin": "^5.2.2",
     "clsx": "^1.1.1",

web/src/components/core/Header/Header.tsx

@@ -4,16 +4,18 @@ import {
   ICommandBarItemProps, Stack,
 } from '@fluentui/react';
 
-import apiClient, { VersionsInfo } from "~/services/api";
+import apiClient, { type VersionsInfo } from "~/services/api";
 import { newAddNotificationAction, NotificationType } from "~/store/notifications";
-import SettingsModal, { SettingsChanges } from '~/components/settings/SettingsModal';
+import SettingsModal, { type SettingsChanges } from '~/components/settings/SettingsModal';
 import ThemeableComponent from '~/components/utils/ThemeableComponent';
 import AboutModal from '~/components/modals/AboutModal';
 import RunTargetSelector from '~/components/inputs/RunTargetSelector';
 import SharePopup from '~/components/utils/SharePopup';
+
+import { dispatchTerminalSettingsChange } from '~/store/terminal';
 import {
   Connect,
-  Dispatcher,
+  type Dispatcher,
   dispatchToggleTheme,
   formatFileDispatcher,
   newCodeImportDispatcher,
@@ -25,6 +27,7 @@ import {
   saveFileDispatcher,
   shareSnippetDispatcher
 } from '~/store';
+
 import { getSnippetsMenuItems, SnippetMenuItem } from './utils';
 
 import './Header.css';
@@ -242,6 +245,10 @@ export class Header extends ThemeableComponent<any, HeaderState> {
       this.props.dispatch(newSettingsChangeDispatcher(changes.settings));
     }
 
+    if (changes.terminal) {
+      this.props.dispatch(dispatchTerminalSettingsChange(changes.terminal));
+    }
+
     this.setState({ showSettings: false });
   }
 

web/src/components/core/Panel/PanelHeader.tsx

@@ -1,6 +1,6 @@
 import React, {useContext} from 'react';
 import {ITheme, ThemeContext} from '@fluentui/react';
-import PanelAction, {PanelActionProps} from '@components/core/Panel/PanelAction';
+import PanelAction, {PanelActionProps} from '~/components/core/Panel/PanelAction';
 import './PanelHeader.css';
 
 interface Props {

web/src/components/inspector/Console/Console.css

@@ -0,0 +1,48 @@
+.app-Console {
+  flex: 1 1 auto;
+  position: relative;
+  box-sizing: border-box;
+
+  --terminal-padding-x: 15px;
+}
+
+.app-Console__xterm {
+  position: absolute;
+  inset: 0;
+}
+
+.app-Console .terminal > * {
+  padding: 0 var(--terminal-padding-x);
+}
+
+/**
+ xterm.js canvas plugin fixes.
+
+ The plugin places a few canvas elements inside with absolute positioning
+ relative to parent and doesn't respect parent's paddings.
+ */
+.app-Console .xterm .xterm-screen canvas {
+  transform: translate3d(var(--terminal-padding-x), 0, 0);
+}
+
+/**
+Copy button for touch devices
+ */
+.app-Console__copy {
+  position: absolute;
+  display: none;
+  z-index: 999;
+  top: 0;
+  right: var(--terminal-padding-x);
+}
+
+.app-Console__copy[hidden] {
+  display: none;
+}
+
+/* Enable copy button only on touch devices */
+@media (hover: none) {
+  .app-Console__copy {
+      display: block;
+  }
+}

web/src/components/inspector/Console/Console.tsx

@@ -0,0 +1,239 @@
+import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react';
+import copy from 'copy-to-clipboard';
+
+import {DefaultButton, useTheme} from '@fluentui/react';
+
+import type {ITerminalAddon, ITerminalOptions} from '@xterm/xterm';
+import {FitAddon} from '@xterm/addon-fit';
+import {ImageAddon} from '@xterm/addon-image';
+import {CanvasAddon} from '@xterm/addon-canvas';
+import {WebglAddon} from '@xterm/addon-webgl';
+
+import type {StatusState} from '~/store';
+import {RenderingBackend} from '~/store/terminal';
+import {useXtermTheme, XTerm} from '~/components/utils/XTerm';
+
+import {formatEvalEvent} from './format';
+import {createDebounceResizeObserver} from './utils';
+
+import './Console.css';
+
+const RESIZE_DELAY = 50;
+
+const imageAddonConfig = {
+    enableSizeReports: true,
+    sixelSupport: true,
+    sixelScrolling: true,
+    iipSupport: true,
+};
+
+const config: ITerminalOptions = {
+  convertEol: true,
+};
+
+interface Props {
+  status?: StatusState
+  fontFamily: string
+  fontSize: number
+  backend: RenderingBackend
+}
+
+const getAddonFromBackend = (backend: RenderingBackend): ITerminalAddon | null => {
+  switch (backend) {
+  case RenderingBackend.WebGL:
+    return new WebglAddon();
+  case RenderingBackend.Canvas:
+    return new CanvasAddon();
+  default:
+    return null;
+  }
+}
+
+const CopyButton: React.FC<{
+  onClick?: () => void
+  hidden?: boolean
+}> = ({onClick, hidden}) => {
+  const theme = useTheme();
+  const styles = useMemo(() => ({
+    root: {
+      color: theme?.palette.neutralPrimary,
+      marginLeft: 'auto',
+      marginTop: '4px',
+      marginRight: '2px',
+      padding: '4px 8px',
+      minWidth: 'initial'
+    },
+    rootHovered: {
+      color: theme?.palette.neutralDark
+    }
+  }), [theme]);
+  return (
+    <DefaultButton
+        className='app-Console__copy'
+        iconProps={{iconName: 'Copy'}}
+        ariaLabel='Copy'
+        onClick={onClick}
+        styles={styles}
+        hidden={hidden}
+    />
+  );
+}
+
+/**
+ * Console is Go program events output component based on xterm.js
+ */
+export const Console: React.FC<Props> = ({fontFamily, fontSize, status, backend}) => {
+  const theme = useXtermTheme();
+  const [offset, setOffset] = useState(0);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const xtermRef = useRef<XTerm>(null);
+  const fitAddonRef = useRef(new FitAddon());
+  const imageAddonRef = useRef(new ImageAddon(imageAddonConfig));
+
+  const resizeObserver = useMemo(() => (
+    createDebounceResizeObserver(() => {
+      fitAddonRef.current.fit();
+    }, RESIZE_DELAY)
+  ), [fitAddonRef]);
+
+  const isClean = !status?.dirty;
+  const events = status?.events;
+  const terminal = xtermRef.current?.terminal;
+  const elemRef = xtermRef?.current?.terminalRef;
+
+  const copySelection = useCallback(() => {
+    if (!terminal) {
+      return;
+    }
+
+    const shouldTrim = !terminal.hasSelection();
+    if (!terminal.hasSelection()) {
+      terminal.selectAll();
+    }
+
+    const str = terminal.getSelection();
+    terminal.clearSelection();
+
+    // TODO: notify about copy result
+    copy(shouldTrim ? str.trim() : str);
+  }, [terminal]);
+
+  // Track output events
+  useEffect(() => {
+    if (!events?.length || !terminal) {
+      setOffset(0);
+      terminal?.clear();
+      terminal?.reset();
+      return;
+    }
+
+    if (offset === 0) {
+      terminal?.clear();
+      terminal?.reset();
+    }
+
+    const batch = events?.slice(offset);
+    if (!batch) {
+      return;
+    }
+
+    batch.map(formatEvalEvent).forEach((msg) => terminal?.write(msg));
+    terminal?.scrollToBottom();
+    setOffset(offset + batch.length);
+  }, [terminal, offset, events ])
+
+  // Reset output offset on clean
+  useEffect(() => {
+    if (isClean) {
+      setOffset(0)
+    }
+
+  }, [isClean])
+
+  // Track terminal resize
+  useEffect(() => {
+    if (!elemRef?.current) {
+      resizeObserver.disconnect();
+      return;
+    }
+
+    resizeObserver.observe(elemRef.current);
+    return () => {
+      resizeObserver.disconnect();
+    }
+  }, [elemRef, resizeObserver]);
+
+  // Theme
+  useEffect(() => {
+    if (!terminal) {
+      return;
+    }
+
+    terminal.options = {
+      theme,
+      fontSize,
+      fontFamily,
+    };
+  }, [theme, terminal, fontFamily, fontSize]);
+
+  // Rendering backend
+  useEffect(() => {
+    if (!terminal) {
+      return;
+    }
+
+    console.log('xterm: switched backend:', backend);
+    const addon = getAddonFromBackend(backend);
+    if (!addon) {
+      return;
+    }
+
+    terminal.loadAddon(addon);
+    return () => {
+      console.log('xterm: unloading old backend:', backend);
+      addon.dispose();
+    };
+  }, [terminal, backend]);
+
+  // Register button on focus
+  useEffect(() => {
+    if (!terminal?.textarea) {
+      return;
+    }
+
+    terminal.textarea.addEventListener('focus', () => {
+      setIsFocused(true);
+    });
+
+    terminal.textarea.addEventListener('blur', () => {
+      // Delay before blur to keep enough time for btn click
+      setTimeout(() => setIsFocused(false), 150);
+    });
+
+    return () => setIsFocused(false);
+  }, [terminal?.textarea, setIsFocused]);
+
+  return (
+    <div className="app-Console">
+      <CopyButton
+          hidden={!isFocused}
+          onClick={copySelection}
+      />
+      <XTerm
+        ref={xtermRef}
+        className='app-Console__xterm'
+        addons={[
+            fitAddonRef.current,
+            imageAddonRef.current,
+        ]}
+        options={{
+          ...config,
+          theme,
+          fontSize,
+          fontFamily,
+        }}
+      />
+    </div>
+  );
+}