convert to gjs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.5.4
+
+- Convert to `.gjs`
+
 ## 3.5.3
 
 - Run ember-cli-update

addon/components/flash-messages/index.js → addon/components/flash-messages.gjs

@@ -2,6 +2,8 @@ import { inject } from '@ember/service';
 import Component from '@glimmer/component';
 import { modifier } from 'ember-modifier';
 import { action } from '@ember/object';
+import { fn } from '@ember/helper';
+import Message from '@zestia/ember-messages/components/message';
 
 export default class FlashMessageComponent extends Component {
   @inject('flash-message') flashMessageService;
@@ -24,4 +26,21 @@ export default class FlashMessageComponent extends Component {
   handleDismissMessage(message) {
     this.flashMessageService.remove(message);
   }
+
+  <template>
+    {{#if this.flashMessageService.queue.length}}
+      <div class="flash-messages">
+        {{#each this.flashMessageService.queue as |message|}}
+          <Message
+            class="flash-message"
+            @type={{message.type}}
+            @onDismiss={{fn this.handleDismissMessage message}}
+            {{this.scrollIntoView}}
+          >
+            {{message.text}}
+          </Message>
+        {{/each}}
+      </div>
+    {{/if}}
+  </template>
 }

addon/components/message/index.js → addon/components/message.gjs

@@ -3,6 +3,7 @@ import { tracked } from '@glimmer/tracking';
 import { waitFor } from '@ember/test-waiters';
 import { waitForAnimation } from '@zestia/animation-utils';
 import { modifier } from 'ember-modifier';
+import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 
 export default class MessageComponent extends Component {
@@ -31,4 +32,27 @@ export default class MessageComponent extends Component {
 
     this.args.onDismiss();
   }
+
+  <template>
+    <div
+      role="alert"
+      class="message"
+      data-type={{@type}}
+      data-dismissed={{this.dismissed}}
+      ...attributes
+      {{this.registerElement}}
+    >
+      <div class="message__body">
+        {{yield}}
+      </div>
+      {{#if this.isDismissible}}
+        <button
+          type="button"
+          class="message__dismiss"
+          aria-label="Dismiss"
+          {{on "click" this.dismiss}}
+        ></button>
+      {{/if}}
+    </div>
+  </template>
 }

package.json

@@ -7,7 +7,8 @@
     "ember-auto-import": "^2.7.1",
     "ember-cli-babel": "^8.2.0",
     "ember-cli-htmlbars": "^6.3.0",
-    "ember-modifier": "^4.1.0"
+    "ember-modifier": "^4.1.0",
+    "ember-template-imports": "^4.0.0"
   },
   "description": "Message components for Ember apps & addons",
   "devDependencies": {
@@ -35,7 +36,6 @@
     "ember-resolver": "^11.0.1",
     "ember-source": "~5.5.0",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-imports": "^4.0.0",
     "ember-template-lint": "^5.13.0",
     "ember-try": "^3.0.0",
     "eslint": "^8.56.0",

tests/integration/flash-messages/component-test.gjs

@@ -25,7 +25,7 @@ module('flash-messages', function (hooks) {
     await render(<template><FlashMessages /></template>);
 
     assert.strictEqual(
-      getRootElement().innerHTML,
+      getRootElement().innerHTML.trim(),
       '<!---->',
       'does not render if there are no flash messages to display'
     );