Add flow typechecking as a webpack plugin

packages/react-dev-utils/FlowTypecheckPlugin.js

@@ -0,0 +1,243 @@
+var fs = require('fs');
+var path = require('path');
+var chalk = require('chalk');
+var childProcess = require('child_process');
+var flowBinPath = require('flow-bin');
+const flowTypedPath = path.join(__dirname, 'runFlowTyped.js');
+
+function stripFlowLoadingIndicators(message) {
+  var newMessage = message;
+  var launchingIndex = newMessage.indexOf("Launching Flow server for");
+  if (launchingIndex >= 0) {
+    newMessage = newMessage.slice(0, launchingIndex);
+  }
+  var stillIndex = newMessage.indexOf("flow is still initializing");
+  if (stillIndex >= 0) {
+    newMessage = newMessage.slice(0, stillIndex);
+  }
+  var notRespIndex = newMessage.indexOf("The flow server is not responding");
+  if (notRespIndex >= 0) {
+    newMessage = newMessage.slice(0, notRespIndex);
+  }
+  return newMessage;
+}
+
+function execOneTime(command, args, options) {
+  return new Promise((resolve, reject) => {
+    var stdout = new Buffer("");
+    var stderr = new Buffer("");
+    var oneTimeProcess = childProcess.spawn(
+      command,
+      args,
+      options
+    );
+    oneTimeProcess.stdout.on('data', chunk => {
+      stdout = Buffer.concat([stdout, chunk]);
+    });
+    oneTimeProcess.stderr.on('data', chunk => {
+      stderr = Buffer.concat([stderr, chunk]);
+    });
+    oneTimeProcess.on('error', error => reject(error));
+    oneTimeProcess.on('exit', code => {
+      switch (code) {
+        case 0:
+          return resolve(stdout);
+        default:
+          return reject(new Error(
+            Buffer.concat([stdout, stderr]).toString()
+          ));
+      }
+    });
+  });
+}
+
+function writeFileIfDoesNotExist(path, data) {
+  return new Promise((resolve, reject) => {
+    fs.exists(path, exists => {
+      if (!exists) {
+        fs.writeFile(path, data, err => {
+          if (err) {
+            return reject(err);
+          }
+          resolve(true);
+        });
+      } else {
+        resolve(false);
+      }
+    });
+  });
+}
+
+function writeInFileIfNotPresent(path, contentToAssert, contentToAppend) {
+  return new Promise((resolve, reject) => {
+    fs.exists(path, exists => {
+      if (!exists) {
+        fs.writeFile(path, contentToAppend, err => {
+          if (err) {
+            return reject(err);
+          }
+          resolve(true);
+        });
+      } else {
+        fs.readFile(path, (err, existingContent) => {
+          if (err) {
+            return reject(err);
+          }
+          if (existingContent.indexOf(contentToAssert) < 0) {
+            fs.appendFile(path, contentToAppend, err => {
+              if (err) {
+                return reject(err);
+              }
+              resolve(true);
+            });
+          } else {
+            resolve(false);
+          }
+        });
+      }
+    });
+  });
+}
+
+function getFlowVersion(options) {
+  return execOneTime(
+    (options || {}).global ? "flow" : flowBinPath,
+    ['version', '--json']
+  )
+  .then(rawData => JSON.parse(rawData))
+  .then(versionData => versionData.semver);
+}
+
+function initializeFlow(projectPath, flowconfig, otherFlowTypedDefs) {
+  const flowconfigPath = path.join(projectPath, '.flowconfig');
+  const gitignorePath = path.join(projectPath, '.gitignore');
+  return getFlowVersion().then(localVersion => 
+    getFlowVersion({global: true}).catch(() => localVersion)
+    .then(globalVersion =>
+      globalVersion !== localVersion ?
+        Promise.reject(new Error(
+          'Flow integration was disabled because the global Flow version does not match.\n' +
+          'You may either remove the global Flow installation or install a compatible version:\n' +
+          '  ' + chalk.cyan('npm') + ' install -g flow-bin@' + localVersion
+        )) :
+        localVersion
+    )
+  )
+  .then(localVersion => Promise.all([
+    writeFileIfDoesNotExist(flowconfigPath, flowconfig.join('\n'))
+    .then(wroteFlowconfig => wroteFlowconfig ?
+      writeInFileIfNotPresent(gitignorePath, 'flow-typed', 'flow-typed/npm') :
+      false
+    ),
+    execOneTime(
+      flowTypedPath,
+      ['install', '--overwrite', '--flowVersion=' + localVersion],
+      { cwd: projectPath }
+    )
+    // This operation will fail if react-scripts is a path to a tarball in the
+    // package.json (like in End To End testing!). So we swallow this error.
+    // See https://github.com/flowtype/flow-typed/issues/399#issuecomment-266766678
+    .catch((e) => /(invalid comparator)|(unable to rebase the local cache repo)/i.test(e.message) ? true : Promise.reject(e))
+    .then(() => Promise.all(
+      Object.keys(otherFlowTypedDefs).map((packageName) => execOneTime(
+        flowTypedPath,
+        [
+          'install',
+          packageName + '@' + otherFlowTypedDefs[packageName],
+          '--overwrite',
+          '--flowVersion=' + localVersion
+        ],
+        { cwd: projectPath }
+      ))
+    ))
+  ]));
+}
+
+function flowCheck(projectPath) {
+  return execOneTime(
+    flowBinPath,
+    ['status', '--color=always'],
+    { cwd: projectPath }
+  );
+}
+
+function FlowTypecheckPlugin(options) {
+  options = options || {};
+  // Contents of the generated .flowconfig if it doesn't exist
+  this.flowconfig = options.flowconfig || [];
+  // Load up other flow-typed defs outside of the package.json (implicit packages behind react-scripts)
+  // Key is the package name, value is the version number
+  this.otherFlowTypedDefs = options.otherFlowTypedDefs || {};
+}
+
+FlowTypecheckPlugin.prototype.apply = function(compiler) {
+  var flowActiveOnProject = false;
+  var flowInitialized = false;
+  var flowInitError = null;
+  var flowInitializationPromise;
+  var flowShouldRun = false;
+  var flowErrorOutput = null;
+
+  // During module traversal, assert the presence of an @ flow in a module
+  compiler.plugin('compilation', (compilation, params) => {
+    compilation.plugin('normal-module-loader', (loaderContext, module) => {
+      // We're only checking the presence of flow in non-node_modules
+      // (some dependencies may keep their flow comments, we don't want to match them)
+      if (module.resource.indexOf("node_modules") < 0) {
+        // We use webpack's cached FileSystem to avoid slowing down compilation
+        loaderContext.fs.readFile(module.resource, (err, data) => {
+          if (data && data.toString().indexOf('@flow') >= 0) {
+            if (!flowActiveOnProject) {
+              flowInitializationPromise = (!compiler.parentCompilation ?
+                initializeFlow(
+                  compiler.options.context, this.flowconfig, this.otherFlowTypedDefs
+                ) : Promise.resolve()
+              )
+              .then(() => {
+                flowInitialized = true;
+              }, e => {
+                flowInitError = e;
+                return Promise.reject(e);
+              });
+              flowActiveOnProject = true;
+            }
+            flowShouldRun = true;
+          }
+        });
+      }
+    })
+  });
+
+  // While emitting, run a flow check if flow has been detected
+  compiler.plugin('emit', (compilation, callback) => {
+    // Only if a file with @ flow has been changed
+    if (flowShouldRun) {
+      flowShouldRun = false;
+      (flowInitialized ?
+        (flowInitError ? Promise.reject(flowInitError) : Promise.resolve()) :
+        flowInitializationPromise)
+      .then(
+        () => flowCheck(compiler.options.context),
+        e => Promise.reject(e) // don't run a check if init errored, just carry the error
+      )
+      .then(() => {
+        flowErrorOutput = null;
+        compilation.flowPassed = true;
+      }, error => {
+        flowErrorOutput = stripFlowLoadingIndicators(error.message);
+        compilation.warnings.push(flowErrorOutput);
+      })
+      .then(callback);
+    } else {
+      // Output a warning if flow failed in a previous run
+      if (flowErrorOutput) {
+        compilation.warnings.push(flowErrorOutput);
+      } else {
+        compilation.flowPassed = true;
+      }
+      callback();
+    }
+  });
+};
+
+module.exports = FlowTypecheckPlugin;

