- Refactoring: Minimize Node/browserify dependency and use browser EventTarget and ES6 classes for more modern, succincter syntax

Author: brettz9

index.js

@@ -2,128 +2,113 @@
 (function($, prettyPrint) {
   'use strict';
   const jsdoctypeparser = require('jsdoctypeparser');
-  const events = require('events');
-  const util = require('util');
 
   const INITIAL_TYPE_EXPR = '?TypeExpression=';
 
+  class TypeExpressionModel extends EventTarget {
+    constructor () {
+      super();
+    }
 
+    parse (typeExpr) {
+      try {
+        const ast = jsdoctypeparser.parse(typeExpr);
 
-  function TypeExpressionModel() {
-    events.EventEmitter.call(this);
-  }
-  util.inherits(TypeExpressionModel, events.EventEmitter);
+        this.ast = ast;
+        this.hasSyntaxError = false;
+        this.errorMessage = '';
+      }
+      catch (err) {
+        if (!(err instanceof jsdoctypeparser.JSDocTypeSyntaxError)) throw err;
 
+        this.ast = null;
+        this.hasSyntaxError = true;
+        this.errorMessage = err.message;
+      }
 
-  TypeExpressionModel.EventType = {
-    CHANGE: 'change',
-  };
+      this.dispatchEvent(new CustomEvent('change'));
+    }
+  }
 
+  class ParseResultView {
+    constructor (model, $jsonView, $stringView) {
+      this.typeExprModel = model;
 
-  TypeExpressionModel.prototype.parse = function(typeExpr) {
-    try {
-      const ast = jsdoctypeparser.parse(typeExpr);
+      this.$jsonView = $jsonView;
+      this.$stringView = $stringView;
 
-      this.ast = ast;
-      this.hasSyntaxError = false;
-      this.errorMessage = '';
+      this.typeExprModel.addEventListener('change', () => {
+        this.render(this.typeExprModel);
+      });
     }
-    catch (err) {
-      if (!(err instanceof jsdoctypeparser.JSDocTypeSyntaxError)) throw err;
 
-      this.ast = null;
-      this.hasSyntaxError = true;
-      this.errorMessage = err.message;
+    render (model) {
+      const $allViews = $([
+        this.$jsonView[0],
+        this.$stringView[0],
+      ]);
+
+      if (model.hasSyntaxError) {
+        $allViews.text('ERROR');
+      }
+      else {
+        const ast = model.ast;
+        this.$jsonView.text(JSON.stringify(ast, null, 2));
+        this.$stringView.text(jsdoctypeparser.publish(ast));
+      }
+
+      $allViews.removeClass('prettyprinted');
+      prettyPrint();
     }
-
-    this.emit(TypeExpressionModel.EventType.CHANGE);
-  };
-
-
-
-  function ParseResultView(model, $jsonView, $stringView) {
-    this.typeExprModel = model;
-
-    this.$jsonView = $jsonView;
-    this.$stringView = $stringView;
-
-    this.typeExprModel.on(TypeExpressionModel.EventType.CHANGE, () => {
-      this.render(this.typeExprModel);
-    });
   }
 
+  class ParseSuccessfulAlert {
+    constructor (model, $alertElement) {
+      this.typeExprModel = model;
 
-  ParseResultView.prototype.render = function(model) {
-    const $allViews = $([
-      this.$jsonView[0],
-      this.$stringView[0],
-    ]);
+      this.$alertElement = $alertElement;
 
-    if (model.hasSyntaxError) {
-      $allViews.text('ERROR');
-    }
-    else {
-      const ast = model.ast;
-      this.$jsonView.text(JSON.stringify(ast, null, 2));
-      this.$stringView.text(jsdoctypeparser.publish(ast));
+      this.typeExprModel.addEventListener('change', () => {
+        this.setVisibility(!this.typeExprModel.hasSyntaxError);
+      });
     }
 
-    $allViews.removeClass('prettyprinted');
-    prettyPrint();
-  };
-
-
-
-  function ParseSuccessfulAlert(model, $alertElement) {
-    this.typeExprModel = model;
-
-    this.$alertElement = $alertElement;
-
-    this.typeExprModel.on(TypeExpressionModel.EventType.CHANGE, () => {
-      this.setVisibility(!this.typeExprModel.hasSyntaxError);
-    });
+    setVisibility (isVisible) {
+      this.$alertElement.toggle(isVisible);
+    }
   }
 
+  class ParseErrorAlert {
+    constructor (model, $alertElement, $messageElement, $closeButton) {
+      this.typeExprModel = model;
 
-  ParseSuccessfulAlert.prototype.setVisibility = function(isVisible) {
-    this.$alertElement.toggle(isVisible);
-  };
-
+      this.$alertElement = $alertElement;
+      this.$messageElement = $messageElement;
+      this.$closeButton = $closeButton;
 
+      this.typeExprModel.addEventListener('change', () => {
+        this.render(this.typeExprModel);
+      });
 
-  function ParseErrorAlert(model, $alertElement, $messageElement, $closeButton) {
-    this.typeExprModel = model;
+      this.$closeButton.on('click', () => {
+        this.setVisibility(true);
+      });
+    }
 
-    this.$alertElement = $alertElement;
-    this.$messageElement = $messageElement;
-    this.$closeButton = $closeButton;
+    render (model) {
+      this.setVisibility(model.hasSyntaxError);
+      this.setMessage(model.errorMessage);
+    }
 
-    this.typeExprModel.on(TypeExpressionModel.EventType.CHANGE, () => {
-      this.render(this.typeExprModel);
-    });
+    setVisibility (isVisible) {
+      this.$alertElement.toggle(isVisible);
+    }
 
-    this.$closeButton.on('click', () => {
-      this.setVisibility(true);
-    });
+    setMessage (msg) {
+      this.$messageElement.text(msg);
+    }
   }
 
-
-  ParseErrorAlert.prototype.render = function(model) {
-    this.setVisibility(model.hasSyntaxError);
-    this.setMessage(model.errorMessage);
-  };
-
-
-  ParseErrorAlert.prototype.setVisibility = function(isVisible) {
-    this.$alertElement.toggle(isVisible);
-  };
-
-
-  ParseErrorAlert.prototype.setMessage = function(msg) {
-    this.$messageElement.text(msg);
-  };
-
-
   function bootstrap() {
     const typeExprModel = new TypeExpressionModel();
 
@@ -146,30 +131,23 @@
     typeExprModel.parse(INITIAL_TYPE_EXPR, true);
   }
 
-
-
   function createParseSuccessfulAlert(model) {
     const $alertElement = $('#success');
     return new ParseSuccessfulAlert(model, $alertElement);
   }
 
-
-
   function createParseErrorAlert(model) {
     const $alertElement = $('#err');
     const $messageElement = $('#err-msg');
     const $closeButton = $('#err-close');
     return new ParseErrorAlert(model, $alertElement, $messageElement, $closeButton);
   }
 
-
-
   function createParseResultView(model) {
     const $jsonView = $('#output-obj');
     const $stringView = $('#output-str');
     return new ParseResultView(model, $jsonView, $stringView);
   }
 
-
   bootstrap();
 })(jQuery, prettyPrint);