Merge pull request #2

* pull2:
  Support Yarn (facebook#898)
  Fix chrome tab reuse (facebook#1035)
  Remove unnecessary transform plugins for object spread to work (facebook#1052)
  Clears the usage of react-jsx-source & react-jsx-self (facebook#992)
  Update babel-present-env and use node: 'current' as target (facebook#1051)
  Remove redundant `function` from export statement (facebook#996)
  Add Gatsby to alternatives (facebook#995)
  Allow webpack 2 as peerDependency in react-dev-utils (facebook#963)
  Remove custom babel-loader cache dir config (facebook#983)
  Check for presence of folders before continuing eject. Closes facebook#939. (facebook#951)
  Fixes facebook#952 (facebook#953)
  Always build before deploying to gh-pages (facebook#959)
  Add collectCoverageFrom option to collect coverage on files without any tests. (facebook#961)
  Catch and noop call to open web browser. (facebook#964)
  Gently nudge users towards https by default (facebook#974)
  Enable compression on webpack-dev-server (facebook#966) (facebook#968)
  Add next.js to Alternatives
  Point people to npm Windows instructions
  Encourage people to try recent npm

# Conflicts:
#	packages/react-scripts/config/webpack.config.dev.js
#	packages/react-scripts/package.json
#	packages/react-scripts/utils/createJestConfig.js

.travis.yml

@@ -9,3 +9,6 @@ cache:
   - packages/create-react-app/node_modules
   - packages/react-scripts/node_modules
 script: tasks/e2e.sh
+env:
+  - USE_YARN=no
+  - USE_YARN=yes

ISSUE_TEMPLATE.md

@@ -1,5 +1,25 @@
 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?
+
+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:
+
+```
+npm install -g npm@latest
+
+cd your_project_directory
+rm -rf node_modules
+npm install
+```
+
+Then try to reproduce the issue again.
+
+Can you still reproduce it?
+
 ### Description
 
 What are you reporting?

README.md

@@ -205,6 +205,8 @@ Some of the more popular and actively maintained ones are:
 * [insin/nwb](https://github.com/insin/nwb)
 * [mozilla/neo](https://github.com/mozilla/neo)
 * [NYTimes/kyt](https://github.com/NYTimes/kyt)
+* [zeit/next.js](https://github.com/zeit/next.js)
+* [gatsbyjs/gatsby](https://github.com/gatsbyjs/gatsby)
 
 Notable alternatives also include:
 

packages/babel-preset-react-app/index.js

@@ -27,15 +27,7 @@ const plugins = [
       regenerator: true,
       // Resolve the Babel runtime relative to the config.
       moduleName: path.dirname(require.resolve('babel-runtime/package'))
-    }],
-    // The following two plugins are currently necessary to get
-    // babel-preset-env to work with rest/spread. More info here:
-    // https://github.com/babel/babel-preset-env#caveats
-    // https://github.com/babel/babel/issues/4074
-    // const { a, ...z } = obj;
-    require.resolve('babel-plugin-transform-es2015-destructuring'),
-    // const fn = ({ a, ...otherProps }) => otherProps;
-    require.resolve('babel-plugin-transform-es2015-parameters')
+    }]
   ];
 
 // This is similar to how `env` works in Babel:
@@ -54,6 +46,12 @@ if (env !== 'development' && env !== 'test' && env !== 'production') {
 }
 
 if (env === 'development' || env === 'test') {
+  // The following two plugins are currently necessary to make React warnings
+  // include more valuable information. They are included here because they are
+  // currently not enabled in babel-preset-react. See the below threads for more info:
+  // https://github.com/babel/babel/issues/4702
+  // https://github.com/babel/babel/pull/3540#issuecomment-228673661
+  // https://github.com/facebookincubator/create-react-app/issues/989
   plugins.push.apply(plugins, [
     // Adds component stack to warning messages
     require.resolve('babel-plugin-transform-react-jsx-source'),
@@ -68,7 +66,7 @@ if (env === 'test') {
       // ES features necessary for user's Node version
       [require('babel-preset-env').default, {
         targets: {
-          node: parseFloat(process.versions.node),
+          node: 'current',
         },
       }],
       // JSX, Flow
@@ -99,4 +97,3 @@ if (env === 'test') {
     // ]);
   }
 }
-

packages/babel-preset-react-app/package.json

@@ -12,15 +12,13 @@
   ],
   "dependencies": {
     "babel-plugin-transform-class-properties": "6.16.0",
-    "babel-plugin-transform-es2015-destructuring": "6.16.0",
-    "babel-plugin-transform-es2015-parameters": "6.17.0",
-    "babel-plugin-transform-object-rest-spread": "6.16.0",
+    "babel-plugin-transform-object-rest-spread": "6.19.0",
     "babel-plugin-transform-react-constant-elements": "6.9.1",
     "babel-plugin-transform-react-jsx-self": "6.11.0",
     "babel-plugin-transform-react-jsx-source": "6.9.0",
     "babel-plugin-transform-regenerator": "6.16.1",
     "babel-plugin-transform-runtime": "6.15.0",
-    "babel-preset-env": "0.0.6",
+    "babel-preset-env": "0.0.8",
     "babel-preset-latest": "6.16.0",
     "babel-preset-react": "6.16.0",
     "babel-runtime": "6.11.6"

packages/create-react-app/index.js

@@ -101,26 +101,54 @@ function createApp(name, verbose, version) {
   process.chdir(root);
 
   console.log('Installing packages. This might take a couple minutes.');
-  console.log('Installing react-scripts from npm...');
+  console.log('Installing react-scripts...');
   console.log();
 
   run(root, appName, version, verbose, originalDirectory);
 }
 
-function run(root, appName, version, verbose, originalDirectory) {
-  var installPackage = getInstallPackage(version);
-  var packageName = getPackageName(installPackage);
+function install(packageToInstall, verbose, callback) {
   var args = [
-    'install',
-    verbose && '--verbose',
-    '--save-dev',
-    '--save-exact',
-    installPackage,
-  ].filter(function(e) { return e; });
-  var proc = spawn('npm', args, {stdio: 'inherit'});
+    'add',
+    '--dev',
+    '--exact',
+    packageToInstall,
+  ];
+  var proc = spawn('yarn', args, {stdio: 'inherit'});
+
+  var yarnExists = true;
+  proc.on('error', function (err) {
+    if (err.code === 'ENOENT') {
+      yarnExists = false;
+    }
+  });
   proc.on('close', function (code) {
+    if (yarnExists) {
+      callback(code, 'yarn', args);
+      return;
+    }
+    // No Yarn installed, continuing with npm.
+    args = [
+      'install',
+      verbose && '--verbose',
+      '--save-dev',
+      '--save-exact',
+      packageToInstall,
+    ].filter(function(e) { return e; });
+    var npmProc = spawn('npm', args, {stdio: 'inherit'});
+    npmProc.on('close', function (code) {
+      callback(code, 'npm', args);
+    });
+  });
+}
+
+function run(root, appName, version, verbose, originalDirectory) {
+  var packageToInstall = getInstallPackage(version);
+  var packageName = getPackageName(packageToInstall);
+
+  install(packageToInstall, verbose, function (code, command, args) {
     if (code !== 0) {
-      console.error('`npm ' + args.join(' ') + '` failed');
+      console.error('`' + command + ' ' + args.join(' ') + '` failed');
       return;
     }
 

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

@@ -44,7 +44,7 @@ module.exports = {
   settings: {
     'import/ignore': [
       'node_modules',
-      '\\.(json|css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$',
+      '\\.(json|css|ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$',
     ],
     'import/extensions': ['.js'],
     'import/resolver': {

packages/react-dev-utils/openBrowser.js

@@ -28,7 +28,7 @@ function openBrowser(url) {
   // Fallback to opn
   // (It will always open new tab)
   try {
-    opn(url);
+    opn(url).catch(() => {}); // Prevent `unhandledRejection` error.
     return true;
   } catch (err) {
     return false;

packages/react-dev-utils/openChrome.applescript

@@ -23,7 +23,7 @@ on run argv
       set theTabIndex to 0
       repeat with theTab in every tab of theWindow
         set theTabIndex to theTabIndex + 1
-        if theTab's URL is theURL then
+        if theTab's URL as string contains theURL then
           set found to true
           exit repeat
         end if
@@ -38,6 +38,7 @@ on run argv
       tell theTab to reload
       set index of theWindow to 1
       set theWindow's active tab index to theTabIndex
+      tell theWindow to activate
     else
       tell window 1
         activate

packages/react-dev-utils/package.json

@@ -29,8 +29,5 @@
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
     "strip-ansi": "3.0.1"
-  },
-  "peerDependencies": {
-    "webpack": "^1.13.2"
   }
 }

packages/react-scripts/config/paths.js

@@ -43,6 +43,7 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   ownNodeModules: resolveApp('node_modules'),
@@ -62,6 +63,7 @@ module.exports = {
   appIndexJs: resolveApp('src/index.js'),
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
+  yarnLockFile: resolveApp('yarn.lock'),
   testsSetup: resolveApp('src/setupTests.js'),
   appNodeModules: resolveApp('node_modules'),
   // this is empty with npm3 but node resolution searches higher anyway:
@@ -80,6 +82,7 @@ if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1)
     appIndexJs: resolveOwn('../template/src/index.js'),
     appPackageJson: resolveOwn('../package.json'),
     appSrc: resolveOwn('../template/src'),
+    yarnLockFile: resolveOwn('../template/yarn.lock'),
     testsSetup: resolveOwn('../template/src/setupTests.js'),
     appNodeModules: resolveOwn('../node_modules'),
     ownNodeModules: resolveOwn('../node_modules'),

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

@@ -15,7 +15,6 @@ var webpack = require('webpack');
 var nesting = require('postcss-nesting');
 var cssvariables = require('postcss-css-variables');
 var values = require('postcss-modules-values');
-var findCacheDir = require('find-cache-dir');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
@@ -125,12 +124,9 @@ module.exports = {
           presets: [require.resolve('babel-preset-react-app')],
           // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
-          // It enables caching results in ./node_modules/.cache/react-scripts/
-          // directory for faster rebuilds. We use findCacheDir() because of:
-          // https://github.com/facebookincubator/create-react-app/issues/483
-          cacheDirectory: findCacheDir({
-            name: 'react-scripts'
-          })
+          // It enables caching results in ./node_modules/.cache/babel-loader/
+          // directory for faster rebuilds.
+          cacheDirectory: true
         }
       },
       {

packages/react-scripts/package.json

@@ -27,7 +27,7 @@
     "babel-core": "6.17.0",
     "babel-eslint": "7.0.0",
     "babel-jest": "16.0.0",
-    "babel-loader": "6.2.5",
+    "babel-loader": "6.2.7",
     "babel-plugin-transform-remove-console": "^6.8.0",
     "babel-preset-react-app": "^1.0.0",
     "case-sensitive-paths-webpack-plugin": "1.1.4",
@@ -48,7 +48,6 @@
     "extract-text-webpack-plugin": "1.0.1",
     "file-loader": "0.9.0",
     "filesize": "3.3.0",
-    "find-cache-dir": "0.1.1",
     "fs-extra": "0.30.0",
     "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.24.0",

packages/react-scripts/scripts/build.js

@@ -21,6 +21,7 @@ require('dotenv').config({silent: true});
 var chalk = require('chalk');
 var fs = require('fs-extra');
 var path = require('path');
+var pathExists = require('path-exists');
 var filesize = require('filesize');
 var gzipSize = require('gzip-size').sync;
 var rimrafSync = require('rimraf').sync;
@@ -31,6 +32,8 @@ var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var recursive = require('recursive-readdir');
 var stripAnsi = require('strip-ansi');
 
+var useYarn = pathExists.sync(paths.yarnLockFile);
+
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
   process.exit(1);
@@ -161,7 +164,11 @@ 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('npm') +  ' install --save-dev gh-pages');
+      if (useYarn) {
+        console.log('  ' + chalk.cyan('yarn') +  ' add gh-pages');
+      } else {
+        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();
@@ -173,7 +180,7 @@ function build(previousSizeMap) {
       console.log();
       console.log('Then run:');
       console.log();
-      console.log('  ' + chalk.cyan('npm') +  ' run deploy');
+      console.log('  ' + chalk.cyan(useYarn ? 'yarn' : 'npm') +  ' run deploy');
       console.log();
     } else if (publicPath !== '/') {
       // "homepage": "http://mywebsite.com/project"
@@ -200,7 +207,11 @@ function build(previousSizeMap) {
       console.log('The ' + chalk.cyan('build') + ' folder is ready to be deployed.');
       console.log('You may also serve it locally with a static server:')
       console.log();
-      console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
+      if (useYarn) {
+        console.log('  ' + chalk.cyan('yarn') +  ' global add pushstate-server');
+      } else {
+        console.log('  ' + chalk.cyan('npm') +  ' install -g pushstate-server');
+      }
       console.log('  ' + chalk.cyan('pushstate-server') + ' build');
       console.log('  ' + chalk.cyan(openCommand) + ' http://localhost:9000');
       console.log();