WebGL renderer (using xterm.js fork) (#3368)

* Enabling webGL renderer

* Use @zeit/xterm fork of xterm

* Adding webGLRenderer config

* Fix linting issues

* Allow for hot-reloading of webGLRenderer

* Adding link to WebGL renderer issue we're working around

* Using NPM tarball instead of resolutions (which wasn't working

* Hard-coding selection color to white because nothing else is yet supported

app/config/config-default.js

@@ -144,6 +144,8 @@ module.exports = {
   // to load it and avoid it being `npm install`ed
   localPlugins: [],
 
+  webGLRenderer: true,
+
   keymaps: {
     // Example
     // 'window:devtools': 'cmd+alt+o',

lib/components/term-group.js

@@ -92,6 +92,7 @@ class TermGroup_ extends React.PureComponent {
       borderColor: this.props.borderColor,
       selectionColor: this.props.selectionColor,
       quickEdit: this.props.quickEdit,
+      webGLRenderer: this.props.webGLRenderer,
       uid
     });
 

lib/components/term.js

@@ -36,13 +36,21 @@ const getTermOptions = props => {
     lineHeight: props.lineHeight,
     letterSpacing: props.letterSpacing,
     allowTransparency: needTransparency,
-    experimentalCharAtlas: 'dynamic',
+    // HACK: Terminal.setOption breaks if we don't apply these in this order
+    // TODO: The above notice can be removed once this is addressed:
+    // https://github.com/xtermjs/xterm.js/pull/1790#issuecomment-450000121
+    rendererType: props.webGLRenderer ? 'webgl' : 'canvas',
+    experimentalCharAtlas: props.webGLRenderer ? 'webgl' : 'dynamic',
     theme: {
       foreground: props.foregroundColor,
       background: backgroundColor,
       cursor: props.cursorColor,
       cursorAccent: props.cursorAccentColor,
-      selection: props.selectionColor,
+      // TODO: This hard codes the selection color to opaque white because the
+      // webgl renderer doesn't support anything else at the moment. Remove this
+      // once WebGL gets support for selection color. Discussed here:
+      // https://github.com/xtermjs/xterm.js/pull/1790
+      selection: props.webGLRenderer ? '#fff' : props.selectionColor,
       black: props.colors.black,
       red: props.colors.red,
       green: props.colors.green,
@@ -243,11 +251,22 @@ export default class Term extends React.PureComponent {
     // Update only options that have changed.
     Object.keys(nextTermOptions)
       .filter(option => option !== 'theme' && nextTermOptions[option] !== this.termOptions[option])
-      .forEach(option => this.term.setOption(option, nextTermOptions[option]));
+      .forEach(option => {
+        try {
+          this.term.setOption(option, nextTermOptions[option]);
+        } catch (e) {
+          if (/The webgl renderer only works with the webgl char atlas/i.test(e.message)) {
+            // Ignore this because the char atlas will also be changed
+          } else {
+            throw e;
+          }
+        }
+      });
 
     // Do we need to update theme?
     const shouldUpdateTheme =
       !this.termOptions.theme ||
+      nextTermOptions.rendererType !== this.termOptions.rendererType ||
       Object.keys(nextTermOptions.theme).some(
         option => nextTermOptions.theme[option] !== this.termOptions.theme[option]
       );

lib/components/terms.js

@@ -116,6 +116,7 @@ export default class Terms extends React.Component {
             onURLAbort: this.props.onURLAbort,
             onContextMenu: this.props.onContextMenu,
             quickEdit: this.props.quickEdit,
+            webGLRenderer: this.props.webGLRenderer,
             parentProps: this.props
           });
 

lib/containers/terms.js

@@ -45,7 +45,8 @@ const TermsContainer = connect(
       bellSoundURL: state.ui.bellSoundURL,
       copyOnSelect: state.ui.copyOnSelect,
       modifierKeys: state.ui.modifierKeys,
-      quickEdit: state.ui.quickEdit
+      quickEdit: state.ui.quickEdit,
+      webGLRenderer: state.ui.webGLRenderer
     };
   },
   dispatch => {

lib/reducers/ui.js

@@ -96,7 +96,8 @@ const initial = Immutable({
   },
   showHamburgerMenu: '',
   showWindowControls: '',
-  quickEdit: false
+  quickEdit: false,
+  webGLRenderer: true
 });
 
 const currentWindow = remote.getCurrentWindow();
@@ -237,6 +238,10 @@ const reducer = (state = initial, action) => {
               ret.quickEdit = config.quickEdit;
             }
 
+            if (typeof config.webGLRenderer !== undefined) {
+              ret.webGLRenderer = config.webGLRenderer;
+            }
+
             ret._lastUpdate = now;
 
             return ret;

package.json

@@ -207,7 +207,7 @@
     "styled-jsx": "2.2.6",
     "stylis": "3.5.0",
     "uuid": "3.1.0",
-    "xterm": "3.9.1"
+    "xterm": "https://registry.npmjs.org/@zeit/xterm/-/xterm-3.9.1.tgz"
   },
   "devDependencies": {
     "ava": "0.25.0",

yarn.lock

@@ -7111,10 +7111,9 @@ xtend@~2.1.1:
   dependencies:
     object-keys "~0.4.0"
 
-xterm@3.9.1:
+"xterm@https://registry.npmjs.org/@zeit/xterm/-/xterm-3.9.1.tgz":
   version "3.9.1"
-  resolved "https://registry.yarnpkg.com/xterm/-/xterm-3.9.1.tgz#65756beb09bb6fb44aeb29032adcd6789aaaa5f4"
+  resolved "https://registry.npmjs.org/@zeit/xterm/-/xterm-3.9.1.tgz#576ba39c4159e8a31540b98a2bfebda4940e98ed"
-  integrity sha512-5AZlhP0jvH/Sskx1UvvNFMqDRHVFqapl59rjV3RRpTJmveoharJplxPfzSThk85I4+AZo2xvD0X0nh0AAzkeZQ==
 
 y18n@^3.2.1:
   version "3.2.1"