Fix xterm.js resource leaks in split pane

[igorsdv]

Fixes #3408, fixes #3351, fixes #3281.

Repeated calls to Terminal.open() on the same instance register a number of event listeners each time, which leads to resource leaks and erroneous listener duplication. It's not clear to me if multiple calls to Terminal.open() is a use case supported by xterm.js -- if it is, this issue should be fixed there. In the meantime, this is an ugly workaround to release all the event listeners prior to calling Terminal.open() again, while preserving the state we need to keep.

First, we run the equivalent of Terminal.dispose() to release disposables and events on the Terminal object. After this, some event listeners on non-disposable properties of the Terminal object itself remain set, and we must handle those separately. This is important because the old event listeners indirectly close over the previous _parent elements (now detached), which hold references to unmounted React components and old props, which in turn refer to old Terminal objects representing closed panes and tabs. Thus a single unreleased listener can be enough to cause a significant resource leak.

This can be seen using the Developer Tools by going to Memory > Take Snapshot. Multiple non-GCed Term components and Terminal instances are reachable even when only one pane remains open.

Additionally, the necessary cleanup on TERM_GROUP_EXIT in lib/components/terms.js is moved from onRef() to componentWillReceiveProps(). This is because this.props.sessions is not yet updated when onRef() is called, and currently the delete statement is never executed.

[rauchg]

@igorsdv this is absolutely amazing. Thank you so much!

[Tyriar]

Not all listeners are installed when open is called, doing this on multiple objects will almost certainly break other components. Can the code be changed to call open once? I think it works fine if you open on some parent element and transfer that between split elements.

Also here is upstream request xtermjs/xterm.js#1323

[igorsdv]

@Tyriar Thanks! The only listener not registered in open that I noticed was InputHandler. In the end the object ends up with the same number of listeners as before the dispose calls. But yes I agree that calling open once and reattaching the container as you suggest would be better, not sure how much more complicated it is with React but it should be possible.

[igorsdv]

Implemented @Tyriar's suggestion to reattach the xterm.js parent element without calling open again, in the end it turned out less intrusive than I anticipated. The performance gains are still there, but without messing with xterm.js internals.

[chabou]

Awesome 🎉

Thanks for your assist @Tyriar

[chabou]

Removing this.termRef is a breaking change
https://github.com/zeit/hyper/pull/3409/files#diff-268710614c2274f611be667a5f72bb13L79

It has broken some plugins: chabou/hyper-pane#42