Support TypeScript out of the box

[sapegin]

• Upgrade react-docgen to 5.0.0 beta (Upgrade react-docgen to 5.0.0 beta #1354)
• Tweak default components and ignore patterns to include .ts and .tsx.
• Tweak default extensions in webpack config to include .ts and .tsx.
• Update docs maybe (search for typescript and see if the information is still relevant).

[stereobooster]

I do not want to open an separate issue, because I'm not sure if this an issue of styleguidist or my setup. I bootstrapped project with https://github.com/wmonk/create-react-app-typescript

My config is:

const path = require("path");
module.exports = {
  propsParser: require("react-docgen-typescript").withCustomConfig(
    "./tsconfig.json"
  ).parse
};

I get the following error

InvalidCharacterError: Failed to execute 'createElement' on 'Document': The tag name provided ('static/media/Navbar.b192c68a.tsx

UPD: fixed by adding this to the config

webpackConfig: require("react-scripts-ts/config/webpack.config.dev.js")

[okonet]

@sapegin I might need this and could work on this. I'm not sure about the second step, though. Any pointers?

[sapegin]

@okonet Probably that's what withDefaultConfig is doing but the docs aren't super clear on that, and I haven't looked at the code. Similar to how we (and webpack) load webpack.config.js by default — load tsconfig.json by default like TypeScript does.

[bebraw]

Make react-docgen-typescript support default export the way they work in Styleguidist for JavaScript.

I think that's done by now.

Make react-docgen-typescript read users’s tsconfig.json by default.

Seems to work.

Automatically enable react-docgen-typescript for TypeScript projects (check typescript in devDependencies?

I need a spec for this. How should we depend on react-docgen-typescript? What's the preferred approach? It doesn't come with any deps and it's controlled. I have a basic setup to adapt.

[sapegin]

I think your approach with extension checking is the right one!

[sapegin]

Make react-docgen-typescript read users’s tsconfig.json by default.

I'm not sure about that after looking at the code ;-/

[okonet]

Yep, we should resolve the path carefully.

[tsiq-jeremy]

I was doing a little bit of research on this and it looks like react-docgen is trying to support typescript, but it seems to be in early stages. If they did support TS there would not be a need for react-docgen-typescript anymore.

Automatically enable react-docgen-typescript for TypeScript projects (check typescript in devDependencies?

Seems doable, just update props-loader.js to check if TS is supported then use react-docgen-typescript if it is.

[s-h-a-d-o-w]

In case you are still considering this, I would recommend you run react-docgen-typescript against some slightly complex cases such as a formerly Flow-typed FC that destructures props, assigns default values to them and uses typed objects for some of the props - some of which are optional.

Unfortunately, none of that works well, as I have discovered today, after migrating our UI component library at work from Flow to TS. Default values are missing, the structure of typed objects is not passed to styleguidist and optional props are described as propType | undefined.
And so we are currently struggling with whether we can fix this in a reasonable amount of time or have to build our API docs some other way. But we've enjoyed using styleguidist with Flow-typed components very much, so we're hoping for the former.

But that's why I'd recommend waiting for that react-docgen TS support that @tsiq-jeremy mentioned.

[s-h-a-d-o-w]

The beautiful thing is... possibly due to babel magic (gotta love it), it looks like people who need TS support right now can actually already have it. I've played around with the Button component in the "basic" example:
https://github.com/s-h-a-d-o-w/react-styleguidist/tree/basic_TS_example

Looks just wonderful to me. Not sure whether it has any flaws but... I'll definitely try this out on our library at work soon. 😉

UPDATE Yup, works great as long as one uses type and not interface for prop types...

[devongovett]

FYI, I'm working on TypeScript support for react-docgen here. Feel free to test it out: reactjs/react-docgen#348

[J-Kallunki]

Should this also include support for customizing rsg-components? Got typescript working fine for presented components, but creating custom rsg-components with styleguideComponents seems to be a bit harder when using TS.

[sapegin]

@J-Kallunki which problems do you have? There shouldn't be any difference ;-/

[J-Kallunki]

I'm using Webpack and awesome-typescript-loader.

ComponentsList.tsx:

import React, { Component } from 'react';
import { default as DefaultComponentsList } from 'react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsList';
export default class ComponentsList extends Component {
  render() {
    return <DefaultComponentsList {...this.props} />;
  }
}

Typings (minimal):

declare module 'react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsList' {
  interface ComponentsListProps {
    [key: string]: any | any[];
  }

  const ComponentsList: React.FunctionComponent<ComponentsListProps>;
  export default ComponentsList;
}

Result:

./node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsList.js
Module not found: Can't resolve 'rsg-components/ComponentsList/ComponentsListRenderer'

So I would need to configure babel just for it and use only non-TS custom components?

[sapegin]

I don't think you need to configure Babel, everything in lib is already compiled. But you need to configure TypeScript for your ComponentsList.tsx. Or you many need to define typings for rsg-components/ComponentsList/ComponentsListRenderer too, I don't know TypeScript enough unfortunately.

[J-Kallunki]

I don't think you need to configure Babel, everything in lib is already compiled. But you need to configure TypeScript for your ComponentsList.tsx. Or you many need to define typings for rsg-components/ComponentsList/ComponentsListRenderer too, I don't know TypeScript enough unfortunately.

I got the earlier example working just by defining to moduleAliases:

'rsg-components/ComponentsList/ComponentsListRenderer': path.resolve(__dirname, 'node_modules/react-styleguidist/lib/client/rsg-components/ComponentsList/ComponentsListRenderer'),

Is it the best way to do it - it is the simplest - or should it be also documented how to use custom srg components with TS?

[sapegin]

Have you tried this?

Or you many need to define typings for rsg-components/ComponentsList/ComponentsListRenderer too

[J-Kallunki]

Have you tried this?

Or you many need to define typings for rsg-components/ComponentsList/ComponentsListRenderer too

Yeah tried that with the same way as it works for the ComponentsList but not helping for that.

It is clearly saying that cannot find ComponentsListRenderer when ComponentsListis called from the customwrapper ComponentsList-component:

Module not found: Can't resolve 'rsg-components/ComponentsList/ComponentsListRenderer'

[sapegin]

@J-Kallunki I may have fixed that in 9e29c10, at least I had the same error ;-)

[plumpNation]

The error:

Module parse failed: Unexpected token (6:4)
You may need an appropriate loader to handle this file type.

I am not certain this is the same issue, apologies if not. I'm using create-react-app, I made a tsx styleguideComponents Wrapper, and setup propsParser: require('react-docgen-typescript').parse.

"react-docgen-typescript": "^1.12.4",
"react-styleguidist": "^9.1.6"

I created the smallest reproduction of this that I could and made a repo here.

https://github.com/plumpNation/cra-styleguidist-typescript

Thanks for the excellent tool, I will just switch the wrapper to jsx until I find out how to support tsx styleguideComponents.

EDIT: I switched to jsx and I still have the "missing loader" error so I may be doing something very wrong.

EDIT2: I had a break and it occurred to me that the styleguideComponents probably need to be in the standard CRA src folder. Now it works fine, repo updated with the "fix", sorry to bother you.

I'll let you delete or allow this comment to remain. Again, thanks for the library.