Comments (6)
I'm having the same problem. Styleguidist uses react-docgen to parse props by default.
I'm using Styleguidist and for .js files, I'm able to set the displayName
multiple ways. Here is the order of precedence from the methods I've tried:
- Set
displayName
directly eg.Component.displayName = 'name1'
- Function name eg.
const Component = function name2() {}
- variable name (for unamed functions such as arrow functions) eg.
const name3 = () => {}
react-docgen-typescript
doesn't use any of the three methods to get displayName
. Below, I am setting displayName
to 'Button'
directly, the function name to AButton
, and the variable name to Button
, but the displayName
gets set to lowercase button:
It's because displayName
gets overriden here:
react-docgen-typescript/src/parser.ts
Line 221 in d6eab26
react-docgen-typescript/src/parser.ts
Line 207 in d6eab26
react-docgen-typescript/src/parser.ts
Lines 566 to 570 in d6eab26
See how it gets set to the filename, path.basename(source.fileName, path.extname(source.fileName));
. In my case, I was using 'StatelessComponent'
, but it would have been '__function'
if I just used a regular fat arrow function. I don't know what 'default'
is for.
At the minimum, we should be able to set displayName
ourselves. It would be nice to be able to grab it from the function name and variable name. I prefer variable name because I use anonymous functions more than function declarations.
Styleguidist also has handlers
option, but I don't really understand how to use it and I'm not sure if the example works with typescript or react-docgen-typescript
.
from react-docgen-typescript.
@dosentmatter hello, thanks for thorough explanation
so the order should be like so:
displayName
- function or class name
- function or class reference name
in other words, displayName
is the king, if you set it manually, it must be important.
currently im not so interested in number 2 and 3, i think number 1 is most important. it should fix a lot of documentation for many.
im going to work on this today, hopefully with some results :)
from react-docgen-typescript.
This should be fixed in v1.4.0 release thanks to @argshook and his PR #87.
from react-docgen-typescript.
I am not sure if this is wrong thing. Does styleguidist (with js only) use display name instead? I see display name more as the friendly name for debugging. Am I wrong?
from react-docgen-typescript.
i consider this a bug since displayName
value returned is wrong. don't know how styleguidist works in this regard, as i have not used it.
i am using react-docgen-typescript
as a standalone tool. my components do have displayName
set, however, react-docgen-typsecript
returns me displayName: 'index'
or something alike (filename).
another library that i use together with react-docgen-typescript
is react-docgen, it is used to parse components written in good old js. this library does handle displayName
and returns me same displayName
that is set in component. i can later display that in documentation.
if i have js component and document it with react-docgen
, all is good. now let's say i decide to rewrite js component to ts and use react-docgen-typescript
this time. everything is ok, except from displayName
. I used to get corret value, but now i get filename. it rarely is the same as displayName
. thus, my documentation becomes falsy.
i think current behaviour is not correct and fixing it should do no harm.
tried to PR this but didn't finish yet, don't know typescript compiler well enough so stumbling around. ill try to find more time to tackle this
from react-docgen-typescript.
Hey @argshook. Yeah, I think displayName
is the easiest to implement with the most flexibility. Actually, I did find another workaround. If you do export const
, the name would show up correctly:
export default
doesn't change the name for some reason.
from react-docgen-typescript.
Related Issues (20)
- Explicit types ignored in favor of underlying, implicit types HOT 2
- Not able to access /node_modules/.cache/ts-docgen HOT 2
- Move to async functions HOT 2
- Args of Table doesn't show content HOT 2
- is any annotations can support hidden property's api doc in output HOT 3
- Styled Components v6 are not parsed correctly HOT 1
- Docs not generated for memo<Props>() syntax HOT 3
- How to manually set default value for a props? HOT 3
- Ignore props & method extended to HTMLMotionProps<'div'> from framer-motion HOT 2
- Can you support projects built with vite? HOT 3
- Bug after update to typescript 5.0.2 HOT 4
- A union type that also contains ` | string` loses the rest of the union and is displayed as just string. HOT 1
- Component's props are not parsed in the file where a component and function(util) exist together. HOT 2
- Tree-shaking on a package (monorepo) breaks docgen. HOT 4
- [Error] adding jsdoc @author tag throwing error `array.map is not a function`
- [Bug]: declarations and parent objects for props are not populated with TypeScript >= v5.1.3 HOT 1
- Incorrect Display of Custom Type Attributes in Documentation HOT 5
- What is the future of this project? HOT 4
- `export default function` declaration doesn't work HOT 1
- @defaultValue is not parsed from interface HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-docgen-typescript.