feat: migrate to ES6 classes

.eslintrc.js

@@ -50,6 +50,9 @@ module.exports = {
 			node: true
 		},
 		plugins: ['node'],
-		extends: ['plugin:node/recommended']
+		extends: ['plugin:node/recommended'],
+		rules: {
+			'no-process-env': 0
+		}
 	}]
 };

.gitignore

@@ -20,6 +20,7 @@
 /yarn-error.log
 /tags*
 /.nyc_output
+.DS_Store
 
 # ember-try
 /.node_modules.ember-try/

addon/components/modal-container.js

@@ -3,37 +3,12 @@ import layout from '../templates/components/modal-container';
 import { inject as service } from '@ember/service';
 import { notEmpty } from '@ember/object/computed';
 
-/**
- * Component that acts like a container to wrap modal object on its own component and view.
- *
- * @extends Ember.Component
- */
-export default Component.extend({
+export default class ModalContainerComponent extends Component {
+	layout = layout;
 
-	layout,
+	@service modal;
 
-	/**
-	 * Binded CSS classes.
-	 *
-	 * @property classNameBindings
-	 * @type Array
-	 */
-	classNameBindings: ['fullHeight'],
+	classNameBindings = ['fullHeight'];
 
-	/**
-	 * Show set 100% height.
-	 *
-	 * @property fullHeight
-	 * @type Boolean
-	 */
-	fullHeight: notEmpty('modal.content'),
-
-	/**
-	 * Modal service injection.
-	 *
-	 * @property modal
-	 * @type Object
-	 */
-	modal: service('modal')
-
-});
+	@notEmpty('modal.content') fullHeight;
+}

addon/components/modal.js

@@ -1,142 +1,65 @@
-/* eslint-disable quote-props, no-magic-numbers */
 import Component from '@ember/component';
-import RSVP from 'rsvp';
 import { camelize } from '@ember/string';
-import { computed } from '@ember/object';
+import { action, computed } from '@ember/object';
 import onTransitionEnd from 'ember-transition-end/utils/on-transition-end';
 import { hasTransitions } from 'ember-modal-service/utils/css-transitions';
 import { inject as service } from '@ember/service';
-import { on } from '@ember/object/evented';
 import { run } from '@ember/runloop';
 
