Legacy: Downgrade native class to Ember.Object

README.md

@@ -6,7 +6,7 @@ The better way to handle modals in your Ember.js apps.
 
 ## Compatibility
 
-- Ember.js v3.4 or above
+- Ember.js v2.18 or above
 - Ember CLI v2.13 or above
 - Node.js v12, v14 or above
 

addon/modal.js

@@ -1,5 +1,6 @@
 // eslint-disable-next-line ember/no-computed-properties-in-native-classes
-import { computed, set } from '@ember/object';
+import EmberObject, { computed, set } from '@ember/object';
+import { alias, notEmpty } from '@ember/object/computed';
 import { waitForPromise } from '@ember/test-waiters';
 
 import { defer } from 'rsvp';
@@ -19,40 +20,47 @@ import { defer } from 'rsvp';
  * @method close - closes the modal
  * @method then - resolves when the modal is closed
  */
-export default class Modal {
-  constructor(service, name, data, options = {}) {
-    this._service = service;
-    this._name = name;
-    this._data = data;
-    this._options = {
-      className: '',
-      onAnimationModalOutEnd: undefined,
-      ...options,
-    };
-    this._result = undefined;
-    this._deferred = defer();
-    this._deferredOutAnimation = undefined;
-    this._componentInstance = undefined;
-  }
+export default EmberObject.extend({
+  _service: null,
+  _name: null,
+  _data: null,
+  _options: null,
+  _result: undefined,
+  _deferred: null,
+  _deferredOutAnimation: undefined,
+  _componentInstance: undefined,
+
+  init() {
+    this._super(...arguments);
+    this.set('_deferred', defer());
+  },
 
-  get result() {
-    return this._result;
-  }
+  data: alias('_data'),
+  name: alias('_name'),
+  result: alias('_result'),
+  service: alias('_service'),
+  isClosing: notEmpty('_deferredOutAnimation'),
 
-  @computed('_deferredOutAnimation')
-  get isClosing() {
-    return Boolean(this._deferredOutAnimation);
-  }
+  options: computed('_options', {
+    get() {
+      return this._options;
+    },
+    set(key, value) {
+      let options = { className: '', onAnimationModalOutEnd: undefined, ...(this._options ?? {}), ...(value ?? {}) };
+      this.set('_options', options);
+      return options;
+    },
+  }),
 
   close(result) {
     if (this._componentInstance) {
       this._componentInstance.closeModal(result);
     }
-  }
+  },
 
   then(onFulfilled, onRejected) {
     return this._deferred.promise.then(onFulfilled, onRejected);
-  }
+  },
 
   _resolve(result) {
     if (!this._deferredOutAnimation) {
@@ -61,12 +69,12 @@ export default class Modal {
         this._deferredOutAnimation.promise.then(() => this._options.onAnimationModalOutEnd()).catch(() => {});
       }
 
-      this._result = result;
+      this.set('_result', result);
       this._deferred.resolve(result);
 
       waitForPromise(this._deferredOutAnimation.promise);
     }
-  }
+  },
 
   _remove() {
     this._service._stack.removeObject(this);
@@ -80,5 +88,5 @@ export default class Modal {
     if (this._deferredOutAnimation) {
       this._deferredOutAnimation.resolve();
     }
-  }
-}
+  },
+});

addon/services/modals.js

@@ -30,7 +30,7 @@ export default Service.extend({
    * @returns {Modal}
    */
   open(name, data, options) {
-    let modal = new Modal(this, name, data, options);
+    let modal = Modal.create({ service: this, name, data, options });
 
     this._stack.pushObject(modal);
 

config/ember-try.js

@@ -6,12 +6,19 @@ module.exports = async function () {
   return {
     usePnpm: true,
     scenarios: [
+      {
+        name: 'ember-lts-2.18',
+        npm: {
+          devDependencies: {
+            'ember-source': '~2.18.0',
+          },
+        },
+      },
       {
         name: 'ember-lts-3.4',
         npm: {
           devDependencies: {
             'ember-source': '~3.4.0',
-            'ember-decorators-polyfill': '^1.1.5',
           },
         },
       },
@@ -20,7 +27,6 @@ module.exports = async function () {
         npm: {
           devDependencies: {
             'ember-source': '~3.8.0',
-            'ember-decorators-polyfill': '^1.1.5',
           },
         },
       },