Update to the latest Ember v4.7

.ember-cli

@@ -5,5 +5,11 @@
 
     Setting `disableAnalytics` to true will prevent any data from being sent.
   */
-  "disableAnalytics": false
+  "disableAnalytics": false,
+
+  /**
+  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
 }

.env-sample

@@ -1,4 +0,0 @@
-API_KEY="**Update this!** Copy this file and save as .env, rewrite this value with Firebase Api Key"
-AUTH_DOMAIN="**Update this!** e.g.: your-app.firebaseapp.com"
-DATABASE_URL="**Update this!** e.g.: https://some-app.firebaseio.com"
-PROJECT_ID="**Update this!** Add your project ID here e.g.: project-12341234"

.eslintignore

@@ -13,8 +13,13 @@
 # misc
 /coverage/
 !.*
+.*/
+.eslintcache
 
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try

.eslintrc.js

@@ -1,3 +1,5 @@
+'use strict';
+
 module.exports = {
   root: true,
   parser: 'babel-eslint',
@@ -8,7 +10,7 @@ module.exports = {
       legacyDecorators: true,
     },
   },
-  plugins: ['ember', 'prettier'],
+  plugins: ['ember'],
   extends: ['plugin:prettier/recommended', 'eslint:recommended', 'plugin:ember/recommended'],
   env: {
     browser: true,
@@ -21,14 +23,15 @@ module.exports = {
     // node files
     {
       files: [
-        '.eslintrc.js',
-        '.template-lintrc.js',
-        'ember-cli-build.js',
-        'testem.js',
-        'blueprints/*/index.js',
-        'config/**/*.js',
-        'lib/*/index.js',
-        'server/**/*.js',
+        './.eslintrc.js',
+        './.prettierrc.js.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
       ],
       parserOptions: {
         sourceType: 'script',
@@ -38,13 +41,17 @@ 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'],
+      rules: {
         // this can be removed once the following is fixed
         // https://github.com/mysticatea/eslint-plugin-node/issues/77
         'node/no-unpublished-require': 'off',
-      }),
+      },
+    },
+    {
+      // test files
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
     },
   ],
 };

.gitignore

@@ -31,4 +31,12 @@ jsconfig.json
 # ember-try
 /.node_modules.ember-try/
 /bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
 /package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/
+
+.eslintcache

.prettierignore

@@ -1,7 +1,30 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+
 .firebase
-coverage
-dist
-node_modules
-tmp
 yarn.lock
 firebase.json

.prettierrc.js

@@ -0,0 +1,6 @@
+'use strict';
+
+module.exports = {
+  printWidth: 120,
+  singleQuote: true,
+};

.template-lintrc.js

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

README.md

