Don't insert __self: this within constructors of derived classes (#13552)

* Don't insert `__self: this` prior to `super()` calls (#13550)

`__self: this` is inserted for debugging purposes. However, it will cause a runtime error if it is inserted prior to a `super()` call in a constructor. This commit will prevent `__self: this` from inserted when there is a following `super()` call.

* Prevent adding `__self` within a constructor that has `super()` altogether.

* Fix 2 typos in the comments.

* Add an additional test case for constructors that do not have a `super()` call.

* Detect `super()` call by testing whether the class has a superclass.

* Update method name and corresponding comments

* Add an additional test for the case where the derived class do not have a `super()` call.

* Apply the same changes to babel-plugin-transform-react-jsx

packages/babel-plugin-transform-react-jsx-self/src/index.js

@@ -1,7 +1,8 @@
 /**
  * This adds a __self={this} JSX attribute to all JSX elements, which React will use
- * to generate some runtime warnings.
- *
+ * to generate some runtime warnings. However, if the JSX element appears within a
+ * constructor of a derived class, `__self={this}` will not be inserted in order to
+ * prevent runtime errors.
  *
  * == JSX Literals ==
  *
@@ -16,11 +17,64 @@ import { types as t } from "@babel/core";
 
 const TRACE_ID = "__self";
 
+/**
+ * Finds the closest parent function that provides `this`. Specifically, this looks for
+ * the first parent function that isn't an arrow function.
+ *
+ * Derived from `Scope#getFunctionParent`
+ */
+function getThisFunctionParent(path) {
+  let scope = path.scope;
+  do {
+    if (
+      scope.path.isFunctionParent() &&
+      !scope.path.isArrowFunctionExpression()
+    ) {
+      return scope.path;
+    }
+  } while ((scope = scope.parent));
+  return null;
+}
+
+/**
+ * Returns whether the class has specified a superclass.
+ */
+function isDerivedClass(classPath) {
+  return classPath.node.superClass !== null;
+}
+
+/**
+ * Returns whether `this` is allowed at given path.
+ */
+function isThisAllowed(path) {
+  // This specifically skips arrow functions as they do not rewrite `this`.
+  const parentMethodOrFunction = getThisFunctionParent(path);
+  if (parentMethodOrFunction === null) {
+    // We are not in a method or function. It is fine to use `this`.
+    return true;
+  }
+  if (!parentMethodOrFunction.isMethod()) {
+    // If the closest parent is a regular function, `this` will be rebound, therefore it is fine to use `this`.
+    return true;
+  }
+  // Current node is within a method, so we need to check if the method is a constructor.
+  if (parentMethodOrFunction.node.kind !== "constructor") {
+    // We are not in a constructor, therefore it is always fine to use `this`.
+    return true;
+  }
+  // Now we are in a constructor. If it is a derived class, we do not reference `this`.
+  return !isDerivedClass(parentMethodOrFunction.parentPath.parentPath);
+}
+
 export default declare(api => {
   api.assertVersion(7);
 
   const visitor = {
-    JSXOpeningElement({ node }) {
+    JSXOpeningElement(path) {
+      if (!isThisAllowed(path)) {
+        return;
+      }
+      const node = path.node;
       const id = t.jsxIdentifier(TRACE_ID);
       const trace = t.thisExpression();
 

packages/babel-plugin-transform-react-jsx-self/test/fixtures/react-source/disable-with-super/input.js

@@ -0,0 +1,51 @@
+class A { }
+
+class B extends A {
+  constructor() {
+    <sometag1 />;
+    super(<sometag2 />);
+    <sometag3 />;
+  }
+}
+
+class C {
+  constructor() {
+    <sometag4 />;
+    class D extends A {
+      constructor() {
+        super();
+      }
+    }
+    const E = class extends A {
+      constructor() {
+        super();
+      }
+    };
+  }
+}
+
+class E extends A {
+  constructor() {
+    this.x = () => <sometag5 />;
+    this.y = function () {
+      return <sometag6 />;
+    };
+    function z() {
+      return <sometag7 />;
+    }
+    { <sometag8 /> }
+    super();
+  }
+}
+
+class F {
+  constructor() {
+    <sometag9 />
+  }
+}
+
+class G extends A {
+  constructor() {
+    return <sometag10 />;
+  }
+}

packages/babel-plugin-transform-react-jsx-self/test/fixtures/react-source/disable-with-super/output.js

@@ -0,0 +1,65 @@
+class A {}
+
+class B extends A {
+  constructor() {
+    <sometag1 />;
+    super(<sometag2 />);
+    <sometag3 />;
+  }
+
+}
+
+class C {
+  constructor() {
+    <sometag4 __self={this} />;
+
+    class D extends A {
+      constructor() {
+        super();
+      }
+
+    }
+
+    const E = class extends A {
+      constructor() {
+        super();
+      }
+
+    };
+  }
+
+}
+
+class E extends A {
+  constructor() {
+    this.x = () => <sometag5 />;
+
+    this.y = function () {
+      return <sometag6 __self={this} />;
+    };
+
+    function z() {
+      return <sometag7 __self={this} />;
+    }
+
+    {
+      <sometag8 />;
+    }
+    super();
+  }
+
+}
+
+class F {
+  constructor() {
+    <sometag9 __self={this} />;
+  }
+
+}
+
+class G extends A {
+  constructor() {
+    return <sometag10 />;
+  }
+
+}