From a5e14ae227f07bb546052a81087ce573749c0d46 Mon Sep 17 00:00:00 2001 From: Artem Sapegin Date: Wed, 28 Jun 2017 16:10:18 +0200 Subject: [PATCH] Refactor: Remove webpack from peerDependencies Check webpack availability and version at run time instead of using peerDependencies to allow usage of build tools that contains webpack as their own dependency, like Create React App. See discussion here: https://github.com/facebookincubator/create-react-app/pull/2044 --- bin/styleguidist.js | 35 +++++++----- docs/GettingStarted.md | 26 ++++----- package-lock.json | 90 ++++++++++++++++++------------ package.json | 3 +- scripts/index.js | 3 + scripts/make-webpack-config.js | 7 --- scripts/utils/ensureWebpack.js | 29 ++++++++++ scripts/utils/getWebpackVersion.js | 6 +- 8 files changed, 123 insertions(+), 76 deletions(-) create mode 100644 scripts/utils/ensureWebpack.js diff --git a/bin/styleguidist.js b/bin/styleguidist.js index 49a4bd87c..c140cfff1 100755 --- a/bin/styleguidist.js +++ b/bin/styleguidist.js @@ -15,6 +15,27 @@ const StyleguidistError = require('../scripts/utils/error'); const argv = minimist(process.argv.slice(2)); const command = argv._[0]; +// Do not show nasty stack traces for Styleguidist errors +process.on('uncaughtException', err => { + if (err.code === 'EADDRINUSE') { + printErrorWithLink( + `You have another server running at port ${config.serverPort} somewhere, shut it down first`, + 'You can change the port using the `serverPort` option in your style guide config:', + consts.DOCS_CONFIG + ); + } else if (err instanceof StyleguidistError) { + console.error(chalk.bold.red(err.message)); + logger.debug(err.stack); + process.exit(1); + } else { + throw err; + } + process.exit(1); +}); + +// Make sure user has webpack installed +require('../scripts/utils/ensureWebpack'); + // Set environment before loading style guide config because user’s webpack config may use it const env = command === 'build' ? 'production' : 'development'; process.env.NODE_ENV = env; @@ -80,20 +101,6 @@ function commandBuild() { } function commandServer() { - process.on('uncaughtException', err => { - if (err.code === 'EADDRINUSE') { - printErrorWithLink( - `You have another server running at port ${config.serverPort} somewhere, shut it down first`, - 'You can change the port using the `serverPort` option in your style guide config:', - consts.DOCS_CONFIG - ); - } else { - console.error(chalk.bold.red(err.message)); - logger.debug(err.stack); - } - process.exit(1); - }); - const server = require('../scripts/server'); const compiler = server(config, err => { if (err) { diff --git a/docs/GettingStarted.md b/docs/GettingStarted.md index 81c4ae1cb..74af96fd4 100644 --- a/docs/GettingStarted.md +++ b/docs/GettingStarted.md @@ -2,25 +2,19 @@ ## 1. Install Styleguidist -1. Install Styleguidist and peer dependencies from npm: +Install Styleguidist from npm: - ```bash - npm install --save-dev react-styleguidist react react-dom webpack - ``` - -2. [Point Styleguidist to your React components](Components.md) - -3. [Tell Styleguidist how to load your code](Webpack.md) +```bash +npm install --save-dev react-styleguidist +``` -> **Note:** Webpack is a peer dependency but your project doesn’t have to use it. Styleguidist works with webpack 1 and webpack 2. +## 2. Configure your style guide -**If you’re using [Create React App](https://github.com/facebookincubator/create-react-app) you only need this:** +**If you’re using [Create React App](https://github.com/facebookincubator/create-react-app) you can skip this step.** -```bash -npm install --save-dev react-styleguidist webpack -``` +[Point Styleguidist to your React components](Components.md) and [tell how to load your code](Webpack.md). -## 2. Add npm scripts for convenience (optional) +## 3. Add npm scripts for convenience Add these scripts to your `package.json`: @@ -33,13 +27,13 @@ Add these scripts to your `package.json`: } ``` -## 3. Start your style guide +## 4. Start your style guide Run **`npm run styleguide`** to start style a guide dev server. Run **`npm run styleguide:build`** to build a static version. -## 4. Start documenting your components +## 5. Start documenting your components See how to [document your components](Documenting.md) diff --git a/package-lock.json b/package-lock.json index a96f6e452..65cbbe8db 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1059,9 +1059,9 @@ "integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg=" }, "base64-js": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.0.tgz", - "integrity": "sha1-o5mS1yNYSBGYK+XikLtqU9hnAPE=", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.2.1.tgz", + "integrity": "sha512-dwVUVIXsBZXwTuwnXI9RK8sBmgq09NDHzyR9SAph9eqk76gKK2JSQmZARC2zRC81JC2QTtxD0ARU5qTS25gIGw==", "dev": true }, "batch": { @@ -1113,9 +1113,9 @@ "integrity": "sha1-eRQg1/VR7qKJdFOop3ZT+WYG1nw=" }, "bn.js": { - "version": "4.11.6", - "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.6.tgz", - "integrity": "sha1-UzRK2xRhehP26N0s4okF0cC6MhU=", + "version": "4.11.7", + "resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.11.7.tgz", + "integrity": "sha512-LxFiV5mefv0ley0SzqkOPR1bC4EbpPx8LkOz5vMe/Yi15t5hzwgO/G+tc7wOtL4PZTYjwHu8JnEiSLumuSjSfA==", "dev": true }, "boolbase": { @@ -3838,9 +3838,9 @@ "dev": true }, "hash.js": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.0.3.tgz", - "integrity": "sha1-EzL/ABVsCg/92CNgE9B7d6BFFXM=", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/hash.js/-/hash.js-1.1.2.tgz", + "integrity": "sha512-SsNl8Ro2uz5xUTRYq8ysWzX8B7jCj7pLvX3opktaI6ZrTT2YElqjFVJXHJZe+5Aby20c9UC7elCjJDe1dhTaAw==", "dev": true }, "hawk": { @@ -4221,9 +4221,9 @@ "integrity": "sha1-XEWXcdKvmi45Ungf1U/LG8/kETw=" }, "is-in-browser": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.0.2.tgz", - "integrity": "sha1-9oi+qPHlqtwyROvIcNGIz7m2E88=" + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz", + "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=" }, "is-my-json-valid": { "version": "2.16.0", @@ -5507,18 +5507,24 @@ "dev": true }, "readable-stream": { - "version": "2.2.11", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz", - "integrity": "sha512-h+8+r3MKEhkiVrwdKL8aWs1oc1VvBu33ueshOvS26RsZQ3Amhx/oO3TKe4lApSV9ueY6as8EAh7mtuFjdlhg9Q==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.2.tgz", + "integrity": "sha1-WgTfBeT1f+Pw3Gj90R3FyXx+b00=", "dev": true, "dependencies": { "string_decoder": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.2.tgz", - "integrity": "sha1-sp4fThEl+pehA4K4pTNze3SR4Xk=", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", "dev": true } } + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", + "dev": true } } }, @@ -6486,9 +6492,9 @@ "dev": true, "dependencies": { "safe-buffer": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.0.tgz", - "integrity": "sha512-aSLEDudu6OoRr/2rU609gRmnYboRLxgDG1z9o2Q0os7236FwvcqIOO8r8U5JUEwivZOhDaKlFO4SbPTJYyBEyQ==", + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true } } @@ -7243,15 +7249,21 @@ "dev": true }, "readable-stream": { - "version": "2.2.11", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz", - "integrity": "sha512-h+8+r3MKEhkiVrwdKL8aWs1oc1VvBu33ueshOvS26RsZQ3Amhx/oO3TKe4lApSV9ueY6as8EAh7mtuFjdlhg9Q==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.2.tgz", + "integrity": "sha1-WgTfBeT1f+Pw3Gj90R3FyXx+b00=", + "dev": true + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true }, "string_decoder": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.2.tgz", - "integrity": "sha1-sp4fThEl+pehA4K4pTNze3SR4Xk=", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", "dev": true } } @@ -7300,9 +7312,9 @@ "dev": true }, "stream-http": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.1.tgz", - "integrity": "sha1-VGpRdBrVprB+njGwsQRBqRffUoo=", + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/stream-http/-/stream-http-2.7.2.tgz", + "integrity": "sha512-c0yTD2rbQzXtSsFSVhtpvY/vS6u066PcXOX9kBB3mSO76RiUQzL340uJkGBWnlBg4/HZzqiUXtaVA7wcRcJgEw==", "dev": true, "dependencies": { "isarray": { @@ -7312,15 +7324,21 @@ "dev": true }, "readable-stream": { - "version": "2.2.11", - "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.11.tgz", - "integrity": "sha512-h+8+r3MKEhkiVrwdKL8aWs1oc1VvBu33ueshOvS26RsZQ3Amhx/oO3TKe4lApSV9ueY6as8EAh7mtuFjdlhg9Q==", + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.2.tgz", + "integrity": "sha1-WgTfBeT1f+Pw3Gj90R3FyXx+b00=", + "dev": true + }, + "safe-buffer": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.1.tgz", + "integrity": "sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==", "dev": true }, "string_decoder": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.2.tgz", - "integrity": "sha1-sp4fThEl+pehA4K4pTNze3SR4Xk=", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.3.tgz", + "integrity": "sha512-4AH6Z5fzNNBcH+6XDMfA/BTt87skxqJlO0lAh3Dker5zThcAxG6mKz+iGu308UKoPPQ8Dcqx/4JhujzltRa+hQ==", "dev": true } } diff --git a/package.json b/package.json index a0029c845..b75535aae 100644 --- a/package.json +++ b/package.json @@ -83,8 +83,7 @@ }, "peerDependencies": { "react": ">=15", - "react-dom": ">=15", - "webpack": ">=1" + "react-dom": ">=15" }, "devDependencies": { "babel-cli": "^6.24.1", diff --git a/scripts/index.js b/scripts/index.js index 8946d58a1..33def0ee2 100644 --- a/scripts/index.js +++ b/scripts/index.js @@ -1,5 +1,8 @@ 'use strict'; +// Make sure user has webpack installed +require('./utils/ensureWebpack'); + const build = require('./build'); const server = require('./server'); const makeWebpackConfig = require('./make-webpack-config'); diff --git a/scripts/make-webpack-config.js b/scripts/make-webpack-config.js index eae07e3e1..4a94748f3 100644 --- a/scripts/make-webpack-config.js +++ b/scripts/make-webpack-config.js @@ -6,7 +6,6 @@ const HtmlWebpackPlugin = require('html-webpack-plugin'); const merge = require('webpack-merge'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const forEach = require('lodash/forEach'); -const logger = require('glogg')('rsg'); const hasJsonLoader = require('./utils/hasJsonLoader'); const getWebpackVersion = require('./utils/getWebpackVersion'); const mergeWebpackConfig = require('./utils/mergeWebpackConfig'); @@ -21,12 +20,6 @@ const htmlLoader = require.resolve('html-webpack-plugin/lib/loader'); module.exports = function(config, env) { process.env.NODE_ENV = process.env.NODE_ENV || env; - if (isWebpack1) { - logger.warn( - 'Support for webpack 1 will be removed in the next major version of React Styleguidist.' - ); - } - const isProd = env === 'production'; let webpackConfig = { diff --git a/scripts/utils/ensureWebpack.js b/scripts/utils/ensureWebpack.js new file mode 100644 index 000000000..8d71bb4f5 --- /dev/null +++ b/scripts/utils/ensureWebpack.js @@ -0,0 +1,29 @@ +'use strict'; + +/** + * Check webpack availability and version at run time instead of using peerDependencies to allow + * usage of build tools that contains webpack as their own dependency, like Create React App. + */ + +const logger = require('glogg')('rsg'); +const getWebpackVersion = require('./getWebpackVersion'); +const StyleguidistError = require('./error'); +const consts = require('../consts'); + +const MIN_WEBPACK_VERSION = 1; +const webpackVersion = getWebpackVersion(); + +if (!webpackVersion) { + throw new StyleguidistError( + 'Webpack is required for Styleguidist, please add it to your project:\n\n' + + ' npm install --save-dev webpack\n\n' + + 'See how to configure it for your style guide:\n' + + consts.DOCS_WEBPACK + ); +} else if (webpackVersion < MIN_WEBPACK_VERSION) { + throw new StyleguidistError( + `Webpack ${webpackVersion} is not supported by Styleguidist, the minimum version is ${MIN_WEBPACK_VERSION}` + ); +} else if (webpackVersion < 2) { + logger.warn('Support for webpack 1 will be removed in the next major version of Styleguidist'); +} diff --git a/scripts/utils/getWebpackVersion.js b/scripts/utils/getWebpackVersion.js index e50bcc28c..507e2b30d 100644 --- a/scripts/utils/getWebpackVersion.js +++ b/scripts/utils/getWebpackVersion.js @@ -8,5 +8,9 @@ const semverUtils = require('semver-utils'); * @return {number} */ module.exports = function getWebpackVersion() { - return Number(semverUtils.parseRange(require('webpack/package.json').version)[0].major); + try { + return Number(semverUtils.parseRange(require('webpack/package.json').version)[0].major); + } catch (err) { + return undefined; + } };