use new modules api

.eslintrc.js

@@ -8,6 +8,10 @@ module.exports = {
   env: {
     browser: true
   },
+  plugins: [
+    'ember'
+  ],
   rules: {
+    'ember/new-module-imports': 'error'
   }
 };

addon/components/basic-dialog.js

@@ -1,13 +1,17 @@
-import Ember from 'ember';
+import { on } from '@ember/object/evented';
+import Component from '@ember/component';
+import $ from 'jquery';
+import { computed } from '@ember/object';
+import { guidFor } from '@ember/object/internals';
+import { isEmpty } from '@ember/utils';
+import { inject as service } from '@ember/service';
 import layout from '../templates/components/basic-dialog';
 
-const { $, computed, guidFor, inject, isEmpty } = Ember;
-
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: '',
   layout,
 
-  modalService: inject.service('modal-dialog'),
+  modalService: service('modal-dialog'),
   destinationElementId: computed.oneWay('modalService.destinationElementId'),
 
   variantWrapperClass: 'emd-static',
@@ -50,9 +54,9 @@ export default Ember.Component.extend({
     return /iPad|iPhone|iPod/.test(navigator.userAgent);
   }),
 
-  makeOverlayClickableOnIOS: Ember.on('didInsertElement', function() {
+  makeOverlayClickableOnIOS: on('didInsertElement', function() {
     if (this.get('isIOS')) {
-      Ember.$('div[data-ember-modal-dialog-overlay]').css('cursor', 'pointer');
+      $('div[data-ember-modal-dialog-overlay]').css('cursor', 'pointer');
     }
   }),
 

addon/components/deprecated-tether-dialog.js

@@ -1,11 +1,13 @@
-import Ember from 'ember';
+import $ from 'jquery';
+import { on } from '@ember/object/evented';
+import { computed } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+import { dasherize } from '@ember/string';
+import { inject as service } from '@ember/service';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/deprecated-tether-dialog';
 import { deprecate } from 'ember-deprecations';
 
-const { dasherize } = Ember.String;
-const { computed, inject, isEmpty } = Ember;
-
 export default BasicDialog.extend({
   layout,
   init() {
@@ -16,7 +18,7 @@ export default BasicDialog.extend({
       { id: 'ember-modal-dialog.tether-dialog', until: '3.0.0' }
     );
   },
-  modalService: inject.service('modal-dialog'),
+  modalService: service('modal-dialog'),
   destinationElementId: computed.oneWay('modalService.destinationElementId'),
 
   // onClose - set this from templates
@@ -112,9 +114,9 @@ export default BasicDialog.extend({
     return /iPad|iPhone|iPod/.test(navigator.userAgent);
   }),
 
-  makeOverlayClickableOnIOS: Ember.on('didInsertElement', function() {
+  makeOverlayClickableOnIOS: on('didInsertElement', function() {
     if (this.get('isIOS') && this.get('hasOverlay')) {
-      Ember.$('div[data-emd-overlay]').css('cursor', 'pointer');
+      $('div[data-emd-overlay]').css('cursor', 'pointer');
     }
   }),
 

addon/components/in-place-dialog.js

@@ -1,14 +1,14 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { computed } from '@ember/object';
 import layout from '../templates/components/in-place-dialog';
 
-const { computed } = Ember;
 const computedJoin = function(prop) {
   return computed(prop, function() {
     return this.get(prop).join(' ');
   });
 };
 
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: '',
   layout,
 

addon/components/liquid-tether-dialog.js

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
+import { dasherize } from '@ember/string';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/liquid-tether-dialog';
 
-const { dasherize } = Ember.String;
-const { computed } = Ember;
-
 export default BasicDialog.extend({
   layout,
 

addon/components/modal-dialog-overlay.js

@@ -1,7 +1,7 @@
-import Ember from 'ember';
-import { deprecate } from 'ember-deprecations';
+import Component from '@ember/component';
+import { deprecate } from '@ember/debug';
 
-export default Ember.Component.extend({
+export default Component.extend({
   init(){
     this._super(...arguments);
     deprecate(

addon/components/modal-dialog.js

@@ -1,9 +1,10 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { dasherize } from '@ember/string';
+import { computed } from '@ember/object';
+import { isNone, isEmpty } from '@ember/utils';
+import { inject as service } from '@ember/service';
 import layout from '../templates/components/modal-dialog';
-const { computed, inject, isEmpty, isNone } = Ember;
-const { dasherize } = Ember.String;
-import { deprecate } from 'ember-deprecations';
-import { warn } from 'ember-debug';
+import { deprecate, warn } from '@ember/debug';
 import { DEBUG } from '@glimmer/env';
 
 const VALID_OVERLAY_POSITIONS = ['parent', 'sibling'];
@@ -24,10 +25,10 @@ function deprecateImplicitAnimatableWithLiquidWormholePresent() {
   );
 }
 
-export default Ember.Component.extend({
+export default Component.extend({
   tagName: '',
   layout,
-  modalService: inject.service('modal-dialog'),
+  modalService: service('modal-dialog'),
   destinationElementId: computed.oneWay('modalService.destinationElementId'),
   modalDialogComponentName: computed('renderInPlace', 'tetherTarget', 'animatable', 'hasLiquidWormhole', 'hasLiquidTether', function(){
     let tetherTarget = this.get('tetherTarget');

addon/components/positioned-container.js

@@ -1,12 +1,15 @@
-import Ember from 'ember';
-
-const { computed, observer, on } = Ember;
-const { capitalize } = Ember.String;
+import { assert } from '@ember/debug';
+import $ from 'jquery';
+import { typeOf } from '@ember/utils';
+import Component from '@ember/component';
+import { capitalize } from '@ember/string';
+import { observer, computed } from '@ember/object';
+import { on } from '@ember/object/evented';
 const SUPPORTED_TARGET_ATTACHMENTS = [
   'top', 'right', 'bottom', 'left', 'center', 'elementCenter', 'none'
 ];
 
-export default Ember.Component.extend({
+export default Component.extend({
 
   // target - element selector, element, or Ember View
   // targetAttachment - top, right, bottom, left, center, or none
@@ -49,27 +52,27 @@ export default Ember.Component.extend({
       return null;
     }
 
-    if (Ember.typeOf(target) === 'string') {
+    if (typeOf(target) === 'string') {
       const targetSelector = target;
-      const wrappedElement = Ember.$(targetSelector).eq(0);
-      Ember.assert(`No element found for modal-dialog's target selector '${targetSelector}'.`, wrappedElement);
+      const wrappedElement = $(targetSelector).eq(0);
+      assert(`No element found for modal-dialog's target selector '${targetSelector}'.`, wrappedElement);
       return wrappedElement;
     }
 
     // passed an ember view or component
     if (target.element) {
-      return Ember.$(target.element);
+      return $(target.element);
     }
 
     // passed an element directly
-    return Ember.$(target);
+    return $(target);
   },
 
   updateTargetAttachment() {
     let targetAttachment = this.get('targetAttachment');
     // Convert tether-styled values like 'middle right' to 'right'
     targetAttachment = targetAttachment.split(' ').slice(-1)[0];
-    Ember.assert(
+    assert(
       `Positioned container supports targetAttachments of ${SUPPORTED_TARGET_ATTACHMENTS.join(', ')}`,
       SUPPORTED_TARGET_ATTACHMENTS.indexOf(targetAttachment) > -1
     );
@@ -90,46 +93,46 @@ export default Ember.Component.extend({
   },
 
   alignLeft(targetAttachmentElement) {
-    Ember.assert('Left targetAttachment requires a target', targetAttachmentElement.length > 0);
+    assert('Left targetAttachment requires a target', targetAttachmentElement.length > 0);
 
     const elementWidth = this.$().outerWidth();
     const originOffset = targetAttachmentElement.offset();
-    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const originOffsetTop = originOffset.top - $(window).scrollTop();
 
     this.$().css('left', originOffset.left - elementWidth)
       .css('top', originOffsetTop);
   },
 
   alignRight(targetAttachmentElement) {
-    Ember.assert('Right targetAttachment requires a target', targetAttachmentElement.length > 0);
+    assert('Right targetAttachment requires a target', targetAttachmentElement.length > 0);
 
     const targetWidth = targetAttachmentElement.outerWidth();
     const originOffset = targetAttachmentElement.offset();
-    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const originOffsetTop = originOffset.top - $(window).scrollTop();
 
     this.$().css('left', originOffset.left + targetWidth)
       .css('top', originOffsetTop);
   },
 
   alignTop(targetAttachmentElement) {
-    Ember.assert('Top targetAttachment requires a target', targetAttachmentElement.length > 0);
+    assert('Top targetAttachment requires a target', targetAttachmentElement.length > 0);
 
     const elementWidth = this.$().outerWidth();
     const elementHeight = this.$().outerHeight();
     const originOffset = targetAttachmentElement.offset();
-    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const originOffsetTop = originOffset.top - $(window).scrollTop();
     const targetWidth = targetAttachmentElement.outerWidth();
 
     this.$().css('left', (originOffset.left + targetWidth / 2 - elementWidth / 2))
       .css('top', originOffsetTop - elementHeight);
   },
 
   alignBottom(targetAttachmentElement) {
-    Ember.assert('Bottom targetAttachment requires a target', targetAttachmentElement.length > 0);
+    assert('Bottom targetAttachment requires a target', targetAttachmentElement.length > 0);
 
     const elementWidth = this.$().outerWidth();
     const originOffset = targetAttachmentElement.offset();
-    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const originOffsetTop = originOffset.top - $(window).scrollTop();
     const targetWidth = targetAttachmentElement.outerWidth();
     const targetHeight = targetAttachmentElement.outerHeight();
 
@@ -138,11 +141,11 @@ export default Ember.Component.extend({
   },
 
   alignElementCenter(targetAttachmentElement) {
-    Ember.assert('ElementCenter targetAttachment requires a target', targetAttachmentElement.length > 0);
+    assert('ElementCenter targetAttachment requires a target', targetAttachmentElement.length > 0);
 
     const elementWidth = this.$().outerWidth();
     const originOffset = targetAttachmentElement.offset();
-    const originOffsetTop = originOffset.top - Ember.$(window).scrollTop();
+    const originOffsetTop = originOffset.top - $(window).scrollTop();
     const targetWidth = targetAttachmentElement.outerWidth();
     const targetHeight = targetAttachmentElement.outerHeight();
     const elementHeight = this.$().outerHeight();

addon/components/tether-dialog.js

@@ -1,10 +1,8 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
+import { dasherize } from '@ember/string';
 import BasicDialog from './basic-dialog';
 import layout from '../templates/components/tether-dialog';
 
-const { dasherize } = Ember.String;
-const { computed } = Ember;
-
 export default BasicDialog.extend({
   layout,
 

app/services/modal-dialog.js

@@ -1,8 +1,7 @@
-import Ember from 'ember';
+import { computed } from '@ember/object';
+import Service from '@ember/service';
 import ENV from '../config/environment';
 
-const { computed, Service } = Ember;
-
 function computedFromConfig(prop) {
   return computed(function(){
     return ENV['ember-modal-dialog'] && ENV['ember-modal-dialog'][prop];

package.json

@@ -19,7 +19,7 @@
     "test": "ember try:each"
   },
   "dependencies": {
-    "ember-cli-babel": "^6.1.0",
+    "ember-cli-babel": "^6.8.2",
     "ember-cli-htmlbars": "^2.0.1",
     "ember-ignore-children-helper": "^1.0.0",
     "ember-wormhole": "^0.5.1"
@@ -49,6 +49,7 @@
     "ember-source": "~2.13.0",
     "ember-tether": "^1.0.0-beta.0",
     "ember-truth-helpers": "^1.3.0",
+    "eslint-plugin-ember": "^4.3.0",
     "liquid-fire": "^0.27.3",
     "liquid-tether": "^2.0.4",
     "liquid-wormhole": "^2.0.5",

tests/acceptance/animatable-test.js

@@ -1,4 +1,5 @@
-import Ember from 'ember';
+import $ from 'jquery';
+import { run } from '@ember/runloop';
 import { module, test } from 'qunit';
 import startApp from '../helpers/start-app';
 
@@ -16,7 +17,7 @@ module('Acceptance: modal-dialog | animatable', {
   },
 
   afterEach() {
-    Ember.run(application, 'destroy');
+    run(application, 'destroy');
   }
 });
 
@@ -58,8 +59,8 @@ test('modal with custom styles', async function(assert) {
     dialogText: 'Custom Styles',
     closeSelector: overlaySelector,
     whileOpen() {
-      assert.ok(Ember.$(overlaySelector).hasClass('custom-styles-overlay'), 'has provided overlayClass');
-      assert.ok(Ember.$(dialogSelector).hasClass('custom-styles-modal-container'), 'has provided containerClass');
+      assert.ok($(overlaySelector).hasClass('custom-styles-overlay'), 'has provided overlayClass');
+      assert.ok($(dialogSelector).hasClass('custom-styles-modal-container'), 'has provided containerClass');
     }
   });
   await assert.dialogOpensAndCloses({
@@ -75,7 +76,7 @@ test('subclassed modal', async function(assert) {
     dialogText: 'Via Subclass',
     closeSelector: overlaySelector,
     whileOpen() {
-      assert.ok(Ember.$(dialogSelector).hasClass('my-cool-modal'), 'has provided containerClassNames');
+      assert.ok($(dialogSelector).hasClass('my-cool-modal'), 'has provided containerClassNames');
     }
   });
 });