Migrate discourse.js to ES6

app/assets/javascripts/deprecated.js

@@ -0,0 +1,25 @@
+(function() {
+  var Discourse = require('discourse').default;
+
+  Discourse.Markdown = {
+    whiteListTag: Ember.K,
+    whiteListIframe: Ember.K
+  };
+
+  Discourse.Dialect = {
+    inlineRegexp: Ember.K,
+    addPreProcessor: Ember.K,
+    replaceBlock: Ember.K,
+    inlineReplace: Ember.K,
+    registerInline: Ember.K,
+    registerEmoji: Ember.K
+  };
+
+  Discourse.ajax = function() {
+    var ajax = require('discourse/lib/ajax').ajax;
+    Ember.warn("Discourse.ajax is deprecated. Import the module and use it instead");
+    return ajax.apply(this, arguments);
+  };
+
+  window.Discourse = Discourse;
+})();

app/assets/javascripts/discourse.js.es6

@@ -1,19 +1,14 @@
-/*global Favcount:true*/
+import DiscourseResolver from 'discourse/ember/resolver';
-var DiscourseResolver = require('discourse/ember/resolver').default;
+import { default as computed, observes } from 'ember-addons/ember-computed-decorators';
 
-// Allow us to import Ember
+const _pluginCallbacks = [];
-define('ember', ['exports'], function(__exports__) {
-  __exports__.default = Ember;
-});
 
