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
typescript support #67
Comments
Yeah, react-docgen doesn't work with generated code. I don't think is there anything we can do about it, since generated / transpiled code can be quite arbitrary and have helpers that make analysis more difficult. Regarding TypeScript: I don't think the libraries that react-docgen builds upon will be handle to deal with TypeScript. However, if there is a way to convert a TypeScript AST into an equivalent JavaScraipt / Babylon AST, I'm happy to look into it. That said, I could imagine that there already is a documentation generation tool for TypeScript which likely would work fine for your use case as well. I'm closing this for now since I don't think there is anything else I can do here. |
Not sure if Typescript AST can be easy converted to Babylon one. Here is an example of parsing Typescript one: https://github.com/Microsoft/TypeScript/wiki/Using-the-Compiler-API#traversing-the-ast-with-a-little-linter |
react-docgen-typescript may be useful for some use cases. |
For anyone still finding this, I ended up going with documentalist - it parses typescript as well as markdown and similarly spits out splendid json. It's not built specifically for react components - which can be a good thing - so you'll need to write a little bit of logic to aggregate a component's data to it's props (it's really not that bad though. I might even share a gist when I'm done doing this myself.) So it's closer to something like typedoc - however it's JSON output is nicely documented and (IMHO) much easier to make sense of. |
@StJohn3D Please, do share the gist! |
@sophieH29 so for my needs I ended up not aggregating the data as it allows me to be more flexible in my documentation workflow to just call a function and pass in the name of the export I'm looking for. That said, when you run documentalist and inspect the json output you should find something like this. {
"typescript": {
"MyClass": {
"kind": "class",
"extends": [
"Component<IMyClassProps, IMyClassState>"
],
},
"IMyClassProps": {
"kind": "interface",
"properties": [
{
"fileName": "src/myClass.tsx",
"flags": {
"isExported": true,
"isExternal": false,
"isOptional": true,
"isPrivate": false,
"isProtected": false,
"isPublic": false,
"isStatic": false
},
"kind": "property",
"name": "headerText",
"sourceUrl": "https://github.com/redacted/src/myClass.tsx#L7",
"type": "undefined | string"
}
]
}
}
} There's actually WAY more data that you'll get than this but I'm highlighting the relevant bits for brevity. With that json youtput you could use a regex to find each class' properties... const getData = (docs) => {
const result = []
for (key in docs.typescript) {
const data = docs.typescript[key]
if (data.kind === "class") {
const propsInterfaceName = data.extends[0].match(extendsRegex)[1]
const propsData = docs.typescript[propsInterfaceName]
data.properties = propsData.properties
result.push(data)
}
}
return result
} Obviously that function is not production ready - there's no error catching - it's just assuming everything will be there. But the point is to show how easy it would be to aggregate the data. The output of that function would be an array of all of your exported classes. And each object in that array would also contain a Hope that helps! |
@StJohn3D thank you! I'll take a look on that |
I wonder if
typescript
support is in the scope of this package.It works well for transpiled stateless components, but can't recognize component transpiled from
export class SomeStatefulComponent extends React.Component
variant:But it seems that generated
d.ts
files is much more great source to parse:The text was updated successfully, but these errors were encountered: