[BREAKING] fixes #444 #662 converts ES6 native classes to ember objec…

…ts (#701)

This is a breaking change as it converts the new Class() syntax to Class.create().
In addition, the only way I could get these to work was to convert the positional arguments to named args in an options hashes:

`new Table(columns, rows)` => `Table.create(columns: columns, rows: rows)`
`new Row(content, options)` => `Row.create({ content: })`
`new Column(opts)` => `Column.create(opts)`

We’ve had to replace the native constructor methods with emberObject init methods as per the official docs which should also fix #699. As a result we’ve removed the Ember 2.12 ‘hacks’ which shouldn’t be an issue as we’ve bumped ember version minimum version to 2.18.

addon/classes/Column.js

@@ -315,33 +315,15 @@ export default class Column extends EmberObject.extend({
     return emberArray(isHidden ? [] : subColumns.filterBy('isHidden', false));
   }).readOnly(),
 
-  init(...args) {
-    this._super(...args);
+  init(options = {}) {
+    this.setProperties(options);
 
-    const subColumns = emberArray(makeArray(this.get('subColumns')).map((sc) => new Column(sc)));
+    const subColumns = emberArray(makeArray(this.get('subColumns')).map((sc) => Column.create(sc)));
     subColumns.setEach('parent', this);
 
     this.set('subColumns', subColumns);
   }
-}) {
-  /**
-   * @class Column
-   * @constructor
-   * @param {Object} options
-   */
-  constructor(options = {}) {
-    // TODO: Revert this, when babel#5862 is resolved.
-    //       https://github.com/babel/babel/issues/5862
-    // HACK: Passing properties to super instead of manually setting them fixes the
-    //       implicit run loop creation for Ember 2.12.
-    //       https://travis-ci.org/offirgolan/ember-light-table/jobs/344818839#L790
-    super(options);
-
-    if (options instanceof Column) {
-      return options;
-    }
-  }
-}
+}) {}
 
 // https://github.com/offirgolan/ember-light-table/issues/436#issuecomment-310138868
 fixProto(Column);

addon/classes/Row.js

@@ -77,26 +77,7 @@ export default class Row extends ObjectProxy.extend({
   rowId: computed(function() {
     return guidFor(this);
   }).readOnly()
-}) {
-  /**
-   * @class Row
-   * @constructor
-   * @param {Object} content
-   * @param {Object} options
-   */
-  constructor(content, options = {}) {
-    // TODO: Revert this, when babel#5862 is resolved.
-    //       https://github.com/babel/babel/issues/5862
-    // HACK: Passing properties to super instead of manually setting them fixes the
-    //       implicit run loop creation for Ember 2.12.
-    //       https://travis-ci.org/offirgolan/ember-light-table/jobs/344818839#L790
-    super(Object.assign({}, options, { content }));
-
-    if (content instanceof Row) {
-      return content;
-    }
-  }
-}
+}) {}
 
 // https://github.com/offirgolan/ember-light-table/issues/436#issuecomment-310138868
 fixProto(Row);

addon/classes/Table.js

@@ -6,6 +6,7 @@ import Column from 'ember-light-table/classes/Column';
 import SyncArrayProxy from 'ember-light-table/-private/sync-array-proxy';
 import { mergeOptionsWithGlobals } from 'ember-light-table/-private/global-options';
 import fixProto from 'ember-light-table/utils/fix-proto';
+import { assign } from '@ember/polyfills';
 import { isNone } from '@ember/utils';
 
 const RowSyncArrayProxy = SyncArrayProxy.extend({
@@ -133,43 +134,41 @@ export default class Table extends EmberObject.extend({
       arr.pushObjects(c.get('isGroupColumn') ? c.get('subColumns') : [c]);
       return arr;
     }, emberArray([]));
-  }).readOnly()
-}) {
+  }).readOnly(),
+
   /**
    * @class Table
    * @constructor
-   * @param  {Array} columns
-   * @param  {Array} rows
    * @param  {Object} options
+   * @param  {Array} options.columns
+   * @param  {Array} options.rows
    * @param  {Boolean} options.enableSync If `true`, creates a two way sync
    *           between the table's rows and the passed rows collection. Also see
    *           `setRowsSynced(rows)`.
    * @param  {Object}  options.rowOptions Options hash passed through to
    *           `createRow(content, options)`.
    */
