Updated syntax to modern standards (#328)

* Updated syntax to modern standards

- Converted to classes and decorators
- Replaced component lifecycle hooks with ember-render-modifiers
- Use this. rather than get
- Introduced some quality of life babel plugins
- Implemented angle bracket components

* Drop support for older Ember versions below 3.12-LTS

* Upgraded eslint and resolved lint issues

* update lock file

* Rolled back change to version number

Author: Joshua Lawrence

.editorconfig

@@ -16,5 +16,8 @@ indent_size = 2
 [*.hbs]
 insert_final_newline = false
 
+[*.js]
+quote_type = single
+
 [*.{diff,md}]
 trim_trailing_whitespace = false

.eslintrc.js

@@ -1,20 +1,17 @@
 module.exports = {
   root: true,
+  parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2017,
-    sourceType: 'module'
+    sourceType: 'module',
   },
-  plugins: [
-    'ember'
-  ],
-  extends: [
-    'eslint:recommended',
-    'plugin:ember/recommended'
-  ],
+  plugins: ['ember'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended'],
   env: {
-    browser: true
+    browser: true,
   },
   rules: {
+    'ember/classic-decorator-no-classic-methods': 'error',
   },
   overrides: [
     // node files
@@ -27,26 +24,30 @@ module.exports = {
         'testem.js',
         'blueprints/*/index.js',
         'config/**/*.js',
-        'tests/dummy/config/**/*.js'
+        'tests/dummy/config/**/*.js',
       ],
       excludedFiles: [
         'addon/**',
         'addon-test-support/**',
         'app/**',
-        'tests/dummy/app/**'
+        'tests/dummy/app/**',
       ],
       parserOptions: {
         sourceType: 'script',
-        ecmaVersion: 2015
+        ecmaVersion: 2015,
       },
       env: {
         browser: false,
-        node: true
+        node: true,
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-      })
-    }
-  ]
+      rules: Object.assign(
+        {},
+        require('eslint-plugin-node').configs.recommended.rules,
+        {
+          // add your custom rules and overrides for node files here
+        }
+      ),
+    },
+  ],
 };

.gitignore

@@ -18,6 +18,7 @@
 /npm-debug.log*
 /testem.log
 /yarn-error.log
+/.vscode
 
 # ember-try
 /.node_modules.ember-try/

addon/components/flash-message.js

@@ -2,127 +2,110 @@ import { htmlSafe, classify } from '@ember/string';
 import Component from '@ember/component';
 import { isPresent } from '@ember/utils';
 import { run } from '@ember/runloop';
-import { computed, set, get } from '@ember/object';
+import { action, computed, set } from '@ember/object';
+import { and, bool, readOnly, not } from '@ember/object/computed';
+import { tagName } from '@ember-decorators/component';
 import layout from '../templates/components/flash-message';
