Replacing Q promises with ES6 promises

src/js/main.js

@@ -41,7 +41,13 @@ window._gaq = (typeof _gaq !== 'undefined') ? _gaq : {
   _.each(document.querySelectorAll('[data-expr]'), element => {
     new Parser(element, { keepContent: true })
       .parse(element.getAttribute('data-expr'))
-      .invoke('render')
-      .done();
+      .then(parser => {
+        parser.render();
+      })
+      .catch(error => {
+        setTimeout(() => {
+          throw error;
+        });
+      });
   });
 }());

src/js/parser/javascript.js

@@ -1,4 +1,3 @@
-import Q from 'q';
 import Snap from 'snapsvg';
 import _ from 'lodash';
 
@@ -45,23 +44,21 @@ export default class Parser {
   }
 
   parse(expression) {
-    var deferred = Q.defer();
-
     this._addClass('loading');
 
-    setTimeout(() => {
-      try {
-        javascript.Parser.SyntaxNode.state = this.state;
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        try {
+          javascript.Parser.SyntaxNode.state = this.state;
 
-        this.parsed = javascript.parse(expression.replace(/\n/g, '\\n'));
-        deferred.resolve(this);
-      }
-      catch(e) {
-        deferred.reject(e);
-      }
+          this.parsed = javascript.parse(expression.replace(/\n/g, '\\n'));
+          resolve(this);
+        }
+        catch(e) {
+          reject(e);
+        }
+      });
     });
-
-    return deferred.promise;
   }
 
   render() {
@@ -78,7 +75,7 @@ export default class Parser {
           height: box.height + 20
         });
       })
