Replace $LAB with path aware loadScript that uses jQuery

.jshintrc

@@ -4,7 +4,6 @@
     "$",
     "RSVP",
     "Discourse",
-    "$LAB",
     "Em",
     "PreloadStore",
     "Handlebars",

app/assets/javascripts/admin/components/ace-editor.js.es6

@@ -0,0 +1,51 @@
+/*global ace:true */
+
+import loadScript from 'discourse/lib/load-script';
+
+export default Ember.Component.extend({
+  mode: 'css',
+  classNames: ['ace-wrapper'],
+  _editor: null,
+  _skipContentChangeEvent: null,
+
+  contentChanged: function() {
+    if (this._editor && !this._skipContentChangeEvent) {
+      this._editor.getSession().setValue(this.get('content'));
+    }
+  }.observes('content'),
+
+  render(buffer) {
+    buffer.push("<div class='ace'>");
+    if (this.get('content')) {
+      buffer.push(Handlebars.Utils.escapeExpression(this.get('content')));
+    }
+    buffer.push("</div>");
+  },
+
+  _destroyEditor: function() {
+    if (this._editor) {
+      this._editor.destroy();
+      this._editor = null;
+    }
+  }.on('willDestroyElement'),
+
+  _initEditor: function() {
+    const self = this;
+
+    loadScript("/javascripts/ace/ace.js").then(function() {
+      const editor = ace.edit(self.$('.ace')[0]);
+      editor.setTheme("ace/theme/chrome");
+      editor.setShowPrintMargin(false);
+      editor.getSession().setMode("ace/mode/" + (self.get('mode')));
+      editor.on('change', function() {
+        self._skipContentChangeEvent = true;
+        self.set('content', editor.getSession().getValue());
+        self._skipContentChangeEvent = false;
+      });
+
+      self.$().data('editor', editor);
+      self._editor = editor;
+    });
+
+  }.on('didInsertElement')
+});

app/assets/javascripts/admin/templates/customize_css_html.hbs

@@ -44,16 +44,16 @@
       </div>
 
       <div class="admin-container">
