Add flow typechecking as a webpack plugin

packages/react-dev-utils/FlowTypecheckPlugin.js

@@ -0,0 +1,220 @@
+/**
+ * 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 fs = require('fs');
+const path = require('path');
+const chalk = require('chalk');
+const childProcess = require('child_process');
+const flowBinPath = require('flow-bin');
+
+function exec(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 createVersionWarning(flowVersion) {
+ return 'Flow: ' +
+ chalk.red(
+ chalk.bold(
+ `Your global flow version is incompatible with this tool.
+To fix warning, uninstall it or run \`npm install -g flow-bin@${flowVersion}\`.`
+ )
+ );
+}
+
+function formatFlowErrors(error) {
+ return error
+ .toString()
+ .split('\n')
+ .filter(line => {
+ return !(/flow is still initializing/.test(line) ||
+ /Found \d+ error/.test(line) ||
+ /The flow server is not responding/.test(line) ||
+ /Going to launch a new one/.test(line) ||
+ /The flow server is not responding/.test(line) ||
+ /Spawned flow server/.test(line) ||
+ /Logs will go to/.test(line) ||
+ /version didn't match the client's/.test(line));
+ })
+ .map(line => line.replace(/^Error:\s*/, ''))
+ .join('\n');
+}
+
+function getFlowVersion(global) {
+ return exec(global ? 'flow' : flowBinPath, ['version', '--json'])
+ .then(data => JSON.parse(data.toString('utf8')).semver || '0.0.0')
+ .catch(() => null);
+}
+
+class FlowTypecheckPlugin {
+ constructor() {
+ this.shouldRun = false;
+ this.flowStarted = false;
+ this.flowStarting = null;
+
+ this.flowVersion = require(path.join(
+ __dirname,
+ 'package.json'
+ )).dependencies['flow-bin'];
+ }
+
+ startFlow(cwd) {
+ if (this.flowStarted) {
+ return Promise.resolve();
+ }
+ if (this.flowStarting != null) {
+ return this.flowStarting.then(err => {
+ // We need to do it like this because of unhandled rejections
+ // ... basically, we can't actually reject a promise unless someone
+ // has it handled -- which is only the case when we're returned from here
+ if (err != null) {
+ throw err;
+ }
+ });
+ }
+ console.log(chalk.cyan('Starting the flow server ...'));
+ const flowConfigPath = path.join(cwd, '.flowconfig');
+ let delegate;
+ this.flowStarting = new Promise(resolve => {
+ delegate = resolve;
+ });
+ return getFlowVersion(true)
+ .then(globalVersion => {
+ if (globalVersion === null) return;
+ return getFlowVersion(false).then(ourVersion => {
+ if (globalVersion !== ourVersion) {
+ return Promise.reject('__FLOW_VERSION_MISMATCH__');
+ }
+ });
+ })
+ .then(
+ () => new Promise(resolve => {
+ fs.access(flowConfigPath, err => {
+ if (err) {
+ resolve(exec(flowBinPath, ['init'], { cwd }));
+ } else {
+ resolve();
+ }
+ });
+ })
+ )
+ .then(() => exec(flowBinPath, ['stop'], {
+ cwd,
+ }))
+ .then(() => exec(flowBinPath, ['start'], { cwd }).catch(err => {
+ if (
+ typeof err.message === 'string' &&
+ err.message.indexOf('There is already a server running') !== -1
+ ) {
+ return true;
+ } else {
+ throw err;
+ }
+ }))
+ .then(() => {
+ this.flowStarted = true;
+ delegate();
+ this.flowStarting = null;
+ })
+ .catch(err => {
+ delegate(err);
+ this.flowStarting = null;
+ throw err;
+ });
+ }
+
+ apply(compiler) {
+ compiler.plugin('compile', () => {
+ this.shouldRun = false;
+ });
+
+ compiler.plugin('compilation', compilation => {
+ compilation.plugin('normal-module-loader', (loaderContext, module) => {
+ if (
+ this.shouldRun ||
+ module.resource.indexOf('node_modules') !== -1 ||
+ !/[.]js(x)?$/.test(module.resource)
+ ) {
+ return;
+ }
+ const contents = loaderContext.fs.readFileSync(module.resource, 'utf8');
+ if (
+ /^\s*\/\/.*@flow/.test(contents) || /^\s*\/\*.*@flow/.test(contents)
+ ) {
+ this.shouldRun = true;
+ }
+ });
+ });
+
+ // Run lint checks
+ compiler.plugin('emit', (compilation, callback) => {
+ if (!this.shouldRun) {
+ callback();
+ return;
+ }
+ const cwd = compiler.options.context;
+ const first = this.flowStarting == null && !this.flowStarted;
+ this.startFlow(cwd)
+ .then(() => {
+ if (first) {
+ console.log(
+ chalk.yellow(
+ 'Flow is initializing, ' +
+ chalk.bold('this might take a while...')
+ )
+ );
+ } else {
+ console.log('Running flow...');
+ }
+ exec(flowBinPath, ['status', '--color=always'], { cwd })
+ .then(() => {
+ callback();
+ })
+ .catch(e => {
+ compilation.warnings.push(formatFlowErrors(e));
+ callback();
+ });
+ })
+ .catch(e => {
+ if (e === '__FLOW_VERSION_MISMATCH__') {
+ compilation.warnings.push(createVersionWarning(this.flowVersion));
+ } else {
+ compilation.warnings.push(
+ 'Flow: Type checking has been disabled due to an error in Flow.'
+ );
+ }
+ callback();
+ });
+ });
+ }
+}
+
+module.exports = FlowTypecheckPlugin;

