From f10c6aee35a75174f2101e37867d2a7672720e8a Mon Sep 17 00:00:00 2001 From: Robert Wagner Date: Thu, 21 Jul 2022 15:50:13 -0400 Subject: [PATCH] Convert dummy app to glimmer components (#806) --- package.json | 4 ++-- tests/dummy/app/adapters/application.js | 2 -- tests/dummy/app/components/base-table.js | 18 ++++++------------ tests/dummy/app/components/code-panel.js | 11 +++++------ .../app/components/columns/draggable-table.js | 2 -- .../app/components/columns/grouped-table.js | 2 -- .../app/components/columns/resizable-table.js | 2 -- .../components/cookbook/client-side-table.js | 6 ++---- .../components/cookbook/custom-row-table.js | 2 -- .../cookbook/custom-sort-icon-table.js | 2 -- .../cookbook/horizontal-scrolling-table.js | 2 -- .../app/components/cookbook/occluded-table.js | 8 +++----- .../app/components/cookbook/paginated-table.js | 8 +++----- .../components/cookbook/table-actions-table.js | 2 -- tests/dummy/app/components/materialize-icon.js | 7 ------- tests/dummy/app/components/responsive-table.js | 2 -- .../app/components/rows/expandable-table.js | 2 -- .../app/components/rows/selectable-table.js | 2 -- tests/dummy/app/components/scrolling-table.js | 2 -- tests/dummy/app/components/simple-table.js | 2 -- tests/dummy/app/models/user.js | 2 -- tests/dummy/app/routes/table-route.js | 2 -- 22 files changed, 21 insertions(+), 71 deletions(-) delete mode 100644 tests/dummy/app/components/materialize-icon.js diff --git a/package.json b/package.json index fe59405a..70d34b15 100644 --- 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 index 894352ff..4075ac70 100644 --- 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 index 0cdad41f..91eb1c4d 100644 --- a/tests/dummy/app/components/base-table.js +++ b/tests/dummy/app/components/base-table.js @@ -1,6 +1,5 @@ // 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'; @@ -8,12 +7,9 @@ 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; @@ -21,14 +17,12 @@ export default class BaseTable extends Component { @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 index 766e7f11..e27c731c 100644 --- 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 index 4a04204d..bb1c248f 100644 --- 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 index 0348b35d..7119f57f 100644 --- 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 index cc7c52c0..76f377ae 100644 --- 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 index 24748a07..21e89dcb 100644 --- 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 index 39d0092e..0bd60f3d 100644 --- 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 index e62b9938..dec4f40b 100644 --- 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 index 35f89061..e6f21548 100644 --- 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 index eacf23c2..b605972a 100644 --- 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 index 308fed48..12a633aa 100644 --- 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 index d16fafc9..dad62ab6 100644 --- 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 deleted file mode 100644 index 89610e95..00000000 --- a/tests/dummy/app/components/materialize-icon.js +++ /dev/null @@ -1,7 +0,0 @@ -// BEGIN-SNIPPET materialize-icon -import classic from 'ember-classic-decorator'; -import Component from '@ember/component'; - -@classic -export default class MaterializeIcon extends Component {} -// END-SNIPPET diff --git a/tests/dummy/app/components/responsive-table.js b/tests/dummy/app/components/responsive-table.js index bd50d67b..53892ec5 100644 --- 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 index f17cb8c3..c9b5e70c 100644 --- 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 index e4d732ca..9bc783d1 100644 --- 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 index 46f9c2ea..57c9602b 100644 --- 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 index 404f22cb..c5e71b95 100644 --- 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 index 1a4797cc..f571608c 100644 --- 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 index 64b07d35..c04f8d65 100644 --- 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([]);