Update demo app

ember-cli-build.js

@@ -19,18 +19,7 @@ module.exports = function (defaults) {
     This build file does *not* influence how the addon or the app using it
     behave. You most likely want to be modifying `./index.js` or app's build file
   */
-  app.import('node_modules/highlight.js/styles/railscasts.css');
-  app.import('node_modules/highlight.js/lib/highlight.js');
-  app.import('vendor/highlightjs-shim.js', {
-    exports: {
-      'highlightjs': [
-        'default',
-        'highlight',
-        'highlightAuto',
-        'highlightBlock'
-      ]
-    }
-  });
+  app.import('node_modules/highlight.js/styles/base16/railscasts.css');
 
   const { maybeEmbroider } = require('@embroider/test-setup');
   return maybeEmbroider(app, {

package.json

@@ -48,6 +48,7 @@
   "devDependencies": {
     "@ember/optional-features": "^2.0.0",
     "@ember/test-helpers": "^2.4.2",
+    "@ember/render-modifiers": "^2.0.4",
     "@embroider/test-setup": "^0.43.5",
     "@glimmer/component": "^1.0.4",
     "@glimmer/tracking": "^1.0.4",
@@ -78,7 +79,7 @@
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.4.1",
     "eslint-plugin-qunit": "^6.2.0",
-    "highlight.js": "^9.18.1",
+    "highlight.js": "^11.6.0",
     "inuitcss": "^6.0.0",
     "loader.js": "^4.7.0",
     "npm-run-all": "^4.1.5",

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

@@ -1,14 +1,15 @@
-import Component from '@ember/component';
-import hljs from 'highlightjs';
-import { highlightBlock } from 'highlightjs';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+import hljs from 'highlight.js';
 
-export default Component.extend({
-  tagName: 'pre',
-  lang: 'js',
+export default class HighlightJsComponent extends Component {
+  get lang() {
+    return this.args.lang || 'js';
+  }
 
-  didInsertElement() {
-    this.$('code').text(this.$('code').text().trim());
-    hljs.configure({tabReplace: '  '});
-    highlightBlock(this.$('code')[0]);
+  @action
+  highlight(element) {
+    element.innerHTML = element.innerHTML.trim();
+    hljs.highlightElement(element);
   }
-});
+}

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,8 @@
 import Controller from '@ember/controller';
-import { Promise } from 'rsvp';
+import { action } from '@ember/object';
+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 +22,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');
   }
-});
+}