DEV: Upgrades to Ember 3.10 (#7871)

Co-Authored-By: majakomel <maja.komel@gmail.com>

Gemfile

@@ -51,7 +51,7 @@ gem 'onebox', '1.9.2'
 gem 'http_accept_language', '~>2.0.5', require: false
 
 gem 'ember-rails', '0.18.5'
-gem 'discourse-ember-source', '~> 3.8.0'
+gem 'discourse-ember-source', '~> 3.10.0'
 gem 'ember-handlebars-template', '0.8.0'
 gem 'barber'
 

Gemfile.lock

@@ -91,7 +91,7 @@ GEM
     debug_inspector (0.0.3)
     diff-lcs (1.3)
     diffy (3.3.0)
-    discourse-ember-source (3.8.0.1)
+    discourse-ember-source (3.10.0.1)
     discourse_image_optim (0.26.2)
       exifr (~> 1.2, >= 1.2.2)
       fspath (~> 3.0)
@@ -438,7 +438,7 @@ DEPENDENCIES
   colored2
   cppjieba_rb
   diffy
-  discourse-ember-source (~> 3.8.0)
+  discourse-ember-source (~> 3.10.0)
   discourse_image_optim
   email_reply_trimmer (~> 0.1)
   ember-handlebars-template (= 0.8.0)

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

@@ -75,7 +75,7 @@ export default Ember.Component.extend({
         if (!this.element || this.isDestroying || this.isDestroyed) {
           return;
         }
-        const editor = loadedAce.edit(this.$(".ace")[0]);
+        const editor = loadedAce.edit(this.element.querySelector(".ace"));
 
         editor.setTheme("ace/theme/chrome");
         editor.setShowPrintMargin(false);
@@ -89,7 +89,7 @@ export default Ember.Component.extend({
         editor.$blockScrolling = Infinity;
         editor.renderer.setScrollMargin(10, 10);
 
-        this.$().data("editor", editor);
+        this.element.setAttribute("data-editor", editor);
         this._editor = editor;
         this.changeDisabledState();
 

app/assets/javascripts/admin/components/admin-backups-logs.js.es6

@@ -18,8 +18,8 @@ export default Ember.Component.extend(
     },
 
     _scrollDown() {
-      const $div = this.$()[0];
+      const div = this.element;
-      $div.scrollTop = $div.scrollHeight;
+      div.scrollTop = div.scrollHeight;
     },
 
     @on("init")

app/assets/javascripts/admin/components/admin-graph.js.es6

@@ -5,7 +5,7 @@ export default Ember.Component.extend({
   type: "line",
 
   refreshChart() {
-    const ctx = this.$()[0].getContext("2d");
+    const ctx = this.element.getContext("2d");
     const model = this.model;
     const rawData = this.get("model.data");
 

app/assets/javascripts/admin/components/admin-report-chart.js.es6

@@ -35,14 +35,17 @@ export default Ember.Component.extend({
 
   _scheduleChartRendering() {
     Ember.run.schedule("afterRender", () => {
-      this._renderChart(this.model, this.$(".chart-canvas"));
+      this._renderChart(
+        this.model,
+        this.element && this.element.querySelector(".chart-canvas")
+      );
     });
   },
 
-  _renderChart(model, $chartCanvas) {
+  _renderChart(model, chartCanvas) {
-    if (!$chartCanvas || !$chartCanvas.length) return;
+    if (!chartCanvas) return;
 
-    const context = $chartCanvas[0].getContext("2d");
+    const context = chartCanvas.getContext("2d");
     const chartData = Ember.makeArray(
       model.get("chartData") || model.get("data")
     );

app/assets/javascripts/admin/components/admin-report-stacked-chart.js.es6

@@ -33,14 +33,17 @@ export default Ember.Component.extend({
 
   _scheduleChartRendering() {
     Ember.run.schedule("afterRender", () => {
-      this._renderChart(this.model, this.$(".chart-canvas"));
+      this._renderChart(
+        this.model,
+        this.element.querySelector(".chart-canvas")
+      );
     });
   },
 
-  _renderChart(model, $chartCanvas) {
+  _renderChart(model, chartCanvas) {
-    if (!$chartCanvas || !$chartCanvas.length) return;
+    if (!chartCanvas) return;
 
-    const context = $chartCanvas[0].getContext("2d");
+    const context = chartCanvas.getContext("2d");
 
     const chartData = Ember.makeArray(
       model.get("chartData") || model.get("data")

app/assets/javascripts/admin/components/color-input.js.es6

@@ -11,10 +11,10 @@ export default Ember.Component.extend({
   classNames: ["color-picker"],
   hexValueChanged: function() {
     var hex = this.hexValue;
-    let $text = this.$("input.hex-input");
+    let text = this.element.querySelector("input.hex-input");
 
     if (this.valid) {
-      $text.attr(
+      text.setAttribute(
         "style",
         "color: " +
           (this.brightnessValue > 125 ? "black" : "white") +
@@ -24,10 +24,12 @@ export default Ember.Component.extend({
       );
 
       if (this.pickerLoaded) {
-        this.$(".picker").spectrum({ color: "#" + this.hexValue });
+        $(this.element.querySelector(".picker")).spectrum({
+          color: "#" + this.hexValue
+        });
       }
     } else {
-      $text.attr("style", "");
+      text.setAttribute("style", "");
     }
   }.observes("hexValue", "brightnessValue", "valid"),
 
@@ -35,7 +37,7 @@ export default Ember.Component.extend({
     loadScript("/javascripts/spectrum.js").then(() => {
       loadCSS("/javascripts/spectrum.css").then(() => {
         Ember.run.schedule("afterRender", () => {
-          this.$(".picker")
+          $(this.element.querySelector(".picker"))
             .spectrum({ color: "#" + this.hexValue })
             .on("change.spectrum", (me, color) => {
               this.set("hexValue", color.toHexString().replace("#", ""));

app/assets/javascripts/admin/components/embeddable-host.js.es6

@@ -14,7 +14,7 @@ export default Ember.Component.extend(bufferedProperty("host"), {
   @observes("editing")
   _focusOnInput() {
     Ember.run.schedule("afterRender", () => {
-      this.$(".host-name").focus();
+      this.element.querySelector(".host-name").focus();
     });
   },
 

app/assets/javascripts/admin/components/highlighted-code.js.es6

@@ -5,6 +5,6 @@ export default Ember.Component.extend({
   @on("didInsertElement")
   @observes("code")
   _refresh: function() {
-    highlightSyntax(this.$());
+    highlightSyntax($(this.element));
   }
 });

app/assets/javascripts/admin/components/penalty-post-action.js.es6

@@ -23,10 +23,10 @@ export default Ember.Component.extend({
       // If we switch to edit mode, jump to the edit textarea
       if (postAction === "edit") {
         Ember.run.scheduleOnce("afterRender", () => {
-          let $elem = this.$();
+          let elem = this.element;
-          let body = $elem.closest(".modal-body");
+          let body = elem.closest(".modal-body");
           body.scrollTop(body.height());
-          $elem.find(".post-editor").focus();
+          elem.querySelector(".post-editor").focus();
         });
       }
     }

app/assets/javascripts/admin/components/permalink-form.js.es6

@@ -19,7 +19,9 @@ export default Ember.Component.extend({
   },
 
   focusPermalink() {
-    Ember.run.schedule("afterRender", () => this.$(".permalink-url").focus());
+    Ember.run.schedule("afterRender", () =>
+      this.element.querySelector(".permalink-url").focus()
+    );
   },
 
   actions: {
@@ -67,7 +69,7 @@ export default Ember.Component.extend({
     this._super(...arguments);
 
     Ember.run.schedule("afterRender", () => {
-      this.$(".external-url").keydown(e => {
+      $(this.element.querySelector(".external-url")).keydown(e => {
         // enter key
         if (e.keyCode === 13) {
           this.send("submit");

app/assets/javascripts/admin/components/screened-ip-address-form.js.es6

@@ -62,7 +62,7 @@ export default Ember.Component.extend({
             this.setProperties({ ip_address: "", formSubmitted: false });
             this.action(ScreenedIpAddress.create(result.screened_ip_address));
             Ember.run.schedule("afterRender", () =>
-              this.$(".ip-address-input").focus()
+              this.element.querySelector(".ip-address-input").focus()
             );
           })
           .catch(e => {
@@ -73,7 +73,9 @@ export default Ember.Component.extend({
                     error: e.jqXHR.responseJSON.errors.join(". ")
                   })
                 : I18n.t("generic_error");
-            bootbox.alert(msg, () => this.$(".ip-address-input").focus());
+            bootbox.alert(msg, () =>
+              this.element.querySelector(".ip-address-input").focus()
+            );
           });
       }
     }
@@ -82,7 +84,7 @@ export default Ember.Component.extend({
   @on("didInsertElement")
   _init() {
     Ember.run.schedule("afterRender", () => {
-      this.$(".ip-address-input").keydown(e => {
+      $(this.element.querySelector(".ip-address-input")).keydown(e => {
         if (e.keyCode === 13) {
           this.send("submit");
         }

app/assets/javascripts/admin/components/site-text-summary.js.es6

@@ -9,11 +9,13 @@ export default Ember.Component.extend({
     const term = this._searchTerm();
 
     if (term) {
-      this.$(".site-text-id, .site-text-value").highlight(term, {
+      $(
+        this.element.querySelector(".site-text-id, .site-text-value")
+      ).highlight(term, {
         className: "text-highlight"
       });
     }
-    this.$(".site-text-value").ellipsis();
+    $(this.element.querySelector(".site-text-value")).ellipsis();
   },
 
   click() {

app/assets/javascripts/admin/components/staff-actions.js.es6

@@ -4,19 +4,23 @@ export default Ember.Component.extend({
   classNames: ["table", "staff-actions"],
 
   willDestroyElement() {
-    this.$().off("click.discourse-staff-logs");
+    $(this.element).off("click.discourse-staff-logs");
   },
 
   didInsertElement() {
     this._super(...arguments);
 
-    this.$().on("click.discourse-staff-logs", "[data-link-post-id]", e => {
+    $(this.element).on(
-      let postId = $(e.target).attr("data-link-post-id");
+      "click.discourse-staff-logs",
+      "[data-link-post-id]",
+      e => {
+        let postId = $(e.target).attr("data-link-post-id");
 
-      this.store.find("post", postId).then(p => {
+        this.store.find("post", postId).then(p => {
-        DiscourseURL.routeTo(p.get("url"));
+          DiscourseURL.routeTo(p.get("url"));
-      });
+        });
-      return false;
+        return false;
-    });
+      }
+    );
   }
 });

app/assets/javascripts/admin/components/themes-list-item.js.es6

@@ -38,8 +38,8 @@ export default Ember.Component.extend({
   },
 
   animate(isInitial) {
-    const $container = this.$();
+    const $container = $(this.element);
-    const $list = this.$(".components-list");
+    const $list = $(this.element.querySelector(".components-list"));
     if ($list.length === 0 || Ember.testing) {
       return;
     }

app/assets/javascripts/admin/components/watched-word-form.js.es6

@@ -64,7 +64,7 @@ export default Ember.Component.extend({
             });
             this.action(WatchedWord.create(result));
             Ember.run.schedule("afterRender", () =>
-              this.$(".watched-word-input").focus()
+              this.element.querySelector(".watched-word-input").focus()
             );
           })
           .catch(e => {
@@ -75,7 +75,9 @@ export default Ember.Component.extend({
                     error: e.jqXHR.responseJSON.errors.join(". ")
                   })
                 : I18n.t("generic_error");
-            bootbox.alert(msg, () => this.$(".watched-word-input").focus());
+            bootbox.alert(msg, () =>
+              this.element.querySelector(".watched-word-input").focus()
+            );
           });
       }
     }
@@ -84,7 +86,7 @@ export default Ember.Component.extend({
   @on("didInsertElement")
   _init() {
     Ember.run.schedule("afterRender", () => {
-      this.$(".watched-word-input").keydown(e => {
+      $(this.element.querySelector(".watched-word-input")).keydown(e => {
         if (e.keyCode === 13) {
           this.send("submit");
         }

app/assets/javascripts/admin/mixins/setting-component.js.es6

@@ -90,7 +90,7 @@ export default Ember.Mixin.create({
   },
 
   _watchEnterKey: function() {
-    this.$().on("keydown.setting-enter", ".input-setting-string", e => {
+    $(this.element).on("keydown.setting-enter", ".input-setting-string", e => {
       if (e.keyCode === 13) {
         // enter key
         this.send("save");
@@ -99,7 +99,7 @@ export default Ember.Mixin.create({
   }.on("didInsertElement"),
 
   _removeBindings: function() {
-    this.$().off("keydown.setting-enter");
+    $(this.element).off("keydown.setting-enter");
   }.on("willDestroyElement"),
 
   _save() {

app/assets/javascripts/discourse/components/backup-codes.js.es6

@@ -25,9 +25,9 @@ export default Ember.Component.extend({
   didRender() {
     this._super(...arguments);
 
-    const $backupCodes = this.$("#backupCodes");
+    const backupCodes = this.element.querySelector("#backupCodes");
-    if ($backupCodes.length) {
+    if (backupCodes) {
-      $backupCodes.height($backupCodes[0].scrollHeight);
+      backupCodes.style.height = backupCodes.scrollHeight;
     }
   },
 
@@ -49,8 +49,8 @@ export default Ember.Component.extend({
   },
 
   _selectAllBackupCodes() {
-    const $textArea = this.$("#backupCodes");
+    const textArea = this.element.querySelector("#backupCodes");
-    $textArea[0].focus();
+    textArea.focus();
-    $textArea[0].setSelectionRange(0, this.formattedBackupCodes.length);
+    textArea.setSelectionRange(0, this.formattedBackupCodes.length);
   }
 });

app/assets/javascripts/discourse/components/backup-uploader.js.es6

@@ -35,7 +35,7 @@ export default Ember.Component.extend(UploadMixin, {
   },
 
   _init: function() {
-    const $upload = this.$();
+    const $upload = $(this.element);
 
     $upload.on("fileuploadadd", (e, data) => {
       ajax("/admin/backups/upload_url", {

app/assets/javascripts/discourse/components/composer-body.js.es6

@@ -93,9 +93,9 @@ export default Ember.Component.extend(KeyEnterEscape, {
   },
 
   setupComposerResizeEvents() {
-    const $composer = this.$();
+    const $composer = $(this.element);
-    const $grippie = this.$(".grippie");
+    const $grippie = $(this.element.querySelector(".grippie"));
-    const $document = Ember.$(document);
+    const $document = $(document);
     let origComposerSize = 0;
     let lastMousePos = 0;
 
@@ -105,7 +105,7 @@ export default Ember.Component.extend(KeyEnterEscape, {
       const currentMousePos = mouseYPos(event);
       let size = origComposerSize + (lastMousePos - currentMousePos);
 
-      const winHeight = Ember.$(window).height();
+      const winHeight = $(window).height();
       size = Math.min(size, winHeight - headerHeight());
       size = Math.max(size, MIN_COMPOSER_SIZE);
       this.movePanels(size);
@@ -145,11 +145,11 @@ export default Ember.Component.extend(KeyEnterEscape, {
     };
     triggerOpen();
 
-    afterTransition(this.$(), () => {
+    afterTransition($(this.element), () => {
       resize();
       triggerOpen();
     });
-    positioningWorkaround(this.$());
+    positioningWorkaround($(this.element));
   },
 
   willDestroyElement() {

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

@@ -112,7 +112,7 @@ export default Ember.Component.extend({
   @observes("focusTarget")
   setFocus() {
     if (this.focusTarget === "editor") {
-      this.$("textarea").putCursorAtEnd();
+      $(this.element.querySelector("textarea")).putCursorAtEnd();
     }
   },
 
@@ -158,8 +158,8 @@ export default Ember.Component.extend({
   @on("didInsertElement")
   _composerEditorInit() {
     const topicId = this.get("topic.id");
-    const $input = this.$(".d-editor-input");
+    const $input = $(this.element.querySelector(".d-editor-input"));
-    const $preview = this.$(".d-editor-preview-wrapper");
+    const $preview = $(this.element.querySelector(".d-editor-preview-wrapper"));
 
     if (this.siteSettings.enable_mentions) {
       $input.autocomplete({
@@ -206,7 +206,7 @@ export default Ember.Component.extend({
       !this.get("composer.canEditTitle") &&
       (!this.capabilities.isIOS || safariHacksDisabled())
     ) {
-      this.$(".d-editor-input").putCursorAtEnd();
+      $(this.element.querySelector(".d-editor-input")).putCursorAtEnd();
     }
 
     this._bindUploadTarget();
@@ -345,12 +345,13 @@ export default Ember.Component.extend({
   },
 
   _teardownInputPreviewSync() {
-    [this.$(".d-editor-input"), this.$(".d-editor-preview-wrapper")].forEach(
+    [
-      $element => {
+      $(this.element.querySelector(".d-editor-input")),
-        $element.off("mouseenter touchstart");
+      $(this.element.querySelector(".d-editor-preview-wrapper"))
-        $element.off("scroll");
+    ].forEach($element => {
-      }
+      $element.off("mouseenter touchstart");
-    );
+      $element.off("scroll");
+    });
 
     REBUILD_SCROLL_MAP_EVENTS.forEach(event => {
       this.appEvents.off(event, this, this._resetShouldBuildScrollMap);
@@ -647,7 +648,7 @@ export default Ember.Component.extend({
     this._unbindUploadTarget(); // in case it's still bound, let's clean it up first
     this._pasted = false;
 
-    const $element = this.$();
+    const $element = $(this.element);
     const csrf = this.session.get("csrfToken");
 
     $element.fileupload({
@@ -890,7 +891,7 @@ export default Ember.Component.extend({
     this._validUploads = 0;
     $("#reply-control .mobile-file-upload").off("click.uploader");
     this.messageBus.unsubscribe("/uploads/composer");
-    const $uploadTarget = this.$();
+    const $uploadTarget = $(this.element);
     try {
       $uploadTarget.fileupload("destroy");
     } catch (e) {
@@ -925,7 +926,7 @@ export default Ember.Component.extend({
   },
 
   showPreview() {
-    const $preview = this.$(".d-editor-preview-wrapper");
+    const $preview = $(this.element.querySelector(".d-editor-preview-wrapper"));
     this._placeImageScaleButtons($preview);
     this.send("togglePreview");
   },
@@ -1071,7 +1072,7 @@ export default Ember.Component.extend({
       if (this._enableAdvancedEditorPreviewSync()) {
         this._syncScroll(
           this._syncEditorAndPreviewScroll,
-          this.$(".d-editor-input"),
+          $(this.element.querySelector(".d-editor-input")),
           $preview
         );
       }

app/assets/javascripts/discourse/components/composer-message.js.es6

@@ -11,7 +11,7 @@ export default Ember.Component.extend({
 
   didInsertElement() {
     this._super(...arguments);
-    this.$().show();
+    this.element.style.display = "block";
   },
 
   actions: {

app/assets/javascripts/discourse/components/composer-title.js.es6

@@ -14,9 +14,9 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
     if (this.focusTarget === "title") {
-      const $input = this.$("input");
+      const $input = $(this.element.querySelector("input"));
 
-      afterTransition(this.$().closest("#reply-control"), () => {
+      afterTransition($(this.element).closest("#reply-control"), () => {
         $input.putCursorAtEnd();
       });
     }
@@ -133,14 +133,14 @@ export default Ember.Component.extend({
           .finally(() => {
             this.set("composer.loading", false);
             Ember.run.schedule("afterRender", () => {
-              this.$("input").putCursorAtEnd();
+              $(this.element.querySelector("input")).putCursorAtEnd();
             });
           });
       } else {
         this._updatePost(loadOnebox);
         this.set("composer.loading", false);
         Ember.run.schedule("afterRender", () => {
-          this.$("input").putCursorAtEnd();
+          $(this.element.querySelector("input")).putCursorAtEnd();
         });
       }
     }

app/assets/javascripts/discourse/components/composer-user-selector.js.es6

@@ -12,14 +12,14 @@ export default Ember.Component.extend({
     this._super(...arguments);
 
     if (this.focusTarget === "usernames") {
-      this.$("input").putCursorAtEnd();
+      $(this.element.querySelector("input")).putCursorAtEnd();
     }
   },
 
   @observes("usernames")
   _checkWidth() {
     let width = 0;
-    const $acWrap = this.$().find(".ac-wrap");
+    const $acWrap = $(this.element).find(".ac-wrap");
     const limit = $acWrap.width();
     this.set("defaultUsernameCount", 0);
 
@@ -76,7 +76,7 @@ export default Ember.Component.extend({
       this.set("showSelector", true);
 
       Ember.run.schedule("afterRender", () => {
-        this.$()
+        $(this.element)
           .find("input")
           .focus();
       });
@@ -84,7 +84,7 @@ export default Ember.Component.extend({
 
     triggerResize() {
       this.appEvents.trigger("composer:resize");
-      const $this = this.$().find(".ac-wrap");
+      const $this = $(this.element).find(".ac-wrap");
       if ($this.height() >= 150) $this.scrollTop($this.height());
     }
   }

app/assets/javascripts/discourse/components/create-account.js.es6

@@ -8,7 +8,7 @@ export default Ember.Component.extend({
       this.set("email", $.cookie("email"));
     }
 
-    this.$().on("keydown.discourse-create-account", e => {
+    $(this.element).on("keydown.discourse-create-account", e => {
       if (!this.disabled && e.keyCode === 13) {
         e.preventDefault();
         e.stopPropagation();
@@ -17,7 +17,7 @@ export default Ember.Component.extend({
       }
     });
 
-    this.$().on("click.dropdown-user-field-label", "[for]", event => {
+    $(this.element).on("click.dropdown-user-field-label", "[for]", event => {
       const $element = $(event.target);
       const $target = $(`#${$element.attr("for")}`);
 
@@ -31,7 +31,7 @@ export default Ember.Component.extend({
   willDestroyElement() {
     this._super(...arguments);
 
-    this.$().off("keydown.discourse-create-account");
+    $(this.element).off("keydown.discourse-create-account");
-    this.$().off("click.dropdown-user-field-label");
+    $(this.element).off("click.dropdown-user-field-label");
   }
 });

app/assets/javascripts/discourse/components/csv-uploader.js.es6

@@ -32,7 +32,7 @@ export default Ember.Component.extend(UploadMixin, {
   },
 
   _init: function() {
-    const $upload = this.$();
+    const $upload = $(this.element);
 
     $upload.on("fileuploadadd", (e, data) => {
       bootbox.confirm(

app/assets/javascripts/discourse/components/d-editor-modal.js.es6

@@ -7,8 +7,8 @@ export default Ember.Component.extend({
   _hiddenChanged() {
     if (!this.hidden) {
       Ember.run.scheduleOnce("afterRender", () => {
-        const $modal = this.$();
+        const $modal = $(this.element);
-        const $parent = this.$().closest(".d-editor");
+        const $parent = $(this.element).closest(".d-editor");
         const w = $parent.width();
         const h = $parent.height();
         const dir = $("html").css("direction") === "rtl" ? "right" : "left";
@@ -27,7 +27,7 @@ export default Ember.Component.extend({
 
   @on("didInsertElement")
   _listenKeys() {
-    this.$().on("keydown.d-modal", key => {
+    $(this.element).on("keydown.d-modal", key => {
       if (this.hidden) {
         return;
       }
@@ -45,7 +45,7 @@ export default Ember.Component.extend({
 
   @on("willDestroyElement")
   _stopListening() {
-    this.$().off("keydown.d-modal");
+    $(this.element).off("keydown.d-modal");
   },
 
   actions: {

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

@@ -231,7 +231,7 @@ export default Ember.Component.extend({
     this.set("ready", true);
 
     if (this.autofocus) {
-      this.$("textarea").focus();
+      this.element.querySelector("textarea").focus();
     }
   },
 
@@ -244,13 +244,13 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
-    const $editorInput = this.$(".d-editor-input");
+    const $editorInput = $(this.element.querySelector(".d-editor-input"));
     this._applyEmojiAutocomplete($editorInput);
     this._applyCategoryHashtagAutocomplete($editorInput);
 
     Ember.run.scheduleOnce("afterRender", this, this._readyNow);
 
-    const mouseTrap = Mousetrap(this.$(".d-editor-input")[0]);
+    const mouseTrap = Mousetrap(this.element.querySelector(".d-editor-input"));
     const shortcuts = this.get("toolbar.shortcuts");
 
     Object.keys(shortcuts).forEach(sc => {
@@ -262,28 +262,31 @@ export default Ember.Component.extend({
     });
 
     // disable clicking on links in the preview
-    this.$(".d-editor-preview").on("click.preview", e => {
+    $(this.element.querySelector(".d-editor-preview")).on(
-      if (wantsNewWindow(e)) {
+      "click.preview",
-        return;
+      e => {
+        if (wantsNewWindow(e)) {
+          return;
+        }
+        const $target = $(e.target);
+        if ($target.is("a.mention")) {
+          this.appEvents.trigger(
+            "click.discourse-preview-user-card-mention",
+            $target
+          );
+        }
+        if ($target.is("a.mention-group")) {
+          this.appEvents.trigger(
+            "click.discourse-preview-group-card-mention-group",
+            $target
+          );
+        }
+        if ($target.is("a")) {
+          e.preventDefault();
+          return false;
+        }
       }
-      const $target = $(e.target);
+    );
-      if ($target.is("a.mention")) {
-        this.appEvents.trigger(
-          "click.discourse-preview-user-card-mention",
-          $target
-        );
-      }
-      if ($target.is("a.mention-group")) {
-        this.appEvents.trigger(
-          "click.discourse-preview-group-card-mention-group",
-          $target
-        );
-      }
-      if ($target.is("a")) {
-        e.preventDefault();
-        return false;
-      }
-    });
 
     if (this.composerEvents) {
       this.appEvents.on("composer:insert-block", this, "_insertBlock");
@@ -313,7 +316,7 @@ export default Ember.Component.extend({
     Object.keys(this.get("toolbar.shortcuts")).forEach(sc =>
       mouseTrap.unbind(sc)
     );
-    this.$(".d-editor-preview").off("click.preview");
+    $(this.element.querySelector(".d-editor-preview")).off("click.preview");
   },
 
   @computed
@@ -348,7 +351,7 @@ export default Ember.Component.extend({
         if (this._state !== "inDOM") {
           return;
         }
-        const $preview = this.$(".d-editor-preview");
+        const $preview = $(this.element.querySelector(".d-editor-preview"));
         if ($preview.length === 0) return;
 
         if (this.previewUpdated) {
@@ -375,7 +378,7 @@ export default Ember.Component.extend({
   _applyCategoryHashtagAutocomplete() {
     const siteSettings = this.siteSettings;
 
-    this.$(".d-editor-input").autocomplete({
+    $(this.element.querySelector(".d-editor-input")).autocomplete({
       template: findRawTemplate("category-tag-autocomplete"),
       key: "#",
       afterComplete: () => this._focusTextArea(),
@@ -500,7 +503,7 @@ export default Ember.Component.extend({
       return;
     }
 
-    const textarea = this.$("textarea.d-editor-input")[0];
+    const textarea = this.element.querySelector("textarea.d-editor-input");
     const value = textarea.value;
     let start = textarea.selectionStart;
     let end = textarea.selectionEnd;
@@ -533,8 +536,8 @@ export default Ember.Component.extend({
 
   _selectText(from, length) {
     Ember.run.scheduleOnce("afterRender", () => {
-      const $textarea = this.$("textarea.d-editor-input");
+      const textarea = this.element.querySelector("textarea.d-editor-input");
-      const textarea = $textarea[0];
+      const $textarea = $(textarea);
       const oldScrollPos = $textarea.scrollTop();
       if (!this.capabilities.isIOS || safariHacksDisabled()) {
         $textarea.focus();
@@ -687,7 +690,7 @@ export default Ember.Component.extend({
       return;
     }
 
-    const textarea = this.$("textarea.d-editor-input")[0];
+    const textarea = this.element.querySelector("textarea.d-editor-input");
 
     // Determine post-replace selection.
     const newSelection = determinePostReplaceSelection({
@@ -737,7 +740,7 @@ export default Ember.Component.extend({
     }
 
     const value = pre + text + post;
-    const $textarea = this.$("textarea.d-editor-input");
+    const $textarea = $(this.element.querySelector("textarea.d-editor-input"));
 
     this.set("value", value);
 
@@ -749,7 +752,7 @@ export default Ember.Component.extend({
   },
 
   _addText(sel, text, options) {
-    const $textarea = this.$("textarea.d-editor-input");
+    const $textarea = $(this.element.querySelector("textarea.d-editor-input"));
 
     if (options && options.ensureSpace) {
       if ((sel.pre + "").length > 0) {
@@ -870,8 +873,11 @@ export default Ember.Component.extend({
 
   // ensures textarea scroll position is correct
   _focusTextArea() {
-    const $textarea = this.$("textarea.d-editor-input");
+    const textarea = this.element.querySelector("textarea.d-editor-input");
-    Ember.run.scheduleOnce("afterRender", () => $textarea.blur().focus());
+    Ember.run.scheduleOnce("afterRender", () => {
+      textarea.blur();
+      textarea.focus();
+    });
   },
 
   actions: {

app/assets/javascripts/discourse/components/d-modal-body.js.es6

@@ -7,7 +7,7 @@ export default Ember.Component.extend({
     this._super(...arguments);
     $("#modal-alert").hide();
 
-    let fixedParent = this.$().closest(".d-modal.fixed-modal");
+    let fixedParent = $(this.element).closest(".d-modal.fixed-modal");
     if (fixedParent.length) {
       this.set("fixed", true);
       fixedParent.modal("show");
@@ -26,8 +26,12 @@ export default Ember.Component.extend({
   },
 
   _afterFirstRender() {
-    if (!this.site.mobileView && this.autoFocus !== "false") {
+    if (
-      this.$("input:first").focus();
+      !this.site.mobileView &&
+      this.autoFocus !== "false" &&
+      this.element.querySelector("input")
+    ) {
+      this.element.querySelector("input").focus();
     }
 
     const maxHeight = this.maxHeight;
@@ -35,7 +39,7 @@ export default Ember.Component.extend({
       const maxHeightFloat = parseFloat(maxHeight) / 100.0;
       if (maxHeightFloat > 0) {
         const viewPortHeight = $(window).height();
-        this.$().css(
+        $(this.element).css(
           "max-height",
           Math.floor(maxHeightFloat * viewPortHeight) + "px"
         );

app/assets/javascripts/discourse/components/d-modal.js.es6

@@ -66,7 +66,7 @@ export default Ember.Component.extend({
     }
 
     if (data.fixed) {
-      this.$().removeClass("hidden");
+      this.element.classList.remove("hidden");
     }
 
     if (data.title) {

app/assets/javascripts/discourse/components/discourse-topic.js.es6

@@ -102,7 +102,7 @@ export default Ember.Component.extend(
 
       $(window).on("resize.discourse-on-scroll", () => this.scrolled());
 
-      this.$().on(
+      $(this.element).on(
         "click.discourse-redirect",
         ".cooked a, a.track-link",
         function(e) {
@@ -120,7 +120,10 @@ export default Ember.Component.extend(
       $(window).unbind("resize.discourse-on-scroll");
 
       // Unbind link tracking
-      this.$().off("click.discourse-redirect", ".cooked a, a.track-link");
+      $(this.element).off(
+        "click.discourse-redirect",
+        ".cooked a, a.track-link"
+      );
 
       this.resetExamineDockCache();
 

app/assets/javascripts/discourse/components/edit-category-tab.js.es6

@@ -27,7 +27,7 @@ export default Ember.Component.extend({
   },
 
   _resetModalScrollState() {
-    const $modalBody = this.$()
+    const $modalBody = $(this.element)
       .parents("#discourse-modal")
       .find(".modal-body");
     if ($modalBody.length === 1) {

app/assets/javascripts/discourse/components/edit-category-topic-template.js.es6

@@ -4,7 +4,7 @@ export default buildCategoryPanel("topic-template", {
   _activeTabChanged: function() {
     if (this.activeTab) {
       Ember.run.scheduleOnce("afterRender", () =>
-        this.$(".d-editor-input").focus()
+        this.element.querySelector(".d-editor-input").focus()
       );
     }
   }.observes("activeTab")

app/assets/javascripts/discourse/components/emoji-picker.js.es6

@@ -86,8 +86,8 @@ export default Ember.Component.extend({
 
   @on("didInsertElement")
   _setup() {
-    this.$picker = this.$(".emoji-picker");
+    this.$picker = $(this.element.querySelector(".emoji-picker"));
-    this.$modal = this.$(".emoji-picker-modal");
+    this.$modal = $(this.element.querySelector(".emoji-picker-modal"));
 
     this.appEvents.on("emoji-picker:close", this, "_closeEmojiPicker");
 
@@ -228,8 +228,8 @@ export default Ember.Component.extend({
 
   @on("willDestroyElement")
   _unbindEvents() {
-    this.$().off();
+    $(this.element).off();
-    this.$(window).off("resize");
+    $(window).off("resize");
     clearInterval(this._refreshInterval);
     $("#reply-control").off("div-resizing");
     $("html").off("mouseup.emoji-picker");
@@ -312,7 +312,7 @@ export default Ember.Component.extend({
   },
 
   _bindResizing() {
-    this.$(window).on("resize", () => {
+    $(window).on("resize", () => {
       run.throttle(this, this._positionPicker, 16);
     });
 
@@ -468,7 +468,7 @@ export default Ember.Component.extend({
 
   _isReplyControlExpanded() {
     const verticalSpace =
-      this.$(window).height() -
+      $(window).height() -
       $(".d-header").height() -
       $("#reply-control").height();
 
@@ -480,7 +480,7 @@ export default Ember.Component.extend({
       return;
     }
 
-    let windowWidth = this.$(window).width();
+    let windowWidth = $(window).width();
 
     const desktopModalePositioning = options => {
       let attributes = {

app/assets/javascripts/discourse/components/expanding-text-area.js.es6

@@ -5,7 +5,7 @@ export default Ember.TextArea.extend({
   @on("didInsertElement")
   _startWatching() {
     Ember.run.scheduleOnce("afterRender", () => {
-      this.$().focus();
+      $(this.element).focus();
       autosize(this.element);
     });
   },
@@ -19,6 +19,6 @@ export default Ember.TextArea.extend({
 
   @on("willDestroyElement")
   _disableAutosize() {
-    autosize.destroy(this.$());
+    autosize.destroy($(this.element));
   }
 });

app/assets/javascripts/discourse/components/flag-selection.js.es6

@@ -3,14 +3,14 @@ import { observes } from "ember-addons/ember-computed-decorators";
 // Mostly hacks because `flag.hbs` didn't use `radio-button`
 export default Ember.Component.extend({
   _selectRadio() {
-    this.$("input[type='radio']").prop("checked", false);
+    this.element.querySelector("input[type='radio']").checked = false;
 
     const nameKey = this.nameKey;
     if (!nameKey) {
       return;
     }
 
-    this.$("#radio_" + nameKey).prop("checked", "true");
+    this.element.querySelector("#radio_" + nameKey).checked = "true";
   },
 
   @observes("nameKey")

app/assets/javascripts/discourse/components/footer-nav.js.es6

@@ -91,7 +91,7 @@ const FooterNavComponent = MountWidget.extend(
     // in the header, otherwise, we hide it.
     @observes("mobileScrollDirection")
     toggleMobileFooter() {
-      this.$().toggleClass(
+      $(this.element).toggleClass(
         "visible",
         this.mobileScrollDirection === null ? true : false
       );

app/assets/javascripts/discourse/components/generated-invite-link.js.es6

@@ -1,7 +1,7 @@
 export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
-    this.$("input")
+    $(this.element.querySelector("input"))
       .select()
       .focus();
   }

app/assets/javascripts/discourse/components/group-selector.js.es6

@@ -22,7 +22,7 @@ export default Ember.Component.extend({
     let selectedGroups;
     let groupNames = this.groupNames;
 
-    this.$("input").autocomplete({
+    $(this.element.querySelector("input")).autocomplete({
       allowAny: false,
       items: _.isArray(groupNames)
         ? groupNames

app/assets/javascripts/discourse/components/highlight-text.js.es6

@@ -5,7 +5,7 @@ export default Ember.Component.extend({
 
   _highlightOnInsert: function() {
     const term = this.highlight;
-    highlightText(this.$(), term);
+    highlightText($(this.element), term);
   }
     .observes("highlight")
     .on("didInsertElement")

app/assets/javascripts/discourse/components/image-uploader.js.es6

@@ -76,11 +76,13 @@ export default Ember.Component.extend(UploadMixin, {
   },
 
   _openLightbox() {
-    Ember.run.next(() => this.$("a.lightbox").magnificPopup("open"));
+    Ember.run.next(() =>
+      $(this.element.querySelector("a.lightbox")).magnificPopup("open")
+    );
   },
 
   _applyLightbox() {
-    if (this.imageUrl) Ember.run.next(() => lightbox(this.$()));
+    if (this.imageUrl) Ember.run.next(() => lightbox($(this.element)));
   },
 
   actions: {

app/assets/javascripts/discourse/components/link-to-input.js.es6

@@ -5,7 +5,7 @@ export default Ember.Component.extend({
     this.onClick();
 
     Ember.run.schedule("afterRender", () => {
-      this.$()
+      $(this.element)
         .find("input")
         .focus();
     });

app/assets/javascripts/discourse/components/mobile-nav.js.es6

@@ -24,9 +24,9 @@ export default Ember.Component.extend({
   },
 
   _updateSelectedHtml() {
-    const active = this.$(".active");
+    const active = this.element.querySelector(".active");
-    if (active && active.html) {
+    if (active && active.innerHTML) {
-      this.set("selectedHtml", active.html());
+      this.set("selectedHtml", active.innerHTML);
     }
   },
 
@@ -43,7 +43,7 @@ export default Ember.Component.extend({
           $(window)
             .off("click.mobile-nav")
             .on("click.mobile-nav", e => {
-              let expander = this.$(".expander");
+              let expander = $(this.element.querySelector(".expander"));
               expander = expander && expander[0];
               if ($(e.target)[0] !== expander) {
                 this.set("expanded", false);

app/assets/javascripts/discourse/components/navigation-bar.js.es6

@@ -73,8 +73,8 @@ export default Ember.Component.extend({
             return;
           }
 
-          this.$(".drop a").on("click", () => {
+          $(this.element.querySelector(".drop a")).on("click", () => {
-            this.$(".drop").hide();
+            this.element.querySelector(".drop").style.display = "none";
 
             Ember.run.next(() => {
               if (!this.element || this.isDestroying || this.isDestroyed) {

app/assets/javascripts/discourse/components/popup-input-tip.js.es6

@@ -29,7 +29,7 @@ export default Ember.Component.extend(
     @observes("lastShownAt")
     bounce() {
       if (this.lastShownAt) {
-        var $elem = this.$();
+        var $elem = $(this.element);
         if (!this.animateAttribute) {
           this.animateAttribute =
             $elem.css("left") === "auto" ? "right" : "left";

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

@@ -83,7 +83,7 @@ export default Ember.Component.extend({
     const $markerElement = $(markerElement);
     const markerOffset = $markerElement.offset();
     const parentScrollLeft = $markerElement.parent().scrollLeft();
-    const $quoteButton = this.$();
+    const $quoteButton = $(this.element);
 
     // remove the marker
     const parent = markerElement.parentNode;

app/assets/javascripts/discourse/components/radio-button.js.es6

@@ -12,7 +12,7 @@ export default Ember.Component.extend({
   ],
 
   click() {
-    const value = this.$().val();
+    const value = $(this.element).val();
     if (this.selection === value) {
       this.set("selection", undefined);
     }

app/assets/javascripts/discourse/components/scrolling-post-stream.js.es6

@@ -89,7 +89,9 @@ export default MountWidget.extend({
     const windowTop = $w.scrollTop();
 
     const postsWrapperTop = $(".posts-wrapper").offset().top;
-    const $posts = this.$(".onscreen-post, .cloaked-post");
+    const $posts = $(
+      this.element.querySelectorAll(".onscreen-post, .cloaked-post")
+    );
     const viewportTop = windowTop - slack;
     const topView = findTopView(
       $posts,
@@ -314,12 +316,12 @@ export default MountWidget.extend({
 
     this.appEvents.on("post-stream:posted", this, "_posted");
 
-    this.$().on("mouseenter.post-stream", "button.widget-button", e => {
+    $(this.element).on("mouseenter.post-stream", "button.widget-button", e => {
       $("button.widget-button").removeClass("d-hover");
       $(e.target).addClass("d-hover");
     });
 
-    this.$().on("mouseleave.post-stream", "button.widget-button", () => {
+    $(this.element).on("mouseleave.post-stream", "button.widget-button", () => {
       $("button.widget-button").removeClass("d-hover");
     });
 
@@ -331,8 +333,8 @@ export default MountWidget.extend({
     $(document).unbind("touchmove.post-stream");
     $(window).unbind("scroll.post-stream");
     this.appEvents.off("post-stream:refresh", this, "_debouncedScroll");
-    this.$().off("mouseenter.post-stream");
+    $(this.element).off("mouseenter.post-stream");
-    this.$().off("mouseleave.post-stream");
+    $(this.element).off("mouseleave.post-stream");
     this.appEvents.off("post-stream:refresh", this, "_refresh");
     this.appEvents.off("post-stream:posted", this, "_posted");
   }

app/assets/javascripts/discourse/components/search-text-field.js.es6

@@ -13,7 +13,7 @@ export default TextField.extend({
 
   @on("didInsertElement")
   becomeFocused() {
-    const $searchInput = this.$();
+    const $searchInput = $(this.element);
     applySearchAutocomplete($searchInput, this.siteSettings);
 
     if (!this.hasAutofocus) {

app/assets/javascripts/discourse/components/share-panel.js.es6

@@ -41,8 +41,10 @@ export default Ember.Component.extend({
     this._super(...arguments);
 
     const shareUrl = this.shareUrl;
-    const $linkInput = this.$(".topic-share-url");
+    const $linkInput = $(this.element.querySelector(".topic-share-url"));
-    const $linkForTouch = this.$(".topic-share-url-for-touch a");
+    const $linkForTouch = $(
+      this.element.querySelector(".topic-share-url-for-touch a")
+    );
 
     Ember.run.schedule("afterRender", () => {
       if (!this.capabilities.touch) {

app/assets/javascripts/discourse/components/share-popup.js.es6

@@ -54,7 +54,7 @@ export default Ember.Component.extend({
 
   _showUrl($target, url) {
     const $currentTargetOffset = $target.offset();
-    const $this = this.$();
+    const $this = $(this.element);
 
     if (Ember.isEmpty(url)) {
       return;

app/assets/javascripts/discourse/components/site-header.js.es6

@@ -124,7 +124,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       this._isPanning = true;
     } else if (
       center.x < SCREEN_EDGE_MARGIN &&
-      !this.$(".menu-panel").length &&
+      !this.element.querySelector(".menu-panel") &&
       e.direction === "right"
     ) {
       this._animate = false;
@@ -136,7 +136,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
       window.requestAnimationFrame(() => this.panMove(e));
     } else if (
       windowWidth - center.x < SCREEN_EDGE_MARGIN &&
-      !this.$(".menu-panel").length &&
+      !this.element.querySelector(".menu-panel") &&
       e.direction === "left"
     ) {
       this._animate = false;
@@ -245,7 +245,7 @@ const SiteHeaderComponent = MountWidget.extend(Docking, PanEvents, {
 
   _cleanDom() {
     // For performance, only trigger a re-render if any menu panels are visible
-    if (this.$(".menu-panel").length) {
+    if (this.element.querySelector(".menu-panel")) {
       this.eventDispatched("dom:clean", "header");
     }
   },

app/assets/javascripts/discourse/components/text-overflow.js.es6

@@ -2,7 +2,7 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
     Ember.run.next(null, () => {
-      const $this = this.$();
+      const $this = $(this.element);
 
       if ($this) {
         $this.find("hr").remove();

app/assets/javascripts/discourse/components/topic-list-item.js.es6

@@ -153,7 +153,7 @@ export const ListItemDefaults = {
   navigateToTopic,
 
   highlight(opts = { isLastViewedTopic: false }) {
-    const $topic = this.$();
+    const $topic = $(this.element);
     $topic
       .addClass("highlighted")
       .attr("data-islastviewedtopic", opts.isLastViewedTopic);

app/assets/javascripts/discourse/components/topic-progress.js.es6

@@ -126,7 +126,7 @@ export default Ember.Component.extend({
       return;
     }
 
-    const $topicProgress = this.$("#topic-progress");
+    const $topicProgress = $(this.element.querySelector("#topic-progress"));
     // speeds up stuff, bypass jquery slowness and extra checks
     if (!this._totalWidth) {
       this._totalWidth = $topicProgress[0].offsetWidth;
@@ -151,7 +151,7 @@ export default Ember.Component.extend({
   },
 
   _dock() {
-    const $wrapper = this.$();
+    const $wrapper = $(this.element);
     if (!$wrapper || $wrapper.length === 0) return;
 
     const $html = $("html");

app/assets/javascripts/discourse/components/topic-timeline.js.es6

@@ -52,8 +52,8 @@ export default MountWidget.extend(Docking, {
     const offsetTop = mainOffset ? mainOffset.top : 0;
     const topicTop = $(".container.posts").offset().top - offsetTop;
     const topicBottom = $("#topic-bottom").offset().top;
-    const $timeline = this.$(".timeline-container");
+    const timeline = this.element.querySelector(".timeline-container");
-    const timelineHeight = $timeline.height() || 400;
+    const timelineHeight = (timeline && timeline.offsetHeight) || 400;
     const footerHeight = $(".timeline-footer-controls").outerHeight(true) || 0;
 
     const prev = this.dockAt;

app/assets/javascripts/discourse/components/user-card-contents.js.es6

@@ -137,8 +137,8 @@ export default Ember.Component.extend(
         return;
       }
 
-      const $this = this.$();
+      const thisElem = this.element;
-      if (!$this) {
+      if (!thisElem) {
         return;
       }
 
@@ -146,7 +146,7 @@ export default Ember.Component.extend(
       const bg = Ember.isEmpty(url)
         ? ""
         : `url(${Discourse.getURLWithCDN(url)})`;
-      $this.css("background-image", bg);
+      thisElem.style.backgroundImage = bg;
     },
 
     _showCallback(username, $target) {

app/assets/javascripts/discourse/components/user-stream.js.es6

@@ -30,8 +30,12 @@ export default Ember.Component.extend(LoadMore, {
 
     $(window).on("resize.discourse-on-scroll", () => this.scrolled());
 
-    this.$().on("click.details-disabled", "details.disabled", () => false);
+    $(this.element).on(
-    this.$().on("click.discourse-redirect", ".excerpt a", function(e) {
+      "click.details-disabled",
+      "details.disabled",
+      () => false
+    );
+    $(this.element).on("click.discourse-redirect", ".excerpt a", function(e) {
       return ClickTrack.trackClick(e);
     });
   }.on("didInsertElement"),
@@ -40,10 +44,10 @@ export default Ember.Component.extend(LoadMore, {
   _destroyed: function() {
     this.unbindScrolling("user-stream-view");
     $(window).unbind("resize.discourse-on-scroll");
-    this.$().off("click.details-disabled", "details.disabled");
+    $(this.element).off("click.details-disabled", "details.disabled");
 
     // Unbind link tracking
-    this.$().off("click.discourse-redirect", ".excerpt a");
+    $(this.element).off("click.discourse-redirect", ".excerpt a");
   }.on("willDestroyElement"),
 
   actions: {

app/assets/javascripts/discourse/lib/plugin-api.js.es6

@@ -962,7 +962,7 @@ function decorate(klass, evt, cb, id) {
 
   const mixin = {};
   mixin["_decorate_" + _decorateId++] = function($elem) {
-    $elem = $elem || this.$();
+    $elem = $elem || $(this.element);
     if ($elem) {
       cb($elem);
     }

app/assets/javascripts/discourse/lib/url.js.es6

@@ -405,11 +405,9 @@ const DiscourseURL = Ember.Object.extend({
 
     @property router
   **/
-  router: function() {
+  get router() {
     return Discourse.__container__.lookup("router:main");
-  }
+  },
-    .property()
-    .volatile(),
 
   // Get a controller. Note that currently it uses `__container__` which is not
   // advised but there is no other way to access the router.

app/assets/javascripts/discourse/mixins/card-contents-base.js.es6

@@ -73,7 +73,7 @@ export default Ember.Mixin.create({
 
   didInsertElement() {
     this._super(...arguments);
-    afterTransition(this.$(), this._hide.bind(this));
+    afterTransition($(this.element), this._hide.bind(this));
     const id = this.elementId;
     const triggeringLinkClass = this.triggeringLinkClass;
     const clickOutsideEventName = `mousedown.outside-${id}`;
@@ -164,7 +164,7 @@ export default Ember.Mixin.create({
     if (!target) {
       return;
     }
-    const width = this.$().width();
+    const width = $(this.element).width();
     const height = 175;
     const isFixed = this.isFixed;
     const isDocked = this.isDocked;
@@ -227,7 +227,7 @@ export default Ember.Mixin.create({
               position.top = avatarOverflowSize;
             }
 
-            this.$().css(position);
+            $(this.element).css(position);
           }
         }
 
@@ -236,23 +236,26 @@ export default Ember.Mixin.create({
           let position = target.offset();
           position.top = "10%"; // match modal behaviour
           position.left = 0;
-          this.$().css(position);
+          $(this.element).css(position);
         }
-        this.$().toggleClass("docked-card", isDocked);
+        $(this.element).toggleClass("docked-card", isDocked);
 
         // After the card is shown, focus on the first link
         //
         // note: we DO NOT use afterRender here cause _positionCard may
         // run afterwards, if we allowed this to happen the usercard
         // may be offscreen and we may scroll all the way to it on focus
-        Ember.run.next(null, () => this.$("a:first").focus());
+        Ember.run.next(null, () => {
+          const firstLink = this.element.querySelector("a");
+          firstLink && firstLink.focus();
+        });
       }
     });
   },
 
   _hide() {
     if (!this.visible) {
-      this.$().css({ left: -9999, top: -9999 });
+      $(this.element).css({ left: -9999, top: -9999 });
       if (this.site.mobileView) {
         $(".card-cloak").addClass("hidden");
       }

app/assets/javascripts/discourse/mixins/pan-events.js.es6

@@ -13,12 +13,12 @@ export default Ember.Mixin.create({
 
   didInsertElement() {
     this._super(...arguments);
-    this.addTouchListeners(this.$());
+    this.addTouchListeners($(this.element));
   },
 
   willDestroyElement() {
     this._super(...arguments);
-    this.removeTouchListeners(this.$());
+    this.removeTouchListeners($(this.element));
   },
 
   addTouchListeners($element) {

app/assets/javascripts/discourse/mixins/upload.js.es6

@@ -36,7 +36,7 @@ export default Ember.Mixin.create({
   },
 
   _initialize: function() {
-    const $upload = this.$();
+    const $upload = $(this.element);
     const reset = () =>
       this.setProperties({ uploading: false, uploadProgress: 0 });
     const maxFiles = this.getWithDefault(
@@ -108,7 +108,7 @@ export default Ember.Mixin.create({
   _destroy: function() {
     this.messageBus && this.messageBus.unsubscribe("/uploads/" + this.type);
 
-    const $upload = this.$();
+    const $upload = $(this.element);
     try {
       $upload.fileupload("destroy");
     } catch (e) {

app/assets/javascripts/select-kit/components/category-drop/category-drop-header.js.es6

@@ -57,7 +57,9 @@ export default ComboBoxSelectBoxHeaderComponent.extend({
   didRender() {
     this._super(...arguments);
 
-    this.$().attr("style", this.categoryStyle);
+    this.element.setAttribute("style", this.categoryStyle);
-    this.$(".caret-icon").attr("style", this.categoryStyle);
+    this.element
+      .querySelector(".caret-icon")
+      .setAttribute("style", this.categoryStyle);
   }
 });

app/assets/javascripts/select-kit/components/mini-tag-chooser.js.es6

@@ -54,7 +54,7 @@ export default ComboBox.extend(TagsMixin, {
   didInsertElement() {
     this._super(...arguments);
 
-    this.$(".select-kit-body").on(
+    $(this.element.querySelector(".select-kit-body")).on(
       "mousedown touchstart",
       ".selected-tag",
       event => {
@@ -68,7 +68,9 @@ export default ComboBox.extend(TagsMixin, {
   willDestroyElement() {
     this._super(...arguments);
 
-    this.$(".select-kit-body").off("mousedown touchstart");
+    $(this.element.querySelector(".select-kit-body")).off(
+      "mousedown touchstart"
+    );
   },
 
   @computed("hasReachedMaximum")

app/assets/javascripts/select-kit/components/multi-select.js.es6

@@ -40,7 +40,7 @@ export default SelectKitComponent.extend({
   _setChoicesMaxWidth() {
     const width = this.$body().outerWidth(false);
     if (width > 0) {
-      this.$(".choices").css({ maxWidth: width });
+      this.element.querySelector(".choices").style.maxWidth = `${width}px`;
     }
   },
 

app/assets/javascripts/select-kit/components/multi-select/multi-select-header.js.es6

@@ -24,13 +24,13 @@ export default SelectKitHeaderComponent.extend({
   _positionFilter() {
     if (!this.shouldDisplayFilter) return;
 
-    const $filter = this.$(".filter");
+    const $filter = $(this.element.querySelector(".filter"));
     $filter.width(0);
 
-    const leftHeaderOffset = this.$().offset().left;
+    const leftHeaderOffset = $(this.element).offset().left;
     const leftFilterOffset = $filter.offset().left;
     const offset = leftFilterOffset - leftHeaderOffset;
-    const width = this.$().outerWidth(false);
+    const width = $(this.element).outerWidth(false);
     const availableSpace = width - offset;
     const $choices = $filter.parent(".choices");
     const parentRightPadding = parseInt($choices.css("padding-right"), 10);

app/assets/javascripts/select-kit/mixins/dom-helpers.js.es6

@@ -18,23 +18,27 @@ export default Ember.Mixin.create({
   },
 
   $findRowByValue(value) {
-    return this.$(`${this.rowSelector}[data-value='${value}']`);
+    return $(
+      this.element.querySelector(`${this.rowSelector}[data-value='${value}']`)
+    );
   },
 
   $header() {
-    return this.$(this.headerSelector);
+    return $(this.element && this.element.querySelector(this.headerSelector));
   },
 
   $body() {
-    return this.$(this.bodySelector);
+    return $(this.element && this.element.querySelector(this.bodySelector));
   },
 
   $wrapper() {
-    return this.$(this.wrapperSelector);
+    return $(this.element && this.element.querySelector(this.wrapperSelector));
   },
 
   $collection() {
-    return this.$(this.collectionSelector);
+    return $(
+      this.element && this.element.querySelector(this.collectionSelector)
+    );
   },
 
   $scrollableParent() {
@@ -58,7 +62,9 @@ export default Ember.Mixin.create({
   },
 
   $filterInput() {
-    return this.$(this.filterInputSelector);
+    return $(
+      this.element && this.element.querySelector(this.filterInputSelector)
+    );
   },
 
   _adjustPosition() {
@@ -180,7 +186,8 @@ export default Ember.Mixin.create({
 
     if (this.fullWidthOnMobile && (this.site && this.site.isMobileDevice)) {
       const margin = 10;
-      const relativeLeft = this.$().offset().left - $(window).scrollLeft();
+      const relativeLeft =
+        $(this.element).offset().left - $(window).scrollLeft();
       options.left = margin - relativeLeft;
       options.width = windowWidth - margin * 2;
       options.maxWidth = options.minWidth = "unset";
@@ -193,7 +200,8 @@ export default Ember.Mixin.create({
       let spaceToLeftEdge;
       if (this.$scrollableParent().length) {
         spaceToLeftEdge =
-          this.$().offset().left - this.$scrollableParent().offset().left;
+          $(this.element).offset().left -
+          this.$scrollableParent().offset().left;
       } else {
         spaceToLeftEdge = this.element.getBoundingClientRect().left;
       }
@@ -206,9 +214,8 @@ export default Ember.Mixin.create({
       }
 
       if (isLeftAligned) {
-        this.$()
+        this.element.classList.add("is-left-aligned");
-          .addClass("is-left-aligned")
+        this.element.classList.remove("is-right-aligned");
-          .removeClass("is-right-aligned");
 
         if (this._isRTL()) {
           options.right = this.horizontalOffset;
@@ -216,9 +223,8 @@ export default Ember.Mixin.create({
           options.left = -bodyWidth + elementWidth - this.horizontalOffset;
         }
       } else {
-        this.$()
+        this.element.classList.add("is-right-aligned");
-          .addClass("is-right-aligned")
+        this.element.classList.remove("is-left-aligned");
-          .removeClass("is-left-aligned");
 
         if (this._isRTL()) {
           options.right = -bodyWidth + elementWidth - this.horizontalOffset;
@@ -234,14 +240,12 @@ export default Ember.Mixin.create({
     const headerHeight = this._computedStyle(this.$header()[0], "height");
 
     if (hasBelowSpace || (!hasBelowSpace && !hasAboveSpace)) {
-      this.$()
+      this.element.classList.add("is-below");
-        .addClass("is-below")
+      this.element.classList.remove("is-above");
-        .removeClass("is-above");
       options.top = headerHeight + this.verticalOffset;
     } else {
-      this.$()
+      this.element.classList.add("is-above");
-        .addClass("is-above")
+      this.element.classList.remove("is-below");
-        .removeClass("is-below");
       options.bottom = headerHeight + this.verticalOffset;
     }
 
@@ -262,13 +266,13 @@ export default Ember.Mixin.create({
 
     this._previousCSSContext = this._previousCSSContext || {
       width,
-      minWidth: this.$().css("min-width"),
+      minWidth: this.element.style.minWidth,
-      maxWidth: this.$().css("max-width"),
+      maxWidth: this.element.style.maxWidth,
-      top: this.$().css("top"),
+      top: this.element.style.top,
-      left: this.$().css("left"),
+      left: this.element.style.left,
-      marginLeft: this.$().css("margin-left"),
+      marginLeft: this.element.style.marginLeft,
-      marginRight: this.$().css("margin-right"),
+      marginRight: this.element.style.marginRight,
-      position: this.$().css("position")
+      position: this.element.style.position
     };
 
     const componentStyles = {
@@ -289,11 +293,11 @@ export default Ember.Mixin.create({
       display: "inline-block",
       width,
       height,
-      "margin-bottom": this.$().css("margin-bottom"),
+      "margin-bottom": this.element.style.marginBottom,
       "vertical-align": "middle"
     });
 
-    this.$()
+    $(this.element)
       .before($placeholderTemplate)
       .css(componentStyles);
 
@@ -306,7 +310,7 @@ export default Ember.Mixin.create({
     if (!this.element || this.isDestroying || this.isDestroyed) return;
     if (this.$scrollableParent().length === 0) return;
 
-    this.$().css(this._previousCSSContext || {});
+    $(this.element).css(this._previousCSSContext || {});
     this.$scrollableParent().css(
       "overflow",
       this._previousScrollParentOverflow || {}

app/assets/javascripts/select-kit/mixins/events.js.es6

@@ -82,7 +82,7 @@ export default Ember.Mixin.create({
       return true;
     }
 
-    if (Ember.$.contains(this.element, event.target)) {
+    if (this.element !== event.target && this.element.contains(event.target)) {
       event.stopPropagation();
       if (!this.renderedBodyOnce) return;
       if (!this.isFocused) return;
@@ -398,7 +398,12 @@ export default Ember.Mixin.create({
   },
 
   onFilterInputFocusout(event) {
-    if (!Ember.$.contains(this.element, event.relatedTarget)) {
+    if (
+      !(
+        this.element !== event.relatedTarget &&
+        this.element.contains(event.relatedTarget)
+      )
+    ) {
       this.close(event);
     }
   },

app/assets/javascripts/wizard/components/invite-list.js.es6

@@ -59,7 +59,7 @@ export default Ember.Component.extend({
 
       this.set("inviteEmail", "");
       Ember.run.scheduleOnce("afterRender", () =>
-        this.$(".invite-email").focus()
+        this.element.querySelector(".invite-email").focus()
       );
     },
 

app/assets/javascripts/wizard/components/radio-button.js.es6

@@ -12,6 +12,8 @@ export default Ember.Component.extend({
   @on("init")
   updateVal() {
     const checked = this.value === this.radioValue;
-    Ember.run.next(() => this.$("input[type=radio]").prop("checked", checked));
+    Ember.run.next(
+      () => (this.element.querySelector("input[type=radio]").checked = checked)
+    );
   }
 });

app/assets/javascripts/wizard/components/wizard-canvas.js.es6

@@ -62,7 +62,7 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
-    const canvas = this.$()[0];
+    const canvas = this.element;
     this.ctx = canvas.getContext("2d");
     this.resized();
 
@@ -86,7 +86,7 @@ export default Ember.Component.extend({
     width = $(window).width();
     height = $(window).height();
 
-    const canvas = this.$()[0];
+    const canvas = this.element;
     canvas.width = width;
     canvas.height = height;
   },

app/assets/javascripts/wizard/components/wizard-field-image.js.es6

@@ -17,7 +17,7 @@ export default Ember.Component.extend({
   didInsertElement() {
     this._super(...arguments);
 
-    const $upload = this.$();
+    const $upload = $(this.element);
 
     const id = this.get("field.id");
 

app/assets/javascripts/wizard/lib/preview.js.es6

@@ -43,7 +43,7 @@ export function createPreviewComponent(width, height, obj) {
 
       didInsertElement() {
         this._super(...arguments);
-        const c = this.$("canvas")[0];
+        const c = this.element.querySelector("canvas");
         this.ctx = c.getContext("2d");
         this.ctx.scale(scale, scale);
         this.reload();

app/models/theme_field.rb

@@ -64,7 +64,7 @@ class ThemeField < ActiveRecord::Base
   validates :name, format: { with: /\A[a-z_][a-z0-9_-]*\z/i },
                    if: Proc.new { |field| ThemeField.theme_var_type_ids.include?(field.type_id) }
 
-  BASE_COMPILER_VERSION = 11
+  BASE_COMPILER_VERSION = 12
   DEPENDENT_CONSTANTS = [BASE_COMPILER_VERSION,
                         GlobalSetting.cdn_url]
   COMPILER_VERSION = Digest::SHA1.hexdigest(DEPENDENT_CONSTANTS.join)

lib/theme_javascript_compiler.rb

@@ -13,6 +13,7 @@ class ThemeJavascriptCompiler
 
       // Helper to replace old themeSetting syntax
       function generateHelper(settingParts) {
+console.log(settingParts)
         const settingName = settingParts.join('.');
         return {
             "path": {
@@ -64,7 +65,7 @@ class ThemeJavascriptCompiler
       }
 
       function manipulateNode(node) {
-        // Magically add theme id as the first param for each of these helpers
+        // Magically add theme id as the first param for each of these helpers)
         if (node.path.parts && ["theme-i18n", "theme-prefix", "theme-setting"].includes(node.path.parts[0])) {
           if(node.params.length === 1){
             node.params.unshift({
@@ -134,10 +135,16 @@ class ThemeJavascriptCompiler
 
     def discourse_extension
       <<~JS
-        Ember.HTMLBars.registerPlugin('ast', function(){
+        Ember.HTMLBars.registerPlugin('ast', function() {
-          return { name: 'theme-template-manipulator',
+          return {
-          visitor: { SubExpression: manipulateNode, MustacheStatement: manipulateNode, PathExpression: manipulatePath}
+            name: 'theme-template-manipulator',
-        }});
+            visitor: {
+              SubExpression: manipulateNode,
+              MustacheStatement: manipulateNode,
+              PathExpression: manipulatePath
+            }
+          }
+        });
       JS
     end
   end

spec/lib/theme_javascript_compiler_spec.rb

@@ -84,26 +84,28 @@ describe ThemeJavascriptCompiler do
       block["statements"]
     end
 
+    # might change/break when updating ember
+    EMBER_INTERNAL_ID = 29
     it 'adds the theme id to the helpers' do
       expect(statement("{{theme-prefix 'translation_key'}}")).
-        to eq([[1, [27, "theme-prefix", [22, "translation_key"], nil], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "theme-prefix", [22, "translation_key"], nil], false]])
       expect(statement("{{theme-i18n 'translation_key'}}")).
-        to eq([[1, [27, "theme-i18n", [22, "translation_key"], nil], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "theme-i18n", [22, "translation_key"], nil], false]])
       expect(statement("{{theme-setting 'setting_key'}}")).
-        to eq([[1, [27, "theme-setting", [22, "setting_key"], nil], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "theme-setting", [22, "setting_key"], nil], false]])
 
       # Works when used inside other statements
       expect(statement("{{dummy-helper (theme-prefix 'translation_key')}}")).
-        to eq([[1, [27, "dummy-helper", [[27, "theme-prefix", [22, "translation_key"], nil]], nil], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "dummy-helper", [[EMBER_INTERNAL_ID, "theme-prefix", [22, "translation_key"], nil]], nil], false]])
     end
 
     it 'works with the old settings syntax' do
       expect(statement("{{themeSettings.setting_key}}")).
-        to eq([[1, [27, "theme-setting", [22, "setting_key"], [["deprecated"], [true]]], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "theme-setting", [22, "setting_key"], [["deprecated"], [true]]], false]])
 
       # Works when used inside other statements
       expect(statement("{{dummy-helper themeSettings.setting_key}}")).
-        to eq([[1, [27, "dummy-helper", [[27, "theme-setting", [22, "setting_key"], [["deprecated"], [true]]]], nil], false]])
+        to eq([[1, [EMBER_INTERNAL_ID, "dummy-helper", [[EMBER_INTERNAL_ID, "theme-setting", [22, "setting_key"], [["deprecated"], [true]]]], nil], false]])
     end
   end