DEV: Update to native class syntax (#230)

admin/assets/javascripts/discourse/components/house-ads-chooser.js

@@ -1,41 +1,44 @@
-import { computed } from "@ember/object";
+import { action, computed } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import { makeArray } from "discourse-common/lib/helpers";
 import MultiSelectComponent from "select-kit/components/multi-select";
 
-export default MultiSelectComponent.extend({
+@classNames("house-ads-chooser")
-  classNames: ["house-ads-chooser"],
+export default class HouseAdsChooser extends MultiSelectComponent {
-  filterable: true,
+  filterable = true;
-  filterPlaceholder: "admin.adplugin.house_ads.filter_placeholder",
+  filterPlaceholder = "admin.adplugin.house_ads.filter_placeholder";
-  tokenSeparator: "|",
+  tokenSeparator = "|";
-  allowCreate: false,
+  allowCreate = false;
-  allowAny: false,
+  allowAny = false;
-  settingValue: "",
+  settingValue = "";
-  valueAttribute: null,
+  valueAttribute = null;
-  nameProperty: null,
+  nameProperty = null;
 
-  value: computed("settingValue", function () {
+  @computed("settingValue")
+  get value() {
     return this.settingValue
       .toString()
       .split(this.tokenSeparator)
       .filter(Boolean);
-  }),
+  }
 
   // TODO: kept for legacy, remove when Discourse is 2.5
   mutateValues(values) {
     this.set("settingValue", values.join(this.tokenSeparator));
-  },
+  }
+
   computeValues() {
     return this.settingValue.split(this.tokenSeparator).filter(Boolean);
-  },
+  }
 
-  content: computed("choices", function () {
+  @computed("choices")
+  get content() {
     return makeArray(this.choices);
-  }),
+  }
 
-  actions: {
+  @action
-    onChange(value) {
+  onChange(value) {
-      const settingValue = makeArray(value).join(this.tokenSeparator);
+    const settingValue = makeArray(value).join(this.tokenSeparator);
-      this.onChange?.(settingValue);
+    this.onChange?.(settingValue);
-    },
+  }
-  },
+}
-});

admin/assets/javascripts/discourse/components/house-ads-list-setting.js

@@ -1,7 +1,8 @@
 import { mapBy } from "@ember/object/computed";
+import { classNames } from "@ember-decorators/component";
 import HouseAdsSetting from "discourse/plugins/discourse-adplugin/discourse/components/house-ads-setting";
 
-export default HouseAdsSetting.extend({
+@classNames("house-ads-setting house-ads-list-setting")
-  classNames: "house-ads-setting house-ads-list-setting",
+export default class HouseAdsListSetting extends HouseAdsSetting {
-  adNames: mapBy("allAds", "name"),
+  @mapBy("allAds", "name") adNames;
-});
+}

admin/assets/javascripts/discourse/components/house-ads-setting.js

@@ -1,58 +1,58 @@
 import Component from "@ember/component";
+import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import { ajax } from "discourse/lib/ajax";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 import { i18n, propertyNotEqual } from "discourse/lib/computed";
 import I18n from "I18n";
 
