Master issue for webpack/loadAddon issues

I’ve seen a bunch of issues recently come in around how loadAddon works and I wonder if we’re over complicating things. In today’s world of bundlers and source maps, it appears very difficult to get this right in a way that will work across all build systems.

Goals

• We need an easy way to load addons without forcing the user to download and parse/run the script. The core should be as slim as possible, leaving out optional components.
• It should work with webpack, browserify and vscode’s module system (and more?)
• It should work nicely with TypeScript

Current Situation

• We wrap addons in UMD which allows handling of the addon script in a plan browser environment, CommonJS environment and require.js environment. A problem here is that we needed to reorder the UMD definition as VS Code defines the define global, messing with the typical format and introducing issues for people eg. https://github.com/sourcelair/xterm.js/pull/994
• In a CommonJS environment the addon script attempts to load in the Terminal object via require, this causes issues for webpack https://github.com/sourcelair/xterm.js/issues/927
• Terminal inside addons is not typed currently as the definition for Terminal lies outside of the addon folder

Potential Solutions

I’m not attempting to solve the problem right now, here are some ideas though:

• Have loadAddon pull in the script addon object and apply it to Terminal, as opposed to leaving it up to the addon to load Terminal (see https://github.com/sourcelair/xterm.js/issues/927#issuecomment-325210992)

  public static loadAddon(addon: string, callback?: Function): boolean | any {
      // TODO: Improve return type and documentation
      if (typeof exports === 'object' && typeof module === 'object') {
        // CommonJS
        return require('./addons/' + addon + '/' + addon)(Terminal);
      } else if (typeof define === 'function') {
  ...
  

• Require bundling or concatenation when using addons?

If anyone has more insights into how this sort of dynamic loading at runtime issue is typically handled, I’d love to hear it 😃

CCing people from related issues: @parisk @mofux @ficristo @dgriffen @ebertmi @rdicroce @jclangst @LucaT1 @jan0e @KagamiChan @vincentwoo

[jgillich]

Why not just get rid of all the various module loader hacks and let the consumer deal with it? Maybe I’m missing something, but for me the easiest solution would be:

addon:

export function myAddon(terminal: Terminal) {
    terminal.prototype.doStuff = function() {}
}

loadAddon:

loadAddon(fn: (terminal: Terminal) => any) {
    return fn(Terminal)
}

consumer:

import {myAddon} from 'anywhere'
// or
let myAddon = require('anywhere')
// ...

xterm.loadAddon(myAddon)

[reem]

I am seeing source maps fail to parse as well, here is a full example error:

WARNING in ./~/xterm/lib/addons/search/SearchHelper.js.map
Module parse failed: /Users/reem/code/udacity/web-terminal-client/node_modules/xterm/lib/addons/search/SearchHelper.js.map Unexpected token (1:10)
You may need an appropriate loader to handle this file type.
| {"version":3,"sources":["../../../src/addons/search/SearchHelper.ts"],"names":[],"mappings":"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","file":"SearchHelper.js","sourceRoot":"."}
 @ ./~/xterm/lib/addons ^\.\/.*$
 @ ./~/xterm/lib/xterm.js
 @ ./src/js/components/terminal/index.js
 @ ./src/js/lib.js
 @ ./examples/web-terminal.js
 @ ./examples/index.jsx
 @ multi webpack-hot-middleware/client?reload=true babel-polyfill ./examples/index.jsx

haven’t been able to get webpack to parse these files.