DEV: Refactor complex initializers into classes (#28661)

We're working to remove all decorators from object-literal-properties. This commit refactors all initializers which were using these decorators into classes, where decorators are allowed. Also adds cleanup logic to the local-dates initializer, which was previously missing.

plugins/chat/assets/javascripts/discourse/initializers/chat-setup.js

@@ -1,3 +1,5 @@
+import { setOwner } from "@ember/owner";
+import { service } from "@ember/service";
 import { number } from "discourse/lib/formatter";
 import { withPluginApi } from "discourse/lib/plugin-api";
 import { getOwnerWithFallback } from "discourse-common/lib/get-owner";
@@ -14,18 +16,17 @@ const MIN_REFRESH_DURATION_MS = 180000; // 3 minutes
 
 replaceIcon("d-chat", "comment");
 
-export default {
-  name: "chat-setup",
-  before: "hashtag-css-generator",
+class ChatSetupInit {
+  @service router;
+  @service("chat") chatService;
+  @service chatHistory;
+  @service site;
+  @service siteSettings;
+  @service currentUser;
+  @service appEvents;
 
-  initialize(container) {
-    this.router = container.lookup("service:router");
-    this.chatService = container.lookup("service:chat");
-    this.chatHistory = container.lookup("service:chat-history");
-    this.site = container.lookup("service:site");
-    this.siteSettings = container.lookup("service:site-settings");
-    this.currentUser = container.lookup("service:current-user");
-    this.appEvents = container.lookup("service:app-events");
+  constructor(owner) {
+    setOwner(this, owner);
     this.appEvents.on("discourse:focus-changed", this, "_handleFocusChanged");
 
     if (!this.chatService.userCanChat) {
@@ -40,7 +41,7 @@ export default {
         }
       });
 
-      api.registerHashtagType("channel", new ChannelHashtagType(container));
+      api.registerHashtagType("channel", new ChannelHashtagType(owner));
 
       api.registerChatComposerButton({
         id: "chat-upload-btn",
@@ -75,7 +76,7 @@ export default {
         position: this.site.desktopView ? "inline" : "dropdown",
         context: "channel",
         action() {
-          const chatEmojiPickerManager = container.lookup(
+          const chatEmojiPickerManager = owner.lookup(
             "service:chat-emoji-picker-manager"
           );
           chatEmojiPickerManager.open({ context: "channel" });
@@ -90,7 +91,7 @@ export default {
         position: "dropdown",
         context: "thread",
         action() {
-          const chatEmojiPickerManager = container.lookup(
+          const chatEmojiPickerManager = owner.lookup(
             "service:chat-emoji-picker-manager"
           );
           chatEmojiPickerManager.open({ context: "thread" });
@@ -135,7 +136,7 @@ export default {
 
       this.chatService.loadChannels();
 
-      const chatNotificationManager = container.lookup(
+      const chatNotificationManager = owner.lookup(
         "service:chat-notification-manager"
       );
       chatNotificationManager.start();
@@ -172,12 +173,12 @@ export default {
         }
       });
     });
-  },
+  }
 
   @bind
   documentTitleCountCallback() {
     return this.chatService.getDocumentTitleCount();
-  },
+  }
 
   teardown() {
     this.appEvents.off("discourse:focus-changed", this, "_handleFocusChanged");
@@ -188,7 +189,7 @@ export default {
 
     _lastForcedRefreshAt = null;
     clearChatComposerButtons();
-  },
+  }
 
   @bind
   _handleFocusChanged(hasFocus) {
@@ -209,5 +210,17 @@ export default {
     }
 
     _lastForcedRefreshAt = Date.now();
+  }
+}
+
+export default {
+  name: "chat-setup",
+  before: "hashtag-css-generator",
+  initialize(owner) {
+    this.instance = new ChatSetupInit(owner);
+  },
+  teardown() {
+    this.instance.teardown();
+    this.instance = null;
   },
 };

plugins/discourse-local-dates/assets/javascripts/initializers/discourse-local-dates.js

@@ -1,3 +1,4 @@
+import { setOwner } from "@ember/owner";
 import { service } from "@ember/service";
 import { htmlSafe } from "@ember/template";
 import { downloadCalendar } from "discourse/lib/download-calendar";
@@ -343,13 +344,22 @@ function _calculateDuration(element) {
   return element.dataset === startDataset ? duration : -duration;
 }
 
-export default {
-  name: "discourse-local-dates",
+class LocalDatesInit {
+  @service siteSettings;
+  @service tooltip;
+
+  constructor(owner) {
+    setOwner(this, owner);
+
+    window.addEventListener("click", this.showDatePopover, { passive: true });
+
+    if (this.siteSettings.discourse_local_dates_enabled) {
+      withPluginApi("0.8.8", initializeDiscourseLocalDates);
+    }
+  }
 
   @bind
   showDatePopover(event) {
-    const tooltip = this.container.lookup("service:tooltip");
-
     if (event?.target?.classList?.contains("download-calendar")) {
       const dataset = event.target.dataset;
       downloadCalendar(dataset.title, [
@@ -359,31 +369,30 @@ export default {
         },
       ]);
 
-      return tooltip.close("local-date");
+      return this.tooltip.close("local-date");
     }
 
     if (!event?.target?.classList?.contains("discourse-local-date")) {
       return;
     }
 
-    const siteSettings = this.container.lookup("service:site-settings");
-    return tooltip.show(event.target, {
+    return this.tooltip.show(event.target, {
       identifier: "local-date",
-      content: htmlSafe(buildHtmlPreview(event.target, siteSettings)),
+      content: htmlSafe(buildHtmlPreview(event.target, this.siteSettings)),
     });
-  },
-
-  initialize(container) {
-    this.container = container;
-    window.addEventListener("click", this.showDatePopover, { passive: true });
-
-    const siteSettings = container.lookup("service:site-settings");
-    if (siteSettings.discourse_local_dates_enabled) {
-      withPluginApi("0.8.8", initializeDiscourseLocalDates);
-    }
-  },
+  }
 
   teardown() {
     window.removeEventListener("click", this.showDatePopover);
+  }
+}
+
+export default {
+  initialize(owner) {
+    this.instance = new LocalDatesInit(owner);
+  },
+  teardown() {
+    this.instance.teardown();
+    this.instance = null;
   },
 };