Support for importing types #352

devongovett · 2019-05-04T03:59:37Z

Closes #33.

This adds support for importing propTypes, flow, and typescript from other modules. Various people have tried to do this through external handlers in the past, but this has been more challenging because they have needed to reimplement or copy many of the builtin helper functions available in react-docgen. This PR adds builtin support for importing, and should be much simpler than external solutions.

Current limitations:

ES6 imports only. Could add CommonJS support, but it's a bit more complicated and I'm not sure it's worth it when most apps should be using ES6 now anyway.
Resolving from node_modules is supported, but flow libdefs (flow-typed folder, .js.flow files, and .d.ts files) are unsupported. Would need to reimplement a custom resolver for those.

Some of these could be resolved, but we could also decide to leave some for future enhancements in order to start somewhere.

Allow different resolvers
Allow to disable resolving imports

danez · 2019-05-04T04:57:28Z

Unrelated to this PR: The Typescript change will be in a new major, because we also changed the license, so if you want to rename some internal helpers to better reflect their real purpose feel free to do so and create a PR. If you have the time.

danez · 2019-05-04T05:01:48Z

Thanks looking forward to see this in action.

I haven't looked at the code yet, but two things I would like to mention:

We need to make sure that react-docgen works in environments were fs is not available. Not sure whats the best solution, but I've seen in other projects where filersystem related functionality is put in a single file and then "overwritten" by specifying the browser field in package.json which loads a mock. There are probably better solutions though.
Could you rebase on master? I removed recast and instead use ast-types directly, so might have some merge conflicts and the new files would need adaption.

devongovett · 2019-05-04T05:03:47Z

Yep, working on the rebase now. For the fs thing, I think we could use the browser override trick, and point to a file that just returns null. If fs is unavailable, importing will just be unsupported.

devongovett · 2019-05-04T23:53:37Z

Ready for review! I added support for namespace imports, and re-exports. Leaving CommonJS and libdefs for future work. Also added a browser override for resolveImportedValue which does nothing.

nicholaai · 2019-05-06T18:08:11Z

I know a lot of the community has been dying for this, myself included. thank you! Hope this can get in after proper review 👍

devongovett · 2019-05-17T17:40:43Z

Hey sorry to be that guy (I know how it is), but is there anything I can do to help move this PR along?

mjhayes412 · 2019-05-17T17:45:46Z

I second this ^^

danez · 2019-05-17T23:52:15Z

Sorry I was working on other stuff and Felix is also not available. I hope I will try to find some time soon.

danez

Really nice work.

It would be nice to add more unit tests, especially for resolveToValue and resolveImportedValue. We could use https://github.com/tschaub/mock-fs to create the tests.

Will this also work for type/typeof imports in flow? Didn't see any tests. If not I'm happy to do that in a separate PR.

I think only doing ES6 imports is fine.

danez · 2019-05-24T23:13:17Z

src/utils/resolveToValue.js