@@ -24,8 +24,6 @@ Live demo: [library-app.firebaseapp.com](https://library-app.firebaseapp.com/)
 
 I assume, you have Node.js on your computer. [Node.js installation](http://yoember.com/nodejs/the-best-way-to-install-node-js/)
 
-- Please create an app on [Firebase](http://www.firebase.com) first. You can register there with one click and create a new app. You have to setup this app name in `config/environment.js`. (This will be your own cloud based database.)
-
 - Clone this repository in your project folder
 
 ```
@@ -41,15 +39,13 @@ $ cd library-app
 - Install node packages
 
 ```
-$ npm install
+$ yarn install
 ```
 
-- Copy `.env-sample` file and save as `.env`. Update the `API_KEY` and `PROJECT_ID`.
-
 * Launch the application with Ember server.
 
 ```
-$ ember server
+$ yarn start
 ```
 
 - Open the application in your browser

app/adapters/application.js

@@ -1,3 +1 @@
-import RealtimeDatabaseAdapter from 'emberfire/adapters/realtime-database';
-
-export default class ApplicationAdapter extends RealtimeDatabaseAdapter {}
+export { default } from 'ember-local-storage/adapters/local';

app/app.js

@@ -1,7 +1,7 @@
 import Application from '@ember/application';
 import Resolver from 'ember-resolver';
 import loadInitializers from 'ember-load-initializers';
-import config from './config/environment';
+import config from 'library-app/config/environment';
 
 export default class App extends Application {
   modulePrefix = config.modulePrefix;

app/components/abc-buttons.hbs

@@ -1,3 +1,3 @@
-  {{#each this.atoz as |letter|}}
-    <LinkTo @query={{hash limit="abc" letter=letter}} class="btn btn-outline-secondary">{{letter}}</LinkTo>
-  {{/each}}
+{{#each this.atoz as |letter|}}
+  <LinkTo @query={{hash limit='abc' letter=letter}} class='btn btn-outline-secondary'>{{letter}}</LinkTo>
+{{/each}}

app/components/author-select.hbs

@@ -1,7 +1,7 @@
-<select {{on "change" this.change}} class="form-control">
+<select {{on 'change' this.change}} class='form-control'>
   {{#each this.authors as |author|}}
     <option value={{author.id}} selected={{is-equal author.id this.default.id}}>
       {{author.name}}
     </option>
   {{/each}}
-</select>
+</select>

app/components/library-item-form.hbs

@@ -1,26 +1,31 @@
-<div class="form-horizontal">
-  <div class="form-group has-feedback {{if @item.isValid "has-success"}}">
-    <label class="col-sm-2 control-label">Name*</label>
-    <div class="col-sm-10">
-      <Input @type="text" @value={{@item.name}} class="form-control" placeholder="The name of the Library" />
-      {{#if @item.isValid}}<span class="glyphicon glyphicon-ok form-control-feedback"></span>{{/if}}
+<div class='form-horizontal'>
+  <div class='form-group has-feedback {{if @item.isValid "has-success"}}'>
+    <label class='col-sm-2 control-label'>Name*</label>
+    <div class='col-sm-10'>
+      <Input @type='text' @value={{@item.name}} class='form-control' placeholder='The name of the Library' />
+      {{#if @item.isValid}}<span class='glyphicon glyphicon-ok form-control-feedback'></span>{{/if}}
     </div>
   </div>
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Address</label>
-    <div class="col-sm-10">
-      <Input @type="text" @value={{@item.address}} class="form-control" placeholder="The address of the Library" />
+  <div class='form-group'>
+    <label class='col-sm-2 control-label'>Address</label>
+    <div class='col-sm-10'>
+      <Input @type='text' @value={{@item.address}} class='form-control' placeholder='The address of the Library' />
     </div>
   </div>
-  <div class="form-group">
-    <label class="col-sm-2 control-label">Phone</label>
-    <div class="col-sm-10">
-      <Input @type="text" @value={{@item.phone}} class="form-control" placeholder="The phone number of the Library" />
+  <div class='form-group'>
+    <label class='col-sm-2 control-label'>Phone</label>
+    <div class='col-sm-10'>
+      <Input @type='text' @value={{@item.phone}} class='form-control' placeholder='The phone number of the Library' />
     </div>
   </div>
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-primary" {{on 'click' (fn this.buttonClicked @item)}} disabled={{unless @item.isValid true}}>{{@buttonLabel}}</button>
+  <div class='form-group'>
+    <div class='col-sm-offset-2 col-sm-10'>
+      <button
+        type='submit'
+        class='btn btn-primary'
+        {{on 'click' (fn this.buttonClicked @item)}}
+        disabled={{unless @item.isValid true}}
+      >{{@buttonLabel}}</button>
     </div>
   </div>
 </div>

app/components/library-item.hbs

@@ -1,19 +1,18 @@
-<div class="card h-100">
-  <div class="card-header">
+<div class='card h-100'>
+  <div class='card-header'>
     {{@item.name}}
   </div>
-  <div class="card-body">
-    <p class="card-text">Address: {{@item.address}}</p>
-    <p class="card-text">Phone: {{@item.phone}}</p>
+  <div class='card-body'>
+    <p class='card-text'>Address: {{@item.address}}</p>
+    <p class='card-text'>Phone: {{@item.phone}}</p>
   </div>
-  <div class="card-footer">
+  <div class='card-footer'>
     Number of books:
-    <span class="text-left badge">
+    <span class='text-left badge'>
       {{@badge}}
     </span>
-    <span class="pull-right">
+    <span class='pull-right'>
       {{yield}}
     </span>
   </div>
-</div>
-
+</div>

app/components/library-select.hbs

@@ -1,7 +1,7 @@
-<select {{on "change" this.change}} class="form-control">
+<select {{on 'change' this.change}} class='form-control'>
   {{#each this.libraries as |library|}}
     <option value={{library.id}} selected={{is-equal library.id this.default.id}}>
       {{library.name}}
     </option>
   {{/each}}
-</select>
+</select>

app/components/number-box.hbs

@@ -1,6 +1,6 @@
-<div class="card bg-info text-white">
-  <div class="card-body">
-    <h3 class="text-center">{{@title}}</h3>
-    <h1 class="text-center">{{if @number @number "..."}}</h1>
+<div class='card bg-info text-white'>
+  <div class='card-body'>
+    <h3 class='text-center'>{{@title}}</h3>
+    <h1 class='text-center'>{{if @number @number '...'}}</h1>
   </div>
-</div>
+</div>

app/components/seeder-block.hbs

@@ -1,22 +1,31 @@
-<div class="well well-sm extra-padding-bottom">
+<div class='well well-sm extra-padding-bottom'>
   <h3>{{@sectionTitle}}</h3>
-  <div class="form-inline">
-    <div class="form-group has-feedback {{unless this.isCounterValid "has-error"}}">
-      <label class="control-label">Number of new records:</label>
-      <Input @value={{this.counter}} class="form-control" placeholder={{this.placeholder}} />
+  <div class='form-inline'>
+    <div class='form-group has-feedback {{unless this.isCounterValid "has-error"}}'>
+      <label class='control-label'>Number of new records:</label>
+      <Input @value={{this.counter}} class='form-control' placeholder={{this.placeholder}} />
     </div>
-    <button class="btn btn-primary" {{on 'click' this.generate}} disabled={{this.generateIsDisabled}} type="button">
+    <button class='btn btn-primary' {{on 'click' this.generate}} disabled={{this.generateIsDisabled}} type='button'>
       {{#if @seedingInProgress}}
-        <span class="glyphicon glyphicon-refresh spinning"></span> Generating...
+        <span class='glyphicon glyphicon-refresh spinning'></span>
+        Generating...
       {{else}}
-        Generate {{@sectionTitle}}
+        Generate
+        {{@sectionTitle}}
       {{/if}}
     </button>
-    <button class="btn btn-danger pull-right" {{on 'click' this.delete}} disabled={{this.deleteIsDisabled}} type="button">
+    <button
+      class='btn btn-danger pull-right'
+      {{on 'click' this.delete}}
+      disabled={{this.deleteIsDisabled}}
+      type='button'
+    >
       {{#if @deletingInProgress}}
-        <span class="glyphicon glyphicon-refresh spinning"></span> Deleting...
+        <span class='glyphicon glyphicon-refresh spinning'></span>
+        Deleting...
       {{else}}
-        Delete All {{@sectionTitle}}
+        Delete All
+        {{@sectionTitle}}
       {{/if}}
     </button>
   </div>

app/components/seeder-block.js

@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { lte, not, or } from '@ember/object/computed';
-import { inject as service } from '@ember/service';
+import { service } from '@ember/service';
 import { tracked } from '@glimmer/tracking';
 import classic from 'ember-classic-decorator';
 
@@ -24,12 +24,12 @@ export default class SeederBlockComponent extends Component {
   @action
   generate() {
     if (this.counter && this.isCounterValid) {
-      this.seederTask.perform(this.counter);
+      this.args.seederTask.perform(this.counter);
     }
   }
 
   @action
   delete() {
-    this.destroyerTask.perform();
+    this.args.destroyerTask.perform();
   }
 }