[IE <= 10] Column, Row, Table: static properties (reopen, ...) not inherited

[mastastealth]

I have a component using the table that does a little bit of customizations via reopen. Oddly enough, only 2 of the 10 seem to fail. I get a:
TypeError: Object doesn't support property or method 'reopen'
...in IE10 for TableHeaderMixin and ColumnClass (though disabling ColumnClass makes the other work, so I think it is the maint culprit).

However, reopening LightTable, Header, Footer, Row, Column, Cell, and SortableObjects works just fine. Firefox reopens all of them too, so is there anything in particular I should know about ColumnClass giving errors? 🤔

As an example, when I have IE10 console log the ColumnClass for me (before reopening) it returns:

function Column() {
      var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0];

      _classCallCheck(this, Column);

      if (options instanceof Column) {
        return options;
      }

      _get(Object.getPrototypeOf(Column.prototype), 'constructor', this).call(this);
      this.setProperties(options);

      var subColumns = options.subColumns;

      subColumns = emberArray(makeArray(subColumns).map(function (sc) {
        return new Column(sc);
      }));
      subColumns.setEach('parent', this);

      this.set('subColumns', subColumns);
    } 

which seems to be the correct function. Unfortunately I tried to get a twiddle of this, but ember-twiddle doesn't work on IE10 either! 😅

[buschtoens]

Thank you for reporting this issue! I was able to reproduce it in IE10 and IE9 as well.

...in IE10 for TableHeaderMixin and ColumnClass (though disabling ColumnClass makes the other work, so I think it is the maint culprit).

Your assessment is correct. Column is the only class that cannot be reopened. If I'm not missing some weird edge case, TableHeaderMixin can be reopened just fine. You probably just confused some errors, but please do correct me, if I'm wrong.

Furthermore, I have found that all three classes files (and only these) are problematic:

• Column
• Row
• Table

This makes sense, as all three share the same specialty: they are "real" ES6 classes intermingled with EmberObjects:

export default class Column extends EmberObject.extend({
  // ..
}) {
  constructor() {
    // ...
  }
}

I'm gonna work off of that assumption, but would love it, if you could verify or disprove that.

[buschtoens]

I'm pretty sure, that I've identified the error. The prototype chain isn't set up correctly. I would argue, that this is due to IE10 not supporting __proto__. But I'll have to investigate further.

IE10

IE11

[buschtoens]

Internet Explorer

Classes (10 and below)

If you’re inheriting from a class then static properties are inherited from it via __proto__, this is widely supported but you may run into problems with much older browsers.

NOTE: __proto__ is not supported on IE <= 10 so static properties will not be inherited. See the protoToAssign for a possible work around.

For classes that have supers, the super class won’t resolve correctly. You can get around this by enabling the loose option in the es2015-classes plugin.

https://babeljs.io/docs/usage/caveats/#internet-explorer-classes-10-and-below-

[buschtoens]

I don't really see a reason, why these three classes were implemented in such a way, but it's been so right from the beginning. Most likely to enable using new Column(options) instead of Column.create(options). Same goes for Row and Table.

The cleanest fix is discarding the ES6 magic and exclusively using good ol' EmberObjects. However that would break all apps.

Alternatively we could either:

• Statically assign properties like reopen. Basically what protoToAssign does. Maybe we ca even use that transform on these files. This will likely penalize performance.
• Attempt to somehow access the underlying EmberObject with some magic or explicitly expose it. However, this would require users to be aware of that quirk.

[buschtoens]

Third option: feature-detect __proto__ support and only assign these properties if necessary.

[buschtoens]

If you use (Column|Row|Table).prototype.reopen it works in old IE and newer browsers.

Table.__proto__.reopen({
  getColumns() {
    return this.get('columns');
  }
});

const t = new Table([{ label: 'foo' }], []);
console.log(t.getColumns())

[buschtoens]

@alexander-alvarez We can either document this quirk as the official way going forward and call it a day or attempt to feature-detect and conditionally polyfill.

[buschtoens]

I'll give polyfilling a shot tomorrow and we'll see how it works out.

[buschtoens]

@mastastealth The issue has been resolved in master. It would be super nice of you, if you could give this a try with all sorts of reopens and reopenClasses your heart desires. 😊

# if you're using yarn
yarn add offirgolan/ember-light-table#master

# or npm
npm install --save offirgolan/ember-light-table#master