paint-brush
React Styleguidist 5by@sapegin
3,599 reads
3,599 reads

React Styleguidist 5

by Artem Sapegin
Artem Sapegin HackerNoon profile picture

Artem Sapegin

@sapegin

Web developer, award-losing photographer and dog friend.

March 31st, 2017
Read on Terminal Reader
Read this story in a terminal
Print this story
Read this story w/o Javascript
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

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.

People Mentioned

Mention Thumbnail

Andrey Okonetchnikov

@okonetchnikov

Companies Mentioned

Mention Thumbnail
Facebook
Mention Thumbnail
TAG
featured image - React Styleguidist 5
Artem Sapegin HackerNoon profile picture
Artem Sapegin

Artem Sapegin

@sapegin

Web developer, award-losing photographer and dog friend.

About @sapegin
LEARN MORE ABOUT @SAPEGIN'S
EXPERTISE AND PLACE ON THE INTERNET.

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.

L O A D I N G
. . . comments & more!

About Author

Artem Sapegin HackerNoon profile picture
Artem Sapegin@sapegin
Web developer, award-losing photographer and dog friend.

TOPICS

THIS ARTICLE WAS FEATURED IN...

Permanent on Arweave
Read on Terminal Reader
Read this story in a terminal
 Terminal
Read this story w/o Javascript
Read this story w/o Javascript
 Lite
Buff

Mentioned in this story

profiles
X REMOVE AD