Upgrade to Ember 3.24

.eslintignore

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

.eslintrc.js

@@ -11,7 +11,7 @@ module.exports = {
     },
   },
   plugins: ['ember', 'prettier'],
-  extends: ['eslint:recommended', 'plugin:ember/octane', 'plugin:prettier/recommended'],
+  extends: ['eslint:recommended', 'plugin:ember/recommended', 'plugin:prettier/recommended'],
   env: {
     browser: true,
   },
@@ -22,6 +22,7 @@ module.exports = {
       files: [
         '.ember-cli.js',
         '.eslintrc.js',
+        '.prettierrc.js',
         '.template-lintrc.js',
         'ember-cli-build.js',
         'testem.js',

.gitignore

@@ -10,6 +10,7 @@
 
 # misc
 /.sass-cache
+/.eslintcache
 /connect.lock
 /coverage/
 /libpeerconnection.log

.prettierignore

@@ -1,10 +1,21 @@
 # unconventional js
-script
-.circleci
-*.hbs
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
 
 # dependencies
+/bower_components/
 /node_modules/
 
-dist
-tmp
+# misc
+/coverage/
+!.*
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/package.json.ember-try

.prettierrc.js

@@ -0,0 +1,7 @@
+'use strict';
+
+module.exports = {
+  printWidth: 100,
+  singleQuote: true,
+  trailingComma: 'all',
+};

.template-lintrc.js

@@ -2,7 +2,4 @@
 
 module.exports = {
   extends: 'octane',
-  rules: {
-    'no-negated-condition': false,
-  },
 };

app/components/article-form.hbs

@@ -1,10 +1,10 @@
-{{#if (not this.article.isValid)}}
+{{#unless this.article.isValid}}
   <ul class="error-messages">
     {{#each this.article.errors as |error|}}
       <li data-test-article-form-error-item>{{error.attribute}} {{error.message}}</li>
     {{/each}}
   </ul>
-{{/if}}
+{{/unless}}
 <form>
   <fieldset>
     <fieldset class="form-group">
@@ -18,18 +18,14 @@
     <fieldset class="form-group">
       <Textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"
         @value={{this.article.body}} data-test-article-form-input-body />
-      </fieldset>
+    </fieldset>
     <fieldset class="form-group">
-      <Input type="text" class="form-control" placeholder="Enter tags" @value={{this.rawTagList}} {{on "keyup" this.processTags}} data-test-article-form-input-tags />
+      <Input type="text" class="form-control" placeholder="Enter tags" @value={{this.rawTagList}} {{on "keyup"
+        this.processTags}} data-test-article-form-input-tags />
       <div class="tag-list"></div>
     </fieldset>
-    <button
-      class="btn btn-lg pull-xs-right btn-primary"
-      type="button"
-      disabled={{this.buttonIsDisabled}}
-      data-test-article-form-submit-button
-      {{on "click" this.publishArticle}}
-    >
+    <button class="btn btn-lg pull-xs-right btn-primary" type="button" disabled={{this.buttonIsDisabled}}
+      data-test-article-form-submit-button {{on "click" this.publishArticle}}>
       {{if this.isSaving "Saving" "Publish"}} Article
     </button>
   </fieldset>

app/components/favorite-article.hbs

@@ -1,6 +1,7 @@
-<button class="btn btn-sm btn{{if (not @article.favorited) "-outline"}}-primary"
-  data-test-favorite-article-button={{if @article.favorited "favorited" "unfavorited"}}
-  {{on "click" (fn this.favoriteArticle (if @article.favorited "unfavorite" "favorite"))}} type="button" ...attributes>
+article favorited: {{@article.favorited}}
+<button class="btn btn-sm btn{{unless @article.favorited '-outline'}}-primary" data-test-favorite-article-button={{if
+  @article.favorited "favorited" "unfavorited" }} {{on "click" (fn this.favoriteArticle (if
+  @article.favorited "unfavorite" "favorite" ))}} type="button" ...attributes>
   <i class="ion-heart"></i>
   &nbsp;
   {{#if @isIconOnly}}

app/components/follow-profile.hbs

@@ -1,7 +1,6 @@
-<button class="btn btn-sm action-btn btn{{if (not @profile.following) "-outline"}}-secondary"
-  {{on "click" (fn this.followProfile (if @profile.following "unfollow" "follow"))}} data-test-follow-author-button
-  type="button">
-  <i class="ion-{{if @profile.following "minus" "plus"}}-round"></i>
+<button class="btn btn-sm action-btn btn{{unless @profile.following '-outline'}}-secondary" {{on "click" (fn
+  this.followProfile (if @profile.following "unfollow" "follow" ))}} data-test-follow-author-button type="button">
+  <i class="ion-{{if @profile.following 'minus' 'plus'}}-round"></i>
   &nbsp;
   {{if @profile.following "Unf" "F"}}ollow {{@profile.id}}
 </button>

app/components/register-form.hbs

@@ -2,13 +2,13 @@
 <p class="text-xs-center">
   <LinkTo @route="login" data-test-login-link>Have an account?</LinkTo>
 </p>
-{{#if (not this.user.isValid)}}
+{{#unless this.user.isValid}}
   <ul class="error-messages">
     {{#each this.user.errors as |error|}}
       <li>{{error.attribute}} {{error.message}}</li>
     {{/each}}
   </ul>
-{{/if}}
+{{/unless}}
 <form>
   <fieldset class="form-group">
     <Input class="form-control form-control-lg" type="text" placeholder="Your Username" @value={{this.username}}
@@ -22,8 +22,8 @@
     <Input class="form-control form-control-lg" type="password" placeholder="Password" @value={{this.password}}
       data-test-register-password />
   </fieldset>
-  <button class="btn btn-lg btn-primary pull-xs-right" {{on "click" this.submit}}
-    disabled={{or (not this.username) (not this.email) ( not this.password)}} type="button" data-test-register-button>
+  <button class="btn btn-lg btn-primary pull-xs-right" {{on "click" this.submit}} disabled={{or (not this.username) (not
+    this.email) ( not this.password)}} type="button" data-test-register-button>
     Sign up
   </button>
 </form>

app/components/settings-form.hbs

@@ -1,11 +1,11 @@
 <h1 class="text-xs-center">Your Settings</h1>
-{{#if (not this.session.user.isValid)}}
+{{#unless this.session.user.isValid}}
   <ul class="error-messages">
     {{#each this.session.user.errors as |error index|}}
       <li data-test-settings-form-error-item={{index}}>{{error.attribute}} {{error.message}}</li>
     {{/each}}
   </ul>
-{{/if}}
+{{/unless}}
 <form>
   <fieldset>
     <fieldset class="form-group">
@@ -19,14 +19,17 @@
     <fieldset class="form-group">
       <Textarea class="form-control form-control-lg" rows="8" placeholder="Short bio about you"
         @value={{this.session.user.bio}} data-test-settings-form-input-bio />
-      </fieldset>
+    </fieldset>
     <fieldset class="form-group">
-      <Input class="form-control form-control-lg" type="text" placeholder="Email" @value={{this.session.user.email}} data-test-settings-form-input-email />
+      <Input class="form-control form-control-lg" type="text" placeholder="Email" @value={{this.session.user.email}}
+        data-test-settings-form-input-email />
     </fieldset>
     <fieldset class="form-group">
-      <Input class="form-control form-control-lg" type="password" placeholder="Password" @value={{this.session.user.password}} data-test-settings-form-input-password />
+      <Input class="form-control form-control-lg" type="password" placeholder="Password"
+        @value={{this.session.user.password}} data-test-settings-form-input-password />
     </fieldset>
-    <button class="btn btn-lg btn-primary pull-xs-right" disabled={{or (not this.session.user.hasDirtyAttributes) this.session.user.isSaving}} {{on "click" this.submit}} type="button"  data-test-settings-form-button>
+    <button class="btn btn-lg btn-primary pull-xs-right" disabled={{or (not this.session.user.hasDirtyAttributes)
+      this.session.user.isSaving}} {{on "click" this.submit}} type="button" data-test-settings-form-button>
       Update Settings
     </button>
   </fieldset>

app/models/user.js

@@ -18,11 +18,11 @@ export default class UserModel extends Model {
     if (!articles.length) {
       return [];
     }
-    let ids = articles.map(article => article.slug);
-    let normalizedArticles = articles.map(article =>
+    let ids = articles.map((article) => article.slug);
+    let normalizedArticles = articles.map((article) =>
       Object.assign({}, article, { id: article.slug }),
     );
     this.store.pushPayload({ articles: normalizedArticles });
-    return this.store.peekAll('article').filter(article => ids.includes(article.id));
+    return this.store.peekAll('article').filter((article) => ids.includes(article.id));
   }
 }

app/router.js

@@ -6,18 +6,18 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function() {
-  this.route('editor', function() {
+Router.map(function () {
+  this.route('editor', function () {
     this.route('edit', { path: ':id' });
   });
   this.route('settings');
   this.route('register');
   this.route('login');
 
-  this.route('articles', function() {
+  this.route('articles', function () {
     this.route('article', { path: ':id' });
   });
-  this.route('profile', { path: 'profile/:id' }, function() {
+  this.route('profile', { path: 'profile/:id' }, function () {
     this.route('favorites');
   });
   this.route('error', { path: '/*path' });

app/services/session.js

@@ -114,8 +114,8 @@ export default class SessionService extends Service {
   processLoginErrors(errors) {
     let loginErrors = [];
     let errorKeys = Object.keys(errors);
-    errorKeys.forEach(attribute => {
-      errors[attribute].forEach(message => {
+    errorKeys.forEach((attribute) => {
+      errors[attribute].forEach((message) => {
         loginErrors.push(`${attribute} ${message}`);
       });
     });

config/environment.js

@@ -1,9 +1,9 @@
 'use strict';
 
-module.exports = function(environment) {
+module.exports = function (environment) {
   const ENV = {
     modulePrefix: 'ember-realworld',
-    environment: environment,
+    environment,
     rootURL: '/',
     locationType: 'history',
     EmberENV: {

ember-cli-build.js

@@ -2,7 +2,7 @@
 
 const EmberApp = require('ember-cli/lib/broccoli/ember-app');
 
-module.exports = function(defaults) {
+module.exports = function (defaults) {
   let app = new EmberApp(defaults, {
     // Add options here
   });

mirage/config.js

@@ -85,7 +85,7 @@ export const validateArticleDescription = (description = '') => {
   return errors;
 };
 
-export default function() {
+export default function () {
   this.namespace = ''; // make this `/api`, for example, if your API is namespaced
   this.timing = 400; // delay for each request, automatically set to 0 during testing
 
@@ -164,7 +164,7 @@ export default function() {
     if (params.author) {
       const { author } = params;
 
-      return schema.articles.all().filter(article => article.author.username === author);
+      return schema.articles.all().filter((article) => article.author.username === author);
     } else if (params.favorited) {
       /**
        * TODO: Currently there is no way to identify articles favorited by different profiles.
@@ -176,7 +176,7 @@ export default function() {
 
       return schema.articles
         .all()
-        .filter(article => article.favorited && article.author.id !== favorited);
+        .filter((article) => article.favorited && article.author.id !== favorited);
     } else {
       const allArticles = schema.articles.all(),
         limit = parseInt(params.limit),

mirage/scenarios/default.js

@@ -1,4 +1,4 @@
-export default function(server) {
+export default function (server) {
   /*
     Seed your development database using your factories.
     This data will not be loaded in your tests.

package.json

@@ -22,10 +22,12 @@
   ],
   "scripts": {
     "build": "ember build --environment=production",
-    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*",
-    "lint:eslint-check": "eslint --print-config .eslintrc.js | eslint-config-prettier-check",
+    "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:js": "eslint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
     "start": "ember serve",
     "start:dev": "ember server --proxy https://conduit.productionready.io",
     "test": "npm-run-all lint test:*",
@@ -34,51 +36,54 @@
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/render-modifiers": "^1.0.2",
-    "@glimmer/component": "^1.0.2",
-    "@glimmer/tracking": "^1.0.2",
+    "@ember/test-helpers": "^2.1.4",
+    "@glimmer/component": "^1.0.3",
+    "@glimmer/tracking": "^1.0.3",
     "@types/ember": "^3.1.0",
     "@types/ember-data": "^3.1.6",
     "@types/ember-qunit": "^3.4.6",
     "@types/ember-testing-helpers": "^0.0.3",
     "@types/qunit": "^2.5.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
-    "ember-auto-import": "^1.6.0",
-    "ember-cli": "~3.22.0",
+    "ember-auto-import": "^1.10.1",
+    "ember-cli": "~3.24.0",
     "ember-cli-app-version": "^4.0.0",
-    "ember-cli-babel": "^7.22.1",
+    "ember-cli-babel": "^7.23.0",
     "ember-cli-dependency-checker": "^3.2.0",
     "ember-cli-deprecation-workflow": "^1.0.1",
     "ember-cli-htmlbars": "^5.3.1",
     "ember-cli-inject-live-reload": "^2.0.2",
     "ember-cli-mirage": "^1.1.6",
     "ember-cli-sri": "^2.1.1",
-    "ember-cli-terser": "^4.0.0",
-    "ember-concurrency": "^1.1.5",
-    "ember-concurrency-decorators": "^1.0.0",
-    "ember-data": "~3.22.0",
+    "ember-cli-terser": "^4.0.1",
+    "ember-concurrency": "^1.3.0",
+    "ember-concurrency-decorators": "^2.0.3",
+    "ember-data": "~3.24.0",
     "ember-export-application-global": "^2.0.1",
     "ember-fetch": "^8.0.2",
-    "ember-load-initializers": "^2.1.1",
+    "ember-load-initializers": "^2.1.2",
     "ember-maybe-import-regenerator": "^0.1.6",
-    "ember-qunit": "^4.6.0",
+    "ember-page-title": "^6.0.3",
+    "ember-qunit": "^5.1.1",
     "ember-resolver": "^8.0.2",
-    "ember-source": "~3.22.0",
-    "ember-template-lint": "^2.14.0",
+    "ember-source": "~3.24.0",
+    "ember-template-lint": "^2.15.0",
     "ember-test-selectors": "^4.0.0",
     "ember-truth-helpers": "^2.1.0",
-    "eslint": "^7.11.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-ember": "^9.3.0",
+    "eslint": "^7.17.0",
+    "eslint-config-prettier": "^7.1.0",
+    "eslint-plugin-ember": "^10.1.1",
     "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-prettier": "^3.1.2",
+    "eslint-plugin-prettier": "^3.3.1",
     "faker": "^4.1.0",
     "loader.js": "^4.7.0",
     "marked": "^0.6.1",
     "npm-run-all": "^4.1.5",
-    "prettier": "^1.19.1",
+    "prettier": "^2.2.1",
     "pretty-quick": "^1.10.0",
-    "qunit-dom": "^1.5.0",
+    "qunit": "^2.13.0",
+    "qunit-dom": "^1.6.0",
     "sinon": "^8.1.1"
   },
   "engines": {