diff --git a/transforms/__testfixtures__/class/class-create-class-naming.output.js b/transforms/__testfixtures__/class/class-create-class-naming.output.js index 480ce986..85e93850 100644 --- a/transforms/__testfixtures__/class/class-create-class-naming.output.js +++ b/transforms/__testfixtures__/class/class-create-class-naming.output.js @@ -7,7 +7,7 @@ const React = require('react'); const createReactClass__deprecated = require('createReactClass__deprecated'); const Component = createReactClass__deprecated({ - displayName: 'class-create-class-naming.input', + displayName: 'Component', mixins: [{}], render() { diff --git a/transforms/__testfixtures__/class/class-displayName.input.js b/transforms/__testfixtures__/class/class-displayName.input.js new file mode 100644 index 00000000..61aac9ce --- /dev/null +++ b/transforms/__testfixtures__/class/class-displayName.input.js @@ -0,0 +1,31 @@ +const React = require('React'); + +let A = React.createClass({ + mixins: [], + render() { + return
; + }, +}); + +A = React.createClass({ + mixins: [], + render() { + return
; + }, +}); + +const obj = { + B: React.createClass({ + mixins: [], + render() { + return
; + }, + }), +}; + +export default React.createClass({ + mixins: [], + render() { + return
; + }, +}); diff --git a/transforms/__testfixtures__/class/class-displayName.output.js b/transforms/__testfixtures__/class/class-displayName.output.js new file mode 100644 index 00000000..d172e0f8 --- /dev/null +++ b/transforms/__testfixtures__/class/class-displayName.output.js @@ -0,0 +1,41 @@ +const React = require('React'); + +const createReactClass = require('react-create-class'); + +let A = createReactClass({ + displayName: 'A', + mixins: [], + + render() { + return
; + }, +}); + +A = createReactClass({ + displayName: 'A', + mixins: [], + + render() { + return
; + }, +}); + +const obj = { + B: createReactClass({ + displayName: 'B', + mixins: [], + + render() { + return
; + }, + }), +}; + +export default createReactClass({ + displayName: 'class-displayName.input', + mixins: [], + + render() { + return
; + }, +}); diff --git a/transforms/__testfixtures__/class/class-initial-state.output.js b/transforms/__testfixtures__/class/class-initial-state.output.js index 669e77fe..b682c6af 100644 --- a/transforms/__testfixtures__/class/class-initial-state.output.js +++ b/transforms/__testfixtures__/class/class-initial-state.output.js @@ -227,7 +227,7 @@ var helper = () => {}; // fallback var PassGetInitialState = createReactClass({ - displayName: 'class-initial-state.input', + displayName: 'PassGetInitialState', getInitialState() { return this.lol(); @@ -244,7 +244,7 @@ var PassGetInitialState = createReactClass({ // fallback var UseGetInitialState = createReactClass({ - displayName: 'class-initial-state.input', + displayName: 'UseGetInitialState', getInitialState() { return this.lol(); @@ -261,7 +261,7 @@ var UseGetInitialState = createReactClass({ // fallback var UseArguments = createReactClass({ - displayName: 'class-initial-state.input', + displayName: 'UseArguments', helper() { console.log(arguments); @@ -274,7 +274,7 @@ var UseArguments = createReactClass({ // fallback var ShadowingIssue = createReactClass({ - displayName: 'class-initial-state.input', + displayName: 'ShadowingIssue', getInitialState() { const props = { x: 123 }; diff --git a/transforms/__testfixtures__/class/class-pure-mixin3.output.js b/transforms/__testfixtures__/class/class-pure-mixin3.output.js index 5c4d632b..32c17741 100644 --- a/transforms/__testfixtures__/class/class-pure-mixin3.output.js +++ b/transforms/__testfixtures__/class/class-pure-mixin3.output.js @@ -5,7 +5,7 @@ var createReactClass = require('react-create-class'); var ReactComponentWithPureRenderMixin = require('ReactComponentWithPureRenderMixin'); var ComponentWithOnlyPureRenderMixin = createReactClass({ - displayName: 'class-pure-mixin3.input', + displayName: 'ComponentWithOnlyPureRenderMixin', mixins: [ReactComponentWithPureRenderMixin], getInitialState: function() { diff --git a/transforms/__testfixtures__/class/class-test2.output.js b/transforms/__testfixtures__/class/class-test2.output.js index 255969bc..25df310d 100644 --- a/transforms/__testfixtures__/class/class-test2.output.js +++ b/transforms/__testfixtures__/class/class-test2.output.js @@ -50,7 +50,7 @@ module.exports = class extends React.Component { }; var ComponentWithInconvertibleMixins = createReactClass({ - displayName: 'class-test2.input', + displayName: 'ComponentWithInconvertibleMixins', mixins: [ReactComponentWithPureRenderMixin, FooBarMixin], getInitialState: function() { @@ -69,7 +69,7 @@ var ComponentWithInconvertibleMixins = createReactClass({ var listOfInconvertibleMixins = [ReactComponentWithPureRenderMixin, FooBarMixin]; var ComponentWithInconvertibleMixins2 = createReactClass({ - displayName: 'class-test2.input', + displayName: 'ComponentWithInconvertibleMixins2', mixins: listOfInconvertibleMixins, getInitialState: function() { diff --git a/transforms/__testfixtures__/class/class.output.js b/transforms/__testfixtures__/class/class.output.js index de8b939a..34f7fcd0 100644 --- a/transforms/__testfixtures__/class/class.output.js +++ b/transforms/__testfixtures__/class/class.output.js @@ -110,7 +110,7 @@ class MyComponent3 extends React.Component { } var MyComponent4 = createReactClass({ - displayName: 'class.input', + displayName: 'MyComponent4', foo: callMeMaybe(), render: function() {}, }); diff --git a/transforms/__tests__/class-test.js b/transforms/__tests__/class-test.js index f710cce2..a582c65e 100644 --- a/transforms/__tests__/class-test.js +++ b/transforms/__tests__/class-test.js @@ -57,3 +57,4 @@ defineTest(__dirname, 'class', { 'create-class-module-name': 'createReactClass__deprecated', 'create-class-variable-name': 'createReactClass__deprecated', }, 'class/class-create-class-naming'); +defineTest(__dirname, 'class', null, 'class/class-displayName'); diff --git a/transforms/class.js b/transforms/class.js index e3d87f36..0f016dee 100644 --- a/transforms/class.js +++ b/transforms/class.js @@ -10,7 +10,7 @@ 'use strict'; -const path = require('path'); +const { basename, extname, dirname } = require('path'); module.exports = (file, api, options) => { const j = api.jscodeshift; @@ -1108,12 +1108,35 @@ module.exports = (file, api, options) => { if (specPath) { // Add a displayName property to the spec object - let displayName = path.basename(file.path, path.extname(file.path)); - // ./{module name}/index.js - if (displayName === "index") { - displayName = path.basename(path.dirname(file.path)); + let path = classPath; + let displayName; + while (path && displayName === undefined) { + switch (path.node.type) { + case 'ExportDefaultDeclaration': + displayName = basename(file.path, extname(file.path)); + if (displayName === 'index') { + // ./{module name}/index.js + displayName = basename(dirname(file.path)); + } + break; + case 'VariableDeclarator': + displayName = path.node.id.name; + break; + case 'AssignmentExpression': + displayName = path.node.left.name; + break; + case 'Property': + displayName = path.node.key.name; + break; + case 'Statement': + displayName = null; + break; + } + path = path.parent; + } + if (displayName) { + addDisplayName(displayName, specPath); } - addDisplayName(displayName, specPath); } withComments(