Fix template-lint issues and update template syntax

.eslintrc.js

@@ -1,8 +1,12 @@
 module.exports = {
  root: true,
+ parser: 'babel-eslint',
  parserOptions: {
  ecmaVersion: 2018,
- sourceType: 'module'
+ sourceType: 'module',
+ ecmaFeatures: {
+ legacyDecorators: true,
+ },
  },
  plugins: [
  'ember'

addon/components/ember-collection.js

@@ -1,6 +1,6 @@
 import { A } from '@ember/array';
 import Component from '@ember/component';
-import { set, get } from '@ember/object';
+import { action, set, get } from '@ember/object';
 import layout from './ember-collection/template';
 import identity from '../utils/identity';
 import needsRevalidate from '../utils/needs-revalidate';
@@ -222,26 +222,27 @@ export default Component.extend({
  return !this._renderNode;
  },
 
- actions: {
- scrollChange(scrollLeft, scrollTop) {
- if (this._scrollChange) {
- this._scrollChange(scrollLeft, scrollTop);
- } else {
- if (scrollLeft !== this._scrollLeft ||
- scrollTop !== this._scrollTop) {
- set(this, '_scrollLeft', scrollLeft);
- set(this, '_scrollTop', scrollTop);
- this._needsRevalidate();
- }
- }
- },
- clientSizeChange(clientWidth, clientHeight) {
- if (this._clientWidth !== clientWidth ||
- this._clientHeight !== clientHeight) {
- set(this, '_clientWidth', clientWidth);
- set(this, '_clientHeight', clientHeight);
+ @action
+ scrollChange(scrollLeft, scrollTop) {
+ if (this._scrollChange) {
+ this._scrollChange(scrollLeft, scrollTop);
+ } else {
+ if (scrollLeft !== this._scrollLeft ||
+ scrollTop !== this._scrollTop) {
+ set(this, '_scrollLeft', scrollLeft);
+ set(this, '_scrollTop', scrollTop);
  this._needsRevalidate();
  }
  }
+ },
+
+ @action
+ clientSizeChange(clientWidth, clientHeight) {
+ if (this._clientWidth !== clientWidth ||
+ this._clientHeight !== clientHeight) {
+ set(this, '_clientWidth', clientWidth);
+ set(this, '_clientHeight', clientHeight);
+ this._needsRevalidate();
+ }
  }
 });

addon/components/ember-collection/template.hbs

@@ -1,7 +1,7 @@
-{{#ember-native-scrollable content-size=this._contentSize scroll-left=this._scrollLeft scroll-top=this._scrollTop scrollChange=(action "scrollChange") clientSizeChange=(action "clientSizeChange")}}
+<EmberNativeScrollable @content-size={{this._contentSize}} @scroll-left={{this._scrollLeft}} @scroll-top={{this._scrollTop}} @scrollChange={{this.scrollChange}} @clientSizeChange={{this.clientSizeChange}}>
  <div>
  {{~#each this._cells as |cell|~}}
  <div style={{{cell.style}}}>{{yield cell.item cell.index }}</div>
  {{~/each~}}
  </div>
-{{/ember-native-scrollable}}
+</EmberNativeScrollable>

package.json

@@ -33,6 +33,7 @@
  "@ember/test-helpers": "^2.9.3",
  "@glimmer/component": "^1.1.2",
  "@glimmer/tracking": "^1.1.2",
+ "babel-eslint": "^10.1.0",
  "broccoli-asset-rev": "^3.0.0",
  "ember-auto-import": "^2.0.0",
  "ember-cli": "^4.12.0",

tests/dummy/app/controllers/mixed.js

@@ -1,2 +1,3 @@
 import Controller from '@ember/controller';
-export default Controller.extend({});
+
+export default class extends Controller {}

tests/dummy/app/controllers/percentages.js

@@ -1,33 +1,31 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
-export default Controller.extend({
- init() {
- this._super(...arguments);
- this.set('columns', [20, 60, 20]);
- },
+export default class PercentagesController extends Controller {
+ @tracked columns = [20, 60, 20];
 
- actions: {
- changeColumn: function(col) {
- switch (col) {
- case 1:
- this.set('columns', [25, 50, 25]);
- break;
- case 2:
- this.set('columns', [20, 20, 40, 20]);
- break;
- case 3:
- this.set('columns', [33.33, 33.33, 33.33]);
- break;
- case 4:
- this.set('columns', [50, 50]);
- break;
- case 5:
- this.set('columns', [100]);
- break;
- default:
- this.set('columns', [50, 50]);
- break;
- }
- }
+ @action
+ changeColumn(col) {
+ switch (col) {
+ case 1:
+ this.columns = [25, 50, 25];
+ break;
+ case 2:
+ this.columns = [20, 20, 40, 20];
+ break;
+ case 3:
+ this.columns = [33.33, 33.33, 33.33];
+ break;
+ case 4:
+ this.columns = [50, 50];
+ break;
+ case 5:
+ this.columns = [100];
+ break;
+ default:
+ this.columns = [50, 50];
+ break;
+ }
  }
-});
+}

tests/dummy/app/controllers/scroll-position.js

@@ -1,55 +1,52 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class ScrollPositionController extends Controller {
+ @tracked itemWidth = 100;
+ @tracked itemHeight = 100;
+ @tracked containerWidth = 315;
+ @tracked containerHeight = 600;
+ @tracked scrollLeft = 0;
+ @tracked scrollTop = 0;
+
+ @action
+ updateContainerWidth(ev) {
+ this.containerWidth = parseInt(ev.target.value, 10);
+ }
+
+ @action
+ updateContainerHeight(ev) {
+ this.containerHeight = parseInt(ev.target.value, 10);
+ }
+
+ @action
+ makeSquare() {
+ this.itemWidth = 100;
+ this.itemHeight = 100;
+ }
+
+ @action
+ makeRow() {
+ this.itemWidth = 300;
+ this.itemHeight = 100;
+ }
+
+ @action
+ makeLongRect() {
+ this.itemWidth = 100;
+ this.itemHeight = 50;
+ }
+
+ @action
+ makeTallRect() {
+ this.itemWidth = 50;
+ this.itemHeight = 100;
+ }
 
-export default Controller.extend({
- itemWidth: 100,
- itemHeight: 100,
- containerWidth: 315,
- containerHeight: 600,
- scrollLeft: 0,
- scrollTop: 0,
-
- actions: {
- updateContainerWidth: function(value) {
- this.set('containerWidth', parseInt(value, 10));
- },
-
- updateContainerHeight: function(value) {
- this.set('containerHeight', parseInt(value, 10));
- },
-
- makeSquare: function() {
- this.setProperties({
- itemWidth: 100,
- itemHeight: 100,
- });
- },
-
- makeRow: function() {
- this.setProperties({
- itemWidth: 300,
- itemHeight: 100
- });
- },
-
- makeLongRect: function() {
- this.setProperties({
- itemWidth: 100,
- itemHeight: 50
- });
- },
-
- makeTallRect: function() {
- this.setProperties({
- itemWidth: 50,
- itemHeight: 100
- });
- },
-
- scrollChange: function(scrollLeft, scrollTop){
- this.setProperties({
- scrollLeft: scrollLeft,
- scrollTop: scrollTop
- });
- }
+ @action
+ scrollChange(scrollLeft, scrollTop){
+ this.scrollLeft = scrollLeft;
+ this.scrollTop = scrollTop;
  }
-});
+}

tests/dummy/app/controllers/simple.js

@@ -1,4 +1,6 @@
 import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
 
 function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex ;
@@ -19,51 +21,48 @@ function shuffle(array) {
  return array;
 }
 
-export default Controller.extend({
- itemWidth: 100,
- itemHeight: 100,
- containerWidth: 315,
- containerHeight: 600,
+export default class SimpleController extends Controller {
+ @tracked itemWidth = 100;
+ @tracked itemHeight = 100;
+ @tracked containerWidth = 315;
+ @tracked containerHeight = 600;
 
- actions: {
- updateContainerWidth: function(value) {
- this.set('containerWidth', parseInt(value, 10));
- },
-
- updateContainerHeight: function(value) {
- this.set('containerHeight', parseInt(value, 10));
- },
+ @action
+ updateContainerWidth(ev) {
+ this.containerWidth = parseInt(ev.target.value, 10);
+ }
+
+ @action
+ updateContainerHeight(ev) {
+ this.containerHeight = parseInt(ev.target.value, 10);
+ }
 
- shuffle: function() {
- this.set('model', shuffle(this.get('model').slice(0)));
- },
+ @action
+ shuffle() {
+ this.model = shuffle(this.get('model').slice(0));
+ }
 
- makeSquare: function() {
- this.setProperties({
- itemWidth: 100,
- itemHeight: 100,
- });
- },
+ @action
+ makeSquare() {
+ this.itemWidth = 100;
+ this.itemHeight = 100;
+ }
 
- makeRow: function() {
- this.setProperties({
- itemWidth: 300,
- itemHeight: 100
- });
- },
+ @action
+ makeRow() {
+ this.itemWidth = 300;
+ this.itemHeight = 100;
+ }
 
- makeLongRect: function() {
- this.setProperties({
- itemWidth: 100,
- itemHeight: 50
- });
- },
+ @action
+ makeLongRect() {
+ this.itemWidth = 100;
+ this.itemHeight = 50;
+ }
 
- makeTallRect: function() {
- this.setProperties({
- itemWidth: 50,
- itemHeight: 100
- });
- }
+ @action
+ makeTallRect() {
+ this.itemWidth = 50;
+ this.itemHeight = 100;
  }
-});
+}

tests/dummy/app/templates/mixed.hbs

@@ -1,7 +1,7 @@
 <div class="mixed" style="position:relative;height:500px">
- {{#ember-collection items=this.model estimated-height=800 estimated-width=500 buffer=10 cell-layout=(mixed-grid-layout this.model) as |item|}}
+ <EmberCollection @items={{this.model}} @estimated-height={{800}} @estimated-width={{500}} @buffer={{10}} @cell-layout={{mixed-grid-layout this.model}} as |item|>
  <div class="list-item">
  {{item.name}}
  </div>
- {{/ember-collection}}
+ </EmberCollection>
 </div>

tests/dummy/app/templates/percentages.hbs

@@ -1,13 +1,13 @@
-<button {{action 'changeColumn' 1}}>25-50-25</button>
-<button {{action 'changeColumn' 2}}>20-20-40-20</button>
-<button {{action 'changeColumn' 3}}>33-33-33</button>
-<button {{action 'changeColumn' 4}}>50-50</button>
-<button {{action 'changeColumn' 5}}>100</button>
+<button {{on 'click' (fn this.changeColumn 1)}}>25-50-25</button>
+<button {{on 'click' (fn this.changeColumn 2)}}>20-20-40-20</button>
+<button {{on 'click' (fn this.changeColumn 3)}}>33-33-33</button>
+<button {{on 'click' (fn this.changeColumn 4)}}>50-50</button>
+<button {{on 'click' (fn this.changeColumn 5)}}>100</button>
 <hr />
 <div class="mixed" style="position:relative;height:500px;">
- {{#ember-collection items=this.model estimated-height=800 estimated-width=1000 buffer=10 cell-layout=(percentage-columns-layout this.model.length this.columns 50) as |item|}}
+ <EmberCollection @items={{this.model}} @estimated-height={{800}} @estimated-width={{1000}} @buffer={{10}} @cell-layout={{percentage-columns-layout this.model.length this.columns 50}} as |item|>
  <div class="list-item">
  {{item.name}}
  </div>
- {{/ember-collection}}
+ </EmberCollection>
 </div>