With no transforms enabled, top-level arrow functions get transformed (T7419)

[babel-bot]

Issue originally made by @spicyj

Bug information

• Babel version: 6.7.7
• Node version: 6
• npm version: 3.8.6

Options

babel.transform(src, {plugins: []}).code

Input code

var x = () => this;
(function() { var y = () => this; });

Description

If you have no transforms enabled, top-level arrow functions still get transformed by the shadow-functions internal plugin. For the input code above, you get this output:

var _this = this;

var x = () => _this;
(function () {
  var y = () => this;
});

Note that the top-level arrow function x is transformed (bad) but y is not (good).

Repros in the repl at http://babeljs.io/repl/#?evaluate=false&lineWrap=false&presets=stage-3&experimental=true&loose=false&spec=false&playground=false&code=var%20x%20%3D%20()%20%3D%3E%20this%3B%0A(function()%20%7B%20var%20x%20%3D%20()%20%3D%3E%20this%3B%20%7D)%3B.

[babel-bot]

Comment originally made by @spicyj

Actually, I can reproduce the problem I'm seeing in a less contrived example too, using passPerPreset.

Run this in the REPL in the babel dir:

console.log(require('./packages/babel-core').transform('class C { x = () => this; }', {
  presets: {
    plugins: [
      './packages/babel-plugin-transform-class-properties',
      './packages/babel-plugin-transform-es2015-classes',
      './packages/babel-plugin-transform-es2015-arrow-functions'
    ]
  },
  passPerPreset: true
}).code)

You get:

var _this = this;

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

let C = function C() {
  _classCallCheck(this, C);

  this.x = function () {
    return _this;
  };
};

Note that the _this binding is incorrect in the transformed arrow function. If you disable passPerPreset, you get this, which is correct:

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

let C = function C() {
  var _this = this;

  _classCallCheck(this, C);

  this.x = function () {
    return _this;
  };
};

This happens because the first plugins pass has no plugins to operate on so it only uses the INTERNAL_PLUGINS list.

[fab1an]

I'm running into this problem as well and it breaks my scope in es6-classes. I'm running a plugin that adds class-properties before they get transformed.

Simple test, copied from #4230:

.babelrc:

{
    plugins: [
        'babel-plugin-syntax-class-properties'
    ]
}

Input:

class Test {
    onPress = () => {
        console.log(this.id)
    }
}

Output:

var _this = this;

class Test {
    onPress = () => {
        console.log(_this.id);
    };
}

[motiz88]

Regarding this and #4230 - Would a PR special-casing class property initializers in shadow-functions be welcome? @spicyj / @hzoo? (Update - Here it is #4502 😄)

[hzoo]

Was closed by #4502

[sophiebits]

Neat, happy to have a workaround. I would argue that the current code is still wrong though since Babel shouldn't change your code at all if you have no transforms enabled, and it still does get rid of arrows in other contexts.

[hzoo]

Yeah I guess it's because that shadow-function transform is always on as an internal transform - should look into that.