feat: fallback mode without xterm.js (#463)

* feat: add terminal emulation toggle

* feat: add warning

* feat: implement fallback output

* fix: improve settings message

Author: x1unix

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

@@ -31,7 +31,7 @@ const config: ITerminalOptions = {
   convertEol: true,
 }
 
-interface Props {
+export interface ConsoleProps {
   status?: StatusState
   fontFamily: string
   fontSize: number
@@ -85,7 +85,7 @@ const CopyButton: React.FC<{
 /**
  * Console is Go program events output component based on xterm.js
  */
-export const Console: React.FC<Props> = ({ fontFamily, fontSize, status, backend }) => {
+export const Console: React.FC<ConsoleProps> = ({ fontFamily, fontSize, status, backend }) => {
   const theme = useXtermTheme()
   const [offset, setOffset] = useState(0)
   const [isFocused, setIsFocused] = useState(false)

web/src/components/features/inspector/FallbackOutput/FallbackOutput.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { mergeStyleSets, useTheme } from '@fluentui/react'
+import type { StatusState } from '~/store'
+import { OutputLine } from './OutputLine'
+
+interface Props {
+  status?: StatusState
+  fontFamily: string
+  fontSize: number
+}
+
+/**
+ * Fallback console without terminal escape sequence emulation.
+ */
+export const FallbackOutput: React.FC<Props> = ({ fontFamily, fontSize, status }) => {
+  const theme = useTheme()
+  const styles = mergeStyleSets({
+    container: {
+      flex: '1 1 auto',
+      boxSizing: 'border-box',
+      padding: '0, 15px',
+    },
+    programExitMsg: {
+      marginTop: '1rem',
+      display: 'inline-block',
+      color: theme.semanticColors.disabledText,
+    },
+  })
+
+  return (
+    <div className={styles.container} style={{ fontFamily, fontSize: `${fontSize}px` }}>
+      {status?.events?.map((event, i) => <OutputLine key={i} event={event} />)}
+      {!status?.running && <span className={styles.programExitMsg}>Program exited.</span>}
+    </div>
+  )
+}

web/src/components/features/inspector/FallbackOutput/OutputLine.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+
+import { mergeStyleSets } from '@fluentui/react'
+import type { EvalEvent } from '~/services/api'
+
+const imageSectionPrefix = 'IMAGE:'
+const base64RegEx = /^[A-Za-z0-9+/]+={0,2}$/
+
+const isImageLine = (message: string) => {
+  if (!message?.startsWith(imageSectionPrefix)) {
+    return [false, null]
+  }
+
+  const payload = message.substring(imageSectionPrefix.length).trim()
+  return [base64RegEx.test(payload), payload]
+}
+
+const styles = mergeStyleSets({
+  container: {
+    display: 'table',
+    width: '100%',
+    '&[data-event-kind="stderr"]': {
+      color: '#e22',
+    },
+  },
+  delay: {
+    color: '#666',
+    marginRight: '5px',
+    float: 'right',
+  },
+  message: {
+    font: 'inherit',
+    border: 'none',
+    margin: 0,
+    float: 'left',
+  },
+})
+
+interface Props {
+  event: EvalEvent
+}
+
+export const OutputLine: React.FC<Props> = ({ event }) => {
+  const [isImage, payload] = isImageLine(event.Message)
+
+  return (
+    <div className={styles.container} data-event-kind={event.Kind}>
+      {isImage ? (
+        <img src={`data:image;base64,${payload}`} alt="Image output" />
+      ) : (
+        <pre className={styles.message}>{event.Message}</pre>
+      )}
+    </div>
+  )
+}

web/src/components/features/inspector/FallbackOutput/index.ts

@@ -0,0 +1 @@
+export * from './FallbackOutput'

web/src/components/features/inspector/InspectorPanel/InspectorPanel.tsx

@@ -4,7 +4,7 @@ import { Resizable } from 're-resizable'
 import clsx from 'clsx'
 import { VscChevronDown, VscChevronUp, VscSplitHorizontal, VscSplitVertical } from 'react-icons/vsc'
 
-import { ConnectedRunOutput } from '../RunOutput'
+import { RunOutput } from '../RunOutput'
 import { PanelHeader } from '~/components/elements/panel/PanelHeader'
 import { LayoutType, DEFAULT_PANEL_HEIGHT, DEFAULT_PANEL_WIDTH_PERCENT } from '~/styles/layout'
 import './InspectorPanel.css'
@@ -148,7 +148,7 @@ export const InspectorPanel: React.FC<Props> = ({
         }}
       />
       <div className="InspectorPanel__container" hidden={isCollapsed}>
-        <ConnectedRunOutput />
+        <RunOutput />
       </div>
     </Resizable>
   )

web/src/components/features/inspector/RunOutput/RunOutput.tsx

@@ -1,21 +1,15 @@
 import React, { useMemo } from 'react'
+import { useSelector } from 'react-redux'
 import { Link, MessageBar, MessageBarType, useTheme } from '@fluentui/react'
 
-import { Console } from '~/components/features/inspector/Console'
-import { connect, type StatusState } from '~/store'
-import type { TerminalState } from '~/store/terminal'
-import type { MonacoSettings } from '~/services/config'
+import { Console, type ConsoleProps } from '~/components/features/inspector/Console'
+import { FallbackOutput } from 'components/features/inspector/FallbackOutput'
+import { type State } from '~/store'
 import { DEFAULT_FONT, getDefaultFontFamily, getFontFamily } from '~/services/fonts'
 
 import './RunOutput.css'
 import { splitStringUrls } from './parser'
 
-interface StateProps {
-  status?: StatusState
-  monaco?: MonacoSettings
-  terminal: TerminalState
-}
-
 const linkStyle = {
   root: {
     // Fluent UI adds padding with :nth-child selector.
@@ -34,8 +28,18 @@ const highlightLinks = (str: string) =>
     ),
   )
 
-const RunOutput: React.FC<StateProps & {}> = ({ status, monaco, terminal }) => {
+const ConsoleWrapper: React.FC<ConsoleProps & { disableTerminal?: boolean }> = (props) => {
+  if (props.disableTerminal) {
+    return <FallbackOutput {...props} />
+  }
+
+  return <Console {...props} />
+}
+
+export const RunOutput: React.FC = () => {
   const theme = useTheme()
+  const { status, monaco, terminal } = useSelector<State, State>((state) => state)
+
   const { fontSize, renderingBackend } = terminal.settings
   const styles = useMemo(() => {
     const { palette } = theme
@@ -69,15 +73,15 @@ const RunOutput: React.FC<StateProps & {}> = ({ status, monaco, terminal }) => {
             Press &quot;Run&quot; to compile program.
           </div>
         ) : (
-          <Console fontFamily={fontFamily} fontSize={fontSize} status={status} backend={renderingBackend} />
+          <ConsoleWrapper
+            fontFamily={fontFamily}
+            fontSize={fontSize}
+            status={status}
+            backend={renderingBackend}
+            disableTerminal={terminal.settings.disableTerminalEmulation}
+          />
         )}
       </div>
     </div>
   )
 }
-
-export const ConnectedRunOutput = connect<StateProps, {}>(({ status, monaco, terminal }) => ({
-  status,
-  monaco,
-  terminal,
-}))(RunOutput)

web/src/components/features/settings/SettingsModal.tsx

@@ -1,5 +1,15 @@
 import React from 'react'
-import { Checkbox, Dropdown, getTheme, type IPivotStyles, PivotItem, Text, TextField } from '@fluentui/react'
+import {
+  Checkbox,
+  Dropdown,
+  getTheme,
+  type IPivotStyles,
+  MessageBar,
+  MessageBarType,
+  PivotItem,
+  Text,
+  TextField,
+} from '@fluentui/react'
 
 import { AnimatedPivot } from '~/components/elements/tabs/AnimatedPivot'
 import { ThemeableComponent } from '~/components/utils/ThemeableComponent'
@@ -8,7 +18,7 @@ import { SettingsProperty } from './SettingsProperty'
 import { DEFAULT_FONT } from '~/services/fonts'
 import type { MonacoSettings } from '~/services/config'
 import type { RenderingBackend, TerminalSettings } from '~/store/terminal'
-import { connect, type StateDispatch, type MonacoParamsChanges, type SettingsState } from '~/store'
+import { connect, type MonacoParamsChanges, type SettingsState, type StateDispatch } from '~/store'
 
 import { cursorBlinkOptions, cursorLineOptions, fontOptions, terminalBackendOptions } from './options'
 import { controlKeyLabel } from '~/utils/dom'
@@ -38,6 +48,7 @@ type Props = StateProps &
 
 interface SettingsModalState {
   isOpen?: boolean
+  hideTerminalSettings: boolean
 }
 
 const modalStyles = {
@@ -60,6 +71,7 @@ class SettingsModal extends ThemeableComponent<Props, SettingsModalState> {
     super(props)
     this.state = {
       isOpen: props.isOpen,
+      hideTerminalSettings: !!this.props.terminal?.disableTerminalEmulation,
     }
   }
 
@@ -89,6 +101,10 @@ class SettingsModal extends ThemeableComponent<Props, SettingsModalState> {
   }
 
   private touchTerminalSettings(changes: Partial<TerminalSettings>) {
+    if ('disableTerminalEmulation' in changes) {
+      this.setState({ hideTerminalSettings: !!changes.disableTerminalEmulation })
+    }
+
     if (!this.changes.terminal) {
       this.changes.terminal = changes
       return
@@ -328,6 +344,7 @@ class SettingsModal extends ThemeableComponent<Props, SettingsModalState> {
               control={
                 <Dropdown
                   options={terminalBackendOptions}
+                  disabled={this.state.hideTerminalSettings}
                   defaultSelectedKey={this.props.terminal?.renderingBackend}
                   onChange={(_, val) => {
                     this.touchTerminalSettings({
@@ -337,6 +354,26 @@ class SettingsModal extends ThemeableComponent<Props, SettingsModalState> {
                 />
               }
             />
+            <SettingsProperty
+              key="termEmulationEnabled"
+              title="Emulate Terminal"
+              control={
+                <Checkbox
+                  label="Enables ANSI terminal escape sequences support using xterm.js."
+                  defaultChecked={!this.props.terminal?.disableTerminalEmulation}
+                  onChange={(_, val) => {
+                    this.touchTerminalSettings({
+                      disableTerminalEmulation: !val,
+                    })
+                  }}
+                />
+              }
+            />
+            <div>
+              <MessageBar messageBarType={MessageBarType.warning}>
+                Disable <u>Emulate Terminal</u> feature if you having troubles copying text from output.
+              </MessageBar>
+            </div>
           </PivotItem>
         </AnimatedPivot>
       </Dialog>

web/src/store/terminal/types.ts

@@ -7,6 +7,7 @@ export enum RenderingBackend {
 export interface TerminalSettings {
   fontSize: number
   renderingBackend: RenderingBackend
+  disableTerminalEmulation?: boolean
 }
 
 export const defaultTerminalSettings: TerminalSettings = {