React Styleguidist 7: hello webpack 4, goodbye Node.js 4, and more

Photo by Artem Sapegin on Unsplash

👋 Support Styleguidist on Open Collective 👋

I’m happy to announce a new major release of React Styleguidist.

Webpack 4 support

Webpack 3 is still supported too.

Node.js 6 is the lowest supported version

Styleguidist won’t work with Node.js 4 anymore.

Examples are wrapped in React.Fragment

You don’t need to wrap multiple JSX tags in a div anymore.

// 6.x
<div>
  <Button primary>Primary button</Button>
  <Button secondary>Secondary button</Button>
</div>


// 7.x
<Button primary>Primary button</Button>
<Button secondary>Secondary button</Button>

Fragment JSX syntax also works:

// 7.x
<>
  <Button primary>Primary button</Button>
  <Button secondary>Secondary button</Button>
</>

New format of the template option

We’re now using mini-html-webpack-plugin and @vxna/mini-html-webpack-template instead of html-webpack-plugin. This will make things like adding a favicon or fonts from Google Fonts much easier.

If you’re using a custom HTML template, you need to update your style guide config. Instead of:

// 6.x
module.exports = {
  template: './styleguie/template.html'
}

You need to use something like this:

// 7.x
module.exports = {
  template: {
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
}

Or like this:

// 7.x
module.exports = {
  template: {
    head: {
      links: [
        {
          rel: 'stylesheet',
          href: 'https://fonts.googleapis.com/css?family=Roboto'
        }
      ]
    }
  },
  theme: {
    fontFamily: {
      base: '"Roboto", sans-serif'
    }
  }
}

There are a few more changes, see a full change log.

❤️ Huge thanks to Andrey Okonetchnikov, Nikolay Burlov, Rubén Moya and others for help with this release️! ❤️