React Styleguidist 5

This is the biggest React Styleguidist update with 300 commits and four month of work. It incorporates a lot of rethinking and rewriting. But most of the changes were done to make the initial configuration easier.

🍕 Huge thanks to Yury Shevchenko, Andrey Okonetchnikov and Oleg Slobodskoi for help with this release! 🍕

Here’s a quick overview of the most notable changes. See the release notes for the full list.

If you’re new to Styleguidst check out the getting started guide.

create-react-app support

Now Styleguidst works with create-react-app even without config.

It will load components from src/components/**/*.js. And example files from Component/Readme.md or Component/Component.md.

Easier webpack configuration

With the new webpackConfig option:

module.exports = {  webpackConfig: {    module: {      loaders: [        // Babel loader, will use your project’s .babelrc        {          test: /\.jsx?$/,          exclude: /node_modules/,          loader: 'babel-loader',        },        // Other loaders that is needed for your components        {          test: /\.css$/,          loader: 'style-loader!css-loader?modules',        },      ],    },  },};

You can reuse your existing webpack config:

module.exports = {  webpackConfig: require('./configs/webpack.js')};

Or Styleguidist will try to find webpack.config.js in your project’s root directory and use it.

We’ve also removed a notorious include or exclude option requirement for your webpack loaders.

Other changes

There are many more new options, tiny features and bug fixes — see the release notes.

Some under-the-hood changes

• We’ve migrated our tests from AVA to Jest and have added a lot of new tests.
• We’re using AST to generate code in webpack loaders instead of string concatenation.
• We’re using JSS for styling instead of CSS Modules for better isolation (thanks to jss-isolate) and easier theming.

Join our Gitter chat if you have any questions or follow me on Twitter to have the latest Styleguidist news in your feed.