Fix PathHoister hoisting JSX member expressions on "this". (#5143)

The PathHoister ignored member references on "this", causing it
to potentially hoist an expression above its function scope.

This patch tells the hoister to watch for "this", and if seen,
mark the nearest non-arrow function scope as the upper limit
for hoistng.

This fixes #4397 and is an alternative to #4787.

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/actual.js

@@ -0,0 +1,4 @@
+function render() {
+  this.component = "div";
+  return () => <this.component />;
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-constant/expected.js

@@ -0,0 +1,7 @@
+function render() {
+  this.component = "div";
+
+  var _ref = <this.component />;
+
+  return () => _ref;
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/actual.js

@@ -0,0 +1,5 @@
+class Component extends React.Component {
+  subComponent = () => <span>Sub Component</span>
+
+  render = () => <this.subComponent />
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/expected.js

@@ -0,0 +1,12 @@
+var _ref = <span>Sub Component</span>;
+
+class Component extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    var _ref2 = <this.subComponent />;
+
+    return _temp = super(...args), this.subComponent = () => _ref, this.render = () => _ref2, _temp;
+  }
+
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression-this/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-jsx", "transform-react-constant-elements", "transform-class-properties"]
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/actual.js

@@ -0,0 +1,6 @@
+const els = {
+  subComponent: () => <span>Sub Component</span>
+};
+class Component extends React.Component {
+  render = () => <els.subComponent />
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/expected.js

@@ -0,0 +1,16 @@
+var _ref = <span>Sub Component</span>;
+
+const els = {
+  subComponent: () => _ref
+};
+
+var _ref2 = <els.subComponent />;
+
+class Component extends React.Component {
+  constructor(...args) {
+    var _temp;
+
+    return _temp = super(...args), this.render = () => _ref2, _temp;
+  }
+
+}

packages/babel-plugin-transform-react-constant-elements/test/fixtures/constant-elements/member-expression/options.json

@@ -0,0 +1,3 @@
+{
+  "plugins": ["syntax-jsx", "transform-react-constant-elements", "transform-class-properties"]
+}

packages/babel-traverse/src/path/lib/hoister.js

@@ -2,11 +2,23 @@ import { react } from "babel-types";
 import * as t from "babel-types";
 
 const referenceVisitor = {
+  // This visitor looks for bindings to establish a topmost scope for hoisting.
   ReferencedIdentifier(path, state) {
-    if (path.isJSXIdentifier() && react.isCompatTag(path.node.name)) {
+    // Don't hoist regular JSX identifiers ('div', 'span', etc).
+    // We do have to consider member expressions for hoisting (e.g. `this.component`)
+    if (path.isJSXIdentifier() && react.isCompatTag(path.node.name) && !path.parentPath.isJSXMemberExpression()) {
       return;
     }
 
+    // If the identifier refers to `this`, we need to break on the closest non-arrow scope.
+    if (path.node.name === "this") {
+      let scope = path.scope;
+      do {
+        if (scope.path.isFunction() && !scope.path.isArrowFunctionExpression()) break;
+      } while (scope = scope.parent);
+      if (scope) state.breakOnScopePaths.push(scope.path);
+    }
+
     // direct references that we need to track to hoist this to the highest scope we can
     const binding = path.scope.getBinding(path.node.name);
     if (!binding) return;