ts-react-loader
ts-react-loader copied to clipboard
Implement as TypeScript compiler transform
The TypeScript compiler API supports transforms for a while now. It should be possible to implement the main functionality independent of webpack, and then expose it as a compiler transform as well as a webpack loader.
Keep an eye on https://github.com/Microsoft/TypeScript/issues/14419 to see if a common approach to using typescript with compiler transforms comes about.
Turns out ts-loader
already supports custom transformers :tada:
The way the first proof-of-concept was written is incredibly wasteful (running the typescript compiler twice) so I will definitely be rewriting this as a transformer and documenting how to use it with ts-loader
.
From looking at https://github.com/Igorbek/typescript-plugin-styled-components, the same is also true of awesome-typescript
Further thoughts on this:
-
@babel/preset-typescript
is gaining in popularity, especially for development builds (where you really want the prop-types). It doesn't have any real type information though so this could never work in that environment. - prop-types in general appear to be falling out of favor for React.
- The new context API has been released and use of static
contextTypes
is discouraged for new code.
Given the above, it doesn't make sense to sink a lot of effort into this project. I do like the idea of generating runtime validation code from static types, but I think it makes more sense to decouple this from the react prop-types infrastructure and require explicit validations. E.g.
import * as React from 'react'
import validate from 'ts-validate/validate' // a "marker" function, calls will be replaced by the transform
interface Props {
foo: string
}
export default function MyComponent(props: Props) {
validate(props) // compiler transform replaces this call with validation code generated from `Props`
return <span>{props.foo}</span>
}
The ts-validate/validate
package would export an empty function, so that code compiled without the transform will continue to run:
export default function validate(x: any) {}
(I'm fairly certain many minifiers will actually remove the function call entirely).