How to use the xterm.loadAddon function in xterm

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()
  }

import React from 'react'
import PropTypes from 'prop-types'
import xterm from 'xterm'
import className from 'classnames'

import './XTerm.css'

xterm.loadAddon('search', function(addon) {
  console.info('loaded search addon')
})

export default class XTerm extends React.Component {
    
    static propTypes = {
      onInput: PropTypes.func,
      cursorBlink: PropTypes.bool,
      options: PropTypes.object,
      cols: PropTypes.number,
      enabled: PropTypes.bool,
      onDestroy: PropTypes.func,
      copyOnCtrlC: PropTypes.bool,
      pasteOnCtrlV: PropTypes.bool,
    }

};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/*!
 * XAtom Debug
 * Copyright(c) 2017 Williams Medina 
 * MIT Licensed
 */
const { CompositeDisposable, Emitter, Disposable } = require('atom');
import { View, ViewElement } from '../View';
import ResizeObserver from 'resize-observer-polyfill';
import { spawn as spawnPty } from 'node-pty';
import Terminal from 'xterm';
const path = require('path');
Terminal.loadAddon('fit');
export const DEBUG_AREA_URI = 'xatom://debug-area';
let DebugAreaView = class DebugAreaView {
    constructor(viewElement) {
        this.viewElement = viewElement;
        this.emitter = new Emitter();
        this.element = this.getElement();
    }
    elementDidResize() {
        clearTimeout(this.resizeHandler);
        this.resizeHandler = setTimeout(() => {
            if (this.terminal) {
                this.terminal.fit();
                if (this.pty)
                    this.pty.resize(this.terminal.cols, this.terminal.rows);
            }
            ;

import Xterm from 'xterm'
import RobustWebSocket from 'robust-websocket'
import debounce from 'lodash.debounce'

Xterm.loadAddon('attach')
Xterm.loadAddon('fit')

export default class Terminal {
  constructor(id) {
    let io = this.ws(`/session/${id}/io`)
    let control = this.ws(`/session/${id}/control`)

    this.xterm = new Xterm()
    this.xterm.attach(io)

    this.elem = document.createElement('div')
    this.elem.style.flex = '1'
    this.xterm.open(this.elem)

    control.addEventListener('open', () => {
      window.addEventListener('resize', debounce(() => this.xterm.fit(), 100))

/** @babel */
/** @jsx etch.dom */

import {CompositeDisposable} from 'atom';
import ResizeObserver from 'resize-observer-polyfill';
import Terminal from 'xterm';
import etch from 'etch';
import path from 'path';
import {spawnPty} from "./pty";
import Utils from './utils';
//import {DB_VIEW_URI} from './db-view';

Terminal.loadAddon('fit');

const CHAR_DATA_ATTR_INDEX = 0;
const CHAR_DATA_CHAR_INDEX = 1;
const CHAR_DATA_WIDTH_INDEX = 2;
const CHAR_DATA_CODE_INDEX = 3;

export class TerminalView {

  URI = null;
  ARGS = [];
  ENV = {};
  CMD = null;
  onKey = null;
  onPaste = null;
  onExit = null;
  terminalEchoON = true;

import * as React from 'react';
import { Observable, Subscription } from 'rxjs';

const Terminal = require('xterm');
Terminal.loadAddon('fit');

require('./logs-viewer.scss');

export interface LogsSource {
    key: string;
    loadLogs(): Observable;
    shouldRepeat(): boolean;
}

export interface LogsViewerProps {
    source: LogsSource;
}

export class LogsViewer extends React.Component {
    private terminal: any;
    private subscription: Subscription;

create(): void {
    const doc: HTMLDocument = document;
    const container: HTMLElement = doc.querySelector('.window-terminal-container') as HTMLElement;
    const el: HTMLElement = doc.createElement('div');
    el.classList.add('terminal-instance');
    container.appendChild(el);

    this.terminals.forEach((term: Terminal) => term.active = false);

    XTerminal.loadAddon('fit');
    const terminal: Terminal = {
      el: el,
      storage: null,
      term: new XTerminal({ scrollback: 10000 }),
      input: new EventEmitter(),
      output: new EventEmitter(),
      active: true,
      title: '',
      dir: ''
    };

    this._config.setTerminals(this.terminals);

    terminal.term.on('open', () => {
      this.initializeInstance(terminal, el);
      this.initializeProcess(terminal);

var bus = require('./event-bus')
var localStore = require('./local-storage')
var TerminalEmulator = require('xterm')
var {clipboard} = require('electron')

TerminalEmulator.loadAddon('fit')
TerminalEmulator.loadAddon('fullscreen')

class PopoutEmulator {
  constructor() {
    this.style = document.createElement('style')
    this.emulator = new TerminalEmulator({cursorBlink: true})

    this.attach()
    this.subscribe()
    this.clearScreen()
  }

  attach() {
    let css = localStore.remove('popout-emulator:css') +
              localStore.remove('popout-emulator:xterm-css') +
              localStore.remove('popout-emulator:fullscreen-css');

'use babel'

import TerminalEmulator from 'xterm';
import path from 'path';
import { $, View } from 'atom-space-pen-views';
import { BrowserWindow } from 'remote';
import { clipboard } from 'electron';

import bus from './event-bus';
import colors from './colors';
import localStorage from './local-storage';
import { name } from '../package.json';

TerminalEmulator.loadAddon('fit');

const popoutEmulatorFile = path.resolve(__dirname, 'popout-emulator.html');

const heightKey = 'learn-ide:currentTerminalHeight'

const verticalLimit = 100;
const defaultHeight = 275;

class TerminalView extends View {
  static content() {
    return this.div({class: 'terminal-resizer tool-panel'}, () => {
      this.div({class: 'terminal-resize-handle', outlet: 'resizeHandle'});
    });
  }

  initialize(terminal) {

var bus = require('./event-bus')
var localStore = require('./local-storage')
var TerminalEmulator = require('xterm')
var {clipboard} = require('electron')

TerminalEmulator.loadAddon('fit')
TerminalEmulator.loadAddon('fullscreen')

class PopoutEmulator {
  constructor() {
    this.style = document.createElement('style')
    this.emulator = new TerminalEmulator({cursorBlink: true})

    this.attach()
    this.subscribe()
    this.clearScreen()
  }

  attach() {
    let css = localStore.remove('popout-emulator:css') +
              localStore.remove('popout-emulator:xterm-css') +
              localStore.remove('popout-emulator:fullscreen-css');