DEV: Convert to native class syntax (#187)

assets/javascripts/discourse/components/docs-category.js

@@ -1,11 +1,11 @@
 import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  tagName: "",
-
+@tagName("")
+export default class DocsCategory extends Component {
   @discourseComputed("category")
   categoryName(category) {
     return this.site.categories.findBy("id", category.id).name;
-  },
-});
+  }
+}

assets/javascripts/discourse/components/docs-search.js

@@ -1,20 +1,20 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 
-export default Component.extend({
-  classNames: "docs-search",
-
+@classNames("docs-search")
+export default class DocsSearch extends Component {
   @action
   onKeyDown(event) {
     if (event.key === "Enter") {
       this.set("searchTerm", event.target.value);
       this.onSearch(event.target.value);
     }
-  },
+  }
 
   @action
   clearSearch() {
     this.set("searchTerm", "");
     this.onSearch("");
-  },
-});
+  }
+}

assets/javascripts/discourse/components/docs-tag.js

@@ -1,5 +1,5 @@
 import Component from "@ember/component";
+import { tagName } from "@ember-decorators/component";
 
-export default Component.extend({
-  tagName: "",
-});
+@tagName("")
+export default class DocsTag extends Component {}

assets/javascripts/discourse/components/docs-topic-list-item.js

@@ -1,16 +1,16 @@
 import Component from "@ember/component";
 import { htmlSafe } from "@ember/template";
+import { classNameBindings, tagName } from "@ember-decorators/component";
 import { RUNTIME_OPTIONS } from "discourse-common/lib/raw-handlebars-helpers";
 import { findRawTemplate } from "discourse-common/lib/raw-templates";
 
-export default Component.extend({
-  tagName: "tr",
-  classNameBindings: [":topic-list-item"],
-
+@tagName("tr")
+@classNameBindings(":topic-list-item")
+export default class DocsTopicListItem extends Component {
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
     this.renderTopicListItem();
-  },
+  }
 
   renderTopicListItem() {
     const template = findRawTemplate("docs-topic-list-item");
@@ -20,5 +20,5 @@ export default Component.extend({
         htmlSafe(template(this, RUNTIME_OPTIONS))
       );
     }
-  },
-});
+  }
+}

assets/javascripts/discourse/components/docs-topic-list.js

@@ -1,31 +1,32 @@
 import Component from "@ember/component";
 import { action } from "@ember/object";
+import { classNames } from "@ember-decorators/component";
 import discourseComputed from "discourse-common/utils/decorators";
 import { getDocs } from "../../lib/get-docs";
 
-export default Component.extend({
-  classNames: "docs-topic-list",
-  urlPath: getDocs(),
+@classNames("docs-topic-list")
+export default class DocsTopicList extends Component {
+  urlPath = getDocs();
 
   @discourseComputed("order")
   sortTitle(order) {
     return order === "title";
-  },
+  }
 
   @discourseComputed("order")
   sortActivity(order) {
     return order === "activity";
-  },
+  }
 
   @action
   sortListActivity() {
     this.sortBy("activity");
     return false;
-  },
+  }
 
   @action
   sortListTitle() {
     this.sortBy("title");
     return false;
-  },
-});
+  }
+}

assets/javascripts/discourse/components/docs-topic.js

@@ -1,17 +1,17 @@
 import Component from "@ember/component";
 import { reads } from "@ember/object/computed";
+import { classNames } from "@ember-decorators/component";
 import discourseDebounce from "discourse-common/lib/debounce";
 import computed, { bind } from "discourse-common/utils/decorators";
 
-export default Component.extend({
-  classNames: "docs-topic",
-
-  originalPostContent: reads("post.cooked"),
+@classNames("docs-topic")
+export default class DocsTopic extends Component {
+  @reads("post.cooked") originalPostContent;
 
   @computed("topic.post_stream")
   post(stream) {
     return this.store.createRecord("post", stream?.posts.firstObject);
-  },
+  }
 
   @computed("post", "topic")
   model() {
@@ -22,29 +22,29 @@ export default Component.extend({
     }
 
     return post;
-  },
+  }
 
   @bind
   _emitScrollEvent() {
     this.appEvents.trigger("docs-topic:current-post-scrolled");
-  },
+  }
 
   @bind
   debounceScrollEvent() {
     discourseDebounce(this, this._emitScrollEvent, 200);
-  },
+  }
 
   didInsertElement() {
-    this._super(...arguments);
+    super.didInsertElement(...arguments);
 
     document.body.classList.add("archetype-docs-topic");
     document.addEventListener("scroll", this.debounceScrollEvent);
-  },
+  }
 
   willDestroyElement() {
-    this._super(...arguments);
+    super.willDestroyElement(...arguments);
 
     document.body.classList.remove("archetype-docs-topic");
     document.removeEventListener("scroll", this.debounceScrollEvent);
-  },
-});
+  }
+}