-var _pluginCallbacks = [];
+const Discourse = Ember.Application.extend({
-
-window.Discourse = Ember.Application.extend({
   rootElement: '#main',
   _docTitle: document.title,
   __TAGS_INCLUDED__: true,
 
-  getURL: function(url) {
+  getURL(url) {
     if (!url) return url;
 
     // if it's a non relative URL, return it.
@@ -25,7 +20,7 @@ window.Discourse = Ember.Application.extend({
     return Discourse.BaseUri + url;
   },
 
-  getURLWithCDN: function(url) {
+  getURLWithCDN(url) {
     url = Discourse.getURL(url);
     // only relative urls
     if (Discourse.CDN && /^\/[^\/]/.test(url)) {
@@ -38,78 +33,76 @@ window.Discourse = Ember.Application.extend({
 
   Resolver: DiscourseResolver,
 
-  _titleChanged: function() {
+  @observes('_docTitle', 'hasFocus', 'notifyCount')
-    var title = this.get('_docTitle') || Discourse.SiteSettings.title;
+  _titleChanged() {
+    let title = this.get('_docTitle') || Discourse.SiteSettings.title;
 
     // if we change this we can trigger changes on document.title
     // only set if changed.
-    if($('title').text() !== title) {
+    if ($('title').text() !== title) {
       $('title').text(title);
     }
 
-    var notifyCount = this.get('notifyCount');
+    const notifyCount = this.get('notifyCount');
     if (notifyCount > 0 && !Discourse.User.currentProp('dynamic_favicon')) {
-      title = "(" + notifyCount + ") " + title;
+      title = `(${notifyCount}) ${title}`;
     }
 
     document.title = title;
-  }.observes('_docTitle', 'hasFocus', 'notifyCount'),
+  },
 
-  faviconChanged: function() {
+  @observes('notifyCount')
-    if(Discourse.User.currentProp('dynamic_favicon')) {
+  faviconChanged() {
-      var url = Discourse.SiteSettings.favicon_url;
+    if (Discourse.User.currentProp('dynamic_favicon')) {
+      let url = Discourse.SiteSettings.favicon_url;
       if (/^http/.test(url)) {
         url = Discourse.getURL("/favicon/proxied?" + encodeURIComponent(url));
       }
-      new Favcount(url).set(
+      new window.Favcount(url).set(this.get('notifyCount'));
-        this.get('notifyCount')
-      );
     }
-  }.observes('notifyCount'),
+  },
 
   // The classes of buttons to show on a post
-  postButtons: function() {
+  @computed
+  postButtons() {
     return Discourse.SiteSettings.post_menu.split("|").map(function(i) {
       return i.replace(/\+/, '').capitalize();
     });
-  }.property(),
+  },
 
-  notifyTitle: function(count) {
+  notifyTitle(count) {
     this.set('notifyCount', count);
   },
 
-  notifyBackgroundCountIncrement: function() {
+  notifyBackgroundCountIncrement() {
     if (!this.get('hasFocus')) {
       this.set('backgroundNotify', true);
       this.set('notifyCount', (this.get('notifyCount') || 0) + 1);
     }
   },
 
-  resetBackgroundNotifyCount: function() {
+  @observes('hasFocus')
+  resetBackgroundNotifyCount() {
     if (this.get('hasFocus') && this.get('backgroundNotify')) {
       this.set('notifyCount', 0);
     }
     this.set('backgroundNotify', false);
-  }.observes('hasFocus'),
+  },
 
-  authenticationComplete: function(options) {
+  authenticationComplete(options) {
     // TODO, how to dispatch this to the controller without the container?
-    var loginController = Discourse.__container__.lookup('controller:login');
+    const loginController = Discourse.__container__.lookup('controller:login');
     return loginController.authenticationComplete(options);
   },
 
-  /**
+  // Start up the Discourse application by running all the initializers we've defined.
-    Start up the Discourse application by running all the initializers we've defined.
+  start() {
-
-    @method start
-  **/
-  start: function() {
 
     $('noscript').remove();
 
     Object.keys(requirejs._eak_seen).forEach(function(key) {
       if (/\/pre\-initializers\//.test(key)) {
-        var module = require(key, null, null, true);
+        const module = require(key, null, null, true);
         if (!module) { throw new Error(key + ' must export an initializer.'); }
         Discourse.initializer(module.default);
       }
@@ -117,11 +110,11 @@ window.Discourse = Ember.Application.extend({
 
     Object.keys(requirejs._eak_seen).forEach(function(key) {
       if (/\/initializers\//.test(key)) {
-        var module = require(key, null, null, true);
+        const module = require(key, null, null, true);
         if (!module) { throw new Error(key + ' must export an initializer.'); }
 
-        var init = module.default;
+        const init = module.default;
-        var oldInitialize = init.initialize;
+        const oldInitialize = init.initialize;
         init.initialize = function(app) {
           oldInitialize.call(this, app.container, Discourse);
         };
@@ -131,8 +124,8 @@ window.Discourse = Ember.Application.extend({
     });
 
     // Plugins that are registered via `<script>` tags.
-    var withPluginApi = require('discourse/lib/plugin-api').withPluginApi;
+    const withPluginApi = require('discourse/lib/plugin-api').withPluginApi;
-    var initCount = 0;
+    let initCount = 0;
     _pluginCallbacks.forEach(function(cb) {
       Discourse.instanceInitializer({
         name: "_discourse_plugin_" + (++initCount),
@@ -143,7 +136,7 @@ window.Discourse = Ember.Application.extend({
       });
     });
 
-    var utils = require('discourse/lib/utilities');
+    const utils = require('discourse/lib/utilities');
     Discourse.Utilities = {};
     Object.keys(utils).forEach(function(k) {
       Discourse.Utilities[k] = function() {
@@ -153,20 +146,20 @@ window.Discourse = Ember.Application.extend({
     });
   },
 
-  requiresRefresh: function(){
+  @computed('currentAssetVersion', 'desiredAssetVersion')
-    var desired = Discourse.get("desiredAssetVersion");
+  requiresRefresh(currentAssetVersion, desiredAssetVersion) {
-    return desired && Discourse.get("currentAssetVersion") !== desired;
+    return desiredAssetVersion && currentAssetVersion !== desiredAssetVersion;
-  }.property("currentAssetVersion", "desiredAssetVersion"),
+  },
 
-  _registerPluginCode: function(version, code) {
+  _registerPluginCode(version, code) {
-    _pluginCallbacks.push({ version: version, code: code });
+    _pluginCallbacks.push({ version, code });
   },
 
   assetVersion: Ember.computed({
-    get: function() {
+    get() {
       return this.get("currentAssetVersion");
     },
-    set: function(key, val) {
+    set(key, val) {
       if(val) {
         if (this.get("currentAssetVersion")) {
           this.set("desiredAssetVersion", val);
@@ -179,22 +172,4 @@ window.Discourse = Ember.Application.extend({
   })
 }).create();
 
-Discourse.ajax = function() {
+export default Discourse;
-  var ajax = require('discourse/lib/ajax').ajax;
-  Ember.warn("Discourse.ajax is deprecated. Import the module and use it instead");
-  return ajax.apply(this, arguments);
-};
-
-Discourse.Markdown = {
-  whiteListTag: Ember.K,
-  whiteListIframe: Ember.K
-};
-
-Discourse.Dialect = {
-  inlineRegexp: Ember.K,
-  addPreProcessor: Ember.K,
-  replaceBlock: Ember.K,
-  inlineReplace: Ember.K,
-  registerInline: Ember.K,
-  registerEmoji: Ember.K
-};

app/assets/javascripts/ember-shim.js

@@ -0,0 +1,4 @@
+// Allow us to import Ember
+define('ember', ['exports'], function(__exports__) {
+  __exports__.default = Ember;
+});

app/assets/javascripts/ember_jquery.js

@@ -1,2 +1,4 @@
-//= require jquery_include.js
+//= require jquery_include
-//= require ember_include.js
+//= require ember_include
+//= require loader
+//= require ember-shim

app/assets/javascripts/main_include.js

@@ -1,10 +1,11 @@
-//= require ./discourse
-
-// Stuff we need to load first
 //= require_tree ./ember-addons/utils
 //= require ./ember-addons/decorator-alias
 //= require ./ember-addons/macro-alias
 //= require ./ember-addons/ember-computed-decorators
+//= require ./discourse
+//= require ./deprecated
+
+// Stuff we need to load first
 //= require ./discourse/lib/utilities
 //= require ./discourse/lib/ajax
 //= require ./discourse/lib/text

app/assets/javascripts/vendor.js

@@ -5,7 +5,6 @@
 //= require template_include.js
 //= require i18n-patches
 
-//= require loader
 //= require message-bus
 //= require jquery.ui.widget.js
 //= require Markdown.Converter.js

app/views/common/_discourse_javascript.html.erb

@@ -38,6 +38,7 @@
       }
     });
   <%- end %>
+
   Discourse.CDN = '<%= Rails.configuration.action_controller.asset_host %>';
   Discourse.BaseUrl = '<%= RailsMultisite::ConnectionManagement.current_hostname %>'.replace(/:[\d]*$/,"");
   Discourse.BaseUri = '<%= Discourse::base_uri %>';

test/javascripts/test_helper.js

@@ -13,17 +13,17 @@
 //= require fake_xml_http_request
 //= require route-recognizer
 //= require pretender
+//= require loader
 
 //= require locales/i18n
 //= require locales/en
 
-//= require vendor
-
-//= require htmlparser.js
-
 // Stuff we need to load first
+//= require vendor
+//= require ember-shim
 //= require pretty-text-bundle
 //= require main_include
+//= require htmlparser.js
 //= require admin
 
 //= require sinon-1.7.1