Need to use TypeScript compiler to parse props properly

[RoystonS]

Hi there,

As my components get increasingly complex, I've been struggling to get react-docgen-typescript to parse them. In particular, I have

• props interfaces extending other interfaces
• components using ANDed (&) intersection props interfaces
• higher-order components that change returned prop types

Right now, react-docgen-typescript can't cope with any of those because it's trying to look up interfaces by name by hand, and do other jiggery-pokery which can't work in the general case.

I think the only general solution to making this work properly is to engage the help of the TypeScript compiler itself to process the file and expose the type information. (It appears to be relatively little code to get the compiler to do that.)

I'd be happy to help out with modifying react-docgen-typescript to use this approach, but wanted to check in with you before beginning on it as it's not an entirely trivial change.

Proof of Concept

I've developed a little (~120 lines) proof of concept standalone app which is capable of parsing any component file I've thrown at it yet. It simply asks TypeScript to give it the resolved type for any exported objects, and can scan that and extract props successfully.

Demo app (both TS and the compiled JS): https://gist.github.com/RoystonS/f590f336643a782ac5abb5059817e06c

That app takes a filename as a parameter and parses the file. If you have an especially complex setup, it'll also optionally take a tsconfig file to aid the TS compiler, but works in most cases without it.

Sample nasty test component (indicative of the types we're using with glamorous) and the output from the program:
https://gist.github.com/RoystonS/92784110dc263de4eea5329142badc5d

So...

Would you be happy for me to begin modification of react-docgen-typescript on a branch, to use this approach? Or would you rather do it? As far as I can make out, it would close a number of existing issues too.

[goodmind]

Any progress here?

[pvasek]

Sorry, I was on holiday and didn't have time to catch up.
@RoystonS I would be really happy if you can implement this change.

[pvasek]

@RoystonS Because there are many issues, which I believe, could be fix by your proposal, I started and created a new branch

https://github.com/styleguidist/react-docgen-typescript/tree/roystons-poc 

where I created propTypesParser2 which is your proof of concept more or less (not including typescript config for now). It works really well great job!

There are few things missing:

• updating unit tests
• properties comments doesn't work (no idea why)
• property values (union types)
• select "the right" component where there are more then one in file

Feel free to contribute :)

[scottdj92]

Is this fixed with this PR? #34

[RoystonS]

Sorry, I've been in outer space for a little while so hadn't caught up with these messages.

I actually implemented my suggestion a couple of weeks ago, but it turns out to be pretty much a replacement for react-docgen-typescript, and the existing unit tests are basically trashed because they're fairly white-box. It doesn't produce exactly the same output as existing react-docgen-typescript because it does pull all base type props in, for instance, but it's pretty good.

I've been running with it instead of react-docgen-typescript since then and it works very well.

It's not a straightforward PR as it kinda replaces quite a lot of stuff. I'll take a look at your branch and push up what I've got somewhere so you can compare.

[RoystonS]

@scottdj92 No. That PR fixed JSDoc tags such as @ignore

[RoystonS]

Ok, I've just pushed what I had to https://github.com/RoystonS/react-docgen-typescript/tree/roystons-poc

I've put it in the imaginatively-named propTypesParser3 file. It has the TS config stuff in there, because I found that in certain situations it's important to be able to provide a pointer to a specific tsconfig file.

I believe that property comments do work (I remember that being a bit complex).

See what you think - pluck and steal as you like. Happy to help with unit testing chore too, as that'll be somewhat painful.

[bsouthga]

@RoystonS thanks for doing this -- our team could really use this fix as well.

Just wanted to flag on potentially tweak, the check here fails for us, as stateless components have an optional context param as well

[pvasek]

@bsouthga could you provide the example that you think will fail?

[bsouthga]

Created a branch off of the above discussed branch to illustrate: https://github.com/bsouthga/react-docgen-typescript/tree/stateless-component-cant-find

Basically when annotating a component like this:

import * as React from "react";

export const Stateless: React.StatelessComponent<{ myProp: string }> = props =>
  <div>
    My Property = {props.myProp}
  </div>;

export default Stateless;

I was running into issues -- looks like there might be a different error now since I last tried. After npm link-ing the repo to the example folder, I get the following after npm start:

➜  react-styleguidist-example git:(stateless-component-cant-find) ✗ npm start

> react-docgen-typescript-example@0.0.1 start /Users/bensouthgate/projects/react-docgen-typescript/examples/react-styleguidist-example
> tsc && styleguidist server --config styleguide.config.js

Loading webpack config from:
/Users/bensouthgate/projects/react-docgen-typescript/examples/react-styleguidist-example/webpack.config.js

Style guide server started at:
http://0.0.0.0:6060

ts-loader: Using typescript@2.3.3 and /Users/bensouthgate/projects/react-docgen-typescript/examples/react-styleguidist-example/tsconfig.json
Failed to compile.

Error in ./components/Stateless.tsx
Module build failed: TypeError: Cannot read property 'methods' of undefined
 @ ./~/react-styleguidist/loaders/styleguide-loader.js!./~/react-styleguidist/lib/index.js 68:29-300
 @ ./~/react-styleguidist/lib/index.js
 @ multi ./~/react-styleguidist/lib/index ./~/react-dev-utils/webpackHotDevClient.js

[pvasek]

No problem, I added your component to test suite and it's really failing. Thanks!

[pvasek]

Sorry wrong thread :) Interesting, I have no idea something like that is supported by styleguidist. @bsouthga Could you create a new issue for this one?

[pvasek]

Released version 1.0.0 that include @RoystonS rewrite. Please let me know if it works for you and we can close this issue.