Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Explore adding react-docgen #167

Closed
wants to merge 1 commit into from

Conversation

joshwooding
Copy link
Member

I know there's some work going on in storybook core (#2 (comment)) as @shilman mentioned, but I've managed to get react-docgen working (I haven't really tested it's performance) but it might be worth exploring adding this temporarily so the feature works?

"es-module-lexer": "^0.9.3",
"glob": "^7.2.0",
"glob-promise": "^4.2.0",
"react-docgen": "6.0.0-alpha.0",
Copy link
Member Author

@joshwooding joshwooding Nov 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm using 6.0.0-alpha.0 so it supports resolving of imports. My hope is that this means we don't have to implement react-docgen-typescript although I have a working version of that too: https://github.com/joshwooding/storybook-builder-vite/tree/explore-react-docgen-typescript. Since my aim is for this to be temporary I'm trying to cover most of the functionality in one plugin.

@@ -0,0 +1,52 @@
/*
Copy link
Member Author

@joshwooding joshwooding Nov 24, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copied from https://github.com/storybookjs/babel-plugin-react-docgen/blob/master/src/actualNameHandler.js but the imports were converted and dead code at the end of the function was removed.

@joshwooding joshwooding force-pushed the explore-doc-gen branch 2 times, most recently from da1e90a to 480899f Compare November 24, 2021 22:23
// Escape windows paths
const filePath = path.relative(process.cwd(), id).replace(/\\/g, '\\\\');
docGenExtra += `
${actualName}.__docgenInfo = ${JSON.stringify(docGenResult, null, 2)};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@joshwooding
Copy link
Member Author

There are now two solutions, one which is relying on the babel plugin (6cbc544) and one which emulates it (480899f).

Relying on the babel plugin is definitely cleaner but we can't make it easy to use react-docgen@6.0.0-alpha.0, maybe an alpha of babel-plugin-react-docgen could use it?

Currently I've added the babel plugin as a dependency but it's always included in @storybook/react so maybe it's not needed?

@IanVS
Copy link
Member

IanVS commented Dec 3, 2021

@joshwooding what's your sense for how important it is to use react-docgen@6.0.0-alpha.0?

Allow resolving of imported types/proptypes

Seems kind of important, right? I think it could be okay to use your re-implementation for the time being, perhaps with a note to swap it out once (if) there's ever a stable release of react-docgen@6 (tracking issue: reactjs/react-docgen#502).

Alternatively, like you said we could make an alpha version of babel-plugin-react-docgen, it looks like a similar approach has been taken in the past: storybookjs/babel-plugin-react-docgen#72

@IanVS
Copy link
Member

IanVS commented Dec 7, 2021

I talked to @shilman and others about this, and they'd be willing to consider updating babel-plugin-react-docgen to use the alpha version of react-docgen if it solves the type import issue. There's even a good chance that it will end up being faster than the typescript version that's in use right now. We should explore it and see if it does indeed work for typescript projects.

@joshwooding
Copy link
Member Author

@IanVS Cool, I was looking at this today. I think releasing an alpha of babel-plugin-react-docgen is the best option.

@IanVS
Copy link
Member

IanVS commented Dec 29, 2021

I published @ianvs/babel-plugin-react-docgen@5.0.0-alpha.0 that we can experiment with until/unless storybook merges and releases storybookjs/babel-plugin-react-docgen#104.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants