Use native classes in demo app

tests/dummy/app/controllers/index.js

@@ -1,15 +1,18 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { storageFor } from 'ember-local-storage/helpers/storage';
 
-export default Controller.extend({
-  stats: storageFor('stats'),
+export default class extends Controller {
+  @storageFor('stats') stats;
 
-  actions: {
-    countUp() {
-      this.incrementProperty('stats.counter');
-    },
-    resetCounter() {
-      this.get('stats').reset();
-    }
+  @action
+  countUp() {
+    let newValue = this.stats.get('counter') + 1;
+    this.stats.set('counter', newValue);
   }
-});
+
+  @action
+  resetCounter() {
+    this.stats.reset();
+  }
+}

tests/dummy/app/controllers/projects.js

@@ -1,5 +1,9 @@
 import Controller from '@ember/controller';
-import { Promise } from 'rsvp';
+import { action } from '@ember/object';
+import { bind } from '@ember/runloop';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+import { all, Promise } from 'rsvp';
 import { storageFor } from 'ember-local-storage';
 
 function readFile(file) {
@@ -19,49 +23,71 @@ function readFile(file) {
   });
 }
 
-export default Controller.extend({
-  settings: storageFor('settings'),
+export default class extends Controller {
+  @service router;
+  @service store;
+  @storageFor('settings') settings;
 
-  actions: {
-    createProject(name) {
-      let project = this.store.createRecord('project', { name: name });
+  @tracked name = '';
 
-      this.store
-        .findRecord('user', this.get('settings.userId'))
-        .then((user) => {
-          user.get('projects').addObject(project);
-          user.save();
+  @action
+  createProject(name) {
+    let project = this.store.createRecord('project', { name: name });
 
-          project.get('users').addObject(user);
-          project.save()
-            .then(() => {
-              this.set('name', null);
-            });
-        });
-    },
+    this.store
+      .findRecord('user', this.settings.get('userId'))
+      .then((user) => {
+        user.get('projects').addObject(project);
+        user.save();
 
-    deleteProject(project) {
-      project.destroyRecord();
-    },
+        project.get('users').addObject(user);
+        project.save()
+          .then(() => {
+            this.name = '';
+          });
+      });
+  }
 
-    importData(event) {
-      readFile(event.target.files[0])
-        .then((file) => {
-          this.store
-            .importData(file.data)
-            .then(function() {
-              // show a flash message or transitionTo somewehere
-            });
+  @action
+  deleteProject(project) {
+    all(
+      project.get('users').map((user) => {
+        user.get('projects').removeObject(project);
+        user.save();
+      })
+    ).then(() => {
+      all(
+        project.get('tasks').map((task) => {
+          task.destroyRecord();
+        })
+      ).then(() => {
+        project.destroyRecord()
+        .then(() => {
+          this.router.transitionTo('projects')
         });
-    },
+      });
+    });
+  }
 
-    exportData() {
-      this.store.exportData(
-        ['projects', 'tasks'],
-        {download: true, filename: 'my-data.json'}
-      ).then(function() {
-        // show a flash message or transitionTo somewehere
+  @action
+  importData(event) {
+    readFile(event.target.files[0])
+      .then((file) => {
+        this.store
+          .importData(file.data)
+          .then(function() {
+            // show a flash message or transitionTo somewehere
+          });
       });
-    }
   }
-});
+
+  @action
+  exportData() {
+    this.store.exportData(
+      ['projects', 'tasks', 'users'],
+      {download: true, filename: 'my-data.json'}
+    ).then(function() {
+      // show a flash message or transitionTo somewehere
+    });
+  }
+}

tests/dummy/app/controllers/projects/project.js

@@ -1,23 +1,30 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
-  actions: {
-    createTask(name) {
-      let task = this.store.createRecord('task', { name: name });
+export default class extends Controller {
+  @service store;
 
-      // The project
-      let project = this.get('model');
-      project.get('tasks').addObject(task);
+  @tracked name = '';
 
-      task.set('project', project);
-      task.save()
-        .then(() => {
-          this.set('name', null);
-        });
-    },
+  @action
+  createTask(name) {
+    let task = this.store.createRecord('task', { name: name });
 
-    deleteTask(task) {
-      task.destroyRecord();
-    }
+    // The project
+    let project = this.model;
+    project.get('tasks').addObject(task);
+
+    task.set('project', project);
+    task.save()
+      .then(() => {
+        this.name = '';
+      });
+  }
+
+  @action
+  deleteTask(task) {
+    task.destroyRecord();
   }
-});
+}

tests/dummy/app/controllers/storage-for.js

@@ -1,12 +1,13 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
 import { storageFor } from 'ember-local-storage';
 
-export default Controller.extend({
-  settings: storageFor('settings'),
+export default class extends Controller {
+  @storageFor('settings') settings;
 
-  actions: {
-    toggleWelcomeMessage() {
-      this.toggleProperty('settings.welcomeMessageSeen');
-    }
+  @action
+  toggleWelcomeMessage() {
+    let newValue = !this.settings.get('welcomeMessageSeen');
+    this.settings.set('welcomeMessageSeen', newValue);
   }
-});
+}

tests/dummy/app/models/book-publication.js

@@ -10,4 +10,4 @@ export default Model.extend({
   name: attr('string'),
 
   user: hasMany('user', { async: true })
-});
+});

tests/dummy/app/models/cat.js

@@ -1,3 +1,3 @@
 import Pet from './pet';
 
-export default Pet.extend();
+export default Pet.extend();

tests/dummy/app/models/comment.js

@@ -10,4 +10,4 @@ export default Model.extend({
   name: attr('string'),
 
   post: belongsTo('post', { async: true, autoSave: true })
-});
+});

tests/dummy/app/models/dog.js

@@ -1,3 +1,3 @@
 import Pet from './pet';
 
-export default Pet.extend();
+export default Pet.extend();

tests/dummy/app/models/editor.js

@@ -1,3 +1,3 @@
 import User from './user';
 
-export default User.extend();
+export default User.extend();

tests/dummy/app/models/project.js

@@ -11,4 +11,4 @@ export default Model.extend({
 
   tasks: hasMany('task', { async: true }),
   users: hasMany('user', { async: true }),
-});
+});

