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.
