From 3e2923ef349960fe3732d42750808aa2100d2644 Mon Sep 17 00:00:00 2001
From: Alan Pierce <alangpierce@gmail.com>
Date: Sun, 24 Jun 2018 22:14:13 -0700
Subject: [PATCH] Allow member expression identifiers when determining React
 displayName

Fixes #253

Also fix stale comment.
---
 .../ReactDisplayNameTransformer.ts            | 13 +++--------
 test/react-display-name-test.ts               | 22 +++++++++++++++++++
 2 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/src/transformers/ReactDisplayNameTransformer.ts b/src/transformers/ReactDisplayNameTransformer.ts
index 7bd847bf..4b1a0685 100644
--- a/src/transformers/ReactDisplayNameTransformer.ts
+++ b/src/transformers/ReactDisplayNameTransformer.ts
@@ -9,10 +9,6 @@ import Transformer from "./Transformer";
 /**
  * Implementation of babel-plugin-transform-react-display-name, which adds a
  * display name to usages of React.createClass and createReactClass.
- *
- * This implementation has the following limitations compared with the
- * - It does not handle `export default React.createClass`, using the filename,
- *   since Sucrase currently does not know the name of the current file.
  */
 export default class ReactDisplayNameTransformer extends Transformer {
   constructor(
@@ -83,12 +79,9 @@ export default class ReactDisplayNameTransformer extends Transformer {
   }
 
   private findDisplayName(startIndex: number): string | null {
-    if (
-      this.tokens.matchesAtIndex(startIndex - 2, [tt.name, tt.eq]) &&
-      !this.tokens.matchesAtIndex(startIndex - 3, [tt.dot])
-    ) {
-      // This is an assignment (or declaration) with an identifier LHS, so use
-      // that identifier name.
+    if (this.tokens.matchesAtIndex(startIndex - 2, [tt.name, tt.eq])) {
+      // This is an assignment (or declaration) and the LHS is either an identifier or a member
+      // expression ending in an identifier, so use that identifier name.
       return this.tokens.identifierNameAtIndex(startIndex - 2);
     }
     if (
diff --git a/test/react-display-name-test.ts b/test/react-display-name-test.ts
index 01a1a066..642a116f 100644
--- a/test/react-display-name-test.ts
+++ b/test/react-display-name-test.ts
@@ -175,4 +175,26 @@ describe("transform react-display-name", () => {
       {transforms: ["jsx", "imports"], filePath: "MyComponent.js"},
     );
   });
+
+  it("properly reads a MemberExpression assignee", () => {
+    assertResult(
+      `
+      import React from 'react';
+      a.b.c = React.createClass({
+        render() {
+          return <a/>
+        }
+      });
+    `,
+      `"use strict";const _jsxFileName = "MyComponent.js";${IMPORT_DEFAULT_PREFIX}
+      var _react = require('react'); var _react2 = _interopRequireDefault(_react);
+      a.b.c = _react2.default.createClass({displayName: 'c',
+        render() {
+          return _react2.default.createElement('a', {${devProps(5)}})
+        }
+      });
+    `,
+      {transforms: ["jsx", "imports"], filePath: "MyComponent.js"},
+    );
+  });
 });