-export default Component.extend({
+@classNames("house-ads-setting")
-  classNames: "house-ads-setting",
+export default class HouseAdsSetting extends Component {
-  adValue: "",
+  adValue = "";
-  saving: false,
+  saving = false;
-  savingStatus: "",
+  savingStatus = "";
-  title: i18n("name", "admin.adplugin.house_ads.%@.title"),
+
-  help: i18n("name", "admin.adplugin.house_ads.%@.description"),
+  @i18n("name", "admin.adplugin.house_ads.%@.title") title;
-  changed: propertyNotEqual("adValue", "value"),
+  @i18n("name", "admin.adplugin.house_ads.%@.description") help;
+  @propertyNotEqual("adValue", "value") changed;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
     this.set("adValue", this.get("value"));
-  },
+  }
 
-  actions: {
+  @action
-    save() {
+  save() {
-      if (!this.get("saving")) {
+    if (!this.get("saving")) {
-        this.setProperties({
+      this.setProperties({
-          saving: true,
+        saving: true,
-          savingStatus: I18n.t("saving"),
+        savingStatus: I18n.t("saving"),
-        });
+      });
 
-        ajax(
+      ajax(`/admin/plugins/pluginad/house_settings/${this.get("name")}.json`, {
-          `/admin/plugins/pluginad/house_settings/${this.get("name")}.json`,
+        type: "PUT",
-          {
+        data: { value: this.get("adValue") },
-            type: "PUT",
+      })
-            data: { value: this.get("adValue") },
+        .then(() => {
-          }
+          const adSettings = this.get("adSettings");
-        )
+          adSettings.set(this.get("name"), this.get("adValue"));
-          .then(() => {
+          this.setProperties({
-            const adSettings = this.get("adSettings");
+            value: this.get("adValue"),
-            adSettings.set(this.get("name"), this.get("adValue"));
+            savingStatus: I18n.t("saved"),
-            this.setProperties({
-              value: this.get("adValue"),
-              savingStatus: I18n.t("saved"),
-            });
-          })
-          .catch(popupAjaxError)
-          .finally(() => {
-            this.setProperties({
-              saving: false,
-              savingStatus: "",
-            });
           });
-      }
+        })
-    },
+        .catch(popupAjaxError)
+        .finally(() => {
+          this.setProperties({
+            saving: false,
+            savingStatus: "",
+          });
+        });
+    }
+  }
 
-    cancel() {
+  @action
-      this.set("adValue", this.get("value"));
+  cancel() {
-    },
+    this.set("adValue", this.get("value"));
-  },
+  }
-});
+}

admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads-index.js

@@ -1,8 +1,8 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { alias } from "@ember/object/computed";
 
-export default Controller.extend({
+export default class AdminPluginsHouseAdsIndexController extends Controller {
-  adminPluginsHouseAds: controller("adminPlugins.houseAds"),
+  @controller("adminPlugins.houseAds") adminPluginsHouseAds;
-  houseAds: alias("adminPluginsHouseAds.model"),
+  @alias("adminPluginsHouseAds.model") houseAds;
-  adSettings: alias("adminPluginsHouseAds.houseAdsSettings"),
+  @alias("adminPluginsHouseAds.houseAdsSettings") adSettings;
-});
+}

admin/assets/javascripts/discourse/controllers/admin-plugins-house-ads.js

@@ -1,5 +1,5 @@
 import Controller from "@ember/controller";
 
-export default Controller.extend({
+export default class AdminPluginsHouseAdsController extends Controller {
-  loadingAds: true,
+  loadingAds = true;
-});
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads-index.js

@@ -2,11 +2,11 @@ import { action } from "@ember/object";
 import { service } from "@ember/service";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsHouseAdsIndex extends DiscourseRoute {
-  router: service(),
+  @service router;
 
   @action
   moreSettings() {
     this.router.transitionTo("adminSiteSettingsCategory", "ad_plugin");
-  },
+  }
-});
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads-show.js

@@ -2,7 +2,7 @@ import { TrackedObject } from "@ember-compat/tracked-built-ins";
 import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsHouseAdsShow extends DiscourseRoute {
   model(params) {
     if (params.ad_id === "new") {
       return new TrackedObject({
@@ -19,5 +19,5 @@ export default DiscourseRoute.extend({
         )
       );
     }
-  },
+  }
-});
+}

admin/assets/javascripts/discourse/routes/admin-plugins-house-ads.js

