Legacy browser support: Issue with subclassing "Promise"

Related to #51. react-async is hard to use in legacy ES5 browsers due to the implementation of NeverSettle class. The problem is subclassing native Promise is not supported in well-known transpilers, and to achieve this we have to polyfill Reflect and use custom transpilers.

References:

• babel: https://github.com/babel/babel/issues/1120
• typescript: https://github.com/microsoft/TypeScript/issues/15397

Built-in classes such as Date, Array, DOM etc cannot be properly subclassed due to limitations in ES5 (for the transform-classes plugin). You can try to use babel-plugin-transform-builtin-extend based on Object.setPrototypeOf and Reflect.construct, but it also has some limitations. https://babeljs.io/docs/en/caveats/#classes

Let me show an example:

• source: https://github.com/async-library/react-async/blob/ac09f5ff06ab679b366b1876a06632915682c630/packages/react-async/src/reducer.js#L3-L22

• transpiled (ES5)

var NeverSettle = (function (_super) {
    __extends(NeverSettle, _super);
    function NeverSettle() {
        var _this = _super.call(this, function () { }, function () { }) || this;
        ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
                    ^ TypeError: undefined is not a promise

        if (Object.setPrototypeOf) {
            Object.setPrototypeOf(_this, NeverSettle.prototype);
        }
        return _this;
    }
    NeverSettle.prototype.finally = function () {
        return this;
    };
    NeverSettle.prototype.catch = function () {
        return this;
    };
    NeverSettle.prototype.then = function () {
        return this;
    };
    return NeverSettle;
}(Promise));

• simple reproducible code about the error:

Promise.call(this, function () {}, function () {})
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
^ TypeError: undefined is not a promise
    at Promise (<anonymous>)

So I wish we can change the NeverSettle implementation rather than force us to set it up that complex setup. For example:

class NeverSettle {
  constructor() {
    const promise = new Promise(() => {}, () => {});
    this.then = promise.then.bind(promise);
    this.catch = promise.catch.bind(promise);
    this.finally = promise.finally.bind(promise);
  }
}

[ghengeveld]

Hey, thanks for reporting this! It’s a pretty big problem so we need to find a proper solution. However, the new Promise workaround is not the right one. This was in fact the original implementation, but it was changed because it causes a memory leak, where callbacks chained on it will never be called and never garbage collected, because the promise itself never resolves. So instead, I’m looking to do something like this:

function NeverSettle() {}

Object.setPrototypeOf(NeverSettle, Promise)

NeverSettle.prototype = Object.assign(Object.create(Promise.prototype), {
  finally() {
    return this
  },
  catch() {
    return this
  },
  then() {
    return this
  },
})

[ghengeveld]

Awesome. I’ll ship it early next week, as I’m out for the weekend.