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

Attempt to fix API docs in #1894 #1897

Draft
wants to merge 1 commit into
base: chrisw--tsc-4
Choose a base branch
from

Conversation

darthmaim
Copy link
Contributor

@darthmaim darthmaim commented Dec 22, 2024

This PR is not intended to be merged, I just wanted to write my discoveries down while I tried to fix the API docs not generating (see #1894 (comment)).

What I did:

  • I could not figure out why react-docgen-typescript-loader just did not do anything, and I could for some reason also not set any breakpoints in Next.js 13, so...
  • I've replaced react-docgen-typescript-loader (archived, last publish 5y ago) with react-docgen-typescript-plugin (not archived, last publish 6 months ago). Looking at the repo it also doesn't really look maintained, so this is probably not the long-term solution anyway, but I just wanted to get the docs to work...
  • I had to add webpack as a dependency, because react-docgen-typescript-plugin tries to load some files that are not available in the precompiled version distributed by next
  • webpack now spams the console with hundreds of No serializer registered for DocGenDependency, maybe because I had to install webpack and the plugin registered the serializer in the local webpack, not the Next.js bundled webpack. (There supposedly is a NEXT_PRIVATE_LOCAL_WEBPACK env that should make Next.js use the local webpack, but it didn't work for me, and also isn't available in newer Next.js versions)
  • react-docgen-typescript-plugin now actually did something, it generated invalid code default.__docgenInfo = which caused Next.js to throw SyntaxError: Unexpected token 'default'. Somehow the plugin can't figure out component names from export default function X() (there is a somewhat related open issue Invalid JS generated under a certain TS export. Uses default reserved word hipstersmoothie/react-docgen-typescript-plugin#57)
  • So I search/replaced all components (in the visx-annotation and visx-demo packages to instead use export default X; function X(), which allows the plugin to get the correct name.
  • The /docs/annotation annotation page now compiled and showed docs 🎉, but
    • it shows all props, because the propFilter option used in the loader config doesn't seem available in the plugin
    • still spams the console with warnings
    • requires to not use direct default exports

Just wanted to write down what I discovered while testing react-docgen-typescript-plugin, I'm not sure if this is the best way forward...

Some alternatives could be:

  • Figure out why react-docgen-typescript-loader is not working (and maybe fork it)
  • Use react-docgen-typescript (which is used by both the loader and the plugin) or react-docgen (which also supports typescript via babel) either in a custom webpack plugin or as a prebuild step to generate the docs. react-docgen-typescript looks equally unmaintained as the plugin and react-docgen has 90% blank docs...
  • Find some other library that does the same. I could only find full solutions, nothing that could be used in the existing Next.js docs.
  • Manually document all props for all components

@williaster and everyone else reading this, I hope this is at least somewhat useful, maybe you have already figured something out anyway. And if you are reading this before the holidays, happy holidays and don't feel compelled to answer until after the holidays :)

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.

1 participant