@babel/plugin-transform-classes

    When extending a native class (e.g., class extends Array {}), the super class needs to be wrapped. This is needed to workaround two problems:

    • Babel transpiles classes using SuperClass.apply(/* ... */), but native classes aren’t callable and thus throw in this case.
    • Some built-in functions (like Array) always return a new object. Instead of returning it, Babel should treat it as the new this.

    The wrapper works on IE11 and every other browser with Object.setPrototypeOf or __proto__ as fallback. There is NO IE <= 10 support. If you need IE <= 10 it’s recommended that you don’t extend natives.

    Babel needs to statically know if you are extending a built-in class. For this reason, the “mixin pattern” doesn’t work:

    1. const ExtensibleArray = class extends Array {};
    3. class Foo extends mixin(ExtensibleArray) {}

    In

    1.   constructor(name) {
    2.     this.name = name;
    3.   }
    5.   logger() {
    7.   }
    8. }

    Out

    1. npm install --save-dev @babel/plugin-transform-classes
    1. // without options
    2. {
    3.   "plugins": ["@babel/plugin-transform-classes"]
    4. }
    6. // with options
    7. {
    8.     ["@babel/plugin-transform-classes", {
    9.       "loose": true
    10.     }]
    11.   ]
    12. }
    2.   plugins: ["@babel/plugin-transform-classes"],
    3. });

    boolean, defaults to false.

    1. // babel.config.json
    2. {
    3.   "assumptions": {
    4.     "constantSuper": true,
    5.     "noClassCalls": true,
    6.     "setClassMethods": true,
    7.     "superIsCallableConstructor": true
    8.   }

    Method enumerability

    Please note that in loose mode class methods are enumerable. This is not in line with the spec and you may run into issues.

    Method assignment

    Under loose mode, methods are defined on the class prototype with simple assignments instead of being defined. This can result in the following not working:

    When Bar.prototype.foo is defined it triggers the setter on . This is a case that is very unlikely to appear in production code however it’s something to keep in mind.