Merge pull request #1 from facebookincubator/master

merge official changes

Author: mofelee

.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

CONTRIBUTING.md

@@ -68,7 +68,7 @@ and then run `npm start` or `npm run build`.
 6. Make sure to include “Migrating from ...” instructions for the previous release. Often you can copy and paste them.
 7. After merging the changelog update, create a GitHub Release with the same text. See previous Releases for inspiration.
 8. **Do not run `npm publish`. Instead, run `npm run publish`.**
-9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. It will bundle dependencies into a single tarball before publishing for faster installs. In the end the publish script will prompt for versions before publishing the packages.
+9. Wait for a long time, and it will get published. Don’t worry that it’s stuck. In the end the publish script will prompt for versions before publishing the packages.
 
 Make sure to test the released version! If you want to be extra careful, you can publish a prerelease by running `npm run publish -- --tag next` instead of `npm run publish`.
 

README.md

@@ -109,6 +109,7 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Post-Processing CSS](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#post-processing-css)
 - [Adding Images and Fonts](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-images-and-fonts)
 - [Using the `public` Folder](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-the-public-folder)
+- [Using Global Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-global-variables)
 - [Adding Bootstrap](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-bootstrap)
 - [Adding Flow](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-flow)
 - [Adding Custom Environment Variables](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-custom-environment-variables)
@@ -118,7 +119,9 @@ The [User Guide](https://github.com/facebookincubator/create-react-app/blob/mast
 - [Using HTTPS in Development](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#using-https-in-development)
 - [Generating Dynamic `<meta>` Tags on the Server](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#generating-dynamic-meta-tags-on-the-server)
 - [Running Tests](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#running-tests)
+- [Developing Components in Isolation](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#developing-components-in-isolation)
 - [Deployment](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment)
+- [Troubleshooting](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#troubleshooting)
 
 A copy of the user guide will be created as `README.md` in your project folder.
 
@@ -130,7 +133,7 @@ Please refer to the [User Guide](https://github.com/facebookincubator/create-rea
 
 * **One Dependency:** There is just one build dependency. It uses Webpack, Babel, ESLint, and other amazing projects, but provides a cohesive curated experience on top of them.
 
-* **Zero Configuration:** There are no configuration files or command line options. Configuring both development and production builds is handled for you so you can focus on writing code.
+* **Convention over Configuration:** You don't need to configure anything by default. Reasonably good configuration of both development and production builds is handled for you so you can focus on writing code.
 
 * **No Lock-In:** You can “eject” to a custom setup at any time. Run a single command, and all the configuration and build dependencies will be moved directly into your project, so you can pick up right where you left off.
 
@@ -206,6 +209,7 @@ Some of the more popular and actively maintained ones are:
 * [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/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/index.js

@@ -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
@@ -27,15 +35,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 +54,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 +74,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 +105,3 @@ if (env === 'test') {
     // ]);
   }
 }
-

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

@@ -12,15 +12,14 @@
   ],
   "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": "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",
     "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

@@ -43,8 +43,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)$',
+      'node_modules'
     ],
     'import/extensions': ['.js'],
     'import/resolver': {

packages/react-dev-utils/README.md

@@ -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/getProcessForPort.js

@@ -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/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

@@ -14,6 +14,7 @@
     "clearConsole.js",
     "checkRequiredFiles.js",
     "formatWebpackMessages.js",
+    "getProcessForPort.js",
     "InterpolateHtmlPlugin.js",
     "openChrome.applescript",
     "openBrowser.js",
@@ -29,8 +30,5 @@
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",
     "strip-ansi": "3.0.1"
-  },
-  "peerDependencies": {
-    "webpack": "^1.13.2"
   }
 }

packages/react-scripts/config/jest/transform.js

@@ -9,5 +9,6 @@
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
-  presets: [require.resolve('babel-preset-react-app')]
+  presets: [require.resolve('babel-preset-react-app')],
+  babelrc: false
 });

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,13 +63,13 @@ 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:
   ownNodeModules: resolveOwn('../node_modules'),
   nodePaths: nodePaths
 };
-// @remove-on-eject-end
 
 // config before publish: we're in ./packages/react-scripts/config/
 if (__dirname.indexOf(path.join('packages', 'react-scripts', 'config')) !== -1) {
@@ -79,9 +80,11 @@ 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'),
     nodePaths: nodePaths
   };
 }
+// @remove-on-eject-end