React Styleguidist uses external Markdown files to store usage examples. We wanted to use TypeScript for examples because reasons and we managed to do this with horrible solution. It includes custom webpack loader that parses TypeScript file with regular expressions and converts it to markdown. You could find parts of our code below.
You can find more info about why and how we did it in this talk:
AlertBar.example.tsx
contains usage example. styleguide.config.js
contains parts of config replacing Styleguidist's webpack loader with examples-loader.js
. examples.test.tsx
is a usual Jest test covering all examples with snapshot tests.