feat: add opt-out for prestet-flow to work with @babel/preset-typescript (#3865)

* feat: add opt-out for prestet-flow to work with @babel/preset-typescript

* docs: adding example in readme

Author: oieduardorabelo

packages/babel-preset-react-app/README.md

@@ -24,10 +24,27 @@ npm install babel-preset-react-app --save-dev
 
 Then create a file named `.babelrc` with following contents in the root folder of your project:
 
-  ```js
-  {
-    "presets": ["react-app"]
-  }
-  ```
+```js
+{
+  "presets": ["react-app"]
+}
+```
 
 This preset uses the `useBuiltIns` option with [transform-object-rest-spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/) and [transform-react-jsx](http://babeljs.io/docs/plugins/transform-react-jsx/), which assumes that `Object.assign` is available or polyfilled.
+
+## Usage with TypeScript
+
+To use this package with [`@babel/preset-typescript`](https://www.npmjs.com/package/@babel/preset-typescript), you need to disable `@babel/preset-flow` first.
+
+You can achieve this by doing:
+
+```
+{
+  "presets": [
+    ["react-app", {
+        "flow": false
+    }],
+    "@babel/typescript"
+  ]
+}
+```

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

@@ -6,6 +6,18 @@
  */
 'use strict';
 
+const validateBoolOption = (name, value, defaultValue) => {
+  if (typeof value === 'undefined') {
+    value = defaultValue;
+  }
+
+  if (typeof value !== 'boolean') {
+    throw new Error(`Preset react-app: '${name}' option must be a boolean.`);
+  }
+
+  return value;
+};
+
 module.exports = function(api, opts) {
   if (!opts) {
     opts = {};
@@ -21,6 +33,8 @@ module.exports = function(api, opts) {
   var isEnvDevelopment = env === 'development';
   var isEnvProduction = env === 'production';
   var isEnvTest = env === 'test';
+  var isFlowEnabled = validateBoolOption('flow', opts.flow, true);
+
   if (!isEnvDevelopment && !isEnvProduction && !isEnvTest) {
     throw new Error(
       'Using `babel-preset-react-app` requires that you specify `NODE_ENV` or ' +
@@ -64,7 +78,7 @@ module.exports = function(api, opts) {
           development: isEnvDevelopment || isEnvTest,
         },
       ],
-      [require('@babel/preset-flow').default],
+      isFlowEnabled && [require('@babel/preset-flow').default],
     ].filter(Boolean),
     plugins: [
       // Experimental macros support. Will be documented after it's had some time