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

# Conflicts:
#	README.md
#	packages/react-scripts/package.json
#	packages/react-scripts/scripts/start.js
#	packages/react-scripts/utils/createJestConfig.js

Author: kitze

README.md

@@ -23,3 +23,5 @@ Then create a file named `.babelrc` with following contents in the root folder o
     "presets": ["react-app"]
   }
   ```
+
+This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.

packages/babel-preset-react-app/README.md

@@ -13,8 +13,16 @@ var path = require('path');
 const plugins = [
     // class { handleClick = () => { } }
     require.resolve('babel-plugin-transform-class-properties'),
+    // The following two plugins use Object.assign directly, instead of Babel's
+    // extends helper. Note that this assumes `Object.assign` is available. 
     // { ...todo, completed: true }
-    require.resolve('babel-plugin-transform-object-rest-spread'),
+    [require.resolve('babel-plugin-transform-object-rest-spread'), {
+      useBuiltIns: true
+    }],
+    // Transforms JSX
+    [require.resolve('babel-plugin-transform-react-jsx'), {
+      useBuiltIns: true
+    }],
     // function* () { yield 42; yield 43; }
     [require.resolve('babel-plugin-transform-regenerator'), {
       // Async functions are converted to generators by babel-preset-latest

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

@@ -15,6 +15,7 @@
     "babel-plugin-transform-class-properties": "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": "6.8.0",
     "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",

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

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

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

@@ -142,6 +142,22 @@ compiler.plugin('done', function(stats) {
 });
 ```
 
+#### `getProcessForPort(port: number): string`
+
+Finds the currently running process on `port`.
+Returns a string containing the name and directory, e.g.,
+
+```
+create-react-app
+in /Users/developer/create-react-app
+```
+
+```js
+var getProcessForPort = require('react-dev-utils/getProcessForPort');
+
+getProcessForPort(3000);
+```
+
 #### `openBrowser(url: string): boolean`
 
 Attempts to open the browser with a given URL.  

packages/react-dev-utils/README.md

@@ -0,0 +1,61 @@
+var chalk = require('chalk');
+var execSync = require('child_process').execSync;
+var path = require('path');
+
+var execOptions = {
+  encoding: 'utf8',
+  stdio: [
+    'pipe', // stdin (default)
+    'pipe', // stdout (default)
+    'ignore' //stderr
+  ]
+};
+
+function isProcessAReactApp(processCommand) {
+  return /^node .*react-scripts\/scripts\/start\.js\s?$/.test(processCommand);
+}
+
+function getProcessIdOnPort(port) {
+  return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions).trim();
+}
+
+function getPackageNameInDirectory(directory) {
+  var packagePath = path.join(directory.trim(), 'package.json');
+
+  try {
+    return require(packagePath).name;
+  } catch(e) {
+    return null;
+  }
+
+}
+
+function getProcessCommand(processId, processDirectory) {
+  var command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions);
+
+  if (isProcessAReactApp(command)) {
+    const packageName = getPackageNameInDirectory(processDirectory);
+    return (packageName) ? packageName + '\n' : command;
+  } else {
+    return command;
+  }
+
+}
+
+function getDirectoryOfProcessById(processId) {
+  return execSync('lsof -p '+ processId + ' | grep cwd | awk \'{print $9}\'', execOptions).trim();
+}
+
+function getProcessForPort(port) {
+  try {
+    var processId = getProcessIdOnPort(port);
+    var directory = getDirectoryOfProcessById(processId);
+    var command = getProcessCommand(processId, directory);
+    return chalk.cyan(command) + chalk.blue('  in ') + chalk.cyan(directory);
+  } catch(e) {
+    return null;
+  }
+}
+
+module.exports = getProcessForPort;
+

packages/react-dev-utils/getProcessForPort.js

@@ -15,6 +15,7 @@
     "clearConsole.js",
     "checkRequiredFiles.js",
     "formatWebpackMessages.js",
+    "getProcessForPort.js",
     "InterpolateHtmlPlugin.js",
     "openChrome.applescript",
     "openBrowser.js",

packages/react-dev-utils/package.json

