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; + } };