update to modern code style (#1738)

* mv create-react-app/index.js -> create-react-app/creteReactApp.js

* update to modern code style

* var -> cosnt

* set trailing-coma to es5 for prettier

package.json

@@ -8,11 +8,13 @@
     "postinstall": "lerna bootstrap",
     "publish": "tasks/release.sh",
     "start": "node packages/react-scripts/scripts/start.js",
-    "test": "node packages/react-scripts/scripts/test.js --env=jsdom"
+    "test": "node packages/react-scripts/scripts/test.js --env=jsdom",
+    "format": "prettier --trailing-comma es5 --single-quote --write 'packages/*/*.js' 'packages/*/!(node_modules)/**/*.js'"
   },
   "devDependencies": {
     "eslint": "3.16.1",
     "lerna": "2.0.0-beta.38",
-    "lerna-changelog": "^0.2.3"
+    "lerna-changelog": "^0.2.3",
+    "prettier": "^0.21.0"
   }
 }

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

@@ -16,21 +16,30 @@ const plugins = [
   // 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'), {
-    useBuiltIns: true
-  }],
+  [
+    require.resolve('babel-plugin-transform-object-rest-spread'),
+    {
+      useBuiltIns: true,
+    },
+  ],
   // Transforms JSX
-  [require.resolve('babel-plugin-transform-react-jsx'), {
-    useBuiltIns: true
-  }],
+  [
+    require.resolve('babel-plugin-transform-react-jsx'),
+    {
+      useBuiltIns: true,
+    },
+  ],
   // Polyfills the runtime needed for async/await and generators
-  [require.resolve('babel-plugin-transform-runtime'), {
-    helpers: false,
-    polyfill: false,
-    regenerator: true,
-    // Resolve the Babel runtime relative to the config.
-    moduleName: path.dirname(require.resolve('babel-runtime/package'))
-  }]
+  [
+    require.resolve('babel-plugin-transform-runtime'),
+    {
+      helpers: false,
+      polyfill: false,
+      regenerator: true,
+      // Resolve the Babel runtime relative to the config.
+      moduleName: path.dirname(require.resolve('babel-runtime/package')),
+    },
+  ],
 ];
 
 // This is similar to how `env` works in Babel:
@@ -42,9 +51,11 @@ const plugins = [
 var env = process.env.BABEL_ENV || process.env.NODE_ENV;
 if (env !== 'development' && env !== 'test' && env !== 'production') {
   throw new Error(
-    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or '+
-    '`BABEL_ENV` environment variables. Valid values are "development", ' +
-    '"test", and "production". Instead, received: ' + JSON.stringify(env) + '.'
+    'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
+      '`BABEL_ENV` environment variables. Valid values are "development", ' +
+      '"test", and "production". Instead, received: ' +
+      JSON.stringify(env) +
+      '.'
   );
 }
 
@@ -59,7 +70,7 @@ if (env === 'development' || env === 'test') {
     // Adds component stack to warning messages
     require.resolve('babel-plugin-transform-react-jsx-source'),
     // Adds __self attribute to JSX which React will use for some warnings
-    require.resolve('babel-plugin-transform-react-jsx-self')
+    require.resolve('babel-plugin-transform-react-jsx-self'),
   ]);
 }
 
