How to use the xterm.Terminal.applyAddon function in xterm

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('');

"use babel";
// @flow
import * as React from "react";
import ReactDOM from "react-dom";
import { Terminal } from "xterm";
import * as fit from "xterm/lib/addons/fit/fit";

Terminal.applyAddon(fit);

export default class Term extends React.Component {
  state: State;
  props: Props;
  container: React.Element;
  static defaultProps: DefaultProps;
  containerKey: number;
  resizeInterval: ?IntervalID;

  constructor(props: Props) {
    super(props);

    this.containerKey = 0;
  }

  initTerm() {

function($scope, $window, dataService, $element) {
            $scope.dataService = dataService;

            // See https://github.com/xtermjs/xterm.js/ for available xterm
            // options

            Terminal.applyAddon(attach);  // Apply the `attach` addon
            Terminal.applyAddon(fit);     // Apply the `fit` addon

            var border = 10;
            var term = new Terminal();
            // Should be a reference to <div id="terminal"></div>
            var terminal = $element[0].firstElementChild.firstElementChild;
            var customConsole;
            var charSize;
            var termContainer;

            term.open(terminal);
            customConsole = configJSON.customConsoleDisplaySize;

            if (customConsole != null) {
              charSize = measureChar(term);
              termContainer = document.getElementById('term-container');
              if (termContainer != null) {

async componentDidMount() {
        let termElem = document.getElementById('terminal')
        Terminal.applyAddon(fit);
        Terminal.applyAddon(WebfontLoader);

        let xterm = new Terminal({
            useStyle: true,
            cursorBlink: true,
            fontFamily: 'Roboto Mono',
            fontSize: 18,
            fontWeight: 500,
            fontWeightBold: 500,
        });
        await xterm.loadWebfontAndOpen(termElem);
        xterm.writeln(forcedChalk.greenBright("Terraform Deploy to Azure\n\n"));
        xterm.writeln("Variables:");
        xterm.writeln("- - - - - - - - - - - - - -")
        let tfvars = []
        console.log(this.props.variables)

import * as fit from 'xterm/lib/addons/fit/fit';
import * as search from 'xterm/lib/addons/search/search';
import * as webLinks from 'xterm/lib/addons/webLinks/webLinks';

import { ELTermModule } from './app/module';
import { Terminal } from 'xterm';

import { config } from './app/config';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

Terminal.applyAddon(fit);
Terminal.applyAddon(search);
Terminal.applyAddon(webLinks);

const FontFaceObserver = require('fontfaceobserver');
const font = new FontFaceObserver(config.terminalWindowFontFamily);

font.load().then(() => {
  platformBrowserDynamic()
    .bootstrapModule(ELTermModule)
    .catch(err => console.log(err));
});

init () {
        Terminal.applyAddon(fit)
        this.term = new Terminal({})
        this.term.open(this.$refs.terminal)

        let shell = os.platform() === 'win32' ? 'powershell.exe' : 'bash'
        this.ptyProcess = pty.fork(shell, [], {
          name: 'xterm-color',
          cols: 80,
          rows: 10,
          cwd: process.env.HOME,
          env: process.env
        })

        this.ptyProcess.on('data', (data) => {
          this.term.write(data)
        })

import { spawn as spawnPty } from 'node-pty-prebuilt'
import { Terminal } from 'xterm'
import * as fit from 'xterm/lib/addons/fit/fit'
import urlRegex from 'url-regex'
import { shell } from 'electron'

import atomXtermConfig from './atom-xterm-config'
import { AtomXtermProfileMenuElement } from './atom-xterm-profile-menu-element'
import { AtomXtermProfileMenuModel } from './atom-xterm-profile-menu-model'
import { AtomXtermProfilesSingleton } from './atom-xterm-profiles'

import fs from 'fs-extra'

import elementResizeDetectorMaker from 'element-resize-detector'

Terminal.applyAddon(fit)

const STRICT_URL_REGEX = new RegExp(`(${urlRegex({exact: false, strict: true}).source})`)
const PTY_PROCESS_OPTIONS = new Set([
  'command',
  'args',
  'name',
  'cwd',
  'env',
  'setEnv',
  'deleteEnv',
  'encoding'
])
const ATOM_XTERM_OPTIONS = [
  'leaveOpenAfterExit',
  'relaunchTerminalOnStartup',
  'title',

yellow: '#986801',
  blue: '#4078F2',
  magenta: '#A626A4',
  cyan: '#0184BC',
  white: '#A0A1A7',
  brightBlack: '#5c6370',
  brightRed: '#e06c75',
  brightGreen: '#50A14F',
  brightYellow: '#986801',
  brightBlue: '#4078F2',
  brightMagenta: '#A626A4',
  brightCyan: '#0184BC',
  brightWhite: '#ffffff',
};

XTerm.applyAddon(fit);
XTerm.applyAddon(WebfontLoader);

function div({ className, position, children }) {
  const el = document.createElement('div');
  el.classList.add(className);

  if (position) {
    el.style.position = 'absolute';
    el.style.top = position.top;
    el.style.left = position.left;
    el.style.width = position.width;
    el.style.height = position.height;
  }

  if (children) {
    for (let child of children) {

import { Terminal } from 'xterm'
import * as fit from 'xterm/lib/addons/fit/fit'
import * as webLinks from 'xterm/lib/addons/webLinks/webLinks'
import * as search from 'xterm/lib/addons/search/search'
import TerminalElement from './view'
import PaneItem from '../util/pane-item'
import ResizeDetector from 'element-resize-detector'
import { debounce, throttle } from 'underscore-plus'
import { closest } from './helpers'
import { openExternal } from 'shell'
import SearchUI from './searchui'

let getTerminal = el => closest(el, 'ink-terminal').getModel()

Terminal.applyAddon(fit)
Terminal.applyAddon(webLinks)
Terminal.applyAddon(search)

let subs

export default class InkTerminal extends PaneItem {
  static activate () {
    subs = new CompositeDisposable()
    subs.add(atom.commands.add('ink-terminal', {
      'ink-terminal:copy':  ({target}) => {
        let term = getTerminal(target)
        if (term != undefined) {
          term.copySelection()
        }},
      'ink-terminal:paste': ({target}) => {
        let term = getTerminal(target)
        if (term != undefined) {