-      .finally(() => {
+      .then(() => {
         this._removeClass('loading');
         this.container.removeChild(this.container.querySelector('.progress'));
       });

src/js/parser/javascript/charset.js

@@ -1,6 +1,5 @@
 import util from '../../util.js';
 import _ from 'lodash';
-import Q from 'q';
 export default {
   type: 'charset',
 
@@ -22,7 +21,7 @@ export default {
   _render() {
     this.partContainer = this.container.group();
 
-    return Q.all(_.map(this.elements, part => {
+    return Promise.all(_.map(this.elements, part => {
       return part.render(this.partContainer.group());
     }))
       .then(() => {

src/js/parser/javascript/charset_range.js

@@ -1,6 +1,5 @@
 import util from '../../util.js';
 import _ from 'lodash';
-import Q from 'q';
 
 export default {
   type: 'charset-range',
@@ -12,7 +11,7 @@ export default {
       this.last
     ];
 
-    return Q.all([
+    return Promise.all([
       this.first.render(this.container.group()),
       this.last.render(this.container.group())
     ])

src/js/parser/javascript/escape.js

@@ -15,11 +15,12 @@ export default {
 
   _render() {
     return this.renderLabel(this.label)
-      .tap(label => {
+      .then(label => {
         label.select('rect').attr({
           rx: 3,
           ry: 3
         });
+        return label;
       });
   },
 

src/js/parser/javascript/literal.js

@@ -5,7 +5,7 @@ export default {
 
   _render() {
     return this.renderLabel(['\u201c', this.literal, '\u201d'])
-      .tap(label => {
+      .then(label => {
         var spans = label.selectAll('tspan');
 
         spans[0].addClass('quote');
@@ -15,6 +15,8 @@ export default {
           rx: 3,
           ry: 3
         });
+
+        return label;
       });
   },
 

src/js/parser/javascript/match.js

@@ -1,6 +1,5 @@
 import util from '../../util.js';
 import _ from 'lodash';
-import Q from 'q';
 
 export default {
   type: 'match',
@@ -28,12 +27,16 @@ export default {
 
     if (this.anchorStart) {
       start = this.renderLabel('Start of line')
-        .invoke('addClass', 'anchor');
+        .then(label => {
+          return label.addClass('anchor');
+        });
     }
 
     if (this.anchorEnd) {
       end = this.renderLabel('End of line')
-        .invoke('addClass', 'anchor');
+        .then(label => {
+          return label.addClass('anchor');
+        });
     }
 
     partPromises = _.map(this.parts, part => {
@@ -46,7 +49,7 @@ export default {
       items = [this.container.group()];
     }
 
-    return Q.all(items)
+    return Promise.all(items)
       .then(items => {
         this.start = _.first(items);
         this.end = _.last(items);

src/js/parser/javascript/node.js

@@ -1,6 +1,5 @@
 import util from '../../util.js';
 import _ from 'lodash';
-import Q from 'q';
 
 export default class Node {
   constructor(textValue, offset, elements, properties) {
@@ -59,18 +58,15 @@ export default class Node {
   }
 
   deferredStep() {
-    var deferred = Q.defer(),
-        result = arguments;
-
-    setTimeout(() => {
-      if (this.state.cancelRender) {
-        deferred.reject('Render cancelled');
-      } else {
-        deferred.resolve.apply(this, result);
-      }
-    }, 1);
-
-    return deferred.promise;
+    return new Promise((resolve, reject) => {
+      setTimeout(() => {
+        if (this.state.cancelRender) {
+          reject('Render cancelled');
+        } else {
+          resolve.apply(this, arguments);
+        }
+      }, 1);
+    });
   }
 
   renderLabel(text) {

src/js/parser/javascript/regexp.js

@@ -1,6 +1,5 @@
 import util from '../../util.js';
 import _ from 'lodash';
-import Q from 'q';
 
 export default {
   type: 'regexp',
@@ -11,7 +10,7 @@ export default {
       .transform(Snap.matrix()
         .translate(20, 0));
 
-    return Q.all(_.map(this.matches, match => {
+    return Promise.all(_.map(this.matches, match => {
       return match.render(matchContainer.group());
     }))
       .then(() => {

src/js/regexper.js

@@ -1,6 +1,5 @@
 import util from './util.js';
 import Parser from './parser/javascript.js';
-import Q from 'q';
 import _ from 'lodash';
 
 export default class Regexper {
@@ -98,7 +97,11 @@ export default class Regexper {
     this.state = '';
 
     if (expression !== '') {
-      this.renderRegexp(expression).done();
+      this.renderRegexp(expression).catch(message => {
+        setTimeout(() => {
+          throw message;
+        });
+      });
     }
   }
 
@@ -142,15 +145,13 @@ export default class Regexper {
         startTime, endTime;
 
     if (this.running) {
-      let deferred = Q.defer();
-
       this.running.cancel();
 
-      setTimeout(() => {
-        deferred.resolve(this.renderRegexp(expression));
-      }, 10);
-
-      return deferred.promise;
+      return new Promise((resolve, reject) => {
+        setTimeout(() => {
+          resolve(this.renderRegexp(expression));
+        }, 10);
+      });
     }
 
     this.state = 'is-loading';
@@ -161,7 +162,7 @@ export default class Regexper {
 
     return this.running
       .parse(expression)
-      .then(null, message => {
+      .catch(message => {
         this.state = 'has-error';
         this.error.innerHTML = '';
         this.error.appendChild(document.createTextNode(message));
@@ -170,7 +171,9 @@ export default class Regexper {
 
         throw message;
       })
-      .invoke('render')
+      .then(parser => {
+        return parser.render();
+      })
       .then(() => {
         this.state = 'has-results';
         this.updateLinks();
@@ -180,7 +183,7 @@ export default class Regexper {
         endTime = new Date().getTime();
         window._gaq.push(['_trackTiming', 'visualization', 'total time', endTime - startTime]);
       })
-      .then(null, message => {
+      .catch(message => {
         if (message === 'Render cancelled') {
           window._gaq.push(['_trackEvent', 'visualization', 'cancelled']);
           this.state = '';
@@ -190,8 +193,14 @@ export default class Regexper {
           throw message;
         }
       })
-      .finally(() => {
-        this.running = false;
-      });
+      .then(
+        () => {
+          this.running = false;
+        },
+        message => {
+          this.running = false;
+          throw message;
+        }
+      );
   }
 }