-/**
- * Component to wrap modal objects.
- *
- * @extends Ember.Component
- */
-export default Component.extend({
-
-	/**
-	 * Modal service inject.
-	 *
-	 * @property modal
-	 * @type Object
-	 */
-	scheduler: service('scheduler'),
-
-	/**
-	 * Modal service inject.
-	 *
-	 * @property modal
-	 * @type Object
-	 */
-	modal: service('modal'),
-
-	/**
-	 * HTML attributes bindings.
-	 *
-	 * @property attributeBindings
-	 * @type Array
-	 */
-	attributeBindings: ['data-modal-show', 'data-id'],
-
-	/**
-	 * HTML role.
-	 *
-	 * @property ariaRole
-	 * @type String
-	 */
-	ariaRole: 'dialog',
-
-	/**
-	 * Modal is visible/hidden.
-	 *
-	 * @property visible
-	 * @type Boolean
-	 */
-	visible: false,
-
-	/**
-	 * `data-id` attribute of wrapper element
-	 *
-	 * @property data-id
-	 * @type {String}
-	 */
-	'data-id': computed('model.fullname', function() {
-		return camelize(this.get('model.fullname'));
-	}),
-
-	/**
-	 * Modal is visible/hidden. This property is read from CSS.
-	 *
-	 * @property data-modal-show
-	 * @type Boolean
-	 */
-	'data-modal-show': computed('visible', function() {
-		return String(this.get('visible'));
-	}),
-
-	/**
-	 * On did insert element, set element as visible and set data-id.
-	 *
-	 * @event onDidInsertElement
-	 */
-	onDidInsertElement: on('didInsertElement', function() {
-		const scheduler = this.get('scheduler');
-
-		run.next(scheduler.scheduleOnce.bind(scheduler, this, '_open'));
-	}),
-
-	/**
-	 * Resolve current promise and close modal.
-	 *
-	 * @method resolve
-	 */
-	resolve(data, label = `Component '${this.get('model.fullname')}': fulfillment`) {
-		this.get('model.deferred').resolve(data, label);
-	},
-
-	/**
-	 * Reject current promise and close modal.
-	 *
-	 * @method reject
-	 */
-	reject(data, label = `Component '${this.get('model.fullname')}': rejection`) {
-		this.get('model.deferred').reject(data, label);
-	},
-
-	/**
-	 * Action to know when modal is fully opened.
-	 *
-	 * @method didOpen
-	 */
-	didOpen() {},
-
-	/**
-	 * Safe call to didOpen method.
-	 *
-	 * @method _safeDidOpen
-	 */
+export default class ModalComponent extends Component {
+	@service scheduler;
+
+	@service modal;
+
+	attributeBindings = ['data-modal-show', 'data-id'];
+
+	ariaRole = 'dialog';
+
+	visible = false;
+
+	@computed('model.fullname')
+	get 'data-id'() {
+		return camelize(this.model.fullname);
+	}
+
+	@computed('visible')
+	get 'data-modal-show'() {
+		return String(this.visible);
+	}
+
+	init() {
+		super.init(...arguments);
+
+		// Prevent creating an uncaught promise.
+		this.model.promise.catch(() => {}).finally(
+			this._close.bind(this),
+			`Component '${this.model.fullname}': close modal`
+		);
+	}
+
+	didInsertElement() {
+		super.didInsertElement(...arguments);
+
+		run.next(this.scheduler, 'scheduleOnce', this, '_open');
+	}
+
+	didOpen() {}
+
 	_safeDidOpen() {
 		if (this.isDestroyed) {
 			return;
 		}
 
 		this.didOpen();
-	},
-
-	/**
-	 * Turn on visibility and send didOpen event.
-	 *
-	 * @method _open
-	 * @private
-	 */
+	}
+
 	_open() {
+		// istanbul ignore if: lifecycle check.
 		if (this.isDestroyed) {
 			return;
 		}
 
-		const scheduler = this.get('scheduler');
+		const scheduler = this.scheduler;
 		const element = this.element;
 
 		this.set('visible', true);
@@ -146,20 +69,15 @@ export default Component.extend({
 		} else {
 			this.didOpen();
 		}
-	},
-
-	/**
-	 * Set modal as not visible and remove modal from array later.
-	 *
-	 * @method _close
-	 * @private
-	 */
+	}
+
 	_close() {
+		// istanbul ignore if: lifecycle check.
 		if (this.isDestroyed) {
 			return;
 		}
 
-		const scheduler = this.get('scheduler');
+		const scheduler = this.scheduler;
 		const element = this.element;
 
 		// Close modal.
@@ -171,64 +89,24 @@ export default Component.extend({
 		} else {
 			this._remove();
 		}
-	},
-
-	/**
-	 * Remove itself from service.
-	 *
-	 * @method _remove
-	 * @private
-	 */
+	}
+
 	_remove() {
+		// istanbul ignore if: lifecycle check.
 		if (this.isDestroyed) {
 			return;
 		}
 
-		this.get('modal.content').removeObject(this.get('model'));
-	},
-
-	/**
-	 * When the promise has been settled, close the view.
-	 *
-	 * @method hasBeenSettled
-	 * @private
-	 */
-	_hasBeenSettled: on('init', function() {
-		// Prevent triggering Ember.onerror on promise resolution.
-		this.get('model.promise').catch((e) => {
-			if (e instanceof Error) {
-				return RSVP.reject(e, `Component '${this.get('model.fullname')}': bubble error`);
-			}
-
-			// Ignore rejections due to not being real errors here.
-			return e;
-		}, `Component '${this.get('model.fullname')}': catch real errors or ignore`).finally(
-			this._close.bind(this),
-			`Component '${this.get('model.fullname')}': close modal`
-		);
-	}),
-
-	actions: {
-
-		/**
-		 * Action to resolve the underlying modal promise directly from the
-		 * template, using the passed arguments as resolution values
-		 *
-		 * @method resolve
-		 */
-		resolve() {
-			this.resolve(...arguments);
-		},
-
-		/**
-		 * Action to reject the underlying modal promise directly from the
-		 * template, using the passed arguments as rejection values
-		 *
-		 * @method reject
-		 */
-		reject() {
-			this.reject(...arguments);
-		}
+		this.modal.content.removeObject(this.model);
+	}
+
+	@action
+	resolve(data, label = `Component '${this.model.fullname}': fulfillment`) {
+		this.model.deferred.resolve(data, label);
+	}
 
+	@action
+	reject(data, label = `Component '${this.model.fullname}': rejection`) {
+		this.model.deferred.reject(data, label);
 	}
-});
+}