refactor(flash object): convert to native class

Author: gilest

ember-cli-flash/src/flash/object.js

@@ -1,31 +1,32 @@
-import EmberObject, { set } from '@ember/object';
 import { cancel, later } from '@ember/runloop';
-import { guidFor } from '../utils/computed';
 import { isTesting, macroCondition } from '@embroider/macros';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
 
 // Disable timeout by default when running tests
 const defaultDisableTimeout = macroCondition(isTesting()) ? true : false;
 
-// Note:
-// To avoid https://github.com/adopted-ember-addons/ember-cli-flash/issues/341 from happening, this class can't simply be called Object
-export default class FlashObject extends EmberObject {
+export default class FlashObject {
   exitTimer = null;
-  exiting = false;
+  @tracked exiting = false;
   isExitable = true;
   initializedTime = null;
+  isDestroyed = false;
 
   // testHelperDisableTimeout – Set by `disableTimeout` and `enableTimeout` in test-support.js
 
   get disableTimeout() {
     return this.testHelperDisableTimeout ?? defaultDisableTimeout;
   }
 
-  @(guidFor('message').readOnly())
-  _guid;
+  get _guid() {
+    return guidFor(this.message?.toString());
+  }
 
-  // eslint-disable-next-line ember/classic-decorator-hooks
-  init() {
-    super.init(...arguments);
+  constructor(messageOptions) {
+    for (const [key, value] of Object.entries(messageOptions)) {
+      this[key] = value;
+    }
 
     if (this.disableTimeout || this.sticky) {
       return;
@@ -49,24 +50,25 @@ export default class FlashObject extends EmberObject {
       return;
     }
     this.exitTimerTask();
+    this.onDidExitMessage?.();
   }
 
-  willDestroy() {
+  destroy() {
     if (this.onDestroy) {
       this.onDestroy();
     }
 
     this._cancelTimer();
     this._cancelTimer('exitTaskInstance');
-    super.willDestroy(...arguments);
+    this.isDestroyed = true;
   }
 
   preventExit() {
-    set(this, 'isExitable', false);
+    this.isExitable = false;
   }
 
   allowExit() {
-    set(this, 'isExitable', true);
+    this.isExitable = true;
     this._checkIfShouldExit();
   }
 
@@ -77,27 +79,27 @@ export default class FlashObject extends EmberObject {
     const timerTaskInstance = later(() => {
       this.exitMessage();
     }, this.timeout);
-    set(this, 'timerTaskInstance', timerTaskInstance);
+    this.timerTaskInstance = timerTaskInstance;
   }
 
   exitTimerTask() {
     if (this.isDestroyed) {
       return;
     }
-    set(this, 'exiting', true);
+    this.exiting = true;
     if (this.extendedTimeout) {
       let exitTaskInstance = later(() => {
         this._teardown();
       }, this.extendedTimeout);
-      set(this, 'exitTaskInstance', exitTaskInstance);
+      this.exitTaskInstance = exitTaskInstance;
     } else {
       this._teardown();
     }
   }
 
   _setInitializedTime() {
     let currentTime = new Date().getTime();
-    set(this, 'initializedTime', currentTime);
+    this.initializedTime = currentTime;
 
     return this.initializedTime;
   }

ember-cli-flash/src/services/flash-messages.js

@@ -103,7 +103,7 @@ export default class FlashMessagesService extends Service {
       set(flashMessageOptions, key, option);
     }
 
-    return FlashMessage.create(flashMessageOptions);
+    return new FlashMessage(flashMessageOptions);
   }
 
   _getOptionOrDefault(key, value) {

ember-cli-flash/src/utils/computed.js

@@ -18,7 +18,7 @@ module('Integration | Component | flash message', function (hooks) {
   setupRenderingTest(hooks);
 
   test('it renders a flash message', async function (assert) {
-    this.set('flash', FlashMessage.create({ message: 'hi', sticky: true }));
+    this.set('flash', new FlashMessage({ message: 'hi', sticky: true }));
 
     await render(hbs`
       <FlashMessage @flash={{this.flash}} as |component flash|>
@@ -34,7 +34,7 @@ module('Integration | Component | flash message', function (hooks) {
 
     this.set(
       'flash',
-      FlashMessage.create({
+      new FlashMessage({
         message: 'test',
         type: 'test',
         timeout: TIMEOUT,
@@ -68,7 +68,7 @@ module('Integration | Component | flash message', function (hooks) {
   });
 
   test('it does not error when quickly removed from the DOM', async function (assert) {
-    this.set('flash', FlashMessage.create({ message: 'hi', sticky: true }));
+    this.set('flash', new FlashMessage({ message: 'hi', sticky: true }));
     this.set('flag', true);
 
     await render(hbs`
@@ -90,7 +90,7 @@ module('Integration | Component | flash message', function (hooks) {
 
     this.set(
       'flash',
-      FlashMessage.create({
+      new FlashMessage({
         message: 'hi',
         sticky: false,
         timeout: timeoutDefault,
@@ -123,7 +123,7 @@ module('Integration | Component | flash message', function (hooks) {
   test('flash message is removed after timeout if mouse enters', async function (assert) {
     assert.expect(3);
 
-    let flashObject = FlashMessage.create({
+    let flashObject = new FlashMessage({
       message: 'hi',
       sticky: false,
       timeout: timeoutDefault,
@@ -164,7 +164,7 @@ module('Integration | Component | flash message', function (hooks) {
 
     this.set(
       'flash',
-      FlashMessage.create({
+      new FlashMessage({
         message: 'flash message content',
         sticky: true,
         destroyOnClick: false,
@@ -192,7 +192,7 @@ module('Integration | Component | flash message', function (hooks) {
 
   test('exiting class is applied for sticky messages', async function (assert) {
     assert.expect(2);
-    let flashObject = FlashMessage.create({
+    let flashObject = new FlashMessage({
       message: 'flash message content',
       sticky: true,
       extendedTimeout: 100,
@@ -213,7 +213,7 @@ module('Integration | Component | flash message', function (hooks) {
 
   test('custom message type class name prefix is applied', async function (assert) {
     assert.expect(2);
-    let flashObject = FlashMessage.create({
+    let flashObject = new FlashMessage({
       message: 'flash message content',
       type: 'test',
       sticky: true,

test-app/tests/integration/components/flash-message-test.js

@@ -10,7 +10,7 @@ let flash = null;
 module('FlashMessageObject disableTimeout', function (hooks) {
   hooks.beforeEach(function () {
     disableTimeout();
-    flash = FlashMessage.create({
+    flash = new FlashMessage({
       type: 'test',
       message: 'Cool story brah',
       timeout: testTimerDuration,
@@ -32,7 +32,7 @@ module('FlashMessageObject enableTimeout', function (hooks) {
   hooks.beforeEach(function () {
     disableTimeout();
     enableTimeout();
-    flash = FlashMessage.create({
+    flash = new FlashMessage({
       type: 'test',
       message: 'Cool story brah',
       timeout: testTimerDuration,
@@ -54,7 +54,7 @@ module('FlashMessageObject enableTimeout', function (hooks) {
 
 module('FlashMessageObject', function (hooks) {
   hooks.beforeEach(function () {
-    flash = FlashMessage.create({
+    flash = new FlashMessage({
       type: 'test',
       message: 'Cool story brah',
       timeout: testTimerDuration,
@@ -70,17 +70,17 @@ module('FlashMessageObject', function (hooks) {
   });
 
   test('it sets a timer after init', function (assert) {
-    assert.ok(isPresent(flash.get('timerTaskInstance')));
+    assert.ok(isPresent(flash.timerTaskInstance));
   });
 
   test('it destroys the message after the timer has elapsed', function (assert) {
     let result;
     const done = assert.async();
     assert.expect(3);
 
-    flash.set('onDidDestroyMessage', () => {
+    flash.onDidDestroyMessage = () => {
       result = 'foo';
-    });
+    };
 
     later(() => {
       assert.true(flash.isDestroyed, 'it sets `isDestroyed` to true');
@@ -98,7 +98,7 @@ module('FlashMessageObject', function (hooks) {
     const done = assert.async();
     assert.expect(1);
 
-    const stickyFlash = FlashMessage.create({
+    const stickyFlash = new FlashMessage({
       type: 'test',
       message: 'Cool story brah',
       timeout: testTimerDuration,
@@ -119,30 +119,30 @@ module('FlashMessageObject', function (hooks) {
       flash.destroyMessage();
     });
 
-    assert.true(flash.get('isDestroyed'));
-    assert.notOk(flash.get('timer'));
+    assert.true(flash.isDestroyed);
+    assert.notOk(flash.timer);
   });
 
   test('it sets `exiting` to true after the timer has elapsed', function (assert) {
     assert.expect(2);
     const done = assert.async();
 
-    const exitFlash = FlashMessage.create({
+    const exitFlash = new FlashMessage({
       timeout: testTimerDuration,
       extendedTimeout: testTimerDuration,
     });
 
     later(() => {
-      assert.true(exitFlash.get('exiting'), 'it sets `exiting` to true');
-      assert.notOk(exitFlash.get('timer'), 'it cancels the `timer`');
+      assert.true(exitFlash.exiting, 'it sets `exiting` to true');
+      assert.notOk(exitFlash.timer, 'it cancels the `timer`');
       done();
     }, testTimerDuration * 2);
   });
 
   test('it calls `onDestroy` when object is destroyed', function (assert) {
     assert.expect(1);
 
-    const callbackFlash = FlashMessage.create({
+    const callbackFlash = new FlashMessage({
       sticky: true,
       onDestroy() {
         assert.ok(true, 'onDestroy is called');