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

…react-app

# By Dan Abramov (5) and others
# Via Dan Abramov
* 'master' of https://github.com/facebookincubator/create-react-app:
  docs(readme): peer dependencies applied (facebook#818)
  Fix typos on ISSUE_TEMPLATE.md (facebook#817)
  Add explicit linebreaks (facebook#813)
  Fix typo (facebook#810)
  Fix some typos (facebook#809)
  Beaufity output of eject.js script (facebook#769)
  Define process.env as object (facebook#807)
  Typo fix in webpack.config.dev.js comments (facebook#777)
  Add Netlify to deploy instructions
  Fix usage example to match react-dev-utils@0.2.x API
  Relaxed eslint rule no-unused-expressions (facebook#724)
  Fix the doc
  Publish
  Add 0.6.1 changelog
  Moved Babel and ESLint config to package.json after ejecting (facebook#773)

Conflicts:
	packages/react-scripts/package.json

CHANGELOG.md

@@ -1,3 +1,21 @@
+## 0.6.1 (September 27, 2016)
+
+### Build Dependency (`react-scripts`)
+
+* Babel and ESLint configuration is now placed into `package.json` after ejecting. ([@montogeek](https://github.com/montogeek) in [#773](https://github.com/facebookincubator/create-react-app/pull/773))
+
+### Utilities (`react-dev-utils`)
+
+* Fixes the syntax error overlay padding. ([@fson](https://github.com/fson) in [#758](https://github.com/facebookincubator/create-react-app/pull/758))
+
+### Migrating from 0.6.0 to 0.6.1
+
+Inside any created project that has not been ejected, run:
+
+```
+npm install --save-dev --save-exact react-scripts@0.6.1
+```
+
 ## 0.6.0 (September 25, 2016)
 
 ### Build Dependency (`react-scripts`)

ISSUE_TEMPLATE.md

@@ -1,4 +1,4 @@
-If you are reporting a bug, please fill in below. Otherwise feel to remove this template entirely.
+If you are reporting a bug, please fill in below. Otherwise feel free to remove this template entirely.
 
 ### Description
 
@@ -31,7 +31,7 @@ Please take the time to create a new app that reproduces the issue.
 
 Alternatively, you could copy your app that experiences the problem and start removing things until you’re left with the minimal reproducible demo.
 
-(Accidentially, you might get to the root of your problem during that process.)
+(Accidentally, you might get to the root of your problem during that process.)
 
 Push to GitHub and paste the link here.
 

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

@@ -12,7 +12,7 @@ The easiest way to use this configuration is with [Create React App](https://git
 
 ## Usage Outside of Create React App
 
-If you want to use this ESLint configuration in a project not built with Create React App, you can install it with following steps.
+If you want to use this Babel preset in a project not built with Create React App, you can install it with following steps.
 
 First, [install Babel](https://babeljs.io/docs/setup/).
 

packages/eslint-config-react-app/README.md

@@ -17,7 +17,7 @@ If you want to use this ESLint configuration in a project not built with Create
 First, install this package, ESLint and the necessary plugins.
 
   ```sh
-  npm install --save-dev eslint-config-react-app babel-eslint@6.1.2 eslint@3.5.0 eslint-plugin-flowtype@2.18.1 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-react@5.2.2
+  npm install --save-dev eslint-config-react-app babel-eslint@6.1.2 eslint@3.5.0 eslint-plugin-flowtype@2.18.1 eslint-plugin-import@1.12.0 eslint-plugin-jsx-a11y@2.2.2 eslint-plugin-react@6.3.0
   ```
 
 Then create a file named `.eslintrc` with following contents in the root folder of your project:

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

@@ -9,7 +9,7 @@
 
 // Inspired by https://github.com/airbnb/javascript but less opinionated.
 
-// We use eslint-loader so even warnings are very visibile.
+// We use eslint-loader so even warnings are very visible.
 // This is why we only use "WARNING" level for potential errors,
 // and we don't use "ERROR" level at all.
 
@@ -127,7 +127,10 @@ module.exports = {
     'no-undef': 'error',
     'no-unexpected-multiline': 'warn',
     'no-unreachable': 'warn',
-    'no-unused-expressions': 'warn',
+    'no-unused-expressions': ['warn', {
+      'allowShortCircuit': true,
+      'allowTernary': true
+    }],
     'no-unused-labels': 'warn',
     'no-unused-vars': ['warn', {
       vars: 'local',

packages/react-dev-utils/README.md

@@ -110,7 +110,7 @@ clearConsole();
 console.log('Just cleared the screen!');
 ```
 
-#### `formatWebpackMessages(stats: WebpackStats): {errors: Array<string>, warnings: Array<string>}`
+#### `formatWebpackMessages({errors: Array<string>, warnings: Array<string>}): {errors: Array<string>, warnings: Array<string>}`
 
 Extracts and prettifies warning and error messages from webpack [stats](https://github.com/webpack/docs/wiki/node.js-api#stats) object.
 
@@ -125,7 +125,8 @@ compiler.plugin('invalid', function() {
 });
 
 compiler.plugin('done', function(stats) {
-  var messages = formatWebpackMessages(stats);
+  var rawMessages = stats.toJson({}, true);
+  var messages = formatWebpackMessages(rawMessages);
   if (!messages.errors.length && !messages.warnings.length) {
     console.log('Compiled successfully!');
   }

packages/react-dev-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-dev-utils",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Webpack utilities used by Create React App",
   "repository": "facebookincubator/create-react-app",
   "license": "BSD-3-Clause",

packages/react-dev-utils/webpackHotDevClient.js

@@ -106,7 +106,7 @@ function ensureOverlayDivExists(onOverlayDivReady) {
     lastOnOverlayDivReady(overlayDiv);
   });
 
-  // Zalgo alert: onIframeLoad() will be called either synchronouly
+  // Zalgo alert: onIframeLoad() will be called either synchronously
   // or asynchronously depending on the browser.
   // We delay adding it so `overlayIframe` is set when `onIframeLoad` fires.
   document.body.appendChild(overlayIframe);

packages/react-scripts/config/env.js

@@ -15,24 +15,25 @@
 var REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  return Object
+  var processEnv = Object
     .keys(process.env)
     .filter(key => REACT_APP.test(key))
     .reduce((env, key) => {
-      env['process.env.' + key] = JSON.stringify(process.env[key]);
+      env[key] = JSON.stringify(process.env[key]);
       return env;
     }, {
       // Useful for determining whether we’re running in production mode.
       // Most importantly, it switches React into the correct mode.
-      'process.env.NODE_ENV': JSON.stringify(
+      'NODE_ENV': JSON.stringify(
         process.env.NODE_ENV || 'development'
       ),
       // Useful for resolving the correct path to static assets in `public`.
       // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
       // This should only be used as an escape hatch. Normally you would put
       // images into the `src` and `import` them in code to get their paths.
-      'process.env.PUBLIC_URL': JSON.stringify(publicUrl)
+      'PUBLIC_URL': JSON.stringify(publicUrl)
     });
+  return {'process.env': processEnv};
 }
 
 module.exports = getClientEnvironment;

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

@@ -26,9 +26,9 @@ var getCustomConfig = require('./get-custom-config');
 var publicPath = '/';
 // `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 = '';
-// Get enrivonment variables to inject into our app.
+// Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);
 //Get custom configuration for injecting plugins, presets and loaders
 var customConfig = getCustomConfig(false);

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

@@ -45,14 +45,14 @@ var publicPath = ensureSlash(homepagePathname, true);
 // 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.
 var publicUrl = ensureSlash(homepagePathname, false);
-// Get enrivonment variables to inject into our app.
+// Get environment variables to inject into our app.
 var env = getClientEnvironment(publicUrl);
 //Get custom configuration for injecting plugins, presets and loaders
 var customConfig = getCustomConfig(true);
 
 // Assert this just to be safe.
 // Development builds of React are slow and not intended for production.
-if (env['process.env.NODE_ENV'] !== '"production"') {
+if (env['process.env'].NODE_ENV !== '"production"') {
   throw new Error('Production builds must have NODE_ENV=production.');
 }
 

packages/react-scripts/package.json

@@ -63,7 +63,7 @@
     "path-exists": "2.1.0",
     "postcss-loader": "0.13.0",
     "promise": "7.1.1",
-    "react-dev-utils": "^0.2.0",
+    "react-dev-utils": "^0.2.1",
     "recursive-readdir": "2.1.0",
     "rimraf": "2.5.4",
     "strip-ansi": "3.0.1",

packages/react-scripts/scripts/build.js

@@ -12,7 +12,7 @@
 // Do this as the first thing so that any code reading it knows the right env.
 process.env.NODE_ENV = 'production';
 
-// Load environment variables from .env file. Surpress warnings using silent
+// Load environment variables from .env file. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.
 // https://github.com/motdotla/dotenv

packages/react-scripts/scripts/eject.js

@@ -13,24 +13,24 @@ var path = require('path');
 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;
+var cyan = chalk.cyan;
 
 prompt(
   'Are you sure you want to eject? This action is permanent.',
   false
 ).then(shouldEject => {
   if (!shouldEject) {
-    console.log('Close one! Eject aborted.');
+    console.log(cyan('Close one! Eject aborted.'));
     process.exit(1);
   }
 
   console.log('Ejecting...');
-  console.log();
 
   var ownPath = path.join(__dirname, '..');
   var appPath = path.join(ownPath, '..', '..');
   var files = [
-    '.babelrc',
-    '.eslintrc',
     path.join('config', 'env.js'),
     path.join('config', 'paths.js'),
     path.join('config', 'polyfills.js'),
@@ -61,8 +61,10 @@ prompt(
   fs.mkdirSync(path.join(appPath, 'config', 'jest'));
   fs.mkdirSync(path.join(appPath, 'scripts'));
 
+  console.log();
+  console.log('Copying files to ' + cyan(appPath));
   files.forEach(function(file) {
-    console.log('Copying ' + file + ' to ' + appPath);
+    console.log('  Copying ' + cyan(file));
     var content = fs
         .readFileSync(path.join(ownPath, file), 'utf8')
         // Remove dead code from .js files on eject
@@ -76,48 +78,68 @@ prompt(
 
   var ownPackage = require(path.join(ownPath, 'package.json'));
   var appPackage = require(path.join(appPath, 'package.json'));
+  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...'));
   var ownPackageName = ownPackage.name;
-  console.log('Removing dependency: ' + ownPackageName);
+  console.log('  Removing dependency: ' + cyan(ownPackageName));
   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: ' + key);
+    console.log('  Adding dependency: ' + cyan(key));
     appPackage.devDependencies[key] = ownPackage.dependencies[key];
   });
-
-  console.log('Updating scripts');
+  console.log();
+  console.log(cyan('Updating 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 + '\"') +
+      ' with ' +
+      cyan('\"' + appPackage.scripts[key] + '\"')
+    );
   });
 
+  console.log();
+  console.log(cyan('Adding configuration to ') + 'package.json' + cyan('...'));
   // Add Jest config
+  console.log('  Adding ' + cyan('Jest') + ' configuration');
   appPackage.jest = createJestConfig(
     filePath => path.join('<rootDir>', filePath),
     null,
     true
   );
 
-  console.log('Writing package.json');
+  // Add Babel config
+
+  console.log('  Adding ' + cyan('Babel') + ' preset');
+  appPackage.babel = babelConfig;
+
+  // Add ESlint config
+  console.log('  Adding ' + cyan('ESLint') +' configuration');
+  appPackage.eslintConfig = eslintConfig;
+
   fs.writeFileSync(
     path.join(appPath, 'package.json'),
     JSON.stringify(appPackage, null, 2)
   );
   console.log();
 
-  console.log('Running npm install...');
+  console.log(cyan('Running npm install...'));
   rimrafSync(ownPath);
   spawnSync('npm', ['install'], {stdio: 'inherit'});
-  console.log('Ejected successfully!');
+  console.log(green('Ejected successfully!'));
   console.log();
 
-  console.log('Please consider sharing why you ejected in this survey:');
-  console.log('  http://goo.gl/forms/Bi6CZjk1EqsdelXk1');
-  console.log();
-});
+  console.log(green('Please consider sharing why you ejected in this survey:'));
+  console.log(green('  http://goo.gl/forms/Bi6CZjk1EqsdelXk1'));
+  console.log()
+})

packages/react-scripts/scripts/start.js

@@ -11,7 +11,7 @@
 
 process.env.NODE_ENV = 'development';
 
-// Load environment variables from .env file. Surpress warnings using silent
+// Load environment variables from .env file. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.
 // https://github.com/motdotla/dotenv

packages/react-scripts/scripts/test.js

@@ -12,7 +12,7 @@
 process.env.NODE_ENV = 'test';
 process.env.PUBLIC_URL = '';
 
-// Load environment variables from .env file. Surpress warnings using silent
+// Load environment variables from .env file. Suppress warnings using silent
 // if this file is missing. dotenv will never modify any environment variables
 // that have already been set.
 // https://github.com/motdotla/dotenv