Correctly access shadowed class binding in super.*

[Zzzen]

…#11994

Q	A
Fixed Issues?	Fixes #11994
Patch: Bug Fix?
Major: Breaking Change?
Minor: New Feature?
Tests Added + Pass?	Yes
Documentation PR Link
Any Dependency Changes?
License	MIT

[babel-bot]

Build successful! You can test your changes in the REPL here: https://babeljs.io/repl/build/37187/

[Zzzen]

Copied from https://github.com/babel/babel/blob/17d62c3743ca7c529bc14ddcb890a6a31ed956b1/packages/babel-plugin-transform-classes/src/transformClass.js#L499,L502

  /**
   * Replace the constructor body of our class.
   */
  function pushConstructor(
    superReturns,
    method: { type: "ClassMethod" },
    path: NodePath,
  ) {
    // https://github.com/babel/babel/issues/1077
    if (path.scope.hasOwnBinding(classState.classRef.name)) {
      path.scope.rename(classState.classRef.name);
    }
    // ...
  }

[Zzzen]

We need to traverse here because super may appear anywhere in methods.

Edit: Ooops, super may appear anywhere in constructors too.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit 79395d9:

Sandbox	Source
babel-repl-custom-plugin	Configuration
babel-plugin-multi-config	Configuration

[nicolo-ribaudo]

I think that we need to move this logic in ReplaceSupers, so that it works for example with

class A extends B {
  method() {
    let A;
    super.#foo();
  }
}

[Zzzen]

I agree on moving logic in ReplaceSupers but can't see why the example should work: derived classes should have no access to private methods of Base classes, right? Only public and protected methods are accessible.

[nicolo-ribaudo]

It can work in cases like

class B {
  #foo = 3;

  static getA() {
    class A extends B {
      method() {
        let A;
        super.#foo();
      }
    }
  }
}

[Zzzen]

Really? Tried it on chrome 87, got: Uncaught SyntaxError: Unexpected private field

[nicolo-ribaudo]

Sorry, I was completely wrong 🙃

ReplaceSupers in the helper-create-class-features-plugin package is used for cases like this:

class A extends B {
  #foo() {
    let A;
    super.x;
  }
}

Which on main is (wrongly) transformed to

class A extends B {
  constructor(...args) {
    super(...args);

    _foo.add(this);
  }

}

var _foo2 = function _foo2() {
  let A;

  _get(_getPrototypeOf(A.prototype), "x", this);
};

[Zzzen]

👌👌 updated

[nicolo-ribaudo]

Thanks!

I've renamed the PR title so that it's clear what it does in the changelog.