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.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!