-  constructor(columns = [], rows = [], options = {}) {
-    super();
-
+  init(options = {}) {
+    let { columns = [], rows = [] } = options;
     assert('[ember-light-table] columns must be an array if defined', isArray(columns));
     assert('[ember-light-table] rows must be an array if defined', isArray(rows));
 
-    let _options = mergeOptionsWithGlobals(options);
-    let _columns = emberArray(Table.createColumns(columns));
-    let _rows = emberArray(Table.createRows(rows, _options.rowOptions));
+    this.setProperties(mergeOptionsWithGlobals(options));
+
+    this.set('columns', emberArray(Table.createColumns(columns)));
+
+    let _rows = emberArray(Table.createRows(rows, this.get('rowOptions')));
 
-    if (_options.enableSync) {
+    if (this.get('enableSync')) {
       _rows = RowSyncArrayProxy.create({
         syncArray: rows,
         content: _rows
       });
     }
 
-    this.setProperties({
-      columns: _columns,
-      rows: _rows
-    });
+    this.set('rows', _rows);
   }
-
+}) {
   destroy() {
     this._super(...arguments);
 
@@ -411,7 +410,11 @@ export default class Table extends EmberObject.extend({
    * @return {Row}
    */
   static createRow(content, options = {}) {
-    return new Row(content, options);
+    if (content instanceof Row) {
+      return content;
+    } else {
+      return Row.create(assign({}, options, { content }));
+    }
   }
 
   /**
@@ -434,7 +437,11 @@ export default class Table extends EmberObject.extend({
    * @return {Column}
    */
   static createColumn(column) {
-    return new Column(column);
+    if (column instanceof Column) {
+      return column;
+    } else {
+      return Column.create(column);
+    }
   }
 
   /**

addon/index.js

@@ -27,7 +27,7 @@ import Row from './classes/Row';
  * ```javascript
  * import Table from 'ember-light-table';
  *
- * const table = new Table(columns, rows, options);
+ * const table = Table.create({ columns: columns, rows: rows });
  * ```
  *
  * Here is a more real-word example
@@ -59,7 +59,7 @@ import Row from './classes/Row';
  *   }),
  *
  *   table: computed('model', function() {
- *    return new Table(this.get('columns'), this.get('model'));
+ *    return Table.create({ columns: this.get('columns'), rows: this.get('model') });
  *   })
  * });
  * ```
@@ -72,7 +72,7 @@ import Row from './classes/Row';
  * ```javascript
  * import Table from 'ember-light-table';
  *
- * const table = new Table(columns, model, { enableSync: true });
+ * const table = Table.create({ columns: columns, rows: model, enableSync: true });
  * ```
  *
  * The `enableSync` options creates a __two way__ sync. This means that any manipulation

blueprints/cell-type-test/files/tests/integration/components/light-table/cells/__name__-test.js

@@ -12,8 +12,8 @@ test('it renders', function(assert) {
 });
 
 test('it renders value', function(assert) {
-  this.set('column', new Column({ valuePath: 'foo' }));
-  this.set('row', new Row({ foo: 'bar' }));
+  this.set('column', Column.create({ valuePath: 'foo' }));
+  this.set('row', Row.create({ content: { foo: 'bar' } }));
 
   this.render(hbs`{{light-table/cells/<%= dasherizedModuleName %> column row rawValue=(get row column.valuePath)}}`);
 

blueprints/column-type-test/files/tests/integration/components/light-table/columns/__name__-test.js

@@ -12,7 +12,7 @@ test('it renders', function(assert) {
 });
 
 test('it renders label', function(assert) {
-  this.set('column', new Column({ label: '<%= dasherizedModuleName %>' }));
+  this.set('column', Column.create({ label: '<%= dasherizedModuleName %>' }));
 
   this.render(hbs`{{light-table/columns/<%= dasherizedModuleName %> column}}`);
 

tests/dummy/app/mixins/table-common.js

@@ -26,7 +26,7 @@ export default Mixin.create({
   init() {
     this._super(...arguments);
 
-    let table = new Table(this.get('columns'), this.get('model'), { enableSync: this.get('enableSync') });
+    let table = Table.create({ columns: this.get('columns'), rows: this.get('model'), enableSync: this.get('enableSync') });
     let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sort'));
 
     // Setup initial sort column

tests/integration/components/light-table-occlusion-test.js

@@ -23,7 +23,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
   });
 
   test('it renders', async function(assert) {
-    this.set('table', new Table());
+    this.set('table', Table.create());
     await render(hbs `{{light-table table height="40vh" occlusion=true estimatedRowHeight=30}}`);
 
     assert.equal(find('*').textContent.trim(), '');
@@ -32,7 +32,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
   test('scrolled to bottom', async function(assert) {
     assert.expect(4);
 
-    this.set('table', new Table(Columns, this.server.createList('user', 50)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 50) }));
 
     this.set('onScrolledToBottom', () => {
       assert.ok(true);
@@ -58,7 +58,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
 
   test('fixed header', async function(assert) {
     assert.expect(2);
-    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 5) }));
 
     await render(hbs `
       {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
@@ -81,7 +81,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
 
   test('fixed footer', async function(assert) {
     assert.expect(2);
-    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 5) }));
 
     await render(hbs `
       {{#light-table table height='500px' id='lightTable' occlusion=true estimatedRowHeight=30 as |t|}}
@@ -104,7 +104,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
 
   test('table assumes height of container', async function(assert) {
 
-    this.set('table', new Table(Columns, this.server.createList('user', 5)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 5) }));
     this.set('fixed', true);
 
     await render(hbs `
@@ -121,7 +121,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
   });
 
   test('table body should consume all available space when not enough content to fill it', async function(assert) {
-    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 1) }));
     this.set('fixed', true);
 
     await render(hbs `
@@ -148,7 +148,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
 
     this.owner.register('component:custom-row', RowComponent);
 
-    this.set('table', new Table(Columns, this.server.createList('user', 1)));
+    this.set('table', Table.create({ columns: Columns, rows: this.server.createList('user', 1) }));
 
     await render(hbs `
       {{#light-table table occlusion=true estimatedRowHeight=30 as |t|}}
@@ -170,7 +170,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
     }));
 
     let users = this.server.createList('user', 3);
-    this.set('table', new Table(Columns, users));
+    this.set('table', Table.create({ columns: Columns, rows: users }));
 
     await render(hbs `
       {{#light-table table height='500px' occlusion=true estimatedRowHeight=30 as |t|}}
@@ -222,7 +222,7 @@ module('Integration | Component | light table | occlusion', function(hooks) {
       cellComponent: 'some-component'
     }];
 
-    this.set('table', new Table(columns, [{}]));
+    this.set('table', Table.create({ columns, rows: [{}] }));
 
     this.actions.someAction = () => {
       assert.ok(true, 'table action is passed');