DEV: Update to native class syntax (#230)

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({
-  router: service(),
+export default class AdComponent extends Component {
+  @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(
-    "router.currentRoute.parent.attributes.tags_disable_ads"
-  ),
+  @alias("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({
-  router: service(),
-  tagName: "",
+@tagName("")
+export default class AdSlot extends AdComponent {
+  @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({
-  divs: null,
-  publisherId: null,
+export default class AdbutlerAd extends AdComponent {
+  divs = 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"],
-
-  showAd: and(
-    "showAmazonAds",
-    "showToGroups",
-    "showAfterPost",
-    "showOnCurrentPage"
-  ),
+@classNames("amazon-product-links")
+export default class AmazonProductLinks extends AdComponent {
+  @and("showAmazonAds", "showToGroups", "showAfterPost", "showOnCurrentPage")
+  showAd;
 
   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({
-  serve_id: null,
-  placement: null,
+export default class CarbonadsAd extends AdComponent {
+  serve_id = 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: [
-    ":google-adsense",
-    "classForSlot",
-    "isResponsive:adsense-responsive",
-  ],
-  loadedGoogletag: false,
-
-  publisher_id: null,
-  ad_width: null,
-  ad_height: null,
-
-  adRequested: false,
+@classNameBindings(
+  ":google-adsense",
+  "classForSlot",
+  "isResponsive:adsense-responsive"
+)
+export default class GoogleAdsense extends AdComponent {
+  loadedGoogletag = false;
+  publisher_id = null;
+  ad_width = null;
+  ad_height = null;
+  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"],
-  classNames: ["google-dfp-ad"],
-  loadedGoogletag: false,
-  lastAdRefresh: null,
-  width: alias("size.width"),
-  height: alias("size.height"),
+@classNameBindings("adUnitClass")
+@classNames("google-dfp-ad")
+export default class GoogleDfpAd extends AdComponent {
+  loadedGoogletag = false;
+  lastAdRefresh = null;
+
+  @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"],
-  classNameBindings: ["adUnitClass"],
-  attributeBindings: ["colspanAttribute:colspan"],
-  adHtml: "",
+@classNames("house-creative")
+@classNameBindings("adUnitClass")
+@attributeBindings("colspanAttribute:colspan")
+export default class HouseAd extends AdComponent {
+  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();
-  },
-});
+  }
+}