Convert dummy app to glimmer components (#806)

adopted-ember-addons · Jul 21, 2022 · f10c6ae · f10c6ae
1 parent f6c9297
commit f10c6ae
Show file tree

Hide file tree

Showing 22 changed files with 21 additions and 71 deletions.
diff --git a/package.json b/package.json
@@ -37,6 +37,8 @@
     "@fortawesome/free-brands-svg-icons": "^5.15.2",
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
     "@html-next/vertical-collection": "^3.0.0",
     "ember-classic-decorator": "^3.0.0",
     "ember-cli-babel": "^7.26.6",
@@ -55,8 +57,6 @@
     "@ember/test-helpers": "^2.4.2",
     "@embroider/test-setup": "^1.8.3",
     "@faker-js/faker": "^7.3.0",
-    "@glimmer/component": "^1.0.4",
-    "@glimmer/tracking": "^1.0.4",
     "babel-eslint": "^10.1.0",
     "broccoli-asset-rev": "^3.0.0",
     "ember-auto-import": "^2.4.2",

diff --git a/tests/dummy/app/adapters/application.js b/tests/dummy/app/adapters/application.js
@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
 import JSONAPIAdapter from '@ember-data/adapter/json-api';
 import ENV from '../config/environment';
 
-@classic
 export default class Application extends JSONAPIAdapter {
   namespace = `${ENV.rootURL}api`;
 }
diff --git a/tests/dummy/app/components/base-table.js b/tests/dummy/app/components/base-table.js
@@ -1,34 +1,28 @@
 // BEGIN-SNIPPET base-table
-import classic from 'ember-classic-decorator';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
 import { action } from '@ember/object';
 import { isEmpty } from '@ember/utils';
 import { inject as service } from '@ember/service';
 import Table from 'ember-light-table';
 import { restartableTask } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class BaseTable extends Component {
   @service store;
 
-  model = null;
-
   @tracked canLoadMore = true;
   @tracked dir = 'asc';
   @tracked limit = 10;
   @tracked meta = null;
   @tracked page = 0;
   @tracked sort = 'firstName';
 
-  table = null;
-
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
 
     const table = Table.create({
       columns: this.columns,
-      rows: this.model,
+      rows: this.args.model,
     });
     const sortColumn = table.get('allColumns').findBy('valuePath', this.sort);
 
@@ -52,7 +46,7 @@ export default class BaseTable extends Component {
       dir: this.dir,
     });
     const recordsArray = records.toArray();
-    this.model.pushObjects(recordsArray);
+    this.args.model.pushObjects(recordsArray);
     this.table.addRows(recordsArray);
     this.meta = records.meta;
     this.canLoadMore = !isEmpty(records);
@@ -73,7 +67,7 @@ export default class BaseTable extends Component {
       this.sort = column.get('valuePath');
       this.canLoadMore = true;
       this.page = 0;
-      this.model.clear();
+      this.args.model.clear();
     }
   }
 }

diff --git a/tests/dummy/app/components/code-panel.js b/tests/dummy/app/components/code-panel.js
@@ -1,9 +1,8 @@
-import classic from 'ember-classic-decorator';
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
 
-@classic
 export default class CodePanel extends Component {
-  collapse = true;
-  title = '';
-  snippets = null;
+  @tracked collapse = true;
+  elementId = guidFor(this);
 }
diff --git a/tests/dummy/app/components/columns/draggable-table.js b/tests/dummy/app/components/columns/draggable-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET draggable-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class DraggableTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/columns/grouped-table.js b/tests/dummy/app/components/columns/grouped-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET grouped-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class GroupedTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/columns/resizable-table.js b/tests/dummy/app/components/columns/resizable-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET resizable-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class ResizableTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/cookbook/client-side-table.js b/tests/dummy/app/components/cookbook/client-side-table.js
@@ -1,11 +1,9 @@
 // BEGIN-SNIPPET client-side-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 import { action } from '@ember/object';
 import { restartableTask, timeout } from 'ember-concurrency';
 import { tracked } from '@glimmer/tracking';
 
-@classic
 export default class PaginatedTable extends BaseTable {
   query = '';
 
@@ -61,8 +59,8 @@ export default class PaginatedTable extends BaseTable {
     ];
   }
 