assets/javascripts/discourse/controllers/docs-index.js

@@ -3,55 +3,58 @@ import Controller, { inject as controller } from "@ember/controller";
 import { action } from "@ember/object";
 import { alias, equal, gt, readOnly } from "@ember/object/computed";
 import { htmlSafe } from "@ember/template";
+import { on } from "@ember-decorators/object";
 import getURL from "discourse-common/lib/get-url";
-import discourseComputed, { on } from "discourse-common/utils/decorators";
+import discourseComputed from "discourse-common/utils/decorators";
 import I18n from "I18n";
 import Docs from "discourse/plugins/discourse-docs/discourse/models/docs";
 
 const SHOW_FILTER_AT = 10;
 
-export default Controller.extend({
-  queryParams: {
-    ascending: "ascending",
-    filterCategories: "category",
-    filterTags: "tags",
-    filterSolved: "solved",
-    orderColumn: "order",
-    searchTerm: "search",
-    selectedTopic: "topic",
-  },
+export default class DocsIndexController extends Controller {
+  @controller application;
 
-  application: controller(),
+  queryParams = [
+    {
+      ascending: "ascending",
+      filterCategories: "category",
+      filterTags: "tags",
+      filterSolved: "solved",
+      orderColumn: "order",
+      searchTerm: "search",
+      selectedTopic: "topic",
+    },
+  ];
 
-  isLoading: false,
-  isLoadingMore: false,
-  isTopicLoading: false,
-  filterTags: null,
-  filterCategories: null,
-  filterSolved: false,
-  searchTerm: null,
-  selectedTopic: null,
-  topic: null,
-  expandedFilters: false,
-  ascending: null,
-  orderColumn: null,
+  isLoading = false;
+  isLoadingMore = false;
+  isTopicLoading = false;
+  filterTags = null;
+  filterCategories = null;
+  filterSolved = false;
+  searchTerm = null;
+  selectedTopic = null;
+  topic = null;
+  expandedFilters = false;
+  ascending = null;
+  orderColumn = null;
 
-  showCategoryFilter: gt("categories.length", SHOW_FILTER_AT),
-  categoryFilter: "",
-  categorySort: {},
+  @gt("categories.length", SHOW_FILTER_AT) showCategoryFilter;
+  categoryFilter = "";
+  categorySort = {};
 
-  showTagFilter: gt("tags.length", SHOW_FILTER_AT),
-  tagFilter: "",
-  tagSort: {},
+  @gt("tags.length", SHOW_FILTER_AT) showTagFilter;
+  tagFilter = "";
+  tagSort = {};
 
-  loadMoreUrl: alias("model.topics.load_more_url"),
-  categories: readOnly("model.categories"),
-  topics: alias("model.topics.topic_list.topics"),
-  tags: readOnly("model.tags"),
-  showExcerpts: readOnly("model.meta.show_topic_excerpts"),
-  tagGroups: readOnly("model.tag_groups"),
-  topicCount: alias("model.topic_count"),
-  emptyResults: equal("topicCount", 0),
+  @alias("model.topics.load_more_url") loadMoreUrl;
+  @readOnly("model.categories") categories;
+  @alias("model.topics.topic_list.topics") topics;
+  @readOnly("model.tags") tags;
+  @readOnly("model.meta.show_topic_excerpts") showExcerpts;
+  @readOnly("model.tag_groups") tagGroups;
+  @alias("model.topic_count") topicCount;
+  @equal("topicCount", 0) emptyResults;
 
   @on("init")
   _setupFilters() {
@@ -68,7 +71,7 @@ export default Controller.extend({
         direction: "desc", // or asc
       },
     });
-  },
+  }
 
   @discourseComputed("categories", "categorySort", "categoryFilter")
   sortedCategories(categories, categorySort, filter) {
@@ -103,7 +106,7 @@ export default Controller.extend({
     }
 
     return categories;
-  },
+  }
 
   @discourseComputed("categorySort")
   categorySortNumericIcon(catSort) {
@@ -111,7 +114,7 @@ export default Controller.extend({
       return "sort-numeric-down";
     }
     return "sort-numeric-up";
-  },
+  }
 
   @discourseComputed("categorySort")
   categorySortAlphaIcon(catSort) {
@@ -119,7 +122,7 @@ export default Controller.extend({
       return "sort-alpha-down";
     }
     return "sort-alpha-up";
-  },
+  }
 
   @discourseComputed("tags", "tagSort", "tagFilter")
   sortedTags(tags, tagSort, filter) {
@@ -143,7 +146,7 @@ export default Controller.extend({
     }
 
     return tags;
-  },
+  }
 
   @discourseComputed("tagGroups", "tagSort", "tagFilter")
   sortedTagGroups(tagGroups, tagSort, filter) {
@@ -176,7 +179,7 @@ export default Controller.extend({
     }
 
     return sortedTagGroups;
-  },
+  }
 
   @discourseComputed("tagSort")
   tagSortNumericIcon(tagSort) {
@@ -184,7 +187,7 @@ export default Controller.extend({
       return "sort-numeric-down";
     }
     return "sort-numeric-up";
-  },
+  }
 
   @discourseComputed("tagSort")
   tagSortAlphaIcon(tagSort) {
@@ -192,28 +195,28 @@ export default Controller.extend({
       return "sort-alpha-down";
     }
     return "sort-alpha-up";
-  },
+  }
 
   @discourseComputed("topics", "isSearching", "filterSolved")
   noContent(topics, isSearching, filterSolved) {
     const filtered = isSearching || filterSolved;
     return this.topicCount === 0 && !filtered;
-  },
+  }
 
   @discourseComputed("loadMoreUrl")
   canLoadMore(loadMoreUrl) {
     return loadMoreUrl === null ? false : true;
-  },
+  }
 
   @discourseComputed("searchTerm")
   isSearching(searchTerm) {
     return !!searchTerm;
-  },
+  }
 
   @discourseComputed("isSearching", "filterSolved")
   isSearchingOrFiltered(isSearching, filterSolved) {
     return isSearching || filterSolved;
-  },
+  }
 
   @discourseComputed
   canFilterSolved() {
@@ -221,17 +224,17 @@ export default Controller.extend({
       this.siteSettings.solved_enabled &&
       this.siteSettings.docs_add_solved_filter
     );
-  },
+  }
 
   @discourseComputed("filterTags")
   filtered(filterTags) {
     return !!filterTags;
-  },
+  }
 
   @discourseComputed("siteSettings.tagging_enabled", "shouldShowTagsByGroup")
   shouldShowTags(tagging_enabled, shouldShowTagsByGroup) {
     return tagging_enabled && !shouldShowTagsByGroup;
-  },
+  }
 
   @discourseComputed(
     "siteSettings.show_tags_by_group",
@@ -239,7 +242,7 @@ export default Controller.extend({
   )
   shouldShowTagsByGroup(show_tags_by_group, docs_tag_groups) {
     return show_tags_by_group && Boolean(docs_tag_groups);
-  },
+  }
 
   @discourseComputed()
   emptyState() {
@@ -260,12 +263,12 @@ export default Controller.extend({
       title: I18n.t("docs.no_docs.title"),
       body: htmlSafe(body),
     };
-  },
+  }
 
   @discourseComputed("docsCategories", "docsTags")
   docsCategoriesAndTags(docsCategories, docsTags) {
     return docsCategories.concat(docsTags);
-  },
+  }
 
   @discourseComputed()
   docsCategories() {
@@ -277,7 +280,7 @@ export default Controller.extend({
       .split("|")
       .map((c) => this.site.categories.findBy("id", parseInt(c, 10))?.name)
       .filter(Boolean);
-  },
+  }
 
   @discourseComputed()
   docsTags() {
@@ -286,7 +289,7 @@ export default Controller.extend({
     }
 
     return this.siteSettings.docs_tags.split("|").map((t) => `#${t}`);
-  },
+  }
 
   @action
   toggleCategorySort(newType) {
@@ -296,7 +299,7 @@ export default Controller.extend({
       direction:
         type === newType ? (direction === "asc" ? "desc" : "asc") : "asc",
     });
-  },
+  }
 
   @action
   toggleTagSort(newType) {
@@ -306,12 +309,12 @@ export default Controller.extend({
       direction:
         type === newType ? (direction === "asc" ? "desc" : "asc") : "asc",
     });
-  },
+  }
 
   @action
   onChangeFilterSolved(solvedFilter) {
     this.set("filterSolved", solvedFilter);
-  },
+  }
 
   @action
   updateSelectedTags(tag) {
@@ -331,7 +334,7 @@ export default Controller.extend({
       filterTags: filter,
       selectedTopic: null,
     });
-  },
+  }
 
   @action
   updateSelectedCategories(category) {
@@ -343,7 +346,7 @@ export default Controller.extend({
     });
 
     return false;
-  },
+  }
 
   @action
   performSearch(term) {
@@ -360,7 +363,7 @@ export default Controller.extend({
       searchTerm: term,
       selectedTopic: null,
     });
-  },
+  }
 
   @action
   sortBy(column) {
@@ -377,7 +380,7 @@ export default Controller.extend({
     } else {
       this.set("ascending", "");
     }
-  },
+  }
 
   @action
   loadMore() {
@@ -394,7 +397,7 @@ export default Controller.extend({
         });
       });
     }