-        {{#if view.stylesheetActive}}{{aceEditor content=selectedItem.stylesheet mode="scss"}}{{/if}}
-        {{#if view.headerActive}}{{aceEditor content=selectedItem.header mode="html"}}{{/if}}
-        {{#if view.topActive}}{{aceEditor content=selectedItem.top mode="html"}}{{/if}}
-        {{#if view.footerActive}}{{aceEditor content=selectedItem.footer mode="html"}}{{/if}}
-        {{#if view.headTagActive}}{{aceEditor content=selectedItem.head_tag mode="html"}}{{/if}}
-        {{#if view.bodyTagActive}}{{aceEditor content=selectedItem.body_tag mode="html"}}{{/if}}
-        {{#if view.mobileStylesheetActive}}{{aceEditor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
-        {{#if view.mobileHeaderActive}}{{aceEditor content=selectedItem.mobile_header mode="html"}}{{/if}}
-        {{#if view.mobileTopActive}}{{aceEditor content=selectedItem.mobile_top mode="html"}}{{/if}}
-        {{#if view.mobileFooterActive}}{{aceEditor content=selectedItem.mobile_footer mode="html"}}{{/if}}
+        {{#if view.stylesheetActive}}{{ace-editor content=selectedItem.stylesheet mode="scss"}}{{/if}}
+        {{#if view.headerActive}}{{ace-editor content=selectedItem.header mode="html"}}{{/if}}
+        {{#if view.topActive}}{{ace-editor content=selectedItem.top mode="html"}}{{/if}}
+        {{#if view.footerActive}}{{ace-editor content=selectedItem.footer mode="html"}}{{/if}}
+        {{#if view.headTagActive}}{{ace-editor content=selectedItem.head_tag mode="html"}}{{/if}}
+        {{#if view.bodyTagActive}}{{ace-editor content=selectedItem.body_tag mode="html"}}{{/if}}
+        {{#if view.mobileStylesheetActive}}{{ace-editor content=selectedItem.mobile_stylesheet mode="scss"}}{{/if}}
+        {{#if view.mobileHeaderActive}}{{ace-editor content=selectedItem.mobile_header mode="html"}}{{/if}}
+        {{#if view.mobileTopActive}}{{ace-editor content=selectedItem.mobile_top mode="html"}}{{/if}}
+        {{#if view.mobileFooterActive}}{{ace-editor content=selectedItem.mobile_footer mode="html"}}{{/if}}
       </div>
       <div class='admin-footer'>
         <div class='status-actions'>

app/assets/javascripts/admin/templates/site_text_edit.hbs

@@ -8,10 +8,10 @@
   {{textarea value=value class="plain"}}
 {{/if}}
 {{#if html}}
-  {{aceEditor content=value mode="html"}}
+  {{ace-editor content=value mode="html"}}
 {{/if}}
 {{#if css}}
-  {{aceEditor content=value mode="css"}}
+  {{ace-editor content=value mode="css"}}
 {{/if}}
 
 <div class='controls'>

app/assets/javascripts/admin/views/ace_editor_view.js

@@ -1,62 +0,0 @@
-/*global ace:true */
-
-/**
-  A view that wraps the ACE editor (http://ace.ajax.org/)
-
-  @class AceEditorView
-  @extends Discourse.View
-  @namespace Discourse
-  @module Discourse
-**/
-Discourse.AceEditorView = Discourse.View.extend({
-  mode: 'css',
-  classNames: ['ace-wrapper'],
-
-  contentChanged: (function() {
-    if (this.editor && !this.skipContentChangeEvent) {
-      return this.editor.getSession().setValue(this.get('content'));
-    }
-  }).observes('content'),
-
-  render: function(buffer) {
-    buffer.push("<div class='ace'>");
-    if (this.get('content')) {
-      buffer.push(Handlebars.Utils.escapeExpression(this.get('content')));
-    }
-    return buffer.push("</div>");
-  },
-
-  willDestroyElement: function() {
-    if (this.editor) {
-      this.editor.destroy();
-      this.editor = null;
-    }
-  },
-
-  didInsertElement: function() {
-
-    var self = this;
-
-    var initAce = function() {
-      self.editor = ace.edit(self.$('.ace')[0]);
-      self.editor.setTheme("ace/theme/chrome");
-      self.editor.setShowPrintMargin(false);
-      self.editor.getSession().setMode("ace/mode/" + (self.get('mode')));
-      self.editor.on("change", function() {
-        self.skipContentChangeEvent = true;
-        self.set('content', self.editor.getSession().getValue());
-        self.skipContentChangeEvent = false;
-      });
-      self.$().data('editor', self.editor);
-    };
-
-    if (window.ace) {
-      initAce();
-    } else {
-      $LAB.script('/javascripts/ace/ace.js').wait(initAce);
-    }
-  }
-});
-
-
-Discourse.View.registerHelper('aceEditor', Discourse.AceEditorView);

app/assets/javascripts/discourse/components/pagedown-editor.js.es6

@@ -0,0 +1,23 @@
+import loadScript from 'discourse/lib/load-script';
+
+export default Ember.Component.extend({
+  elementId: 'pagedown-editor',
+
+  _initializeWmd: function() {
+    const self = this;
+    loadScript('defer/html-sanitizer-bundle').then(function() {
+      $('#wmd-input').data('init', true);
+      self._editor = Discourse.Markdown.createEditor();
+      self._editor.run();
+      Ember.run.scheduleOnce('afterRender', self, self._refreshPreview);
+    });
+  }.on('didInsertElement'),
+
+  observeValue: function() {
+    Ember.run.scheduleOnce('afterRender', this, this._refreshPreview);
+  }.observes('value'),
+
+  _refreshPreview() {
+    this._editor.refreshPreview();
+  }
+});

app/assets/javascripts/discourse/controllers/quote-button.js.es6

@@ -1,13 +1,12 @@
-/* global assetPath:true */
 import DiscourseController from 'discourse/controllers/controller';
+import loadScript from 'discourse/lib/load-script';
 
 export default DiscourseController.extend({
   needs: ['topic', 'composer'],
 
-  init: function() {
-    this._super();
-    $LAB.script(assetPath('defer/html-sanitizer-bundle'));
-  },
+  _loadSanitizer: function() {
+    loadScript('defer/html-sanitizer-bundle');
+  }.on('init'),
 
   /**
     If the buffer is cleared, clear out other state (post)

app/assets/javascripts/discourse/initializers/view-helpers.js.es6

@@ -1,5 +1,4 @@
 var helpers = ['input-tip',
-               'pagedown-editor',
                'category-chooser',
                'combo-box',
                'choose-topic',

app/assets/javascripts/discourse/lib/load-script.js.es6

@@ -1,5 +1,17 @@
+/* global assetPath */
+
+const _loaded = {};
+
 export default function loadScript(url) {
   return new Ember.RSVP.Promise(function(resolve) {
-    $LAB.script(Discourse.getURL(url)).wait(() => resolve());
+    url = Discourse.getURL((assetPath && assetPath(url)) || url);
+
+    // If we already loaded this url
+    if (_loaded[url]) { return resolve(); }
+
+    $.getScript(url).then(function() {
+      _loaded[url] = true;
+      resolve();
+    });
   });
 }

app/assets/javascripts/discourse/templates/components/pagedown-editor.hbs

@@ -0,0 +1,3 @@
+<div id='wmd-button-bar'></div>
+{{textarea value=value elementId="wmd-input"}}
+<div id='wmd-preview' {{bind-attr class=":preview value::hidden"}}>

app/assets/javascripts/discourse/views/composer.js.es6

@@ -1,7 +1,6 @@
-/*global assetPath:true */
-
 import userSearch from 'discourse/lib/user-search';
 import afterTransition from 'discourse/lib/after-transition';
+import loadScript from 'discourse/lib/load-script';
 
 const ComposerView = Discourse.View.extend(Ember.Evented, {
   _lastKeyTimeout: null,
@@ -214,7 +213,7 @@ const ComposerView = Discourse.View.extend(Ember.Evented, {
     this.wmdInput = $wmdInput = $('#wmd-input');
     if ($wmdInput.length === 0 || $wmdInput.data('init') === true) return;
 
-    $LAB.script(assetPath('defer/html-sanitizer-bundle'));
+    loadScript('defer/html-sanitizer-bundle');
     ComposerView.trigger("initWmdEditor");
     this._applyEmojiAutocomplete();
 

app/assets/javascripts/discourse/views/pagedown-editor.js.es6

@@ -1,33 +0,0 @@
-/*global assetPath:true */
-
-import PagedownPreviewView from 'discourse/views/pagedown-preview';
-import DiscourseContainerView from 'discourse/views/container';
-
-export default DiscourseContainerView.extend({
-  elementId: 'pagedown-editor',
-
-  init: function() {
-    this._super();
-
-    $LAB.script(assetPath('defer/html-sanitizer-bundle'));
-
-    // Add a button bar
-    this.pushObject(Em.View.create({ elementId: 'wmd-button-bar' }));
-    this.pushObject(Em.TextArea.create({ valueBinding: 'parentView.value', elementId: 'wmd-input' }));
-
-    this.attachViewClass(PagedownPreviewView);
-  },
-
-  didInsertElement: function() {
-    $('#wmd-input').data('init', true);
-    this.set('editor', Discourse.Markdown.createEditor());
-    this.get('editor').run();
-  },
-
-  observeValue: function() {
-    var editor = this.get('editor');
-    if (!editor) return;
-    Ember.run.next(null, function() { editor.refreshPreview(); });
-  }.observes('value')
-
-});

app/assets/javascripts/discourse/views/pagedown-preview.js.es6

@@ -1,13 +0,0 @@
-/**
-  A helper view to display a preview of the pagedown content
-
-  @class PagedownPreviewView
-  @extends Discourse.View
-  @namespace Discourse
-  @module Discourse
-**/
-export default Discourse.View.extend({
-  elementId: 'wmd-preview',
-  classNameBindings: [':preview', 'hidden'],
-  hidden: Em.computed.empty('parentView.value')
-});

app/assets/javascripts/main_include.js

@@ -10,6 +10,7 @@
 //
 
 // Stuff we need to load first
+//= require ./discourse/lib/load-script
 //= require ./discourse/lib/notification-levels
 //= require ./discourse/lib/app-events
 //= require ./discourse/helpers/i18n
@@ -47,7 +48,6 @@
 //= require ./discourse/components/dropdown-button
 //= require ./discourse/components/notifications-button
 //= require ./discourse/components/topic-notifications-button
-//= require ./discourse/views/pagedown-preview
 //= require ./discourse/views/composer
 //= require ./discourse/routes/discourse_route
 //= require ./discourse/routes/build-topic-route

app/assets/javascripts/vendor.js

@@ -10,7 +10,6 @@
 //= require loader
 //= require message-bus
 //= require jquery.ui.widget.js
-//= require LAB.js
 //= require Markdown.Converter.js
 //= require better_markdown.js
 //= require bootbox.js

app/views/common/_discourse_javascript.html.erb

@@ -1,9 +1,7 @@
 <script>
   window.assetPath = (function(){
-
     var map = <%= deferred_scripts %>;
-
-    return function(asset){ return map[asset]; };
+    return function(asset) { return map[asset]; };
   })();
 </script>