-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Addon-docs: Dynamically update props tables for Angular #8672
Comments
Hi, storydocs are really amazing! I am wondering though why do you need to use Compodoc to retrieve components inputs/outputs as in Angular you can do it natively via so called It would most likely solve the issue with props live update as this is done at runtime instead of compile time. |
@gund Is it possible to extract all the relevant info from that? I'm skeptical. For instance we get descriptions out of JSDoc comments. Unless that information is preserved, I don't know whether we can use that. But any examples or relevant documentation (or a proof of concept!) would be much appreciated. |
Well I do not know full list of information that you need to get but if we are talking only about components inputs/outputs then this information is available in So this is the structure that Angular returns for components: https://angular.io/api/core/ComponentFactory |
The limitation is now fixed: compodoc/compodoc#1087 |
@manuelmeister have you tried upgrading and running compodoc in watch mode? there's a decent chance that it will "just work". When If you try it and it does work, please let me know and we can update the documentation If it doesn't work and you can provide a reproduction repo, I'd be happy to take a look and figure out what's going on (and probably fix it if it's an easy one) |
For a project I'm working on, we're using compodoc in watch mode, which is re-generating We run both storybook and compodoc with concurrently - example scripts in ...
"docs:json:watch": "compodoc -p tsconfig.json --serve --watch --exportFormat json --output .",
"storybook": "concurrently --kill-others --names compodoc,storybook \"yarn:docs:json:watch\" \"start-storybook -s public -p 9001\"",
... The one remaining annoyance is that we have to reload the storybook UI after an update, as the updated
Anyone else have any luck, or know how to get the page to reload automatically when |
@chucknelson are you on webpack4 or 5? do you have a reproduction repo? See how to create a repro for more info. |
@shilman - Not sure...both?! $ yarn list webpack
yarn list v1.22.11
warning Filtering by arguments is deprecated. Please use the pattern option instead.
├─ @angular-devkit/build-angular@12.2.1
│ └─ webpack@5.50.0
├─ @storybook/builder-webpack5@6.3.7
│ └─ webpack@5.50.0
├─ @storybook/manager-webpack5@6.3.7
│ └─ webpack@5.50.0
└─ webpack@4.46.0 I guess webpack 4 is brought in by other parts of Storybook: => Found "webpack@4.46.0"
info Has been hoisted to "webpack"
info Reasons this module exists
- Hoisted from "@storybook#angular#webpack"
- Hoisted from "@storybook#angular#@storybook#core-common#webpack"
- Hoisted from "@storybook#addon-essentials#@storybook#addon-docs#@storybook#builder-webpack4#webpack"
- Hoisted from "@storybook#angular#@storybook#core#@storybook#core-server#webpack"
- Hoisted from "@storybook#angular#@storybook#core#@storybook#core-server#@storybook#manager-webpack4#webpack" As you can see we're building Angular components, and we at least know Angular 12 uses Webpack 5. I'll try the reproduction repo soon! |
@chucknelson do you have |
@shilman - Yeah, using the Created a simple reproduction repo with a few steps outlined in the README for demonstrating the issue. Let me know if you need any other info - thanks! See: https://github.com/chucknelson/storybook-compodoc-watch-repro |
@shilman - FYI I was trying to look into this a little, and I wonder if it's related to this webpack-hot-middleware issue, #390 webpack-hot-middleware/client?reload=true is no longer working with webpack 5? I'm not very familiar with usage of webpack hot module replacement, but I was looking for storybook's hooks into it with like |
@chucknelson Did you ever get a chance to look further into it? Any verdict? |
@goldsam - To fix this problem "at the source", I think it's waiting on the fix for webpack mentioned in webpack-contrib/webpack-hot-middleware#390 (comment), which seems to be waiting on a formal PR per the latest comment on that specific issue, webpack/webpack#12408 (comment) (which at least is recent / January of 2022). @lukeapage I know this issue is coming out of nowhere for you, but didn't know if a formal PR for the webpack change you made long ago (over a year now per issue links above) is something that is still valid? As for the workaround, we've just been refreshing the browser to get storybook to reload as expected when needed / when the error is shown in the console. |
We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid. Please open a new issue referencing this one if this is still relevant in SB 7.x. |
The initial implementation of props tables for Storybook Angular has the limitation that the props tables are statically generated, so they don't update when you edit your components.
This is due to a limitation in Compodoc, which Storybook uses to generate the props tables. Once that's fixed, we should update the documentation.
If there's a deeper integration possible, such as a webpack loader, that's also possible.
The text was updated successfully, but these errors were encountered: