@electerm/electerm-react 2.8.16 → 2.10.6

package/client/components/terminal/terminal.jsx

@@ -26,18 +26,11 @@ import {
 } from '../../common/constants.js'
 import deepCopy from 'json-deep-copy'
 import { readClipboardAsync, readClipboard, copy } from '../../common/clipboard.js'
-import { FitAddon } from '@xterm/addon-fit'
 import AttachAddon from './attach-addon-custom.js'
-import { SearchAddon } from '@xterm/addon-search'
-import { WebLinksAddon } from '@xterm/addon-web-links'
-import { CanvasAddon } from '@xterm/addon-canvas'
-import { WebglAddon } from '@xterm/addon-webgl'
-import { LigaturesAddon } from '@xterm/addon-ligatures'
 import getProxy from '../../common/get-proxy.js'
 import { ZmodemClient } from './zmodem-client.js'
-import { Unicode11Addon } from '@xterm/addon-unicode11'
+import { TrzszClient } from './trzsz-client.js'
 import keyControlPressed from '../../common/key-control-pressed.js'
-import { Terminal } from '@xterm/xterm'
 import NormalBuffer from './normal-buffer.jsx'
 import { createTerm, resizeTerm } from './terminal-apis.js'
 import { shortcutExtend, shortcutDescExtend } from '../shortcuts/shortcut-handler.js'
@@ -56,6 +49,16 @@ import ExternalLink from '../common/external-link.jsx'
 import createDefaultLogPath from '../../common/default-log-path.js'
 import SearchResultBar from './terminal-search-bar'
 import RemoteFloatControl from '../common/remote-float-control'
+import {
+  loadTerminal,
+  loadFitAddon,
+  loadWebLinksAddon,
+  loadCanvasAddon,
+  loadWebglAddon,
+  loadSearchAddon,
+  loadLigaturesAddon,
+  loadUnicode11Addon
+} from './xterm-loader.js'
 
 const e = window.translate
 
@@ -114,7 +117,7 @@ class Term extends Component {
     ) {
       this.onResize()
     }