packages/react-dev-utils/formatWebpackMessages.js

@@ -20,6 +20,11 @@ function isLikelyASyntaxError(message) {
   return message.indexOf(friendlySyntaxErrorLabel) !== -1;
 }
 
+// Used to detect flow errors we want to swallow
+function isFlowIntegrationErrorMessage(message) {
+  return /^flow integration was disabled/i.test(message);
+}
+
 // Cleans up webpack error messages.
 function formatMessage(message) {
   var lines = message.split('\n');
@@ -113,15 +118,22 @@ function formatMessage(message) {
 }
 
 function formatWebpackMessages(json) {
-  var formattedErrors = json.errors.map(function(message) {
+  var formattedErrors = json.errors
+  .filter(m => !isFlowIntegrationErrorMessage(m))
+  .map(function(message) {
     return 'Error in ' + formatMessage(message)
   });
-  var formattedWarnings = json.warnings.map(function(message) {
+  var formattedWarnings = json.warnings
+  .filter(m => !isFlowIntegrationErrorMessage(m))
+  .map(function(message) {
     return 'Warning in ' + formatMessage(message)
   });
+  var flowIntegrationError = [].concat(json.errors, json.warnings)
+  .find(isFlowIntegrationErrorMessage);
   var result = {
     errors: formattedErrors,
-    warnings: formattedWarnings
+    warnings: formattedWarnings,
+    flowIntegrationError: flowIntegrationError
   };
   if (result.errors.some(isLikelyASyntaxError)) {
     // If there are any syntax errors, show just them.

packages/react-dev-utils/package.json

@@ -12,6 +12,8 @@
   },
   "files": [
     "clearConsole.js",
+    "FlowTypecheckPlugin.js",
+    "runFlowTyped.js",
     "checkRequiredFiles.js",
     "formatWebpackMessages.js",
     "getProcessForPort.js",
@@ -26,6 +28,8 @@
     "ansi-html": "0.0.5",
     "chalk": "1.1.3",
     "escape-string-regexp": "1.0.5",
+    "flow-bin": "^0.37.0",
+    "flow-typed": "^2.0.0",
     "html-entities": "1.2.0",
     "opn": "4.0.2",
     "sockjs-client": "1.0.3",

packages/react-dev-utils/runFlowTyped.js

@@ -0,0 +1,4 @@
+#!/usr/bin/env node
+var flowTyped = require('flow-typed');
+
+flowTyped.runCLI();

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

@@ -15,6 +15,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 var WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var FlowTypecheckPlugin = require('react-dev-utils/FlowTypecheckPlugin');
 var getClientEnvironment = require('./env');
 var paths = require('./paths');
 
@@ -226,7 +227,13 @@ module.exports = {
     // to restart the development server for Webpack to discover it. This plugin
     // makes the discovery automatic so you don't have to restart.
     // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules)
+    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
+    // Trigger some typechecking if a file matches with an @ flow comment
+    new FlowTypecheckPlugin({
+      otherFlowTypedDefs: {
+        jest: "17.0.0"
+      }
+    })
   ],
   // Some libraries import Node modules but don't use them in the browser.
   // Tell Webpack to provide empty mocks for them so importing them works.

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

@@ -15,6 +15,7 @@ var HtmlWebpackPlugin = require('html-webpack-plugin');
 var ExtractTextPlugin = require('extract-text-webpack-plugin');
 var ManifestPlugin = require('webpack-manifest-plugin');
 var InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+var FlowTypecheckPlugin = require('react-dev-utils/FlowTypecheckPlugin');
 var url = require('url');
 var paths = require('./paths');
 var getClientEnvironment = require('./env');
@@ -268,6 +269,12 @@ module.exports = {
     // having to parse `index.html`.
     new ManifestPlugin({
       fileName: 'asset-manifest.json'
+    }),
+    // Run Flow only if we see some @ flow annotations, will error on CI
+    new FlowTypecheckPlugin({
+      otherFlowTypedDefs: {
+        jest: "17.0.0"
+      }
     })
   ],
   // Some libraries import Node modules but don't use them in the browser.

packages/react-scripts/scripts/start.js

@@ -94,6 +94,12 @@ function setupCompiler(host, port, protocol) {
 
     if (isSuccessful) {
       console.log(chalk.green('Compiled successfully!'));
+      if (messages.isFlowIntegrationErrorMessage) {
+        console.log(chalk.yellow('Flow checks were skipped.'));
+      }
+      if (stats.compilation.flowPassed) {
+        console.log(chalk.green('Flow checks have passed.'));
+      }
     }
 
     if (showInstructions) {
@@ -131,6 +137,12 @@ function setupCompiler(host, port, protocol) {
       console.log('You may use special comments to disable some warnings.');
       console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.');
       console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.');
+      console.log('Use ' + chalk.yellow('// $FlowFixMe') + ' to ignore flow-related warnings on the next line.');
+    }
+
+    // We print why flow was disabled
+    if (messages.isFlowIntegrationErrorMessage) {
+      console.log(messages.isFlowIntegrationErrorMessage);
     }
   });
 }

packages/react-scripts/template/README.md

@@ -479,17 +479,15 @@ Now you are ready to use the imported React Bootstrap components within your com
 
 Flow is a static type checker that helps you write code with fewer bugs. Check out this [introduction to using static types in JavaScript](https://medium.com/@preethikasireddy/why-use-static-types-in-javascript-part-1-8382da1e0adb) if you are new to this concept.
 
-Recent versions of [Flow](http://flowtype.org/) work with Create React App projects out of the box. 
+Flow typing is now supported out of the box. All you have to do is add the `/* @flow */` comment on top of files you
+want to typecheck. If no `.flowconfig` is present, one will be generated for you. The script will also download type
+definitions from [flow-typed](https://github.com/flowtype/flow-typed) automatically.
 
-To add Flow to a Create React App project, follow these steps:
+Flow errors will show up alongside ESLint errors as you work on your application.
 
-1. Run `npm install --save-dev flow-bin`.
-2. Add `"flow": "flow"` to the `scripts` section of your `package.json`.
-3. Add `// @flow` to any files you want to type check (for example, to `src/App.js`).
+>Note: If your global flow installation version differs from react-scripts's flow version, you may experience slower compilation times while going back and forth between your app and your IDE (that may use your global flow). Ensure you have the same `flow-bin` version [here](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-dev-utils/package.json).
 
-Now you can run `npm run flow` to check the files for type errors.
 You can optionally use an IDE like [Nuclide](https://nuclide.io/docs/languages/flow/) for a better integrated experience.
-In the future we plan to integrate it into Create React App even more closely.
 
 To learn more about Flow, check out [its documentation](https://flowtype.org/).