v5.1.3

• Fixed: Not working styles isolation and layout issues after JSS update.
• Fixed: JavaScript error when welcome screen is not shown.

v5.1.2

• Fixed: Add .jsx extension to default components and ignore patterns (#404)

v5.1.1

New features

React 15.5 compatibility

No warnings when running with React 15.5.

(#389 by @ldabiralai, @kulakowka)

New config option to change Buble configuration

New config option compilerConfig.

(#392 by @dylanmoz)

Change default dev server host to 0.0.0.0

This allows users to connect from outside their local machines.

(#374 by @Knorcedger)

Bug fixes

• Pass resolver and handlers to propsParser (#377 by @stepancar)
• Use [name] in output filenames (#381 by @jskeate)
• Show actual glob patterns on welcome screen (#387).
• Show correct types in config validation errors (for example do not show null as object).
• Do not print clean-webpack-plugin log messages.
• Allow working without webpack config.

v5.0.6

• Fixed: Move clean-webpack-plugin to dependencies

v5.0.5

• Fixed: Hash JS assets in production build (#372)

v5.0.4

• Fixed: Refactor preview component, improve Preact compatibility

v5.0.3

• Fixed: @example doclets

v5.0.2

• Fixed: Default getExampleFilename should work with any extension

v5.0.1

• Fixed: Add viewport meta tag

v5.0.0

Huge thanks to @n1313, @okonet and @kof for help with this release!

Highlights

1. create-react-app support out of the box.
2. New webpack configuration options + user config auto load.

Breaking changes

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.

User webpack config auto load

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

If your webpack config is located somewhere else, you need to load it manually:

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

Note: entry, externals, output, watch, stats and devtool options will be ignored.

Note: CommonsChunkPlugins, HtmlWebpackPlugin, UglifyJsPlugin, HotModuleReplacementPlugin plugins will be ignored because Styleguidist already includes them or they may break Styleguidist.

Note: Babelified webpack configs (like webpack.config.babel.js) are not supported. We recommend to convert your config to native Node — Node 6 supports many ES6 features.

Easier webpack configuration

With the new webpackConfig:

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',
        },
      ],
    },
  },
};

See the new webpack configuration guide for more examples.

Also:

• include/exclude options in you webpack loaders are no longer required.
• JSON loader will be added automatically if needed.

No global Lodash in examples

Lodash will not be available in examples as _. You can load function you need with the new context option:

module.exports = {
  context: {
    forEach: 'lodash/forEach',
    map: 'lodash/map',
  },
};

Or replicate previous behavior though it’s not recommended:

module.exports = {
  context: {
    _: 'lodash',
  },
};

Use JSS for styling instead of CSS Modules

Use config option theme to change fonts, colors, etc. and option styles to tweak style of particular Styleguidist’s components:

module.exports = {
	theme: {
		link: 'firebrick',
		linkHover: 'salmon',
		font: '"Comic Sans MS", "Comic Sans", cursive',
	},
	styles: {
		Logo: {
			logo: {
				animation: 'blink ease-in-out 300ms infinite',
			},
			'@keyframes blink': {
				to: { opacity: 0 },
			},
		},
	},
};

We now use JSS under the hoood.

New default config options

• components: src/components/**/*.js
• getExampleFilename: Component/Readme.md or Component/Component.md
• title: <app name from package.json> Style Guide

New default dev-server port

Default port is now 6060 because create-react-app uses 3000 too.

Use findAllExportedComponentDefinitions as a default resolver

Fixes #260.

Drop npm2 support

Other changes and new features

• New config option require to add new webpack entries like polyfills and custom styles
• New config option ignore to exclude components from the style guide.
• New config option showSidebar (#310)
• Ignoring props with @ignore JSDoc tag (#353)
• objectOf propType support (#347)
• updateWebpackConfig option was renamed to dangerouslyUpdateWebpackConfig and should be used in very rare cases when webpackConfig isn’t enough
• Style guide config validation
• Reduced build size

Bug fixes

• Path for template config option should be relative to style guide config (#211)
• Do not show isolated links on Markdown examples (#251)
• Show function PropType.func’s source in a tooltip (#343)
• Escape and highlight code in Markdown in descriptions (#284)
• Do not change level of Markdown headings (#329)
• Search should work for subsections (#245)
• Better anchors navigation with unique slugs (#318)
• User’s html-loader should not affect Styleguidist (#312)
• Show webpack build errors and warnings
• Exit with error code when build fails
• Show error when no components found on style guide start
• Do not fail when one of the files doesn’t export a component