@@ -2,15 +2,15 @@ import EmberObject from "@ember/object";
 import { ajax } from "discourse/lib/ajax";
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({
+export default class AdminPluginsHouseAds extends DiscourseRoute {
-  settings: null,
+  settings = null;
 
   model() {
     return ajax("/admin/plugins/pluginad/house_creatives.json").then((data) => {
       this.set("settings", EmberObject.create(data.settings));
       return data.house_ads.map((ad) => EmberObject.create(ad));
     });
-  },
+  }
 
   setupController(controller, model) {
     controller.setProperties({
@@ -18,5 +18,5 @@ export default DiscourseRoute.extend({
       houseAdsSettings: this.get("settings"),
       loadingAds: false,
     });
-  },
+  }
-});
+}

assets/javascripts/discourse/components/ad-component.js

@@ -7,28 +7,30 @@ import {
   isNthTopicListItem,
 } from "discourse/plugins/discourse-adplugin/discourse/helpers/slot-position";
 
-export default Component.extend({
+export default class AdComponent extends Component {
-  router: service(),
+  @service router;
 
-  currentCategoryId: or(
+  @or(
     "router.currentRoute.attributes.category.id",
     "router.currentRoute.parent.attributes.category_id"
-  ),
+  )
+  currentCategoryId;
 
-  currentCategorySlug: or(
+  @or(
     "router.currentRoute.attributes.category.slug",
     "router.currentRoute.parent.attributes.category.slug"
-  ),
+  )
+  currentCategorySlug;
 
   // Server needs to compute this in case hidden tags are being used.
-  topicTagsDisableAds: alias(
+  @alias("router.currentRoute.parent.attributes.tags_disable_ads")
-    "router.currentRoute.parent.attributes.tags_disable_ads"
+  topicTagsDisableAds;
-  ),
 
-  isRestrictedCategory: or(
+  @or(
     "router.currentRoute.attributes.category.read_restricted",
     "router.currentRoute.parent.attributes.category.read_restricted"
-  ),
+  )
+  isRestrictedCategory;
 
   @discourseComputed(
     "router.currentRoute.attributes.__type",
@@ -38,12 +40,12 @@ export default Component.extend({
     if (type === "tag" && tag) {
       return tag;
     }
-  },
+  }
 
   @discourseComputed("router.currentRoute.parent.attributes.archetype")
   isPersonalMessage(topicType) {
     return topicType === "private_message";
-  },
+  }
 
   @discourseComputed
   showToGroups() {
@@ -52,7 +54,7 @@ export default Component.extend({
     }
 
     return this.currentUser.show_to_groups;
-  },
+  }
 
   @discourseComputed(
     "currentCategoryId",
@@ -82,13 +84,13 @@ export default Component.extend({
       (!isRestrictedCategory ||
         !this.siteSettings.no_ads_for_restricted_categories)
     );
-  },
+  }
 
   isNthPost(n) {
     return isNthPost(n, this.get("postNumber"));
-  },
+  }
 
   isNthTopicListItem(n) {
     return isNthTopicListItem(n, this.get("indexNumber"));
-  },
+  }
-});
+}

assets/javascripts/discourse/components/ad-slot.js

