Convert dummy app

package.json

@@ -56,6 +56,7 @@
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.2",
+    "ember-classic-decorator": "^3.0.0",
     "ember-cli": "~3.28.0",
     "ember-cli-code-coverage": "^1.0.3",
     "ember-cli-dependency-checker": "^3.2.0",

tests/dummy/app/adapters/application.js

@@ -1,6 +1,8 @@
+import classic from 'ember-classic-decorator';
 import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import ENV from '../config/environment';
 
-export default JSONAPIAdapter.extend({
-  namespace: `${ENV.rootURL}api`,
-});
+@classic
+export default class Application extends JSONAPIAdapter {
+  namespace = `${ENV.rootURL}api`;
+}

tests/dummy/app/components/base-table.js

@@ -1,78 +1,81 @@
 // BEGIN-SNIPPET base-table
+import classic from 'ember-classic-decorator';
 import Component from '@ember/component';
 import { action } from '@ember/object';
-import { oneWay } from '@ember/object/computed';
 import { isEmpty } from '@ember/utils';
 import { inject as service } from '@ember/service';
 import Table from 'ember-light-table';
-import { task } from 'ember-concurrency';
+import { restartableTask } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
-  store: service(),
+@classic
+export default class BaseTable extends Component {
+  @service store;
 
-  page: 0,
-  limit: 10,
-  dir: 'asc',
-  sort: 'firstName',
+  @tracked page = 0;
+  limit = 15;
+  dir = 'asc';
+  sort = 'firstName';
 
-  isLoading: oneWay('fetchRecords.isRunning'),
-  canLoadMore: true,
-  enableSync: true,
+  canLoadMore = true;
+  enableSync = true;
 
-  model: null,
-  meta: null,
-  columns: null,
-  table: null,
+  model = null;
+  @tracked meta = null;
+
+  table = null;
 
   init() {
-    this._super(...arguments);
+    super.init(...arguments);
 
-    let table = Table.create({
+    const table = Table.create({
       columns: this.columns,
       rows: this.model,
       enableSync: this.enableSync,
     });
-    let sortColumn = table.get('allColumns').findBy('valuePath', this.sort);
+    const sortColumn = table.get('allColumns').findBy('valuePath', this.sort);
 
     // Setup initial sort column
     if (sortColumn) {
       sortColumn.set('sorted', true);
     }
 
-    this.set('table', table);
-  },
+    this.table = table;
+  }
+
+  get isLoading() {
+    return this.fetchRecords.isRunning;
+  }
 
-  fetchRecords: task(function* () {
-    let records = yield this.store.query('user', [
-      this.page,
-      this.limit,
-      this.sort,
-      this.dir,
-    ]);
+  @restartableTask *fetchRecords() {
+    const records = yield this.store.query('user', {
+      page: this.page,
+      limit: this.limit,
+      sort: this.sort,
+      dir: this.dir,
+    });
     this.model.pushObjects(records.toArray());
-    this.set('meta', records.get('meta'));
-    this.set('canLoadMore', !isEmpty(records));
-  }).restartable(),
+    this.meta = records.meta;
+    this.canLoadMore = !isEmpty(records);
+  }
 
   @action
   onScrolledToBottom() {
     if (this.canLoadMore) {
-      this.incrementProperty('page');
+      this.page = this.page + 1;
       this.fetchRecords.perform();
     }
-  },
+  }
 
   @action
   onColumnClick(column) {
     if (column.sorted) {
-      this.setProperties({
-        dir: column.ascending ? 'asc' : 'desc',
-        sort: column.get('valuePath'),
-        canLoadMore: true,
-        page: 0,
-      });
+      this.dir = column.ascending ? 'asc' : 'desc';
+      this.sort = column.get('valuePath');
+      this.canLoadMore = true;
+      this.page = 0;
       this.model.clear();
     }
-  },
-});
+  }
+}
 // END-SNIPPET

tests/dummy/app/components/code-panel.js

@@ -1,9 +1,12 @@
+import classic from 'ember-classic-decorator';
+import { layout as templateLayout } from '@ember-decorators/component';
 import Component from '@ember/component';
 import layout from '../templates/components/code-panel';
 
-export default Component.extend({
-  layout,
-  collapse: true,
-  title: '',
-  snippets: null,
-});
+@classic
+@templateLayout(layout)
+export default class CodePanel extends Component {
+  collapse = true;
+  title = '';
+  snippets = null;
+}

tests/dummy/app/components/colored-row.js

@@ -1,14 +1,15 @@
 // BEGIN-SNIPPET colored-row
-import { computed } from '@ember/object';
+import classic from 'ember-classic-decorator';
+import { classNames, attributeBindings } from '@ember-decorators/component';
 import { htmlSafe } from '@ember/template';
 import Row from 'ember-light-table/components/lt-row';
 
-export default Row.extend({
-  classNames: ['colored-row'],
-  attributeBindings: ['style'],
-
-  style: computed('row.color', function () {
-    return htmlSafe(`background-color: ${this.row.color};`);
-  }).readOnly(),
-});
+@classic
+@classNames('colored-row')
+@attributeBindings('style')
+export default class ColoredRow extends Row {
+  get style() {
+    return htmlSafe(`background-color: ${this.row.get('color')};`);
+  }
+}
 // END-SNIPPET

tests/dummy/app/components/columns/draggable-table.js

@@ -1,9 +1,10 @@
 // BEGIN-SNIPPET draggable-table
+import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
-import { computed } from '@ember/object';
 
-export default BaseTable.extend({
-  columns: computed(function () {
+@classic
+export default class DraggableTable extends BaseTable {
+  get columns() {
     return [
       {
         label: 'User Details',
@@ -16,6 +17,7 @@ export default BaseTable.extend({
             valuePath: 'avatar',
             width: '60px',
             sortable: false,
+            align: 'center',
             draggable: true,
             cellComponent: 'user-avatar',
           },
@@ -57,6 +59,6 @@ export default BaseTable.extend({
         ],
       },
     ];
-  }),
-});
+  }
+}
 // END-SNIPPET

tests/dummy/app/components/columns/grouped-table.js

@@ -1,9 +1,10 @@
 // BEGIN-SNIPPET grouped-table
+import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
-import { computed } from '@ember/object';
 
-export default BaseTable.extend({
-  columns: computed(function () {
+@classic
+export default class GroupedTable extends BaseTable {
+  get columns() {
     return [
       {
         label: 'User Details',
@@ -51,6 +52,6 @@ export default BaseTable.extend({
         ],
       },
     ];
-  }),
-});
+  }
+}
 // END-SNIPPET

tests/dummy/app/components/columns/resizable-table.js

@@ -1,9 +1,10 @@
 // BEGIN-SNIPPET resizable-table
+import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
-import { computed } from '@ember/object';
 
-export default BaseTable.extend({
-  columns: computed(function () {
+@classic
+export default class ResizableTable extends BaseTable {
+  get columns() {
     return [
       {
         label: 'User Details',
@@ -61,6 +62,6 @@ export default BaseTable.extend({
         ],
       },
     ];
-  }),
-});
+  }
+}
 // END-SNIPPET