@@ -127,7 +127,7 @@ module.exports = {
       // A missing `test` is equivalent to a match.
       {
         exclude: [
-          /\.(html)$/,
+          /\.html$/,
           /\.(js|jsx)$/,
           /\.css$/,
           /\.json$/

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

@@ -127,15 +127,13 @@ module.exports = {
       // we need to add the supported extension to this loader too.
       // Add one new line in `exclude` for each loader.
       //
-      // "file" loader makes sure those assets get served by WebpackDevServer.
-      // When you `import` an asset, you get its (virtual) filename.
-      // In production, they would get copied to the `build` folder.
-      // "url" loader works like "file" loader except that it embeds assets
-      // smaller than specified limit in bytes as data URLs to avoid requests.
-      // A missing `test` is equivalent to a match.
+      // "file" loader makes sure those assets end up in the `build` folder.
+      // When you `import` an asset, you get its filename.
+      // "url" loader works just like "file" loader but it also embeds
+      // assets smaller than specified size as data URLs to avoid requests.
       {
         exclude: [
-          /\.(html)$/,
+          /\.html$/,
           /\.(js|jsx)$/,
           /\.css$/,
           /\.json$/

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

@@ -1,8 +1,8 @@
 {
-  "name": "custom-react-scripts",
-  "version": "0.0.19",
-  "description": "Allow custom config for create-react-app without ejecting",
-  "repository": "kitze/create-react-app",
+  "name": "react-scripts",
+  "version": "0.7.0",
+  "description": "Configuration and scripts for Create React App.",
+  "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",
   "engines": {
     "node": ">=4"
@@ -26,7 +26,7 @@
     "autoprefixer": "6.5.1",
     "babel-core": "6.17.0",
     "babel-eslint": "7.0.0",
-    "babel-jest": "16.0.0",
+    "babel-jest": "17.0.2",
     "babel-loader": "6.2.7",
     "babel-preset-react-app": "^1.0.0",
     "babel-preset-stage-0": "^6.5.0",
@@ -52,7 +52,7 @@
     "gzip-size": "3.0.0",
     "html-webpack-plugin": "2.24.0",
     "http-proxy-middleware": "0.17.2",
-    "jest": "16.0.2",
+    "jest": "17.0.2",
     "json-loader": "0.5.4",
     "less": "^2.7.1",
     "less-loader": "^2.2.3",

packages/react-scripts/package.json

@@ -24,7 +24,6 @@ var path = require('path');
 var pathExists = require('path-exists');
 var filesize = require('filesize');
 var gzipSize = require('gzip-size').sync;
-var rimrafSync = require('rimraf').sync;
 var webpack = require('webpack');
 var config = require('../config/webpack.config.prod');
 var paths = require('../config/paths');
@@ -78,7 +77,7 @@ recursive(paths.appBuild, (err, fileNames) => {
 
   // Remove all content but keep the directory so that
   // if you're in it, you don't end up in Trash
-  rimrafSync(paths.appBuild + '/*');
+  fs.emptyDirSync(paths.appBuild);
 
   // Start the webpack build
   build(previousSizeMap);

packages/react-scripts/scripts/build.js

@@ -8,12 +8,11 @@
  */
 
 var createJestConfig = require('../utils/createJestConfig');
-var fs = require('fs');
+var fs = require('fs-extra');
 var path = require('path');
 var pathExists = require('path-exists');
 var paths = require('../config/paths');
 var prompt = require('react-dev-utils/prompt');
-var rimrafSync = require('rimraf').sync;
 var spawnSync = require('cross-spawn').sync;
 var chalk = require('chalk');
 var green = chalk.green;
@@ -149,11 +148,11 @@ prompt(
 
   if (pathExists.sync(paths.yarnLockFile)) {
     console.log(cyan('Running yarn...'));
-    rimrafSync(ownPath);
+    fs.removeSync(ownPath);
     spawnSync('yarn', [], {stdio: 'inherit'});
   } else {
     console.log(cyan('Running npm install...'));
-    rimrafSync(ownPath);
+    fs.removeSync(ownPath);
     spawnSync('npm', ['install'], {stdio: 'inherit'});
   }
   console.log(green('Ejected successfully!'));

packages/react-scripts/scripts/eject.js

@@ -26,6 +26,7 @@ var detect = require('detect-port');
 var clearConsole = require('react-dev-utils/clearConsole');
 var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
 var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
+var getProcessForPort = require('react-dev-utils/getProcessForPort');
 var openBrowser = require('react-dev-utils/openBrowser');
 var prompt = require('react-dev-utils/prompt');
 var pathExists = require('path-exists');
@@ -34,6 +35,7 @@ var paths = require('../config/paths');
 
 var useYarn = pathExists.sync(paths.yarnLockFile);
 var cli = useYarn ? 'yarn' : 'npm';
+var isInteractive = process.stdout.isTTY;
 
 // Warn and crash if required files are missing
 if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
@@ -68,21 +70,33 @@ function setupCompiler(host, port, protocol) {
   // bundle, so if you refresh, it'll wait instead of serving the old one.
   // "invalid" is short for "bundle invalidated", it doesn't imply any errors.
   compiler.plugin('invalid', function() {
-    clearConsole();
+    if (isInteractive) {
+      clearConsole();
+    }
     console.log('Compiling...');
   });
 
+  var isFirstCompile = true;
+
   // "done" event fires when Webpack has finished recompiling the bundle.
   // Whether or not you have warnings or errors, you will get this event.
   compiler.plugin('done', function(stats) {
-    clearConsole();
+    if (isInteractive) {
+      clearConsole();
+    }
 
     // We have switched off the default Webpack output in WebpackDevServer
     // options so we are going to "massage" the warnings and errors and present
     // them in a readable focused way.
     var messages = formatWebpackMessages(stats.toJson({}, true));
-    if (!messages.errors.length && !messages.warnings.length) {
+    var isSuccessful = !messages.errors.length && !messages.warnings.length;
+    var showInstructions = isSuccessful && (isInteractive || isFirstCompile);
+
+    if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));
+    }
+
+    if (showInstructions) {
       console.log();
       console.log('The app is running at:');
       console.log();
@@ -91,6 +105,7 @@ function setupCompiler(host, port, protocol) {
       console.log('Note that the development build is not optimized.');
       console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.');
       console.log();
+      isFirstCompile = false;
     }
 
     // If errors exist, only show errors.
@@ -138,7 +153,7 @@ function onProxyError(proxy) {
     // And immediately send the proper error response to the client.
     // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side.
     if (res.writeHead && !res.headersSent) {
-      res.writeHead(500);
+        res.writeHead(500);
     }
     res.end('Proxy error: Could not proxy request ' + req.url + ' from ' +
       host + ' to ' + proxy + ' (' + err.code + ').'
@@ -180,18 +195,25 @@ function addMiddleware(devServer) {
     // - /sockjs-node/* (WebpackDevServer uses this for hot reloading)
     // Tip: use https://jex.im/regulex/ to visualize the regex
     var mayProxy = /^(?!\/(index\.html$|.*\.hot-update\.json$|sockjs-node\/)).*$/;
-    devServer.use(mayProxy,
-      // Pass the scope regex both to Express and to the middleware for proxying
-      // of both HTTP and WebSockets to work without false positives.
-      httpProxyMiddleware(pathname => mayProxy.test(pathname), {
-        target: proxy,
-        logLevel: 'silent',
-        onError: onProxyError(proxy),
-        secure: false,
-        changeOrigin: true
-      })
-    );
+
+    // Pass the scope regex both to Express and to the middleware for proxying
+    // of both HTTP and WebSockets to work without false positives.
+    var hpm = httpProxyMiddleware(pathname => mayProxy.test(pathname), {
+      target: proxy,
+      logLevel: 'silent',
+      onError: onProxyError(proxy),
+      secure: false,
+      changeOrigin: true,
+      ws: true
+    });
+    devServer.use(mayProxy, hpm);
+
+    // Listen for the websocket 'upgrade' event and upgrade the connection.
+    // If this is not done, httpProxyMiddleware will not try to upgrade until
+    // an initial plain HTTP request is made.
+    devServer.listeningApp.on('upgrade', hpm.upgrade);
   }
+
   // Finally, by now we have certainly resolved the URL.
   // It may be /index.html, so let the dev server try serving it again.
   devServer.use(devServer.middleware);
@@ -250,10 +272,13 @@ function runDevServer(host, port, protocol) {
       return console.log(err);
     }
 
-    clearConsole();
+    if (isInteractive) {
+      clearConsole();
+    }
     console.log(chalk.cyan('Starting the development server...'));
     console.log();
-    if (process.env && process.env.OPEN_BROWSER !== 'false') {
+
+    if (isInteractive && process.env.OPEN_BROWSER !== 'false') {
       openBrowser(protocol + '://' + host + ':' + port + '/');
     }
   });
@@ -274,14 +299,20 @@ detect(DEFAULT_PORT).then(port => {
     return;
   }
 
-  clearConsole();
-  var question =
-        chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.') +
+  if (isInteractive) {
+    clearConsole();
+    var existingProcess = getProcessForPort(DEFAULT_PORT);
+    var question =
+      chalk.yellow('Something is already running on port ' + DEFAULT_PORT + '.' +
+        ((existingProcess) ? ' Probably:\n  ' + existingProcess : '')) +
         '\n\nWould you like to run the app on another port instead?';
 
-  prompt(question, true).then(shouldChangePort => {
-    if (shouldChangePort) {
-      run(port);
-    }
-  });
+    prompt(question, true).then(shouldChangePort => {
+      if (shouldChangePort) {
+        run(port);
+      }
+    });
+  } else {
+    console.log(chalk.red('Something is already running on port ' + DEFAULT_PORT + '.'));
+  }
 });