Merge pull request #71 from yapplabs/ember-3.28

Update to ember 3.28 and address deprecations

Author: lukemelia

.eslintignore

@@ -13,6 +13,7 @@
 # misc
 /coverage/
 !.*
+.*/
 .eslintcache
 
 # ember-try

.eslintrc.js

@@ -24,21 +24,15 @@ module.exports = {
     // node files
     {
       files: [
-        '.eslintrc.js',
-        '.prettierrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'index.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'tests/dummy/config/**/*.js',
-      ],
-      excludedFiles: [
-        'addon/**',
-        'addon-test-support/**',
-        'app/**',
-        'tests/dummy/app/**',
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './index.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './tests/dummy/config/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -50,5 +44,10 @@ module.exports = {
       plugins: ['node'],
       extends: ['plugin:node/recommended'],
     },
+    {
+      // Test files:
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
   ],
 };

.npmignore

@@ -15,6 +15,8 @@
 /.eslintrc.js
 /.git/
 /.gitignore
+/.prettierignore
+/.prettierrc.js
 /.template-lintrc.js
 /.travis.yml
 /.watchmanconfig
@@ -24,6 +26,7 @@
 /ember-cli-build.js
 /testem.js
 /tests/
+/yarn-error.log
 /yarn.lock
 .gitkeep
 

.template-lintrc.js

@@ -1,5 +1,5 @@
 'use strict';
 
 module.exports = {
-  extends: 'octane',
+  extends: 'recommended',
 };

CONTRIBUTING.md

@@ -8,9 +8,8 @@
 
 ## Linting
 
-* `npm run lint:hbs`
-* `npm run lint:js`
-* `npm run lint:js -- --fix`
+* `yarn lint`
+* `yarn lint:fix`
 
 ## Running tests
 

README.md

@@ -7,9 +7,9 @@ This addon's current status is "opensource, but unpolished". It lacks tests, doc
 Compatibility
 ------------------------------------------------------------------------------
 
-* Ember.js v3.16 or above
-* Ember CLI v2.13 or above
-* Node.js v10 or above
+* Ember.js v3.24 or above
+* Ember CLI v3.24 or above
+* Node.js v12 or above
 
 
 Installation

addon/components/nav-stack/component.js

@@ -5,8 +5,6 @@ import { run, scheduleOnce } from '@ember/runloop';
 import { nextTick } from 'ember-nav-stack/utils/animation';
 import BackSwipeRecognizer from 'ember-nav-stack/utils/back-swipe-recognizer';
 import Hammer from 'hammerjs';
-// import { argument } from '@ember-decorators/argument';
-// import { Action, optional } from '@ember-decorators/argument/types';
 import { Spring } from 'wobble';
 import { getOwner } from '@ember/application';
 import { DEBUG } from '@glimmer/env';

addon/components/nav-stack/template.hbs

@@ -22,11 +22,11 @@
   <div class="NavStack-header">
     {{#if this.parentItemHeaderComponent}}
       <div class="NavStack-headerContainer NavStack-parentItemHeaderContainer">
-        {{component this.parentItemHeaderComponent class="NavStack-headerComponent"}}
+        {{component this.parentItemHeaderComponent class="NavStack-headerComponent" back=@back}}
       </div>
     {{/if}}
     <div class="NavStack-headerContainer NavStack-currentHeaderContainer">
-      {{component this.headerComponent class="NavStack-headerComponent"}}
+      {{component this.headerComponent class="NavStack-headerComponent" back=@back}}
     </div>
   </div>
   {{#if this.hasFooter}}

addon/mixins/stackable-route.js addon/routes/stackable-route.js

@@ -1,6 +1,6 @@
-/* eslint-disable ember/no-new-mixins */
-import Mixin from '@ember/object/mixin';
-import { computed } from '@ember/object';
+import Route from '@ember/routing/route';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
 
 export function getParentRoute(router, route) {
   // eslint-disable-next-line ember/no-private-routing-service
@@ -17,40 +17,45 @@ export function getParentRoute(router, route) {
   }
 }
 
-export default Mixin.create({
-  templateName: 'stackable',
+export default class StackableRoute extends Route {
+  @service router;
+  templateName = 'stackable';
+
   getRouteComponent(/* model */) {
     return `routable-components/${(
       this.routableTemplateName || this.routeName
     ).replace(/\./g, '/')}`;
-  },
+  }
+
   getHeaderComponent(model) {
     return `${this.getRouteComponent(model)}/header`;
-  },
-  layerIndex: computed('_router', 'newLayer', function () {
+  }
+
+  get layerIndex() {
     let parentRoute = getParentRoute(this._router, this);
     let parentRouteLayerIndex = parentRoute.get('layerIndex');
     let currentLayerIndex = parentRouteLayerIndex || 0;
     if (this.newLayer === true) {
       return currentLayerIndex + 1;
     }
     return currentLayerIndex;
-  }),
+  }
+
   setupController(controller, model) {
-    this._super(controller, model);
+    super.setupController(controller, model);
     controller.setProperties({
       layerIndex: this.layerIndex,
       routeComponent: this.getRouteComponent(model),
       headerComponent: this.getHeaderComponent(model),
       routeName: this.routeName,
     });
-  },
+  }
+
   getParentRouteName() {
     return getParentRoute(this._router, this).routeName;
-  },
-  actions: {
-    back() {
-      this.transitionTo(this.getParentRouteName());
-    },
-  },
-});
+  }
+
+  @action back() {
+    this.router.transitionTo(this.getParentRouteName());
+  }
+}

addon/services/nav-stacks.js

@@ -1,6 +1,6 @@
 import { A } from '@ember/array';
 import Service from '@ember/service';
-import { run, next } from '@ember/runloop';
+import { next, scheduleOnce } from '@ember/runloop';
 import EmberObject from '@ember/object';
 import { Promise as EmberPromise } from 'rsvp';
 import { buildWaiter } from '@ember/test-waiters';
@@ -65,6 +65,10 @@ export default class NavStacks extends Service {
     return this._runningTransitions;
   }
 
+  isRunningTransitions() {
+    return this._runningTransitions > 0;
+  }
+
   waitUntilTransitionIdle() {
     if (this._waitingPromise) {
       return this._waitingPromise;
@@ -89,7 +93,7 @@ export default class NavStacks extends Service {
   }
 
   _schedule() {
-    run.scheduleOnce('afterRender', this, this._process);
+    scheduleOnce('afterRender', this, this._process);
   }
 
   _process() {
@@ -109,7 +113,7 @@ export default class NavStacks extends Service {
     }
     set(this, 'stacks', EmberObject.create(newStacks));
     if (this.isInitialRender === true) {
-      run.next(this, this._clearIsInitialRender);
+      next(this, this._clearIsInitialRender);
     }
     this._listeners.invoke('stackItemsDidChange');
     this.didUpdate();

addon/utils/animation.js

@@ -1,7 +1,7 @@
 // Thanks ember-css-transitions
 // https://github.com/peec/ember-css-transitions/blob/master/addon/mixins/transition-mixin.js
 
-import { run } from '@ember/runloop';
+import { later, schedule } from '@ember/runloop';
 import RSVP from 'rsvp';
 import Ember from 'ember';
 
@@ -20,7 +20,7 @@ const TICK = 17;
  */
 function rAF(cb) {
   if (Ember.testing || !window.requestAnimationFrame) {
-    return run.later(cb, TICK);
+    return later(cb, TICK);
   } else {
     return window.requestAnimationFrame(cb);
   }
@@ -33,7 +33,7 @@ function rAF(cb) {
  */
 export function nextTick() {
   return new RSVP.Promise((resolve) => {
-    run.schedule('afterRender', () => {
+    schedule('afterRender', () => {
       rAF(() => {
         resolve();
       });

app/templates/stackable.hbs

@@ -1,7 +1,8 @@
-{{to-nav-stack
-    layer=layerIndex
-    item=(component routeComponent model=model controller=this)
-    header=(component headerComponent model=model controller=this)
-}}
+<ToNavStack
+  @layer={{this.layerIndex}}
+  @item={{component this.routeComponent model=this.model controller=this}}
+  @header={{component this.headerComponent model=this.model controller=this}}
+/>
+
 
 {{outlet}}

config/ember-try.js

@@ -1,23 +1,24 @@
 'use strict';
 
 const getChannelURL = require('ember-source-channel-url');
+const { embroiderSafe, embroiderOptimized } = require('@embroider/test-setup');
 
 module.exports = async function () {
   return {
     scenarios: [
       {
-        name: 'ember-lts-3.16',
+        name: 'ember-lts-3.24',
         npm: {
           devDependencies: {
-            'ember-source': '~3.16.0',
+            'ember-source': '~3.24.3',
           },
         },
       },
       {
-        name: 'ember-lts-3.20',
+        name: 'ember-lts-3.28',
         npm: {
           devDependencies: {
-            'ember-source': '~3.20.5',
+            'ember-source': '~3.28.0',
           },
         },
       },
@@ -86,11 +87,16 @@ module.exports = async function () {
           }),
         },
         npm: {
+          devDependencies: {
+            'ember-source': '~3.28.0',
+          },
           ember: {
             edition: 'classic',
           },
         },
       },
+      embroiderSafe(),
+      embroiderOptimized(),
     ],
   };
 };

ember-cli-build.js

@@ -14,5 +14,12 @@ module.exports = function (defaults) {
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
 
-  return app.toTree();
+  const { maybeEmbroider } = require('@embroider/test-setup');
+  return maybeEmbroider(app, {
+    skipBabel: [
+      {
+        package: 'qunit',
+      },
+    ],
+  });
 };

package.json

@@ -17,8 +17,9 @@
   },
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel 'lint:!(fix)'",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
     "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:hbs": "ember-template-lint .",
     "lint:hbs:fix": "ember-template-lint . --fix",
     "lint:js": "eslint . --cache",
     "release": "release-it",
@@ -44,13 +45,14 @@
   },
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
-    "@ember/test-helpers": "^2.4.0",
+    "@ember/test-helpers": "^2.6.0",
     "@ember/test-waiters": "^3.0.2",
+    "@embroider/test-setup": "^0.48.1",
     "@glimmer/component": "^1.1.2",
     "@glimmer/tracking": "^1.1.2",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.24.0",
+    "ember-cli": "~3.28.6",
     "ember-cli-dependency-checker": "^3.3.2",
     "ember-cli-deploy": "^2.0.0",
     "ember-cli-deploy-build": "^3.0.0",
@@ -67,17 +69,18 @@
     "ember-page-title": "^8.0.0",
     "ember-qunit": "^5.1.5",
     "ember-resolver": "^11.0.1",
-    "ember-route-action-helper": "^2.0.8",
+    "ember-set-helper": "^2.0.1",
     "ember-simulant-test-helpers": "^0.3.2",
-    "ember-source": "~3.24.0",
+    "ember-source": "~3.28.8",
     "ember-source-channel-url": "^3.0.0",
-    "ember-template-lint": "^5.11.2",
+    "ember-template-lint": "^5.13.0",
     "ember-try": "^3.0.0",
-    "eslint": "^7.26.0",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-ember": "^10.4.2",
+    "eslint-plugin-ember": "^10.5.8",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-qunit": "^6.2.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^3.0.2",
@@ -88,7 +91,7 @@
     "sass": "^1.66.1"
   },
   "engines": {
-    "node": ">= 14"
+    "node": "12.* || 14.* || >= 16"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"

tests/dummy/app/components/clickable-pane/template.hbs

@@ -1,4 +1,5 @@
-<div class="ClickablePane" onclick={{action (mut this.clicked) true}}>
+{{!-- template-lint-disable no-invalid-interactive --}}
+<div class="ClickablePane" onclick={{set this 'clicked' true}}>
   {{#if this.clicked}}
     clicked
   {{else}}