Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Chore: update to webpack 4 #857

Merged
merged 2 commits into from
Mar 29, 2018
Merged

Chore: update to webpack 4 #857

merged 2 commits into from
Mar 29, 2018

Conversation

kontrollanten
Copy link
Contributor

Fix snyk errors

Solves #856

@codecov-io
Copy link

codecov-io commented Mar 9, 2018

Codecov Report

Merging #857 into master will increase coverage by <.01%.
The diff coverage is 75%.

Impacted Files Coverage Δ
loaders/utils/processComponent.js 100% <100%> (ø) ⬆️
scripts/make-webpack-config.js 95% <66.66%> (+0.4%) ⬆️

@kontrollanten kontrollanten changed the title Chore: update webpack-dev-server Chore: update to webpack 4 Mar 9, 2018
@kontrollanten
Copy link
Contributor Author

Any comments?

@AndyBan
Copy link

AndyBan commented Mar 19, 2018

Confirming this works, please merge 👍

@sapegin
Copy link
Member

sapegin commented Mar 27, 2018

Could you please merge master into your branch?

},
mangle: {
keep_fnames: true,
optimization: {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this work with webpack 3?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No. I don't remember how this file is used. Will it be ran by the clients using react styleguidist? If it will, then I have to find a way to check for current webpack version.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It generates a webpack configuration, there's a check already.

Fixes snyk errors due to old webpack-dev-server
@milesj

This comment has been minimized.

package.json Outdated
@@ -85,7 +85,8 @@
"type-detect": "^4.0.8",
"uglifyjs-webpack-plugin": "1.2.4",
"unist-util-visit": "^1.3.0",
"webpack-dev-server": "^2.9.7",
"webpack-cli": "^2.0.11",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this should be in dev dependencies.

};
} else {
webpackConfig.plugins.unshift(
new UglifyJSPlugin({
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can remove duplication here by moving Uglify options to a const.

@sapegin sapegin added this to the 7.0.0 milestone Mar 29, 2018
@sapegin sapegin merged commit a5ea036 into styleguidist:master Mar 29, 2018
@kontrollanten kontrollanten deleted the update-webpack-dev-server branch March 30, 2018 04:19
sapegin added a commit that referenced this pull request Mar 31, 2018
👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋

## Breaking changes

### Node 6 is the lowest supported version

Styleguidist doesn’t support Node 4 anymore.

(#744 #839 by @kohgpat)

### New format of template option

We’re now using [mini-html-webpack-plugin](https://github.com/styleguidist/mini-html-webpack-plugin) and [@vxna/mini-html-webpack-template](https://github.com/vxna/mini-html-webpack-template) instead of [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin).

This will make things like [adding a favicon](https://react-styleguidist.js.org/docs/cookbook#how-to-add-a-favicon) or fonts from [Google Fonts](https://react-styleguidist.js.org/docs/cookbook#how-to-add-fonts-from-google-fonts) much easier.

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

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

// 7.x
module.exports = {
  template: {
    // This is just an example, there are many more available options
    favicon: 'https://assets-cdn.github.com/favicon.ico'
  }
}
```

See more [in the docs](https://react-styleguidist.js.org/docs/configuration#template).

(#896 #907 by @sapegin)

### Changed Node API

`server` method now returns an object containing a webpack `Compiler` instance and the Styleguidist server, see examples [in the docs](https://react-styleguidist.js.org/docs/api.html#servercallback).

(#828 by @cmswalker)

## New features

### Webpack 4 support

Webpack 3 is still supported too.

(#857 by @kontrollanten, #900 #901 by @rubenmoya)

### Examples are wrapped in React.Fragment

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

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

(#840 #842 by @tizmagik)

## Bug fixes

* `components` option should accept arrays.
* Do not convert URLs in Markdown to auto links (#793).
* Improved accessibility (#893 by @gergely-nagy).

---

❤️ Huge thanks to @okonet to help with this release, [CI](#904) and [docs](#905) improvements.️ ❤️
@styleguidist-bot
Copy link
Collaborator

🎉 This PR is included in version 7.0.0 🎉

The release is available on:

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

6 participants