fix: Correctly unwrap utility types when resolving type spreads (#280)

Author: danez

src/__tests__/__snapshots__/main-test.js.snap

@@ -631,3 +631,66 @@ Object {
   },
 }
 `;
+
+exports[`main fixtures processes component "component_15.js" without errors 1`] = `
+Object {
+  "composes": Array [
+    "BarProps",
+    "BarProps2",
+    "BarProps3",
+  ],
+  "description": "",
+  "displayName": "Foo",
+  "methods": Array [],
+  "props": Object {
+    "other": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'a'",
+      },
+      "required": true,
+    },
+    "other2": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'b'",
+      },
+      "required": true,
+    },
+    "other3": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'c'",
+      },
+      "required": true,
+    },
+    "other4": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'g'",
+      },
+      "required": true,
+    },
+    "other5": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'f'",
+      },
+      "required": true,
+    },
+    "somePropOverride": Object {
+      "description": "",
+      "flowType": Object {
+        "name": "literal",
+        "value": "'baz'",
+      },
+      "required": true,
+    },
+  },
+}
+`;

src/__tests__/fixtures/component_15.js

@@ -0,0 +1,25 @@
+import type {Props as BarProps} from 'Bar.react';
+
+const Bar = require('Bar.react');
+
+type A = { other3: 'c' };
+type B = $Exact<{ other4: 'g' }>;
+type C = $Exact<$ReadOnly<{ other5: 'f' }>>;
+
+type Props = {|
+  ...$Exact<BarProps>,
+  ...$Exact<$ReadOnly<BarProps2>>,
+  ...BarProps3,
+  ...{ other: 'a' },
+  ...$Exact<{ other2: 'b' }>,
+  ...A,
+  ...B,
+  ...C,
+  somePropOverride: 'baz',
+|};
+
+export default class Foo extends React.Component<Props> {
+  render() {
+    return <Bar {...this.props} />;
+  }
+}

src/handlers/flowTypeHandler.js

@@ -20,16 +20,29 @@ import getFlowTypeFromReactComponent, {
 } from '../utils/getFlowTypeFromReactComponent';
 import resolveToValue from '../utils/resolveToValue';
 import setPropDescription from '../utils/setPropDescription';
+import {
+  isSupportedUtilityType,
+  unwrapUtilityType,
+} from '../utils/flowUtilityTypes';
 
 const {
   types: { namedTypes: types },
 } = recast;
 function setPropDescriptor(documentation: Documentation, path: NodePath): void {
   if (types.ObjectTypeSpreadProperty.check(path.node)) {
-    const name = path
-      .get('argument')
-      .get('id')
-      .get('name');
+    let argument = path.get('argument');
+    while (isSupportedUtilityType(argument)) {
+      argument = unwrapUtilityType(argument);
+    }
+
+    if (types.ObjectTypeAnnotation.check(argument.node)) {
+      applyToFlowTypeProperties(argument, propertyPath => {
+        setPropDescriptor(documentation, propertyPath);
+      });
+      return;
+    }
+
+    const name = argument.get('id').get('name');
     const resolvedPath = resolveToValue(name);
 
     if (resolvedPath && types.TypeAlias.check(resolvedPath.node)) {

src/utils/flowUtilityTypes.js

@@ -0,0 +1,39 @@
+/*
+ * Copyright (c) 2015, 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.
+ *
+ * @flow
+ *
+ */
+import recast from 'recast';
+
+const {
+  types: { namedTypes: types },
+} = recast;
+
+const supportedUtilityTypes = new Set(['$Exact', '$ReadOnly']);
+
+/**
+ * See `supportedUtilityTypes` for which types are supported and
+ * https://flow.org/en/docs/types/utilities/ for which types are available.
+ */
+export function isSupportedUtilityType(path: NodePath): boolean {
+  if (types.GenericTypeAnnotation.check(path.node)) {
+    const idPath = path.get('id');
+    return Boolean(idPath) && supportedUtilityTypes.has(idPath.node.name);
+  }
+  return false;
+}
+
+/**
+ * Unwraps well known utility types. For example:
+ *
+ *   $ReadOnly<T> => T
+ */
+export function unwrapUtilityType(path: NodePath): NodePath {
+  return path.get('typeParameters', 'params', 0);
+}

src/utils/getFlowTypeFromReactComponent.js

@@ -17,13 +17,16 @@ import isStatelessComponent from '../utils/isStatelessComponent';
 import isUnreachableFlowType from '../utils/isUnreachableFlowType';
 import recast from 'recast';
 import resolveToValue from '../utils/resolveToValue';
+import {
+  isSupportedUtilityType,
+  unwrapUtilityType,
+} from '../utils/flowUtilityTypes';
+import resolveGenericTypeAnnotation from '../utils/resolveGenericTypeAnnotation';
 
 const {
   types: { namedTypes: types },
 } = recast;
 
-const supportedUtilityTypes = new Set(['$Exact', '$ReadOnly']);
-
 /**
  * Given an React component (stateless or class) tries to find the
  * flow type for the props. If not found or not one of the supported
@@ -93,41 +96,3 @@ export function applyToFlowTypeProperties(
     }
   }
 }
-
-function resolveGenericTypeAnnotation(path: NodePath): ?NodePath {
-  // If the node doesn't have types or properties, try to get the type.
-  let typePath: ?NodePath;
-  if (path && isSupportedUtilityType(path)) {
-    typePath = unwrapUtilityType(path);
-  } else if (path && types.GenericTypeAnnotation.check(path.node)) {
-    typePath = resolveToValue(path.get('id'));
-    if (isUnreachableFlowType(typePath)) {
-      return;
-    }
-
-    typePath = typePath.get('right');
-  }
-
-  return typePath;
-}
-
-/**
- * See `supportedUtilityTypes` for which types are supported and
- * https://flow.org/en/docs/types/utilities/ for which types are available.
- */
-function isSupportedUtilityType(path: NodePath): boolean {
-  if (types.GenericTypeAnnotation.check(path.node)) {
-    const idPath = path.get('id');
-    return Boolean(idPath) && supportedUtilityTypes.has(idPath.node.name);
-  }
-  return false;
-}
-
-/**
- * Unwraps well known utility types. For example:
- *
- *   $ReadOnly<T> => T
- */
-function unwrapUtilityType(path: NodePath): ?NodePath {
-  return path.get('typeParameters', 'params', 0);
-}

src/utils/resolveGenericTypeAnnotation.js

@@ -0,0 +1,44 @@
+/*
+ * Copyright (c) 2015, 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.
+ *
+ * @flow
+ *
+ */
+
+import isUnreachableFlowType from '../utils/isUnreachableFlowType';
+import recast from 'recast';
+import resolveToValue from '../utils/resolveToValue';
+import { isSupportedUtilityType, unwrapUtilityType } from './flowUtilityTypes';
+
+const {
+  types: { namedTypes: types },
+} = recast;
+
+/**
+ * Given an React component (stateless or class) tries to find the
+ * flow type for the props. If not found or not one of the supported
+ * component types returns null.
+ */
+export default function resolveGenericTypeAnnotation(
+  path: NodePath,
+): ?NodePath {
+  // If the node doesn't have types or properties, try to get the type.
+  let typePath: ?NodePath;
+  if (path && isSupportedUtilityType(path)) {
+    typePath = unwrapUtilityType(path);
+  } else if (path && types.GenericTypeAnnotation.check(path.node)) {
+    typePath = resolveToValue(path.get('id'));
+    if (isUnreachableFlowType(typePath)) {
+      return;
+    }
+
+    typePath = typePath.get('right');
+  }
+
+  return typePath;
+}