From 6a48c7cab0131cbf4c2b2c66d8b89a61e48988bc Mon Sep 17 00:00:00 2001 From: Jin Zheng Date: Thu, 25 May 2017 23:18:29 +0800 Subject: [PATCH 01/98] Print file sizes with correct build folder path. (#2361) * Print file sizes with correct build folder path. * Just use the print the basename. --- packages/react-dev-utils/FileSizeReporter.js | 4 ++-- packages/react-scripts/scripts/build.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index a0db0684f..8f822d201 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -18,7 +18,7 @@ var stripAnsi = require('strip-ansi'); var gzipSize = require('gzip-size').sync; // Prints a detailed summary of build files. -function printFileSizesAfterBuild(webpackStats, previousSizeMap) { +function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { var root = previousSizeMap.root; var sizes = previousSizeMap.sizes; var assets = webpackStats @@ -30,7 +30,7 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap) { var previousSize = sizes[removeFileNameHash(root, asset.name)]; var difference = getDifferenceLabel(size, previousSize); return { - folder: path.join('build', path.dirname(asset.name)), + folder: path.join(path.basename(buildFolder), path.dirname(asset.name)), name: path.basename(asset.name), size: size, sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''), diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 6548609ff..bc46c71d6 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -75,7 +75,7 @@ measureFileSizesBeforeBuild(paths.appBuild) } console.log('File sizes after gzip:\n'); - printFileSizesAfterBuild(stats, previousFileSizes); + printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild); console.log(); const appPackage = require(paths.appPackageJson); From a3b4de18471e8d00ef6959f00c5601cf2394cb3f Mon Sep 17 00:00:00 2001 From: Mirza Joldic Date: Fri, 26 May 2017 07:33:02 -0400 Subject: [PATCH 02/98] Update README.md for `now` deployments (#2372) Simplified steps for deploying app to `now` as a static site. No need to `serve` script in `package.json` file. As of May 15, 2017, all static deployments on `now` are free and unlimited. --- packages/react-scripts/template/README.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index dd7a48299..a04686c9c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1774,27 +1774,23 @@ When you build the project, Create React App will place the `public` folder cont ### Now -[now](https://zeit.co/now) offers a zero-configuration single-command deployment. +[now](https://zeit.co/now) offers a zero-configuration single-command deployment. You can use `now` to deploy your app for free. 1. Install the `now` command-line tool either via the recommended [desktop tool](https://zeit.co/download) or via node with `npm install -g now`. -2. Install `serve` by running `npm install --save serve`. +2. Build your app by running `npm run build`. -3. Add this line to `scripts` in `package.json`: +3. Move into the build directory by running `cd build`. - ``` - "now-start": "serve -s build/", - ``` - -4. Run `now` from your project directory. You will see a **now.sh** URL in your output like this: +4. Run `now --name your-project-name` from within the build directory. You will see a **now.sh** URL in your output like this: ``` - > Ready! https://your-project-dirname-tpspyhtdtk.now.sh (copied to clipboard) + > Ready! https://your-project-name-tpspyhtdtk.now.sh (copied to clipboard) ``` Paste that URL into your browser when the build is complete, and you will see your deployed app. -Details are available in [this article.](https://zeit.co/blog/now-static) +Details are available in [this article.](https://zeit.co/blog/unlimited-static) ### S3 and CloudFront From bfeb95040452e53bd4da1d6d719c39704a18cc6a Mon Sep 17 00:00:00 2001 From: Zac Kwan Date: Sat, 27 May 2017 19:33:13 +0800 Subject: [PATCH 03/98] Removed the overriding of reduce_vars to false since webpack v2.6.0 included the fixed for Uglify bug (#2351) --- packages/react-scripts/config/webpack.config.prod.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index b710f480e..d50520d18 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -266,10 +266,6 @@ module.exports = { new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, - // This feature has been reported as buggy a few times, such as: - // https://github.com/mishoo/UglifyJS2/issues/1964 - // We'll wait with enabling it by default until it is more solid. - reduce_vars: false, }, output: { comments: false, From 9114aea7acc2c97f3bdb575bc5216eb0935e5b94 Mon Sep 17 00:00:00 2001 From: David Ascher Date: Sat, 27 May 2017 04:36:42 -0700 Subject: [PATCH 04/98] Disable comparisons feature in uglify compression in production (#2379) * Disable a micro-option in uglify that appears to be buggy See https://github.com/facebookincubator/create-react-app/issues/2376 * wrong plugin * Add a comment --- packages/react-scripts/config/webpack.config.prod.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d50520d18..7e7e2a01d 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -266,6 +266,11 @@ module.exports = { new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false, + // Disabled because of an issue with Uglify breaking seemingly valid code: + // https://github.com/facebookincubator/create-react-app/issues/2376 + // Pending further investigation: + // https://github.com/mishoo/UglifyJS2/issues/2011 + comparisons: false, }, output: { comments: false, From 993fd306c5beb33fad57ea2d812e20f44cbea75d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 12:37:07 +0100 Subject: [PATCH 05/98] Consistently set environment variables (#2382) --- packages/react-scripts/scripts/build.js | 1 + packages/react-scripts/scripts/start.js | 6 ++++-- packages/react-scripts/scripts/test.js | 2 ++ 3 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index bc46c71d6..a83d287de 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -11,6 +11,7 @@ 'use strict'; // Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'production'; process.env.NODE_ENV = 'production'; // Makes the script crash on unhandled rejections instead of silently diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index a451228df..b86943b4d 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -10,6 +10,10 @@ // @remove-on-eject-end 'use strict'; +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'development'; +process.env.NODE_ENV = 'development'; + // Makes the script crash on unhandled rejections instead of silently // ignoring them. In the future, promise rejections that are not handled will // terminate the Node.js process with a non-zero exit code. @@ -17,8 +21,6 @@ process.on('unhandledRejection', err => { throw err; }); -process.env.NODE_ENV = 'development'; - // Ensure environment variables are read. require('../config/env'); diff --git a/packages/react-scripts/scripts/test.js b/packages/react-scripts/scripts/test.js index ef333e6c0..e9adb48f0 100644 --- a/packages/react-scripts/scripts/test.js +++ b/packages/react-scripts/scripts/test.js @@ -10,6 +10,8 @@ // @remove-on-eject-end 'use strict'; +// Do this as the first thing so that any code reading it knows the right env. +process.env.BABEL_ENV = 'test'; process.env.NODE_ENV = 'test'; process.env.PUBLIC_URL = ''; From a9e99218b1e4be82ab44f5fb6fb08f9995c25ee3 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 12:38:40 +0100 Subject: [PATCH 06/98] Update webpack to 2.6.1 (#2383) --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index de6a54484..6f586da0a 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -50,7 +50,7 @@ "source-map-loader": "^0.2.1", "sw-precache-webpack-plugin": "0.9.1", "url-loader": "0.5.8", - "webpack": "2.6.0", + "webpack": "2.6.1", "webpack-dev-server": "2.4.5", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "2.0.3" From 9b4c53e8ea63ff2d2a69127cb1a14ab721bdd097 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 12:41:44 +0100 Subject: [PATCH 07/98] Add changelog for 1.0.7 (#2384) --- CHANGELOG.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2cbeed3a4..9049c88fe 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,53 @@ +## 1.0.7 (May 27, 2017) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#2382](https://github.com/facebookincubator/create-react-app/pull/2382) Consistently set environment variables. ([@gaearon](https://github.com/gaearon)) + * [#2379](https://github.com/facebookincubator/create-react-app/pull/2379) Temporarily disable `comparisons` feature in uglify compression. ([@davidascher](https://github.com/davidascher)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#2383](https://github.com/facebookincubator/create-react-app/pull/2383) Update webpack to 2.6.1. ([@gaearon](https://github.com/gaearon)) + * [#2349](https://github.com/facebookincubator/create-react-app/pull/2349) Update webpack to v2.6.0. ([@ingro](https://github.com/ingro)) + * [#2351](https://github.com/facebookincubator/create-react-app/pull/2351) Removed the overriding of `reduce_vars` since webpack v2.6.0 included fix of Uglify. ([@Zaccc123](https://github.com/Zaccc123)) + +* `react-dev-utils`, `react-scripts` + + * [#2361](https://github.com/facebookincubator/create-react-app/pull/2361) Print file sizes with correct build folder path. ([@fezhengjin](https://github.com/fezhengjin)) + +#### :memo: Documentation + +* `react-scripts` + + * [#2372](https://github.com/facebookincubator/create-react-app/pull/2372) Update README.md for `now` deployments. ([@purplecones](https://github.com/purplecones)) + * [#2350](https://github.com/facebookincubator/create-react-app/pull/2350) Fix broken links. ([@gaearon](https://github.com/gaearon)) + +#### Committers: 6 +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- David Ascher ([davidascher](https://github.com/davidascher)) +- Emanuele Ingrosso ([ingro](https://github.com/ingro)) +- Jin Zheng ([fezhengjin](https://github.com/fezhengjin)) +- Mirza Joldic ([purplecones](https://github.com/purplecones)) +- Zac Kwan ([Zaccc123](https://github.com/Zaccc123)) + +### Migrating from 1.0.6 to 1.0.7 + +Inside any created project that has not been ejected, run: + +``` +npm install --save-dev --save-exact react-scripts@1.0.7 +``` + +or + +``` +yarn add --dev --exact react-scripts@1.0.7 +``` + ## 1.0.6 (May 24, 2017) #### :bug: Bug Fix From bef6ec65d262e5a4451cc0e6b609250de83dba01 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 12:42:54 +0100 Subject: [PATCH 08/98] Publish - react-dev-utils@3.0.0 - react-error-overlay@1.0.7 - react-scripts@1.0.7 --- package.json | 7 ++++--- packages/react-dev-utils/package.json | 2 +- packages/react-error-overlay/package.json | 4 ++-- packages/react-scripts/package.json | 4 ++-- 4 files changed, 9 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 39a0d002d..ab4de27c6 100644 --- a/package.json +++ b/package.json @@ -5,7 +5,8 @@ "changelog": "lerna-changelog", "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e-simple.sh", - "postinstall": "lerna bootstrap && cd packages/react-error-overlay/ && npm run build:prod", + "e2e:docker": "tasks/local-test.sh", + "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", @@ -19,10 +20,10 @@ "@types/react-dom": "^15.5.0", "eslint": "3.19.0", "husky": "^0.13.2", - "lerna": "2.0.0-beta.38", + "lerna": "2.0.0-rc.5", "lerna-changelog": "^0.2.3", "lint-staged": "^3.3.1", - "prettier": "^0.21.0" + "prettier": "^1.5.2" }, "lint-staged": { "*.js": [ diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index f62d87f8b..46f3a9203 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "2.0.1", + "version": "3.0.0", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 70a01e3f6..88c909e11 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "1.0.6", + "version": "1.0.7", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { @@ -34,7 +34,7 @@ "anser": "1.2.5", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", - "react-dev-utils": "^2.0.1", + "react-dev-utils": "^3.0.0", "settle-promise": "1.0.0", "source-map": "0.5.6" }, diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 6f586da0a..7897046e1 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -38,8 +38,8 @@ "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.5", "promise": "7.1.1", - "react-dev-utils": "^2.0.1", - "react-error-overlay": "^1.0.6", + "react-dev-utils": "^3.0.0", + "react-error-overlay": "^1.0.7", "style-loader": "0.17.0", "ts-jest": "^20.0.7", "ts-loader": "^2.2.1", From 78886fd98fbc6fa84e3bee8600cea024b1f39a52 Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin Date: Sat, 27 May 2017 21:32:12 +0200 Subject: [PATCH 09/98] Catch "No tests found" during CI (#2387) --- tasks/e2e-kitchensink.sh | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 2295615e8..9d60d6e29 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -158,6 +158,16 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_ENV=test \ npm test -- --no-cache --testPathPattern="/src/" +# Catch when no tests are detected +testsList=$(REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ + CI=true \ + NODE_PATH=src \ + npm test -- --no-cache --testPathPattern="/src/" --listTests) + +if [[ ${testsList} =~ "[]" ]]; then + exit 1 +fi + # Test "development" environment tmp_server_log=`mktemp` PORT=3001 \ From c16a178a00fc48059aab1831c1fa8eaf8e8a8a65 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 21:26:53 +0100 Subject: [PATCH 10/98] Suggest just "yarn build" (#2385) --- packages/react-dev-utils/WebpackDevServerUtils.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 62eafa40a..ca864885d 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -107,7 +107,7 @@ function printInstructions(appName, urls, useYarn) { console.log('Note that the development build is not optimized.'); console.log( `To create a production build, use ` + - `${chalk.cyan(`${useYarn ? 'yarn' : 'npm'} run build`)}.` + `${chalk.cyan(`${useYarn ? 'yarn' : 'npm run'} build`)}.` ); console.log(); } From 4a183861fe83badaa8bb4f24d4da7c86654011f1 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 21:38:00 +0100 Subject: [PATCH 11/98] Fix wrong path expansion in end-to-end test (#2388) * Update e2e-kitchensink.sh * Try again (differently) --- tasks/e2e-kitchensink.sh | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 9d60d6e29..4506066cc 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -156,13 +156,13 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - npm test -- --no-cache --testPathPattern="/src/" + npm test -- --no-cache --testPathPattern=src # Catch when no tests are detected testsList=$(REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ - npm test -- --no-cache --testPathPattern="/src/" --listTests) + npm test -- --no-cache --testPathPattern=src --listTests) if [[ ${testsList} =~ "[]" ]]; then exit 1 @@ -230,7 +230,7 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ CI=true \ NODE_PATH=src \ NODE_ENV=test \ - npm test -- --no-cache --testPathPattern='/src/' + npm test -- --no-cache --testPathPattern=src # Test "development" environment tmp_server_log=`mktemp` From 55c2cc690c05178418e48ae005d930530c9280d6 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Sat, 27 May 2017 23:26:03 +0100 Subject: [PATCH 12/98] Revert "Catch "No tests found" during CI" (#2390) * Revert "Fix wrong path expansion in end-to-end test (#2388)" This reverts commit 2aafaad72d1737eae98c4de9cbe275c1988ec4ae. * Revert "Suggest just "yarn build" (#2385)" This reverts commit 70bf12505c4419c171aca3e07d7a388bf1dc9cbc. * Revert "Catch "No tests found" during CI (#2387)" This reverts commit 5317b3f910d4796dafbf87aa571eebc45cd1b277. --- tasks/e2e-kitchensink.sh | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 4506066cc..9e689ca22 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -158,16 +158,6 @@ REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ NODE_ENV=test \ npm test -- --no-cache --testPathPattern=src -# Catch when no tests are detected -testsList=$(REACT_APP_SHELL_ENV_MESSAGE=fromtheshell \ - CI=true \ - NODE_PATH=src \ - npm test -- --no-cache --testPathPattern=src --listTests) - -if [[ ${testsList} =~ "[]" ]]; then - exit 1 -fi - # Test "development" environment tmp_server_log=`mktemp` PORT=3001 \ From e447c79b0fdf3e33e002c005d64bb25ede81ee77 Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Mon, 29 May 2017 22:09:40 +1200 Subject: [PATCH 13/98] Fix kill command in e2e-kitchensink.sh cleanup (#2397) --- tasks/e2e-kitchensink.sh | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 9e689ca22..1a19f4ae6 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -22,7 +22,7 @@ temp_module_path=`mktemp -d 2>/dev/null || mktemp -d -t 'temp_module_path'` function cleanup { echo 'Cleaning up.' - ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -s 9 + ps -ef | grep 'react-scripts' | grep -v grep | awk '{print $2}' | xargs kill -9 cd "$root_path" # TODO: fix "Device or resource busy" and remove ``|| $CI` rm -rf "$temp_cli_path" "$temp_app_path" "$temp_module_path" || $CI From 57095b4902a29cf94f75750b966ac350c9424f6a Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Tue, 30 May 2017 06:00:43 +1200 Subject: [PATCH 14/98] Added cache clear to e2e scripts (#2400) * Added cache clear to e2e scripts * Install latest yarn on AppVeyor to avoid windows crashing bug in yarn * Alternative fix for yarn crashing e2e tests on windows machines --- tasks/e2e-installs.sh | 24 ++++++++++++++++++++++++ tasks/e2e-kitchensink.sh | 24 ++++++++++++++++++++++++ tasks/e2e-simple.sh | 24 ++++++++++++++++++++++++ 3 files changed, 72 insertions(+) diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index b27b1239e..8f4789ff0 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -83,6 +83,30 @@ set -x cd .. root_path=$PWD +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean +fi + +if hash npm 2>/dev/null +then + npm cache clean +fi + # Prevent lerna bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "lerna bootstrap" package.json > temp && mv temp package.json diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 1a19f4ae6..fcd687e4b 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -66,6 +66,30 @@ set -x cd .. root_path=$PWD +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean +fi + +if hash npm 2>/dev/null +then + npm cache clean +fi + # Prevent lerna bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "lerna bootstrap" package.json > temp && mv temp package.json diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 72a3698a3..d110297b2 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -65,6 +65,30 @@ set -x cd .. root_path=$PWD +# Clear cache to avoid issues with incorrect packages being used +if hash yarnpkg 2>/dev/null +then + # AppVeyor uses an old version of yarn. + # Once updated to 0.24.3 or above, the workaround can be removed + # and replaced with `yarnpkg cache clean` + # Issues: + # https://github.com/yarnpkg/yarn/issues/2591 + # https://github.com/appveyor/ci/issues/1576 + # https://github.com/facebookincubator/create-react-app/pull/2400 + # When removing workaround, you may run into + # https://github.com/facebookincubator/create-react-app/issues/2030 + case "$(uname -s)" in + *CYGWIN*|MSYS*|MINGW*) yarn=yarn.cmd;; + *) yarn=yarnpkg;; + esac + $yarn cache clean +fi + +if hash npm 2>/dev/null +then + npm cache clean +fi + # Prevent lerna bootstrap, we only want top-level dependencies cp package.json package.json.bak grep -v "lerna bootstrap" package.json > temp && mv temp package.json From 4c80b02d687d642e5125f58d9ff56983fe753dde Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Miserey?= Date: Mon, 29 May 2017 20:49:57 +0200 Subject: [PATCH 15/98] Fix detection of parent directory in ModuleScopePlugin (#2405) * Fix detection of parent directory * Correct parent directory detection fix Add windows specific path and extend to issuer path --- packages/react-dev-utils/ModuleScopePlugin.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index fd70a2f40..adc9bdcba 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -37,7 +37,10 @@ class ModuleScopePlugin { // Maybe an indexOf === 0 would be better? const relative = path.relative(appSrc, request.context.issuer); // If it's not in src/ or a subdirectory, not our request! - if (relative[0] === '.') { + if ( + relative.startsWith('../') || + relative.startsWith('..\\') + ) { return callback(); } // Find path from src to the requested file @@ -49,7 +52,10 @@ class ModuleScopePlugin { ) ); // Error if in a parent directory of src/ - if (requestRelative[0] === '.') { + if ( + requestRelative.startsWith('../') || + requestRelative.startsWith('..\\') + ) { callback( new Error( `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` + From 3d6ead52151a804512757b18faccfce6582bc534 Mon Sep 17 00:00:00 2001 From: Lufty Wiranda Date: Tue, 30 May 2017 01:50:32 +0700 Subject: [PATCH 16/98] docs: update `jest-enzyme` section (#2392) since CRA now use the latest version of Jest under the hood, `jest-enzyme` v3.2.0 is now working perfectly fine --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a04686c9c..ca2879b9c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1171,10 +1171,10 @@ Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzym expect(wrapper).toContainReact(welcome) ``` -To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. **Note that currently only version 2.x is compatible with Create React App.** +To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. ```sh -npm install --save-dev jest-enzyme@2.x +npm install --save-dev jest-enzyme ``` ```js From 1cb5fbb15212e04c596d87c32e4b278ca663ab3f Mon Sep 17 00:00:00 2001 From: Marius Wirtherle Date: Tue, 30 May 2017 15:00:16 +0200 Subject: [PATCH 17/98] Add WebStorm >2017 launchEditor Support (#2414) --- packages/react-dev-utils/launchEditor.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index 8bfa3f3dc..a1893d13b 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -72,6 +72,12 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { ['-g', fileName + ':' + lineNumber], workspace ); + case 'webstorm': + case 'webstorm64': + return addWorkspaceToArgumentsIfExists( + ['--line', lineNumber, fileName], + workspace + ); } // For all others, drop the lineNumber until we have From a537444d5765eec24763926378c620b2e367d5b8 Mon Sep 17 00:00:00 2001 From: Rustem Kakimov Date: Wed, 31 May 2017 21:40:46 +0800 Subject: [PATCH 18/98] Fix docs typo (#2420) "ensuring that you web app" -> "ensuring that your web app" --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index ca2879b9c..080329cff 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1381,7 +1381,7 @@ and it will take care of generating a service worker file that will automaticall precache all of your local assets and keep them up to date as you deploy updates. The service worker will use a [cache-first strategy](https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/#cache-falling-back-to-network) for handling all requests for local assets, including the initial HTML, ensuring -that you web app is reliably fast, even on a slow or unreliable network. +that your web app is reliably fast, even on a slow or unreliable network. If you would prefer not to enable service workers prior to your initial production deployment, then remove the call to `serviceWorkerRegistration.register()` From c7f79f756e87a6999f517dcab2240af483967e3d Mon Sep 17 00:00:00 2001 From: Ryan Sullivan Date: Fri, 2 Jun 2017 06:05:25 -0700 Subject: [PATCH 19/98] Update Travis CI Node versions in User Guide (#2454) Removed Node v4 (CRA only supports Node >= 6) --- packages/react-scripts/template/README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 080329cff..7db9aef88 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1244,7 +1244,6 @@ Popular CI servers already set the environment variable `CI` by default but you ``` language: node_js node_js: - - 4 - 6 cache: directories: From 864ef28ca58a4c6fc4f79947cf96036bab0b6076 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Sun, 4 Jun 2017 14:14:16 +0200 Subject: [PATCH 20/98] re-add storybook && update the documentation and links (#2331) * re-add storybook && update the documentation and links * Change to new documentation domain --- packages/react-scripts/template/README.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 7db9aef88..955026ac0 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1321,30 +1321,30 @@ If you use [Visual Studio Code](https://code.visualstudio.com), there is a [Jest ![VS Code Jest Preview](https://cloud.githubusercontent.com/assets/49038/20795349/a032308a-b7c8-11e6-9b34-7eeac781003f.png) - +* [GitHub Repo](https://github.com/storybooks/storybook) +* [Documentation](https://storybook.js.org/docs/react-storybook/basics/introduction/) +* [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot ## Making a Progressive Web App From ad5b884cfbfb2e3217c55742396925ef9bca5e9b Mon Sep 17 00:00:00 2001 From: bryankang Date: Mon, 5 Jun 2017 18:36:13 -0500 Subject: [PATCH 21/98] Prioritize index.css over the implicit App.css (#2470) --- packages/react-scripts/template/src/index.js | 8 ++++++++ 1 file changed, 8 insertions(+) create mode 100644 packages/react-scripts/template/src/index.js diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js new file mode 100644 index 000000000..fae3e3500 --- /dev/null +++ b/packages/react-scripts/template/src/index.js @@ -0,0 +1,8 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; +import './index.css'; +import App from './App'; +import registerServiceWorker from './registerServiceWorker'; + +ReactDOM.render(, document.getElementById('root')); +registerServiceWorker(); From e9f1371023f2f48fb573083c45003c90104292c4 Mon Sep 17 00:00:00 2001 From: Zac Kwan Date: Tue, 6 Jun 2017 21:06:39 +0800 Subject: [PATCH 22/98] Added NamedModulesPlugin in webpack.config.dev.js (#2458) * Added NamedModulesPlugin in webpack.config.dev.js * Update webpack.config.dev.js --- packages/react-scripts/config/webpack.config.dev.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2eed1e04e..18ae8d9a1 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -237,6 +237,8 @@ module.exports = { inject: true, template: paths.appHtml, }), + // Add module names to factory functions so they appear in browser profiler. + new webpack.NamedModulesPlugin(), // Makes some environment variables available to the JS code, for example: // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`. new webpack.DefinePlugin(env.stringified), From 349caa452d71126b1d58eae006dc2db2de32c470 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Tue, 6 Jun 2017 14:02:27 -0400 Subject: [PATCH 23/98] Unscope detect-port (#2483) Resolves #2481 --- packages/react-dev-utils/WebpackDevServerUtils.js | 2 +- packages/react-dev-utils/package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index ca864885d..ab1991d8c 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -13,7 +13,7 @@ const fs = require('fs'); const path = require('path'); const url = require('url'); const chalk = require('chalk'); -const detect = require('@timer/detect-port'); +const detect = require('detect-port-alt'); const inquirer = require('inquirer'); const clearConsole = require('./clearConsole'); const formatWebpackMessages = require('./formatWebpackMessages'); diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 46f3a9203..9a7a61119 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -33,12 +33,12 @@ "webpackHotDevClient.js" ], "dependencies": { - "@timer/detect-port": "1.1.3", "address": "1.0.1", "anser": "1.3.0", "babel-code-frame": "6.22.0", "chalk": "1.1.3", "cross-spawn": "4.0.2", + "detect-port-alt": "1.1.3", "escape-string-regexp": "1.0.5", "filesize": "3.3.0", "gzip-size": "3.0.0", From 8a59fe6927a4b138cde35f8bbd3dcbf03e27cd36 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Stanislas=20Ormi=C3=A8res?= Date: Wed, 7 Jun 2017 16:43:22 +0200 Subject: [PATCH 24/98] Update webpack links to point to webpack 2 (#2492) * Update README.md to make links to webpack point to webpack.js.org instead insteade of webpack 1 webpack.githup.io --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index de9bfe65f..37805d28c 100644 --- a/README.md +++ b/README.md @@ -37,9 +37,7 @@ When you run `npm run build` the terminal will output the error, including the h * Fix `typescript` version to 2.3.x until 2.4 @types are fixed ### 2.3.1 -* Fix issue with new @types/react -### 2.3.0 * All tsc to parse config (for `extend`) - Thanks to @DorianGrey * Fix various jest issues - thanks to @zinserjan * Fix code coverage - thanks to @zinserjan From 2b79b46e167432e6d28f45cba6aefa3dc7382255 Mon Sep 17 00:00:00 2001 From: Glenn Reyes Date: Wed, 7 Jun 2017 16:44:46 +0200 Subject: [PATCH 25/98] chore(templates): Move GitHub templates to hidden .github folder (#2489) --- ISSUE_TEMPLATE.md => .github/ISSUE_TEMPLATE.md | 0 PULL_REQUEST_TEMPLATE.md => .github/PULL_REQUEST_TEMPLATE.md | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename ISSUE_TEMPLATE.md => .github/ISSUE_TEMPLATE.md (100%) rename PULL_REQUEST_TEMPLATE.md => .github/PULL_REQUEST_TEMPLATE.md (100%) diff --git a/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md similarity index 100% rename from ISSUE_TEMPLATE.md rename to .github/ISSUE_TEMPLATE.md diff --git a/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md similarity index 100% rename from PULL_REQUEST_TEMPLATE.md rename to .github/PULL_REQUEST_TEMPLATE.md From 89b42aaa58cb841bd007ac7506ce7d4be8c7c426 Mon Sep 17 00:00:00 2001 From: Alexandre Nicastro Date: Thu, 8 Jun 2017 03:41:29 -0300 Subject: [PATCH 26/98] Fix minor docs typo (#2500) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 955026ac0..a794c615c 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1082,7 +1082,7 @@ The watcher includes an interactive command-line interface with the ability to r ### Version Control Integration -By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests runs fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. +By default, when you run `npm test`, Jest will only run the tests related to files changed since the last commit. This is an optimization designed to make your tests run fast regardless of how many tests you have. However it assumes that you don’t often commit the code that doesn’t pass the tests. Jest will always explicitly mention that it only ran tests related to the files changed since the last commit. You can also press `a` in the watch mode to force Jest to run all tests. From 19c7bf7368437d50f553d8a3716a2db89fee6113 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Mon, 12 Jun 2017 15:15:26 +1200 Subject: [PATCH 27/98] Fix link to Storybook docs (#2521) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index a794c615c..6439e9dbd 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1359,7 +1359,7 @@ Learn more about React Storybook: * Screencast: [Getting Started with React Storybook](https://egghead.io/lessons/react-getting-started-with-react-storybook) * [GitHub Repo](https://github.com/storybooks/storybook) -* [Documentation](https://storybook.js.org/docs/react-storybook/basics/introduction/) +* [Documentation](https://storybook.js.org/basics/introduction/) * [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot ## Making a Progressive Web App From 733a1776db4a5dbbfc825f5b5182d6eb325ac477 Mon Sep 17 00:00:00 2001 From: Khang Lu Date: Tue, 13 Jun 2017 03:19:12 +1000 Subject: [PATCH 28/98] Simplify flow init docs (#2522) - Call `npm run flow --init` won't create a .flowconfig file, it should be `npm run flow init` --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 6439e9dbd..de8e5b44a 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -690,7 +690,7 @@ To add Flow to a Create React App project, follow these steps: 1. Run `npm install --save-dev flow-bin` (or `yarn add --dev flow-bin`). 2. Add `"flow": "flow"` to the `scripts` section of your `package.json`. -3. Run `npm run flow -- init` (or `yarn flow -- init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory. +3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory. 4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`). Now you can run `npm run flow` (or `yarn flow`) to check the files for type errors. From 64b69b416210c9b9874a02c87a91c2600a7cc003 Mon Sep 17 00:00:00 2001 From: Joseph Frazier <1212jtraceur@gmail.com> Date: Sun, 18 Jun 2017 12:48:40 -0400 Subject: [PATCH 29/98] Upgrade fsevents to 1.1.2 (#2550) This eliminates a `yarn` warning on OSX machines running Node.js 8. See here for details: https://github.com/strongloop/fsevents/issues/170 You can see an example of the warning in the second screenshot in https://github.com/facebookincubator/create-react-app/issues/2422#issuecomment-305218252 --- packages/react-scripts/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7897046e1..ec2ea7272 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -60,6 +60,6 @@ "react-dom": "^15.5.4" }, "optionalDependencies": { - "fsevents": "1.0.17" + "fsevents": "1.1.2" } } From e1f7da4c25bc0782d2cb9eb6072cb0350265b3d1 Mon Sep 17 00:00:00 2001 From: Roman Date: Sun, 18 Jun 2017 19:50:19 +0300 Subject: [PATCH 30/98] Fix broken link to React Router docs (#2538) * Update README.md Fix broken link to React Router documentation * Update README.md --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index de8e5b44a..1f44ce0af 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1696,7 +1696,7 @@ You can configure a custom domain with GitHub Pages by adding a `CNAME` file to GitHub Pages doesn’t support routers that use the HTML5 `pushState` history API under the hood (for example, React Router using `browserHistory`). This is because when there is a fresh page load for a url like `http://user.github.io/todomvc/todos/42`, where `/todos/42` is a frontend route, the GitHub Pages server returns 404 because it knows nothing of `/todos/42`. If you want to add a router to a project hosted on GitHub Pages, here are a couple of solutions: -* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md#histories) about different history implementations in React Router. +* You could switch from using HTML5 history API to routing with hashes. If you use React Router, you can switch to `hashHistory` for this effect, but the URL will be longer and more verbose (for example, `http://user.github.io/todomvc/#/todos/42?_k=yknaj`). [Read more](https://reacttraining.com/react-router/web/api/Router) about different history implementations in React Router. * Alternatively, you can use a trick to teach GitHub Pages to handle 404 by redirecting to your `index.html` page with a special redirect parameter. You would need to add a `404.html` file with the redirection code to the `build` folder before deploying your project, and you’ll need to add code handling the redirect parameter to `index.html`. You can find a detailed explanation of this technique [in this guide](https://github.com/rafrex/spa-github-pages). ### Heroku From 4aa42e29216cbbc2aa2ed3bfc2212af2f2c40d8e Mon Sep 17 00:00:00 2001 From: "Andi N. Dirgantara" Date: Sun, 18 Jun 2017 23:52:34 +0700 Subject: [PATCH 31/98] Fix wrong comment on Proxy guide (#2447) It should be `baz` instead of `bar` on last example. --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1f44ce0af..c4591c183 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -972,7 +972,7 @@ You may also narrow down matches using `*` and/or `**`, to match the path exactl "target": "", // ... }, - // Matches /bar/abc.html and /bar/sub/def.html + // Matches /baz/abc.html and /baz/sub/def.html "/baz/**/*.html": { "target": "" // ... From d68ed30f2cf9e441c4324eee03b6ea041c9b72e7 Mon Sep 17 00:00:00 2001 From: Levin Rickert Date: Mon, 19 Jun 2017 18:00:11 +0200 Subject: [PATCH 32/98] Show warning when trying to run on port below 1024 without admin permissions under Linux (#2518) --- packages/react-dev-utils/WebpackDevServerUtils.js | 12 ++++++++---- packages/react-dev-utils/package.json | 1 + 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index ab1991d8c..1e1113c18 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -14,6 +14,7 @@ const path = require('path'); const url = require('url'); const chalk = require('chalk'); const detect = require('detect-port-alt'); +const isRoot = require('is-root'); const inquirer = require('inquirer'); const clearConsole = require('./clearConsole'); const formatWebpackMessages = require('./formatWebpackMessages'); @@ -378,6 +379,11 @@ function choosePort(host, defaultPort) { if (port === defaultPort) { return resolve(port); } + const message = process.platform !== 'win32' && + defaultPort < 1024 && + !isRoot() + ? `Admin permissions are required to run a server on a port below 1024.` + : `Something is already running on port ${defaultPort}.`; if (isInteractive) { clearConsole(); const existingProcess = getProcessForPort(defaultPort); @@ -385,7 +391,7 @@ function choosePort(host, defaultPort) { type: 'confirm', name: 'shouldChangePort', message: chalk.yellow( - `Something is already running on port ${defaultPort}.` + + message + `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` ) + '\n\nWould you like to run the app on another port instead?', default: true, @@ -398,9 +404,7 @@ function choosePort(host, defaultPort) { } }); } else { - console.log( - chalk.red(`Something is already running on port ${defaultPort}.`) - ); + console.log(chalk.red(message)); resolve(null); } }), diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 9a7a61119..6fa6c4117 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -44,6 +44,7 @@ "gzip-size": "3.0.0", "html-entities": "1.2.1", "inquirer": "3.0.6", + "is-root": "1.0.0", "opn": "5.0.0", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", From 1f4db46b9eaeb0d93157591d0eff4797cb019a36 Mon Sep 17 00:00:00 2001 From: varnav Date: Mon, 19 Jun 2017 19:36:28 +0300 Subject: [PATCH 33/98] Check if CI variable is set to `'false'` (#2501) * Fix incorrect check if CI variable is set to true Originally build would fail on warnings with any value of CI environment variable. Now it will correctly check if it's true. Discussed here: https://github.com/facebookincubator/create-react-app/issues/2453 * Check for "not false" instead of "not true" After discussion we decided that this will be closer to current functionality and not break anything. --- packages/react-scripts/scripts/build.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index a83d287de..aa95774f5 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -112,7 +112,7 @@ function build(previousFileSizes) { if (messages.errors.length) { return reject(new Error(messages.errors.join('\n\n'))); } - if (process.env.CI && messages.warnings.length) { + if (process.env.CI && process.env.CI.toLowerCase() !== 'false' && messages.warnings.length) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + From 96709b727fccc7b94ef2b31a02461edadf07f961 Mon Sep 17 00:00:00 2001 From: Joe Haddad Date: Mon, 19 Jun 2017 13:27:02 -0400 Subject: [PATCH 34/98] Fix a potential issue (#2569) --- packages/react-scripts/scripts/build.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index aa95774f5..2e4bc21ee 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -112,7 +112,12 @@ function build(previousFileSizes) { if (messages.errors.length) { return reject(new Error(messages.errors.join('\n\n'))); } - if (process.env.CI && process.env.CI.toLowerCase() !== 'false' && messages.warnings.length) { + if ( + process.env.CI && + (typeof process.env.CI !== 'string' || + process.env.CI.toLowerCase() !== 'false') && + messages.warnings.length + ) { console.log( chalk.yellow( '\nTreating warnings as errors because process.env.CI = true.\n' + From d76b7bd3605e431dcb8a33da92407c2c67b18ab3 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Fri, 23 Jun 2017 17:26:42 +0100 Subject: [PATCH 35/98] Warn about npm 5 in issue template --- .github/ISSUE_TEMPLATE.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index a1e7638b4..f27a83448 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,21 +1,21 @@ If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely. -### Can you reproduce the problem with latest npm? +### Can you reproduce the problem with npm 4.x? Many errors, especially related to "missing modules", are due to npm bugs. -If you're using Windows, [follow these instructions to update npm](https://github.com/npm/npm/wiki/Troubleshooting#upgrading-on-windows). - -If you're using OS X or Linux, run this to update npm: +Try to update npm to 4.x first: ``` -npm install -g npm@latest +npm install -g npm@4 cd your_project_directory rm -rf node_modules npm install ``` +**This is especially important if `npm -v` gives you 5 because npm 5 is [known to have many issues](https://github.com/npm/npm/issues/16991).** + Then try to reproduce the issue again. Can you still reproduce it? From b2c89d3eeba1e705644a8a3140021b4eb6461153 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 26 Jun 2017 15:02:42 +0100 Subject: [PATCH 36/98] Update issue & PR templates (#2618) * New issue template * Update PULL_REQUEST_TEMPLATE.md * Update ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 140 +++++++++++++++++++++++++------ .github/PULL_REQUEST_TEMPLATE.md | 3 +- 2 files changed, 114 insertions(+), 29 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index f27a83448..e0b9c2b76 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,59 +1,145 @@ -If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely. + -### Can you reproduce the problem with npm 4.x? +### Is this a bug report? + +(write your answer here) + + -Try to update npm to 4.x first: +### Can you reproduce the problem with npm 4.x? + + -### Description +(Write your answer here.) -What are you reporting? +### Have you read the Troubleshooting section and searched the User Guide? -### Expected behavior + -Tell us what actually happens. +(Write your answer here.) ### Environment -Run these commands in the project folder and fill in their results: + 1. `npm ls react-scripts-ts` (if you haven’t ejected): 2. `node -v`: 3. `npm -v`: +4. `yarn --version` (if you use Yarn): +5. `npm ls react-scripts` (if you haven’t ejected): Then, specify: 1. Operating system: -2. Browser and version: +2. Browser and version (if relevant): + +### Steps to Reproduce + + + +(Write your steps here:) + +1. +2. +3. + +### Expected Behavior + + + +(Write what you thought would happen.) + +### Actual Behavior + + + +(Write what happened. Add screenshots!) ### Reproducible Demo -Please take the time to create a new app that reproduces the issue. + + +(Paste the link to an example project and exact instructions to reproduce the issue.) + + diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 87acf9c2f..45268d0b6 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -1,8 +1,7 @@ From fbdb0dc74e5c845b0eaddcb9344256020ade8739 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 26 Jun 2017 15:08:37 +0100 Subject: [PATCH 37/98] Whitespace --- .github/ISSUE_TEMPLATE.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index e0b9c2b76..5c9ebb057 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -2,6 +2,8 @@ PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION. --> + + ### Is this a bug report? (write your answer here) @@ -19,9 +21,10 @@ Note that we don't provide help for webpack questions after ejecting. You can find webpack docs at https://webpack.js.org/. - Now let's get started! + Now scroll below! --> + ### Can you reproduce the problem with npm 4.x? - ### Is this a bug report? (write your answer here) From c3b74f5babc6b81fed7a41bea7f6042426193c5a Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 26 Jun 2017 15:10:12 +0100 Subject: [PATCH 39/98] Update ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 478355ed6..571453ded 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -2,7 +2,6 @@ PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION. --> - ### Is this a bug report? (write your answer here) From 015ca602b41d2580aa8b20abcd935dbbed57376d Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 26 Jun 2017 15:19:16 +0100 Subject: [PATCH 40/98] Update ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 571453ded..9522ffd22 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -60,7 +60,7 @@ Please write the answer below: --> -(Write your answer here.) +(Write the terms you searched for on the User Guide page.) ### Environment From b68c39e69cea95319be4b8c1bdf587b97f7b9412 Mon Sep 17 00:00:00 2001 From: Mikhail Osher Date: Mon, 26 Jun 2017 18:19:21 +0300 Subject: [PATCH 41/98] Support PhpStorm in launchEditor (#2622) https://www.jetbrains.com/help/webstorm/opening-files-from-command-line.html https://www.jetbrains.com/help/phpstorm/opening-files-from-command-line.html Both editors have the same signature ` --line ` to open file from the command line. It seems to work even if `` is omitted (commit 02f88ba15701f70e613137dd5a3d81caba9d9eb8). Tested on `Win10`+`PhpStorm2016` and `macOS 10.12`+`PhpStorm2017`. --- packages/react-dev-utils/launchEditor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index a1893d13b..0cc170fb6 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -74,6 +74,8 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { ); case 'webstorm': case 'webstorm64': + case 'phpstorm': + case 'phpstorm64': return addWorkspaceToArgumentsIfExists( ['--line', lineNumber, fileName], workspace From ec0f811501277c51278495595b8f016a119af262 Mon Sep 17 00:00:00 2001 From: Mico Piira Date: Mon, 26 Jun 2017 18:48:21 +0300 Subject: [PATCH 42/98] Add empty mock for dgram (#2600) --- packages/react-scripts/config/webpack.config.dev.js | 1 + packages/react-scripts/config/webpack.config.prod.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 18ae8d9a1..f903e3f3f 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -263,6 +263,7 @@ module.exports = { // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { + dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 7e7e2a01d..e2f517060 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -325,6 +325,7 @@ module.exports = { // Some libraries import Node modules but don't use them in the browser. // Tell Webpack to provide empty mocks for them so importing them works. node: { + dgram: 'empty', fs: 'empty', net: 'empty', tls: 'empty', From 936fb90c375615dc4af67388ddca1587aff4abd5 Mon Sep 17 00:00:00 2001 From: Jay V Date: Mon, 26 Jun 2017 12:28:56 -0400 Subject: [PATCH 43/98] Docs: Added link to tutorial on code splitting (#2427) * Adding link to tutorial on code splitting Link to tutorial on Code Splitting with React Router * Update README.md --- packages/react-scripts/template/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c4591c183..906c1c6e8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -377,6 +377,10 @@ This will make `moduleA.js` and all its unique dependencies as a separate chunk You can also use it with `async` / `await` syntax if you prefer it. +### With React Router + +If you are using React Router check out [this tutorial](http://serverless-stack.com/chapters/code-splitting-in-create-react-app.html) on how to use code splitting with it. You can find the companion GitHub repository [here](https://github.com/AnomalyInnovations/serverless-stack-demo-client/tree/code-splitting-in-create-react-app). + ## Adding a Stylesheet This project setup uses [Webpack](https://webpack.js.org/) for handling all assets. Webpack offers a custom way of “extending” the concept of `import` beyond JavaScript. To express that a JavaScript file depends on a CSS file, you need to **import the CSS from the JavaScript file**: From 3d6ebe71d60a6f9f3a5746769fd27062af67ca4a Mon Sep 17 00:00:00 2001 From: Will Farley Date: Mon, 26 Jun 2017 09:29:52 -0700 Subject: [PATCH 44/98] Update sw-precache-webpack-plugin to lastest version (#2429) * Update sw-precache-webpack-plugin to v0.11.3 * Pin the version --- packages/react-scripts/config/webpack.config.prod.js | 3 --- packages/react-scripts/package.json | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index e2f517060..3ed2aad13 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -311,9 +311,6 @@ module.exports = { navigateFallbackWhitelist: [/^(?!\/__).*/], // Don't precache sourcemaps (they're large) and build asset manifest: staticFileGlobsIgnorePatterns: [/\.map$/, /asset-manifest\.json$/], - // Work around Windows path issue in SWPrecacheWebpackPlugin: - // https://github.com/facebookincubator/create-react-app/issues/2235 - stripPrefix: paths.appBuild.replace(/\\/g, '/') + '/', }), // Moment.js is an extremely popular library that bundles large locale files // by default due to how Webpack interprets its code. This is a practical diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index ec2ea7272..fe07c277e 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -48,7 +48,7 @@ "tslint-react": "^3.0.0", "typescript": "~2.4.0", "source-map-loader": "^0.2.1", - "sw-precache-webpack-plugin": "0.9.1", + "sw-precache-webpack-plugin": "0.11.3", "url-loader": "0.5.8", "webpack": "2.6.1", "webpack-dev-server": "2.4.5", From 3fa1499dd34a1f14299c1bde099f7dd594d865c8 Mon Sep 17 00:00:00 2001 From: Jeffrey Posnick Date: Mon, 26 Jun 2017 12:30:43 -0400 Subject: [PATCH 45/98] Determines whether PUBLIC_URL is same-origin before registering SW. (#2432) --- .../react-scripts/template/src/registerServiceWorker.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts index 69e361673..318f94009 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.ts +++ b/packages/react-scripts/template/src/registerServiceWorker.ts @@ -10,6 +10,15 @@ export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { + // The URL constructor is available in all browsers that support SW. + const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + if (publicUrl.origin !== window.location.origin) { + // Our service worker won't work if PUBLIC_URL is on a different origin + // from what our page is served on. This might happen if a CDN is used to + // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374 + return; + } + window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; navigator.serviceWorker From e12710bb5f7d8fa85a4e8378b4c472cc544c9ce9 Mon Sep 17 00:00:00 2001 From: Andy Kenward Date: Mon, 26 Jun 2017 17:31:25 +0100 Subject: [PATCH 46/98] webpack no need for `ident` if using complex options anymore (#2430) Since `v2.2.1` of webpack the need for `ident` for complex options is no longer required. See https://webpack.js.org/guides/migrating/#complex-options --- packages/react-scripts/config/webpack.config.dev.js | 1 - packages/react-scripts/config/webpack.config.prod.js | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index f903e3f3f..845e14630 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -205,7 +205,6 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { - ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 3ed2aad13..c7b37e494 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -207,7 +207,6 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { - ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ From 408ba258b2f7ea03522dbd78084a30f4fa08f5b6 Mon Sep 17 00:00:00 2001 From: Mateusz Zatorski Date: Mon, 26 Jun 2017 17:33:19 +0100 Subject: [PATCH 47/98] add docs for setting up CircleCI for CRA (#2423) * add docs for setting up CircleCI for CRA * Reword --- packages/react-scripts/template/README.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 906c1c6e8..3ab19b548 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1259,6 +1259,10 @@ script: 1. Trigger your first build with a git push. 1. [Customize your Travis CI Build](https://docs.travis-ci.com/user/customizing-the-build/) if needed. +#### CircleCI + +Follow [this article](https://medium.com/@knowbody/circleci-and-zeits-now-sh-c9b7eebcd3c1) to set up CircleCI with a Create React App project. + ### On your own environment ##### Windows (cmd.exe) From 4a6c5b4ed727f219beb46e5b5d0ff9ba8c2bbc9f Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin Date: Mon, 26 Jun 2017 18:34:03 +0200 Subject: [PATCH 48/98] E2E testing enhancements (#2408) * Local testing with docker * Docs on e2e testing * `bash` callback after docker * Add a TL;DR in the CONTRIBUTING section * Local e2e testing with modified files * Remove the N.B. from the README * Fixed a fixme in e2e doc --- CONTRIBUTING.md | 6 + package.json | 2 +- .../fixtures/kitchensink/README.md | 52 ++++++++ tasks/local-test.sh | 113 ++++++++++++++++++ 4 files changed, 172 insertions(+), 1 deletion(-) create mode 100644 packages/react-scripts/fixtures/kitchensink/README.md create mode 100755 tasks/local-test.sh diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index a4e3414be..1c93e310d 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -90,6 +90,12 @@ and then run `npm start` or `npm run build`. *Note: if you are using yarn, we suggest that you use `yarn install --no-lockfile` instead of the bare `yarn` or `yarn install` because we [intentionally](https://github.com/facebookincubator/create-react-app/pull/2014#issuecomment-300811661) do not ignore or add yarn.lock to our repo.* +## Contributing to E2E (end to end) tests + +**TL;DR** use the command yarn e2e:docker to run unit and e2e tests. + +More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). + ## Cutting a Release 1. Tag all merged pull requests that go into the release with the relevant milestone. Each merged PR should also be labeled with one of the [labels](https://github.com/facebookincubator/create-react-app/labels) named `tag: ...` to indicate what kind of change it is. diff --git a/package.json b/package.json index ab4de27c6..d9aa663f3 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", + "postinstall": "lerna bootstrap && cd packages/react-error-overlay/ && npm run build:prod", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", diff --git a/packages/react-scripts/fixtures/kitchensink/README.md b/packages/react-scripts/fixtures/kitchensink/README.md new file mode 100644 index 000000000..8d259d56e --- /dev/null +++ b/packages/react-scripts/fixtures/kitchensink/README.md @@ -0,0 +1,52 @@ +# Contributing to Create React App's E2E tests + +This is an end to end kitchensink test suite, but has multiple usages in it. + +## Running the test suite + +Tests are automatically run by the CI tools. +In order to run them locally, without having to manually install and configure everything, the `yarn e2e:docker` CLI command can be used. + +This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen. +Simply run `yarn e2e:docker -- --help` to get additional info. + +## Writing tests + +Each time a new feature is added, it is advised to add at least one test covering it. + +Features are categorized by their scope: + + - *env*, all those which deal with environment variables (e.g. `NODE_PATH`) + + - *syntax*, all those which showcase a single EcmaScript syntax feature that is expected to be transpiled by **Babel** + + - *webpack*, all those which make use of webpack settings, loaders or plugins + +### Using it as Unit Tests + +In it's most basic for this serve as a collection of unit tests on a single functionality. + +Unit tests are written in a `src/features/**/*.test.js` file located in the same folder as the feature they test, and usually consist of a simple `ReactDOM.render` call. + +These tests are run by **jest** and the environment is `test`, so that it resembles how a **Create React App** application is tested. + +### Using it as Integration Tests + +This suite tests how the single features as before behave while development and in production. +A local HTTP server is started, then every single feature is loaded, one by one, to be tested. + +Test are written in `integration/{env|syntax|webpack}.test.js`, depending on their scope. + +For every test case added there is just a little chore to do: + + - a `case` statement must be added in `src/App.js`, which simply perform a dynamic `import()` of the feature + + - add a test case in the appropriate integration test file, which calls and awaits `initDOM` with the previous `SwitchCase` string + +An usual flow for the test itself is something similar to: + + - add an `id` attribute in a target HTML tag in the feature itself + + - since `initDOM` returns a `Document` element, the previous `id` attribute is used to target the feature's DOM and `expect` accordingly + +These tests are run by **mocha** (why not **jest**? See [this issue](https://github.com/facebook/jest/issues/2288)) and the environments used are both `development` and `production`. diff --git a/tasks/local-test.sh b/tasks/local-test.sh new file mode 100755 index 000000000..42d98ffcd --- /dev/null +++ b/tasks/local-test.sh @@ -0,0 +1,113 @@ +#!/usr/bin/env bash + +function print_help { + echo "Usage: ${0} [OPTIONS]" + echo "" + echo "OPTIONS:" + echo " --node-version the node version to use while testing [6]" + echo " --git-branch the git branch to checkout for testing [the current one]" + echo " --test-suite which test suite to use ('simple', installs', 'kitchensink', 'all') ['all']" + echo " --yarn if present, use yarn as the package manager" + echo " --interactive gain a bash shell after the test run" + echo " --help print this message and exit" + echo "" +} + +cd $(dirname $0) + +node_version=6 +current_git_branch=`git rev-parse --abbrev-ref HEAD` +git_branch=${current_git_branch} +use_yarn=no +test_suite=all +interactive=false + +while [ "$1" != "" ]; do + case $1 in + "--node-version") + shift + node_version=$1 + ;; + "--git-branch") + shift + git_branch=$1 + ;; + "--yarn") + use_yarn=yes + ;; + "--test-suite") + shift + test_suite=$1 + ;; + "--interactive") + interactive=true + ;; + "--help") + print_help + exit 0 + ;; + esac + shift +done + +test_command="./tasks/e2e-simple.sh && ./tasks/e2e-kitchensink.sh && ./tasks/e2e-installs.sh" +case ${test_suite} in + "all") + ;; + "simple") + test_command="./tasks/e2e-simple.sh" + ;; + "kitchensink") + test_command="./tasks/e2e-kitchensink.sh" + ;; + "installs") + test_command="./tasks/e2e-installs.sh" + ;; + *) + ;; +esac + +read -r -d '' apply_changes <<- CMD +cd /var/create-react-app +git config --global user.name "Create React App" +git config --global user.email "cra@email.com" +git stash save -u +git stash show -p > patch +git diff 4b825dc642cb6eb9a060e54bf8d69288fbee4904 stash^3 >> patch +git stash pop +cd - +mv /var/create-react-app/patch . +git apply patch +rm patch +CMD + +if [ ${git_branch} != ${current_git_branch} ]; then + apply_changes='' +fi + +read -r -d '' command <<- CMD +echo "prefix=~/.npm" > ~/.npmrc +mkdir ~/.npm +export PATH=\$PATH:~/.npm/bin +set -x +git clone /var/create-react-app create-react-app --branch ${git_branch} +cd create-react-app +${apply_changes} +node --version +npm --version +set +x +${test_command} && echo -e "\n\e[1;32m✔ Job passed\e[0m" || echo -e "\n\e[1;31m✘ Job failes\e[0m" +$([[ ${interactive} == 'true' ]] && echo 'bash') +CMD + +docker run \ + --env CI=true \ + --env NPM_CONFIG_QUIET=true \ + --env USE_YARN=${use_yarn} \ + --tty \ + --user node \ + --volume ${PWD}/..:/var/create-react-app \ + --workdir /home/node \ + $([[ ${interactive} == 'true' ]] && echo '--interactive') \ + node:${node_version} \ + bash -c "${command}" From d69e4419eefb63690d7ead339b4312bf84d34421 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Mon, 26 Jun 2017 17:35:18 +0100 Subject: [PATCH 49/98] Use Babel compact mode in production (#2389) --- packages/react-scripts/config/webpack.config.prod.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c7b37e494..d7c8bfaea 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -175,7 +175,7 @@ module.exports = { { test: /\.(ts|tsx)$/, include: paths.appSrc, - loader: require.resolve('ts-loader'), + loader: require.resolve('ts-loader') }, // The notation here is somewhat confusing. // "postcss" loader applies autoprefixer to our CSS. From 6d42a3c049c6d82c822f767c7ff5966bd35ad215 Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil Date: Tue, 27 Jun 2017 20:05:15 +0700 Subject: [PATCH 50/98] turn on ascii_only for issue with emoji and regex (#2596) --- packages/react-scripts/config/webpack.config.prod.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index d7c8bfaea..c285cd59b 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -273,6 +273,9 @@ module.exports = { }, output: { comments: false, + // Turned on because emoji and regex is not minified properly using default + // https://github.com/facebookincubator/create-react-app/issues/2488 + ascii_only: true, }, sourceMap: true, }), From d585b5abdab9f54e52d3bbb474106f24bc21e528 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20J=C4=99drzejczyk?= Date: Tue, 27 Jun 2017 15:11:14 +0200 Subject: [PATCH 51/98] add check to filter out custom scripts in eject command (#2562) --- packages/react-scripts/scripts/eject.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index c771e075d..d168805c6 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -169,6 +169,9 @@ inquirer Object.keys(appPackage.scripts).forEach(key => { Object.keys(ownPackage.bin).forEach(binKey => { const regex = new RegExp(binKey + ' (\\w+)', 'g'); + if (!regex.test(appPackage.scripts[key])) { + return; + } appPackage.scripts[key] = appPackage.scripts[key].replace( regex, 'node scripts/$1.js' From 7478e2497311907217ca79e8eac8ab575a103f51 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 27 Jun 2017 15:09:46 +0100 Subject: [PATCH 52/98] Don't run yarn after ejecting (#2634) --- packages/react-scripts/scripts/eject.js | 17 +++++++++++++++-- 1 file changed, 15 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index d168805c6..724b9c144 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -220,8 +220,21 @@ inquirer } if (fs.existsSync(paths.yarnLockFile)) { - console.log(cyan('Running yarn...')); - spawnSync('yarnpkg', [], { stdio: 'inherit' }); + // TODO: this is disabled for three reasons. + // + // 1. It produces garbage warnings on Windows on some systems: + // https://github.com/facebookincubator/create-react-app/issues/2030 + // + // 2. For the above reason, it breaks Windows CI: + // https://github.com/facebookincubator/create-react-app/issues/2624 + // + // 3. It is wrong anyway: re-running yarn will respect the lockfile + // rather than package.json we just updated. Instead we should have + // updated the lockfile. So we might as well not do it while it's broken. + // https://github.com/facebookincubator/create-react-app/issues/2627 + // + // console.log(cyan('Running yarn...')); + // spawnSync('yarnpkg', [], { stdio: 'inherit' }); } else { console.log(cyan('Running npm install...')); spawnSync('npm', ['install'], { stdio: 'inherit' }); From 88e03cefd3b9d9e435176e194ee15056181f7b68 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 27 Jun 2017 15:39:42 +0100 Subject: [PATCH 53/98] Set npm loglevel to 'error' (#2635) --- packages/create-react-app/createReactApp.js | 8 +++++++- packages/react-scripts/scripts/eject.js | 4 +++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index b3d0638e9..597a49a97 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -218,7 +218,13 @@ function install(useYarn, dependencies, verbose, isOnline) { } } else { command = 'npm'; - args = ['install', '--save', '--save-exact'].concat(dependencies); + args = [ + 'install', + '--save', + '--save-exact', + '--loglevel', + 'error', + ].concat(dependencies); } if (verbose) { diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 724b9c144..7d9409d0f 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -237,7 +237,9 @@ inquirer // spawnSync('yarnpkg', [], { stdio: 'inherit' }); } else { console.log(cyan('Running npm install...')); - spawnSync('npm', ['install'], { stdio: 'inherit' }); + spawnSync('npm', ['install', '--loglevel', 'error'], { + stdio: 'inherit', + }); } console.log(green('Ejected successfully!')); console.log(); From b9cbf5c4bdae15d904f9fd17c4b224b5895f3cae Mon Sep 17 00:00:00 2001 From: Levin Rickert Date: Tue, 27 Jun 2017 17:16:02 +0200 Subject: [PATCH 54/98] Auto-detect running editor on Windows for error overlay (#2552) * Auto-detect running editor on Windows for error overlay * Ignore process output if powershell call fails * Support Notepad++ --- packages/react-dev-utils/launchEditor.js | 73 +++++++++++++++++------- 1 file changed, 52 insertions(+), 21 deletions(-) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index 0cc170fb6..5622c1c12 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -8,12 +8,12 @@ */ 'use strict'; -var fs = require('fs'); -var path = require('path'); -var child_process = require('child_process'); -var os = require('os'); -var chalk = require('chalk'); -var shellQuote = require('shell-quote'); +const fs = require('fs'); +const path = require('path'); +const child_process = require('child_process'); +const os = require('os'); +const chalk = require('chalk'); +const shellQuote = require('shell-quote'); function isTerminalEditor(editor) { switch (editor) { @@ -28,7 +28,7 @@ function isTerminalEditor(editor) { // Map from full process name to binary that starts the process // We can't just re-use full process name, because it will spawn a new instance // of the app every time -var COMMON_EDITORS = { +const COMMON_EDITORS_OSX = { '/Applications/Atom.app/Contents/MacOS/Atom': 'atom', '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', @@ -36,6 +36,13 @@ var COMMON_EDITORS = { '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', }; +const COMMON_EDITORS_WIN = [ + 'Code.exe', + 'atom.exe', + 'sublime_text.exe', + 'notepad++.exe', +]; + function addWorkspaceToArgumentsIfExists(args, workspace) { if (workspace) { args.unshift(workspace); @@ -44,7 +51,7 @@ function addWorkspaceToArgumentsIfExists(args, workspace) { } function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { - var editorBasename = path.basename(editor).replace(/\.(exe|cmd|bat)$/i, ''); + const editorBasename = path.basename(editor).replace(/\.(exe|cmd|bat)$/i, ''); switch (editorBasename) { case 'vim': case 'mvim': @@ -54,11 +61,14 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { case 'Atom Beta': case 'subl': case 'sublime': + case 'sublime_text': case 'wstorm': case 'appcode': case 'charm': case 'idea': return [fileName + ':' + lineNumber]; + case 'notepad++': + return ['-n' + lineNumber, fileName]; case 'joe': case 'emacs': case 'emacsclient': @@ -68,6 +78,7 @@ function getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) { case 'mine': return ['--line', lineNumber, fileName]; case 'code': + case 'Code': return addWorkspaceToArgumentsIfExists( ['-g', fileName + ':' + lineNumber], workspace @@ -94,21 +105,41 @@ function guessEditor() { return shellQuote.parse(process.env.REACT_EDITOR); } - // Using `ps x` on OSX we can find out which editor is currently running. - // Potentially we could use similar technique for Windows and Linux - if (process.platform === 'darwin') { - try { - var output = child_process.execSync('ps x').toString(); - var processNames = Object.keys(COMMON_EDITORS); - for (var i = 0; i < processNames.length; i++) { - var processName = processNames[i]; + // Using `ps x` on OSX or `Get-Process` on Windows we can find out which editor is currently running. + // Potentially we could use similar technique for Linux + try { + if (process.platform === 'darwin') { + const output = child_process.execSync('ps x').toString(); + const processNames = Object.keys(COMMON_EDITORS_OSX); + for (let i = 0; i < processNames.length; i++) { + const processName = processNames[i]; if (output.indexOf(processName) !== -1) { - return [COMMON_EDITORS[processName]]; + return [COMMON_EDITORS_OSX[processName]]; + } + } + } else if (process.platform === 'win32') { + const output = child_process + .execSync('powershell -Command "Get-Process | Select-Object Path"', { + stdio: ['pipe', 'pipe', 'ignore'], + }) + .toString(); + const runningProcesses = output.split('\r\n'); + for (let i = 0; i < runningProcesses.length; i++) { + // `Get-Process` sometimes returns empty lines + if (!runningProcesses[i]) { + continue; + } + + const fullProcessPath = runningProcesses[i].trim(); + const shortProcessName = path.basename(fullProcessPath); + + if (COMMON_EDITORS_WIN.indexOf(shortProcessName) !== -1) { + return [fullProcessPath]; } } - } catch (error) { - // Ignore... } + } catch (error) { + // Ignore... } // Last resort, use old skool env vars @@ -146,7 +177,7 @@ function printInstructions(fileName, errorMessage) { console.log(); } -var _childProcess = null; +let _childProcess = null; function launchEditor(fileName, lineNumber) { if (!fs.existsSync(fileName)) { return; @@ -178,7 +209,7 @@ function launchEditor(fileName, lineNumber) { fileName = path.relative('', fileName); } - var workspace = null; + let workspace = null; if (lineNumber) { args = args.concat( getArgumentsForLineNumber(editor, fileName, lineNumber, workspace) From 2a4fe99c62ffc8f97221b9a0cbb6d50fb8758b55 Mon Sep 17 00:00:00 2001 From: Marius Wirtherle Date: Tue, 27 Jun 2017 17:30:26 +0200 Subject: [PATCH 55/98] docs: added REACT_EDITOR to `Advanced Configuration` section (#2445) * docs: added REACT_EDITOR to `Advanced Configuration` section * Update README.md * Update launchEditor.js --- packages/react-dev-utils/launchEditor.js | 3 ++- packages/react-scripts/template/README.md | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index 5622c1c12..dcdf4fee4 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -172,7 +172,8 @@ function printInstructions(fileName, errorMessage) { ' to the ' + chalk.green('.env.local') + ' file in your project folder ' + - 'and restart the development server.' + 'and restart the development server. Learn more: ' + + chalk.green('https://goo.gl/MMTaZt') ); console.log(); } diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3ab19b548..ed431c9e1 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1826,6 +1826,7 @@ PORT | :white_check_mark: | :x: | By default, the development web server will at HTTPS | :white_check_mark: | :x: | When set to `true`, Create React App will run the development server in `https` mode. PUBLIC_URL | :x: | :white_check_mark: | Create React App assumes your application is hosted at the serving web server's root or a subpath as specified in [`package.json` (`homepage`)](#building-for-relative-paths). Normally, Create React App ignores the hostname. You may use this variable to force assets to be referenced verbatim to the url you provide (hostname included). This may be particularly useful when using a CDN to host your application. CI | :large_orange_diamond: | :white_check_mark: | When set to `true`, Create React App treats warnings as failures in the build. It also makes the test runner non-watching. Most CIs set this flag by default. +REACT_EDITOR | :white_check_mark: | :x: | When an app crashes in development, you will see an error overlay with clickable stack trace. When you click on it, Create React App will try to determine the editor you are using based on currently running processes, and open the relevant source file. You can [send a pull request to detect your editor of choice](https://github.com/facebookincubator/create-react-app/issues/2636). Setting this environment variable overrides the automatic detection. If you do it, make sure your systems [PATH](https://en.wikipedia.org/wiki/PATH_(variable)) environment variable points to your editor’s bin folder. ## Troubleshooting From 03039aa3a467698697e94848294beccdfdee4e0f Mon Sep 17 00:00:00 2001 From: Daniel Ciao Date: Tue, 27 Jun 2017 08:55:28 -0700 Subject: [PATCH 56/98] Fix sourcemap directory organizing on Windows (#2456) (#2610) * Fix sourcemap directory organizing on Windows * Update comments --- packages/react-scripts/config/webpack.config.dev.js | 4 ++-- packages/react-scripts/config/webpack.config.prod.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 845e14630..4bbab3874 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -76,9 +76,9 @@ module.exports = { chunkFilename: 'static/js/[name].chunk.js', // This is the URL that app is served from. We use "/" in development. publicPath: publicPath, - // Point sourcemap entries to original disk location + // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => - path.resolve(info.absoluteResourcePath), + path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'), }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index c285cd59b..bb8e1aa1a 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -74,9 +74,9 @@ module.exports = { chunkFilename: 'static/js/[name].[chunkhash:8].chunk.js', // We inferred the "public path" (such as / or /my-project) from homepage. publicPath: publicPath, - // Point sourcemap entries to original disk location + // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => - path.relative(paths.appSrc, info.absoluteResourcePath), + path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/'), }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. From dd4ad7dbcbbe13b7ba3b28d2008b1089082823cc Mon Sep 17 00:00:00 2001 From: Ro Savage Date: Wed, 28 Jun 2017 02:07:38 +1000 Subject: [PATCH 57/98] Add simplified service worker invalidation (#2551) * Add service worker invalidation * Update valid service worker check only on local host --- .../template/src/registerServiceWorker.ts | 100 +++++++++++++----- 1 file changed, 72 insertions(+), 28 deletions(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts index 318f94009..4a3ccf021 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.ts +++ b/packages/react-scripts/template/src/registerServiceWorker.ts @@ -8,6 +8,16 @@ // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. // This link also includes instructions on opting out of this behavior. +const isLocalhost = Boolean( + window.location.hostname === 'localhost' || + // [::1] is the IPv6 localhost address. + window.location.hostname === '[::1]' || + // 127.0.0.1/8 is considered localhost for IPv4. + window.location.hostname.match( + /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/ + ) +); + export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. @@ -21,38 +31,72 @@ export default function register() { window.addEventListener('load', () => { const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`; - navigator.serviceWorker - .register(swUrl) - .then(registration => { - registration.onupdatefound = () => { - const installingWorker = registration.installing; - if (!installingWorker) { - return; + + if (!isLocalhost) { + // Is not local host. Just register service worker + registerValidSW(swUrl); + } else { + // This is running on localhost. Lets check if a service worker still exists or not. + checkValidServiceWorker(swUrl); + } + }); + } +} + +function registerValidSW(swUrl) { + navigator.serviceWorker + .register(swUrl) + .then(registration => { + registration.onupdatefound = () => { + const installingWorker = registration.installing; + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a "New content is + // available; please refresh." message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // "Content is cached for offline use." message. + console.log('Content is cached for offline use.'); } + } + }; + }; + }) + .catch(error => { + console.error('Error during service worker registration:', error); + }); +} - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); // tslint:disable-line - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); // tslint:disable-line - } - } - }; - }; - }) - .catch(error => { - console.error('Error during service worker registration:', error); // tslint:disable-line +function checkValidServiceWorker(swUrl) { + // Check if the service worker can be found. If it can't reload the page. + fetch(swUrl) + .then(response => { + // Ensure service worker exists, and that we really are getting a JS file. + if ( + response.status === 404 || + response.headers.get('content-type').indexOf('javascript') === -1 + ) { + // No service worker found. Probably a different app. Reload the page. + navigator.serviceWorker.ready.then(registration => { + registration.unregister().then(() => { + window.location.reload(); + }); }); + } else { + // Service worker found. Proceed as normal. + registerValidSW(swUrl); + } + }) + .catch(() => { + console.log( + 'No internet connection found. App is running in offline mode.' + ); }); - } } export function unregister() { From 2bd9c8b9194f923237f2fddc804831f9a8713cd1 Mon Sep 17 00:00:00 2001 From: Brian Douglas Date: Tue, 27 Jun 2017 17:16:59 +0100 Subject: [PATCH 58/98] Add yarn example under "Installing a Dependency" (#2362) Due to many of the other examples in the README showing both `npm` and `yarn` commands. I have added an example of how to install a dependency using `yarn`. --- packages/react-scripts/template/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index ed431c9e1..9191e5da5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -281,6 +281,12 @@ The generated project includes React and ReactDOM as dependencies. It also inclu npm install --save ``` +Alternatively you may also use `yarn`: + +``` +yarn add +``` + ## Importing a Component This project setup supports ES6 modules thanks to Babel.
From 9fc378032a8e382f12e5df4ec63b84e4a3f1bad0 Mon Sep 17 00:00:00 2001 From: James Blight Date: Wed, 28 Jun 2017 01:51:51 +0930 Subject: [PATCH 59/98] Update docs with WebSocket proxy information (#2305) * Update docs with WebSocket proxy information * Tweak wording --- packages/react-scripts/template/README.md | 31 +++++++++++++++++++++++ 1 file changed, 31 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 9191e5da5..d84fa9590 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -44,6 +44,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Proxying API Requests in Development](#proxying-api-requests-in-development) - ["Invalid Host Header" Errors After Configuring Proxy](#invalid-host-header-errors-after-configuring-proxy) - [Configuring the Proxy Manually](#configuring-the-proxy-manually) + - [Configuring a WebSocket Proxy](#configuring-a-websocket-proxy) - [Using HTTPS in Development](#using-https-in-development) - [Generating Dynamic `` Tags on the Server](#generating-dynamic-meta-tags-on-the-server) - [Pre-Rendering into Static HTML Files](#pre-rendering-into-static-html-files) @@ -992,6 +993,36 @@ You may also narrow down matches using `*` and/or `**`, to match the path exactl } ``` +### Configuring a WebSocket Proxy + +When setting up a WebSocket proxy, there are a some extra considerations to be aware of. + +If you’re using a WebSocket engine like [Socket.io](https://socket.io/), you must have a Socket.io server running that you can use as the proxy target. Socket.io will not work with a standard WebSocket server. Specifically, don't expect Socket.io to work with [the websocket.org echo test](http://websocket.org/echo.html). + +There’s some good documentation available for [setting up a Socket.io server](https://socket.io/docs/). + +Standard WebSockets **will** work with a standard WebSocket server as well as the websocket.org echo test. You can use libraries like [ws](https://github.com/websockets/ws) for the server, with [native WebSockets in the browser](https://developer.mozilla.org/en-US/docs/Web/API/WebSocket). + +Either way, you can proxy WebSocket requests manually in `package.json`: + +```js +{ + // ... + "proxy": { + "/socket": { + // Your compatible WebSocket server + "target": "ws://", + // Tell http-proxy-middleware that this is a WebSocket proxy. + // Also allows you to proxy WebSocket requests without an additional HTTP request + // https://github.com/chimurai/http-proxy-middleware#external-websocket-upgrade + "ws": true + // ... + } + } + // ... +} +``` + ## Using HTTPS in Development >Note: this feature is available with `react-scripts@0.4.0` and higher. From 330f480090feb7e4395393ed59dba1caae2f4e25 Mon Sep 17 00:00:00 2001 From: Gabriel Aumala Date: Tue, 27 Jun 2017 18:26:54 +0200 Subject: [PATCH 60/98] Add more info about OOM build failiure [docs] (#2060) In the section about npm run build fails in troubleshooting added more info about memory usage of the build script and a link to a tutorial for adding more swap space as a viable solution. --- packages/react-scripts/template/README.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index d84fa9590..402828129 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -84,7 +84,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Troubleshooting](#troubleshooting) - [`npm start` doesn’t detect changes](#npm-start-doesnt-detect-changes) - [`npm test` hangs on macOS Sierra](#npm-test-hangs-on-macos-sierra) - - [`npm run build` silently fails](#npm-run-build-silently-fails) + - [`npm run build` exits too early](#npm-run-build-exits-too-early) - [`npm run build` fails on Heroku](#npm-run-build-fails-on-heroku) - [Moment.js locales are missing](#momentjs-locales-are-missing) - [Something Missing?](#something-missing) @@ -1905,9 +1905,13 @@ If this still doesn’t help, try running `launchctl unload -F ~/Library/LaunchA There are also reports that *uninstalling* Watchman fixes the issue. So if nothing else helps, remove it from your system and try again. -### `npm run build` silently fails +### `npm run build` exits too early -It is reported that `npm run build` can fail on machines with no swap space, which is common in cloud environments. If [the symptoms are matching](https://github.com/facebookincubator/create-react-app/issues/1133#issuecomment-264612171), consider adding some swap space to the machine you’re building on, or build the project locally. +It is reported that `npm run build` can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message: + +> The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process. + +If you are completely sure that you didn't terminate the process, consider [adding some swap space](https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-ubuntu-14-04) to the machine you’re building on, or build the project locally. ### `npm run build` fails on Heroku From 9e2c334171cc8a90c379a1828ddaafd22407b3cf Mon Sep 17 00:00:00 2001 From: Heng Li Date: Tue, 27 Jun 2017 09:32:51 -0700 Subject: [PATCH 61/98] Update README.md (#1813) --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 402828129..3edaec5ce 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -139,7 +139,7 @@ For the project to build, **these files must exist with exact filenames**: You can delete or rename the other files. You may create subdirectories inside `src`. For faster rebuilds, only files inside `src` are processed by Webpack.
-You need to **put any JS and CSS files inside `src`**, or Webpack won’t see them. +You need to **put any JS and CSS files inside `src`**, otherwise Webpack won’t see them. Only files inside `public` can be used from `public/index.html`.
Read instructions below for using assets from JavaScript and HTML. From 0cda9eee7aa919d756c5656983fe2259f8abf98e Mon Sep 17 00:00:00 2001 From: Colin Eberhardt Date: Tue, 27 Jun 2017 17:40:38 +0100 Subject: [PATCH 62/98] Fix CLI grammar (#1945) I know this is a very minor thing, but correct grammar makes it easier to understand. --- packages/create-react-app/createReactApp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 597a49a97..93bb9ab6e 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -256,7 +256,7 @@ function run( const packageToInstall = getInstallPackage(version); const allDependencies = ['react', 'react-dom', packageToInstall]; - console.log('Installing packages. This might take a couple minutes.'); + console.log('Installing packages. This might take a couple of minutes.'); getPackageName(packageToInstall) .then(packageName => checkIfOnline(useYarn).then(isOnline => ({ isOnline: isOnline, From 6d87749ee721c42ef1885ea26fa7bbe2aed76e79 Mon Sep 17 00:00:00 2001 From: Maarten Hus Date: Tue, 27 Jun 2017 18:51:58 +0200 Subject: [PATCH 63/98] Added instruction on how to install Prettier (#2006) * Added instruction on how to install Prettier * Tweak style * Update README.md * Update README.md * Support JSX * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 54 +++++++++++++++++++++++ 1 file changed, 54 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 3edaec5ce..c54858b03 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -17,6 +17,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Syntax Highlighting in the Editor](#syntax-highlighting-in-the-editor) - [Displaying Lint Output in the Editor](#displaying-lint-output-in-the-editor) - [Debugging in the Editor](#debugging-in-the-editor) +- [Formatting Code Automatically](#formatting-code-automatically) - [Changing the Page ``](#changing-the-page-title) - [Installing a Dependency](#installing-a-dependency) - [Importing a Component](#importing-a-component) @@ -264,6 +265,59 @@ Then add the block below to your `launch.json` file and put it inside the `.vsco Start your app by running `npm start`, and start debugging in VS Code by pressing `F5` or by clicking the green debug icon. You can now write code, set breakpoints, make changes to the code, and debug your newly modified code—all from your editor. +## Formatting Code Automatically + +Prettier is an opinionated JavaScript formatter. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). + +To format our code whenever we make a commit in git, we need to install the following dependencies: + +``` +npm install --save-dev husky lint-staged prettier +``` + +or if you use Yarn: + +``` +yarn add --dev husky lint-staged prettier +``` + +* `husky` makes it easy to use githooks as if they are npm scripts. +* `lint-staged` allows us to run scripts on staged files in git. See this [blog post about lint-staged to learn more about it](https://medium.com/@okonetchnikov/make-linting-great-again-f3890e1ad6b8). +* `prettier` is the JavaScript formatter we will run before commits. + +Now we can make sure every file is formatted correctly by adding a few lines to the `package.json` in the project root. + +Add the following line to `scripts` section: + +```js +{ + // ... + "scripts": { + // ... + "precommit": "lint-staged" + }, + // ... +} +``` + +Next we add a 'lint-staged' field to the `package.json`, for example: + +```js +{ + // ... + "lint-staged": { + "src/**/*.{js,jsx}": [ + "prettier --single-quote --write", + "git add" + ] + } +} +``` + +Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. + +Next you might want to integrate Prettier in your favorite editor. Read the section on [Editor Integration](https://github.com/prettier/prettier#editor-integration) on the Prettier GitHub page. + ## Changing the Page `<title>` You can find the source HTML file in the `public` folder of the generated project. You may edit the `<title>` tag in it to change the title from “React App” to anything else. From 7d8c31b491937810ffa28fd5b1557e0d5b5d47cb Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Tue, 27 Jun 2017 18:15:02 +0100 Subject: [PATCH 64/98] Less passive-aggressive issue template --- .github/ISSUE_TEMPLATE.md | 56 ++++++++++++++++++++++----------------- 1 file changed, 31 insertions(+), 25 deletions(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 9522ffd22..f53b0213d 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -1,5 +1,5 @@ <!-- - PLEASE DON'T DELETE THIS TEMPLATE UNTIL YOU HAVE READ THE FIRST SECTION. + PLEASE READ THE FIRST SECTION :-) --> ### Is this a bug report? @@ -8,18 +8,20 @@ <!-- If you answered "Yes": + + Please note that your issue will be fixed much faster if you spend about + half an hour preparing it, including the exact reproduction steps and a demo. + + If you're in a hurry or don't feel confident, it's fine to report bugs with + less details, but this makes it less likely they'll get fixed soon. - We expect that it will take you about 30 minutes to produce a high-quality bug report. - While this may seem like a lot, putting care into issues helps us fix them faster. - For bug reports, it is REQUIRED to fill the rest of this template, or the issue will be closed. + In either case, please fill as many fields below as you can. If you answered "No": If this is a question or a discussion, you may delete this template and write in a free form. Note that we don't provide help for webpack questions after ejecting. You can find webpack docs at https://webpack.js.org/. - - Now scroll below! --> @@ -42,25 +44,30 @@ Then try to reproduce the issue again. Can you still reproduce it? - Note: Please try this even if you are using Yarn. Yarn also has bugs. + Note: Please try this even if you are using Yarn so that we know whether it's a Yarn-only bug. --> (Write your answer here.) -### Have you read the Troubleshooting section and searched the User Guide? +### Which terms did you search for in User Guide? <!-- - There are a few common documented problems, such as watcher not detecting changes. + There are a few common documented problems, such as watcher not detecting changes, or build failing. They are described in the Troubleshooting section of the User Guide: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting - Have you read that section, and have you searched the User Guide for symptoms of your problem? - Please write the answer below: + Please scan these few sections for common problems. + Additionally, you can search the User Guide itself for something you're having issues with: + + https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.me + + If you didn't find the solution, please share which words you searched for. + This helps us improve documentation for future readers who might encounter the same problem. --> -(Write the terms you searched for on the User Guide page.) +(Write your answer here if relevant.) ### Environment @@ -111,16 +118,18 @@ Then, specify: <!-- Did something go wrong? Is something broken, or not behaving as you expected? - Describe this section in detail, and attach screenshots if possible. + Please attach screenshots if possible! They are extremely helpful for diagnosing issues. --> -(Write what happened. Add screenshots!) +(Write what happened. Please add screenshots!) ### Reproducible Demo <!-- - Please share a project that reproduces the issue. + If you can, please share a project that reproduces the issue. + This is the single most effective way to get an issue fixed soon. + There are two ways to do it: * Create a new app and try to reproduce the issue in it. @@ -137,16 +146,13 @@ Then, specify: <!-- What happens if you skip this step? - - Someone will read your bug report, and maybe will be able to help you, - but it’s unlikely that it will get much attention from the team. Eventually, - the issue will likely get closed in favor of issues that have reproducible demos. - - Please remember that: - - * Issues without reproducible demos have a very low priority. - * The person fixing the bug would have to do that anyway. Please be respectful of their time. - * You might figure out the issues yourself as you work on extracting it. + + We will try to help you, but in many cases it is impossible because crucial + information is missing. In that case we'll tag an issue as having a low priority, + and eventually close it if there is no clear direction. + + We still appreciate the report though, as eventually somebody else might + create a reproducible example for it. Thanks for helping us help you! --> From ae62952a4c41858b97be7a2d90e2024be5f39d3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pete=20Nyk=C3=A4nen?= <pete.a.nykanen@gmail.com> Date: Tue, 27 Jun 2017 23:46:59 +0300 Subject: [PATCH 65/98] Add Brackets to launchEditor.js (#2637) --- packages/react-dev-utils/launchEditor.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index dcdf4fee4..7ed4ad190 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -31,12 +31,14 @@ function isTerminalEditor(editor) { const COMMON_EDITORS_OSX = { '/Applications/Atom.app/Contents/MacOS/Atom': 'atom', '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', + '/Applications/Brackets.app/Contents/MacOS/Brackets': 'brackets', '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', }; const COMMON_EDITORS_WIN = [ + 'Brackets.exe', 'Code.exe', 'atom.exe', 'sublime_text.exe', From b73d6930b365690fc9b127adbfb966e74eda1d3c Mon Sep 17 00:00:00 2001 From: Ashton <me@ashtonwar.com> Date: Tue, 27 Jun 2017 21:47:36 +0100 Subject: [PATCH 66/98] Update ISSUE_TEMPLATE.md (#2643) Adding the word "also" to "Can you also reproduce the problem with npm 4.x?" clarifies that contributors aren't _expected_ to use NPM v4, but we're interested in understanding which environments the reported issue affects. --- .github/ISSUE_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index f53b0213d..5e30b2874 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -25,7 +25,7 @@ --> -### Can you reproduce the problem with npm 4.x? +### Can you also reproduce the problem with npm 4.x? <!-- Many errors, especially related to "missing modules", are due to npm bugs. From a3fc196e56676f897003bd583e18e751152706dc Mon Sep 17 00:00:00 2001 From: Artem Sapegin <artem@sapegin.ru> Date: Tue, 27 Jun 2017 22:52:30 +0200 Subject: [PATCH 67/98] Add React Styleguidist (#2044) --- packages/react-scripts/template/README.md | 46 +++++++++++++++++++++-- 1 file changed, 42 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index c54858b03..158f553d5 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -64,6 +64,9 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Disabling jsdom](#disabling-jsdom) - [Snapshot Testing](#snapshot-testing) - [Editor Integration](#editor-integration) +- [Developing Components in Isolation](#developing-components-in-isolation) + - [Getting Started with Storybook](#getting-started-with-storybook) + - [Getting Started with Styleguidist](#getting-started-with-styleguidist) - [Making a Progressive Web App](#making-a-progressive-web-app) - [Offline-First Considerations](#offline-first-considerations) - [Progressive Web App Metadata](#progressive-web-app-metadata) @@ -1431,14 +1434,15 @@ For an example, a simple button component could have following states: Usually, it’s hard to see these states without running a sample app or some examples. -Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) to your project. **It is a third-party tool that lets you develop components and see all their states in isolation from your app**. +Create React App doesn’t include any tools for this by default, but you can easily add [Storybook for React](https://storybook.js.org) ([source](https://github.com/storybooks/storybook)) or [React Styleguidist](https://react-styleguidist.js.org/) ([source](https://github.com/styleguidist/react-styleguidist)) to your project. **These are third-party tools that let you develop components and see all their states in isolation from your app**. ![Storybook for React Demo](http://i.imgur.com/7CIAWpB.gif) -A storybook can also be deployed as a static app. -This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. +You can also deploy your Storybook or style guide as a static app. This way, everyone in your team can view and review different states of UI components without starting a backend server or creating an account in your app. -### Setup your app with Storybook +### Getting Started with Storybook + +Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components. First, install the following npm package globally: @@ -1461,6 +1465,40 @@ Learn more about React Storybook: * [Documentation](https://storybook.js.org/basics/introduction/) * [Snapshot Testing UI](https://github.com/storybooks/storybook/tree/master/addons/storyshots) with Storybook + addon/storyshot +### Getting Started with Styleguidist + +Styleguidist combines of a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground. + +First install Styleguidist and peer dependencies from npm: + +```sh +npm install --save-dev react-styleguidist webpack +``` + +Then, add these scripts to your `package.json`: + +```sh +{ + "scripts": { + "styleguide": "styleguidist server", + "styleguide:build": "styleguidist build" + } +} +``` + +Then, run the following command inside your app’s directory: + +```sh +npm run styleguide +``` + +After that, follow the instructions on the screen. + +Learn more about React Styleguidist: + +* [GitHub Repo](https://github.com/styleguidist/react-styleguidist) +* [Documentation](https://react-styleguidist.js.org/docs/getting-started.html) + ## Making a Progressive Web App By default, the production build is a fully functional, offline-first From 4e3e06bf6c9aad9462d56dc575f342fce53efa4a Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Tue, 27 Jun 2017 22:28:00 +0100 Subject: [PATCH 68/98] Ignore "Skipping static resource" message from SW precache (#2645) --- packages/react-scripts/config/webpack.config.prod.js | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index bb8e1aa1a..119570e35 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -76,7 +76,9 @@ module.exports = { publicPath: publicPath, // Point sourcemap entries to original disk location (format as URL on Windows) devtoolModuleFilenameTemplate: info => - path.relative(paths.appSrc, info.absoluteResourcePath).replace(/\\/g, '/'), + path + .relative(paths.appSrc, info.absoluteResourcePath) + .replace(/\\/g, '/'), }, resolve: { // This allows you to set a fallback for where Webpack should look for modules. @@ -303,6 +305,11 @@ module.exports = { // This message occurs for every build and is a bit too noisy. return; } + if (message.indexOf('Skipping static resource') === 0) { + // This message obscures real errors so we ignore it. + // https://github.com/facebookincubator/create-react-app/issues/2612 + return; + } console.log(message); }, minify: true, From 6f4c6969ef56b354064df3a691c4cb69dce84a35 Mon Sep 17 00:00:00 2001 From: Colin Galindo <galindo.colin@gmail.com> Date: Tue, 27 Jun 2017 16:40:33 -0500 Subject: [PATCH 69/98] Add instructions to use source-map-explorer (#1641) --- packages/react-scripts/template/README.md | 32 +++++++++++++++++++++++ 1 file changed, 32 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 158f553d5..e30a4405d 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -70,6 +70,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Making a Progressive Web App](#making-a-progressive-web-app) - [Offline-First Considerations](#offline-first-considerations) - [Progressive Web App Metadata](#progressive-web-app-metadata) +- [Analyzing the Bundle Size](#analyzing-the-bundle-size) - [Deployment](#deployment) - [Static Server](#static-server) - [Other Solutions](#other-solutions) @@ -1599,6 +1600,37 @@ icons, names, and branding colors to use when the web app is displayed. provides more context about what each field means, and how your customizations will affect your users' experience. +## Analyzing the Bundle Size + +[Source map explorer](https://www.npmjs.com/package/source-map-explorer) analyzes +JavaScript bundles using the source maps. This helps you understand where code +bloat is coming from. + +To add Source map explorer to a Create React App project, follow these steps: + +``` +npm install source-map-explorer --save-dev +``` + +Then in `package.json`, add the following line to `scripts` +On Windows you will have to type the full file path out. + +```diff + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test --env=jsdom", ++ "analyze": "source-map-explorer build/static/js/main.* " +``` + +Then to analyze the bundle run the production build then run the analyze +script. + +``` +npm run build +npm run analyze +``` + ## Deployment `npm run build` creates a `build` directory with a production build of your app. Set up your favourite HTTP server so that a visitor to your site is served `index.html`, and requests to static paths like `/static/js/main.<hash>.js` are served with the contents of the `/static/js/main.<hash>.js` file. From a9c8b817f3d16c8a92cfaeca3e25e7ad4b942251 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 00:00:49 +0100 Subject: [PATCH 70/98] Warn about large bundle sizes (#2648) --- packages/react-dev-utils/FileSizeReporter.js | 35 ++++++++++++++++++-- packages/react-scripts/scripts/build.js | 12 ++++++- 2 files changed, 44 insertions(+), 3 deletions(-) diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index 8f822d201..0ec62333b 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -18,7 +18,13 @@ var stripAnsi = require('strip-ansi'); var gzipSize = require('gzip-size').sync; // Prints a detailed summary of build files. -function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { +function printFileSizesAfterBuild( + webpackStats, + previousSizeMap, + buildFolder, + maxBundleGzipSize, + maxChunkGzipSize +) { var root = previousSizeMap.root; var sizes = previousSizeMap.sizes; var assets = webpackStats @@ -41,6 +47,7 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { null, assets.map(a => stripAnsi(a.sizeLabel).length) ); + var suggestBundleSplitting = false; assets.forEach(asset => { var sizeLabel = asset.sizeLabel; var sizeLength = stripAnsi(sizeLabel).length; @@ -48,14 +55,38 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap, buildFolder) { var rightPadding = ' '.repeat(longestSizeLabelLength - sizeLength); sizeLabel += rightPadding; } + var isMainBundle = asset.name.indexOf('main.') === 0; + var maxRecommendedSize = isMainBundle + ? maxBundleGzipSize + : maxChunkGzipSize; + var isLarge = maxRecommendedSize && asset.size > maxRecommendedSize; + if (isLarge && path.extname(asset.name) === '.js') { + suggestBundleSplitting = true; + } console.log( ' ' + - sizeLabel + + (isLarge ? chalk.yellow(sizeLabel) : sizeLabel) + ' ' + chalk.dim(asset.folder + path.sep) + chalk.cyan(asset.name) ); }); + if (suggestBundleSplitting) { + console.log(); + console.log( + chalk.yellow('The bundle size is significantly larger than recommended.') + ); + console.log( + chalk.yellow( + 'Consider reducing it with code splitting: https://goo.gl/9VhYWB' + ) + ); + console.log( + chalk.yellow( + 'You can also analyze the project dependencies: https://goo.gl/LeUzfb' + ) + ); + } } function removeFileNameHash(buildFolder, fileName) { diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 2e4bc21ee..06eb0695d 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -39,6 +39,10 @@ const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); +// These sizes are pretty large. We'll warn for bundles exceeding them. +const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024; +const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024; + // Warn and crash if required files are missing if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) { process.exit(1); @@ -76,7 +80,13 @@ measureFileSizesBeforeBuild(paths.appBuild) } console.log('File sizes after gzip:\n'); - printFileSizesAfterBuild(stats, previousFileSizes, paths.appBuild); + printFileSizesAfterBuild( + stats, + previousFileSizes, + paths.appBuild, + WARN_AFTER_BUNDLE_GZIP_SIZE, + WARN_AFTER_CHUNK_GZIP_SIZE + ); console.log(); const appPackage = require(paths.appPackageJson); From 853642676e3336d6e86c537c35c7d82912f86c96 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 14:04:26 +0100 Subject: [PATCH 71/98] Put react-scripts in dependencies, not devDependencies (#2657) * Put react-scripts in dependencies, not devDependencies * Sort dependencies on eject * Remove CI check --- packages/create-react-app/createReactApp.js | 21 +++++--------------- packages/react-scripts/scripts/eject.js | 22 +++++++++++++++------ packages/react-scripts/scripts/init.js | 1 - tasks/e2e-installs.sh | 9 --------- 4 files changed, 21 insertions(+), 32 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 93bb9ab6e..74b121689 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -276,11 +276,7 @@ function run( }) .then(packageName => { checkNodeVersion(packageName); - - // Since react-scripts has been installed with --save - // we need to move it into devDependencies and rewrite package.json - // also ensure react dependencies have caret version range - fixDependencies(packageName); + setCaretRangeForRuntimeDeps(packageName); const scriptsPath = path.resolve( process.cwd(), @@ -497,16 +493,14 @@ function checkAppName(appName) { } // TODO: there should be a single place that holds the dependencies - const dependencies = ['react', 'react-dom']; - const devDependencies = ['react-scripts']; - const allDependencies = dependencies.concat(devDependencies).sort(); - if (allDependencies.indexOf(appName) >= 0) { + const dependencies = ['react', 'react-dom', 'react-scripts'].sort(); + if (dependencies.indexOf(appName) >= 0) { console.error( chalk.red( `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` + `Due to the way npm works, the following names are not allowed:\n\n` ) + - chalk.cyan(allDependencies.map(depName => ` ${depName}`).join('\n')) + + chalk.cyan(dependencies.map(depName => ` ${depName}`).join('\n')) + chalk.red('\n\nPlease choose a different project name.') ); process.exit(1); @@ -533,7 +527,7 @@ function makeCaretRange(dependencies, name) { dependencies[name] = patchedVersion; } -function fixDependencies(packageName) { +function setCaretRangeForRuntimeDeps(packageName) { const packagePath = path.join(process.cwd(), 'package.json'); const packageJson = require(packagePath); @@ -543,16 +537,11 @@ function fixDependencies(packageName) { } const packageVersion = packageJson.dependencies[packageName]; - if (typeof packageVersion === 'undefined') { console.error(chalk.red(`Unable to find ${packageName} in package.json`)); process.exit(1); } - packageJson.devDependencies = packageJson.devDependencies || {}; - packageJson.devDependencies[packageName] = packageVersion; - delete packageJson.dependencies[packageName]; - makeCaretRange(packageJson.dependencies, 'react'); makeCaretRange(packageJson.dependencies, 'react-dom'); diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 7d9409d0f..265511860 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -146,24 +146,34 @@ inquirer console.log(cyan('Updating the dependencies')); const ownPackageName = ownPackage.name; - if (appPackage.devDependencies[ownPackageName]) { - console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); - delete appPackage.devDependencies[ownPackageName]; + if (appPackage.devDependencies) { + // We used to put react-scripts in devDependencies + if (appPackage.devDependencies[ownPackageName]) { + console.log(` Removing ${cyan(ownPackageName)} from devDependencies`); + delete appPackage.devDependencies[ownPackageName]; + } } + appPackage.dependencies = appPackage.dependencies || {}; if (appPackage.dependencies[ownPackageName]) { console.log(` Removing ${cyan(ownPackageName)} from dependencies`); delete appPackage.dependencies[ownPackageName]; } - Object.keys(ownPackage.dependencies).forEach(key => { // For some reason optionalDependencies end up in dependencies after install if (ownPackage.optionalDependencies[key]) { return; } - console.log(` Adding ${cyan(key)} to devDependencies`); - appPackage.devDependencies[key] = ownPackage.dependencies[key]; + console.log(` Adding ${cyan(key)} to dependencies`); + appPackage.dependencies[key] = ownPackage.dependencies[key]; + }); + // Sort the deps + const unsortedDependencies = appPackage.dependencies; + appPackage.dependencies = {}; + Object.keys(unsortedDependencies).sort().forEach(key => { + appPackage.dependencies[key] = unsortedDependencies[key]; }); console.log(); + console.log(cyan('Updating the scripts')); delete appPackage.scripts['eject']; Object.keys(appPackage.scripts).forEach(key => { diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index de8ab085e..64efdf529 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -39,7 +39,6 @@ module.exports = function( // Copy over some of the devDependencies appPackage.dependencies = appPackage.dependencies || {}; - appPackage.devDependencies = appPackage.devDependencies || {}; // Setup the script rules appPackage.scripts = { diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 8f4789ff0..7ea70fac6 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -55,15 +55,6 @@ function checkDependencies { echo "There are extraneous dependencies in package.json" exit 1 fi - - - if ! awk '/"devDependencies": {/{y=1;next}/},/{y=0; next}y' package.json | \ - grep -v -q -E '^\s*"react(-dom|-scripts)?"'; then - echo "Dev Dependencies are correct" - else - echo "There are extraneous devDependencies in package.json" - exit 1 - fi } function create_react_app { From a7efc396062cc3e6ecb9d0c078cb046e2ab76074 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 14:27:52 +0100 Subject: [PATCH 72/98] Don't ask to install webpack for using Styleguidist (#2656) * Don't ask to install webpack for using Styleguidist * Update README.md --- packages/react-scripts/template/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e30a4405d..24821e3fc 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1470,10 +1470,10 @@ Learn more about React Storybook: Styleguidist combines of a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground. -First install Styleguidist and peer dependencies from npm: +First, install Styleguidist: ```sh -npm install --save-dev react-styleguidist webpack +npm install --save-dev react-styleguidist ``` Then, add these scripts to your `package.json`: From 9e64ca399999c0707311d260d9c4d8dd89fef5d8 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 15:05:12 +0100 Subject: [PATCH 73/98] Minor code style edits to user guide (#2660) * Minor code style edits to user guide * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md --- packages/react-scripts/template/README.md | 187 +++++++++++++++------- 1 file changed, 125 insertions(+), 62 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 24821e3fc..aa2ab4340 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -275,14 +275,14 @@ Prettier is an opinionated JavaScript formatter. With Prettier you can format th To format our code whenever we make a commit in git, we need to install the following dependencies: -``` -npm install --save-dev husky lint-staged prettier +```sh +npm install --save husky lint-staged prettier ``` -or if you use Yarn: +Alternatively you may use `yarn`: -``` -yarn add --dev husky lint-staged prettier +```sh +yarn add husky lint-staged prettier ``` * `husky` makes it easy to use githooks as if they are npm scripts. @@ -293,29 +293,26 @@ Now we can make sure every file is formatted correctly by adding a few lines to Add the following line to `scripts` section: -```js -{ - // ... +```diff "scripts": { - // ... - "precommit": "lint-staged" - }, - // ... -} ++ "precommit": "lint-staged", + "start": "react-scripts start", + "build": "react-scripts build", ``` Next we add a 'lint-staged' field to the `package.json`, for example: -```js -{ - // ... - "lint-staged": { - "src/**/*.{js,jsx}": [ - "prettier --single-quote --write", - "git add" - ] - } -} +```diff + "dependencies": { + // ... + }, ++ "lint-staged": { ++ "src/**/*.{js,jsx}": [ ++ "prettier --single-quote --write", ++ "git add" ++ ] ++ }, + "scripts": { ``` Now, whenever you make a commit, Prettier will format the changed files automatically. You can also run `./node_modules/.bin/prettier --single-quote --write "src/**/*.{js,jsx}"` to format your entire project for the first time. @@ -336,15 +333,17 @@ If you use a custom server for your app in production and want to modify the tit The generated project includes React and ReactDOM as dependencies. It also includes a set of scripts used by Create React App as a development dependency. You may install other dependencies (for example, React Router) with `npm`: -``` -npm install --save <library-name> +```sh +npm install --save react-router ``` -Alternatively you may also use `yarn`: +Alternatively you may use `yarn`: +```sh +yarn add react-router ``` -yarn add <library-name> -``` + +This works for any library, not just `react-router`. ## Importing a Component @@ -519,9 +518,16 @@ Following this rule often makes CSS preprocessors less useful, as features like First, let’s install the command-line interface for Sass: +```sh +npm install --save node-sass-chokidar ``` -npm install node-sass-chokidar --save-dev + +Alternatively you may use `yarn`: + +```sh +yarn add node-sass-chokidar ``` + Then in `package.json`, add the following lines to `scripts`: ```diff @@ -557,8 +563,14 @@ At this point you might want to remove all CSS files from the source control, an As a final step, you may find it convenient to run `watch-css` automatically with `npm start`, and run `build-css` as a part of `npm run build`. You can use the `&&` operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this: +```sh +npm install --save npm-run-all ``` -npm install --save-dev npm-run-all + +Alternatively you may use `yarn`: + +```sh +yarn add npm-run-all ``` Then we can change `start` and `build` scripts to include the CSS preprocessor commands: @@ -716,9 +728,14 @@ You don’t have to use [React Bootstrap](https://react-bootstrap.github.io) tog Install React Bootstrap and Bootstrap from npm. React Bootstrap does not include Bootstrap CSS so this needs to be installed as well: +```sh +npm install --save react-bootstrap bootstrap@3 ``` -npm install react-bootstrap --save -npm install bootstrap@3 --save + +Alternatively you may use `yarn`: + +```sh +yarn add react-bootstrap bootstrap@3 ``` Import Bootstrap CSS and optionally Bootstrap theme CSS in the beginning of your ```src/index.js``` file: @@ -757,7 +774,7 @@ Recent versions of [Flow](http://flowtype.org/) work with Create React App proje To add Flow to a Create React App project, follow these steps: -1. Run `npm install --save-dev flow-bin` (or `yarn add --dev flow-bin`). +1. Run `npm install --save flow-bin` (or `yarn add flow-bin`). 2. Add `"flow": "flow"` to the `scripts` section of your `package.json`. 3. Run `npm run flow init` (or `yarn flow init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory. 4. Add `// @flow` to any files you want to type check (for example, to `src/App.js`). @@ -1226,12 +1243,20 @@ This test mounts a component and makes sure that it didn’t throw during render When you encounter bugs caused by changing components, you will gain a deeper insight into which parts of them are worth testing in your application. This might be a good time to introduce more specific tests asserting specific expected output or behavior. -If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). You can write a smoke test with it too: +If you’d like to test components in isolation from the child components they render, we recommend using [`shallow()` rendering API](http://airbnb.io/enzyme/docs/api/shallow.html) from [Enzyme](http://airbnb.io/enzyme/). To install it, run: + +```sh +npm install --save enzyme react-test-renderer +``` + +Alternatively you may use `yarn`: ```sh -npm install --save-dev enzyme react-test-renderer +yarn add enzyme react-test-renderer ``` +You can write a smoke test with it too: + ```js import React from 'react'; import { shallow } from 'enzyme'; @@ -1270,18 +1295,24 @@ Additionally, you might find [jest-enzyme](https://github.com/blainekasten/enzym expect(wrapper).toContainReact(welcome) ``` -To setup jest-enzyme with Create React App, follow the instructions for [initializing your test environment](#initializing-test-environment) to import `jest-enzyme`. +To enable this, install `jest-enzyme`: + +```sh +npm install --save jest-enzyme +``` + +Alternatively you may use `yarn`: ```sh -npm install --save-dev jest-enzyme +yarn add jest-enzyme ``` +Import it in [`src/setupTests.js`](#initializing-test-environment) to make its matchers available in every test: + ```js -// src/setupTests.js import 'jest-enzyme'; ``` - ### Using Third Party Assertion Libraries We recommend that you use `expect()` for assertions and `jest.fn()` for spies. If you are having issues with them please [file those against Jest](https://github.com/facebook/jest/issues/new), and we’ll fix them. We intend to keep making them better for React, supporting, for example, [pretty-printing React elements as JSX](https://github.com/facebook/jest/pull/1566). @@ -1392,14 +1423,22 @@ The build command will check for linter warnings and fail if any are found. By default, the `package.json` of the generated project looks like this: ```js - // ... "scripts": { - // ... + "start": "react-scripts start", + "build": "react-scripts build", "test": "react-scripts test --env=jsdom" - } ``` -If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster.<br> +If you know that none of your tests depend on [jsdom](https://github.com/tmpvar/jsdom), you can safely remove `--env=jsdom`, and your tests will run faster: + +```diff + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", +- "test": "react-scripts test --env=jsdom" ++ "test": "react-scripts test" +``` + To help you make up your mind, here is a list of APIs that **need jsdom**: * Any browser globals like `window` and `document` @@ -1473,18 +1512,22 @@ Styleguidist combines of a style guide, where all your components are presented First, install Styleguidist: ```sh -npm install --save-dev react-styleguidist +npm install --save react-styleguidist ``` -Then, add these scripts to your `package.json`: +Alternatively you may use `yarn`: ```sh -{ - "scripts": { - "styleguide": "styleguidist server", - "styleguide:build": "styleguidist build" - } -} +yarn add react-styleguidist +``` + +Then, add these scripts to your `package.json`: + +```diff + "scripts": { ++ "styleguide": "styleguidist server", ++ "styleguide:build": "styleguidist build", + "start": "react-scripts start", ``` Then, run the following command inside your app’s directory: @@ -1608,21 +1651,36 @@ bloat is coming from. To add Source map explorer to a Create React App project, follow these steps: +```sh +npm install --save source-map-explorer ``` -npm install source-map-explorer --save-dev + +Alternatively you may use `yarn`: + +```sh +yarn add source-map-explorer ``` -Then in `package.json`, add the following line to `scripts` -On Windows you will have to type the full file path out. +Then in `package.json`, add the following line to `scripts`: ```diff "scripts": { ++ "analyze": "source-map-explorer build/static/js/main.*", "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", -+ "analyze": "source-map-explorer build/static/js/main.* " ``` +>**Note:** +> +>This doesn't quite work on Windows because it doesn't automatically expand `*` in the filepath. For now, the workaround is to look at the full hashed filename in `build/static/js` (e.g. `main.89b7e95a.js`) and copy it into `package.json` when you're running the analyzer. For example: +> +>```diff +>+ "analyze": "source-map-explorer build/static/js/main.89b7e95a.js", +>``` +> +>Unfortunately it will be different after every build. You can express support for fixing this on Windows [in this issue](https://github.com/danvk/source-map-explorer/issues/52). + Then to analyze the bundle run the production build then run the analyze script. @@ -1827,18 +1885,23 @@ Now, whenever you run `npm run build`, you will see a cheat sheet with instructi To publish it at [https://myusername.github.io/my-app](https://myusername.github.io/my-app), run: ```sh -npm install --save-dev gh-pages +npm install --save gh-pages +``` + +Alternatively you may use `yarn`: + +```sh +yarn add gh-pages ``` Add the following scripts in your `package.json`: -```js - // ... +```diff "scripts": { - // ... - "predeploy": "npm run build", - "deploy": "gh-pages -d build" - } ++ "predeploy": "npm run build", ++ "deploy": "gh-pages -d build", + "start": "react-scripts start", + "build": "react-scripts build", ``` The `predeploy` script will run automatically before `deploy` is run. From 55df6e1130e0a761163b6f53bbccfbc22d4c7d59 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 15:05:30 +0100 Subject: [PATCH 74/98] Bump dependencies (#2658) --- packages/babel-preset-react-app/package.json | 2 +- packages/react-dev-utils/package.json | 10 +++++----- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index 175b7b129..f56a804ea 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -21,7 +21,7 @@ "babel-plugin-transform-react-jsx-source": "6.22.0", "babel-plugin-transform-regenerator": "6.24.1", "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-env": "1.4.0", + "babel-preset-env": "1.5.2", "babel-preset-react": "6.24.1" }, "peerDependencies": { diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 6fa6c4117..75b39399e 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -33,8 +33,8 @@ "webpackHotDevClient.js" ], "dependencies": { - "address": "1.0.1", - "anser": "1.3.0", + "address": "1.0.2", + "anser": "1.4.1", "babel-code-frame": "6.22.0", "chalk": "1.1.3", "cross-spawn": "4.0.2", @@ -43,13 +43,13 @@ "filesize": "3.3.0", "gzip-size": "3.0.0", "html-entities": "1.2.1", - "inquirer": "3.0.6", + "inquirer": "3.1.1", "is-root": "1.0.0", - "opn": "5.0.0", + "opn": "5.1.0", "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", "sockjs-client": "1.1.4", - "strip-ansi": "3.0.1", + "strip-ansi": "4.0.0", "text-table": "0.2.0" } } From e8e2926e8734779290416d2445c56bc433735e0f Mon Sep 17 00:00:00 2001 From: Evan Jones <evanjones4040@gmail.com> Date: Wed, 28 Jun 2017 07:29:58 -0700 Subject: [PATCH 75/98] Better React Native Web support (#2511) * Better React Native Web support * Adding better react-native-web support for jest testing --- packages/react-scripts/config/webpack.config.dev.js | 4 +++- packages/react-scripts/config/webpack.config.prod.js | 4 +++- packages/react-scripts/scripts/utils/createJestConfig.js | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 4bbab3874..2e5026678 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -93,7 +93,9 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'], + // `web` extension prefixes have been added for better support + // for React Native Web. + extensions: ['.web.ts', '.ts', '.tsx', '.web.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 119570e35..6c1d0c4b4 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -93,7 +93,9 @@ module.exports = { // We also include JSX as a common component filename extension to support // some tools, although we do not recommend using it, see: // https://github.com/facebookincubator/create-react-app/issues/290 - extensions: ['.ts', '.tsx', '.js', '.json', '.jsx'], + // `web` extension prefixes have been added for better support + // for React Native Web. + extensions: ['.web.ts', '.ts', '.tsx', '.web.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 019767d7e..463d1e589 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -27,7 +27,7 @@ module.exports = (resolve, rootDir) => { collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'], setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, - moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'], + moduleFileExtensions: ['web.ts', 'ts', 'web.tsx', 'tsx', 'js', 'jsx', 'json'], testMatch: [ '<rootDir>/src/**/__tests__/**/*.ts?(x)', '<rootDir>/src/**/?(*.)(spec|test).ts?(x)', @@ -49,7 +49,7 @@ module.exports = (resolve, rootDir) => { 'ts-jest': { tsConfigFile: paths.appTsTestConfig, }, - }, + } }; if (rootDir) { config.rootDir = rootDir; From 8aca5fd7311efceaa637623c300c33ab28e8db2d Mon Sep 17 00:00:00 2001 From: Fabrizio Castellarin <f.castellarin@gmail.com> Date: Wed, 28 Jun 2017 17:01:08 +0200 Subject: [PATCH 76/98] Local testing docker links (#2662) * Fix a command style in docs * Add a link to docker's docs --- CONTRIBUTING.md | 2 +- packages/react-scripts/fixtures/kitchensink/README.md | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 1c93e310d..68a9c4e09 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -92,7 +92,7 @@ and then run `npm start` or `npm run build`. ## Contributing to E2E (end to end) tests -**TL;DR** use the command yarn e2e:docker to run unit and e2e tests. +**TL;DR** use the command `yarn e2e:docker` to run unit and e2e tests. More detailed information are in the dedicated [README](/packages/react-scripts/fixtures/kitchensink/README.md). diff --git a/packages/react-scripts/fixtures/kitchensink/README.md b/packages/react-scripts/fixtures/kitchensink/README.md index 8d259d56e..4e7725ce1 100644 --- a/packages/react-scripts/fixtures/kitchensink/README.md +++ b/packages/react-scripts/fixtures/kitchensink/README.md @@ -10,6 +10,8 @@ In order to run them locally, without having to manually install and configure e This is a simple script that runs a **Docker** container, where the node version, git branch to clone, test suite, and whether to run it with `yarn` or `npm` can be chosen. Simply run `yarn e2e:docker -- --help` to get additional info. +If you need guidance installing **Docker**, you should follow their [official docs](https://docs.docker.com/engine/installation/). + ## Writing tests Each time a new feature is added, it is advised to add at least one test covering it. From 25ca9ac743c1612d74732781ed97c544ecba2cd1 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 16:18:47 +0100 Subject: [PATCH 77/98] Update ISSUE_TEMPLATE.md --- .github/ISSUE_TEMPLATE.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index 5e30b2874..ace3ddb49 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -33,6 +33,9 @@ npm -v + If it is 5.x, please be aware that it has more than 50 known bugs, and + is not guaranteed to work with Create React App. + If it's not starting with 4, try to install npm 4.x: npm install -g npm@4 From 10bd98cbe51870253a828ac23f1c628ac24c68d4 Mon Sep 17 00:00:00 2001 From: Dan Abramov <gaearon@fb.com> Date: Wed, 28 Jun 2017 16:23:16 +0100 Subject: [PATCH 78/98] Reformat source code with Prettier 1.5.2 --- packages/create-react-app/createReactApp.js | 46 +++++--- packages/eslint-config-react-app/index.js | 3 +- packages/react-dev-utils/FileSizeReporter.js | 15 ++- packages/react-dev-utils/ModuleScopePlugin.js | 21 ++-- .../react-dev-utils/WebpackDevServerUtils.js | 99 +++++++++-------- packages/react-dev-utils/ansiHTML.js | 3 +- packages/react-dev-utils/eslintFormatter.js | 3 +- packages/react-dev-utils/launchEditor.js | 9 +- packages/react-dev-utils/openBrowser.js | 3 +- .../printHostingInstructions.js | 40 +++++-- .../react-dev-utils/webpackHotDevClient.js | 9 +- .../src/__tests__/mapper.js | 9 +- .../src/components/frame.js | 14 +-- .../src/components/overlay.js | 5 +- .../src/utils/isInternalFile.js | 6 +- .../react-error-overlay/src/utils/unmapper.js | 3 +- packages/react-scripts/config/env.js | 11 +- packages/react-scripts/config/paths.js | 7 +- .../config/webpackDevServer.config.js | 4 +- .../kitchensink/integration/env.test.js | 7 +- .../kitchensink/integration/initDOM.js | 48 +++++---- .../fixtures/kitchensink/src/App.js | 101 ++++++++++-------- .../src/features/env/FileEnvVariables.js | 12 ++- .../kitchensink/src/features/env/NodePath.js | 6 +- .../kitchensink/src/features/env/PublicUrl.js | 7 +- .../src/features/env/ShellEnvVariables.js | 5 +- .../src/features/syntax/ArrayDestructuring.js | 6 +- .../src/features/syntax/ArraySpread.js | 6 +- .../src/features/syntax/AsyncAwait.js | 6 +- .../src/features/syntax/ClassProperties.js | 6 +- .../src/features/syntax/ComputedProperties.js | 8 +- .../features/syntax/CustomInterpolation.js | 8 +- .../src/features/syntax/DefaultParameters.js | 6 +- .../features/syntax/DestructuringAndAwait.js | 6 +- .../src/features/syntax/Generators.js | 6 +- .../features/syntax/ObjectDestructuring.js | 6 +- .../src/features/syntax/ObjectSpread.js | 8 +- .../src/features/syntax/Promises.js | 6 +- .../src/features/syntax/RestAndDefault.js | 6 +- .../src/features/syntax/RestParameters.js | 6 +- .../features/syntax/TemplateInterpolation.js | 6 +- .../src/features/webpack/ImageInclusion.js | 5 +- .../src/features/webpack/JsonInclusion.js | 5 +- .../src/features/webpack/LinkedModules.js | 6 +- .../src/features/webpack/NoExtInclusion.js | 7 +- .../features/webpack/UnknownExtInclusion.js | 7 +- packages/react-scripts/scripts/build.js | 3 +- packages/react-scripts/scripts/eject.js | 52 ++++----- packages/react-scripts/scripts/init.js | 13 ++- 49 files changed, 420 insertions(+), 270 deletions(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 74b121689..9dc7b4ff3 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -74,10 +74,14 @@ const program = new commander.Command(packageJson.name) ); console.log(` - a specific npm version: ${chalk.green('0.8.2')}`); console.log( - ` - a custom fork published on npm: ${chalk.green('my-react-scripts')}` + ` - a custom fork published on npm: ${chalk.green( + 'my-react-scripts' + )}` ); console.log( - ` - a .tgz archive: ${chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz')}` + ` - a .tgz archive: ${chalk.green( + 'https://mysite.com/my-react-scripts-0.8.2.tgz' + )}` ); console.log( ` It is not needed unless you specifically want to use a fork.` @@ -87,7 +91,9 @@ const program = new commander.Command(packageJson.name) ` If you have any problems, do not hesitate to file an issue:` ); console.log( - ` ${chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new')}` + ` ${chalk.cyan( + 'https://github.com/facebookincubator/create-react-app/issues/new' + )}` ); console.log(); }) @@ -258,15 +264,19 @@ function run( console.log('Installing packages. This might take a couple of minutes.'); getPackageName(packageToInstall) - .then(packageName => checkIfOnline(useYarn).then(isOnline => ({ - isOnline: isOnline, - packageName: packageName, - }))) + .then(packageName => + checkIfOnline(useYarn).then(isOnline => ({ + isOnline: isOnline, + packageName: packageName, + })) + ) .then(info => { const isOnline = info.isOnline; const packageName = info.packageName; console.log( - `Installing ${chalk.cyan('react')}, ${chalk.cyan('react-dom')}, and ${chalk.cyan(packageName)}...` + `Installing ${chalk.cyan('react')}, ${chalk.cyan( + 'react-dom' + )}, and ${chalk.cyan(packageName)}...` ); console.log(); @@ -334,7 +344,9 @@ function run( if (!remainingFiles.length) { // Delete target folder if empty console.log( - `Deleting ${chalk.cyan(`${appName} /`)} from ${chalk.cyan(path.resolve(root, '..'))}` + `Deleting ${chalk.cyan(`${appName} /`)} from ${chalk.cyan( + path.resolve(root, '..') + )}` ); process.chdir(path.resolve(root, '..')); fs.removeSync(path.join(root)); @@ -422,7 +434,9 @@ function getPackageName(installPackage) { /^.+\/(.+?)(?:-\d+.+)?\.tgz$/ )[1]; console.log( - `Based on the filename, assuming it is "${chalk.cyan(assumedProjectName)}"` + `Based on the filename, assuming it is "${chalk.cyan( + assumedProjectName + )}"` ); return Promise.resolve(assumedProjectName); }); @@ -485,7 +499,9 @@ function checkAppName(appName) { const validationResult = validateProjectName(appName); if (!validationResult.validForNewPackages) { console.error( - `Could not create a project called ${chalk.red(`"${appName}"`)} because of npm naming restrictions:` + `Could not create a project called ${chalk.red( + `"${appName}"` + )} because of npm naming restrictions:` ); printValidationResults(validationResult.errors); printValidationResults(validationResult.warnings); @@ -497,7 +513,9 @@ function checkAppName(appName) { if (dependencies.indexOf(appName) >= 0) { console.error( chalk.red( - `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` + + `We cannot create a project called ${chalk.green( + appName + )} because a dependency with the same name exists.\n` + `Due to the way npm works, the following names are not allowed:\n\n` ) + chalk.cyan(dependencies.map(depName => ` ${depName}`).join('\n')) + @@ -519,7 +537,9 @@ function makeCaretRange(dependencies, name) { if (!semver.validRange(patchedVersion)) { console.error( - `Unable to patch ${name} dependency version because version ${chalk.red(version)} will become invalid ${chalk.red(patchedVersion)}` + `Unable to patch ${name} dependency version because version ${chalk.red( + version + )} will become invalid ${chalk.red(patchedVersion)}` ); patchedVersion = version; } diff --git a/packages/eslint-config-react-app/index.js b/packages/eslint-config-react-app/index.js index 2cbcae04c..7298a8c3b 100644 --- a/packages/eslint-config-react-app/index.js +++ b/packages/eslint-config-react-app/index.js @@ -236,7 +236,8 @@ module.exports = { { object: 'System', property: 'import', - message: 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', + message: + 'Please use import() instead. More info: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#code-splitting', }, ], diff --git a/packages/react-dev-utils/FileSizeReporter.js b/packages/react-dev-utils/FileSizeReporter.js index 0ec62333b..ab9a27287 100644 --- a/packages/react-dev-utils/FileSizeReporter.js +++ b/packages/react-dev-utils/FileSizeReporter.js @@ -119,15 +119,12 @@ function measureFileSizesBeforeBuild(buildFolder) { if (!err && fileNames) { sizes = fileNames .filter(fileName => /\.(js|css)$/.test(fileName)) - .reduce( - (memo, fileName) => { - var contents = fs.readFileSync(fileName); - var key = removeFileNameHash(buildFolder, fileName); - memo[key] = gzipSize(contents); - return memo; - }, - {} - ); + .reduce((memo, fileName) => { + var contents = fs.readFileSync(fileName); + var key = removeFileNameHash(buildFolder, fileName); + memo[key] = gzipSize(contents); + return memo; + }, {}); } resolve({ root: buildFolder, diff --git a/packages/react-dev-utils/ModuleScopePlugin.js b/packages/react-dev-utils/ModuleScopePlugin.js index adc9bdcba..f630a0279 100644 --- a/packages/react-dev-utils/ModuleScopePlugin.js +++ b/packages/react-dev-utils/ModuleScopePlugin.js @@ -37,10 +37,7 @@ class ModuleScopePlugin { // Maybe an indexOf === 0 would be better? const relative = path.relative(appSrc, request.context.issuer); // If it's not in src/ or a subdirectory, not our request! - if ( - relative.startsWith('../') || - relative.startsWith('..\\') - ) { + if (relative.startsWith('../') || relative.startsWith('..\\')) { return callback(); } // Find path from src to the requested file @@ -58,9 +55,19 @@ class ModuleScopePlugin { ) { callback( new Error( - `You attempted to import ${chalk.cyan(request.__innerRequest_request)} which falls outside of the project ${chalk.cyan('src/')} directory. ` + - `Relative imports outside of ${chalk.cyan('src/')} are not supported. ` + - `You can either move it inside ${chalk.cyan('src/')}, or add a symlink to it from project's ${chalk.cyan('node_modules/')}.` + `You attempted to import ${chalk.cyan( + request.__innerRequest_request + )} which falls outside of the project ${chalk.cyan( + 'src/' + )} directory. ` + + `Relative imports outside of ${chalk.cyan( + 'src/' + )} are not supported. ` + + `You can either move it inside ${chalk.cyan( + 'src/' + )}, or add a symlink to it from project's ${chalk.cyan( + 'node_modules/' + )}.` ), request ); diff --git a/packages/react-dev-utils/WebpackDevServerUtils.js b/packages/react-dev-utils/WebpackDevServerUtils.js index 1e1113c18..f9957aaa3 100644 --- a/packages/react-dev-utils/WebpackDevServerUtils.js +++ b/packages/react-dev-utils/WebpackDevServerUtils.js @@ -37,18 +37,20 @@ if (isSmokeTest) { } function prepareUrls(protocol, host, port) { - const formatUrl = hostname => url.format({ - protocol, - hostname, - port, - pathname: '/', - }); - const prettyPrintUrl = hostname => url.format({ - protocol, - hostname, - port: chalk.bold(port), - pathname: '/', - }); + const formatUrl = hostname => + url.format({ + protocol, + hostname, + port, + pathname: '/', + }); + const prettyPrintUrl = hostname => + url.format({ + protocol, + hostname, + port: chalk.bold(port), + pathname: '/', + }); const isUnspecifiedHost = host === '0.0.0.0' || host === '::'; let prettyHost, lanUrlForConfig, lanUrlForTerminal; @@ -317,9 +319,11 @@ function prepareProxy(proxy, appPublicFolder) { // However API calls like `fetch()` won’t generally accept text/html. // If this heuristic doesn’t work well for you, use a custom `proxy` object. context: function(pathname, req) { - return mayProxy(pathname) && + return ( + mayProxy(pathname) && req.headers.accept && - req.headers.accept.indexOf('text/html') === -1; + req.headers.accept.indexOf('text/html') === -1 + ); }, onProxyReq: proxyReq => { // Browers may send Origin headers even with same-origin @@ -375,39 +379,40 @@ function prepareProxy(proxy, appPublicFolder) { function choosePort(host, defaultPort) { return detect(defaultPort, host).then( - port => new Promise(resolve => { - if (port === defaultPort) { - return resolve(port); - } - const message = process.platform !== 'win32' && - defaultPort < 1024 && - !isRoot() - ? `Admin permissions are required to run a server on a port below 1024.` - : `Something is already running on port ${defaultPort}.`; - if (isInteractive) { - clearConsole(); - const existingProcess = getProcessForPort(defaultPort); - const question = { - type: 'confirm', - name: 'shouldChangePort', - message: chalk.yellow( - message + - `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` - ) + '\n\nWould you like to run the app on another port instead?', - default: true, - }; - inquirer.prompt(question).then(answer => { - if (answer.shouldChangePort) { - resolve(port); - } else { - resolve(null); - } - }); - } else { - console.log(chalk.red(message)); - resolve(null); - } - }), + port => + new Promise(resolve => { + if (port === defaultPort) { + return resolve(port); + } + const message = + process.platform !== 'win32' && defaultPort < 1024 && !isRoot() + ? `Admin permissions are required to run a server on a port below 1024.` + : `Something is already running on port ${defaultPort}.`; + if (isInteractive) { + clearConsole(); + const existingProcess = getProcessForPort(defaultPort); + const question = { + type: 'confirm', + name: 'shouldChangePort', + message: + chalk.yellow( + message + + `${existingProcess ? ` Probably:\n ${existingProcess}` : ''}` + ) + '\n\nWould you like to run the app on another port instead?', + default: true, + }; + inquirer.prompt(question).then(answer => { + if (answer.shouldChangePort) { + resolve(port); + } else { + resolve(null); + } + }); + } else { + console.log(chalk.red(message)); + resolve(null); + } + }), err => { throw new Error( chalk.red(`Could not find an open port at ${chalk.bold(host)}.`) + diff --git a/packages/react-dev-utils/ansiHTML.js b/packages/react-dev-utils/ansiHTML.js index 5d3e79203..9f53cea67 100644 --- a/packages/react-dev-utils/ansiHTML.js +++ b/packages/react-dev-utils/ansiHTML.js @@ -69,7 +69,8 @@ function ansiHTML(txt) { var open = false; for (var index = 0; index < arr.length; ++index) { var c = arr[index]; - var content = c.content, fg = c.fg; + var content = c.content, + fg = c.fg; var contentParts = content.split('\n'); for (var _index = 0; _index < contentParts.length; ++_index) { diff --git a/packages/react-dev-utils/eslintFormatter.js b/packages/react-dev-utils/eslintFormatter.js index 96b6ce14b..b7756b7a2 100644 --- a/packages/react-dev-utils/eslintFormatter.js +++ b/packages/react-dev-utils/eslintFormatter.js @@ -82,7 +82,8 @@ function formatter(results) { // it here because we always show at most one error, and // we can only be sure it's an ESLint error before exiting // this function. - output += 'Search for the ' + + output += + 'Search for the ' + chalk.underline(chalk.red('keywords')) + ' to learn more about each error.'; } diff --git a/packages/react-dev-utils/launchEditor.js b/packages/react-dev-utils/launchEditor.js index 7ed4ad190..bcf0a5060 100644 --- a/packages/react-dev-utils/launchEditor.js +++ b/packages/react-dev-utils/launchEditor.js @@ -30,10 +30,13 @@ function isTerminalEditor(editor) { // of the app every time const COMMON_EDITORS_OSX = { '/Applications/Atom.app/Contents/MacOS/Atom': 'atom', - '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', + '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta': + '/Applications/Atom Beta.app/Contents/MacOS/Atom Beta', '/Applications/Brackets.app/Contents/MacOS/Brackets': 'brackets', - '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', - '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text.app/Contents/MacOS/Sublime Text': + '/Applications/Sublime Text.app/Contents/SharedSupport/bin/subl', + '/Applications/Sublime Text 2.app/Contents/MacOS/Sublime Text 2': + '/Applications/Sublime Text 2.app/Contents/SharedSupport/bin/subl', '/Applications/Visual Studio Code.app/Contents/MacOS/Electron': 'code', }; diff --git a/packages/react-dev-utils/openBrowser.js b/packages/react-dev-utils/openBrowser.js index 9ded70781..4f5700125 100644 --- a/packages/react-dev-utils/openBrowser.js +++ b/packages/react-dev-utils/openBrowser.js @@ -68,7 +68,8 @@ function startBrowserProcess(browser, url) { // requested a different browser, we can try opening // Chrome with AppleScript. This lets us reuse an // existing tab when possible instead of creating a new one. - const shouldTryOpenChromeWithAppleScript = process.platform === 'darwin' && + const shouldTryOpenChromeWithAppleScript = + process.platform === 'darwin' && (typeof browser !== 'string' || browser === OSX_CHROME); if (shouldTryOpenChromeWithAppleScript) { diff --git a/packages/react-dev-utils/printHostingInstructions.js b/packages/react-dev-utils/printHostingInstructions.js index 7b9284d4e..f9882d44a 100644 --- a/packages/react-dev-utils/printHostingInstructions.js +++ b/packages/react-dev-utils/printHostingInstructions.js @@ -23,10 +23,14 @@ function printHostingInstructions( if (publicUrl && publicUrl.indexOf('.github.io/') !== -1) { // "homepage": "http://user.github.io/project" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicPathname)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicPathname + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); @@ -48,10 +52,14 @@ function printHostingInstructions( console.log(` ${chalk.yellow('"scripts"')}: {`); console.log(` ${chalk.dim('// ...')}`); console.log( - ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow('"npm run build",')}` + ` ${chalk.yellow('"predeploy"')}: ${chalk.yellow( + '"npm run build",' + )}` ); console.log( - ` ${chalk.yellow('"deploy"')}: ${chalk.yellow('"gh-pages -d build"')}` + ` ${chalk.yellow('"deploy"')}: ${chalk.yellow( + '"gh-pages -d build"' + )}` ); console.log(' }'); console.log(); @@ -63,10 +71,14 @@ function printHostingInstructions( } else if (publicPath !== '/') { // "homepage": "http://mywebsite.com/project" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicPath)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicPath + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); console.log(`The ${chalk.cyan('build')} folder is ready to be deployed.`); @@ -75,10 +87,14 @@ function printHostingInstructions( if (publicUrl) { // "homepage": "http://mywebsite.com" console.log( - `The project was built assuming it is hosted at ${chalk.green(publicUrl)}.` + `The project was built assuming it is hosted at ${chalk.green( + publicUrl + )}.` ); console.log( - `You can control this with the ${chalk.green('homepage')} field in your ${chalk.cyan('package.json')}.` + `You can control this with the ${chalk.green( + 'homepage' + )} field in your ${chalk.cyan('package.json')}.` ); console.log(); } else { @@ -87,12 +103,16 @@ function printHostingInstructions( 'The project was built assuming it is hosted at the server root.' ); console.log( - `To override this, specify the ${chalk.green('homepage')} in your ${chalk.cyan('package.json')}.` + `To override this, specify the ${chalk.green( + 'homepage' + )} in your ${chalk.cyan('package.json')}.` ); console.log('For example, add this to build it for GitHub Pages:'); console.log(); console.log( - ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green('"http://myname.github.io/myapp"')}${chalk.cyan(',')}` + ` ${chalk.green('"homepage"')} ${chalk.cyan(':')} ${chalk.green( + '"http://myname.github.io/myapp"' + )}${chalk.cyan(',')}` ); console.log(); } diff --git a/packages/react-dev-utils/webpackHotDevClient.js b/packages/react-dev-utils/webpackHotDevClient.js index 7d6a979e2..78002b28e 100644 --- a/packages/react-dev-utils/webpackHotDevClient.js +++ b/packages/react-dev-utils/webpackHotDevClient.js @@ -81,14 +81,16 @@ function addOverlayDivTo(iframe) { } function overlayHeaderStyle() { - return 'font-size: 2em;' + + return ( + 'font-size: 2em;' + 'font-family: sans-serif;' + 'color: rgb(206, 17, 38);' + 'white-space: pre-wrap;' + 'margin: 0 2rem 0.75rem 0px;' + 'flex: 0 0 auto;' + 'max-height: 35%;' + - 'overflow: auto;'; + 'overflow: auto;' + ); } var overlayIframe = null; @@ -127,7 +129,8 @@ function ensureOverlayDivExists(onOverlayDivReady) { function showErrorOverlay(message) { ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) { // TODO: unify this with our runtime overlay - overlayDiv.innerHTML = '<div style="' + + overlayDiv.innerHTML = + '<div style="' + overlayHeaderStyle() + '">Failed to compile</div>' + '<pre style="' + diff --git a/packages/react-error-overlay/src/__tests__/mapper.js b/packages/react-error-overlay/src/__tests__/mapper.js index 64c2cf730..169bf6c59 100644 --- a/packages/react-error-overlay/src/__tests__/mapper.js +++ b/packages/react-error-overlay/src/__tests__/mapper.js @@ -14,7 +14,8 @@ import { resolve } from 'path'; test('basic error; 0 context', async () => { expect.assertions(1); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)\n at http://localhost:3000/static/js/bundle.js:30091:25\n at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:29901:12)\n at http://localhost:3000/static/js/bundle.js:30090:11\n at CallbackQueue.notifyAll (http://localhost:3000/static/js/bundle.js:13256:22)\n at ReactReconcileTransaction.close (http://localhost:3000/static/js/bundle.js:35124:26)\n at ReactReconcileTransaction.closeAll (http://localhost:3000/static/js/bundle.js:7390:25)\n at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:7337:16)\n at batchedMountComponentIntoNode (http://localhost:3000/static/js/bundle.js:14204:15)\n at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:7324:20)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:33900:26)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:2181:27)\n at Object._renderNewRootComponent (http://localhost:3000/static/js/bundle.js:14398:18)\n at Object._renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:14479:32)\n at Object.render (http://localhost:3000/static/js/bundle.js:14500:23)\n at Object.friendlySyntaxErrorLabel (http://localhost:3000/static/js/bundle.js:17287:20)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at fn (http://localhost:3000/static/js/bundle.js:84:20)\n at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:41219:18)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at validateFormat (http://localhost:3000/static/js/bundle.js:709:39)\n at http://localhost:3000/static/js/bundle.js:712:10'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)\n at http://localhost:3000/static/js/bundle.js:30091:25\n at measureLifeCyclePerf (http://localhost:3000/static/js/bundle.js:29901:12)\n at http://localhost:3000/static/js/bundle.js:30090:11\n at CallbackQueue.notifyAll (http://localhost:3000/static/js/bundle.js:13256:22)\n at ReactReconcileTransaction.close (http://localhost:3000/static/js/bundle.js:35124:26)\n at ReactReconcileTransaction.closeAll (http://localhost:3000/static/js/bundle.js:7390:25)\n at ReactReconcileTransaction.perform (http://localhost:3000/static/js/bundle.js:7337:16)\n at batchedMountComponentIntoNode (http://localhost:3000/static/js/bundle.js:14204:15)\n at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:7324:20)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:33900:26)\n at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:2181:27)\n at Object._renderNewRootComponent (http://localhost:3000/static/js/bundle.js:14398:18)\n at Object._renderSubtreeIntoContainer (http://localhost:3000/static/js/bundle.js:14479:32)\n at Object.render (http://localhost:3000/static/js/bundle.js:14500:23)\n at Object.friendlySyntaxErrorLabel (http://localhost:3000/static/js/bundle.js:17287:20)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at fn (http://localhost:3000/static/js/bundle.js:84:20)\n at Object.<anonymous> (http://localhost:3000/static/js/bundle.js:41219:18)\n at __webpack_require__ (http://localhost:3000/static/js/bundle.js:660:30)\n at validateFormat (http://localhost:3000/static/js/bundle.js:709:39)\n at http://localhost:3000/static/js/bundle.js:712:10'; fetch.mockResponseOnce( fs @@ -38,7 +39,8 @@ test('basic error; 0 context', async () => { test('default context (3)', async () => { expect.assertions(1); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (http://localhost:3000/static/js/bundle.js:26122:21)'; fetch.mockResponseOnce( fs @@ -62,7 +64,8 @@ test('default context (3)', async () => { test('bad comes back same', async () => { expect.assertions(2); - const error = 'TypeError: document.body.missing is not a function\n at App.componentDidMount (A:1:2)'; + const error = + 'TypeError: document.body.missing is not a function\n at App.componentDidMount (A:1:2)'; const orig = parse(error); expect(orig).toEqual([ { diff --git a/packages/react-error-overlay/src/components/frame.js b/packages/react-error-overlay/src/components/frame.js index 3b27406dd..43d0d4043 100644 --- a/packages/react-error-overlay/src/components/frame.js +++ b/packages/react-error-overlay/src/components/frame.js @@ -242,8 +242,8 @@ function createFrame( let needsHidden = false; const isInternalUrl = isInternalFile(sourceFileName, fileName); const isThrownIntentionally = !isBultinErrorName(errorName); - const shouldCollapse = isInternalUrl && - (isThrownIntentionally || omits.hasReachedAppCode); + const shouldCollapse = + isInternalUrl && (isThrownIntentionally || omits.hasReachedAppCode); if (!isInternalUrl) { omits.hasReachedAppCode = true; @@ -281,9 +281,8 @@ function createFrame( let onSourceClick = null; if (sourceFileName) { // e.g. "/path-to-my-app/webpack/bootstrap eaddeb46b67d75e4dfc1" - const isInternalWebpackBootstrapCode = sourceFileName - .trim() - .indexOf(' ') !== -1; + const isInternalWebpackBootstrapCode = + sourceFileName.trim().indexOf(' ') !== -1; if (!isInternalWebpackBootstrapCode) { onSourceClick = () => { // Keep this in sync with react-error-overlay/middleware.js @@ -312,7 +311,10 @@ function createFrame( let hasSource = false; if (!shouldCollapse) { if ( - compiled && scriptLines && scriptLines.length !== 0 && lineNumber != null + compiled && + scriptLines && + scriptLines.length !== 0 && + lineNumber != null ) { elem.appendChild( createCode( diff --git a/packages/react-error-overlay/src/components/overlay.js b/packages/react-error-overlay/src/components/overlay.js index 573db8def..69acf9ad4 100644 --- a/packages/react-error-overlay/src/components/overlay.js +++ b/packages/react-error-overlay/src/components/overlay.js @@ -60,9 +60,8 @@ function createOverlay( applyStyles(header, headerStyle); // Make message prettier - let finalMessage = message.match(/^\w*:/) || !name - ? message - : name + ': ' + message; + let finalMessage = + message.match(/^\w*:/) || !name ? message : name + ': ' + message; finalMessage = finalMessage // TODO: maybe remove this prefix from fbjs? diff --git a/packages/react-error-overlay/src/utils/isInternalFile.js b/packages/react-error-overlay/src/utils/isInternalFile.js index 71beea7cc..c78bbe3ed 100644 --- a/packages/react-error-overlay/src/utils/isInternalFile.js +++ b/packages/react-error-overlay/src/utils/isInternalFile.js @@ -9,13 +9,15 @@ /* @flow */ function isInternalFile(sourceFileName: ?string, fileName: ?string) { - return sourceFileName == null || + return ( + sourceFileName == null || sourceFileName === '' || sourceFileName.indexOf('/~/') !== -1 || sourceFileName.indexOf('/node_modules/') !== -1 || sourceFileName.trim().indexOf(' ') !== -1 || fileName == null || - fileName === ''; + fileName === '' + ); } export { isInternalFile }; diff --git a/packages/react-error-overlay/src/utils/unmapper.js b/packages/react-error-overlay/src/utils/unmapper.js index 74e389555..b01736d74 100644 --- a/packages/react-error-overlay/src/utils/unmapper.js +++ b/packages/react-error-overlay/src/utils/unmapper.js @@ -15,7 +15,8 @@ import path from 'path'; function count(search: string, string: string): number { // Count starts at -1 becuse a do-while loop always runs at least once - let count = -1, index = -1; + let count = -1, + index = -1; do { // First call or the while case evaluated true, meaning we have to make // count 0 or we found a character diff --git a/packages/react-scripts/config/env.js b/packages/react-scripts/config/env.js index e7d7f9f32..ebef79ed9 100644 --- a/packages/react-scripts/config/env.js +++ b/packages/react-scripts/config/env.js @@ -88,13 +88,10 @@ function getClientEnvironment(publicUrl) { ); // Stringify all values so we can feed into Webpack DefinePlugin const stringified = { - 'process.env': Object.keys(raw).reduce( - (env, key) => { - env[key] = JSON.stringify(raw[key]); - return env; - }, - {} - ), + 'process.env': Object.keys(raw).reduce((env, key) => { + env[key] = JSON.stringify(raw[key]); + return env; + }, {}), }; return { raw, stringified }; diff --git a/packages/react-scripts/config/paths.js b/packages/react-scripts/config/paths.js index c680d87b9..e860d9b04 100644 --- a/packages/react-scripts/config/paths.js +++ b/packages/react-scripts/config/paths.js @@ -43,8 +43,8 @@ const getPublicUrl = appPackageJson => // like /todos/42/static/js/bundle.7289d.js. We have to know the root. function getServedPath(appPackageJson) { const publicUrl = getPublicUrl(appPackageJson); - const servedUrl = envPublicUrl || - (publicUrl ? url.parse(publicUrl).pathname : '/'); + const servedUrl = + envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/'); return ensureSlash(servedUrl, true); } @@ -92,7 +92,8 @@ module.exports = { const ownPackageJson = require('../package.json'); const reactScriptsPath = resolveApp(`node_modules/${ownPackageJson.name}`); -const reactScriptsLinked = fs.existsSync(reactScriptsPath) && +const reactScriptsLinked = + fs.existsSync(reactScriptsPath) && fs.lstatSync(reactScriptsPath).isSymbolicLink(); // config before publish: we're in ./packages/react-scripts/config/ diff --git a/packages/react-scripts/config/webpackDevServer.config.js b/packages/react-scripts/config/webpackDevServer.config.js index cf7584e5b..2a351e668 100644 --- a/packages/react-scripts/config/webpackDevServer.config.js +++ b/packages/react-scripts/config/webpackDevServer.config.js @@ -36,8 +36,8 @@ module.exports = function(proxy, allowedHost) { // So we will disable the host check normally, but enable it if you have // specified the `proxy` setting. Finally, we let you override it if you // really know what you're doing with a special environment variable. - disableHostCheck: !proxy || - process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true', + disableHostCheck: + !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true', // Enable gzip compression of generated files. compress: true, // Silence WebpackDevServer's own logs since they're generally not useful. diff --git a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js index 89d19fcf4..a7d4ff2a2 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/env.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/env.test.js @@ -50,9 +50,10 @@ describe('Integration', () => { it('PUBLIC_URL', async () => { const doc = await initDOM('public-url'); - const prefix = process.env.NODE_ENV === 'development' - ? '' - : 'http://www.example.org/spa'; + const prefix = + process.env.NODE_ENV === 'development' + ? '' + : 'http://www.example.org/spa'; expect(doc.getElementById('feature-public-url').textContent).to.equal( `${prefix}.` ); diff --git a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js index 4d6f531ea..b865b5641 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/initDOM.js @@ -38,13 +38,14 @@ if (process.env.E2E_FILE) { ) ); } else if (process.env.E2E_URL) { - getMarkup = () => new Promise(resolve => { - http.get(process.env.E2E_URL, res => { - let rawData = ''; - res.on('data', chunk => rawData += chunk); - res.on('end', () => resolve(rawData)); + getMarkup = () => + new Promise(resolve => { + http.get(process.env.E2E_URL, res => { + let rawData = ''; + res.on('data', chunk => (rawData += chunk)); + res.on('end', () => resolve(rawData)); + }); }); - }); resourceLoader = (resource, callback) => resource.defaultFetch(callback); } else { @@ -58,21 +59,22 @@ if (process.env.E2E_FILE) { ); } -export default feature => new Promise(async resolve => { - const markup = await getMarkup(); - const host = process.env.E2E_URL || 'http://www.example.org/spa:3000'; - const doc = jsdom.jsdom(markup, { - features: { - FetchExternalResources: ['script', 'css'], - ProcessExternalResources: ['script'], - }, - created: (_, win) => - win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true), - deferClose: true, - resourceLoader, - url: `${host}#${feature}`, - virtualConsole: jsdom.createVirtualConsole().sendTo(console), - }); +export default feature => + new Promise(async resolve => { + const markup = await getMarkup(); + const host = process.env.E2E_URL || 'http://www.example.org/spa:3000'; + const doc = jsdom.jsdom(markup, { + features: { + FetchExternalResources: ['script', 'css'], + ProcessExternalResources: ['script'], + }, + created: (_, win) => + win.addEventListener('ReactFeatureDidMount', () => resolve(doc), true), + deferClose: true, + resourceLoader, + url: `${host}#${feature}`, + virtualConsole: jsdom.createVirtualConsole().sendTo(console), + }); - doc.close(); -}); + doc.close(); + }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/App.js b/packages/react-scripts/fixtures/kitchensink/src/App.js index 3a1981a40..cb342b062 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/App.js +++ b/packages/react-scripts/fixtures/kitchensink/src/App.js @@ -30,10 +30,7 @@ class BuiltEmitter extends Component { } render() { - const { - props: { feature }, - handleReady, - } = this; + const { props: { feature }, handleReady } = this; return ( <div> {createElement(feature, { @@ -57,114 +54,132 @@ class App extends Component { const feature = window.location.hash.slice(1); switch (feature) { case 'array-destructuring': - import( - './features/syntax/ArrayDestructuring' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/ArrayDestructuring').then(f => + this.setFeature(f.default) + ); break; case 'array-spread': import('./features/syntax/ArraySpread').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'async-await': import('./features/syntax/AsyncAwait').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'class-properties': import('./features/syntax/ClassProperties').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'computed-properties': - import( - './features/syntax/ComputedProperties' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/ComputedProperties').then(f => + this.setFeature(f.default) + ); break; case 'css-inclusion': import('./features/webpack/CssInclusion').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'custom-interpolation': - import( - './features/syntax/CustomInterpolation' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/CustomInterpolation').then(f => + this.setFeature(f.default) + ); break; case 'default-parameters': import('./features/syntax/DefaultParameters').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'destructuring-and-await': - import( - './features/syntax/DestructuringAndAwait' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/DestructuringAndAwait').then(f => + this.setFeature(f.default) + ); break; case 'file-env-variables': import('./features/env/FileEnvVariables').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'generators': import('./features/syntax/Generators').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'image-inclusion': import('./features/webpack/ImageInclusion').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'json-inclusion': import('./features/webpack/JsonInclusion').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'linked-modules': import('./features/webpack/LinkedModules').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'node-path': import('./features/env/NodePath').then(f => this.setFeature(f.default)); break; case 'no-ext-inclusion': import('./features/webpack/NoExtInclusion').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'object-destructuring': - import( - './features/syntax/ObjectDestructuring' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/ObjectDestructuring').then(f => + this.setFeature(f.default) + ); break; case 'object-spread': import('./features/syntax/ObjectSpread').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'promises': import('./features/syntax/Promises').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'public-url': import('./features/env/PublicUrl').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'rest-and-default': import('./features/syntax/RestAndDefault').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'rest-parameters': import('./features/syntax/RestParameters').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'shell-env-variables': import('./features/env/ShellEnvVariables').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'svg-inclusion': import('./features/webpack/SvgInclusion').then(f => - this.setFeature(f.default)); + this.setFeature(f.default) + ); break; case 'template-interpolation': - import( - './features/syntax/TemplateInterpolation' - ).then(f => this.setFeature(f.default)); + import('./features/syntax/TemplateInterpolation').then(f => + this.setFeature(f.default) + ); break; case 'unknown-ext-inclusion': - import( - './features/webpack/UnknownExtInclusion' - ).then(f => this.setFeature(f.default)); + import('./features/webpack/UnknownExtInclusion').then(f => + this.setFeature(f.default) + ); break; default: throw new Error(`Missing feature "${feature}"`); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js index 55ae368e4..03d638471 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/FileEnvVariables.js @@ -9,7 +9,7 @@ import React from 'react'; -export default () => ( +export default () => <span> <span id="feature-file-env-original-1"> {process.env.REACT_APP_ORIGINAL_1} @@ -18,8 +18,10 @@ export default () => ( {process.env.REACT_APP_ORIGINAL_2} </span> <span id="feature-file-env"> - {process.env.REACT_APP_DEVELOPMENT}{process.env.REACT_APP_PRODUCTION} + {process.env.REACT_APP_DEVELOPMENT} + {process.env.REACT_APP_PRODUCTION} </span> - <span id="feature-file-env-x">{process.env.REACT_APP_X}</span> - </span> -); + <span id="feature-file-env-x"> + {process.env.REACT_APP_X} + </span> + </span>; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js index a039cefed..6d2437a64 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/NodePath.js @@ -33,7 +33,11 @@ export default class extends Component { render() { return ( <div id="feature-node-path"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js index 4ea9b96f8..af87748e6 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/PublicUrl.js @@ -9,6 +9,7 @@ import React from 'react'; -export default () => ( - <span id="feature-public-url">{process.env.PUBLIC_URL}.</span> -); +export default () => + <span id="feature-public-url"> + {process.env.PUBLIC_URL}. + </span>; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js index 8449097d6..400dfc013 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/env/ShellEnvVariables.js @@ -9,8 +9,7 @@ import React from 'react'; -export default () => ( +export default () => <span id="feature-shell-env-variables"> {process.env.REACT_APP_SHELL_ENV_MESSAGE}. - </span> -); + </span>; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js index be6c39f90..de0576549 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArrayDestructuring.js @@ -38,7 +38,11 @@ export default class extends Component { <div id="feature-array-destructuring"> {this.state.users.map(user => { const [id, name] = user; - return <div key={id}>{name}</div>; + return ( + <div key={id}> + {name} + </div> + ); })} </div> ); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js index eb7886aa4..ebf90ef6e 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ArraySpread.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-array-spread"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js index a60633460..c91da311d 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/AsyncAwait.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-async-await"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js index ed96d4f8c..58ae10763 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ClassProperties.js @@ -29,7 +29,11 @@ export default class extends Component { render() { return ( <div id="feature-class-properties"> - {this.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js index 38dc797a8..fcbf721e8 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ComputedProperties.js @@ -41,9 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-computed-properties"> - {this.state.users.map(user => ( - <div key={user.id}>{user.user_name}</div> - ))} + {this.state.users.map(user => + <div key={user.id}> + {user.user_name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js index 1a0123391..ab648255a 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/CustomInterpolation.js @@ -53,9 +53,11 @@ export default class extends Component { return ( <div id="feature-custom-interpolation"> - {this.state.users.map(user => ( - <div key={user.id} style={veryInlineStyle}>{user.name}</div> - ))} + {this.state.users.map(user => + <div key={user.id} style={veryInlineStyle}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js index 0a519eba8..6ebabaec7 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DefaultParameters.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-default-parameters"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js index d44f4cf22..aa8c9d7db 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/DestructuringAndAwait.js @@ -43,7 +43,11 @@ export default class extends Component { render() { return ( <div id="feature-destructuring-and-await"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js index 2fe473d13..44b2776e1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Generators.js @@ -43,7 +43,11 @@ export default class extends Component { render() { return ( <div id="feature-generators"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js index 2994d14af..8a7b1095f 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectDestructuring.js @@ -43,7 +43,11 @@ export default class extends Component { <div id="feature-object-destructuring"> {this.state.users.map(user => { const { id, name } = user; - return <div key={id}>{name}</div>; + return ( + <div key={id}> + {name} + </div> + ); })} </div> ); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js index 65705f11b..5ff4e10ac 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/ObjectSpread.js @@ -41,9 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-object-spread"> - {this.state.users.map(user => ( - <div key={user.id}>{user.name}: {user.age}</div> - ))} + {this.state.users.map(user => + <div key={user.id}> + {user.name}: {user.age} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js index e626de5d8..31ef2c9eb 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/Promises.js @@ -42,7 +42,11 @@ export default class extends Component { render() { return ( <div id="feature-promises"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js index dc2a1563a..9e3e3fbab 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestAndDefault.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-rest-and-default"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js index e703a33cc..98a0e7edc 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/RestParameters.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-rest-parameters"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js index 5aba5da62..b69f7ede8 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/syntax/TemplateInterpolation.js @@ -41,7 +41,11 @@ export default class extends Component { render() { return ( <div id="feature-template-interpolation"> - {this.state.users.map(user => <div key={user.id}>{user.name}</div>)} + {this.state.users.map(user => + <div key={user.id}> + {user.name} + </div> + )} </div> ); } diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js index a6ca7aaa8..8598d8d06 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/ImageInclusion.js @@ -10,6 +10,5 @@ import React from 'react'; import tiniestCat from './assets/tiniest-cat.jpg'; -export default () => ( - <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" /> -); +export default () => + <img id="feature-image-inclusion" src={tiniestCat} alt="tiniest cat" />; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js index e81f76397..66425c66c 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/JsonInclusion.js @@ -10,4 +10,7 @@ import React from 'react'; import { abstract } from './assets/abstract.json'; -export default () => <summary id="feature-json-inclusion">{abstract}</summary>; +export default () => + <summary id="feature-json-inclusion"> + {abstract} + </summary>; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js index de8a5e4ab..395ebd7ed 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/LinkedModules.js @@ -16,5 +16,9 @@ export default () => { if (!test() || v !== '2.0.0') { throw new Error('Functionality test did not pass.'); } - return <p id="feature-linked-modules">{v}</p>; + return ( + <p id="feature-linked-modules"> + {v} + </p> + ); }; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js index 7f824c2f2..086885db2 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/NoExtInclusion.js @@ -14,6 +14,7 @@ const text = aFileWithoutExt.includes('base64') ? atob(aFileWithoutExt.split('base64,')[1]).trim() : aFileWithoutExt; -export default () => ( - <a id="feature-no-ext-inclusion" href={text}>aFileWithoutExt</a> -); +export default () => + <a id="feature-no-ext-inclusion" href={text}> + aFileWithoutExt + </a>; diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js index 70b046e95..c41a1e0c0 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/UnknownExtInclusion.js @@ -14,6 +14,7 @@ const text = aFileWithExtUnknown.includes('base64') ? atob(aFileWithExtUnknown.split('base64,')[1]).trim() : aFileWithExtUnknown; -export default () => ( - <a id="feature-unknown-ext-inclusion" href={text}>aFileWithExtUnknown</a> -); +export default () => + <a id="feature-unknown-ext-inclusion" href={text}> + aFileWithExtUnknown + </a>; diff --git a/packages/react-scripts/scripts/build.js b/packages/react-scripts/scripts/build.js index 06eb0695d..b9b65f531 100644 --- a/packages/react-scripts/scripts/build.js +++ b/packages/react-scripts/scripts/build.js @@ -35,7 +35,8 @@ const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); const printHostingInstructions = require('react-dev-utils/printHostingInstructions'); const FileSizeReporter = require('react-dev-utils/FileSizeReporter'); -const measureFileSizesBeforeBuild = FileSizeReporter.measureFileSizesBeforeBuild; +const measureFileSizesBeforeBuild = + FileSizeReporter.measureFileSizesBeforeBuild; const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild; const useYarn = fs.existsSync(paths.yarnLockFile); diff --git a/packages/react-scripts/scripts/eject.js b/packages/react-scripts/scripts/eject.js index 265511860..3d8d258cc 100644 --- a/packages/react-scripts/scripts/eject.js +++ b/packages/react-scripts/scripts/eject.js @@ -85,19 +85,16 @@ inquirer const folders = ['config', 'config/jest', 'scripts']; // Make shallow array of files paths - const files = folders.reduce( - (files, folder) => { - return files.concat( - fs - .readdirSync(path.join(ownPath, folder)) - // set full path - .map(file => path.join(ownPath, folder, file)) - // omit dirs from file list - .filter(file => fs.lstatSync(file).isFile()) - ); - }, - [] - ); + const files = folders.reduce((files, folder) => { + return files.concat( + fs + .readdirSync(path.join(ownPath, folder)) + // set full path + .map(file => path.join(ownPath, folder, file)) + // omit dirs from file list + .filter(file => fs.lstatSync(file).isFile()) + ); + }, []); // Ensure that the app folder is clean and we won't override any files folders.forEach(verifyAbsent); @@ -124,18 +121,19 @@ inquirer if (content.match(/\/\/ @remove-file-on-eject/)) { return; } - content = content - // Remove dead code from .js files on eject - .replace( - /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/mg, - '' - ) - // Remove dead code from .applescript files on eject - .replace( - /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/mg, - '' - ) - .trim() + '\n'; + content = + content + // Remove dead code from .js files on eject + .replace( + /\/\/ @remove-on-eject-begin([\s\S]*?)\/\/ @remove-on-eject-end/gm, + '' + ) + // Remove dead code from .applescript files on eject + .replace( + /-- @remove-on-eject-begin([\s\S]*?)-- @remove-on-eject-end/gm, + '' + ) + .trim() + '\n'; console.log(` Adding ${cyan(file.replace(ownPath, ''))} to the project`); fs.writeFileSync(file.replace(ownPath, appPath), content); }); @@ -187,7 +185,9 @@ inquirer 'node scripts/$1.js' ); console.log( - ` Replacing ${cyan(`"${binKey} ${key}"`)} with ${cyan(`"node scripts/${key}.js"`)}` + ` Replacing ${cyan(`"${binKey} ${key}"`)} with ${cyan( + `"node scripts/${key}.js"` + )}` ); }); }); diff --git a/packages/react-scripts/scripts/init.js b/packages/react-scripts/scripts/init.js index 64efdf529..d7fc56652 100644 --- a/packages/react-scripts/scripts/init.js +++ b/packages/react-scripts/scripts/init.js @@ -28,11 +28,8 @@ module.exports = function( originalDirectory, template ) { - const ownPackageName = require(path.join( - __dirname, - '..', - 'package.json' - )).name; + const ownPackageName = require(path.join(__dirname, '..', 'package.json')) + .name; const ownPath = path.join(appPath, 'node_modules', ownPackageName); const appPackage = require(path.join(appPath, 'package.json')); const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock')); @@ -211,6 +208,8 @@ module.exports = function( function isReactInstalled(appPackage) { const dependencies = appPackage.dependencies || {}; - return typeof dependencies.react !== 'undefined' && - typeof dependencies['react-dom'] !== 'undefined'; + return ( + typeof dependencies.react !== 'undefined' && + typeof dependencies['react-dom'] !== 'undefined' + ); } From 45cb6fdbed7b92078f93ea54063d4b1cae2de529 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 17:29:48 +0100 Subject: [PATCH 79/98] Changelog for 1.0.8 (#2664) * Add changelog for 1.0.8 * Update CHANGELOG.md * Update CHANGELOG.md * Update CHANGELOG.md --- CHANGELOG.md | 173 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9049c88fe..2e007f36c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,176 @@ +## 1.0.8 (June 28, 2017) + +#### :bug: Bug Fix +* `react-scripts` + + * [#2550](https://github.com/facebookincubator/create-react-app/pull/2550) Fix Node 8 compatibility. ([@josephfrazier](https://github.com/josephfrazier)) + * [#2610](https://github.com/facebookincubator/create-react-app/pull/2610) Fix sourcemap directory organization on Windows. ([@plusCubed](https://github.com/plusCubed)) + * [#2596](https://github.com/facebookincubator/create-react-app/pull/2596) Fix an issue with minifying emojis. ([@viankakrisna](https://github.com/viankakrisna)) + * [#2501](https://github.com/facebookincubator/create-react-app/pull/2501) Fix incorrect check if `CI` variable is set to true. ([@varnav](https://github.com/varnav)) + * [#2432](https://github.com/facebookincubator/create-react-app/pull/2432) In new projects, don't register service worker for projects using `PUBLIC_URL` for CDN. ([@jeffposnick](https://github.com/jeffposnick)) + * [#2470](https://github.com/facebookincubator/create-react-app/pull/2470) In new projects, prioritize `index.css` over `App.css`. ([@bryankang](https://github.com/bryankang)) + +* `react-dev-utils` + + * [#2405](https://github.com/facebookincubator/create-react-app/pull/2405) Fix detection of parent directory in `ModuleScopePlugin`. ([@diligiant](https://github.com/diligiant)) + * [#2562](https://github.com/facebookincubator/create-react-app/pull/2562) Fix eject command output. ([@paweljedrzejczyk](https://github.com/paweljedrzejczyk)) + +#### :nail_care: Enhancement + +* `react-scripts` + + * [#2648](https://github.com/facebookincubator/create-react-app/pull/2648) Warn about large bundle sizes. ([@gaearon](https://github.com/gaearon)) + * [#2511](https://github.com/facebookincubator/create-react-app/pull/2511) Support `.web.js` extension for React Native Web. ([@mini-eggs](https://github.com/mini-eggs)) + * [#2645](https://github.com/facebookincubator/create-react-app/pull/2645) Hide confusing "Skipping static resource" message. ([@gaearon](https://github.com/gaearon)) + * [#2389](https://github.com/facebookincubator/create-react-app/pull/2389) Silence unnecessary warning from Babel. ([@gaearon](https://github.com/gaearon)) + * [#2429](https://github.com/facebookincubator/create-react-app/pull/2429) Update `sw-precache-webpack-plugin` to lastest version. ([@goldhand](https://github.com/goldhand)) + * [#2600](https://github.com/facebookincubator/create-react-app/pull/2600) Add empty mock for `dgram` Node module. ([@micopiira](https://github.com/micopiira)) + * [#2458](https://github.com/facebookincubator/create-react-app/pull/2458) Add names to module factories in development. ([@Zaccc123](https://github.com/Zaccc123)) + * [#2551](https://github.com/facebookincubator/create-react-app/pull/2551) In new projects, unregister service worker and force reload if `service-worker.js` is not found. ([@ro-savage](https://github.com/ro-savage)) + +* `babel-preset-react-app`, `react-dev-utils`, `react-scripts` + + * [#2658](https://github.com/facebookincubator/create-react-app/pull/2658) Bump dependencies. ([@gaearon](https://github.com/gaearon)) + +* `create-react-app`, `react-scripts` + + * [#2657](https://github.com/facebookincubator/create-react-app/pull/2657) Put `react-scripts` in `dependencies`, not `devDependencies`. ([@gaearon](https://github.com/gaearon)) + * [#2635](https://github.com/facebookincubator/create-react-app/pull/2635) Silence unhelpful npm warnings. ([@gaearon](https://github.com/gaearon)) + +* `react-dev-utils` + + * [#2637](https://github.com/facebookincubator/create-react-app/pull/2637) Auto-detect Brackets editor from error overlay. ([@petetnt](https://github.com/petetnt)) + * [#2552](https://github.com/facebookincubator/create-react-app/pull/2552) Auto-detect running editor on Windows for error overlay. ([@levrik](https://github.com/levrik)) + * [#2622](https://github.com/facebookincubator/create-react-app/pull/2622) Support opening PhpStorm for error overlay. ([@miraage](https://github.com/miraage)) + * [#2414](https://github.com/facebookincubator/create-react-app/pull/2414) Support opening WebStorm 2017+ from error overlay. ([@wirmar](https://github.com/wirmar)) + * [#2518](https://github.com/facebookincubator/create-react-app/pull/2518) Warn when trying to run on port below 1024 without admin permissions under Linux/macOS. ([@levrik](https://github.com/levrik)) + * [#2385](https://github.com/facebookincubator/create-react-app/pull/2385) Suggest just `yarn build` in output. ([@gaearon](https://github.com/gaearon)) + +* `create-react-app` + + * [#1945](https://github.com/facebookincubator/create-react-app/pull/1945) Fix grammar in CLI output. ([@ColinEberhardt](https://github.com/ColinEberhardt)) + +#### :memo: Documentation + +* User Guide + + * [#2662](https://github.com/facebookincubator/create-react-app/pull/2662) Local testing docker links. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + * [#2660](https://github.com/facebookincubator/create-react-app/pull/2660) Minor code style edits to user guide. ([@gaearon](https://github.com/gaearon)) + * [#2656](https://github.com/facebookincubator/create-react-app/pull/2656) Don't ask to install webpack for using Styleguidist. ([@gaearon](https://github.com/gaearon)) + * [#1641](https://github.com/facebookincubator/create-react-app/pull/1641) Add instructions to use `source-map-explorer`. ([@gr33nfury](https://github.com/gr33nfury)) + * [#2044](https://github.com/facebookincubator/create-react-app/pull/2044) Add React Styleguidist. ([@sapegin](https://github.com/sapegin)) + * [#2006](https://github.com/facebookincubator/create-react-app/pull/2006) Added instruction on how to install Prettier. ([@MrHus](https://github.com/MrHus)) + * [#1813](https://github.com/facebookincubator/create-react-app/pull/1813) Fix grammar. ([@iheng](https://github.com/iheng)) + * [#2060](https://github.com/facebookincubator/create-react-app/pull/2060) Add more info about OOM build failiure [docs]. ([@GAumala](https://github.com/GAumala)) + * [#2305](https://github.com/facebookincubator/create-react-app/pull/2305) Update docs with WebSocket proxy information. ([@jamesblight](https://github.com/jamesblight)) + * [#2445](https://github.com/facebookincubator/create-react-app/pull/2445) Document `REACT_EDITOR` environment variable. ([@wirmar](https://github.com/wirmar)) + * [#2362](https://github.com/facebookincubator/create-react-app/pull/2362) Add yarn example under "Installing a Dependency". ([@BrianDGLS](https://github.com/BrianDGLS)) + * [#2423](https://github.com/facebookincubator/create-react-app/pull/2423) Add docs for setting up CircleCI for CRA. ([@knowbody](https://github.com/knowbody)) + * [#2427](https://github.com/facebookincubator/create-react-app/pull/2427) Added link to tutorial on code splitting. ([@jayair](https://github.com/jayair)) + * [#2447](https://github.com/facebookincubator/create-react-app/pull/2447) Fix wrong comment on Proxy guide. ([@hellowin](https://github.com/hellowin)) + * [#2538](https://github.com/facebookincubator/create-react-app/pull/2538) Fix broken link to a tutorial. ([@romanyanke](https://github.com/romanyanke)) + * [#2522](https://github.com/facebookincubator/create-react-app/pull/2522) Flow init to run as command not flag. ([@khanglu](https://github.com/khanglu)) + * [#2521](https://github.com/facebookincubator/create-react-app/pull/2521) Fix broken link to Storybook docs. ([@shilman](https://github.com/shilman)) + * [#2500](https://github.com/facebookincubator/create-react-app/pull/2500) Fix minor typo. ([@AlexxNica](https://github.com/AlexxNica)) + * [#2331](https://github.com/facebookincubator/create-react-app/pull/2331) Re-add storybook && update the documentation and links. ([@ndelangen](https://github.com/ndelangen)) + * [#2454](https://github.com/facebookincubator/create-react-app/pull/2454) Update Travis CI Node versions in User Guide. ([@ryansully](https://github.com/ryansully)) + * [#2420](https://github.com/facebookincubator/create-react-app/pull/2420) Fix typo. ([@ruskakimov](https://github.com/ruskakimov)) + * [#2392](https://github.com/facebookincubator/create-react-app/pull/2392) Update `jest-enzyme` section. ([@luftywiranda13](https://github.com/luftywiranda13)) + +* README + + * [#2517](https://github.com/facebookincubator/create-react-app/pull/2517) Add Razzle to the alternatives. ([@kireerik](https://github.com/kireerik)) + * [#1931](https://github.com/facebookincubator/create-react-app/pull/1931) Updated README. ([@shaunwallace](https://github.com/shaunwallace)) + * [#2492](https://github.com/facebookincubator/create-react-app/pull/2492) Update webpack links to point to webpack 2. ([@laruiss](https://github.com/laruiss)) + +#### :house: Internal + +* Other + + * [#2465](https://github.com/facebookincubator/create-react-app/pull/2465) Update Prettier to v1. ([@ianschmitz](https://github.com/ianschmitz)) + * [#2489](https://github.com/facebookincubator/create-react-app/pull/2489) chore(templates): Move GitHub templates to hidden .github folder. ([@glennreyes](https://github.com/glennreyes)) + * [#2400](https://github.com/facebookincubator/create-react-app/pull/2400) Added cache clear to e2e scripts. ([@ro-savage](https://github.com/ro-savage)) + * [#2397](https://github.com/facebookincubator/create-react-app/pull/2397) Fix command in e2e-kitchensink.sh cleanup. ([@ro-savage](https://github.com/ro-savage)) + * [#2388](https://github.com/facebookincubator/create-react-app/pull/2388) Fix wrong path expansion in end-to-end test. ([@gaearon](https://github.com/gaearon)) + * [#2387](https://github.com/facebookincubator/create-react-app/pull/2387) Catch "No tests found" during CI. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + +* `react-scripts` + + * [#2408](https://github.com/facebookincubator/create-react-app/pull/2408) E2E testing enhancements. ([@EnoahNetzach](https://github.com/EnoahNetzach)) + * [#2430](https://github.com/facebookincubator/create-react-app/pull/2430) Remove an unnecessary webpack option. ([@andykenward](https://github.com/andykenward)) + +* `react-dev-utils` + + * [#2483](https://github.com/facebookincubator/create-react-app/pull/2483) Remove a scoped package dependency. ([@Timer](https://github.com/Timer)) + +#### Committers: 46 +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- Alexandre Nicastro ([AlexxNica](https://github.com/AlexxNica)) +- Andi N. Dirgantara ([hellowin](https://github.com/hellowin)) +- Andy Kenward ([andykenward](https://github.com/andykenward)) +- Artem Sapegin ([sapegin](https://github.com/sapegin)) +- Ashton ([ashtonsix](https://github.com/ashtonsix)) +- Brian Douglas ([BrianDGLS](https://github.com/BrianDGLS)) +- Colin Eberhardt ([ColinEberhardt](https://github.com/ColinEberhardt)) +- Colin Galindo ([gr33nfury](https://github.com/gr33nfury)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Daniel Ciao ([plusCubed](https://github.com/plusCubed)) +- Erik Engi ([kireerik](https://github.com/kireerik)) +- Evan Jones ([mini-eggs](https://github.com/mini-eggs)) +- Fabrizio Castellarin ([EnoahNetzach](https://github.com/EnoahNetzach)) +- Frédéric Miserey ([diligiant](https://github.com/diligiant)) +- Gabriel Aumala ([GAumala](https://github.com/GAumala)) +- Glenn Reyes ([glennreyes](https://github.com/glennreyes)) +- Heng Li ([iheng](https://github.com/iheng)) +- Ian Schmitz ([ianschmitz](https://github.com/ianschmitz)) +- James Blight ([jamesblight](https://github.com/jamesblight)) +- Jay V ([jayair](https://github.com/jayair)) +- Jeffrey Posnick ([jeffposnick](https://github.com/jeffposnick)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Joseph Frazier ([josephfrazier](https://github.com/josephfrazier)) +- Khang Lu ([khanglu](https://github.com/khanglu)) +- Levin Rickert ([levrik](https://github.com/levrik)) +- Lufty Wiranda ([luftywiranda13](https://github.com/luftywiranda13)) +- Maarten Hus ([MrHus](https://github.com/MrHus)) +- Marius Wirtherle ([wirmar](https://github.com/wirmar)) +- Mateusz Zatorski ([knowbody](https://github.com/knowbody)) +- Michael Shilman ([shilman](https://github.com/shilman)) +- Mico Piira ([micopiira](https://github.com/micopiira)) +- Mikhail Osher ([miraage](https://github.com/miraage)) +- Norbert de Langen ([ndelangen](https://github.com/ndelangen)) +- Paweł Jędrzejczyk ([paweljedrzejczyk](https://github.com/paweljedrzejczyk)) +- Pete Nykänen ([petetnt](https://github.com/petetnt)) +- Ro Savage ([ro-savage](https://github.com/ro-savage)) +- Roman ([romanyanke](https://github.com/romanyanke)) +- Rustem Kakimov ([ruskakimov](https://github.com/ruskakimov)) +- Ryan Sullivan ([ryansully](https://github.com/ryansully)) +- Stanislas Ormières ([laruiss](https://github.com/laruiss)) +- Will Farley ([goldhand](https://github.com/goldhand)) +- Zac Kwan ([Zaccc123](https://github.com/Zaccc123)) +- [bryankang](https://github.com/bryankang) +- [varnav](https://github.com/varnav) +- shaun wallace ([shaunwallace](https://github.com/shaunwallace)) + +### Migrating from 1.0.7 to 1.0.8 + +Inside any created project that has not been ejected, run: + +``` +npm install --save-dev --save-exact react-scripts@1.0.8 +``` + +or + +``` +yarn add --dev --exact react-scripts@1.0.8 +``` + +You may optionally then move `react-scripts` from `devDependencies` to `dependencies` since that’s how we’ll structure newly created projects. It is not necessary though. + +If you left the service worker integration enabled and didn’t change how it works, you can replace `src/registerServiceWorker.js` with [this updated version](https://raw.githubusercontent.com/facebookincubator/create-react-app/895c475d3fc218c65dcac9a3ef3f2c0ea746a1ed/packages/react-scripts/template/src/registerServiceWorker.js). + +If you haven't changed the default CSS organization, you may want to apply [this fix](https://github.com/facebookincubator/create-react-app/pull/2470/files) that makes `index.css` take precedence over `App.css` in your project. + ## 1.0.7 (May 27, 2017) #### :bug: Bug Fix From 8d156edec6a7179a64d09d71529eaeb24915cdf3 Mon Sep 17 00:00:00 2001 From: Dan Abramov <gaearon@fb.com> Date: Wed, 28 Jun 2017 17:30:24 +0100 Subject: [PATCH 80/98] Publish - babel-preset-react-app@3.0.1 - create-react-app@1.3.2 - eslint-config-react-app@1.0.5 - react-dev-utils@3.0.1 - react-error-overlay@1.0.8 - react-scripts@1.0.8 --- packages/babel-preset-react-app/package.json | 2 +- packages/create-react-app/package.json | 2 +- packages/eslint-config-react-app/package.json | 2 +- packages/react-dev-utils/package.json | 2 +- packages/react-error-overlay/package.json | 8 ++++---- packages/react-scripts/package.json | 13 +++++++------ 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/packages/babel-preset-react-app/package.json b/packages/babel-preset-react-app/package.json index f56a804ea..d10188fda 100644 --- a/packages/babel-preset-react-app/package.json +++ b/packages/babel-preset-react-app/package.json @@ -1,6 +1,6 @@ { "name": "babel-preset-react-app", - "version": "3.0.0", + "version": "3.0.1", "description": "Babel preset used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/create-react-app/package.json b/packages/create-react-app/package.json index 13a567fa7..613007b40 100644 --- a/packages/create-react-app/package.json +++ b/packages/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "create-react-app", - "version": "1.3.1", + "version": "1.3.2", "keywords": [ "react" ], diff --git a/packages/eslint-config-react-app/package.json b/packages/eslint-config-react-app/package.json index 87b63c5b6..cd36a70e5 100644 --- a/packages/eslint-config-react-app/package.json +++ b/packages/eslint-config-react-app/package.json @@ -1,6 +1,6 @@ { "name": "eslint-config-react-app", - "version": "1.0.4", + "version": "1.0.5", "description": "ESLint configuration used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 75b39399e..4b01b465d 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -1,6 +1,6 @@ { "name": "react-dev-utils", - "version": "3.0.0", + "version": "3.0.1", "description": "Webpack utilities used by Create React App", "repository": "facebookincubator/create-react-app", "license": "BSD-3-Clause", diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index 88c909e11..f29aedd0f 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -1,6 +1,6 @@ { "name": "react-error-overlay", - "version": "1.0.7", + "version": "1.0.8", "description": "An overlay for displaying stack frames.", "main": "lib/index.js", "scripts": { @@ -34,17 +34,17 @@ "anser": "1.2.5", "babel-code-frame": "6.22.0", "babel-runtime": "6.23.0", - "react-dev-utils": "^3.0.0", + "react-dev-utils": "^3.0.1", "settle-promise": "1.0.0", "source-map": "0.5.6" }, "devDependencies": { "babel-cli": "6.24.1", "babel-eslint": "7.2.3", - "babel-preset-react-app": "^3.0.0", + "babel-preset-react-app": "^3.0.1", "cross-env": "5.0.0", "eslint": "3.19.0", - "eslint-config-react-app": "^1.0.4", + "eslint-config-react-app": "^1.0.5", "eslint-plugin-flowtype": "2.33.0", "eslint-plugin-import": "2.2.0", "eslint-plugin-jsx-a11y": "5.0.3", diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index fe07c277e..b541163cb 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -23,14 +23,15 @@ }, "dependencies": { "autoprefixer": "7.1.0", + "autoprefixer": "7.1.1", "app-root-path": "^2.0.1", - "case-sensitive-paths-webpack-plugin": "2.0.0", + "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", "cli-highlight": "1.1.4", "css-loader": "0.28.1", "dotenv": "4.0.0", - "extract-text-webpack-plugin": "2.1.0", - "file-loader": "0.11.1", + "extract-text-webpack-plugin": "2.1.2", + "file-loader": "0.11.2", "fs-extra": "3.0.1", "html-webpack-plugin": "2.28.0", "jest": "20.0.3", @@ -38,9 +39,9 @@ "postcss-flexbugs-fixes": "3.0.0", "postcss-loader": "2.0.5", "promise": "7.1.1", - "react-dev-utils": "^3.0.0", - "react-error-overlay": "^1.0.7", - "style-loader": "0.17.0", + "react-dev-utils": "^3.0.1", + "react-error-overlay": "^1.0.8", + "style-loader": "0.18.2", "ts-jest": "^20.0.7", "ts-loader": "^2.2.1", "tslint": "^5.2.0", From 6bf95f28bd66133bf82a6ea61423e55d477d5b36 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Wed, 28 Jun 2017 18:19:19 +0100 Subject: [PATCH 81/98] Add a note about fixed vulnerability in 1.0.8 --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2e007f36c..2a5ef6906 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -165,6 +165,8 @@ or yarn add --dev --exact react-scripts@1.0.8 ``` +**If you previously used `HTTPS=true` environment variable in development**, make sure you aren't affected by a now-fixed vulnerability in Webpack by [visiting this page](http://badcert.mike.works/). You can read more about the vulnerability [here](https://medium.com/@mikenorth/webpack-preact-cli-vulnerability-961572624c54). + You may optionally then move `react-scripts` from `devDependencies` to `dependencies` since that’s how we’ll structure newly created projects. It is not necessary though. If you left the service worker integration enabled and didn’t change how it works, you can replace `src/registerServiceWorker.js` with [this updated version](https://raw.githubusercontent.com/facebookincubator/create-react-app/895c475d3fc218c65dcac9a3ef3f2c0ea746a1ed/packages/react-scripts/template/src/registerServiceWorker.js). From 22a950376c84e558f33cde30fd1cc2ea455f0140 Mon Sep 17 00:00:00 2001 From: Jaco Bovenschen <jaco1994bovenschen@gmail.com> Date: Wed, 28 Jun 2017 21:35:20 +0200 Subject: [PATCH 82/98] Add json and css to lint-staged in template README (#2671) * Add json and css to lint-staged in template README This changes the proposed way about using prettier inside the README.md, because prettier supports css since the 1.4.0 release and json since the 1.5.0 release. Was not sure if it was a good idea to add different regexes for json and css inside the README.md don't have a real opinion about it myself, could maybe easier for starters to do so if they wan't to add things like eslint or stylelint the the commit hooks. * Use capitalization for Javascript, CSS and JSON * Change 'Javascript to JavaScript' --- packages/react-scripts/template/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index aa2ab4340..e23305bd3 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -271,7 +271,7 @@ Start your app by running `npm start`, and start debugging in VS Code by pressin ## Formatting Code Automatically -Prettier is an opinionated JavaScript formatter. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). +Prettier is an opinionated code formatter with support for JavaScript, CSS and JSON. With Prettier you can format the code you write automatically to ensure a code style within your project. See the [Prettier's GitHub page](https://github.com/prettier/prettier) for more information, and look at this [page to see it in action](https://prettier.github.io/prettier/). To format our code whenever we make a commit in git, we need to install the following dependencies: @@ -307,7 +307,7 @@ Next we add a 'lint-staged' field to the `package.json`, for example: // ... }, + "lint-staged": { -+ "src/**/*.{js,jsx}": [ ++ "src/**/*.{js,jsx,json,css}": [ + "prettier --single-quote --write", + "git add" + ] @@ -2094,7 +2094,7 @@ There are also reports that *uninstalling* Watchman fixes the issue. So if nothi ### `npm run build` exits too early -It is reported that `npm run build` can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message: +It is reported that `npm run build` can fail on machines with limited memory and no swap space, which is common in cloud environments. Even with small projects this command can increase RAM usage in your system by hundreds of megabytes, so if you have less than 1 GB of available memory your build is likely to fail with the following message: > The build failed because the process exited too early. This probably means the system ran out of memory or someone called `kill -9` on the process. From 3ad87f711ad64fe3d5d292fd3f0e4cdb6aab5bbf Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 29 Jun 2017 00:09:13 +0100 Subject: [PATCH 83/98] Test Node 8 on Travis (#2659) * Test Node 8 on Travis We still test Node 7 on AppVeyor * Update e2e-installs.sh * Update e2e-kitchensink.sh * Update e2e-simple.sh * Update e2e-installs.sh * Update e2e-kitchensink.sh * Update e2e-installs.sh * Update e2e-simple.sh * Update e2e-simple.sh * Update e2e-kitchensink.sh * Update e2e-installs.sh --- .travis.yml | 2 +- tasks/e2e-installs.sh | 6 +++++- tasks/e2e-kitchensink.sh | 6 +++++- tasks/e2e-simple.sh | 6 +++++- 4 files changed, 16 insertions(+), 4 deletions(-) diff --git a/.travis.yml b/.travis.yml index 6b973ae44..0bee9a16b 100644 --- a/.travis.yml +++ b/.travis.yml @@ -2,7 +2,7 @@ language: node_js node_js: - 6 - - 7 + - 8 cache: directories: - node_modules diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 7ea70fac6..073fc8df6 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -95,7 +95,11 @@ fi if hash npm 2>/dev/null then - npm cache clean + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; + npm cache clean || npm cache verify fi # Prevent lerna bootstrap, we only want top-level dependencies diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index fcd687e4b..7f97fdc44 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -87,7 +87,11 @@ fi if hash npm 2>/dev/null then - npm cache clean + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; + npm cache clean || npm cache verify fi # Prevent lerna bootstrap, we only want top-level dependencies diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index d110297b2..20d318160 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -86,7 +86,11 @@ fi if hash npm 2>/dev/null then - npm cache clean + # npm 5 is too buggy right now + if [ $(npm -v | head -c 1) -eq 5 ]; then + npm i -g npm@^4.x + fi; + npm cache clean || npm cache verify fi # Prevent lerna bootstrap, we only want top-level dependencies From 6cafdfc37585614990a11bef3584a7f1b38fddfe Mon Sep 17 00:00:00 2001 From: Ade Viankakrisna Fadlil <viankakrisna@gmail.com> Date: Thu, 29 Jun 2017 11:14:16 +0700 Subject: [PATCH 84/98] Add more info about apache client side routing (#2666) * Add more info about apache client side routing After a revelation in https://github.com/facebookincubator/create-react-app/issues/2593#issuecomment-311729534 * Update README.md --- packages/react-scripts/template/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index e23305bd3..1ad816245 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1751,7 +1751,7 @@ This is because when there is a fresh page load for a `/todos/42`, the server lo }); ``` -If you’re using [Apache](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this: +If you’re using [Apache HTTP Server](https://httpd.apache.org/), you need to create a `.htaccess` file in the `public` folder that looks like this: ``` Options -MultiViews @@ -1760,7 +1760,9 @@ If you’re using [Apache](https://httpd.apache.org/), you need to create a `.ht RewriteRule ^ index.html [QSA,L] ``` -It will get copied to the `build` folder when you run `npm run build`. +It will get copied to the `build` folder when you run `npm run build`. + +If you’re using [Apache Tomcat](http://tomcat.apache.org/), you need to follow [this Stack Overflow answer](https://stackoverflow.com/a/41249464/4878474). Now requests to `/todos/42` will be handled correctly both in development and in production. From 03a52d4b1d32515f050d15771f7a47dff32fc160 Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 29 Jun 2017 00:45:45 -0400 Subject: [PATCH 85/98] Bootstrap with Yarn when available (#2673) * Bootstrap with Yarn if we can * Update test scripts * Check OS and npm concurrency ability * Windows support * Update bootstrap.js * Install yarn before bootstrap --- bootstrap.js | 67 ++++++++++++++++++++++++++++++++++++++++ lerna.json | 2 +- package.json | 2 +- tasks/e2e-installs.sh | 8 ++--- tasks/e2e-kitchensink.sh | 8 ++--- tasks/e2e-simple.sh | 12 +++---- 6 files changed, 83 insertions(+), 16 deletions(-) create mode 100644 bootstrap.js diff --git a/bootstrap.js b/bootstrap.js new file mode 100644 index 000000000..b54a1ed9f --- /dev/null +++ b/bootstrap.js @@ -0,0 +1,67 @@ +'use strict'; + +const { execSync, spawn } = require('child_process'); +const { resolve } = require('path'); +const { existsSync } = require('fs'); +const { platform } = require('os'); + +function shouldUseYarn() { + try { + execSync('yarnpkg --version', { stdio: 'ignore' }); + return true; + } catch (e) { + return false; + } +} + +function shouldUseNpmConcurrently() { + try { + const versionString = execSync('npm --version'); + const m = /^(\d+)[.]/.exec(versionString); + // NPM >= 5 support concurrent installs + return Number(m[1]) >= 5; + } catch (e) { + return false; + } +} + +const yarn = shouldUseYarn(); +const windows = platform() === 'win32'; +const lerna = resolve( + __dirname, + 'node_modules', + '.bin', + windows ? 'lerna.cmd' : 'lerna' +); + +if (!existsSync(lerna)) { + if (yarn) { + console.log('Cannot find lerna. Please run `yarn --check-files`.'); + } else { + console.log( + 'Cannot find lerna. Please remove `node_modules` and run `npm install`.' + ); + } + process.exit(1); +} + +let child; +if (yarn) { + // Yarn does not support concurrency + child = spawn(lerna, ['bootstrap', '--npm-client=yarn', '--concurrency=1'], { + stdio: 'inherit', + }); +} else { + let args = ['bootstrap']; + if ( + // The Windows filesystem does not handle concurrency well + windows || + // Only newer npm versions support concurrency + !shouldUseNpmConcurrently() + ) { + args.push('--concurrency=1'); + } + child = spawn(lerna, args, { stdio: 'inherit' }); +} + +child.on('close', code => process.exit(code)); diff --git a/lerna.json b/lerna.json index e2429777d..7ca916a85 100644 --- a/lerna.json +++ b/lerna.json @@ -1,5 +1,5 @@ { - "lerna": "2.0.0-beta.38", + "lerna": "2.0.0-rc.5", "version": "independent", "changelog": { "repo": "facebookincubator/create-react-app", diff --git a/package.json b/package.json index d9aa663f3..ab4de27c6 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "create-react-app": "tasks/cra.sh", "e2e": "tasks/e2e-simple.sh", "e2e:docker": "tasks/local-test.sh", - "postinstall": "lerna bootstrap && cd packages/react-error-overlay/ && npm run build:prod", + "postinstall": "node bootstrap.js && cd packages/react-error-overlay/ && npm run build:prod", "publish": "tasks/release.sh", "start": "node packages/react-scripts/scripts/start.js", "test": "node packages/react-scripts/scripts/test.js --env=jsdom", diff --git a/tasks/e2e-installs.sh b/tasks/e2e-installs.sh index 073fc8df6..588642632 100755 --- a/tasks/e2e-installs.sh +++ b/tasks/e2e-installs.sh @@ -80,7 +80,7 @@ then # AppVeyor uses an old version of yarn. # Once updated to 0.24.3 or above, the workaround can be removed # and replaced with `yarnpkg cache clean` - # Issues: + # Issues: # https://github.com/yarnpkg/yarn/issues/2591 # https://github.com/appveyor/ci/issues/1576 # https://github.com/facebookincubator/create-react-app/pull/2400 @@ -102,9 +102,9 @@ then npm cache clean || npm cache verify fi -# Prevent lerna bootstrap, we only want top-level dependencies +# Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak -grep -v "lerna bootstrap" package.json > temp && mv temp package.json +grep -v "postinstall" package.json > temp && mv temp package.json npm install mv package.json.bak package.json @@ -116,7 +116,7 @@ then fi # We removed the postinstall, so do it manually -./node_modules/.bin/lerna bootstrap --concurrency=1 +node bootstrap.js cd packages/react-error-overlay/ npm run build:prod diff --git a/tasks/e2e-kitchensink.sh b/tasks/e2e-kitchensink.sh index 7f97fdc44..ebbac271e 100755 --- a/tasks/e2e-kitchensink.sh +++ b/tasks/e2e-kitchensink.sh @@ -72,7 +72,7 @@ then # AppVeyor uses an old version of yarn. # Once updated to 0.24.3 or above, the workaround can be removed # and replaced with `yarnpkg cache clean` - # Issues: + # Issues: # https://github.com/yarnpkg/yarn/issues/2591 # https://github.com/appveyor/ci/issues/1576 # https://github.com/facebookincubator/create-react-app/pull/2400 @@ -94,9 +94,9 @@ then npm cache clean || npm cache verify fi -# Prevent lerna bootstrap, we only want top-level dependencies +# Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak -grep -v "lerna bootstrap" package.json > temp && mv temp package.json +grep -v "postinstall" package.json > temp && mv temp package.json npm install mv package.json.bak package.json @@ -108,7 +108,7 @@ then fi # We removed the postinstall, so do it manually -./node_modules/.bin/lerna bootstrap --concurrency=1 +node bootstrap.js cd packages/react-error-overlay/ npm run build:prod diff --git a/tasks/e2e-simple.sh b/tasks/e2e-simple.sh index 20d318160..2918fc0f5 100755 --- a/tasks/e2e-simple.sh +++ b/tasks/e2e-simple.sh @@ -71,7 +71,7 @@ then # AppVeyor uses an old version of yarn. # Once updated to 0.24.3 or above, the workaround can be removed # and replaced with `yarnpkg cache clean` - # Issues: + # Issues: # https://github.com/yarnpkg/yarn/issues/2591 # https://github.com/appveyor/ci/issues/1576 # https://github.com/facebookincubator/create-react-app/pull/2400 @@ -93,9 +93,9 @@ then npm cache clean || npm cache verify fi -# Prevent lerna bootstrap, we only want top-level dependencies +# Prevent bootstrap, we only want top-level dependencies cp package.json package.json.bak -grep -v "lerna bootstrap" package.json > temp && mv temp package.json +grep -v "postinstall" package.json > temp && mv temp package.json npm install mv package.json.bak package.json @@ -115,9 +115,6 @@ then [[ $err_output =~ You\ are\ running\ Node ]] && exit 0 || exit 1 fi -# We removed the postinstall, so do it manually here -./node_modules/.bin/lerna bootstrap --concurrency=1 - if [ "$USE_YARN" = "yes" ] then # Install Yarn so that the test can use it to install packages. @@ -125,6 +122,9 @@ then yarn cache clean fi +# We removed the postinstall, so do it manually here +node bootstrap.js + # Lint own code ./node_modules/.bin/eslint --max-warnings 0 packages/babel-preset-react-app/ ./node_modules/.bin/eslint --max-warnings 0 packages/create-react-app/ From a720aa0decf0b81a6b5b8113b6efe941b13044e3 Mon Sep 17 00:00:00 2001 From: Daniel Banck <dbanck@users.noreply.github.com> Date: Thu, 29 Jun 2017 12:33:20 +0200 Subject: [PATCH 86/98] Fix minor typo (#2679) "Styleguidist combines of a style guide, ..." --> "Styleguidist combines a style guide, ..." --- packages/react-scripts/template/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 1ad816245..577502840 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -1507,7 +1507,7 @@ Learn more about React Storybook: ### Getting Started with Styleguidist -Styleguidist combines of a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground. +Styleguidist combines a style guide, where all your components are presented on a single page with their props documentation and usage examples, with an environment for developing components in isolation, similar to Storybook. In Styleguidist you write examples in Markdown, where each code snippet is rendered as a live editable playground. First, install Styleguidist: From 761fe6f2a7b746a515aeec28b4c24449b4a7f0e6 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 29 Jun 2017 12:59:49 +0100 Subject: [PATCH 87/98] Fix external CSS imports (#2680) * Fix external CSS imports * Add external CSS import to integration test * Fix assertion --- packages/react-scripts/config/webpack.config.dev.js | 3 +++ packages/react-scripts/config/webpack.config.prod.js | 3 +++ .../fixtures/kitchensink/.template.dependencies.json | 1 + .../fixtures/kitchensink/integration/webpack.test.js | 3 +++ .../kitchensink/src/features/webpack/assets/style.css | 6 ++++++ 5 files changed, 16 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 2e5026678..128527dc2 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -207,6 +207,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 6c1d0c4b4..61ccc77de 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -211,6 +211,9 @@ module.exports = { { loader: require.resolve('postcss-loader'), options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), autoprefixer({ diff --git a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json index 63ecaf90d..b8500f804 100644 --- a/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json +++ b/packages/react-scripts/fixtures/kitchensink/.template.dependencies.json @@ -6,6 +6,7 @@ "chai": "3.5.0", "jsdom": "9.8.3", "mocha": "3.2.0", + "normalize.css": "7.0.0", "prop-types": "15.5.6", "test-integrity": "1.0.0" } diff --git a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js index bda69cc61..e3845e79e 100644 --- a/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js +++ b/packages/react-scripts/fixtures/kitchensink/integration/webpack.test.js @@ -17,6 +17,9 @@ describe('Integration', () => { expect( doc.getElementsByTagName('style')[0].textContent.replace(/\s/g, '') + ).to.match(/html\{/); + expect( + doc.getElementsByTagName('style')[1].textContent.replace(/\s/g, '') ).to.match(/#feature-css-inclusion\{background:.+;color:.+}/); }); diff --git a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css index c399d1aca..9502cfaa1 100644 --- a/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css +++ b/packages/react-scripts/fixtures/kitchensink/src/features/webpack/assets/style.css @@ -1,3 +1,9 @@ +/* + * Ensure CSS inclusion doesn't regress + * https://github.com/facebookincubator/create-react-app/issues/2677 + */ +@import '~normalize.css/normalize.css'; + #feature-css-inclusion { background: palevioletred; color: papayawhip; From d5da1e8de91133f213cee4384365ee66d966eaa7 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 29 Jun 2017 13:06:42 +0100 Subject: [PATCH 88/98] Changelog for 1.0.9 (#2682) --- CHANGELOG.md | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 2a5ef6906..08b661de6 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,48 @@ +## 1.0.9 (June 29, 2017) + +#### :bug: Bug Fix + +* `react-scripts` + + * [#2680](https://github.com/facebookincubator/create-react-app/pull/2680) Fix external CSS imports. ([@gaearon](https://github.com/gaearon)) + +#### :memo: Documentation + +* `react-scripts` + + * [#2679](https://github.com/facebookincubator/create-react-app/pull/2679) Fix minor typo. ([@dbanck](https://github.com/dbanck)) + * [#2666](https://github.com/facebookincubator/create-react-app/pull/2666) Add more info about Apache client side routing. ([@viankakrisna](https://github.com/viankakrisna)) + * [#2671](https://github.com/facebookincubator/create-react-app/pull/2671) Add JSON and CSS to Prettier instructions. ([@jbovenschen](https://github.com/jbovenschen)) + +#### :house: Internal + +* Other + + * [#2673](https://github.com/facebookincubator/create-react-app/pull/2673) Bootstrap with Yarn. ([@Timer](https://github.com/Timer)) + * [#2659](https://github.com/facebookincubator/create-react-app/pull/2659) Test Node 8 on Travis. ([@gaearon](https://github.com/gaearon)) + +#### Committers: 5 + +- Ade Viankakrisna Fadlil ([viankakrisna](https://github.com/viankakrisna)) +- Dan Abramov ([gaearon](https://github.com/gaearon)) +- Daniel Banck ([dbanck](https://github.com/dbanck)) +- Jaco Bovenschen ([jbovenschen](https://github.com/jbovenschen)) +- Joe Haddad ([Timer](https://github.com/Timer)) + +### Migrating from 1.0.8 to 1.0.9 + +Inside any created project that has not been ejected, run: + +``` +npm install --save-dev --save-exact react-scripts@1.0.9 +``` + +or + +``` +yarn add --dev --exact react-scripts@1.0.9 +``` + ## 1.0.8 (June 28, 2017) #### :bug: Bug Fix From ed23d6229a080f2b5d954bb1b8d5cb8b17d27283 Mon Sep 17 00:00:00 2001 From: Forbes Lindesay <forbes@lindesay.co.uk> Date: Thu, 29 Jun 2017 14:00:10 +0100 Subject: [PATCH 89/98] Fix typo in README link (#2684) --- .github/ISSUE_TEMPLATE.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index ace3ddb49..ba1613615 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -64,7 +64,7 @@ Please scan these few sections for common problems. Additionally, you can search the User Guide itself for something you're having issues with: - https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.me + https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md If you didn't find the solution, please share which words you searched for. This helps us improve documentation for future readers who might encounter the same problem. From 7db4e87cee2016b7805ab51110a223d7783d4abc Mon Sep 17 00:00:00 2001 From: Ben Brostoff <ben.brostoff@gmail.com> Date: Thu, 29 Jun 2017 13:06:40 -0400 Subject: [PATCH 90/98] Fix typo (#2683) --- packages/create-react-app/createReactApp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-react-app/createReactApp.js b/packages/create-react-app/createReactApp.js index 9dc7b4ff3..4509b4978 100755 --- a/packages/create-react-app/createReactApp.js +++ b/packages/create-react-app/createReactApp.js @@ -169,7 +169,7 @@ function createApp(name, verbose, version, template) { if (!semver.satisfies(process.version, '>=6.0.0')) { console.log( chalk.yellow( - `You are using Node ${process.version} so the project will be boostrapped with an old unsupported version of tools.\n\n` + + `You are using Node ${process.version} so the project will be bootstrapped with an old unsupported version of tools.\n\n` + `Please update to Node 6 or higher for a better, fully supported experience.\n` ) ); From 3bc8dcdce597b157e97f557833a06243c5f5467a Mon Sep 17 00:00:00 2001 From: Patrick Hooper <patrick.d.hooper@gmail.com> Date: Thu, 29 Jun 2017 13:07:04 -0400 Subject: [PATCH 91/98] Downgrade `strip-ansi` package to 3.0.1 (#2692) --- packages/react-dev-utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-dev-utils/package.json b/packages/react-dev-utils/package.json index 4b01b465d..9fbbd7640 100644 --- a/packages/react-dev-utils/package.json +++ b/packages/react-dev-utils/package.json @@ -49,7 +49,7 @@ "recursive-readdir": "2.2.1", "shell-quote": "1.6.1", "sockjs-client": "1.1.4", - "strip-ansi": "4.0.0", + "strip-ansi": "3.0.1", "text-table": "0.2.0" } } From 07347f2a60194504d96cf36cf093bebf8c2fe4fe Mon Sep 17 00:00:00 2001 From: Joe Haddad <timer150@gmail.com> Date: Thu, 29 Jun 2017 13:39:24 -0400 Subject: [PATCH 92/98] Upgrade flow (#2693) Resolves #2670 --- packages/react-error-overlay/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-error-overlay/package.json b/packages/react-error-overlay/package.json index f29aedd0f..dff62a584 100644 --- a/packages/react-error-overlay/package.json +++ b/packages/react-error-overlay/package.json @@ -49,7 +49,7 @@ "eslint-plugin-import": "2.2.0", "eslint-plugin-jsx-a11y": "5.0.3", "eslint-plugin-react": "7.0.1", - "flow-bin": "0.46.0", + "flow-bin": "0.49.1", "jest": "20.0.1", "jest-fetch-mock": "1.1.1" }, From d6025a3d02fbb7daef17a42beb6a7bdb047011f0 Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 29 Jun 2017 18:58:19 +0100 Subject: [PATCH 93/98] Update CHANGELOG.md --- CHANGELOG.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 08b661de6..3bd982362 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -34,13 +34,13 @@ Inside any created project that has not been ejected, run: ``` -npm install --save-dev --save-exact react-scripts@1.0.9 +npm install --save --save-exact react-scripts@1.0.9 ``` or ``` -yarn add --dev --exact react-scripts@1.0.9 +yarn add --exact react-scripts@1.0.9 ``` ## 1.0.8 (June 28, 2017) From 4d9c829453421ca7c70bad226fcc1151422071fc Mon Sep 17 00:00:00 2001 From: Dan Abramov <dan.abramov@gmail.com> Date: Thu, 29 Jun 2017 19:01:37 +0100 Subject: [PATCH 94/98] Changelog for 1.0.10 (#2694) * Add changelog for 1.0.10 * Update CHANGELOG.md * Update CHANGELOG.md --- CHANGELOG.md | 38 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3bd982362..0e2c349eb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,41 @@ +## 1.0.10 (June 29, 2017) + +#### :bug: Bug Fix + +* `react-dev-utils` + + * [#2692](https://github.com/facebookincubator/create-react-app/pull/2692) Fix IE11 crash in development. ([@pdhoopr](https://github.com/pdhoopr)) + +* `create-react-app` + * [#2683](https://github.com/facebookincubator/create-react-app/pull/2683) Fix a typo. ([@BenBrostoff](https://github.com/BenBrostoff)) + +#### :memo: Documentation + +* README + + * [#2402](https://github.com/facebookincubator/create-react-app/pull/2402) Added `gluestick` to the alternatives section. ([@JoeCortopassi](https://github.com/JoeCortopassi)) + +#### Committers: 5 +- Ben Brostoff ([BenBrostoff](https://github.com/BenBrostoff)) +- Forbes Lindesay ([ForbesLindesay](https://github.com/ForbesLindesay)) +- Joe Haddad ([Timer](https://github.com/Timer)) +- Patrick Hooper ([pdhoopr](https://github.com/pdhoopr)) +- [JoeCortopassi](https://github.com/JoeCortopassi) + +### Migrating from 1.0.9 to 1.0.10 + +Inside any created project that has not been ejected, run: + +``` +npm install --save --save-exact react-scripts@1.0.10 +``` + +or + +``` +yarn add --exact react-scripts@1.0.10 +``` + ## 1.0.9 (June 29, 2017) #### :bug: Bug Fix From 7014aedddab2db2f985aa90192445cf8530adc0f Mon Sep 17 00:00:00 2001 From: William Monk <will@passfort.com> Date: Tue, 11 Jul 2017 19:16:38 +0100 Subject: [PATCH 95/98] Fix Code Review --- .github/ISSUE_TEMPLATE.md | 4 ++++ packages/react-scripts/config/webpack.config.dev.js | 12 +++++++++++- packages/react-scripts/config/webpack.config.prod.js | 12 +++++++++++- packages/react-scripts/package.json | 6 +++--- .../react-scripts/scripts/utils/createJestConfig.js | 12 +++++++++++- packages/react-scripts/template/src/index.js | 8 -------- 6 files changed, 40 insertions(+), 14 deletions(-) delete mode 100644 packages/react-scripts/template/src/index.js diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md index ba1613615..405acc968 100644 --- a/.github/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -83,7 +83,11 @@ 2. `node -v`: 3. `npm -v`: 4. `yarn --version` (if you use Yarn): +<<<<<<< HEAD 5. `npm ls react-scripts` (if you haven’t ejected): +======= +3. `npm ls react-scripts-ts` (if you haven’t ejected): +>>>>>>> Fix Code Review Then, specify: diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 128527dc2..2934aeae6 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -95,7 +95,17 @@ module.exports = { // https://github.com/facebookincubator/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.ts', '.ts', '.tsx', '.web.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: [ + '.web.ts', + '.ts', + '.web.tsx', + '.tsx', + '.web.js', + '.js', + '.json', + '.web.jsx', + '.jsx', + ], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 61ccc77de..8519c6603 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -95,7 +95,17 @@ module.exports = { // https://github.com/facebookincubator/create-react-app/issues/290 // `web` extension prefixes have been added for better support // for React Native Web. - extensions: ['.web.ts', '.ts', '.tsx', '.web.tsx', '.web.js', '.js', '.json', '.web.jsx', '.jsx'], + extensions: [ + '.web.ts', + '.ts', + '.web.tsx', + '.tsx', + '.web.js', + '.js', + '.json', + '.web.jsx', + '.jsx', + ], alias: { // @remove-on-eject-begin // Resolve Babel runtime relative to react-scripts. diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index b541163cb..94b189747 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -22,13 +22,13 @@ "react-scripts-ts": "./bin/react-scripts-ts.js" }, "dependencies": { - "autoprefixer": "7.1.0", "autoprefixer": "7.1.1", "app-root-path": "^2.0.1", "case-sensitive-paths-webpack-plugin": "2.1.1", "chalk": "1.1.3", + "chalk": "1.1.3", "cli-highlight": "1.1.4", - "css-loader": "0.28.1", + "css-loader": "0.28.4", "dotenv": "4.0.0", "extract-text-webpack-plugin": "2.1.2", "file-loader": "0.11.2", @@ -52,7 +52,7 @@ "sw-precache-webpack-plugin": "0.11.3", "url-loader": "0.5.8", "webpack": "2.6.1", - "webpack-dev-server": "2.4.5", + "webpack-dev-server": "2.5.0", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "2.0.3" }, diff --git a/packages/react-scripts/scripts/utils/createJestConfig.js b/packages/react-scripts/scripts/utils/createJestConfig.js index 463d1e589..559f96f45 100644 --- a/packages/react-scripts/scripts/utils/createJestConfig.js +++ b/packages/react-scripts/scripts/utils/createJestConfig.js @@ -27,7 +27,17 @@ module.exports = (resolve, rootDir) => { collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'], setupFiles: [resolve('config/polyfills.js')], setupTestFrameworkScriptFile: setupTestsFile, - moduleFileExtensions: ['web.ts', 'ts', 'web.tsx', 'tsx', 'js', 'jsx', 'json'], + moduleFileExtensions: [ + 'web.ts', + 'ts', + 'web.tsx', + 'tsx', + 'web.js', + 'js', + 'web.jsx', + 'jsx', + 'json', + ], testMatch: [ '<rootDir>/src/**/__tests__/**/*.ts?(x)', '<rootDir>/src/**/?(*.)(spec|test).ts?(x)', diff --git a/packages/react-scripts/template/src/index.js b/packages/react-scripts/template/src/index.js deleted file mode 100644 index fae3e3500..000000000 --- a/packages/react-scripts/template/src/index.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import './index.css'; -import App from './App'; -import registerServiceWorker from './registerServiceWorker'; - -ReactDOM.render(<App />, document.getElementById('root')); -registerServiceWorker(); From f2a5c5fc96d7e78d3e2d2521df9a5ce4ed0c6123 Mon Sep 17 00:00:00 2001 From: William Monk <will@passfort.com> Date: Tue, 11 Jul 2017 19:44:25 +0100 Subject: [PATCH 96/98] Fix tslint --- .../template/src/registerServiceWorker.ts | 46 +++++++++++-------- 1 file changed, 26 insertions(+), 20 deletions(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts index 4a3ccf021..6f75f48f9 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.ts +++ b/packages/react-scripts/template/src/registerServiceWorker.ts @@ -1,8 +1,9 @@ +// tslint:disable:no-console // In production, we register a service worker to serve assets from local cache. // This lets the app load faster on subsequent visits in production, and gives // it offline capabilities. However, it also means that developers (and users) -// will only see deployed updates on the "N+1" visit to a page, since previously +// will only see deployed updates on the 'N+1' visit to a page, since previously // cached resources are updated in the background. // To learn more about the benefits of this model, read https://goo.gl/KwvDNy. @@ -21,7 +22,10 @@ const isLocalhost = Boolean( export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. - const publicUrl = new URL(process.env.PUBLIC_URL, window.location); + const publicUrl = new URL( + process.env.PUBLIC_URL, + window.location.toString() + ); if (publicUrl.origin !== window.location.origin) { // Our service worker won't work if PUBLIC_URL is on a different origin // from what our page is served on. This might happen if a CDN is used to @@ -43,28 +47,30 @@ export default function register() { } } -function registerValidSW(swUrl) { +function registerValidSW(swUrl: string) { navigator.serviceWorker .register(swUrl) .then(registration => { registration.onupdatefound = () => { const installingWorker = registration.installing; - installingWorker.onstatechange = () => { - if (installingWorker.state === 'installed') { - if (navigator.serviceWorker.controller) { - // At this point, the old content will have been purged and - // the fresh content will have been added to the cache. - // It's the perfect time to display a "New content is - // available; please refresh." message in your web app. - console.log('New content is available; please refresh.'); - } else { - // At this point, everything has been precached. - // It's the perfect time to display a - // "Content is cached for offline use." message. - console.log('Content is cached for offline use.'); + if (installingWorker) { + installingWorker.onstatechange = () => { + if (installingWorker.state === 'installed') { + if (navigator.serviceWorker.controller) { + // At this point, the old content will have been purged and + // the fresh content will have been added to the cache. + // It's the perfect time to display a 'New content is + // available; please refresh.' message in your web app. + console.log('New content is available; please refresh.'); + } else { + // At this point, everything has been precached. + // It's the perfect time to display a + // 'Content is cached for offline use.' message. + console.log('Content is cached for offline use.'); + } } - } - }; + }; + } }; }) .catch(error => { @@ -72,14 +78,14 @@ function registerValidSW(swUrl) { }); } -function checkValidServiceWorker(swUrl) { +function checkValidServiceWorker(swUrl: string) { // Check if the service worker can be found. If it can't reload the page. fetch(swUrl) .then(response => { // Ensure service worker exists, and that we really are getting a JS file. if ( response.status === 404 || - response.headers.get('content-type').indexOf('javascript') === -1 + response.headers.get('content-type')!.indexOf('javascript') === -1 ) { // No service worker found. Probably a different app. Reload the page. navigator.serviceWorker.ready.then(registration => { From 4dad65c46be99ac08301a8db056e46d3c11944d2 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 7 Aug 2017 16:33:19 +0200 Subject: [PATCH 97/98] Default to empty string for PUBLIC_URL --- packages/react-scripts/template/src/registerServiceWorker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts index 6f75f48f9..3955d84da 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.ts +++ b/packages/react-scripts/template/src/registerServiceWorker.ts @@ -23,7 +23,7 @@ export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL( - process.env.PUBLIC_URL, + process.env.PUBLIC_URL || '', window.location.toString() ); if (publicUrl.origin !== window.location.origin) { From 3afca81e0336b61c09fac13cfa13557d8324b5a7 Mon Sep 17 00:00:00 2001 From: William Monk <will@williammonk.co.uk> Date: Mon, 7 Aug 2017 17:27:41 +0200 Subject: [PATCH 98/98] ! PUBLIC_URL --- packages/react-scripts/template/src/registerServiceWorker.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-scripts/template/src/registerServiceWorker.ts b/packages/react-scripts/template/src/registerServiceWorker.ts index 3955d84da..11c4bc72c 100644 --- a/packages/react-scripts/template/src/registerServiceWorker.ts +++ b/packages/react-scripts/template/src/registerServiceWorker.ts @@ -23,7 +23,7 @@ export default function register() { if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) { // The URL constructor is available in all browsers that support SW. const publicUrl = new URL( - process.env.PUBLIC_URL || '', + process.env.PUBLIC_URL!, window.location.toString() ); if (publicUrl.origin !== window.location.origin) {