Remove ember-classic-decorator

.eslintrc.js

@@ -21,10 +21,13 @@ module.exports = {
   },
   rules: {
     'no-setter-return': 'off',
+    'ember/classic-decorator-no-classic-methods': 'warn',
+    'ember/classic-decorator-hooks': 'warn',
     'ember/no-actions-hash': 'warn',
     'ember/no-classic-classes': 'warn',
     'ember/no-classic-components': 'warn',
     'ember/no-component-lifecycle-hooks': 'warn',
+    'ember/no-computed-properties-in-native-classes': 'warn',
     'ember/no-get': 'warn',
     'ember/no-observers': 'warn',
     'ember/require-computed-macros': 'warn',

README.md

@@ -304,7 +304,7 @@ export default ModalDialog.extend({
 
   _initEscListener() {
     const closeOnEscapeKey = (ev) => {
-      if (ev.keyCode === ESC_KEY) { this.get('onClose')(); }
+      if (ev.keyCode === ESC_KEY) { get(this, 'onClose')(); }
     };
 
     Ember.$('body').on('keyup.modal-dialog', closeOnEscapeKey);
@@ -324,11 +324,11 @@ export default ModalDialog.extend(EmberKeyboardMixin, {
   init() {
     this._super(...arguments);
 
-    this.set('keyboardActivated', true);
+    set(this, 'keyboardActivated', true);
   },
 
   closeOnEsc: on(keyDown('Escape'), function() {
-    this.get('onClose')();
+    get(this, 'onClose')();
   })
 });
 ```

addon/components/basic-dialog.js

@@ -1,13 +1,11 @@
-import classic from 'ember-classic-decorator';
 import { tagName, layout as templateLayout } from '@ember-decorators/component';
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { isEmpty } from '@ember/utils';
 import layout from '../templates/components/basic-dialog';
 import { dasherize } from '@ember/string';
 
-@classic
 @tagName('')
 @templateLayout(layout)
 export default class BasicDialog extends Component {
@@ -27,7 +25,7 @@ export default class BasicDialog extends Component {
   init() {
     super.init(...arguments);
     if (!this.destinationElementId) {
-      this.set('destinationElementId', this.modalService.destinationElementId);
+      set(this, 'destinationElementId', this.modalService.destinationElementId);
     }
   }
 

addon/components/in-place-dialog.js

@@ -1,9 +1,7 @@
-import classic from 'ember-classic-decorator';
 import { tagName, layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from '../templates/components/in-place-dialog';
 
-@classic
 @tagName('')
 @templateLayout(layout)
 export default class InPlaceDialog extends Component {
@@ -20,6 +18,6 @@ export default class InPlaceDialog extends Component {
   }
 
   get containerClassNamesString() {
-    return this.containerClassNames.join(' ');
+    return this.containerClassNames?.join(' ') ?? '';
   }
 }

addon/components/liquid-dialog.js

@@ -1,9 +1,7 @@
-import classic from 'ember-classic-decorator';
 import { layout as templateLayout } from '@ember-decorators/component';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/liquid-dialog';
 
-@classic
 @templateLayout(layout)
 export default class LiquidDialog extends BasicDialog {
   hasOverlay = true;

addon/components/liquid-tether-dialog.js

@@ -1,11 +1,10 @@
-import classic from 'ember-classic-decorator';
+/* eslint-disable ember/no-computed-properties-in-native-classes */
 import { layout as templateLayout } from '@ember-decorators/component';
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
 import { dasherize } from '@ember/string';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/liquid-tether-dialog';
 
-@classic
 @templateLayout(layout)
 export default class LiquidTetherDialog extends BasicDialog {
   @computed('targetAttachment')
@@ -24,10 +23,10 @@ export default class LiquidTetherDialog extends BasicDialog {
   didReceiveAttrs() {
     super.didReceiveAttrs(...arguments);
     if (!this.attachment) {
-      this.set('attachment', 'middle center');
+      set(this, 'attachment', 'middle center');
     }
     if (!this.targetAttachment) {
-      this.set('targetAttachment', 'middle center');
+      set(this, 'targetAttachment', 'middle center');
     }
   }
 

addon/components/modal-dialog.js

@@ -1,6 +1,5 @@
-import classic from 'ember-classic-decorator';
 import { tagName, layout as templateLayout } from '@ember-decorators/component';
-import { action, computed } from '@ember/object';
+import { action, computed, set } from '@ember/object';
 import { inject as service } from '@ember/service';
 import { readOnly, oneWay } from '@ember/object/computed';
 import Component from '@ember/component';
@@ -12,7 +11,6 @@ import { DEBUG } from '@glimmer/env';
 
 const VALID_OVERLAY_POSITIONS = ['parent', 'sibling'];
 
-@classic
 @tagName('')
 @templateLayout(layout)
 export default class ModalDialog extends Component {
@@ -23,8 +21,9 @@ export default class ModalDialog extends Component {
 
   init() {
     super.init(...arguments);
+
     if (!this.destinationElementId) {
-      this.set('destinationElementId', this.modalService.destinationElementId);
+      set(this, 'destinationElementId', this.modalService.destinationElementId);
     }
   }
 

addon/components/tether-dialog.js

@@ -1,11 +1,9 @@
-import classic from 'ember-classic-decorator';
 import { layout as templateLayout } from '@ember-decorators/component';
-import { computed } from '@ember/object';
+import { computed, set } from '@ember/object';
 import { dasherize } from '@ember/string';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/tether-dialog';
 
-@classic
 @templateLayout(layout)
 export default class TetherDialog extends BasicDialog {
   init() {
@@ -50,10 +48,10 @@ export default class TetherDialog extends BasicDialog {
   // targetModifier - passed in
   _ensureAttachments() {
     if (!this.attachment) {
-      this.set('attachment', 'middle center');
+      set(this, 'attachment', 'middle center');
     }
     if (!this.targetAttachment) {
-      this.set('targetAttachment', 'middle center');
+      set(this, 'targetAttachment', 'middle center');
     }
   }
 }

package.json

@@ -28,7 +28,6 @@
     "test:ember-compatibility": "ember try:each"
   },
   "dependencies": {
-    "ember-classic-decorator": "^2.0.0",
     "ember-cli-babel": "^7.26.6",
     "ember-cli-htmlbars": "^5.7.1",
     "ember-cli-version-checker": "^2.1.0",

tests/dummy/app/components/component-that-uses-modal-dialog.js

@@ -1,18 +1,16 @@
-import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
-import { action } from '@ember/object';
+import { action, set } from '@ember/object';
 
-@classic
 export default class ComponentThatUsesModalDialog extends Component {
   isShowingModalDialog = false;
 
   @action
   openModalDialog() {
-    this.set('isShowingModalDialog', true);
+    set(this, 'isShowingModalDialog', true);
   }
 
   @action
   closeModalDialog() {
-    this.set('isShowingModalDialog', false);
+    set(this, 'isShowingModalDialog', false);
   }
 }

tests/dummy/app/components/my-cool-modal-dialog.js

@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET subclass
-import classic from 'ember-classic-decorator';
 import ModalDialogComponent from 'ember-modal-dialog/components/modal-dialog';
 
-@classic
 export default class MyCoolModalDialog extends ModalDialogComponent {
   translucentOverlay = true; // override default of false
   containerClassNames = ['my-cool-modal'];

tests/dummy/app/controllers/animatable.js

@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
 import Controller from '@ember/controller';
 import { set, action } from '@ember/object';
 
-@classic
 export default class AnimatableController extends Controller {
   isShowingBasic = false;
   isShowingTranslucent = false;

tests/dummy/app/controllers/index.js

@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
-import { action } from '@ember/object';
+import { action, set } from '@ember/object';
 import Controller from '@ember/controller';
 
-@classic
 export default class IndexController extends Controller {
   isShowingBasic = false;
   isShowingTranslucent = false;
@@ -42,8 +40,8 @@ export default class IndexController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -58,8 +56,8 @@ export default class IndexController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -82,16 +80,16 @@ export default class IndexController extends Controller {
 
   @action
   closeTargetSelector() {
-    this.set('isShowingTargetSelector', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetSelector', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 
   @action
   closeTargetElement() {
-    this.set('isShowingTargetElement', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetElement', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 
   @action

tests/dummy/app/controllers/tethered-animatable.js

@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
 import Controller from '@ember/controller';
 import { set, action } from '@ember/object';
 
-@classic
 export default class TetheredAnimatableController extends Controller {
   isShowingBasic = false;
   isShowingTranslucent = false;
@@ -78,8 +76,8 @@ export default class TetheredAnimatableController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -94,8 +92,8 @@ export default class TetheredAnimatableController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -125,24 +123,24 @@ export default class TetheredAnimatableController extends Controller {
   toggleElementCenterModal() {
     this.toggleProperty('isShowingElementCenterModal');
     if (this.isShowingElementCenterModal) {
-      this.set('targetAttachment', 'elementCenter');
-      this.set('exampleTargetAttachment', 'elementCenter');
-      this.set('exampleAttachment', 'elementCenter');
+      set(this, 'targetAttachment', 'elementCenter');
+      set(this, 'exampleTargetAttachment', 'elementCenter');
+      set(this, 'exampleAttachment', 'elementCenter');
     }
   }
 
   @action
   closeTargetSelector() {
-    this.set('isShowingTargetSelector', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetSelector', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 
   @action
   closeTargetElement() {
-    this.set('isShowingTargetElement', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetElement', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 
   @action

tests/dummy/app/controllers/tethered.js

@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
-import { action } from '@ember/object';
+import { action, set } from '@ember/object';
 import Controller from '@ember/controller';
 
-@classic
 export default class TetheredController extends Controller {
   isShowingTargetSelector = false;
   isShowingTargetElement = false;
@@ -31,8 +29,8 @@ export default class TetheredController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -47,8 +45,8 @@ export default class TetheredController extends Controller {
         this.exampleTargetAttachment
       );
       let newAttachment = this.nextAttachment(this.exampleAttachment);
-      this.set('exampleTargetAttachment', newTargetAttachment);
-      this.set('exampleAttachment', newAttachment);
+      set(this, 'exampleTargetAttachment', newTargetAttachment);
+      set(this, 'exampleAttachment', newAttachment);
       if (newTargetAttachment !== 'middle left') {
         return;
       }
@@ -58,15 +56,15 @@ export default class TetheredController extends Controller {
 
   @action
   closeTargetSelector() {
-    this.set('isShowingTargetSelector', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetSelector', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 
   @action
   closeTargetElement() {
-    this.set('isShowingTargetElement', false);
-    this.set('exampleTargetAttachment', 'middle left');
-    this.set('exampleAttachment', 'middle right');
+    set(this, 'isShowingTargetElement', false);
+    set(this, 'exampleTargetAttachment', 'middle left');
+    set(this, 'exampleAttachment', 'middle right');
   }
 }