babel-plugin-add-react-displayname
babel-plugin-add-react-displayname copied to clipboard
opbeat
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.
No, but this does.
https://babeljs.io/docs/en/babel-plugin-transform-react-display-name
@gajus -- the documentation for that one doesn't look like it supports Functional Components -- is that true?
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.
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)
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.
It looks like I have sometime ago released a plugin to solve this problem.
https://github.com/gajus/babel-plugin-react-display-name
@gajus Yes, but that only covers createClass, right? Very few people are writing new React code like that.
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.
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.
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).