Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Allow member expression identifiers when determining React displayName #274

Merged
merged 1 commit into from
Jun 25, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions src/transformers/ReactDisplayNameTransformer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down Expand Up @@ -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 (
Expand Down
22 changes: 22 additions & 0 deletions test/react-display-name-test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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"},
);
});
});