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

tests/dummy/app/components/cookbook/client-side-table.js

@@ -1,31 +1,36 @@
 // BEGIN-SNIPPET client-side-table
+import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
-import { computed, action } from '@ember/object';
-import { oneWay, or, sort } from '@ember/object/computed';
-import { task, timeout } from 'ember-concurrency';
+import { action } from '@ember/object';
+import { task, restartableTask, timeout } from 'ember-concurrency';
+import { tracked } from '@glimmer/tracking';
 
-export default BaseTable.extend({
-  query: '',
+@classic
+export default class PaginatedTable extends BaseTable {
+  query = '';
 
   // No need for `enableSync` here
-  enableSync: false,
+  enableSync = false;
 
-  isLoading: or('fetchRecords.isRunning', 'setRows.isRunning'),
+  model = [];
 
-  // Sort Logic
-  sortedModel: sort('model', 'sortBy'),
-  sortBy: computed('dir', 'sort', function () {
-    return [`${this.sort}:${this.dir}`];
-  }).readOnly(),
+  get sortedModel() {
+    if (this.dir === 'asc') return this.model.sortBy(this.sort);
+    else return this.model.sortBy(this.sort).reverse();
+  }
 
-  // Filter Input Setup
-  selectedFilter: oneWay('possibleFilters.firstObject'),
-  // eslint-disable-next-line ember/require-computed-macros
-  possibleFilters: computed('table.columns', function () {
+  get isLoading() {
+    return this.fetchRecord?.isRunning || this.setRows?.isRunning;
+  }
+
+  // Filter Input
+  @tracked selectedFilter = this.possibleFilters.firstObject;
+
+  get possibleFilters() {
     return this.table.columns.filterBy('sortable', true);
-  }).readOnly(),
+  }
 
-  columns: computed(function () {
+  get columns() {
     return [
       {
         label: 'Avatar',
@@ -57,55 +62,56 @@ export default BaseTable.extend({
         valuePath: 'country',
       },
     ];
-  }),
+  }
 
-  fetchRecords: task(function* () {
-    let records = yield this.store.query('user', { page: 1, limit: 100 });
+  @task({ on: 'init' }) *fetchRecords() {
+    const records = yield this.store.query('user', { page: 1, limit: 100 });
     this.model.setObjects(records.toArray());
-    this.set('meta', records.meta);
+    this.meta = records.meta;
     yield this.filterAndSortModel.perform();
-  }).on('init'),
+  }
 
-  setRows: task(function* (rows) {
+  @restartableTask *setRows(rows) {
     this.table.setRows([]);
     yield timeout(100); // Allows isLoading state to be shown
     this.table.setRows(rows);
-  }).restartable(),
+  }
 
-  filterAndSortModel: task(function* (debounceMs = 200) {
+  @restartableTask *filterAndSortModel(debounceMs = 200) {
     yield timeout(debounceMs); // debounce
 
-    let { query } = this;
-    let model = this.sortedModel;
+    const query = this.query;
+    const model = this.sortedModel;
     let result = model;
 
     if (query !== '' && this.selectedFilter !== undefined) {
-      let { valuePath } = this.selectedFilter;
+      const { valuePath } = this.selectedFilter;
 
       result = model.filter((m) => {
         return m.get(valuePath).toLowerCase().includes(query.toLowerCase());
       });
     }
 
     yield this.setRows.perform(result);
-  }).restartable(),
+  }
 
-  actions: {
-    onColumnClick(column) {
-      if (column.sorted) {
-        this.setProperties({
-          dir: column.ascending ? 'asc' : 'desc',
-          sort: column.valuePath,
-        });
+  @action
+  onColumnClick(column) {
+    if (column.sorted) {
+      this.dir = column.ascending ? 'asc' : 'desc';
+      this.sort = column.valuePath;
+      this.filterAndSortModel.perform(100);
+    }
+  }
 
-        this.filterAndSortModel.perform(0);
-      }
-    },
-  },
+  @action
+  updateQuery(event) {
+    this.query = event.target.value;
+  }
 
   @action
   onSearchChange() {
     this.filterAndSortModel.perform();
-  },
-});
+  }
+}
 // END-SNIPPET