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-development/test/fixtures/linux/within-derived-classes-constructor/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-development/test/fixtures/linux/within-derived-classes-constructor/output.js

@@ -0,0 +1,118 @@
+var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
+
+var _jsxFileName = "<CWD>/packages/babel-plugin-transform-react-jsx-development/test/fixtures/linux/within-derived-classes-constructor/input.js";
+
+class A {}
+
+class B extends A {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag1", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 5,
+      columnNumber: 5
+    }, void 0);
+
+    super( /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag2", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 6,
+      columnNumber: 11
+    }, void 0));
+
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag3", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 7,
+      columnNumber: 5
+    }, void 0);
+  }
+
+}
+
+class C {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag4", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 5
+    }, this);
+
+    class D extends A {
+      constructor() {
+        super();
+      }
+
+    }
+
+    const E = class extends A {
+      constructor() {
+        super();
+      }
+
+    };
+  }
+
+}
+
+class E extends A {
+  constructor() {
+    this.x = function () {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag5", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 20
+      }, void 0);
+    };
+
+    this.y = function () {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag6", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 31,
+        columnNumber: 14
+      }, this);
+    };
+
+    function z() {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag7", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 34,
+        columnNumber: 14
+      }, this);
+    }
+
+    {
+      /*#__PURE__*/
+      _reactJsxDevRuntime.jsxDEV("sometag8", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 36,
+        columnNumber: 7
+      }, void 0);
+    }
+    super();
+  }
+
+}
+
+class F {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag9", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 5
+    }, this);
+  }
+
+}
+
+class G extends A {
+  constructor() {
+    return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag10", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 49,
+      columnNumber: 12
+    }, void 0);
+  }
+
+}

packages/babel-plugin-transform-react-jsx-development/test/fixtures/windows/within-derived-classes-constructor-windows/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-development/test/fixtures/windows/within-derived-classes-constructor-windows/output.js

@@ -0,0 +1,118 @@
+var _reactJsxDevRuntime = require("react/jsx-dev-runtime");
+
+var _jsxFileName = "<CWD>\\packages\\babel-plugin-transform-react-jsx-development\\test\\fixtures\\windows\\within-derived-classes-constructor-windows\\input.js";
+
+class A {}
+
+class B extends A {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag1", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 5,
+      columnNumber: 5
+    }, void 0);
+
+    super( /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag2", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 6,
+      columnNumber: 11
+    }, void 0));
+
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag3", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 7,
+      columnNumber: 5
+    }, void 0);
+  }
+
+}
+
+class C {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag4", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 13,
+      columnNumber: 5
+    }, this);
+
+    class D extends A {
+      constructor() {
+        super();
+      }
+
+    }
+
+    const E = class extends A {
+      constructor() {
+        super();
+      }
+
+    };
+  }
+
+}
+
+class E extends A {
+  constructor() {
+    this.x = function () {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag5", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 29,
+        columnNumber: 20
+      }, void 0);
+    };
+
+    this.y = function () {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag6", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 31,
+        columnNumber: 14
+      }, this);
+    };
+
+    function z() {
+      return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag7", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 34,
+        columnNumber: 14
+      }, this);
+    }
+
+    {
+      /*#__PURE__*/
+      _reactJsxDevRuntime.jsxDEV("sometag8", {}, void 0, false, {
+        fileName: _jsxFileName,
+        lineNumber: 36,
+        columnNumber: 7
+      }, void 0);
+    }
+    super();
+  }
+
+}
+
+class F {
+  constructor() {
+    /*#__PURE__*/
+    _reactJsxDevRuntime.jsxDEV("sometag9", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 43,
+      columnNumber: 5
+    }, this);
+  }
+
+}
+
+class G extends A {
+  constructor() {
+    return /*#__PURE__*/_reactJsxDevRuntime.jsxDEV("sometag10", {}, void 0, false, {
+      fileName: _jsxFileName,
+      lineNumber: 49,
+      columnNumber: 12
+    }, void 0);
+  }
+
+}