TypeCheck mdx-generated code as typescript

[phryneas]

Currently, typescript is only transpiled, but not typechecked. So I won't notice if I have a typo in my .mdx and I won't get notified about incompatible documentation when I change a component signature without updating my .mdx. (until the js in the browser crashes later on)

So I had the idea: Why not try and add ts-loader or similar to the build process? This way, mdx would be transpiled to typescript, which would then be typechecked and transpiled to javascript.

Unfortunately, I did not succeed using any of the established loaders out there. So I wrote a small loader that plugs between the mdx-loader and babel-loader, does a typecheck but not modify the source in any way.

You can find that experiment here: https://gist.github.com/phryneas/f9a1e3bd42e900d5eb3dc7c7a3446532 - but be warned, it is very hacky.

This works quite well (you get good warnings if your mdx is in any way wrong), but as I have no real idea about the internals of webpack or the typescript compiler, this is very slow and inefficient.

Maybe this could serve as an idea or a prototype of a native docz feature?

I could imagine that teaming up with the author of `https://github.com/Realytics/fork-ts-checker-webpack-plugin might be an interesting idea - fork-ts-checker checks for types in parallel, so it might only need a hook that would be invoked somewhere in the build and typechecking could run in parallel and in a more efficient fashion.

What do you think?

[weslleyaraujo]

this is amazing sir 🙏🙏🙏

[phryneas]

I made a pull request at fork-ts-checker ( TypeStrong/fork-ts-checker-webpack-plugin#225 ) - if this gets merged, typechecking will occur in parallel and be quite fast.

[karlhorky]

New pull request is at TypeStrong/fork-ts-checker-webpack-plugin#227 (still not merged)