tests/dummy/app/routes/application.js

@@ -1,22 +1,28 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 import { storageFor } from 'ember-local-storage';
 
-export default Route.extend({
-  stats: storageFor('stats'),
-  settings: storageFor('settings'),
+export default class extends Route {
+  @service store;
+  @storageFor('stats') stats;
+  @storageFor('settings') settings;
 
   activate() {
-    this.incrementProperty('stats.counter');
+    this.incrementCounter();
 
     // setup a user
-    if (!this.get('settings.userId')) {
+    if (!this.settings.get('userId')) {
       this.store
         .createRecord('user', {name: 'Me'})
         .save()
         .then((user) => {
-          this.set('settings.userId', user.get('id'));
+          this.settings.set('userId', user.get('id'));
         });
     }
   }
-});
 
+  incrementCounter() {
+    let newValue = this.stats.get('counter') + 1;
+    this.stats.set('counter', newValue);
+  }
+}

tests/dummy/app/routes/projects.js

@@ -1,7 +1,10 @@
 import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
 
-export default Route.extend({
-  model: function() {
+export default class extends Route {
+  @service store;
+
+  model() {
     return this.store.findAll('project');
   }
-});
+}

tests/dummy/app/routes/projects/project.js

@@ -0,0 +1,10 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+
+export default class extends Route {
+  @service store;
+
+  model(params) {
+    return this.store.findRecord('project', params.project_id);
+  }
+}

tests/dummy/app/styles/elements/elements.page.scss

@@ -53,12 +53,4 @@ body {
     border-radius: 3px;
     padding: 8px;
   }
-
-  .projects {
-    &__list {
-    }
-
-    &__project {
-    }
-  }
 }

tests/dummy/app/templates/index.hbs

@@ -2,6 +2,6 @@ The addon provides a <code>storageFor</code> computed property that returns a pr
 
 It ships with an ember-data adapter that works almost the same as the JSONAPIAdapter with some relationship sugar added.<br><br>
 
-Your Page Visits: {{stats.counter}}
-<button {{action "countUp"}}>Count up</button>
-<button {{action "resetCounter"}}>X</button>
+Your Page Visits: {{this.stats.counter}}
+<button {{on "click" this.countUp}}>Count up</button>
+<button {{on "click" this.resetCounter}}>X</button>