Upgrade Ember CLI and blueprint to 3.22

.eslintrc.js

@@ -1,9 +1,14 @@
+'use strict';
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
   parserOptions: {
     ecmaVersion: 2018,
-    sourceType: 'module'
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true
+    }
   },
   plugins: [
     'ember'
@@ -45,9 +50,7 @@ module.exports = {
         node: true
       },
       plugins: ['node'],
-      rules: Object.assign({}, require('eslint-plugin-node').configs.recommended.rules, {
-        // add your custom rules and overrides for node files here
-      })
+      extends: ['plugin:node/recommended']
     }
   ]
 };

.template-lintrc.js

@@ -1,5 +1,9 @@
 'use strict';
 
 module.exports = {
-  extends: 'recommended'
+  extends: 'octane',
+  rules: {
+    'no-triple-curlies': false,
+    'no-inline-styles': false
+  }
 };

.travis.yml

@@ -5,6 +5,8 @@ node_js:
   # so that your addon works for all apps
   - "10"
 
+dist: xenial
+
 addons:
   chrome: stable
 
@@ -23,43 +25,40 @@ branches:
     - /^v\d+\.\d+\.\d+/
 
 jobs:
-  fail_fast: true
+  fast_finish: true
   allow_failures:
     - env: EMBER_TRY_SCENARIO=ember-canary
     - env: EMBER_TRY_SCENARIO=embroider-tests
 
   include:
     # runs linting and tests with current locked deps
-
     - stage: "Tests"
       name: "Tests"
-      install:
-        - yarn install --non-interactive
       script:
-        - yarn lint:js
-        - yarn test
+        - yarn run lint
+        - yarn run test:ember
 
-    - name: "Floating Dependencies"
+    - stage: "Additional Tests"
+      name: "Floating Dependencies"
+      install:
+        - yarn install --no-lockfile --non-interactive
       script:
-        - yarn test
+        - yarn run test:ember
 
     # we recommend new addons test the current and previous LTS
     # as well as latest stable release (bonus points to beta/canary)
-    - stage: "Additional Tests"
-      env: EMBER_TRY_SCENARIO=ember-lts-3.16
+    - env: EMBER_TRY_SCENARIO=ember-lts-3.16
     - env: EMBER_TRY_SCENARIO=ember-lts-3.20
     - env: EMBER_TRY_SCENARIO=ember-release
     - env: EMBER_TRY_SCENARIO=ember-beta
     - env: EMBER_TRY_SCENARIO=ember-canary
     - env: EMBER_TRY_SCENARIO=ember-default-with-jquery
+    - env: EMBER_TRY_SCENARIO=ember-classic
     - env: EMBER_TRY_SCENARIO=embroider-tests
 
 before_install:
   - curl -o- -L https://yarnpkg.com/install.sh | bash
   - export PATH=$HOME/.yarn/bin:$PATH
 
-install:
-  - yarn install --no-lockfile --non-interactive
-
 script:
   - node_modules/.bin/ember try:one $EMBER_TRY_SCENARIO

README.md

@@ -73,7 +73,7 @@ export default class MyClass extends Component {
   didEnterViewport() {
     // do some other stuff
     this.infinityLoad();
-  },
+  }
 
   willDestroy() {
     // need to manage cache yourself if you don't use the mixin
@@ -272,7 +272,7 @@ module.exports = function(environment) {
   };
 };
 