packages/react-dev-utils/formatWebpackMessages.js

@@ -117,7 +117,9 @@ function formatWebpackMessages(json) {
  return 'Error in ' + formatMessage(message);
  });
  var formattedWarnings = json.warnings.map(function(message) {
- return 'Warning in ' + formatMessage(message);
+ var formattedMessage = formatMessage(message);
+ if (/^Flow: /.test(message)) return formattedMessage;
+ return 'Warning in ' + formattedMessage;
  });
  var result = {
  errors: formattedErrors,

packages/react-dev-utils/package.json

@@ -16,6 +16,7 @@
  "clearConsole.js",
  "crashOverlay.js",
  "FileSizeReporter.js",
+ "FlowTypecheckPlugin.js",
  "formatWebpackMessages.js",
  "getProcessForPort.js",
  "InterpolateHtmlPlugin.js",
@@ -31,6 +32,7 @@
  "chalk": "1.1.3",
  "escape-string-regexp": "1.0.5",
  "filesize": "3.3.0",
+ "flow-bin": "0.45.0",
  "gzip-size": "3.0.0",
  "html-entities": "1.2.0",
  "opn": "4.0.2",

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

@@ -16,6 +16,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
+var FlowTypecheckPlugin = require('react-dev-utils/FlowTypecheckPlugin');
 const getClientEnvironment = require('./env');
 const paths = require('./paths');
 
@@ -241,6 +242,8 @@ module.exports = {
  // 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),
+ // Run Flow on files with the @flow header
+ new FlowTypecheckPlugin(),
  ],
  // 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

@@ -16,6 +16,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
+var FlowTypecheckPlugin = require('react-dev-utils/FlowTypecheckPlugin');
 const paths = require('./paths');
 const getClientEnvironment = require('./env');
 
@@ -277,6 +278,8 @@ module.exports = {
  new ManifestPlugin({
  fileName: 'asset-manifest.json',
  }),
+ // Run Flow on files with the @flow header
+ new FlowTypecheckPlugin(),
  ],
  // 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/scripts/utils/createWebpackCompiler.js

@@ -112,6 +112,12 @@ module.exports = function createWebpackCompiler(config, onReadyCallback) {
  chalk.yellow('/* eslint-disable */') +
  ' to ignore all warnings in a file.'
  );
+ // Teach some Flow tricks.
+ console.log(
+ 'Use ' +
+ chalk.yellow('// $FlowFixMe') +
+ ' to ignore flow-related warnings on the next line.'
+ );
  }
  });
 

packages/react-scripts/template/README.md

@@ -646,24 +646,21 @@ We suggest the following approach:
 
 Here is an example of adding a [customized Bootstrap](https://medium.com/@tacomanator/customizing-create-react-app-aa9ffb88165) that follows these steps.
 
-## Adding Flow
+## Using Flow
 
 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 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.
 
-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` (or `yarn add --dev flow-bin`).
-2. Add `"flow": "flow"` to the `scripts` section of your `package.json`.
-3. Run `npm run flow -- init` (or `yarn flow -- init`) to create a [`.flowconfig` file](https://flowtype.org/docs/advanced-configuration.html) in the root directory.
-4. 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` (or `yarn 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/).
+You may also want to learn how to use definitions from [flow-typed](https://github.com/flowtype/flow-typed).
 
 ## Adding Custom Environment Variables
 

tasks/e2e-simple.sh

@@ -227,6 +227,7 @@ exists build/static/js/*.js
 exists build/static/css/*.css
 exists build/static/media/*.svg
 exists build/favicon.ico
+test ! -e .flowconfig
 
 # Run tests with CI flag
 CI=true npm test
@@ -239,6 +240,16 @@ npm start -- --smoke-test
 # Test environment handling
 verify_env_url
 
+# Test optional flow enabling
+cp src/App.js src/App.backup.js
+echo "/* @flow */" > src/App.js
+cat src/App.backup.js >> src/App.js
+npm start -- --smoke-test
+test -e .flowconfig
+rm src/App.js
+cp src/App.backup.js src/App.js
+rm src/App.backup.js
+
 # ******************************************************************************
 # Finally, let's check that everything still works after ejecting.
 # ******************************************************************************
@@ -275,5 +286,14 @@ npm start -- --smoke-test
 # Test environment handling
 verify_env_url
 
+# Test optional flow enabling
+cp src/App.js src/App.backup.js
+cp .gitignore .gitignore.backup
+echo "/* @flow */" > src/App.js
+cat src/App.backup.js >> src/App.js
+npm start -- --smoke-test
+cp src/App.backup.js src/App.js
+rm src/App.backup.js
+
 # Cleanup
 cleanup