Merge branch 'master' of https://github.com/facebookincubator/create-react-app

# By Dan Abramov (2) and others
# Via Dan Abramov
* 'master' of https://github.com/facebookincubator/create-react-app:
  Correct a comment mistype in webpack production config (facebook#855)
  load setupTests file at setupTestFramework stage (facebook#846)
  Spell check (facebook#845)
  Tweak readme
  Update instructions on publishing to GitHub pages (facebook#841)
  Make webpackHotDevClient support webpack 2 too (facebook#840)
  Tweak eject output
  Promote "React must be in scope" to be an error (facebook#822)
  Fix script name to open chrome (facebook#831)

Author: kitze

packages/eslint-config-react-app/index.js

@@ -196,7 +196,7 @@ module.exports = {
     'react/no-deprecated': 'warn',
     'react/no-direct-mutation-state': 'warn',
     'react/no-is-mounted': 'warn',
-    'react/react-in-jsx-scope': 'warn',
+    'react/react-in-jsx-scope': 'error',
     'react/require-render-return': 'warn',
     'react/style-prop-object': 'warn',
 

packages/react-dev-utils/openBrowser.js

@@ -17,7 +17,7 @@ function openBrowser(url) {
       // on OS X Google Chrome with AppleScript
       execSync('ps cax | grep "Google Chrome"');
       execSync(
-        'osascript chrome.applescript ' + url,
+        'osascript openChrome.applescript ' + url,
         {cwd: __dirname, stdio: 'ignore'}
       );
       return true;

packages/react-dev-utils/webpackHotDevClient.js

@@ -272,8 +272,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
     return;
   }
 
-  // https://webpack.github.io/docs/hot-module-replacement.html#check
-  module.hot.check(/* autoApply */true, function(err, updatedModules) {
+  function handleApplyUpdates(err, updatedModules) {
     if (err || !updatedModules) {
       window.location.reload();
       return;
@@ -288,5 +287,20 @@ function tryApplyUpdates(onHotUpdateSuccess) {
       // While we were updating, there was a new update! Do it again.
       tryApplyUpdates();
     }
-  });
+  }
+
+  // https://webpack.github.io/docs/hot-module-replacement.html#check
+  var result = module.hot.check(/* autoApply */true, handleApplyUpdates);
+
+  // // Webpack 2 returns a Promise instead of invoking a callback
+  if (result && result.then) {
+    result.then(
+      function(updatedModules) {
+        handleApplyUpdates(null, updatedModules);
+      },
+      function(err) {
+        handleApplyUpdates(err, null);
+      }
+    );
+  }
 };

packages/react-scripts/config/webpack.config.prod.js

@@ -43,7 +43,7 @@ var homepagePathname = homepagePath ? url.parse(homepagePath).pathname : '/';
 var publicPath = ensureSlash(homepagePathname, true);
 // `publicUrl` is just like `publicPath`, but we will provide it to our app
 // as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing shlash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
+// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
 var publicUrl = ensureSlash(homepagePathname, false);
 // Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);

packages/react-scripts/scripts/build.js

@@ -147,13 +147,19 @@ function build(previousSizeMap) {
       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
       console.log('To publish it at ' + chalk.green(homepagePath) + ', run:');
       console.log();
-      console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Save local changes"'));
-      console.log('  ' + chalk.cyan('git') + ' checkout -B gh-pages');
-      console.log('  ' + chalk.cyan('git') + ' add -f build');
-      console.log('  ' + chalk.cyan('git') + ' commit -am ' + chalk.yellow('"Rebuild website"'));
-      console.log('  ' + chalk.cyan('git') + ' filter-branch -f --prune-empty --subdirectory-filter build');
-      console.log('  ' + chalk.cyan('git') + ' push -f origin gh-pages');
-      console.log('  ' + chalk.cyan('git') + ' checkout -');
+      console.log('  ' + chalk.cyan('npm') +  ' install --save-dev gh-pages');
+      console.log();
+      console.log('Add the following script in your ' + chalk.cyan('package.json') + '.');
+      console.log();
+      console.log('    ' + chalk.dim('// ...'));
+      console.log('    ' + chalk.yellow('"scripts"') + ': {');
+      console.log('      ' + chalk.dim('// ...'));
+      console.log('      ' + chalk.yellow('"deploy"') + ': ' + chalk.yellow('"gh-pages -d build"'));
+      console.log('    }');
+      console.log();
+      console.log('Then run:');
+      console.log();
+      console.log('  ' + chalk.cyan('npm') +  ' run deploy');
       console.log();
     } else if (publicPath !== '/') {
       // "homepage": "http://mywebsite.com/project"

packages/react-scripts/scripts/eject.js

@@ -64,9 +64,9 @@ prompt(
   fs.mkdirSync(path.join(appPath, 'scripts'));
 
   console.log();
-  console.log('Copying files to ' + cyan(appPath));
+  console.log(cyan('Copying files into ' + appPath));
   files.forEach(function(file) {
-    console.log('  Copying ' + cyan(file));
+    console.log('  Adding ' + cyan(file) + ' to the project');
     var content = fs
         .readFileSync(path.join(ownPath, file), 'utf8')
         // Remove dead code from .js files on eject
@@ -83,35 +83,35 @@ prompt(
   var babelConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.babelrc'), 'utf8'));
   var eslintConfig = JSON.parse(fs.readFileSync(path.join(ownPath, '.eslintrc'), 'utf8'));
 
-  console.log(cyan('Updating dependencies...'));
+  console.log(cyan('Updating the dependencies'));
   var ownPackageName = ownPackage.name;
-  console.log('  Removing dependency: ' + cyan(ownPackageName));
+  console.log('  Removing ' + cyan(ownPackageName) + ' from devDependencies');
   delete appPackage.devDependencies[ownPackageName];
 
   Object.keys(ownPackage.dependencies).forEach(function (key) {
     // For some reason optionalDependencies end up in dependencies after install
     if (ownPackage.optionalDependencies[key]) {
       return;
     }
-    console.log('  Adding dependency: ' + cyan(key));
+    console.log('  Adding ' + cyan(key) + ' to devDependencies');
     appPackage.devDependencies[key] = ownPackage.dependencies[key];
   });
   console.log();
-  console.log(cyan('Updating scripts...'));
+  console.log(cyan('Updating the scripts'));
   delete appPackage.scripts['eject'];
   Object.keys(appPackage.scripts).forEach(function (key) {
     appPackage.scripts[key] = appPackage.scripts[key]
       .replace(/react-scripts (\w+)/g, 'node scripts/$1.js');
     console.log(
       '  Replacing ' +
-      cyan('\"react-scripts ' +  key + '\"') +
+      cyan('"react-scripts ' + key + '"') +
       ' with ' +
-      cyan('\"' + appPackage.scripts[key] + '\"')
+      cyan('"node scripts/' + key + '.js"')
     );
   });
 
   console.log();
-  console.log(cyan('Adding configuration to ') + 'package.json' + cyan('...'));
+  console.log(cyan('Configuring package.json'));
   // Add Jest config
   console.log('  Adding ' + cyan('Jest') + ' configuration');
   appPackage.jest = createJestConfig(

packages/react-scripts/template/README.md

@@ -885,19 +885,29 @@ Open your `package.json` and add a `homepage` field:
 **The above step is important!**<br>
 Create React App uses the `homepage` field to determine the root URL in the built HTML file.
 
-Now, whenever you run `npm run build`, you will see a cheat sheet with a sequence of commands to deploy to GitHub pages:
+Now, whenever you run `npm run build`, you will see a cheat sheet with instructions on how to deploy to GitHub pages.
+
+To publish it at [http://myusername.github.io/my-app](http://myusername.github.io/my-app), run:
 
 ```sh
-git commit -am "Save local changes"
-git checkout -B gh-pages
-git add -f build
-git commit -am "Rebuild website"
-git filter-branch -f --prune-empty --subdirectory-filter build
-git push -f origin gh-pages
-git checkout -
+npm install --save-dev gh-pages
+```
+
+Add the following script in your `package.json`:
+
+```js
+  // ...
+  "scripts": {
+    // ...
+    "deploy": "gh-pages -d build"
+  }
 ```
 
-You may copy and paste them, or put them into a custom shell script. You may also customize them for another hosting provider.
+Then run:
+
+```sh
+npm run deploy
+```
 
 Note that 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.
@@ -931,7 +941,7 @@ With this setup Netlify will build and deploy when you push to git or open a pul
 2. Pick your Git hosting service and select your repository
 3. Click `Build your site`
 
-**Support for client site routing:**
+**Support for client-side routing:**
 
 To support `pushState`, make sure to create a `public/_redirects` file with the following rewrite rules:
 

packages/react-scripts/template/public/index.html

@@ -9,7 +9,7 @@
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favico.ico", "%PUBLIC_URL%/favicon.ico" will
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->

packages/react-scripts/utils/createJestConfig.js

@@ -13,20 +13,18 @@ const pathExists = require('path-exists');
 const paths = require('../config/paths');
 
 module.exports = (resolve, rootDir, isEjecting) => {
-  const setupFiles = [resolve('config/polyfills.js')];
-  if (pathExists.sync(paths.testsSetup)) {
-    // Use this instead of `paths.testsSetup` to avoid putting
-    // an absolute filename into configuration after ejecting.
-    setupFiles.push('<rootDir>/src/setupTests.js');
-  }
+  // Use this instead of `paths.testsSetup` to avoid putting
+  // an absolute filename into configuration after ejecting.
+  const setupTestsFile = pathExists.sync(paths.testsSetup) ? '<rootDir>/src/setupTests.js' : undefined;
 
   const config = {
     moduleFileExtensions: ['jsx', 'js', 'json'],
     moduleNameMapper: {
       '^.+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': resolve('config/jest/FileStub.js'),
       '^.+\\.css$': resolve('config/jest/CSSStub.js')
     },
-    setupFiles: setupFiles,
+    setupFiles: [resolve('config/polyfills.js')],
+    setupTestFrameworkScriptFile: setupTestsFile,
     testPathIgnorePatterns: ['<rootDir>/(build|docs|node_modules)/'],
     testEnvironment: 'node',
     testRegex: '(/__tests__/.*|\\.(test|spec))\\.(js|jsx)$',