-  init() {
-    super.init(...arguments);
+  constructor() {
+    super(...arguments);
     this.fetchRecords.perform();
   }
 

diff --git a/tests/dummy/app/components/cookbook/custom-row-table.js b/tests/dummy/app/components/cookbook/custom-row-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET custom-row-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class CustomRowTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/cookbook/custom-sort-icon-table.js b/tests/dummy/app/components/cookbook/custom-sort-icon-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET custom-sort-icon-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class CustomSortIconTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/cookbook/horizontal-scrolling-table.js b/tests/dummy/app/components/cookbook/horizontal-scrolling-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET horizontal-scrolling-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class HorizontalScrollingTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/cookbook/occluded-table.js b/tests/dummy/app/components/cookbook/occluded-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET occluded-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class OccludedTable extends BaseTable {
   limit = 100;
 
@@ -40,9 +38,9 @@ export default class OccludedTable extends BaseTable {
     ];
   }
 
-  init() {
-    super.init(...arguments);
-    this.set('page', 1);
+  constructor() {
+    super(...arguments);
+    this.page = 1;
     this.fetchRecords.perform();
   }
 }

diff --git a/tests/dummy/app/components/cookbook/paginated-table.js b/tests/dummy/app/components/cookbook/paginated-table.js
@@ -1,9 +1,7 @@
 // BEGIN-SNIPPET paginated-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 import { action } from '@ember/object';
 
-@classic
 export default class PaginatedTable extends BaseTable {
   limit = 12;
 
@@ -41,9 +39,9 @@ export default class PaginatedTable extends BaseTable {
     ];
   }
 
-  init() {
-    super.init(...arguments);
-    this.send('setPage', 1);
+  constructor() {
+    super(...arguments);
+    this.setPage(1);
   }
 
   @action

diff --git a/tests/dummy/app/components/cookbook/table-actions-table.js b/tests/dummy/app/components/cookbook/table-actions-table.js
@@ -1,9 +1,7 @@
 // BEGIN-SNIPPET table-actions-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 import { action } from '@ember/object';
 
-@classic
 export default class TableActionsTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/materialize-icon.js b/tests/dummy/app/components/materialize-icon.js
diff --git a/tests/dummy/app/components/responsive-table.js b/tests/dummy/app/components/responsive-table.js
@@ -1,9 +1,7 @@
 // BEGIN-SNIPPET responsive-table
-import classic from 'ember-classic-decorator';
 import BaseTable from './base-table';
 import { action } from '@ember/object';
 
-@classic
 export default class ResponsiveTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/rows/expandable-table.js b/tests/dummy/app/components/rows/expandable-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET expandable-table
-import classic from 'ember-classic-decorator';
 import BaseTable from '../base-table';
 
-@classic
 export default class ExpandableTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/components/rows/selectable-table.js b/tests/dummy/app/components/rows/selectable-table.js
@@ -1,9 +1,7 @@
 // BEGIN-SNIPPET selectable-table
 import BaseTable from '../base-table';
 import { action } from '@ember/object';
-import classic from 'ember-classic-decorator';
 
-@classic
 export default class ExpandableTable extends BaseTable {
   get hasSelection() {
     return this.table.selectedRows;

diff --git a/tests/dummy/app/components/scrolling-table.js b/tests/dummy/app/components/scrolling-table.js
@@ -1,9 +1,7 @@
 // BEGIN-SNIPPET scrolling-table
-import classic from 'ember-classic-decorator';
 import BaseTable from './base-table';
 import { action } from '@ember/object';
 
-@classic
 export default class ScrollingTable extends BaseTable {
   currentScrollOffset = 0;
   scrollTo = 0;

diff --git a/tests/dummy/app/components/simple-table.js b/tests/dummy/app/components/simple-table.js
@@ -1,8 +1,6 @@
 // BEGIN-SNIPPET simple-table
-import classic from 'ember-classic-decorator';
 import BaseTable from './base-table';
 
-@classic
 export default class SimpleTable extends BaseTable {
   get columns() {
     return [

diff --git a/tests/dummy/app/models/user.js b/tests/dummy/app/models/user.js
@@ -1,7 +1,5 @@
-import classic from 'ember-classic-decorator';
 import Model, { attr } from '@ember-data/model';
 
-@classic
 export default class User extends Model {
   @attr('string')
   firstName;

diff --git a/tests/dummy/app/routes/table-route.js b/tests/dummy/app/routes/table-route.js
@@ -1,8 +1,6 @@
-import classic from 'ember-classic-decorator';
 import { A } from '@ember/array';
 import Route from '@ember/routing/route';
 
-@classic
 export default class TableRouteRoute extends Route {
   model() {
     return A([]);