-  },
+  }
 
   @action
   toggleFilters() {
@@ -403,11 +406,11 @@ export default Controller.extend({
     } else {
       this.set("expandedFilters", false);
     }
-  },
+  }
 
   @action
   returnToList() {
     this.set("selectedTopic", null);
     getOwner(this).lookup("service:router").transitionTo("docs");
-  },
-});
+  }
+}

assets/javascripts/discourse/controllers/docs.js

@@ -1,24 +1,24 @@
 import Controller, { inject as controller } from "@ember/controller";
 import { action } from "@ember/object";
 
-export default Controller.extend({
-  indexController: controller("docs.index"),
+export default class DocsController extends Controller {
+  @controller("docs.index") indexController;
 
   @action
   updateSelectedCategories(category) {
     this.indexController.send("updateSelectedCategories", category);
     return false;
-  },
+  }
 
   @action
   updateSelectedTags(tag) {
     this.indexController.send("updateSelectedTags", tag);
     return false;
-  },
+  }
 
   @action
   performSearch(term) {
     this.indexController.send("performSearch", term);
     return false;
-  },
-});
+  }
+}

assets/javascripts/discourse/models/docs.js

@@ -5,7 +5,7 @@ import Topic from "discourse/models/topic";
 import User from "discourse/models/user";
 import { getDocs } from "../../lib/get-docs";
 