-    if (shouldChange) {
+    if (shouldChange && this.term) {
       this.term.focus()
     }
     this.checkConfigChange(
@@ -125,7 +128,7 @@ class Term extends Component {
       this.props.themeConfig,
       prevProps.themeConfig
     )
-    if (themeChanged) {
+    if (themeChanged && this.term) {
       this.term.options.theme = {
         ...deepCopy(this.props.themeConfig),
         background: 'rgba(0,0,0,0)'
@@ -138,7 +141,9 @@ class Term extends Component {
     if (window.store.activeTerminalId === this.props.tab.id) {
       window.store.activeTerminalId = ''
     }
-    this.term.parent = null
+    if (this.term) {
+      this.term.parent = null
+    }
     Object.keys(this.timers).forEach(k => {
       clearTimeout(this.timers[k])
       this.timers[k] = null
@@ -155,6 +160,7 @@ class Term extends Component {
     this.attachAddon = null
     this.fitAddon = null
     this.zmodemClient = null
+    this.trzszClient = null
     this.searchAddon = null
     this.fitAddon = null
     this.cmdAddon = null
@@ -180,7 +186,7 @@ class Term extends Component {
     }
   ]
 
-  initAttachAddon = () => {
+  initAttachAddon = async () => {
     this.attachAddon = new AttachAddon(
       this.term,
       this.socket,
@@ -189,7 +195,7 @@ class Term extends Component {
     this.attachAddon.decoder = new TextDecoder(
       this.encode || this.props.tab.encode || 'utf-8'
     )
-    this.term.loadAddon(this.attachAddon)
+    await this.attachAddon.activate(this.term)
   }
 
   getValue = (props, type, name) => {
@@ -751,25 +757,28 @@ class Term extends Component {
     }
   }
 
-  loadRenderer = (term, config) => {
+  loadRenderer = async (term, config) => {
     if (config.rendererType === rendererTypes.canvas) {
+      const CanvasAddon = await loadCanvasAddon()
       term.loadAddon(new CanvasAddon())
     } else if (config.rendererType === rendererTypes.webGL) {
       try {
+        const WebglAddon = await loadWebglAddon()
         term.loadAddon(new WebglAddon())
       } catch (e) {
         console.error('render with webgl failed, fallback to canvas')
         console.error(e)
+        const CanvasAddon = await loadCanvasAddon()
         term.loadAddon(new CanvasAddon())
       }
     }
   }
 
   initTerminal = async () => {
-    // let {password, privateKey, host} = this.props.tab
     const { themeConfig, tab = {}, config = {} } = this.props
     const tc = deepCopy(themeConfig)
     tc.background = 'rgba(0,0,0,0)'
+    const Terminal = await loadTerminal()
     const term = new Terminal({
       allowProposedApi: true,
       scrollback: config.scrollback,
@@ -777,7 +786,6 @@ class Term extends Component {
       fontFamily: tab.fontFamily || config.fontFamily,
       theme: tc,
       allowTransparency: true,
-      // lineHeight: 1.2,
       wordSeparator: config.terminalWordSeparator,
       cursorStyle: config.cursorStyle,
       cursorBlink: config.cursorBlink,
@@ -785,36 +793,31 @@ class Term extends Component {
       screenReaderMode: config.screenReaderMode
     })
 
-    // term.onLineFeed(this.onLineFeed)
-    // term.onTitleChange(this.onTitleChange)
     term.parent = this
     term.onSelectionChange(this.onSelection)
     term.open(this.domRef.current, true)
-    this.loadRenderer(term, config)
-    // term.textarea.addEventListener('click', this.setActive)
-    // term.onKey(this.onKey)
-    // term.textarea.addEventListener('blur', this.onBlur)
+    await this.loadRenderer(term, config)
 
-    // term.on('keydown', this.handleEvent)
+    const FitAddon = await loadFitAddon()
     this.fitAddon = new FitAddon()
     this.cmdAddon = new CommandTrackerAddon()
-    // Register callback for shell integration command tracking
     this.cmdAddon.onCommandExecuted((cmd) => {
       if (cmd && cmd.trim()) {
         window.store.addCmdHistory(cmd.trim())
       }
     })
-    // Register callback for shell integration CWD tracking
     this.cmdAddon.onCwdChanged((cwd) => {
       this.setCwd(cwd)
     })
+    const SearchAddon = await loadSearchAddon()
     this.searchAddon = new SearchAddon()
+    const LigaturesAddon = await loadLigaturesAddon()
     const ligtureAddon = new LigaturesAddon()
     this.searchAddon.onDidChangeResults(this.onSearchResultsChange)
+    const Unicode11Addon = await loadUnicode11Addon()
     const unicode11Addon = new Unicode11Addon()
     term.loadAddon(unicode11Addon)
     term.loadAddon(ligtureAddon)
-    // activate the new version
     term.unicode.activeVersion = '11'
     term.loadAddon(this.fitAddon)
     term.loadAddon(this.searchAddon)
@@ -1122,8 +1125,8 @@ class Term extends Component {
     this.socket = socket
     this.initSocketEvents()
     this.term = term
-    socket.onopen = () => {
-      this.initAttachAddon()
+    socket.onopen = async () => {
+      await this.initAttachAddon()
       this.runInitScript()
       term._initialized = true
     }
@@ -1132,10 +1135,13 @@ class Term extends Component {
     if (pick(term, 'buffer._onBufferChange._listeners')) {
       term.buffer._onBufferChange._listeners.push(this.onBufferChange)
     }
+    const WebLinksAddon = await loadWebLinksAddon()
     term.loadAddon(new WebLinksAddon(this.webLinkHandler))
     term.focus()
     this.zmodemClient = new ZmodemClient(this)
     this.zmodemClient.init(socket)
+    this.trzszClient = new TrzszClient(this)
+    this.trzszClient.init(socket)
     this.fitAddon.fit()
     term.displayRaw = displayRaw
     term.loadAddon(

package/client/components/terminal/transfer-client-base.js

@@ -0,0 +1,232 @@
+/**
+ * Base class for file transfer clients (zmodem, trzsz, etc.)
+ * Provides common functionality for UI interactions and server communication
+ */
+
+// import { transferTypeMap } from '../../common/constants.js'
+import { getLocalFileInfo } from '../sftp/file-read.js'
+
+/**
+ * TransferClientBase class - abstract base for file transfer protocols
+ */
+export class TransferClientBase {
+  constructor (terminal, storageKey) {
+    this.terminal = terminal
+    this.storageKey = storageKey
+    this.socket = null
+    this.isActive = false
+    this.currentTransfer = null
+    this.savePath = null
+    this.messageHandler = null
+  }
+
+  /**
+   * Initialize client with socket
+   * @param {WebSocket} socket - WebSocket connection
+   */
+  init (socket) {
+    this.socket = socket
+    this.setupMessageHandler()
+  }
+
+  /**
+   * Setup message handler for events from server
+   * Should be overridden by subclass
+   */
+  setupMessageHandler () {
+    if (!this.socket) return
+
+    this.messageHandler = (event) => {
+      if (typeof event.data === 'string') {
+        try {
+          const msg = JSON.parse(event.data)
+          if (msg.action === this.getActionName()) {
+            this.handleServerEvent(msg)
+          }
+        } catch (e) {
+          // Not JSON, ignore
+        }
+      }
+    }
+    this.socket.addEventListener('message', this.messageHandler)
+  }
+
+  /**
+   * Get the action name for this protocol
+   * Should be overridden by subclass
+   * @returns {string}
+   */
+  getActionName () {
+    throw new Error('getActionName must be implemented by subclass')
+  }
+
+  /**
+   * Handle server events
+   * Should be overridden by subclass
+   * @param {Object} msg - Message from server
+   */
+  handleServerEvent (msg) {
+    throw new Error('handleServerEvent must be implemented by subclass')
+  }
+
+  /**
+   * Send message to server
+   * @param {Object} msg - Message to send
+   */
+  sendToServer (msg) {
+    if (this.socket && this.socket.readyState === WebSocket.OPEN) {
+      this.socket.send(JSON.stringify({
+        action: this.getActionName(),
+        ...msg
+      }))
+    }
+  }
+
+  /**
+   * Write text to terminal
+   * @param {string} text - Text to write
+   */
+  writeToTerminal (text) {
+    if (this.terminal && this.terminal.term) {
+      this.terminal.term.write(text)
+    }
+  }
+
+  /**
+   * Write banner to terminal
+   * @param {string} type - 'RECEIVE' or 'SEND'
+   * @param {string} protocolName - Protocol name for display
+   */
+  writeBanner (type, protocolName) {
+    const border = '='.repeat(50)
+    this.writeToTerminal(`\r\n${border}\r\n`)
+    if (protocolName) {
+      this.writeToTerminal(`\x1b[33m\x1b[1m${protocolName}\x1b[0m\r\n`)
+      this.writeToTerminal(`${border}\r\n\r\n`)
+    }
+    this.writeToTerminal(`\x1b[32m\x1b[1m${this.getProtocolDisplayName()}::${type}::START\x1b[0m\r\n`)
+  }
+
+  /**
+   * Get protocol display name
+   * Should be overridden by subclass
+   * @returns {string}
+   */
+  getProtocolDisplayName () {
+    return 'TRANSFER'
+  }
+
+  /**
+   * Handle session end
+   */
+  onSessionEnd () {
+    this.isActive = false
+    this.currentTransfer = null
+    this.savePath = null
+    if (this.terminal && this.terminal.term) {
+      this.terminal.term.focus()
+      this.terminal.term.write('\r\n')
+    }
+  }
+
+  /**
+   * Open file select dialog
+   * @param {Object} options - Options for file selection
+   * @returns {Promise<Array>} - Selected files
+   */
+  openFileSelect = async (options = {}) => {
+    const {
+      directory = false,
+      title = 'Choose some files to send',
+      message = 'Choose some files to send'
+    } = options
+
+    const properties = [
+      directory ? 'openDirectory' : 'openFile',
+      'multiSelections',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ]
+
+    const files = await window.api.openDialog({
+      title,
+      message,
+      properties
+    }).catch(() => false)
+
+    if (!files || !files.length) {
+      return null
+    }
+
+    const r = []
+    for (const filePath of files) {
+      const stat = await getLocalFileInfo(filePath)
+      r.push({ ...stat, filePath, path: filePath })
+    }
+    return r
+  }
+
+  /**
+   * Open save folder select dialog
+   * @returns {Promise<string>} - Selected folder path
+   */
+  openSaveFolderSelect = async () => {
+    // Try to use last saved path
+    const lastPath = this.storageKey ? window.localStorage.getItem(this.storageKey) : null
+
+    const savePaths = await window.api.openDialog({
+      title: 'Choose a folder to save file(s)',
+      message: 'Choose a folder to save file(s)',
+      defaultPath: lastPath || undefined,
+      properties: [
+        'openDirectory',
+        'showHiddenFiles',
+        'createDirectory',
+        'noResolveAliases',
+        'treatPackageAsDirectory',
+        'dontAddToRecent'
+      ]
+    }).catch(() => false)
+
+    if (!savePaths || !savePaths.length) {
+      return null
+    }
+
+    // Save for next time
+    if (this.storageKey) {
+      window.localStorage.setItem(this.storageKey, savePaths[0])
+    }
+    return savePaths[0]
+  }
+
+  /**
+   * Cancel ongoing transfer
+   */
+  cancel () {
+    if (!this.isActive) return
+    this.writeToTerminal(`\r\n\x1b[33m\x1b[1m${this.getProtocolDisplayName()} transfer cancelled by user\x1b[0m\r\n`)
+    this.sendToServer({
+      event: 'cancel'
+    })
+    this.onSessionEnd()
+  }
+
+  /**
+   * Clean up resources
+   */
+  destroy () {
+    if (this.socket && this.messageHandler) {
+      this.socket.removeEventListener('message', this.messageHandler)
+      this.messageHandler = null
+    }
+    this.isActive = false
+    this.currentTransfer = null
+    this.savePath = null
+    this.socket = null
+    this.terminal = null
+  }
+}
+
+export default TransferClientBase