Install missing dependencies (with --preact or --inferno flag) + Yarn support

src/commands/build-react-app.js

@@ -6,6 +6,7 @@ import runSeries from 'run-series'
 import {getDefaultHTMLConfig} from '../appConfig'
 import webpackBuild from '../webpackBuild'
 import cleanApp from './clean-app'
+import installCompatDependencies from '../installCompatDependencies'
 
 // Using a config function as webpackBuild() sets NODE_ENV to production if it
 // hasn't been set by the user and we don't want production optimisations in
@@ -78,6 +79,7 @@ export default function buildReactApp(args, cb) {
 
   runSeries([
     (cb) => cleanApp({_: ['clean-app', dist]}, cb),
+    (cb) => installCompatDependencies(args, cb, library),
     (cb) => webpackBuild(`${library} app`, args, buildConfig, cb),
   ], cb)
 }

src/createProject.js

@@ -14,7 +14,7 @@ import {
 } from './constants'
 import {UserError} from './errors'
 import pkg from '../package.json'
-import {installInferno, installPreact, installReact, typeOf} from './utils'
+import {installAppDependencies, typeOf} from './utils'
 
 let nwbVersion = pkg.version.split('.').slice(0, 2).concat('x').join('.')
 
@@ -124,16 +124,16 @@ const PROJECT_CREATORS = {
     let templateVars = {name, nwbVersion, version}
     copyTemplateDir(templateDir, targetDir, templateVars, (err, createdFiles) => {
       if (err) return cb(err)
-      logCreatedFiles(targetDir, createdFiles)
-      console.log('Installing dependencies...')
-      try {
-        installInferno({cwd: targetDir, version, save: true})
-      }
-      catch (e) {
-        return cb(e)
-      }
-      initGit(args, targetDir)
-      cb()
+      installAppDependencies({
+        cwd: targetDir,
+        version,
+        save: true,
+        dependencies: [`inferno@${version}`, `inferno-component@${version}`]
+      }, (err) => {
+        if (err) return cb(err)
+        initGit(args, targetDir)
+        cb()
+      })
     })
   },
 
@@ -144,34 +144,36 @@ const PROJECT_CREATORS = {
     copyTemplateDir(templateDir, targetDir, templateVars, (err, createdFiles) => {
       if (err) return cb(err)
       logCreatedFiles(targetDir, createdFiles)
-      console.log('Installing dependencies...')
-      try {
-        installPreact({cwd: targetDir, version, save: true})
-      }
-      catch (e) {
-        return cb(e)
-      }
-      initGit(args, targetDir)
-      cb()
+      installAppDependencies({
+        cwd: targetDir,
+        version,
+        save: true,
+        dependencies: [`preact@${version}`]
+      }, (err) => {
+        if (err) return cb(err)
+        initGit(args, targetDir)
+        cb()
+      })
     })
   },
 
   [REACT_APP](args, name, targetDir, cb) {
     let templateDir = path.join(__dirname, `../templates/${REACT_APP}`)
-    let reactVersion = args.react || REACT_VERSION
-    let templateVars = {name, nwbVersion, reactVersion}
+    let version = args.react || REACT_VERSION
+    let templateVars = {name, nwbVersion, version}
     copyTemplateDir(templateDir, targetDir, templateVars, (err, createdFiles) => {
       if (err) return cb(err)
       logCreatedFiles(targetDir, createdFiles)
-      console.log('Installing dependencies...')
-      try {
-        installReact({cwd: targetDir, version: reactVersion, save: true})
-      }
-      catch (e) {
-        return cb(e)
-      }
-      initGit(args, targetDir)
-      cb()
+      installAppDependencies({
+        cwd: targetDir,
+        version,
+        save: true,
+        dependencies: [`react@${version}`, `react-dom@${version}`]
+      }, (err) => {
+        if (err) return cb(err)
+        initGit(args, targetDir)
+        cb()
+      })
     })
   },
 
@@ -180,9 +182,9 @@ const PROJECT_CREATORS = {
       if (err) return cb(err)
       let {umd, esModules} = prefs
       let templateDir = path.join(__dirname, `../templates/${REACT_COMPONENT}`)
-      let reactVersion = args.react || REACT_VERSION
+      let version = args.react || REACT_VERSION
       let templateVars = npmModuleVars(
-        {name, esModules, nwbVersion, reactVersion}
+        {name, esModules, nwbVersion, version}
       )
       copyTemplateDir(templateDir, targetDir, templateVars, (err, createdFiles) => {
         if (err) return cb(err)
@@ -199,15 +201,16 @@ const PROJECT_CREATORS = {
           return cb(e)
         }
         logCreatedFiles(targetDir, createdFiles)
-        console.log('Installing dependencies...')
-        try {
-          installReact({cwd: targetDir, version: reactVersion, dev: true, save: true})
-        }
-        catch (e) {
-          return cb(e)
-        }
-        initGit(args, targetDir)
-        cb()
+        installAppDependencies({
+          cwd: targetDir,
+          version,
+          save: true,
+          dependencies: [`react@${version}`, `react-dom@${version}`]
+        }, (err) => {
+          if (err) return cb(err)
+          initGit(args, targetDir)
+          cb()
+        })
       })
     })
   },

src/installCompatDependencies.js