-Note if you want to disable right and left in-viewport triggers, set these values to `Infinity`.
+// Note if you want to disable right and left in-viewport triggers, set these values to `Infinity`.
 ```
 
 ### Modifiers
@@ -319,7 +319,7 @@ export default class Infinity extends Component.extend(InViewportMixin) {
     });
 
     this.watchElement(element);
-  },
+  }
 
   didEnterViewport() {
     // this will only work with one element being watched in the container. This is still a TODO to enable
@@ -357,7 +357,7 @@ export default class MyClass extends Component {
   didEnterViewport() {
     // do some other stuff
     this.infinityLoad();
-  },
+  }
 
   willDestroy() {
     // need to manage cache yourself if you don't use the mixin
@@ -388,7 +388,7 @@ export default class MyClass extends Component {
 
   didEnterViewport() {
     // do some other stuff
-  },
+  }
 
   willDestroy() {
     // need to manage cache yourself if you don't use the mixin

addon/index.js

@@ -1,3 +1,4 @@
+// eslint-disable-next-line ember/no-mixins
 import InViewportMixin from 'ember-in-viewport/mixins/in-viewport';
 
 export default InViewportMixin;

addon/mixins/in-viewport.js

@@ -1,3 +1,4 @@
+/* eslint-disable ember/no-new-mixins, ember/no-get, ember/no-observers, ember/no-incorrect-calls-with-inline-anonymous-functions */
 import { assign } from '@ember/polyfills';
 import Mixin from '@ember/object/mixin';
 import { typeOf } from '@ember/utils';

config/ember-try.js

@@ -18,7 +18,7 @@ module.exports = async function() {
         name: 'ember-lts-3.20',
         npm: {
           devDependencies: {
-            'ember-source': '~3.20.0'
+            'ember-source': '~3.20.5'
           }
         }
       },
@@ -46,26 +46,31 @@ module.exports = async function() {
           }
         }
       },
-      // The default `.travis.yml` runs this scenario via `yarn test`,
-      // not via `ember try`. It's still included here so that running
-      // `ember try:each` manually or from a customized CI config will run it
-      // along with all the other scenarios.
       {
-        name: 'ember-default',
+        name: 'ember-default-with-jquery',
+        env: {
+          EMBER_OPTIONAL_FEATURES: JSON.stringify({
+            'jquery-integration': true
+          })
+        },
         npm: {
-          devDependencies: {}
+          devDependencies: {
+            '@ember/jquery': '^1.1.0'
+          }
         }
       },
       {
-        name: 'ember-default-with-jquery',
+        name: 'ember-classic',
         env: {
           EMBER_OPTIONAL_FEATURES: JSON.stringify({
-            'jquery-integration': true
+            'application-template-wrapper': true,
+            'default-async-observers': false,
+            'template-only-glimmer-components': false
           })
         },
         npm: {
-          devDependencies: {
-            '@ember/jquery': '^0.5.1'
+          ember: {
+            edition: 'classic'
           }
         }
       },

package.json

@@ -7,12 +7,13 @@
     "test": "tests"
   },
   "scripts": {
-    "build": "ember build",
+    "build": "ember build --environment=production",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
     "lint:hbs": "ember-template-lint .",
     "lint:js": "eslint .",
     "start": "ember serve",
-    "test": "ember test",
-    "test:all": "ember try:each",
+    "test": "npm-run-all lint:* test:*",
+    "test:ember": "ember test",
     "contributors": "npx contributor-faces -e \"(*-bot|*\\[bot\\]|*-tomster|homu|bors)\"",
     "release": "release-it"
   },
@@ -23,7 +24,6 @@
   "author": "Scott Newcomer",
   "license": "MIT",
   "dependencies": {
-    "@glimmer/component": "^1.0.2",
     "ember-auto-import": "^1.6.0",
     "ember-cli-babel": "^7.22.1",
     "ember-modifier": "^2.1.0",
@@ -32,37 +32,39 @@
     "raf-pool": "~0.1.4"
   },
   "devDependencies": {
-    "@ember/optional-features": "^1.0.0",
+    "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^1.0.2",
-    "babel-eslint": "^8.2.6",
+    "@glimmer/component": "^1.0.2",
+    "@glimmer/tracking": "^1.0.2",
+    "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-cli": "~3.20.0",
-    "ember-cli-dependency-checker": "^3.1.0",
-    "ember-cli-eslint": "^5.1.0",
-    "ember-cli-htmlbars": "^3.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^2.1.0",
+    "ember-cli": "~3.22.0",
+    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-htmlbars": "^5.3.1",
     "ember-cli-inject-live-reload": "^2.0.2",
-    "ember-cli-shims": "^1.2.0",
-    "ember-cli-sri": "^2.1.0",
-    "ember-cli-uglify": "^2.1.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.0",
     "ember-decorators": "^6.0.0",
     "ember-decorators-polyfill": "^1.1.5",
     "ember-disable-prototype-extensions": "^1.1.3",
     "ember-export-application-global": "^2.0.1",
     "ember-load-initializers": "^2.1.1",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.4.1",
-    "ember-resolver": "^5.3.0",
+    "ember-qunit": "^4.6.0",
+    "ember-resolver": "^8.0.2",
     "ember-responsive": "^3.0.6",
-    "ember-source": "~3.20.5",
-    "ember-source-channel-url": "^1.1.0",
-    "ember-template-lint": "^1.14.0",
+    "ember-source": "~3.22.0",
+    "ember-source-channel-url": "^3.0.0",
+    "ember-template-lint": "^2.14.0",
     "ember-truth-helpers": "^2.1.0",
     "ember-try": "^1.4.0",
-    "eslint-plugin-ember": "^6.0.1",
-    "eslint-plugin-node": "^8.0.0",
+    "eslint": "^7.11.0",
+    "eslint-plugin-ember": "^9.3.0",
+    "eslint-plugin-node": "^11.1.0",
     "lerna-changelog": "^1.0.1",
     "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
+    "qunit-dom": "^1.5.0",
     "release-it": "^13.6.6",
     "release-it-lerna-changelog": "^2.3.0"
   },
@@ -74,6 +76,9 @@
     "lazy load",
     "scrollspy"
   ],
+  "ember": {
+    "edition": "octane"
+  },
   "ember-addon": {
     "configPath": "tests/dummy/config"
   }

tests/dummy/app/components/dummy-artwork.js

@@ -151,7 +151,7 @@ export default class DummyArtwork extends Component {
    * @type {String}
    * @public
    */
-  @computed('isDownloaded')
+  @computed('class', 'isDownloaded')
   get artworkClasses() {
     let classes = this.class || '';
     if (this.isDownloaded) {
@@ -166,7 +166,7 @@ export default class DummyArtwork extends Component {
    * @type {String|Number}
    * @public
    */
-  @computed('profiles', 'media.matches.[]')
+  @computed('media.matches.[]', 'profiles.large.height')
   get height() {
     const [viewport = 'medium'] = this.media.matches;
     if (this.profiles && this.profiles[viewport]) {
@@ -181,7 +181,7 @@ export default class DummyArtwork extends Component {
    * @type {String|Number}
    * @public
    */
-  @computed('profiles', 'media.matches.[]')
+  @computed('media.matches.[]', 'profiles.large.width')
   get width() {
     const [viewport = 'medium'] = this.media.matches;
     if (this.profiles && this.profiles[viewport]) {
@@ -200,7 +200,7 @@ export default class DummyArtwork extends Component {
    * @type String
    * @public
    */
-  @computed('actualArtwork.{bgColor,hasAlpha}', 'addBgColor')
+  @computed('actualArtwork.{bgColor,hasAlpha}', 'addBgColor', 'overrideBgColor')
   get bgColor() {
     if (!this.actualArtwork || this.actualArtwork.hasAlpha) {
       return htmlSafe('');
@@ -281,7 +281,7 @@ export default class DummyArtwork extends Component {
    * @type Object
    * @public
    */
-  @computed('height', 'width', 'profile')
+  @computed('profile')
   get profiles() {
     // eslint-disable-next-line arrow-body-style
     return viewports.reduce((acc, view) => {
@@ -384,7 +384,7 @@ export default class DummyArtwork extends Component {
    * @type String
    * @public
    */
-  @computed('profiles')
+  @computed('guid', 'profiles')
   get imgStyle() {
     return Object.keys(this.profiles).map(name => {
       const source = this.profiles[name];
@@ -415,7 +415,7 @@ export default class DummyArtwork extends Component {
     // for use in template
     this.boundOnError = this.onError.bind(this);
     this.boundOnLoad = this.onLoad.bind(this);
-    this.guid = guidFor(this);
+    this.set('guid', guidFor(this));
   }
 
   @action

tests/dummy/app/components/my-component.js

@@ -1,5 +1,5 @@
 import Component from '@ember/component';
-import { setProperties, getProperties } from '@ember/object';
+import { setProperties } from '@ember/object';
 import InViewportMixin from 'ember-in-viewport';
 
 export default Component.extend(InViewportMixin, {
@@ -19,15 +19,7 @@ export default Component.extend(InViewportMixin, {
       viewportRAFOverride,
       scrollableAreaOverride,
       intersectionThresholdOverride,
-    } = getProperties(this,
-      'viewportSpyOverride',
-      'viewportEnabledOverride',
-      'viewportIntersectionObserverOverride',
-      'viewportToleranceOverride',
-      'viewportRAFOverride',
-      'scrollableAreaOverride',
-      'intersectionThresholdOverride'
-    );
+    } = this;
 
     if (viewportSpyOverride !== undefined) {
       options.viewportSpy = viewportSpyOverride;