opbeat/babel-plugin-add-react-displayname

babel-plugin-add-react-displayname's Issues

Adds displayName to components that already have it

There are components that naturally have their displayName set as part of conventional best practice, like an HOC. In those cases the displayName added twice. Thankfully the autogenerated display name is placed before the manual one but it would obviously be preferred not to duplicate.

Does this plugin work for Babel@7 & FunctionalComponents?

We went to babel7 a while ago, but we're just starting to use FunctionalComponents much more heavily, and as a result we're starting to see more <Unknown> in our component tree.

NPE on return statement with no argument

Running the transform on the following code results in a NPE:

function foo() {
  return;
}

TypeError: /Users/dounanshi/dev/babel-plugin-add-react-displayname/test/fixtures/emptyReturn/input.js: Cannot read property 'type' of null
    at doesReturnJSX (/Users/dounanshi/dev/babel-plugin-add-react-displayname/index.js:145:32)
    at PluginPass.FunctionDeclaration (/Users/dounanshi/dev/babel-plugin-add-react-displayname/index.js:13:13)
    at newFn (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/visitors.js:276:21)
    at NodePath._call (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/path/context.js:76:18)
    at NodePath.call (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/path/context.js:48:17)
    at NodePath.visit (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/path/context.js:105:12)
    at TraversalContext.visitQueue (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitMultiple (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:103:17)
    at TraversalContext.visit (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:190:19)
    at Function.traverse.node (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/index.js:114:17)
    at NodePath.visit (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/path/context.js:115:19)
    at TraversalContext.visitQueue (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:150:16)
    at TraversalContext.visitSingle (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:108:19)
    at TraversalContext.visit (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/context.js:192:19)
    at Function.traverse.node (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/index.js:114:17)
    at traverse (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-traverse/lib/index.js:79:12)
    at File.transform (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:548:35)
    at /Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/pipeline.js:50:19
    at File.wrap (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at Object.transformFileSync (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/babel-core/lib/api/node.js:152:10)
    at transformFile (/Users/dounanshi/dev/babel-plugin-add-react-displayname/test/tests.js:31:16)
    at /Users/dounanshi/dev/babel-plugin-add-react-displayname/test/tests.js:15:18
    at Array.forEach (native)
    at Suite.<anonymous> (/Users/dounanshi/dev/babel-plugin-add-react-displayname/test/tests.js:14:31)
    at Object.create (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/common.js:114:19)
    at context.describe.context.context (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/bdd.js:44:27)
    at Object.<anonymous> (/Users/dounanshi/dev/babel-plugin-add-react-displayname/test/tests.js:12:1)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.require (module.js:497:17)
    at require (internal/module.js:20:19)
    at /Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:230:27
    at Array.forEach (native)
    at Mocha.loadFiles (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:227:14)
    at Mocha.run (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:513:10)
    at Object.<anonymous> (/Users/dounanshi/dev/babel-plugin-add-react-displayname/node_modules/mocha/bin/_mocha:480:18)
    at Module._compile (module.js:570:32)
    at Object.Module._extensions..js (module.js:579:10)
    at Module.load (module.js:487:32)
    at tryModuleLoad (module.js:446:12)
    at Function.Module._load (module.js:438:3)
    at Module.runMain (module.js:604:10)
    at run (bootstrap_node.js:394:7)
    at startup (bootstrap_node.js:149:9)
    at bootstrap_node.js:509:3

A potential fix is to change line 145 to be:

return lastBlock.argument && lastBlock.argument.type === 'JSXElement'

"Unknown" displayName values

Thanks for releasing this plugin. I've added it to my build process and most of the components in my tree are being assigned the displayName I would expect. However, there are a number that get assigned a displayName of "Unknown". I've searched through the source for this plugin and don't see a condition under which that value would be explicitly assigned. So, now I've started digging into the handbook for writing babel plugins to see if that is a behavior of babel that is manifesting as "Unknown" once it interacts with this specific plugin. I'd be happy to take a stab at fixing this in a PR, but I'd appreciate some guidance if this issue is already known.

The plugin does not work if the (functional) component returns a Fragment within a forwardRef

Working example

function Comp() {
  return <div>my comp</div>
}
export default forwardRef(Comp)

Non-working example

function Comp() {
  return <><div>my comp</div></>
}
export default forwardRef(Comp)

Unable to run test suite

Hi, I cloned this repo and after running npm install I got the following error after running npm test:

> [email protected] test ~/src/localhost/sandbox/babel-plugin-add-react-displayname
> mocha

~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:334
        throw e;
        ^

Error: Couldn't find preset "react" relative to directory "~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/fixtures/arrowFun"
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:299:19
    at Array.map (native)
    at OptionManager.resolvePresets (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)
    at OptionManager.mergePresets (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)
    at OptionManager.mergeOptions (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)
    at OptionManager.init (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
    at File.initOptions (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Object.transformFileSync (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/api/node.js:138:10)
    at transformFile (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:31:16)
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:15:18
    at Array.forEach (native)
    at Suite.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:14:31)
    at Object.create (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/common.js:114:19)
    at context.describe.context.context (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/bdd.js:44:27)
    at Object.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:12:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:222:27
    at Array.forEach (native)
    at Mocha.loadFiles (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:219:14)
    at Mocha.run (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:487:10)
    at Object.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/bin/_mocha:459:18)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:456:3
npm ERR! Test failed.  See above for more details.

I think that can be fixed by adding react into devDependencies.

After installing react and running npm test I get this error:

$ npm test

> [email protected] test ~/src/localhost/sandbox/babel-plugin-add-react-displayname
> mocha

~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:334
        throw e;
        ^

ReferenceError: [BABEL] ~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/fixtures/arrowFun/input.js: Unknown option: ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/react/react.js.Children. Check out http://babeljs.io/docs/usage/options/ for more information about options.

A common cause of this error is the presence of a configuration options object without the corresponding preset name. Example:

Invalid:
  `{ presets: [{option: value}] }`
Valid:
  `{ presets: [['presetName', {option: value}]] }`

For more detailed information on preset configuration, please see http://babeljs.io/docs/plugins/#pluginpresets-options. (While processing preset: "~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/react/react.js")
    at Logger.error (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/logger.js:41:11)
    at OptionManager.mergeOptions (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:221:20)
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:260:14
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:329:22
    at Array.map (native)
    at OptionManager.resolvePresets (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:270:20)
    at OptionManager.mergePresets (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:259:10)
    at OptionManager.mergeOptions (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:244:14)
    at OptionManager.init (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/options/option-manager.js:374:12)
    at File.initOptions (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:216:65)
    at new File (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/file/index.js:139:24)
    at Pipeline.transform (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/transformation/pipeline.js:46:16)
    at Object.transformFileSync (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/babel-core/lib/api/node.js:138:10)
    at transformFile (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:31:16)
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:15:18
    at Array.forEach (native)
    at Suite.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:14:31)
    at Object.create (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/common.js:114:19)
    at context.describe.context.context (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/interfaces/bdd.js:44:27)
    at Object.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/test/tests.js:12:1)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Module.require (module.js:468:17)
    at require (internal/module.js:20:19)
    at ~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:222:27
    at Array.forEach (native)
    at Mocha.loadFiles (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:219:14)
    at Mocha.run (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/lib/mocha.js:487:10)
    at Object.<anonymous> (~/src/localhost/sandbox/babel-plugin-add-react-displayname/node_modules/mocha/bin/_mocha:459:18)
    at Module._compile (module.js:541:32)
    at Object.Module._extensions..js (module.js:550:10)
    at Module.load (module.js:458:32)
    at tryModuleLoad (module.js:417:12)
    at Function.Module._load (module.js:409:3)
    at Function.Module.runMain (module.js:575:10)
    at startup (node.js:160:18)
    at node.js:456:3
npm ERR! Test failed.  See above for more details.

I thought it may be because stage-0 is installed (https://github.com/opbeat/babel-plugin-add-react-displayname/blob/master/package.json#L11) but stage-1 is requested (https://github.com/opbeat/babel-plugin-add-react-displayname/blob/master/test/tests.js#L32). After remedying that however, the error remains.

These are the versions of dependencies that were installed:

$ npm ls --depth=0
[email protected] ~/src/localhost/sandbox/babel-plugin-add-react-displayname
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Doesn't work with "modern" transpilation

I am building my code using @babel/preset-modules, this plugin fails to parse on default exports without a class name when they're not being transformed by Babel. That is, components that look like this:

export default class extends Component {}

I looked at adding some failing tests and fixing the plugin but it looks like it hasn't been updated for awhile and is still based on Babel 6, so would likely require some maintenance as well.

If it were up to me, I would probably:

• update the test suite to build both modern and ES2015 code in the tests
• maybe move to Jest in order to take advantage of snapshots?
• update the plugin for Babel 7

Happy to help with a PR if there's appetite for this change.

License?

I don't see any license declared for this, and no license file. Can one be decided on and added to the repository?