@@ -67,46 +78,55 @@ if (env === 'test') {
   module.exports = {
     presets: [
       // ES features necessary for user's Node version
-      [require('babel-preset-env').default, {
-        targets: {
-          node: 'current',
+      [
+        require('babel-preset-env').default,
+        {
+          targets: {
+            node: 'current',
+          },
         },
-      }],
+      ],
       // JSX, Flow
-      require.resolve('babel-preset-react')
+      require.resolve('babel-preset-react'),
     ],
     plugins: plugins.concat([
       // Compiles import() to a deferred require()
-      require.resolve('babel-plugin-dynamic-import-node')
-    ])
+      require.resolve('babel-plugin-dynamic-import-node'),
+    ]),
   };
 } else {
   module.exports = {
     presets: [
       // Latest stable ECMAScript features
-      [require.resolve('babel-preset-env'), {
-        targets: {
-          // React parses on ie 9, so we should too
-          ie: 9,
-          // We currently minify with uglify
-          // Remove after https://github.com/mishoo/UglifyJS2/issues/448
-          uglify: true
+      [
+        require.resolve('babel-preset-env'),
+        {
+          targets: {
+            // React parses on ie 9, so we should too
+            ie: 9,
+            // We currently minify with uglify
+            // Remove after https://github.com/mishoo/UglifyJS2/issues/448
+            uglify: true,
+          },
+          // Disable polyfill transforms
+          useBuiltIns: false,
         },
-        // Disable polyfill transforms
-        useBuiltIns: false
-      }],
+      ],
       // JSX, Flow
-      require.resolve('babel-preset-react')
+      require.resolve('babel-preset-react'),
     ],
     plugins: plugins.concat([
       // function* () { yield 42; yield 43; }
-      [require.resolve('babel-plugin-transform-regenerator'), {
-        // Async functions are converted to generators by babel-preset-latest
-        async: false
-      }],
+      [
+        require.resolve('babel-plugin-transform-regenerator'),
+        {
+          // Async functions are converted to generators by babel-preset-latest
+          async: false,
+        },
+      ],
       // Adds syntax support for import()
       require.resolve('babel-plugin-syntax-dynamic-import'),
-    ])
+    ]),
   };
 
   if (env === 'production') {

packages/create-react-app/createReactApp.js

+/**
+ * Copyright (c) 2015-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ */
+'use strict';
+
+const validateProjectName = require('validate-npm-package-name');
+const chalk = require('chalk');
+const commander = require('commander');
+const fs = require('fs-extra');
+const path = require('path');
+const execSync = require('child_process').execSync;
+const spawn = require('cross-spawn');
+const semver = require('semver');
+const dns = require('dns');
+const tmp = require('tmp');
+const unpack = require('tar-pack').unpack;
+const hyperquest = require('hyperquest');
+
+let projectName;
+
+const program = commander
+  .version(require('./package.json').version)
+  .arguments('<project-directory>')
+  .usage(`${chalk.green('<project-directory>')} [options]`)
+  .action(name => {
+    projectName = name;
+  })
+  .option('--verbose', 'print additional logs')
+  .option(
+    '--scripts-version <alternative-package>',
+    'use a non-standard version of react-scripts'
+  )
+  .allowUnknownOption()
+  .on('--help', () => {
+    console.log(`    Only ${chalk.green('<project-directory>')} is required.`);
+    console.log();
+    console.log(
+      `    A custom ${chalk.cyan('--scripts-version')} can be one of:`
+    );
+    console.log(`      - a specific npm version: ${chalk.green('0.8.2')}`);
+    console.log(
+      `      - a custom fork published on npm: ${chalk.green('my-react-scripts')}`
+    );
+    console.log(
+      `      - a .tgz archive: ${chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz')}`
+    );
+    console.log(
+      `    It is not needed unless you specifically want to use a fork.`
+    );
+    console.log();
+    console.log(
+      `    If you have any problems, do not hesitate to file an issue:`
+    );
+    console.log(
+      `      ${chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new')}`
+    );
+    console.log();
+  })
+  .parse(process.argv);
+
+if (typeof projectName === 'undefined') {
+  console.error('Please specify the project directory:');
+  console.log(
+    `  ${chalk.cyan(program.name())} ${chalk.green('<project-directory>')}`
+  );
+  console.log();
+  console.log('For example:');
+  console.log(`  ${chalk.cyan(program.name())} ${chalk.green('my-react-app')}`);
+  console.log();
+  console.log(
+    `Run ${chalk.cyan(`${program.name()} --help`)} to see all options.`
+  );
+  process.exit(1);
+}
+
+function printValidationResults(results) {
+  if (typeof results !== 'undefined') {
+    results.forEach(error => {
+      console.error(chalk.red(`  *  ${error}`));
+    });
+  }
+}
+
+const hiddenProgram = new commander.Command()
+  .option(
+    '--internal-testing-template <path-to-template>',
+    '(internal usage only, DO NOT RELY ON THIS) ' +
+      'use a non-standard application template'
+  )
+  .parse(process.argv);
+
+createApp(
+  projectName,
+  program.verbose,
+  program.scriptsVersion,
+  hiddenProgram.internalTestingTemplate
+);
+
+function createApp(name, verbose, version, template) {
+  const root = path.resolve(name);
+  const appName = path.basename(root);
+
+  checkAppName(appName);
+  fs.ensureDirSync(name);
+  if (!isSafeToCreateProjectIn(root)) {
+    console.log(
+      `The directory ${chalk.green(name)} contains files that could conflict.`
+    );
+    console.log('Try using a new directory name.');
+    process.exit(1);
+  }
+
+  console.log(`Creating a new React app in ${chalk.green(root)}.`);
+  console.log();
+
+  const packageJson = {
+    name: appName,
+    version: '0.1.0',
+    private: true,
+  };
+  fs.writeFileSync(
+    path.join(root, 'package.json'),
+    JSON.stringify(packageJson, null, 2)
+  );
+  const originalDirectory = process.cwd();
+  process.chdir(root);
+
+  run(root, appName, version, verbose, originalDirectory, template);
+}
+
+function shouldUseYarn() {
+  try {
+    execSync('yarnpkg --version', { stdio: 'ignore' });
+    return true;
+  } catch (e) {
+    return false;
+  }
+}
+
+function install(useYarn, dependencies, verbose, isOnline) {
+  return new Promise((resolve, reject) => {
+    let command;
+    let args;
+    if (useYarn) {
+      command = 'yarnpkg';
+      args = ['add', '--exact'];
+      if (!isOnline) {
+        args.push('--offline');
+      }
+      [].push.apply(args, dependencies);
+
+      if (!isOnline) {
+        console.log(chalk.yellow('You appear to be offline.'));
+        console.log(chalk.yellow('Falling back to the local Yarn cache.'));
+        console.log();
+      }
+    } else {
+      checkNpmVersion();
+      command = 'npm';
+      args = ['install', '--save', '--save-exact'].concat(dependencies);
+    }
+
+    if (verbose) {
+      args.push('--verbose');
+    }
+
+    const child = spawn(command, args, { stdio: 'inherit' });
+    child.on('close', code => {
+      if (code !== 0) {
+        reject({
+          command: `${command} ${args.join(' ')}`,
+        });
+        return;
+      }
+      resolve();
+    });
+  });
+}
+
+function run(root, appName, version, verbose, originalDirectory, template) {
+  const packageToInstall = getInstallPackage(version);
+  const allDependencies = ['react', 'react-dom', packageToInstall];
+
+  console.log('Installing packages. This might take a couple minutes.');
+
+  const useYarn = shouldUseYarn();
+  getPackageName(packageToInstall)
+    .then(packageName => checkIfOnline(useYarn).then(isOnline => ({
+      isOnline: isOnline,
+      packageName: packageName,
+    })))
+    .then(info => {
+      const isOnline = info.isOnline;
+      const packageName = info.packageName;
+      console.log(
+        `Installing ${chalk.cyan('react')}, ${chalk.cyan('react-dom')}, and ${chalk.cyan(packageName)}...`
+      );
+      console.log();
+
+      return install(useYarn, allDependencies, verbose, isOnline).then(
+        () => packageName
+      );
+    })
+    .then(packageName => {
+      checkNodeVersion(packageName);
+
+      // Since react-scripts has been installed with --save
+      // we need to move it into devDependencies and rewrite package.json
+      // also ensure react dependencies have caret version range
+      fixDependencies(packageName);
+
+      const scriptsPath = path.resolve(
+        process.cwd(),
+        'node_modules',
+        packageName,
+        'scripts',
+        'init.js'
+      );
+      const init = require(scriptsPath);
+      init(root, appName, verbose, originalDirectory, template);
+    })
+    .catch(reason => {
+      console.log();
+      console.log('Aborting installation.');
+      if (reason.command) {
+        console.log(`  ${chalk.cyan(reason.command)} has failed.`);
+      } else {
+        console.log(chalk.red('Unexpected error. Please report it as a bug:'));
+        console.log(reason);
+      }
+      console.log();
+
+      // On 'exit' we will delete these files from target directory.
+      const knownGeneratedFiles = [
+        'package.json',
+        'npm-debug.log',
+        'yarn-error.log',
+        'yarn-debug.log',
+        'node_modules',
+      ];
+      const currentFiles = fs.readdirSync(path.join(root));
+      currentFiles.forEach(file => {
+        knownGeneratedFiles.forEach(fileToMatch => {
+          // This will catch `(npm-debug|yarn-error|yarn-debug).log*` files
+          // and the rest of knownGeneratedFiles.
+          if (
+            (fileToMatch.match(/.log/g) && file.indexOf(fileToMatch) === 0) ||
+            file === fileToMatch
+          ) {
+            console.log(`Deleting generated file... ${chalk.cyan(file)}`);
+            fs.removeSync(path.join(root, file));
+          }
+        });
+      });
+      const remainingFiles = fs.readdirSync(path.join(root));
+      if (!remainingFiles.length) {
+        // Delete target folder if empty
+        console.log(
+          `Deleting ${chalk.cyan(`${appName} /`)} from ${chalk.cyan(path.resolve(root, '..'))}`
+        );
+        process.chdir(path.resolve(root, '..'));
+        fs.removeSync(path.join(root));
+      }
+      console.log('Done.');
+      process.exit(1);
+    });
+}
+
+function getInstallPackage(version) {
+  let packageToInstall = 'react-scripts';
+  const validSemver = semver.valid(version);
+  if (validSemver) {
+    packageToInstall += `@${validSemver}`;
+  } else if (version) {
+    // for tar.gz or alternative paths
+    packageToInstall = version;
+  }
+  return packageToInstall;
+}
+
+function getTemporaryDirectory() {
+  return new Promise((resolve, reject) => {
+    // Unsafe cleanup lets us recursively delete the directory if it contains
+    // contents; by default it only allows removal if it's empty
+    tmp.dir({ unsafeCleanup: true }, (err, tmpdir, callback) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve({
+          tmpdir: tmpdir,
+          cleanup: () => {
+            try {
+              callback();
+            } catch (ignored) {
+              // Callback might throw and fail, since it's a temp directory the
+              // OS will clean it up eventually...
+            }
+          },
+        });
+      }
+    });
+  });
+}
+
+function extractStream(stream, dest) {
+  return new Promise((resolve, reject) => {
+    stream.pipe(
+      unpack(dest, err => {
+        if (err) {
+          reject(err);
+        } else {
+          resolve(dest);
+        }
+      })
+    );
+  });
+}
+
+// Extract package name from tarball url or path.
+function getPackageName(installPackage) {
+  if (installPackage.indexOf('.tgz') > -1) {
+    return getTemporaryDirectory()
+      .then(obj => {
+        let stream;
+        if (/^http/.test(installPackage)) {
+          stream = hyperquest(installPackage);
+        } else {
+          stream = fs.createReadStream(installPackage);
+        }
+        return extractStream(stream, obj.tmpdir).then(() => obj);
+      })
+      .then(obj => {
+        const packageName = require(path.join(obj.tmpdir, 'package.json')).name;
+        obj.cleanup();
+        return packageName;
+      })
+      .catch(err => {
+        // The package name could be with or without semver version, e.g. react-scripts-0.2.0-alpha.1.tgz
+        // However, this function returns package name only without semver version.
+        console.log(
+          `Could not extract the package name from the archive: ${err.message}`
+        );
+        const assumedProjectName = installPackage.match(
+          /^.+\/(.+?)(?:-\d+.+)?\.tgz$/
+        )[1];
+        console.log(
+          `Based on the filename, assuming it is "${chalk.cyan(assumedProjectName)}"`
+        );
+        return Promise.resolve(assumedProjectName);
+      });
+  } else if (installPackage.indexOf('git+') === 0) {
+    // Pull package name out of git urls e.g:
+    // git+https://github.com/mycompany/react-scripts.git
+    // git+ssh://github.com/mycompany/react-scripts.git#v1.2.3
+    return Promise.resolve(installPackage.match(/([^\/]+)\.git(#.*)?$/)[1]);
+  } else if (installPackage.indexOf('@') > 0) {
+    // Do not match @scope/ when stripping off @version or @tag
+    return Promise.resolve(
+      installPackage.charAt(0) + installPackage.substr(1).split('@')[0]
+    );
+  }
+  return Promise.resolve(installPackage);
+}
+
+function checkNpmVersion() {
+  let isNpm2 = false;
+  try {
+    const npmVersion = execSync('npm --version').toString();
+    isNpm2 = semver.lt(npmVersion, '3.0.0');
+  } catch (err) {
+    return;
+  }
+  if (!isNpm2) {
+    return;
+  }
+  console.log(chalk.yellow('It looks like you are using npm 2.'));
+  console.log(
+    chalk.yellow(
+      'We suggest using npm 3 or Yarn for faster install times ' +
+        'and less disk space usage.'
+    )
+  );
+  console.log();
+}
+
+function checkNodeVersion(packageName) {
+  const packageJsonPath = path.resolve(
+    process.cwd(),
+    'node_modules',
+    packageName,
+    'package.json'
+  );
+  const packageJson = require(packageJsonPath);
+  if (!packageJson.engines || !packageJson.engines.node) {
+    return;
+  }
+
+  if (!semver.satisfies(process.version, packageJson.engines.node)) {
+    console.error(
+      chalk.red(
+        'You are running Node %s.\n' +
+          'Create React App requires Node %s or higher. \n' +
+          'Please update your version of Node.'
+      ),
+      process.version,
+      packageJson.engines.node
+    );
+    process.exit(1);
+  }
+}
+
+function checkAppName(appName) {
+  const validationResult = validateProjectName(appName);
+  if (!validationResult.validForNewPackages) {
+    console.error(
+      `Could not create a project called ${chalk.red(`"${appName}"`)} because of npm naming restrictions:`
+    );
+    printValidationResults(validationResult.errors);
+    printValidationResults(validationResult.warnings);
+    process.exit(1);
+  }
+
+  // TODO: there should be a single place that holds the dependencies
+  const dependencies = ['react', 'react-dom'];
+  const devDependencies = ['react-scripts'];
+  const allDependencies = dependencies.concat(devDependencies).sort();
+  if (allDependencies.indexOf(appName) >= 0) {
+    console.error(
+      chalk.red(
+        `We cannot create a project called ${chalk.green(appName)} because a dependency with the same name exists.\n` +
+          `Due to the way npm works, the following names are not allowed:\n\n`
+      ) +
+        chalk.cyan(allDependencies.map(depName => `  ${depName}`).join('\n')) +
+        chalk.red('\n\nPlease choose a different project name.')
+    );
+    process.exit(1);
+  }
+}
+
+function makeCaretRange(dependencies, name) {
+  const version = dependencies[name];
+
+  if (typeof version === 'undefined') {
+    console.error(chalk.red(`Missing ${name} dependency in package.json`));
+    process.exit(1);
+  }
+
+  let patchedVersion = `^${version}`;
+
+  if (!semver.validRange(patchedVersion)) {
+    console.error(
+      `Unable to patch ${name} dependency version because version ${chalk.red(version)} will become invalid ${chalk.red(patchedVersion)}`
+    );
+    patchedVersion = version;
+  }
+
+  dependencies[name] = patchedVersion;
+}
+
+function fixDependencies(packageName) {
+  const packagePath = path.join(process.cwd(), 'package.json');
+  const packageJson = require(packagePath);
+
+  if (typeof packageJson.dependencies === 'undefined') {
+    console.error(chalk.red('Missing dependencies in package.json'));
+    process.exit(1);
+  }
+
+  const packageVersion = packageJson.dependencies[packageName];
+
+  if (typeof packageVersion === 'undefined') {
+    console.error(chalk.red(`Unable to find ${packageName} in package.json`));
+    process.exit(1);
+  }
+
+  packageJson.devDependencies = packageJson.devDependencies || {};
+  packageJson.devDependencies[packageName] = packageVersion;
+  delete packageJson.dependencies[packageName];
+
+  makeCaretRange(packageJson.dependencies, 'react');
+  makeCaretRange(packageJson.dependencies, 'react-dom');
+
+  fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2));
+}
+
+// If project only contains files generated by GH, it’s safe.
+// We also special case IJ-based products .idea because it integrates with CRA:
+// https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094
+function isSafeToCreateProjectIn(root) {
+  const validFiles = [
+    '.DS_Store',
+    'Thumbs.db',
+    '.git',
+    '.gitignore',
+    '.idea',
+    'README.md',
+    'LICENSE',
+    'web.iml',
+  ];
+  return fs.readdirSync(root).every(file => validFiles.indexOf(file) >= 0);
+}
+
+function checkIfOnline(useYarn) {
+  if (!useYarn) {
+    // Don't ping the Yarn registry.
+    // We'll just assume the best case.
+    return Promise.resolve(true);
+  }
+
+  return new Promise(resolve => {
+    dns.resolve('registry.yarnpkg.com', err => {
+      resolve(err === null);
+    });
+  });
+}

packages/create-react-app/index.js

@@ -39,489 +39,19 @@
 'use strict';
 
 var chalk = require('chalk');
-var validateProjectName = require("validate-npm-package-name");
 
 var currentNodeVersion = process.versions.node;
 if (currentNodeVersion.split('.')[0] < 4) {
   console.error(
     chalk.red(
-      'You are running Node ' + currentNodeVersion + '.\n' +
-      'Create React App requires Node 4 or higher. \n' +
-      'Please update your version of Node.'
+      'You are running Node ' +
+        currentNodeVersion +
+        '.\n' +
+        'Create React App requires Node 4 or higher. \n' +
+        'Please update your version of Node.'
     )
   );
   process.exit(1);
 }
 
-var commander = require('commander');
-var fs = require('fs-extra');
-var path = require('path');
-var execSync = require('child_process').execSync;
-var spawn = require('cross-spawn');
-var semver = require('semver');
-var dns = require('dns');
-var tmp = require('tmp');
-var unpack = require('tar-pack').unpack;
-var hyperquest = require('hyperquest');
-
-var projectName;
-
-var program = commander
-  .version(require('./package.json').version)
-  .arguments('<project-directory>')
-  .usage(chalk.green('<project-directory>') + ' [options]')
-  .action(function (name) {
-    projectName = name;
-  })
-  .option('--verbose', 'print additional logs')
-  .option('--scripts-version <alternative-package>', 'use a non-standard version of react-scripts')
-  .allowUnknownOption()
-  .on('--help', function () {
-    console.log('    Only ' + chalk.green('<project-directory>') + ' is required.');
-    console.log();
-    console.log('    A custom ' + chalk.cyan('--scripts-version') + ' can be one of:');
-    console.log('      - a specific npm version: ' + chalk.green('0.8.2'));
-    console.log('      - a custom fork published on npm: ' + chalk.green('my-react-scripts'));
-    console.log('      - a .tgz archive: ' + chalk.green('https://mysite.com/my-react-scripts-0.8.2.tgz'));
-    console.log('    It is not needed unless you specifically want to use a fork.');
-    console.log();
-    console.log('    If you have any problems, do not hesitate to file an issue:');
-    console.log('      ' + chalk.cyan('https://github.com/facebookincubator/create-react-app/issues/new'));
-    console.log();
-  })
-  .parse(process.argv);
-
-if (typeof projectName === 'undefined') {
-  console.error('Please specify the project directory:');
-  console.log('  ' + chalk.cyan(program.name()) + chalk.green(' <project-directory>'));
-  console.log();
-  console.log('For example:');
-  console.log('  ' + chalk.cyan(program.name()) + chalk.green(' my-react-app'));
-  console.log();
-  console.log('Run ' + chalk.cyan(program.name() + ' --help') + ' to see all options.');
-  process.exit(1);
-}
-
-function printValidationResults(results) {
-  if (typeof results !== 'undefined') {
-    results.forEach(function (error) {
-      console.error(chalk.red('  * ' + error));
-    });
-  }
-}
-
-var hiddenProgram = new commander.Command()
-  .option('--internal-testing-template <path-to-template>', '(internal usage only, DO NOT RELY ON THIS) ' +
-    'use a non-standard application template')
-  .parse(process.argv)
-
-createApp(projectName, program.verbose, program.scriptsVersion, hiddenProgram.internalTestingTemplate);
-
-function createApp(name, verbose, version, template) {
-  var root = path.resolve(name);
-  var appName = path.basename(root);
-
-  checkAppName(appName);
-  fs.ensureDirSync(name);
-  if (!isSafeToCreateProjectIn(root)) {
-    console.log('The directory ' + chalk.green(name) + ' contains files that could conflict.');
-    console.log('Try using a new directory name.');
-    process.exit(1);
-  }
-
-  console.log(
-    'Creating a new React app in ' + chalk.green(root) + '.'
-  );
-  console.log();
-
-  var packageJson = {
-    name: appName,
-    version: '0.1.0',
-    private: true
-  };
-  fs.writeFileSync(
-    path.join(root, 'package.json'),
-    JSON.stringify(packageJson, null, 2)
-  );
-  var originalDirectory = process.cwd();
-  process.chdir(root);
-
-  run(root, appName, version, verbose, originalDirectory, template);
-}
-
-function shouldUseYarn() {
-  try {
-    execSync('yarnpkg --version', {stdio: 'ignore'});
-    return true;
-  } catch (e) {
-    return false;
-  }
-}
-
-function install(useYarn, dependencies, verbose, isOnline) {
-  return new Promise(function(resolve, reject) {
-    var command;
-    var args;
-    if (useYarn) {
-      command = 'yarnpkg';
-      args = [
-        'add',
-        '--exact',
-      ];
-      if (!isOnline) {
-        args.push('--offline');
-      }
-      [].push.apply(args, dependencies);
-
-      if (!isOnline) {
-        console.log(chalk.yellow('You appear to be offline.'));
-        console.log(chalk.yellow('Falling back to the local Yarn cache.'));
-        console.log();
-      }
-
-    } else {
-      checkNpmVersion();
-      command = 'npm';
-      args = ['install', '--save', '--save-exact'].concat(dependencies);
-    }
-
-    if (verbose) {
-      args.push('--verbose');
-    }
-
-    var child = spawn(command, args, {stdio: 'inherit'});
-    child.on('close', function(code) {
-      if (code !== 0) {
-        reject({
-          command: command + ' ' + args.join(' ')
-        });
-        return;
-      }
-      resolve();
-    });
-  });
-}
-
-function run(root, appName, version, verbose, originalDirectory, template) {
-  var packageToInstall = getInstallPackage(version);
-  var allDependencies = ['react', 'react-dom', packageToInstall];
-
-  console.log('Installing packages. This might take a couple minutes.');
-
-  var useYarn = shouldUseYarn();
-  getPackageName(packageToInstall)
-    .then(function(packageName) {
-      return checkIfOnline(useYarn).then(function(isOnline) {
-        return {
-          isOnline: isOnline,
-          packageName: packageName,
-        };
-      });
-    })
-    .then(function(info) {
-      var isOnline = info.isOnline;
-      var packageName = info.packageName;
-      console.log(
-        'Installing ' + chalk.cyan('react') + ', ' + chalk.cyan('react-dom') +
-        ', and ' + chalk.cyan(packageName) + '...'
-      );
-      console.log();
-
-      return install(useYarn, allDependencies, verbose, isOnline).then(function() {
-        return packageName;
-      });
-    })
-    .then(function(packageName) {
-      checkNodeVersion(packageName);
-
-      // Since react-scripts has been installed with --save
-      // we need to move it into devDependencies and rewrite package.json
-      // also ensure react dependencies have caret version range
-      fixDependencies(packageName);
-
-      var scriptsPath = path.resolve(
-        process.cwd(),
-        'node_modules',
-        packageName,
-        'scripts',
-        'init.js'
-      );
-      var init = require(scriptsPath);
-      init(root, appName, verbose, originalDirectory, template);
-    })
-    .catch(function(reason) {
-      console.log();
-      console.log('Aborting installation.');
-      if (reason.command) {
-        console.log('  ' + chalk.cyan(reason.command), 'has failed.')
-      } else {
-        console.log(chalk.red('Unexpected error. Please report it as a bug:'));
-        console.log(reason);
-      }
-      console.log();
-
-      // On 'exit' we will delete these files from target directory.
-      var knownGeneratedFiles = [
-        'package.json', 'npm-debug.log', 'yarn-error.log', 'yarn-debug.log', 'node_modules'
-      ];
-      var currentFiles = fs.readdirSync(path.join(root));
-      currentFiles.forEach(function (file) {
-        knownGeneratedFiles.forEach(function (fileToMatch) {
-          // This will catch `(npm-debug|yarn-error|yarn-debug).log*` files
-          // and the rest of knownGeneratedFiles.
-          if ((fileToMatch.match(/.log/g) && file.indexOf(fileToMatch) === 0) || file === fileToMatch) {
-            console.log('Deleting generated file...', chalk.cyan(file));
-            fs.removeSync(path.join(root, file));
-          }
-        });
-      });
-      var remainingFiles = fs.readdirSync(path.join(root));
-      if (!remainingFiles.length) {
-        // Delete target folder if empty
-        console.log('Deleting', chalk.cyan(appName + '/'), 'from', chalk.cyan(path.resolve(root, '..')));
-        process.chdir(path.resolve(root, '..'));
-        fs.removeSync(path.join(root));
-      }
-      console.log('Done.');
-      process.exit(1);
-    });
-}
-
-function getInstallPackage(version) {
-  var packageToInstall = 'react-scripts';
-  var validSemver = semver.valid(version);
-  if (validSemver) {
-    packageToInstall += '@' + validSemver;
-  } else if (version) {
-    // for tar.gz or alternative paths
-    packageToInstall = version;
-  }
-  return packageToInstall;
-}
-
-function getTemporaryDirectory() {
-  return new Promise(function(resolve, reject) {
-    // Unsafe cleanup lets us recursively delete the directory if it contains
-    // contents; by default it only allows removal if it's empty
-    tmp.dir({ unsafeCleanup: true }, function(err, tmpdir, callback) {
-      if (err) {
-        reject(err);
-      } else {
-        resolve({
-          tmpdir: tmpdir,
-          cleanup: function() {
-            try {
-              callback();
-            } catch (ignored) {
-              // Callback might throw and fail, since it's a temp directory the
-              // OS will clean it up eventually...
-            }
-          }
-        });
-      }
-    });
-  });
-}
-
-function extractStream(stream, dest) {
-  return new Promise(function(resolve, reject) {
-    stream.pipe(unpack(dest, function(err) {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(dest);
-      }
-    }));
-  });
-}
-
-// Extract package name from tarball url or path.
-function getPackageName(installPackage) {
-  if (installPackage.indexOf('.tgz') > -1) {
-    return getTemporaryDirectory().then(function(obj) {
-      var stream;
-      if (/^http/.test(installPackage)) {
-        stream = hyperquest(installPackage);
-      } else {
-        stream = fs.createReadStream(installPackage);
-      }
-      return extractStream(stream, obj.tmpdir).then(function() {
-        return obj;
-      });
-    }).then(function(obj) {
-      var packageName = require(path.join(obj.tmpdir, 'package.json')).name;
-      obj.cleanup();
-      return packageName;
-    }).catch(function(err) {
-      // The package name could be with or without semver version, e.g. react-scripts-0.2.0-alpha.1.tgz
-      // However, this function returns package name only without semver version.
-      console.log('Could not extract the package name from the archive: ' + err.message);
-      var assumedProjectName = installPackage.match(/^.+\/(.+?)(?:-\d+.+)?\.tgz$/)[1];
-      console.log('Based on the filename, assuming it is "' + chalk.cyan(assumedProjectName) + '"');
-      return Promise.resolve(assumedProjectName);
-    });
-  } else if (installPackage.indexOf('git+') === 0) {
-    // Pull package name out of git urls e.g:
-    // git+https://github.com/mycompany/react-scripts.git
-    // git+ssh://github.com/mycompany/react-scripts.git#v1.2.3
-    return Promise.resolve(installPackage.match(/([^\/]+)\.git(#.*)?$/)[1]);
-  } else if (installPackage.indexOf('@') > 0) {
-    // Do not match @scope/ when stripping off @version or @tag
-    return Promise.resolve(installPackage.charAt(0) + installPackage.substr(1).split('@')[0]);
-  }
-  return Promise.resolve(installPackage);
-}
-
-function checkNpmVersion() {
-  var isNpm2 = false;
-  try {
-    var npmVersion = execSync('npm --version').toString();
-    isNpm2 = semver.lt(npmVersion, '3.0.0');
-  } catch (err) {
-    return;
-  }
-  if (!isNpm2) {
-    return;
-  }
-  console.log(chalk.yellow('It looks like you are using npm 2.'));
-  console.log(chalk.yellow(
-    'We suggest using npm 3 or Yarn for faster install times ' +
-    'and less disk space usage.'
-  ));
-  console.log();
-}
-
-function checkNodeVersion(packageName) {
-  var packageJsonPath = path.resolve(
-    process.cwd(),
-    'node_modules',
-    packageName,
-    'package.json'
-  );
-  var packageJson = require(packageJsonPath);
-  if (!packageJson.engines || !packageJson.engines.node) {
-    return;
-  }
-
-  if (!semver.satisfies(process.version, packageJson.engines.node)) {
-    console.error(
-      chalk.red(
-        'You are running Node %s.\n' +
-        'Create React App requires Node %s or higher. \n' +
-        'Please update your version of Node.'
-      ),
-      process.version,
-      packageJson.engines.node
-    );
-    process.exit(1);
-  }
-}
-
-function checkAppName(appName) {
-  var validationResult = validateProjectName(appName);
-  if (!validationResult.validForNewPackages) {
-    console.error('Could not create a project called ' + chalk.red('"' + appName + '"') + ' because of npm naming restrictions:');
-    printValidationResults(validationResult.errors);
-    printValidationResults(validationResult.warnings);
-    process.exit(1);
-  }
-
-  // TODO: there should be a single place that holds the dependencies
-  var dependencies = ['react', 'react-dom'];
-  var devDependencies = ['react-scripts'];
-  var allDependencies = dependencies.concat(devDependencies).sort();
-  if (allDependencies.indexOf(appName) >= 0) {
-    console.error(
-      chalk.red(
-        'We cannot create a project called ' + chalk.green(appName) + ' because a dependency with the same name exists.\n' +
-        'Due to the way npm works, the following names are not allowed:\n\n'
-      ) +
-      chalk.cyan(
-        allDependencies.map(function(depName) {
-          return '  ' + depName;
-        }).join('\n')
-      ) +
-      chalk.red('\n\nPlease choose a different project name.')
-    );
-    process.exit(1);
-  }
-}
-
-function makeCaretRange(dependencies, name) {
-  var version = dependencies[name];
-
-  if (typeof version === 'undefined') {
-    console.error(
-      chalk.red('Missing ' + name + ' dependency in package.json')
-    );
-    process.exit(1);
-  }
-
-  var patchedVersion = '^' + version;
-
-  if (!semver.validRange(patchedVersion)) {
-    console.error(
-      'Unable to patch ' + name + ' dependency version because version ' + chalk.red(version) + ' will become invalid ' + chalk.red(patchedVersion)
-    );
-    patchedVersion = version;
-  }
-
-  dependencies[name] = patchedVersion;
-}
-
-function fixDependencies(packageName) {
-  var packagePath = path.join(process.cwd(), 'package.json');
-  var packageJson = require(packagePath);
-
-  if (typeof packageJson.dependencies === 'undefined') {
-    console.error(
-      chalk.red('Missing dependencies in package.json')
-    );
-    process.exit(1);
-  }
-
-  var packageVersion = packageJson.dependencies[packageName];
-
-  if (typeof packageVersion === 'undefined') {
-    console.error(
-      chalk.red('Unable to find ' + packageName + ' in package.json')
-    );
-    process.exit(1);
-  }
-
-  packageJson.devDependencies = packageJson.devDependencies || {};
-  packageJson.devDependencies[packageName] = packageVersion;
-  delete packageJson.dependencies[packageName];
-
-  makeCaretRange(packageJson.dependencies, 'react');
-  makeCaretRange(packageJson.dependencies, 'react-dom');
-
-  fs.writeFileSync(packagePath, JSON.stringify(packageJson, null, 2));
-}
-
-// If project only contains files generated by GH, it’s safe.
-// We also special case IJ-based products .idea because it integrates with CRA:
-// https://github.com/facebookincubator/create-react-app/pull/368#issuecomment-243446094
-function isSafeToCreateProjectIn(root) {
-  var validFiles = [
-    '.DS_Store', 'Thumbs.db', '.git', '.gitignore', '.idea', 'README.md', 'LICENSE', 'web.iml'
-  ];
-  return fs.readdirSync(root)
-    .every(function(file) {
-      return validFiles.indexOf(file) >= 0;
-    });
-}
-
-function checkIfOnline(useYarn) {
-  if (!useYarn) {
-    // Don't ping the Yarn registry.
-    // We'll just assume the best case.
-    return Promise.resolve(true);
-  }
-
-  return new Promise(function(resolve) {
-    dns.resolve('registry.yarnpkg.com', function(err) {
-      resolve(err === null);
-    });
-  });
-}
+require('./createReactApp');

packages/create-react-app/package.json

@@ -14,7 +14,8 @@
     "url": "https://github.com/facebookincubator/create-react-app/issues"
   },
   "files": [
-    "index.js"
+    "index.js",
+    "createReactApp.js"
   ],
   "bin": {
     "create-react-app": "./index.js"

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

@@ -30,7 +30,7 @@ module.exports = {
     commonjs: true,
     es6: true,
     jest: true,
-    node: true
+    node: true,
   },
 
   parserOptions: {
@@ -39,20 +39,18 @@ module.exports = {
     ecmaFeatures: {
       jsx: true,
       generators: true,
-      experimentalObjectRestSpread: true
-    }
+      experimentalObjectRestSpread: true,
+    },
   },
 
   settings: {
-    'import/ignore': [
-      'node_modules'
-    ],
+    'import/ignore': ['node_modules'],
     'import/extensions': ['.js'],
     'import/resolver': {
       node: {
-        extensions: ['.js', '.json']
-      }
-    }
+        extensions: ['.js', '.json'],
+      },
+    },
   },
 
   rules: {
@@ -89,15 +87,18 @@ module.exports = {
     'no-labels': ['warn', { allowLoop: false, allowSwitch: false }],
     'no-lone-blocks': 'warn',
     'no-loop-func': 'warn',
-    'no-mixed-operators': ['warn', {
-      groups: [
-        ['&', '|', '^', '~', '<<', '>>', '>>>'],
-        ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
-        ['&&', '||'],
-        ['in', 'instanceof']
-      ],
-      allowSamePrecedence: false
-    }],
+    'no-mixed-operators': [
+      'warn',
+      {
+        groups: [
+          ['&', '|', '^', '~', '<<', '>>', '>>>'],
+          ['==', '!=', '===', '!==', '>', '>=', '<', '<='],
+          ['&&', '||'],
+          ['in', 'instanceof'],
+        ],
+        allowSamePrecedence: false,
+      },
+    ],
     'no-multi-str': 'warn',
     'no-native-reassign': 'warn',
     'no-negated-in-lhs': 'warn',
@@ -110,11 +111,7 @@ module.exports = {
     'no-octal-escape': 'warn',
     'no-redeclare': 'warn',
     'no-regex-spaces': 'warn',
-    'no-restricted-syntax': [
-      'warn',
-      'LabeledStatement',
-      'WithStatement',
-    ],
+    'no-restricted-syntax': ['warn', 'LabeledStatement', 'WithStatement'],
     'no-script-url': 'warn',
     'no-self-assign': 'warn',
     'no-self-compare': 'warn',
@@ -128,27 +125,36 @@ module.exports = {
     'no-restricted-globals': ['error', 'event'],
     'no-unexpected-multiline': 'warn',
     'no-unreachable': 'warn',
-    'no-unused-expressions': ['warn', {
-      'allowShortCircuit': true,
-      'allowTernary': true
-    }],
+    'no-unused-expressions': [
+      'warn',
+      {
+        allowShortCircuit: true,
+        allowTernary: true,
+      },
+    ],
     'no-unused-labels': 'warn',
-    'no-unused-vars': ['warn', {
-      vars: 'local',
-      varsIgnorePattern: '^_',
-      args: 'none',
-      ignoreRestSiblings: true,
-    }],
+    'no-unused-vars': [
+      'warn',
+      {
+        vars: 'local',
+        varsIgnorePattern: '^_',
+        args: 'none',
+        ignoreRestSiblings: true,
+      },
+    ],
     'no-use-before-define': ['warn', 'nofunc'],
     'no-useless-computed-key': 'warn',
     'no-useless-concat': 'warn',
     'no-useless-constructor': 'warn',
     'no-useless-escape': 'warn',
-    'no-useless-rename': ['warn', {
-      ignoreDestructuring: false,
-      ignoreImport: false,
-      ignoreExport: false,
-    }],
+    'no-useless-rename': [
+      'warn',
+      {
+        ignoreDestructuring: false,
+        ignoreImport: false,
+        ignoreExport: false,
+      },
+    ],
     'no-with': 'warn',
     'no-whitespace-before-property': 'warn',
     'operator-assignment': ['warn', 'always'],
@@ -159,15 +165,19 @@ module.exports = {
     'unicode-bom': ['warn', 'never'],
     'use-isnan': 'warn',
     'valid-typeof': 'warn',
-    'no-restricted-properties': ['error', {
-      object: 'require',
-      property: 'ensure',
-      message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import'
-    }, {
-      object: 'System',
-      property: 'import',
-      message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import'
-    }],
+    'no-restricted-properties': [
+      'error',
+      {
+        object: 'require',
+        property: 'ensure',
+        message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+      },
+      {
+        object: 'System',
+        property: 'import',
+        message: 'Please use import() instead. More info: https://webpack.js.org/guides/code-splitting-import/#dynamic-import',
+      },
+    ],
 
     // https://github.com/benmosher/eslint-plugin-import/blob/master/docs/rules/
 
@@ -203,10 +213,13 @@ module.exports = {
     'react/jsx-equals-spacing': ['warn', 'never'],
     'react/jsx-no-duplicate-props': ['warn', { ignoreCase: true }],
     'react/jsx-no-undef': 'error',
-    'react/jsx-pascal-case': ['warn', {
-      allowAllCaps: true,
-      ignore: [],
-    }],
+    'react/jsx-pascal-case': [
+      'warn',
+      {
+        allowAllCaps: true,
+        ignore: [],
+      },
+    ],
     'react/jsx-uses-react': 'warn',
     'react/jsx-uses-vars': 'warn',
     'react/no-danger-with-children': 'warn',
@@ -226,6 +239,6 @@ module.exports = {
     // https://github.com/gajus/eslint-plugin-flowtype
     'flowtype/define-flow-type': 'warn',
     'flowtype/require-valid-file-annotation': 'warn',
-    'flowtype/use-flow-type': 'warn'
-  }
+    'flowtype/use-flow-type': 'warn',
+  },
 };

packages/react-dev-utils/FileSizeReporter.js

@@ -33,7 +33,7 @@ function printFileSizesAfterBuild(webpackStats, previousSizeMap) {
         folder: path.join('build', path.dirname(asset.name)),
         name: path.basename(asset.name),
         size: size,
-        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : '')
+        sizeLabel: filesize(size) + (difference ? ' (' + difference + ')' : ''),
       };
     });
   assets.sort((a, b) => b.size - a.size);
@@ -88,12 +88,15 @@ function measureFileSizesBeforeBuild(buildFolder) {
       if (!err && fileNames) {
         sizes = fileNames
           .filter(fileName => /\.(js|css)$/.test(fileName))
-          .reduce((memo, fileName) => {
-            var contents = fs.readFileSync(fileName);
-            var key = removeFileNameHash(buildFolder, fileName);
-            memo[key] = gzipSize(contents);
-            return memo;
-          }, {});
+          .reduce(
+            (memo, fileName) => {
+              var contents = fs.readFileSync(fileName);
+              var key = removeFileNameHash(buildFolder, fileName);
+              memo[key] = gzipSize(contents);
+              return memo;
+            },
+            {}
+          );
       }
       resolve({
         root: buildFolder,

packages/react-dev-utils/InterpolateHtmlPlugin.js

@@ -25,7 +25,8 @@ class InterpolateHtmlPlugin {
 
   apply(compiler) {
     compiler.plugin('compilation', compilation => {
-      compilation.plugin('html-webpack-plugin-before-html-processing',
+      compilation.plugin(
+        'html-webpack-plugin-before-html-processing',
         (data, callback) => {
           // Run HTML through a series of user-specified string replacements.
           Object.keys(this.replacements).forEach(key => {

packages/react-dev-utils/ansiHTML.js

@@ -34,15 +34,15 @@ var base0E = 'a71d5d'; // Keywords, Storage, Selector, Markup Italic, Diff Chang
 var colors = {
   reset: [base05, 'transparent'],
   black: base05,
-  red: base08, /* marker, bg-invalid */
-  green: base0B, /* string */
-  yellow: base08, /* capitalized, jsx_tag, punctuator */
+  red: base08 /* marker, bg-invalid */,
+  green: base0B /* string */,
+  yellow: base08 /* capitalized, jsx_tag, punctuator */,
   blue: base0C,
-  magenta: base0C, /* regex */
-  cyan: base0E, /* keyword */
-  gray: base03, /* comment, gutter */
+  magenta: base0C /* regex */,
+  cyan: base0E /* keyword */,
+  gray: base03 /* comment, gutter */,
   lightgrey: base01,
-  darkgrey: base03
+  darkgrey: base03,
 };
 
 var anserMap = {
@@ -56,20 +56,19 @@ var anserMap = {
   'ansi-bright-red': 'red',
   'ansi-red': 'red',
   'ansi-bright-magenta': 'magenta',
-  'ansi-magenta': 'magenta'
+  'ansi-magenta': 'magenta',
 };
 
 function ansiHTML(txt) {
   var arr = new Anser().ansiToJson(txt, {
-    use_classes: true
+    use_classes: true,
   });
 
   var result = '';
   var open = false;
   for (var index = 0; index < arr.length; ++index) {
     var c = arr[index];
-    var content = c.content,
-        fg = c.fg;
+    var content = c.content, fg = c.fg;
 
     var contentParts = content.split('\n');
     for (var _index = 0; _index < contentParts.length; ++_index) {

packages/react-dev-utils/clearConsole.js

@@ -10,7 +10,9 @@
 'use strict';
 
 function clearConsole() {
-  process.stdout.write(process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H');
+  process.stdout.write(
+    process.platform === 'win32' ? '\x1Bc' : '\x1B[2J\x1B[3J\x1B[H'
+  );
 }
 
 module.exports = clearConsole;

packages/react-dev-utils/formatWebpackMessages.js

@@ -46,18 +46,15 @@ function formatMessage(message) {
     lines = [
       lines[0],
       // Clean up message because "Module not found: " is descriptive enough.
-      lines[1].replace(
-        'Cannot resolve \'file\' or \'directory\' ', ''
-      ).replace(
-        'Cannot resolve module ', ''
-      ).replace(
-        'Error: ', ''
-      ),
+      lines[1]
+        .replace("Cannot resolve 'file' or 'directory' ", '')
+        .replace('Cannot resolve module ', '')
+        .replace('Error: ', ''),
       // Skip all irrelevant lines.
       // (For some reason they only appear on the client in browser.)
       '',
-      lines[lines.length - 1] // error location is the last line
-    ]
+      lines[lines.length - 1], // error location is the last line
+    ];
   }
 
   // Cleans up syntax error messages.
@@ -108,7 +105,8 @@ function formatMessage(message) {
   // from user code generated by WebPack. For more information see
   // https://github.com/facebookincubator/create-react-app/pull/1050
   message = message.replace(
-    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm, ''
+    /^\s*at\s((?!webpack:).)*:\d+:\d+[\s\)]*(\n|$)/gm,
+    ''
   ); // at ... ...:x:y
 
   return message;
@@ -116,14 +114,14 @@ function formatMessage(message) {
 
 function formatWebpackMessages(json) {
   var formattedErrors = json.errors.map(function(message) {
-    return 'Error in ' + formatMessage(message)
+    return 'Error in ' + formatMessage(message);
   });
   var formattedWarnings = json.warnings.map(function(message) {
-    return 'Warning in ' + formatMessage(message)
+    return 'Warning in ' + formatMessage(message);
   });
   var result = {
     errors: formattedErrors,
-    warnings: formattedWarnings
+    warnings: formattedWarnings,
   };
   if (result.errors.some(isLikelyASyntaxError)) {
     // If there are any syntax errors, show just them.

packages/react-dev-utils/getProcessForPort.js

@@ -18,8 +18,8 @@ var execOptions = {
   stdio: [
     'pipe', // stdin (default)
     'pipe', // stdout (default)
-    'ignore' //stderr
-  ]
+    'ignore', //stderr
+  ],
 };
 
 function isProcessAReactApp(processCommand) {
@@ -27,7 +27,10 @@ function isProcessAReactApp(processCommand) {
 }
 
 function getProcessIdOnPort(port) {
-  return execSync('lsof -i:' + port + ' -P -t -sTCP:LISTEN', execOptions).trim();
+  return execSync(
+    'lsof -i:' + port + ' -P -t -sTCP:LISTEN',
+    execOptions
+  ).trim();
 }
 
 function getPackageNameInDirectory(directory) {
@@ -35,26 +38,30 @@ function getPackageNameInDirectory(directory) {
 
   try {
     return require(packagePath).name;
-  } catch(e) {
+  } catch (e) {
     return null;
   }
-
 }
 
 function getProcessCommand(processId, processDirectory) {
-  var command = execSync('ps -o command -p ' + processId + ' | sed -n 2p', execOptions);
+  var command = execSync(
+    'ps -o command -p ' + processId + ' | sed -n 2p',
+    execOptions
+  );
 
   if (isProcessAReactApp(command)) {
     const packageName = getPackageNameInDirectory(processDirectory);
-    return (packageName) ? packageName + '\n' : command;
+    return packageName ? packageName + '\n' : command;
   } else {
     return command;
   }
-
 }
 
 function getDirectoryOfProcessById(processId) {
-  return execSync('lsof -p '+ processId + ' | awk \'$4=="cwd" {print $9}\'', execOptions).trim();
+  return execSync(
+    'lsof -p ' + processId + ' | awk \'$4=="cwd" {print $9}\'',
+    execOptions
+  ).trim();
 }
 
 function getProcessForPort(port) {
@@ -63,10 +70,9 @@ function getProcessForPort(port) {
     var directory = getDirectoryOfProcessById(processId);
     var command = getProcessCommand(processId, directory);
     return chalk.cyan(command) + chalk.blue('  in ') + chalk.cyan(directory);
-  } catch(e) {
+  } catch (e) {
     return null;
   }
 }
 
 module.exports = getProcessForPort;
-

packages/react-dev-utils/openBrowser.js

@@ -30,22 +30,18 @@ function openBrowser(url) {
   // requested a different browser, we can try opening
   // Chrome with AppleScript. This lets us reuse an
   // existing tab when possible instead of creating a new one.
-  const shouldTryOpenChromeWithAppleScript = (
-    process.platform === 'darwin' && (
-      typeof browser !== 'string' ||
-      browser === OSX_CHROME
-    )
-  );
+  const shouldTryOpenChromeWithAppleScript = process.platform === 'darwin' &&
+    (typeof browser !== 'string' || browser === OSX_CHROME);
 
   if (shouldTryOpenChromeWithAppleScript) {
     try {
       // Try our best to reuse existing tab
       // on OS X Google Chrome with AppleScript
       execSync('ps cax | grep "Google Chrome"');
-      execSync(
-        'osascript openChrome.applescript ' + url,
-        {cwd: __dirname, stdio: 'ignore'}
-      );
+      execSync('osascript openChrome.applescript ' + url, {
+        cwd: __dirname,
+        stdio: 'ignore',
+      });
       return true;
     } catch (err) {
       // Ignore errors.
@@ -59,11 +55,11 @@ function openBrowser(url) {
   if (process.platform === 'darwin' && browser === 'open') {
     browser = undefined;
   }
-  
+
   // Fallback to opn
   // (It will always open new tab)
   try {
-    var options = {app: browser};
+    var options = { app: browser };
     opn(url, options).catch(() => {}); // Prevent `unhandledRejection` error.
     return true;
   } catch (err) {

packages/react-dev-utils/prompt.js

@@ -16,7 +16,9 @@ var rl = require('readline');
 // You can control the behavior on <Enter> with `isYesDefault`.
 function prompt(question, isYesDefault) {
   if (typeof isYesDefault !== 'boolean') {
-    throw new Error('Provide explicit boolean isYesDefault as second argument.');
+    throw new Error(
+      'Provide explicit boolean isYesDefault as second argument.'
+    );
   }
   return new Promise(resolve => {
     var rlInterface = rl.createInterface({

packages/react-dev-utils/webpackHotDevClient.js

@@ -46,7 +46,7 @@ function createOverlayIframe(onIframeLoad) {
 }
 
 function addOverlayDivTo(iframe) {
-  var div =  iframe.contentDocument.createElement('div');
+  var div = iframe.contentDocument.createElement('div');
   div.id = 'react-dev-utils-webpack-hot-dev-client-overlay-div';
   div.style.position = 'fixed';
   div.style.boxSizing = 'border-box';
@@ -104,8 +104,9 @@ function ensureOverlayDivExists(onOverlayDivReady) {
 function showErrorOverlay(message) {
   ensureOverlayDivExists(function onOverlayDivReady(overlayDiv) {
     // Make it look similar to our terminal.
-    overlayDiv.innerHTML =
-      '<span style="color: ' + red + '">Failed to compile.</span><br><br>' +
+    overlayDiv.innerHTML = '<span style="color: ' +
+      red +
+      '">Failed to compile.</span><br><br>' +
       ansiHTML(entities.encode(message));
   });
 }
@@ -124,13 +125,15 @@ function destroyErrorOverlay() {
 }
 
 // Connect to WebpackDevServer via a socket.
-var connection = new SockJS(url.format({
-  protocol: window.location.protocol,
-  hostname: window.location.hostname,
-  port: window.location.port,
-  // Hardcoded in WebpackDevServer
-  pathname: '/sockjs-node'
-}));
+var connection = new SockJS(
+  url.format({
+    protocol: window.location.protocol,
+    hostname: window.location.hostname,
+    port: window.location.port,
+    // Hardcoded in WebpackDevServer
+    pathname: '/sockjs-node',
+  })
+);
 
 // Unlike WebpackDevServer client, we won't try to reconnect
 // to avoid spamming the console. Disconnect usually happens
@@ -207,7 +210,7 @@ function handleErrors(errors) {
   // "Massage" webpack messages.
   var formatted = formatWebpackMessages({
     errors: errors,
-    warnings: []
+    warnings: [],
   });
 
   // Only show the first error.
@@ -232,27 +235,27 @@ function handleAvailableHash(hash) {
 connection.onmessage = function(e) {
   var message = JSON.parse(e.data);
   switch (message.type) {
-  case 'hash':
-    handleAvailableHash(message.data);
-    break;
-  case 'still-ok':
-  case 'ok':
-    handleSuccess();
-    break;
-  case 'content-changed':
-    // Triggered when a file from `contentBase` changed.
-    window.location.reload();
-    break;
-  case 'warnings':
-    handleWarnings(message.data);
-    break;
-  case 'errors':
-    handleErrors(message.data);
-    break;
-  default:
+    case 'hash':
+      handleAvailableHash(message.data);
+      break;
+    case 'still-ok':
+    case 'ok':
+      handleSuccess();
+      break;
+    case 'content-changed':
+      // Triggered when a file from `contentBase` changed.
+      window.location.reload();
+      break;
+    case 'warnings':
+      handleWarnings(message.data);
+      break;
+    case 'errors':
+      handleErrors(message.data);
+      break;
+    default:
     // Do nothing.
   }
-}
+};
 
 // Is there a newer version of this code available?
 function isUpdateAvailable() {
@@ -297,7 +300,7 @@ function tryApplyUpdates(onHotUpdateSuccess) {
   }
 
   // https://webpack.github.io/docs/hot-module-replacement.html#check
-  var result = module.hot.check(/* autoApply */true, handleApplyUpdates);
+  var result = module.hot.check(/* autoApply */ true, handleApplyUpdates);
 
   // // Webpack 2 returns a Promise instead of invoking a callback
   if (result && result.then) {

packages/react-scripts/bin/react-scripts.js

@@ -15,36 +15,38 @@ var script = process.argv[2];
 var args = process.argv.slice(3);
 
 switch (script) {
-case 'build':
-case 'eject':
-case 'start':
-case 'test':
-  var result = spawn.sync(
-    'node',
-    [require.resolve('../scripts/' + script)].concat(args),
-    {stdio: 'inherit'}
-  );
-  if (result.signal) {
-    if (result.signal === 'SIGKILL') {
-      console.log(
-        'The build failed because the process exited too early. ' +
-        'This probably means the system ran out of memory or someone called ' +
-        '`kill -9` on the process.'
-      );
-    } else if (result.signal === 'SIGTERM') {
-      console.log(
-        'The build failed because the process exited too early. ' +
-        'Someone might have called `kill` or `killall`, or the system could ' +
-        'be shutting down.'
-      );
+  case 'build':
+  case 'eject':
+  case 'start':
+  case 'test':
+    var result = spawn.sync(
+      'node',
+      [require.resolve('../scripts/' + script)].concat(args),
+      { stdio: 'inherit' }
+    );
+    if (result.signal) {
+      if (result.signal === 'SIGKILL') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'This probably means the system ran out of memory or someone called ' +
+            '`kill -9` on the process.'
+        );
+      } else if (result.signal === 'SIGTERM') {
+        console.log(
+          'The build failed because the process exited too early. ' +
+            'Someone might have called `kill` or `killall`, or the system could ' +
+            'be shutting down.'
+        );
+      }
+      process.exit(1);
     }
-    process.exit(1);
-  }
-  process.exit(result.status);
-  break;
-default:
-  console.log('Unknown script "' + script + '".');
-  console.log('Perhaps you need to update react-scripts?');
-  console.log('See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases');
-  break;
+    process.exit(result.status);
+    break;
+  default:
+    console.log('Unknown script "' + script + '".');
+    console.log('Perhaps you need to update react-scripts?');
+    console.log(
+      'See: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases'
+    );
+    break;
 }

packages/react-scripts/config/env.js

@@ -12,34 +12,36 @@
 
 // Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
 // injected into the application via DefinePlugin in Webpack configuration.
-
-var REACT_APP = /^REACT_APP_/i;
+const REACT_APP = /^REACT_APP_/i;
 
 function getClientEnvironment(publicUrl) {
-  var raw = Object
-    .keys(process.env)
+  const raw = Object.keys(process.env)
     .filter(key => REACT_APP.test(key))
-    .reduce((env, key) => {
-      env[key] = process.env[key];
-      return env;
-    }, {
-      // Useful for determining whether we’re running in production mode.
-      // Most importantly, it switches React into the correct mode.
-      'NODE_ENV': 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.
-      'PUBLIC_URL': publicUrl
-    });
+    .reduce(
+      (env, key) => {
+        env[key] = process.env[key];
+        return env;
+      },
+      {
+        // Useful for determining whether we’re running in production mode.
+        // Most importantly, it switches React into the correct mode.
+        NODE_ENV: 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.
+        PUBLIC_URL: publicUrl,
+      }
+    );
   // Stringify all values so we can feed into Webpack DefinePlugin
-  var stringified = {
-    'process.env': Object
-      .keys(raw)
-      .reduce((env, key) => {
+  const stringified = {
+    'process.env': Object.keys(raw).reduce(
+      (env, key) => {
         env[key] = JSON.stringify(raw[key]);
         return env;
-      }, {})
+      },
+      {}
+    ),
   };
 
   return { raw, stringified };

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

@@ -6,12 +6,11 @@
  * LICENSE file in the root directory of this source tree. An additional grant
  * of patent rights can be found in the PATENTS file in the same directory.
  */
-
 'use strict';
 
 const babelJest = require('babel-jest');
 
 module.exports = babelJest.createTransformer({
   presets: [require.resolve('babel-preset-react-app')],
-  babelrc: false
+  babelrc: false,
 });

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

@@ -16,6 +16,6 @@ const path = require('path');
 
 module.exports = {
   process(src, filename) {
-    return 'module.exports = ' + JSON.stringify(path.basename(filename)) + ';';
+    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
   },
 };