From 9d27500ca012541fd38990e326d64a4b1cadb3bc Mon Sep 17 00:00:00 2001
From: Jirat Ki <saakyz@gmail.com>
Date: Thu, 23 Feb 2017 10:55:41 +0700
Subject: [PATCH] Install react, react-dom, and react-scripts at the same time
 (#1253)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Install react and react-dom along with react-scripts

- Install react, react-dom and react-script in a same time
- Move react-scripts to devDependencies.

* Check if react, react-dom has been already installed

- To backward compatibility with old CRA’s cli
- In case old CRA doesn’t install react, react-don along with
react-scripts

* Use packageName to find script dependency

- use packageName to find dependency
- fix pathExists.sync

* Check dependencies.react in package.json instead of actual files

* Process exit when dependencies not found

- Show error and exit when dependencies not found.
- Log install show custom package name

* Remove template string

* Install dependencies if template is preseted

* Remove dangling comma

Resolves #1239
---
 scripts/init.js | 98 +++++++++++++++++++++++++++----------------------
 1 file changed, 54 insertions(+), 44 deletions(-)

diff --git a/scripts/init.js b/scripts/init.js
index 864005ecac2..aa62265ccc5 100644
--- a/scripts/init.js
+++ b/scripts/init.js
@@ -64,8 +64,6 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
     }
   });
 
-  // Run yarn or npm for react and react-dom
-  // TODO: having to do two npm/yarn installs is bad, can we avoid it?
   var command;
   var args;
 
@@ -92,53 +90,65 @@ module.exports = function(appPath, appName, verbose, originalDirectory, template
     fs.unlinkSync(templateDependenciesPath);
   }
 
-  console.log('Installing react and react-dom using ' + command + '...');
-  console.log();
+  // Install react and react-dom for backward compatibility with old CRA cli
+  // which doesn't install react and react-dom along with react-scripts
+  // or template is presetend (via --internal-testing-template)
+  if (!isReactInstalled(appPackage) || template) {
+    console.log('Installing react and react-dom using ' + command + '...');
+    console.log();
 
-  var proc = spawn(command, args, {stdio: 'inherit'});
-  proc.on('close', function (code) {
-    if (code !== 0) {
+    var proc = spawn.sync(command, args, {stdio: 'inherit'});
+    if (proc.status !== 0) {
       console.error('`' + command + ' ' + args.join(' ') + '` failed');
       return;
     }
+  }
 
-    // Display the most elegant way to cd.
-    // This needs to handle an undefined originalDirectory for
-    // backward compatibility with old global-cli's.
-    var cdpath;
-    if (originalDirectory &&
-        path.join(originalDirectory, appName) === appPath) {
-      cdpath = appName;
-    } else {
-      cdpath = appPath;
-    }
+  // Display the most elegant way to cd.
+  // This needs to handle an undefined originalDirectory for
+  // backward compatibility with old global-cli's.
+  var cdpath;
+  if (originalDirectory &&
+      path.join(originalDirectory, appName) === appPath) {
+    cdpath = appName;
+  } else {
+    cdpath = appPath;
+  }
 
+  console.log();
+  console.log('Success! Created ' + appName + ' at ' + appPath);
+  console.log('Inside that directory, you can run several commands:');
+  console.log();
+  console.log(chalk.cyan('  ' + command + ' start'));
+  console.log('    Starts the development server.');
+  console.log();
+  console.log(chalk.cyan('  ' + command + ' run build'));
+  console.log('    Bundles the app into static files for production.');
+  console.log();
+  console.log(chalk.cyan('  ' + command + ' test'));
+  console.log('    Starts the test runner.');
+  console.log();
+  console.log(chalk.cyan('  ' + command + ' run eject'));
+  console.log('    Removes this tool and copies build dependencies, configuration files');
+  console.log('    and scripts into the app directory. If you do this, you can’t go back!');
+  console.log();
+  console.log('We suggest that you begin by typing:');
+  console.log();
+  console.log(chalk.cyan('  cd'), cdpath);
+  console.log('  ' + chalk.cyan(command + ' start'));
+  if (readmeExists) {
     console.log();
-    console.log('Success! Created ' + appName + ' at ' + appPath);
-    console.log('Inside that directory, you can run several commands:');
-    console.log();
-    console.log(chalk.cyan('  ' + command + ' start'));
-    console.log('    Starts the development server.');
-    console.log();
-    console.log(chalk.cyan('  ' + command + ' run build'));
-    console.log('    Bundles the app into static files for production.');
-    console.log();
-    console.log(chalk.cyan('  ' + command + ' test'));
-    console.log('    Starts the test runner.');
-    console.log();
-    console.log(chalk.cyan('  ' + command + ' run eject'));
-    console.log('    Removes this tool and copies build dependencies, configuration files');
-    console.log('    and scripts into the app directory. If you do this, you can’t go back!');
-    console.log();
-    console.log('We suggest that you begin by typing:');
-    console.log();
-    console.log(chalk.cyan('  cd'), cdpath);
-    console.log('  ' + chalk.cyan(command + ' start'));
-    if (readmeExists) {
-      console.log();
-      console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`'));
-    }
-    console.log();
-    console.log('Happy hacking!');
-  });
+    console.log(chalk.yellow('You had a `README.md` file, we renamed it to `README.old.md`'));
+  }
+  console.log();
+  console.log('Happy hacking!');
 };
+
+function isReactInstalled(appPackage) {
+  var dependencies = appPackage.dependencies || {};
+
+  return (
+    typeof dependencies.react !== 'undefined' &&
+    typeof dependencies['react-dom'] !== 'undefined'
+  )
+}