React Styleguidist 7.0.0 - привет, webpack 4, прощай, Node.js 4

Webpack 3 по-прежнему поддерживается.

Node.js 6 - самая низкая поддерживаемая версия

Styleguidist больше не работает с Node.js 4.

Примеры обернуты в React.Fragment.

Вам больше не нужно заключать в div несколько тегов JSX.

// 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>

Синтаксис фрагмента JSX также работает:

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

Новый формат опции шаблона

Теперь мы используем mini-html-webpack-plugin и @ vxna / mini-html-webpack-template вместо html-webpack-plugin. Это значительно упростит такие вещи, как добавление значка или шрифтов из Google Fonts.

Если вы используете собственный шаблон HTML, вам необходимо обновить конфигурацию руководства по стилю. Вместо того:

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

Вам нужно использовать что-то вроде этого:

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

Или вот так:

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

Есть еще несколько изменений, см. Полный журнал изменений.

❤️ Огромное спасибо Андрею Оконечникову, Николаю Бурлову, Рубену Мойе и другим за помощь с этим выпуском️! ❤️