How to use xterm - 10 common examples

ws.onopen = function(event) {
        console.log('[ttyd] websocket opened');
        wsError = false;
        sendMessage(JSON.stringify({AuthToken: authToken}));

        if (typeof term !== 'undefined') {
            term.dispose();
        }

        // expose term handle for some programatic cases
        // which need to get the content of the terminal
        term = window.term = new Terminal({
            fontSize: 13,
            fontFamily: '"Menlo for Powerline", Menlo, Consolas, "Liberation Mono", Courier, monospace',
            theme: {
                foreground: '#d2d2d2',
                background: '#2b2b2b',
                cursor: '#adadad',
                black: '#000000',
                red: '#d81e00',
                green: '#5ea702',
                yellow: '#cfae00',
                blue: '#427ab3',
                magenta: '#89658e',
                cyan: '#00a7aa',
                white: '#dbded8',
                brightBlack: '#686a66',
                brightRed: '#f54235',

componentDidMount () {
    const _this = this
    _this.props.tab.title = 'Shell'
    const terminalManager = new TerminalManager()
    TerminalState.terminalManager = terminalManager
    const uiTheme = SettingState.settings.appearance.ui_theme.value
    let theme = BRIGHT_THEME
    if (uiTheme === 'dark') {
      theme = DARK_THEME
    }

    const terminal = this.terminal = new Terminal({
      fontSize: 12,
      // theme: themeName,
      cols: 80,
      rows: 24,
      // fontFamily: 'Menlo, Monaco, "DejaVu Sans Mono", Consolas, "Andale Mono", monospace;',
    })

    terminal.attachCustomKeyEventHandler((e) => {
      if (e.keyCode === 66 && e.altKey) {
        terminalManager.getSocket().emit('term.input', { id: terminal.id, input: '\u001bb' }) // x1bb
        return false
      } else if (e.keyCode === 70 && e.altKey) {
        terminalManager.getSocket().emit('term.input', { id: terminal.id, input: '\u001bf' }) // x1bf
        return false
      } else if (e.keyCode === 68 && e.altKey) {
        terminalManager.getSocket().emit('term.input', { id: terminal.id, input: '\u001bd' })

var os = require('os');
var pty = require('node-pty');
var Terminal = require('xterm').Terminal;
var fs = require('fs');
let fit = require('../../node_modules/xterm/lib/addons/fit/fit.js');

// Initialize node-pty with an appropriate shell
Terminal.applyAddon(fit);
var shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash';
// const shell = process.env[os.platform() === 'win32' ? 'COMSPEC' : 'SHELL'];
const ptyProcess = pty.spawn(shell, [], {
  name: 'xterm-color',
//   cols: 10,
//   rows: 500,
  cwd: ((file.path != undefined) && (fs.existsSync(file.path))) ? path.join(file.path, '..') : process.env.HOME,
  // cwd: '.',
  env: process.env
});
console.log(file.path);
// console.log(process.env);

// Initialize xterm.js and attach it to the DOM
global.xterm = new Terminal({ allowTransparency: true });
xterm.open(document.getElementById('terminal'));

cursor: 'rgba(0, 0, 0, 0.5)',
  selection: 'rgba(0, 0, 0, 0.5)',
  brightGreen: '#42b983',
  brightYellow: '#ea6e00',
};

// default options
const defaultOptions = {
  cols: 100,
  rows: 30,
  theme: defaultTheme,
};

// initialize addon
Terminal.applyAddon(fit);
Terminal.applyAddon(webLinks);

// format and write the text content of the terminal
const writeChunkFn = term => {
  const writeChunk = (data, ln = true) => {
    if (data && data.indexOf('\n') !== -1) {
      data.split('\n').forEach(value => writeChunk(value));
      return;
    }
    if (typeof data === 'string') {
      if (ln) {
        term.writeln(data);
      } else {
        term.write(data);
      }
    } else {
      term.writeln('');

useEffect(() => {
        if (connected && terminalElement && !terminal.element) {
            terminal.open(terminalElement);

            // @see https://github.com/xtermjs/xterm.js/issues/2265
            // @see https://github.com/xtermjs/xterm.js/issues/2230
            TerminalFit.fit(terminal);

            // Add support for copying terminal text.
            terminal.attachCustomKeyEventHandler((e: KeyboardEvent) => {
                // Ctrl + C
                if (e.ctrlKey && (e.key === 'c')) {
                    document.execCommand('copy');
                    return false;
                }

                return true;
            });
        }
    }, [ terminal, connected, terminalElement ]);

createTerminal() {
    // Create the terminal and setup event hooks
    XTerminal.loadAddon('fit')

    // Take out values from config
    const { cursorBlink, cursorStyle } = Store.config

    this.Terminal = new XTerminal({ cursorBlink, cursorStyle })
    this.Terminal.on('open', this.onTerminalOpen)

    // Window Events listeners
    window.addEventListener('resize', this.onWindowResize)

    this.Terminal.open(this.Term, true)
    this.Terminal.fit()
  }

createTerminal() {
    // Create the terminal and setup event hooks
    XTerminal.loadAddon('fit')

    // Take out values from config
    const { cursorBlink, cursorStyle } = Store.config

    this.Terminal = new XTerminal({ cursorBlink, cursorStyle })
    this.Terminal.on('open', this.onTerminalOpen)

    // Window Events listeners
    window.addEventListener('resize', this.onWindowResize)

    this.Terminal.open(this.Term, true)
    this.Terminal.fit()
  }

create(id, container, options = {}) {
    const opts = deepmerge(defaultOptions, options);
    if (!this.terms[id]) {
      this.terms[id] = new Terminal(opts);
      this.terms[id].writeChunk = writeChunkFn(this.terms[id]);
      this.terms[id].writeLog = writeLog(this.terms[id]);
    } else {
      this.terms[id]._core.options.theme = opts.theme;
    }

    // initialize the web links addon, registering the link matcher
    webLinks.webLinksInit(this.terms[id], (event, uri) => {
      window.open(uri, 'blank');
    });

    // opens the terminal within an element.
    this.terms[id].open(container);

    // Note: need to initialize the fit plugin when the component is re-rendered
    // make the terminal's size and geometry fit the size of #terminal-container
    this.terms[id].fit();

    return this.terms[id];
  }

import Terminal from 'xterm';
import 'xterm/dist/xterm.css';
import './term.css';

// monkey patching so xterm doesn't need a textarea
Terminal.prototype.focus = function() {
    this.textarea.dispatchEvent(new FocusEvent('focus'));
};
Terminal.prototype.blur = function() {
    this.textarea.dispatchEvent(new FocusEvent('blur'));
};

window.term = new Terminal();
// there is no public interface to disable linkifying
term.linkifier._linkMatchers = [];
term.open(document.getElementById('terminal'), true);
term.on('focus', function() {
    webkit.messageHandlers.focus.postMessage('focus');
});
term.on('resize', function(size) {
    webkit.messageHandlers.resize.postMessage('resize');
});

// copied from the fit addon, but without subtracting 17 pixels for a nonexistent scrollbar
function fit() {

constructor() {
    // Create our xterm element
    this.xterm = new Terminal();
    this.xterm.on("paste", this.onPaste);
    this.xterm.on("resize", this.handleTermResize);

    // Create our Shell and tty
    this.wapmTty = new WapmTty(this.xterm);
    this.wapmShell = new WapmShell(this.wapmTty);
    this.xterm.on("data", this.wapmShell.handleTermData);
  }