DEV: Convert final hbs to gjs and enable require-strict-mode lint (#32473)

.template-lintrc.cjs

@@ -4,8 +4,9 @@ module.exports = {
   ...templateLint,
   rules: {
     ...templateLint.rules,
-    "no-capital-arguments": false, // TODO: we extensively use `args` argument name
+    "no-capital-arguments": false, // @args is used for MountWidget
     "require-button-type": false,
     "no-action": true,
+    "require-strict-mode": true,
   },
 };

plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.gjs

@@ -0,0 +1,11 @@
+import ChatDrawer from "../../components/chat-drawer";
+
+const ChatDrawerOutlet = <template>
+  <div class="below-footer-outlet chat-drawer-outlet">
+    <div class="chat-drawer-outlet-container">
+      <ChatDrawer />
+    </div>
+  </div>
+</template>;
+
+export default ChatDrawerOutlet;

plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-drawer-outlet.hbs

@@ -1,3 +0,0 @@
-<div class="chat-drawer-outlet-container">
-  <ChatDrawer />
-</div>

plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-message-actions-desktop-outlet.gjs

@@ -0,0 +1,9 @@
+import ChatMessageActionsDesktop from "../../components/chat-message-actions-desktop";
+
+const ChatMessageActionsDesktopOutlet = <template>
+  <div class="below-footer-outlet chat-message-actions-desktop-outlet">
+    <ChatMessageActionsDesktop />
+  </div>
+</template>;
+
+export default ChatMessageActionsDesktopOutlet;

plugins/chat/assets/javascripts/discourse/connectors/below-footer/chat-message-actions-desktop-outlet.hbs

@@ -1 +0,0 @@
-<ChatMessageActionsDesktop />

plugins/chat/assets/javascripts/discourse/connectors/chat-composer-inline-buttons/emoji-picker.gjs

@@ -0,0 +1,20 @@
+import Component from "@glimmer/component";
+import { service } from "@ember/service";
+import EmojiPicker from "discourse/components/emoji-picker";
+import ChatComposerSeparator from "../../components/chat/composer/separator";
+
+export default class ChatEmojiPicker extends Component {
+  @service site;
+
+  <template>
+    {{#if this.site.desktopView}}
+      <EmojiPicker
+        @didSelectEmoji={{@outletArgs.composer.onSelectEmoji}}
+        @btnClass="chat-composer-button btn-transparent -emoji"
+        @context="chat"
+      />
+
+      <ChatComposerSeparator />
+    {{/if}}
+  </template>
+}

plugins/chat/assets/javascripts/discourse/connectors/chat-composer-inline-buttons/emoji-picker.hbs

@@ -1,9 +0,0 @@
-{{#if this.site.desktopView}}
-  <EmojiPicker
-    @didSelectEmoji={{@outletArgs.composer.onSelectEmoji}}
-    @btnClass="chat-composer-button btn-transparent -emoji"
-    @context="chat"
-  />
-
-  <Chat::Composer::Separator />
-{{/if}}

plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.gjs

@@ -0,0 +1 @@
+export { default } from "../../components/chat-header";

plugins/chat/assets/javascripts/discourse/connectors/home-logo-wrapper/chat-header-connector.hbs

@@ -1 +0,0 @@
-<ChatHeader>{{yield}}</ChatHeader>

plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.gjs

@@ -0,0 +1,11 @@
+import ChatDirectMessageButton from "../../components/chat/direct-message-button";
+
+const ChatButton = <template>
+  {{#if @outletArgs.user.can_chat_user}}
+    <li class="user-card-below-message-button chat-button">
+      <ChatDirectMessageButton @user={{@outletArgs.user}} @modal={{true}} />
+    </li>
+  {{/if}}
+</template>;
+
+export default ChatButton;

plugins/chat/assets/javascripts/discourse/connectors/user-card-below-message-button/chat-button.hbs

@@ -1,3 +0,0 @@
-{{#if this.user.can_chat_user}}
-  <Chat::DirectMessageButton @user={{this.user}} @modal={{true}} />
-{{/if}}

plugins/chat/assets/javascripts/discourse/connectors/user-profile-controls/chat-button.gjs

@@ -0,0 +1,11 @@
+import ChatDirectMessageButton from "../../components/chat/direct-message-button";
+
+const ChatButton = <template>
+  {{#if @outletArgs.model.can_chat_user}}
+    <li class="user-card-below-message-button chat-button">
+      <ChatDirectMessageButton @user={{@outletArgs.model}} />
+    </li>
+  {{/if}}
+</template>;
+
+export default ChatButton;

plugins/chat/assets/javascripts/discourse/connectors/user-profile-controls/chat-button.hbs

@@ -1,3 +0,0 @@
-{{#if this.model.can_chat_user}}
-  <Chat::DirectMessageButton @user={{this.model}} />
-{{/if}}

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/multi-select.gjs

@@ -0,0 +1,45 @@
+import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import DMultiSelect from "discourse/components/d-multi-select";
+import StyleguideComponent from "../../styleguide/component";
+import StyleguideExample from "../../styleguide-example";
+
+export default class MultiSelect extends Component {
+  @tracked selection = [{ id: 1, name: "foo" }];
+
+  @action
+  onChange(selection) {
+    this.selection = selection;
+  }
+
+  @action
+  async loadDummyData(filter) {
+    await new Promise((resolve) => setTimeout(resolve, 500));
+
+    return [
+      { id: 1, name: "foo" },
+      { id: 2, name: "bar" },
+      { id: 3, name: "baz" },
+    ].filter((item) => {
+      return item.name.toLowerCase().includes(filter.toLowerCase());
+    });
+  }
+
+  <template>
+    <StyleguideExample @title="<DMultiSelect />">
+      <StyleguideComponent @tag="d-multi-select component">
+        <:sample>
+          <DMultiSelect
+            @loadFn={{this.loadDummyData}}
+            @onChange={{this.onChange}}
+            @selection={{this.selection}}
+          >
+            <:result as |result|>{{result.name}}</:result>
+            <:selection as |result|>{{result.name}}</:selection>
+          </DMultiSelect>
+        </:sample>
+      </StyleguideComponent>
+    </StyleguideExample>
+  </template>
+}

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/multi-select.hbs

@@ -1,14 +0,0 @@
-<StyleguideExample @title="<DMultiSelect />">
-  <Styleguide::Component @tag="d-multi-select component">
-    <:sample>
-      <DMultiSelect
-        @loadFn={{this.loadDummyData}}
-        @onChange={{this.onChange}}
-        @selection={{this.selection}}
-      >
-        <:result as |result|>{{result.name}}</:result>
-        <:selection as |result|>{{result.name}}</:selection>
-      </DMultiSelect>
-    </:sample>
-  </Styleguide::Component>
-</StyleguideExample>

plugins/styleguide/assets/javascripts/discourse/components/sections/molecules/multi-select.js

@@ -1,25 +0,0 @@
-import Component from "@glimmer/component";
-import { tracked } from "@glimmer/tracking";
-import { action } from "@ember/object";
-
-export default class MultiSelect extends Component {
-  @tracked selection = [{ id: 1, name: "foo" }];
-
-  @action
-  onChange(selection) {
-    this.selection = selection;
-  }
-
-  @action
-  async loadDummyData(filter) {
-    await new Promise((resolve) => setTimeout(resolve, 500));
-
-    return [
-      { id: 1, name: "foo" },
-      { id: 2, name: "bar" },
-      { id: 3, name: "baz" },
-    ].filter((item) => {
-      return item.name.toLowerCase().includes(filter.toLowerCase());
-    });
-  }
-}