Support for generating prop types?

[selbekk]

trafficstars

Current Behavior

Right now, projects made with TSDX doesn't generate prop types automatically.

Desired Behavior

I'd like to have an option (or a way to extend the config) so that I can generate prop types in the development version of the package I create.

Suggested Solution

We could add a config option to add this babel plugin:

https://www.npmjs.com/package/babel-plugin-typescript-to-proptypes

Or write something similar, idk 🤷‍♂️

Who does this impact? Who is this for?

We're creating a component library in TypeScript, but many of our consumers don't use TypeScript. It would be great to add prop types as a fallback runtime verification for those that aren't using types.

This translates well to many packages created with TSDX, I would assume.

[ambroseus]

@selbekk you have such option: https://github.com/jaredpalmer/tsdx#babel

[selbekk]

🤔 I tried to generate a repro:

• bootstrap a new project with tsdx create example (with React)
• add some types to the generated src/index.tsx component
• install the babel-plugin-typescript-to-proptypes
• add a .babelrc with the following config

{
  "plugins": ["babel-plugin-typescript-to-proptypes"]
}

And it didn't make a difference to the output at all. Am I missing an important step?

Here's a repro: https://github.com/selbekk/repro-tsdx-418

[ambroseus]

@selbekk thinking guess this plugin is not applicable with tsdx cause babel get already compiled sources after rollup (not original typescrpt) https://github.com/rollup/rollup-plugin-babel#why

I'll check it more deeply soon...

[ambroseus]

@selbekk maybe you don't need tsdx for building react components library https://hackernoon.com/creating-a-library-of-react-components-using-create-react-app-without-ejecting-d182df690c6b https://itnext.io/create-and-publish-a-react-component-library-the-easy-way-6d1798974bc6

[selbekk]

TSDX is a great way to create packages, and my component library is just a bunch of packages, really. :) I don't see why I couldn't use TSDX for this.

[ambroseus]

yep, tsdx is great! :) but not a silver bullet.. but this is interesting challenge so I'll try to solve it :)

[ambroseus]

@selbekk I have solution, but it's not so simple)) https://github.com/selbekk/repro-tsdx-418/pull/1

[ambroseus]

btw, I also prefer to use typescript only as type checker and type defs generator - not as transpiler and compiler - this is for babel which is first class transpiler :)

[selbekk]

I'm happy that works, and thanks for the incredible effort solving that (!), but switching out the entire compiler is a bit convoluted. Is there no way this could be built in to tsdx itself? as a rollup plugin or whatever?

[ambroseus]

https://github.com/milesj/babel-plugin-typescript-to-proptypes/issues/9

as I see the only way is to extend rollup-plugin-typescript2 with custom typescript transformer (like this one https://github.com/ambroseus/tsdx/pull/1/commits/f20dc6912d1d1cabba1c4daec2c68c84c47806e1)

but as @jaredpalmer says this is not tsdx way..

[ambroseus]

@selbekk found another solution: https://github.com/gcanti/prop-types-ts but...

As I can see from the documentation, this is not a fully compatible PropTypes generator, but instead a replacement, which uses it's own implementation for type checking at runtime. I would prefer my PropTypes to be fully compatible with the official implementation though

[ambroseus]

...to many but :smile:

[ambroseus]

well.... https://stackoverflow.com/questions/54060057/generating-proptypes-for-react-components-written-in-typescript

As for me, I think I will have to keep both TypeScript typings and manual PropTypes in sync for now, because I'm not using Babel and I don't really like a custom PropTypes implementation. Maybe, one sunny day, we will find some resources to actually write our own PropTypes generator in our company and will share it with everyone

it looks like TypeScript guys doesn't see this as a viable use case. It looks like they think that TypeScript typings are a replacement for PropTypes. Even the discussion issue is locked on this subject..

[agilgur5]

There is also PropTypes.InferProps from the prop-types package, which is detailed well in https://dev.to/busypeoples/notes-on-typescript-inferring-react-proptypes-1g88

[acasazza]

Hey guys! It will be awesome! When will you be in the roadmap?

[agilgur5]

@acasazza please read the comments. There isn't currently a viable approach, so there can't be a roadmap.

[acasazza]

@agilgur5, I tried babel-plugin-typescript-to-proptypes, and it seems the better solution. Can I make a tsdx template? What do you think?

[agilgur5]

@acasazza again, please read the comments before notifying everyone...

babel-plugin-typescript-to-proptypes is not compatible with TSDX. It requires using @babel/preset-typescript to strip types whereas TSDX fully compiles the TypeScript with rollup-plugin-typescript2.

That was stated already in above comments and why I said it's not viable.

[andriyor]

I think this comment can help you https://github.com/milesj/babel-plugin-typescript-to-proptypes/issues/8#issuecomment-604709978

[ambroseus]

@andriyor thanks) material-ui alredy use it https://github.com/mui-org/material-ui/pull/21497

[agilgur5]

Thought I'd mention this here for any readers, but I wrote upstream in rpt2 (where I now help out as a maintainer) in https://github.com/ezolenko/rollup-plugin-typescript2/issues/268#issuecomment-1151665344 that using Babel plugins on top of TS code may be possible with a two-pass system. First run through @babel/plugin-syntax-typescript to allow Babel to understand TS but not strip it. Add some TS specific plugins only, then you can pass it through rpt2, and then back to Babel to use things like preset-env etc.

It's very inefficient and hacky, but could be doable if someone wants to do so. Also code returned by Babel plugins is likely pure JS so it may complicate type-checking. Experimentation definitely required, but thought I might as well mention it.