@@ -1,6 +1,7 @@
 import EmberObject from "@ember/object";
 import { service } from "@ember/service";
 import { isBlank } from "@ember/utils";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
 import {
@@ -173,9 +174,9 @@ export function slotContenders(
   return types;
 }
 
-export default AdComponent.extend({
+@tagName("")
-  router: service(),
+export default class AdSlot extends AdComponent {
-  tagName: "",
+  @service router;
 
   /**
    * For a given ad placement and optionally a post number if in between posts,
@@ -190,7 +191,7 @@ export default AdComponent.extend({
       indexNumber,
       postNumber
     );
-  },
+  }
 
   /**
    * Returns a list of the names of ad components that should be rendered
@@ -238,5 +239,5 @@ export default AdComponent.extend({
     }
 
     return networkNames;
-  },
+  }
-});
+}

assets/javascripts/discourse/components/adbutler-ad.js

@@ -27,9 +27,9 @@ function loadAdbutler(adserverHostname) {
   return _promise;
 }
 
-export default AdComponent.extend({
+export default class AdbutlerAd extends AdComponent {
-  divs: null,
+  divs = null;
-  publisherId: null,
+  publisherId = null;
 
   init() {
     let dimensions = [728, 90];
@@ -70,8 +70,8 @@ export default AdComponent.extend({
       dimensions,
     });
 
-    this._super();
+    super.init();
-  },
+  }
 
   _triggerAds() {
     if (isTesting()) {
@@ -104,12 +104,12 @@ export default AdComponent.extend({
         }
       }.bind(this)
     );
-  },
+  }
 
   didInsertElement() {
-    this._super();
+    super.didInsertElement();
     scheduleOnce("afterRender", this, this._triggerAds);
-  },
+  }
 
   @discourseComputed
   showAdbutlerAds() {
@@ -118,7 +118,7 @@ export default AdComponent.extend({
     }
 
     return this.currentUser.show_adbutler_ads;
-  },
+  }
 
   @discourseComputed(
     "publisherId",
@@ -141,7 +141,7 @@ export default AdComponent.extend({
       showAfterPost &&
       showOnCurrentPage
     );
-  },
+  }
 
   @discourseComputed("postNumber")
   showAfterPost(postNumber) {
@@ -149,5 +149,5 @@ export default AdComponent.extend({
       return true;
     }
     return this.isNthPost(parseInt(this.siteSettings.adbutler_nth_post, 10));
-  },
+  }
-});
+}

assets/javascripts/discourse/components/amazon-product-links.js

@@ -1,17 +1,13 @@
 import { and } from "@ember/object/computed";
 import { htmlSafe } from "@ember/template";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
 
-export default AdComponent.extend({
+@classNames("amazon-product-links")
-  classNames: ["amazon-product-links"],
+export default class AmazonProductLinks extends AdComponent {
-
+  @and("showAmazonAds", "showToGroups", "showAfterPost", "showOnCurrentPage")
-  showAd: and(
+  showAd;
-    "showAmazonAds",
-    "showToGroups",
-    "showAfterPost",
-    "showOnCurrentPage"
-  ),
 
   init() {
     const data = {
@@ -145,33 +141,33 @@ export default AdComponent.extend({
     this.set("user_input_mobile", data[placement]["user_input_mobile"]);
     this.set("mobile_amazon_height", data[placement]["mobile_amazon_height"]);
     this.set("mobile_amazon_width", data[placement]["mobile_amazon_width"]);
-    this._super();
+    super.init();
-  },
+  }
 
   @discourseComputed("amazon_width", "amazon_height")
   adWrapperStyle(w, h) {
     return htmlSafe(`width: ${w}px; height: ${h}px;`);
-  },
+  }
 
   @discourseComputed("mobile_amazon_width", "mobile_amazon_height")
   adWrapperStyleMobile(w, h) {
     return htmlSafe(`width: ${w}px; height: ${h}px;`);
-  },
+  }
 
   @discourseComputed("mobile_amazon_width")
   adTitleStyleMobile(w) {
     return htmlSafe(`width: ${w}px;`);
-  },
+  }
 
   @discourseComputed("user_input")
   userInput(userInput) {
     return htmlSafe(`${userInput}`);
-  },
+  }
 
   @discourseComputed("user_input_mobile")
   userInputMobile(userInput) {
     return htmlSafe(`${userInput}`);
-  },
+  }
 
   @discourseComputed
   showAmazonAds() {
@@ -180,7 +176,7 @@ export default AdComponent.extend({
     }
 
     return this.currentUser.show_amazon_ads;
-  },
+  }
 
   @discourseComputed("postNumber")
   showAfterPost(postNumber) {
@@ -189,5 +185,5 @@ export default AdComponent.extend({
     }
 
     return this.isNthPost(parseInt(this.siteSettings.amazon_nth_post_code, 10));
-  },
+  }
-});
+}

assets/javascripts/discourse/components/carbonads-ad.js

@@ -2,22 +2,22 @@ import { htmlSafe } from "@ember/template";
 import discourseComputed from "discourse-common/utils/decorators";
 import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
 
-export default AdComponent.extend({
+export default class CarbonadsAd extends AdComponent {
-  serve_id: null,
+  serve_id = null;
-  placement: null,
+  placement = null;
 
   init() {
     this.set("serve_id", this.siteSettings.carbonads_serve_id);
     this.set("placement", this.siteSettings.carbonads_placement);
-    this._super();
+    super.init();
-  },
+  }
 
   @discourseComputed("serve_id", "placement")
   url(serveId, placement) {
     return htmlSafe(
       `//cdn.carbonads.com/carbon.js?serve=${serveId}&placement=${placement}`
     );
-  },
+  }
 
   @discourseComputed
   showCarbonAds() {
@@ -26,7 +26,7 @@ export default AdComponent.extend({
     }
 
     return this.currentUser.show_carbon_ads;
-  },
+  }
 
   @discourseComputed(
     "placement",
@@ -39,5 +39,5 @@ export default AdComponent.extend({
     return (
       placement && serveId && showCarbonAds && showToGroups && showOnCurrentPage
     );
-  },
+  }
-});
+}

assets/javascripts/discourse/components/google-adsense.js

@@ -1,5 +1,6 @@
 import { scheduleOnce } from "@ember/runloop";
 import { htmlSafe } from "@ember/template";
+import { classNameBindings } from "@ember-decorators/component";
 import RSVP from "rsvp";
 import loadScript from "discourse/lib/load-script";
 import { isTesting } from "discourse-common/config/environment";
@@ -97,19 +98,17 @@ const MOBILE_SETTINGS = {
   },
 };
 
-export default AdComponent.extend({
+@classNameBindings(
-  classNameBindings: [
+  ":google-adsense",
-    ":google-adsense",
+  "classForSlot",
-    "classForSlot",
+  "isResponsive:adsense-responsive"
-    "isResponsive:adsense-responsive",
+)
-  ],
+export default class GoogleAdsense extends AdComponent {
-  loadedGoogletag: false,
+  loadedGoogletag = false;
-
+  publisher_id = null;
-  publisher_id: null,
+  ad_width = null;
-  ad_width: null,
+  ad_height = null;
-  ad_height: null,
+  adRequested = false;
-
-  adRequested: false,
 
   init() {
     let config, size;
@@ -138,8 +137,8 @@ export default AdComponent.extend({
     this.set("ad_height", parseAdHeight(size));
     this.set("ad_code", this.siteSettings[config.code]);
     this.set("publisher_id", this.siteSettings.adsense_publisher_code);
-    this._super();
+    super.init();
-  },
+  }
 
   async _triggerAds() {
     if (isTesting()) {
@@ -162,49 +161,49 @@ export default AdComponent.extend({
       // eslint-disable-next-line no-console
       console.error("Adsense error:", ex);
     }
-  },
+  }
 
   didInsertElement() {
-    this._super();
+    super.didInsertElement();
 
     if (!this.get("showAd")) {
       return;
     }
 
     scheduleOnce("afterRender", this, this._triggerAds);
-  },
+  }
 
   @discourseComputed("ad_width")
   isResponsive(adWidth) {
     return ["auto", "fluid"].includes(adWidth);
-  },
+  }
 
   @discourseComputed("ad_width")
   isFluid(adWidth) {
     return adWidth === "fluid";
-  },
+  }
 
   @discourseComputed("placement", "showAd")
   classForSlot(placement, showAd) {
     return showAd ? htmlSafe(`adsense-${placement}`) : "";
-  },
+  }
 
   @discourseComputed("isResponsive", "isFluid")
   autoAdFormat(isResponsive, isFluid) {
     return isResponsive ? htmlSafe(isFluid ? "fluid" : "auto") : false;
-  },
+  }
 
   @discourseComputed("ad_width", "ad_height", "isResponsive")
   adWrapperStyle(w, h, isResponsive) {
     return htmlSafe(isResponsive ? "" : `width: ${w}; height: ${h};`);
-  },
+  }
 
   @discourseComputed("adWrapperStyle", "isResponsive")
   adInsStyle(adWrapperStyle, isResponsive) {
     return htmlSafe(
       `display: ${isResponsive ? "block" : "inline-block"}; ${adWrapperStyle}`
     );
-  },
+  }
 
   @discourseComputed
   showAdsenseAds() {
@@ -213,7 +212,7 @@ export default AdComponent.extend({
     }
 
     return this.currentUser.show_adsense_ads;
-  },
+  }
 
   @discourseComputed(
     "publisher_id",
@@ -236,7 +235,7 @@ export default AdComponent.extend({
       showAfterPost &&
       showOnCurrentPage
     );
-  },
+  }
 
   @discourseComputed("postNumber")
   showAfterPost(postNumber) {
@@ -247,5 +246,5 @@ export default AdComponent.extend({
     return this.isNthPost(
       parseInt(this.siteSettings.adsense_nth_post_code, 10)
     );
-  },
+  }
-});
+}

assets/javascripts/discourse/components/google-dfp-ad.js

@@ -1,5 +1,6 @@
 import { alias } from "@ember/object/computed";
 import { htmlSafe } from "@ember/template";
+import { classNameBindings, classNames } from "@ember-decorators/component";
 import RSVP from "rsvp";
 import loadScript from "discourse/lib/load-script";
 import { isTesting } from "discourse-common/config/environment";
@@ -241,13 +242,15 @@ function loadGoogle() {
   return _promise;
 }
 
-export default AdComponent.extend({
+@classNameBindings("adUnitClass")
-  classNameBindings: ["adUnitClass"],
+@classNames("google-dfp-ad")
-  classNames: ["google-dfp-ad"],
+export default class GoogleDfpAd extends AdComponent {
-  loadedGoogletag: false,
+  loadedGoogletag = false;
-  lastAdRefresh: null,
+  lastAdRefresh = null;
-  width: alias("size.width"),
+
-  height: alias("size.height"),
+  @alias("size.width") width;
+
+  @alias("size.height") height;
 
   @discourseComputed
   size() {
@@ -256,7 +259,7 @@ export default AdComponent.extend({
       this.siteSettings,
       this.site.mobileView
     );
-  },
+  }
 
   @discourseComputed(
     "siteSettings.dfp_publisher_id",
@@ -269,7 +272,7 @@ export default AdComponent.extend({
     } else {
       return globalId;
     }
-  },
+  }
 
   @discourseComputed("placement", "postNumber")
   divId(placement, postNumber) {
@@ -279,26 +282,26 @@ export default AdComponent.extend({
     } else {
       return `div-gpt-ad-${slotNum}-${placement}`;
     }
-  },
+  }
 
   @discourseComputed("placement", "showAd")
   adUnitClass(placement, showAd) {
     return showAd ? `dfp-ad-${placement}` : "";
-  },
+  }
 
   @discourseComputed("width", "height")
   adWrapperStyle(w, h) {
     if (w !== "fluid") {
       return htmlSafe(`width: ${w}px; height: ${h}px;`);
     }
-  },
+  }
 
   @discourseComputed("width")
   adTitleStyleMobile(w) {
     if (w !== "fluid") {
       return htmlSafe(`width: ${w}px;`);
     }
-  },
+  }
 
   @discourseComputed(
     "publisherId",
@@ -324,7 +327,7 @@ export default AdComponent.extend({
       showOnCurrentPage &&
       size
     );
-  },
+  }
 
   @discourseComputed
   showDfpAds() {
@@ -333,7 +336,7 @@ export default AdComponent.extend({
     }
 
     return this.currentUser.show_dfp_ads;
-  },
+  }
 
   @discourseComputed("postNumber")
   showAfterPost(postNumber) {
@@ -342,7 +345,7 @@ export default AdComponent.extend({
     }
 
     return this.isNthPost(parseInt(this.siteSettings.dfp_nth_post_code, 10));
-  },
+  }
 
   // 3 second delay between calls to refresh ads in a component.
   // Ember often calls updated() more than once, and *sometimes*
@@ -353,7 +356,7 @@ export default AdComponent.extend({
       return true;
     }
     return new Date() - lastAdRefresh > 3000;
-  },
+  }
 
   @on("didUpdate")
   updated() {
@@ -376,7 +379,7 @@ export default AdComponent.extend({
         window.googletag.pubads().refresh([ad]);
       });
     }
-  },
+  }
 
   @on("didInsertElement")
   _initGoogleDFP() {
@@ -410,18 +413,18 @@ export default AdComponent.extend({
         }
       });
     });
-  },
+  }
 
   willRender() {
-    this._super(...arguments);
+    super.willRender(...arguments);
 
     if (!this.get("showAd")) {
       return;
     }
-  },
+  }
 
   @on("willDestroyElement")
   cleanup() {
     destroySlot(this.get("divId"));
-  },
+  }
-});
+}

assets/javascripts/discourse/components/house-ad.js

@@ -1,4 +1,9 @@
 import { isBlank } from "@ember/utils";
+import {
+  attributeBindings,
+  classNameBindings,
+  classNames,
+} from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import AdComponent from "discourse/plugins/discourse-adplugin/discourse/components/ad-component";
 
@@ -10,21 +15,21 @@ const adIndex = {
   topic_list_between: null,
 };
 
-export default AdComponent.extend({
+@classNames("house-creative")
-  classNames: ["house-creative"],
+@classNameBindings("adUnitClass")
-  classNameBindings: ["adUnitClass"],
+@attributeBindings("colspanAttribute:colspan")
-  attributeBindings: ["colspanAttribute:colspan"],
+export default class HouseAd extends AdComponent {
-  adHtml: "",
+  adHtml = "";
 
   @discourseComputed
   colspanAttribute() {
     return this.tagName === "td" ? "5" : null;
-  },
+  }
 
   @discourseComputed("placement", "showAd")
   adUnitClass(placement, showAd) {
     return showAd ? `house-${placement}` : "";
-  },
+  }
 
   @discourseComputed(
     "showToGroups",
@@ -43,7 +48,7 @@ export default AdComponent.extend({
       (showAfterPost || showAfterTopicListItem) &&
       showOnCurrentPage
     );
-  },
+  }
 
   @discourseComputed("postNumber", "placement")
   showAfterPost(postNumber, placement) {
@@ -54,7 +59,7 @@ export default AdComponent.extend({
     return this.isNthPost(
       parseInt(this.site.get("house_creatives.settings.after_nth_post"), 10)
     );
-  },
+  }
 
   @discourseComputed("placement")
   showAfterTopicListItem(placement) {
@@ -65,7 +70,7 @@ export default AdComponent.extend({
     return this.isNthTopicListItem(
       parseInt(this.site.get("house_creatives.settings.after_nth_topic"), 10)
     );
-  },
+  }
 
   chooseAdHtml() {
     const houseAds = this.site.get("house_creatives"),
@@ -89,7 +94,7 @@ export default AdComponent.extend({
       adIndex[placement] = (adIndex[placement] + 1) % filteredAds.length;
       return ad.html;
     }
-  },
+  }
 
   adsNamesForSlot(placement) {
     const houseAds = this.site.get("house_creatives");
@@ -105,14 +110,14 @@ export default AdComponent.extend({
     } else {
       return [];
     }
-  },
+  }
 
   refreshAd() {
     this.set("adHtml", this.chooseAdHtml());
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     if (!this.get("showAd")) {
       return;
@@ -140,5 +145,5 @@ export default AdComponent.extend({
     }
 
     this.refreshAd();
-  },
+  }
-});
+}