Does this plugin work for Babel@7 & FunctionalComponents?

[fbartho]

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.

[gajus]

No, but this does.

https://babeljs.io/docs/en/babel-plugin-transform-react-display-name

[fbartho]

@gajus -- the documentation for that one doesn't look like it supports Functional Components -- is that true?

[gajus]

You are right.

https://babeljs.io/repl#?babili=false&browsers=&build=&builtIns=false&spec=false&loose=false&code_lz=MYewdgzgLgBAYiEMC8MAUBKFA-GBvAXwG4g&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=es2015%2Creact%2Cstage-2&prettier=false&targets=&version=7.4.5&externalPlugins=%40babel%2Fplugin-transform-react-display-name%407.2.0

Come to think about it, I cannot think of how this could be implemented.

[fbartho]

To be honest, I'd be fine with a transform that attaches displayName to every loose function/arrow-function in a JSX-enabled file (.tsx in my project). Presumably that would make it easier? (I'm just a babel newbie)

[isaachinman]

Any update on this? I would be happy to work on dev for a plugin that does work in v7, but don't want to duplicate work if such a thing already exists. Would be very grateful for any tips/advice.

[gajus]

It looks like I have sometime ago released a plugin to solve this problem.

https://github.com/gajus/babel-plugin-react-display-name

[isaachinman]

@gajus Yes, but that only covers createClass, right? Very few people are writing new React code like that.

[gajus]

Good point. I haven't touched that code for a long time.

https://github.com/gajus/babel-plugin-transform-export-default-name

This would work for default exports, though.

[isaachinman]

Okay, that's good reference to have. My particular use case requires use of named exports. Are you aware of any way of statically determining the return type of a function (eg jsx) within a Babel plugin?

If that's possible, it should be pretty straightforward to loop over all exports and append displayName as necessary.

[gajus]

Okay, that's good reference to have. My particular use case requires use of named exports. Are you aware of any way of statically determining the return type of a function (eg jsx) within a Babel plugin?

I am not. I don't think that is possible either (accurately), unless you are using strict types (like Flow or TS).