DEV: Convert to native class syntax

javascripts/discourse/components/featured-tile.js

@@ -1,11 +1,12 @@
 import Component from "@ember/component";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  classNames: "featured-tile",
-  responsiveRatios: [1, 1.5, 2],
-  displayHeight: 200,
-  displayWidth: 200,
+@classNames("featured-tile")
+export default class FeaturedTile extends Component {
+  responsiveRatios = [1, 1.5, 2];
+  displayHeight = 200;
+  displayWidth = 200;
 
   @discourseComputed("topic.thumbnails")
   srcset() {
@@ -18,27 +19,27 @@ export default Component.extend({
         return `${match.url} ${ratio}x`;
       })
       .join(",");
-  },
+  }
 
   @discourseComputed("topic.thumbnails")
   original(thumbnails) {
     return thumbnails[0];
-  },
+  }
 
   @discourseComputed("original")
   width(original) {
     return original.width;
-  },
+  }
 
   @discourseComputed("original")
   height(original) {
     return original.height;
-  },
+  }
 
   @discourseComputed("topic.thumbnails")
   fallbackSrc() {
     return this.findBest(this.displayWidth, this.displayHeight).url;
-  },
+  }
 
   findBest(maxWidth, maxHeight) {
     if (!this.topic.thumbnails) {
@@ -57,12 +58,12 @@ export default Component.extend({
     }
 
     return this.original;
-  },
+  }
 
   @discourseComputed("topic")
   url(topic) {
     return topic.linked_post_number
       ? topic.urlForPostNumber(topic.linked_post_number)
       : topic.get("lastUnreadUrl");
-  },
-});
+  }
+}

javascripts/discourse/components/featured-tiles.js

@@ -1,7 +1,9 @@
 import Component from "@ember/component";
 import { next } from "@ember/runloop";
 import { service } from "@ember/service";
-import discourseComputed, { observes } from "discourse-common/utils/decorators";
+import { classNameBindings } from "@ember-decorators/component";
+import { observes } from "@ember-decorators/object";
+import discourseComputed from "discourse-common/utils/decorators";
 
 const displayCategories = settings.display_categories
   .split("|")
@@ -22,24 +24,24 @@ function shuffle(array) {
   return array;
 }
 
-export default Component.extend({
-  router: service(),
+@classNameBindings("isLoading")
+export default class FeaturedTiles extends Component {
+  @service router;
 
-  isLoading: true,
-  classNameBindings: "isLoading",
+  isLoading = true;
 
   init() {
-    this._super();
+    super.init();
     this.set("isLoading", true);
     this.loadTopics();
-  },
+  }
 
   @observes("category")
   categoryChanged() {
     if (settings.scope_to_category) {
       this.loadTopics();
     }
-  },
+  }
 
   loadTopics() {
     const loadParams = { period: settings.top_period };
@@ -65,7 +67,7 @@ export default Component.extend({
         this.set("list", list);
         next(this, () => this.set("isLoading", false)); // Use `next` for CSS animation
       });
-  },
+  }
 
   @discourseComputed("list.topics")
   filteredTopics(topics) {
@@ -76,7 +78,7 @@ export default Component.extend({
       topics = shuffle(topics);
     }
     return topics.slice(0, settings.maximum_topic_count);
-  },
+  }
 
   @discourseComputed(
     "site.mobileView",
@@ -108,5 +110,5 @@ export default Component.extend({
       return displayCategories.includes(viewingCategoryId);
     }
     return false;
-  },
-});
+  }
+}