-export default function resolveToValue(path: NodePath): NodePath {
+export default function resolveToValue(
+  path: NodePath,
+  resolveImports: boolean = true,


Suggested change

resolveImports: boolean = true,

resolveImports?: boolean = true,

I wonder if it makes more sense to have false as default? That would be less breaking for outside resolvers/handlers. But we are also doing a major anyway...
Are we using more cases with true in our codebase?

src/utils/resolveImportedValue.js

danez · 2019-05-24T23:30:18Z

src/utils/resolveImportedValue.js

+  const code = fs.readFileSync(resolvedSource, 'utf8');
+  const parseOptions: Options = {
+    ...options,
+    parserOptions: {},


Why overwriting the parserOptions?

fkling · 2019-06-05T20:46:20Z

I haven't looked at it yet, but I wanted to note two things:

At Facebook we use CommonJS like syntax
We also use a different module loader (we have a global name space)

If we are going to support dependency resolution, then we need to support multiple syntax and module loaders at some point, or at least make it easy to plug those in.

Short term we need to be able to either enable or disable dependency resolution (depending on what the default is), via CLI parameters and/or config, so that it still runs in environments where resolution does not work.

okonet · 2019-06-28T18:55:20Z

Any ETA on this to get merged?

devongovett · 2019-07-09T15:02:02Z

I need to find time to make the requested changes. Namely make resolvers pluggable as @fkling requested, and add more tests as @danez requested. If someone has time and wants to help, that would be appreciated.

lifeiscontent · 2020-04-29T01:52:06Z

@devongovett do you have time to finish this up?

sami616 · 2020-05-28T21:14:05Z

Vote for getting this merged! 👍🏼

connor-baer · 2020-05-28T21:24:45Z

@jdevo23, you might wanna exclude GitHub from your vacation autoresponder 😄

sami616 · 2020-05-30T09:02:48Z

Does this PR also solve the issue of using react types from the namespace (instead of directly importing them) resulting in any too?

ie: React.ReactNode instead of ReactNode

hipstersmoothie · 2020-06-11T19:24:57Z

Is react-docgen-typescript a fork of react-docgen? What's the relationship between the two?

@Vanuan I do not believe so. react-docgen and react-docgen-typescript both implement the standard for react docgen. (I think this was defined for styleguidist) They are both separate implementation that approach the problem in different ways.

react-docgen-typescript basically just runs your code through a typescript compiler and uses the AST typescript produces to construct the prop-type information (combining interfaces, types, and jsdoc). I am unsure of how this package works though.

blockracers · 2020-06-29T03:56:51Z

so close...

michaelbayday · 2020-07-22T22:51:59Z

Very interested in the PR.
Could we please get some traction on this PR?

Thank you!

ethanshar · 2020-08-27T09:16:22Z

Any plans to merge this PR any time soon ?

…eactjs/react-docgen#352)

agjs · 2020-09-14T08:54:00Z

Thanks for opening the PR and putting in the work. I believe many of us would appreciate if this can get merged as soon as possible.

haffmaestro · 2020-09-14T14:46:07Z

ITT: A lot of people asking if the work can be done for them. (Me included)
Not present: Anyone willing to do the work.

shilman · 2020-09-14T17:49:02Z

@haffmaestro not quite.. check out @phated's efforts to get this over the line: #464

and give him a big cheer!! 🙌

phated · 2020-09-24T17:48:02Z

Fwiw, that work ☝️ is now ready for review. It's a beefy PR (lots and lots of tests) and I'd love for some people to look at it!

kubilaykiymaci · 2020-11-24T20:06:51Z

hi, when will this pr will be merged? does anybody care about this? i have to decide about my usage.

haffmaestro · 2020-11-24T20:13:34Z

@kubilaykiymaci Looks like a lot of progress was made by @phated in #464 which has been merged 👏.

I don't think this pr will ever be merged, but looks like v5.4.0-alpha.0 includes #464 so that might solve your problems.

devongovett mentioned this pull request May 4, 2019

Add support for imported propTypes #33

Closed

danez added the improvement label May 4, 2019

devongovett force-pushed the importing branch from df70729 to 77c780b Compare May 4, 2019 05:45

devongovett changed the title ~~[WIP] Initial support for importing types~~ Support for importing types May 4, 2019

devongovett marked this pull request as ready for review May 4, 2019 23:50

devongovett added 6 commits May 4, 2019 16:51

Initial support for importing prop types

00b3d35

Add noop browser version of resolveImportedValue

268b828

Handle namespace imports

840ca88

Support export all declaration

79a814f

Handle recursive imports

80200c8

Support named re-exports

c180af8

devongovett force-pushed the importing branch from feaf1b0 to c180af8 Compare May 4, 2019 23:52

devongovett added 2 commits May 4, 2019 17:45

Fix lint

08b5e7f

Missing typedef

8c0a15f

danez reviewed May 24, 2019

View reviewed changes

matuzalemsteles mentioned this pull request May 30, 2019

refactor(gatsby-remark-api-table): Replace documentation with the use of react-docgen liferay/clay#2025

Merged

aarohmankad mentioned this pull request Jun 26, 2019

Cannot get prop-types of imported types styleguidist/react-styleguidist#1394

Closed

okonet mentioned this pull request Jun 27, 2019

Support imported propTypes styleguidist/react-styleguidist#917

Open

redallen mentioned this pull request Jul 1, 2019

Chart docs: annotate types patternfly/patternfly-react#2139

Closed

Smolations mentioned this pull request Apr 24, 2020

Addon Docs - build prop table from dynamic propTypes? storybookjs/storybook#10536

Closed

matuzalemsteles mentioned this pull request May 22, 2020

fix(clayui.com): Fix links that pointed to APITable but didn't work liferay/clay#3275

Merged

falconx mentioned this pull request Jun 4, 2020

feat: add styleguide public-convenience-ltd/toiletmap#760

Merged

gaurav5430 mentioned this pull request Jun 17, 2020

support Object.keys within oneOf #153

Closed

shilman mentioned this pull request Jun 25, 2020

Storybook addon-docs - imported flow types - flow intersection storybookjs/storybook#11289

Closed

pranav300 mentioned this pull request Jun 29, 2020

Props Table Enchancements for Custom propType Declarations cerner/terra-dev-site#254

Open

matuzalemsteles mentioned this pull request Aug 13, 2020

Improve Tooltip documentation with available options for positioning liferay/clay#3612

Closed

1 task

phated mentioned this pull request Sep 1, 2020

Add custom importers for importing types/values #464

Merged

2 tasks

Utzel-Butzel added a commit to wfp/designsystem that referenced this pull request Sep 6, 2020

docs(Wrapper): added oneOfType property until imports are supported (r…

e0835c7

…eactjs/react-docgen#352)

yuqu mentioned this pull request Oct 6, 2020

functional components not working? zeplin/cli-connect-react-plugin#27

Closed

danez closed this Nov 25, 2020

maxime-gendron mentioned this pull request Jan 21, 2021

feat(Buttons): Add destructive styles kronostechnologies/design-elements#196

Merged

diegonvs mentioned this pull request May 31, 2021

Dropdown.Section is not documented on ClayDropDown API docs liferay/clay#4095

Closed

1 task

Brailor mentioned this pull request Aug 3, 2021

docs: fix imported types not showing up in docs instructure/instructure-ui#667

Merged

sunyatasattva mentioned this pull request Nov 29, 2021

Addon-docs: Update type/value rendering for 6.0 recommendations storybookjs/storybook#10311

Closed

4 tasks

github-actions bot locked as resolved and limited conversation to collaborators Jul 28, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support for importing types #352

Support for importing types #352

devongovett commented May 4, 2019 •

edited by danez

Loading

danez commented May 4, 2019 •

edited

Loading

danez commented May 4, 2019 •

edited

Loading

devongovett commented May 4, 2019

devongovett commented May 4, 2019 •

edited

Loading

nicholaai commented May 6, 2019

devongovett commented May 17, 2019

mjhayes412 commented May 17, 2019

danez commented May 17, 2019

danez left a comment •

edited

Loading

danez May 24, 2019

danez May 24, 2019

fkling commented Jun 5, 2019 •

edited

Loading

okonet commented Jun 28, 2019

devongovett commented Jul 9, 2019

lifeiscontent commented Apr 29, 2020

sami616 commented May 28, 2020

connor-baer commented May 28, 2020

sami616 commented May 30, 2020

hipstersmoothie commented Jun 11, 2020 •

edited

Loading

blockracers commented Jun 29, 2020

michaelbayday commented Jul 22, 2020

ethanshar commented Aug 27, 2020

agjs commented Sep 14, 2020

haffmaestro commented Sep 14, 2020

shilman commented Sep 14, 2020

phated commented Sep 24, 2020

kubilaykiymaci commented Nov 24, 2020

haffmaestro commented Nov 24, 2020

	resolveImports: boolean = true,
	resolveImports?: boolean = true,

Support for importing types #352

Support for importing types #352

Conversation

devongovett commented May 4, 2019 • edited by danez Loading

danez commented May 4, 2019 • edited Loading

danez commented May 4, 2019 • edited Loading

devongovett commented May 4, 2019

devongovett commented May 4, 2019 • edited Loading

nicholaai commented May 6, 2019

devongovett commented May 17, 2019

mjhayes412 commented May 17, 2019

danez commented May 17, 2019

danez left a comment • edited Loading

Choose a reason for hiding this comment

danez May 24, 2019

Choose a reason for hiding this comment

danez May 24, 2019

Choose a reason for hiding this comment

fkling commented Jun 5, 2019 • edited Loading

okonet commented Jun 28, 2019

devongovett commented Jul 9, 2019

lifeiscontent commented Apr 29, 2020

sami616 commented May 28, 2020

connor-baer commented May 28, 2020

sami616 commented May 30, 2020

hipstersmoothie commented Jun 11, 2020 • edited Loading

blockracers commented Jun 29, 2020

michaelbayday commented Jul 22, 2020

ethanshar commented Aug 27, 2020

agjs commented Sep 14, 2020

haffmaestro commented Sep 14, 2020

shilman commented Sep 14, 2020

phated commented Sep 24, 2020

kubilaykiymaci commented Nov 24, 2020

haffmaestro commented Nov 24, 2020

devongovett commented May 4, 2019 •

edited by danez

Loading

danez commented May 4, 2019 •

edited

Loading

danez commented May 4, 2019 •

edited

Loading

devongovett commented May 4, 2019 •

edited

Loading

danez left a comment •

edited

Loading

fkling commented Jun 5, 2019 •

edited

Loading

hipstersmoothie commented Jun 11, 2020 •

edited

Loading