-import getWithDefault from '../utils/get-with-default';
-
-const {
-  and,
-  bool,
-  readOnly,
-  not
-} = computed;
-const {
-  next,
-  cancel
-} = run;
-
-export default Component.extend({
-  layout,
-  active: false,
-  messageStyle: 'bootstrap',
-  classNames: ['flash-message'],
-  classNameBindings: ['alertType', 'active', 'exiting'],
-  attributeBindings: ['aria-label', 'aria-describedby', 'role'],
-
-  showProgress: readOnly('flash.showProgress'),
-  notExiting: not('exiting'),
-  showProgressBar: and('showProgress', 'notExiting'),
-  exiting: readOnly('flash.exiting'),
-  hasBlock: bool('template').readOnly(),
-
-  alertType: computed('flash.type', {
-    get() {
-      const flashType = getWithDefault(this, 'flash.type', '');
-      const messageStyle = getWithDefault(this, 'messageStyle', '');
-      let prefix = 'alert alert-';
-
-      if (messageStyle === 'foundation') {
-        prefix = 'alert-box ';
-      }
-
-      return `${prefix}${flashType}`;
-    }
-  }),
 
-  flashType: computed('flash.type', {
-    get() {
-      const flashType = getWithDefault(this, 'flash.type', '');
+const { next, cancel } = run;
 
-      return classify(flashType);
-    }
-  }),
+@tagName('')
+export default class FlashMessage extends Component {
+  layout = layout;
+  active = false;
+  messageStyle = 'bootstrap';
 
-  didInsertElement() {
-    this._super(...arguments);
-    const pendingSet = next(this, () => {
-      set(this, 'active', true);
-    });
-    set(this, 'pendingSet', pendingSet);
-    this.set('_mouseEnterHandler', this._mouseEnter.bind(this));
-    this.set('_mouseLeaveHandler', this._mouseLeave.bind(this));
-    this.element.addEventListener('mouseenter', this._mouseEnterHandler);
-    this.element.addEventListener('mouseleave', this._mouseLeaveHandler);
-  },
-
-  willDestroyElement() {
-    this._super(...arguments);
-    this.element.removeEventListener('mouseenter', this._mouseEnterHandler);
-    this.element.removeEventListener('mouseleave', this._mouseLeaveHandler);
-  },
-
-  progressDuration: computed('flash.showProgress', {
-    get() {
-      if (!get(this, 'flash.showProgress')) {
-        return false;
-      }
-
-      const duration = getWithDefault(this, 'flash.timeout', 0);
-
-      return htmlSafe(`transition-duration: ${duration}ms`);
+  @readOnly('flash.showProgress')
+  showProgress;
+
+  @not('exiting')
+  notExiting;
+
+  @and('showProgress', 'notExiting')
+  showProgressBar;
+
+  @readOnly('flash.exiting')
+  exiting;
+
+  @bool('template')
+  hasBlock;
+
+  @computed('flash.type', 'messageStyle')
+  get alertType() {
+    const flashType = this.flash.type || '';
+    const messageStyle = this.messageStyle || '';
+    let prefix = 'alert alert-';
+
+    if (messageStyle === 'foundation') {
+      prefix = 'alert-box ';
     }
-  }),
 
-  click() {
-    const destroyOnClick = getWithDefault(this, 'flash.destroyOnClick', true);
+    return `${prefix}${flashType}`;
+  }
 
-    if (destroyOnClick) {
-      this._destroyFlashMessage();
+  @computed('flash.type')
+  get flashType() {
+    return classify(this.flash.type || '');
+  }
+
+  @computed('flash.{showProgress,timeout}')
+  get progressDuration() {
+    if (!this.flash?.showProgress) {
+      return false;
     }
-  },
+    const duration = this.flash?.timeout || 0;
+    return htmlSafe(`transition-duration: ${duration}ms`);
+  }
 
   _mouseEnter() {
-    const flash = get(this, 'flash');
-    if (isPresent(flash)) {
-      flash.preventExit();
+    if (isPresent(this.flash)) {
+      this.flash.preventExit();
     }
-  },
+  }
 
   _mouseLeave() {
-    const flash = get(this, 'flash');
-    if (isPresent(flash) && !get(flash, 'exiting')) {
-      flash.allowExit();
+    if (isPresent(this.flash) && !this.flash.exiting) {
+      this.flash.allowExit();
     }
-  },
-
-  willDestroy() {
-    this._super(...arguments);
-    this._destroyFlashMessage();
-    cancel(get(this, 'pendingSet'));
-  },
+  }
 
-  // private
   _destroyFlashMessage() {
-    const flash = getWithDefault(this, 'flash', false);
-
-    if (flash) {
-      flash.destroyMessage();
+    if (this.flash) {
+      this.flash.destroyMessage();
     }
-  },
+  }
 
-  actions: {
-    close() {
+  @action
+  onClick() {
+    const destroyOnClick = this.flash?.destroyOnClick ?? true;
+
+    if (destroyOnClick) {
       this._destroyFlashMessage();
     }
   }
-});
+
+  @action
+  onClose() {
+    this._destroyFlashMessage();
+  }
+
+  @action
+  onDidInsert(element) {
+    const pendingSet = next(this, () => {
+      set(this, 'active', true);
+    });
+    set(this, 'pendingSet', pendingSet);
+    set(this, '_mouseEnterHandler', this._mouseEnter);
+    set(this, '_mouseLeaveHandler', this._mouseLeave);
+    element.addEventListener('mouseenter', this._mouseEnterHandler);
+    element.addEventListener('mouseleave', this._mouseLeaveHandler);
+  }
+
+  @action
+  onWillDestroy(element) {
+    element.removeEventListener('mouseenter', this._mouseEnterHandler);
+    element.removeEventListener('mouseleave', this._mouseLeaveHandler);
+    cancel(this.pendingSet);
+    this._destroyFlashMessage();
+  }
+}