@@ -0,0 +1,32 @@
+import ora from 'ora'
+import path from 'path'
+import {exec} from 'child_process'
+
+import debug from './debug'
+import {useYarn} from './utils'
+
+export default function installCompatDependencies(args, cb, library) {
+  const cwd = path.resolve('./')
+  const pkg = require(path.resolve('./package.json'))
+  const shouldInstallPreactCompat = (args.preact && (!pkg.dependencies['preact-compat'] || !pkg.dependencies['preact']))
+  const shouldInstallInfernoCompat = (args.inferno && (!pkg.dependencies['inferno-compat']))
+  const compat = args.preact ? 'preact preact-compat' : 'inferno-compat'
+  const command = useYarn() ? `yarn add ${compat}` : `npm install --save ${compat}`
+
+  if (shouldInstallInfernoCompat || shouldInstallPreactCompat) {
+    const spinner = ora(`Install missing ${library} dependencies`).start()
+    debug(`${cwd} $ ${command}`)
+    exec(command, {cwd, stdio: 'inherit'}, err => {
+      if (err) {
+        spinner.fail()
+        return cb(err)
+      }
+      spinner.text = `Installed missing ${library} dependencies`
+      spinner.succeed()
+      cb()
+    })
+  }
+  else {
+    cb()
+  }
+}

src/utils.js

@@ -1,4 +1,4 @@
-import {execSync} from 'child_process'
+import {execSync, exec} from 'child_process'
 import util from 'util'
 
 import argvSetEnv from 'argv-set-env'
@@ -85,34 +85,37 @@ export function endsWith(s1, s2) {
   return s1.lastIndexOf(s2) === s1.length - s2.length
 }
 
-/**
- * Install Inferno for the user when it's needed.
- */
-export function installInferno({dev = false, save = false, cwd = process.cwd(), version = 'latest'} = {}) {
-  let saveArg = save ? ` --save${dev ? '-dev' : ''}` : ''
-  let command = `npm install${saveArg} inferno@${version} inferno-component@${version}`
-  debug(`${cwd} $ ${command}`)
-  execSync(command, {cwd, stdio: 'inherit'})
+export function useYarn() {
+  try {
+    execSync('yarn --version', {stdio: 'ignore'})
+    return true
+  }
+  catch (e) {
+    return false
+  }
 }
 
 /**
- * Install Preact for the user when it's needed.
+ * Install all app dependencies when creating a new project
  */
-export function installPreact({dev = false, save = false, cwd = process.cwd(), version = 'latest'} = {}) {
-  let saveArg = save ? ` --save${dev ? '-dev' : ''}` : ''
-  let command = `npm install${saveArg} preact@${version}`
-  debug(`${cwd} $ ${command}`)
-  execSync(command, {cwd, stdio: 'inherit'})
-}
+export function installAppDependencies({dev = false, save = false, cwd = process.cwd(), version = 'latest', dependencies = []} = {}, cb) {
+  const saveArg = save ? ` --save${dev ? '-dev' : ''}` : ''
+  let command = `npm install${saveArg} ${dependencies.join(' ')}`
 
-/**
- * Install React for the user when it's needed.
- */
-export function installReact({dev = false, save = false, cwd = process.cwd(), version = 'latest'} = {}) {
-  let saveArg = save ? ` --save${dev ? '-dev' : ''}` : ''
-  let command = `npm install${saveArg} react@${version} react-dom@${version}`
+  if (useYarn()) {
+    command = `yarn add ${dependencies.join(' ')} ${dev ? '--dev' : ''}`
+  }
+  const spinner = ora(`Installing dependencies using ${useYarn() ? 'yarn' : 'npm'}`).start()
   debug(`${cwd} $ ${command}`)
-  execSync(command, {cwd, stdio: 'inherit'})
+  exec(command, {cwd, stdio: 'ignore'}, err => {
+    if (err) {
+      spinner.fail()
+      return cb(err)
+    }
+    spinner.text = `Installed dependencies using ${useYarn() ? 'yarn' : 'npm'}`
+    spinner.succeed()
+    cb()
+  })
 }
 
 /**

tests/commands/build-test.js

@@ -31,6 +31,33 @@ describe('command: build', function() {
     rimraf(tmpDir, done)
   }
 
+  describe('building a React app with Preact/Inferno-Compat', () => {
+    before(done => {
+      setUp()
+      cli(['new', 'react-app', 'test-app-compat'], err => {
+        expect(err).toNotExist('No errors creating a new React app')
+        process.chdir(path.join(tmpDir, 'test-app-compat'))
+        done(err)
+      })
+    })
+
+    after(tearDown)
+
+    it('builds a React app with Preact-Compat', done => {
+      cli(['build-react-app', '--preact'], (err) => {
+        expect(err).toNotExist('No errors building a React app with Preact-Compat')
+        done()
+      })
+    })
+
+    it('builds a React app with Inferno-Compat', done => {
+      cli(['build-react-app', '--inferno'], (err) => {
+        expect(err).toNotExist('No errors building a React app with Inferno-Compat')
+        done()
+      })
+    })
+  })
+
   describe('building a React app', () => {
     let builtAppSource
     let builtHTML

tests/commands/new-init-test.js

@@ -15,7 +15,7 @@ function reactAppAssertions(dir, name, err, done) {
   expect(glob.sync('**', {
     dot: true,
     cwd: path.resolve(dir),
-    ignore: 'node_modules/**'
+    ignore: ['node_modules/**', 'yarn.lock']
   })).toEqual([
     '.gitignore',
     '.travis.yml',
@@ -53,7 +53,7 @@ function reactComponentAssertions(dir, name, err, done) {
   expect(glob.sync('**', {
     cwd: path.resolve(dir),
     dot: true,
-    ignore: 'node_modules/**'
+    ignore: ['node_modules/**', 'yarn.lock']
   })).toEqual([
     '.gitignore',
     '.travis.yml',