-const Docs = EmberObject.extend({});
+class Docs extends EmberObject {}
 const docsPath = getDocs();
 
 Docs.reopenClass({

assets/javascripts/discourse/routes/docs-index.js

@@ -2,8 +2,8 @@ import DiscourseRoute from "discourse/routes/discourse";
 import I18n from "I18n";
 import Docs from "discourse/plugins/discourse-docs/discourse/models/docs";
 
-export default DiscourseRoute.extend({
-  queryParams: {
+export default class DocsIndex extends DiscourseRoute {
+  queryParams = {
     ascending: { refreshModel: true },
     filterCategories: { refreshModel: true },
     filterTags: { refreshModel: true },
@@ -14,7 +14,7 @@ export default DiscourseRoute.extend({
       replace: true,
       refreshModel: true,
     },
-  },
+  };
 
   model(params) {
     this.controllerFor("docs.index").set("isLoading", true);
@@ -22,7 +22,7 @@ export default DiscourseRoute.extend({
       this.controllerFor("docs.index").set("isLoading", false);
       return result;
     });
-  },
+  }
 
   titleToken() {
     const model = this.currentModel;
@@ -37,10 +37,10 @@ export default DiscourseRoute.extend({
     } else {
       return pageTitle;
     }
-  },
+  }
 
   setupController(controller, model) {
     controller.set("topic", model.topic);
     controller.set("model", model);
-  },
-});
+  }
+}

assets/javascripts/discourse/routes/docs.js

@@ -1,3 +1,3 @@
 import DiscourseRoute from "discourse/routes/discourse";
 
-export default DiscourseRoute.extend({});
+export default class Docs extends DiscourseRoute {}